@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root { 
	--primary-hdng: "Syne", serif;
	--sec-hdng: "Cairde Luvia", sans-serif;
	--primary-color: #1f2851;
	--sec-color: #006836;
    --tertiary-color: linear-gradient(93deg, #1f2851 -295%, #006836 238%);

}


#about_con{padding: 45px 25px 45px;}
#about_con .wrapper {max-width: 1400px;}
.about_top_info { position: relative; margin-top: 50px; }
.about_flex { position: relative; display: flex; justify-content: space-between; column-gap: 20px; }
.about_info { position: relative; width: 100%; max-width: 567px; }
.about_info h2 { font-family: var(--primary-hdng); font-size: 60px;  line-height: 100%; position: relative; }
.about_info h2 span { display: block; margin-top: 7px; }
.about_info h2::after { content: url(images/line1.png); display: block; margin: 10px 0 45px; pointer-events: none; }
.about_info p { margin-bottom: 30px; }
.about_img figure { border-radius: 29px; pointer-events: none; }
.about_img figure img { border-radius: 29px; }

#mission { position: relative; width: 100%; max-width: 1059px; background: var(--tertiary-color); min-height: 355px; color: #fff; padding: 85px 80px; border-radius: 38px; top: -190px; left: 315px; }
.mission_flex{display: flex; justify-content: space-between; column-gap: 80px;align-items: center;}
#mission h2 { font-family: var(--primary-hdng); font-size: 60px; line-height: 100%;  position: relative; }
#mission h2::after { content: url(images/line2.png); display: block; margin: 0; pointer-events: none; }

.about_btm_info { position: relative; margin-top: -80px; text-align: center; margin-bottom: 70px; }
.about_btm_info h2 { font-family: var(--primary-hdng); font-size: 60px; line-height: 100%; margin-bottom: 35px; }
.about_btm_info p { width: 880px; max-width: 100%; margin: 0 auto !important; text-align: center; }
.about_boxes { position: relative; display: flex; justify-content: space-between; margin-bottom: 80px;}
.about_boxes section { display: inline-block; height: auto; vertical-align: middle; text-align: center; width: 24%;position: relative;}
.about_boxes section h2 { font-family: var(--primary-hdng); font-size: 32px; line-height: 100%;  margin-bottom: 20px; }
.about_boxes section p { text-align: center; }
.about_boxes section figure{margin-bottom: 30px;border-radius: 18px;pointer-events: none;}
.about_boxes section figure img{border-radius: 18px;}

.mission_flex p {color: white;}

/* Responsive */
@media only screen
and (max-width : 1420px) {
	#mission { left: 0; right: 0; margin: 0 auto; }
	.about_img { width: 50%; }
	.about_img figure { overflow: hidden; }
	.about_img figure img { max-width: initial; margin-left: 50%; transform: translateX(-50%); }
}

@media only screen
and (max-width : 1000px) {
.about_boxes { justify-content: center; flex-wrap: wrap; row-gap: 60px; column-gap: 20px; }
.about_boxes section { width: 42%; }
.about_flex { display: block; }
.about_img { width: 100%; margin: 0 auto 50px; text-align: center; }
.about_img figure { overflow: unset; }
.about_img figure img { max-width: 100%; margin-left: unset; transform: none; margin: 0 auto; text-align: center; }
#mission { left: unset; right: unset; margin: 40px auto; top: unset; text-align: center; padding: 50px; }
.mission_flex { display: block; }
#mission h2::after { margin: -10px 0 20px; }
#mission p { text-align: center; }
.about_info { max-width: 100%; text-align: center; }
.about_info p { text-align: center; }
.about_info h2::after { margin: -10px 0 25px; }
.about_btm_info { margin-top: 0; margin: 0 auto 50px; }
}

@media only screen and (max-width: 600px) {
  .about_boxes section { width: 100%; max-width: 330px; }
	#mission { padding: 40px 20px; }
	.about_btm_info h2 { font-size: 50px; }
	#mission h2 { font-size: 50px; }
	.about_info h2 { font-size: 50px; }
}