@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caudex:ital,wght@0,400;0,700;1,400;1,700&display=swap');


:root { 



}


#about_con {  position: relative; padding: 45px 25px 0;}

#breadcrumbs { margin-bottom: 83px; }

.about_top{position: relative;}
.about_info{width: 663px; max-width: 49%; margin-left: auto;}
.about_info h2{font-family: var(--secFont); font-size: 60px; font-weight: 700; line-height: 103%; margin: 0;}
.about_info h2 small{display: block; font-family: var(--priFont); font-size: 20px; font-weight: 400; color: #333; line-height: 100%; text-transform: uppercase; margin-bottom: 6px; position: relative; padding-left: 35px; width: fit-content;}
.about_info h2:after{content: ""; display: block; width: 40px; height: 5px; background: var(--priColor); border-radius: 10px; margin-top: 31px;}
.about_info p{margin: 36px 0 0;}

.about_info h2 small::before{content: ""; width: 15px; aspect-ratio: 1/1; background: var(--secColor); border-radius: 50%; position: absolute; top: 1px; left: 1px; z-index: 1;}
.about_info h2 small::after{content: ""; width: 15px; aspect-ratio: 1/1; background: var(--priColor); border-radius: 50%; position: absolute; top: 1px; left: 8px;}

.about_img{ width: 546px; max-width: 43%; overflow: hidden; border-radius: 23px; position: absolute; top: 2px; left: 69px; z-index: 20;}
.about_img img{max-width: initial; margin-left: 50%; transform: translateX(-50%);}



.about_mid{width: 100%; min-height: 411px; background: var(--priColor); border-radius: 21px; margin-top: 72px; padding: 98px 110px 80px; position: relative; z-index: 10;}
.about_mission{width: 551px; max-width: 48%; margin-left: auto; color: #fff;}
.about_mission h2{font-family: var(--secFont); font-size: 60px; font-weight: 700; line-height: 103%; margin: 0;}
.about_mission h2 small{display: block; font-family: var(--priFont); font-size: 20px; font-weight: 400; line-height: 100%; text-transform: uppercase; margin-bottom: 6px; position: relative; padding-left: 35px; width: fit-content;}
.about_mission h2:after{content: ""; display: block; width: 40px; height: 5px; background: #fff; border-radius: 10px; margin-top: 29px;}
.about_mission p{margin: 32px 0 0;}

.about_mission h2 small::before{content: ""; width: 15px; aspect-ratio: 1/1; background: #fff; border-radius: 50%; position: absolute; top: 1px; left: 1px; z-index: 1;}
.about_mission h2 small::after{content: ""; width: 15px; aspect-ratio: 1/1; background: var(--priColor); border-radius: 50%; position: absolute; top: 1px; left: 8px;}


.about_mission p { color: white; } .about_vision p { color: white; text-align: center; }

.about_btm{width: 100%; min-height: 875px; position: relative; margin-top: -241px; padding: 350px 0 80px; isolation: isolate;}
.about_btm::before{content: ""; width: 1920px; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6)), url(images/GW49VW2.webp) no-repeat center center/cover; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}
.about_vision{width: 870px; max-width: 100%; margin: 0 auto; color: #fff; text-align: center;}
.about_vision h2{font-family: var(--secFont); font-size: 60px; font-weight: 700; line-height: 103%; margin: 0;}
.about_vision h2:after{content: ""; display: block; width: 40px; height: 5px; background: #fff; border-radius: 10px; margin: 28px auto 0;}
.about_vision p{margin: 32px 0 0;}

.about_vision ul li {text-align: left;}
.about_vision ul {margin-top: 30px;}

/* Media Queries */
@media only screen and (max-width:1400px) {
   
}
@media only screen and (max-width:1300px) {
    .about_img { left: 30px; }
    .about_info h2 { font-size: 50px; }
    .about_mission h2 { font-size: 50px; }
    .about_vision h2 { font-size: 50px; }
    
}
@media only screen and (max-width:1000px) {
    .about_info { width: 100%; max-width: 100%; margin-left: 0; text-align: center; }
    .about_info h2 small { margin: 0 auto 5px; }
    .about_info h2::after { margin: 30px auto 0; }

    .about_img { width: 400px; max-width: 100%; position: static; margin: 40px auto 0; }
    .about_img img { max-width: 100%; margin-left: 0; transform: none; }

    .about_mid { min-height: 0; padding: 60px 20px; margin-top: 60px;}
    .about_mission { width: 100%; max-width: 100%; margin-left: 0; text-align: center; }
    .about_mission h2 small { margin: 0 auto 5px; }
    .about_mission h2::after { margin: 30px auto 0; }

    .about_btm { min-height: 0; margin-top: 60px; padding: 60px 10px; }
    #about_con { padding: 45px 25px 0; }
    .about_mission p { text-align: center; }
    .about_info p { text-align: center; }
}


@media only screen and (max-width:800px) {
    
}

@media only screen and (max-width:600px) {

}