:root {
    --iconColor: brightness(0) saturate(100%) invert(47%) sepia(35%) saturate(616%) hue-rotate(136deg) brightness(95%) contrast(93%);
    --hdrFontWeight:500;
}

#about_con { position: relative; padding: 45px 10px 67px; background: #fff;}
#about_con .wrapper {max-width: 1400px;margin: 0 auto;}

.about_company{display: flex;margin-top: 85px;column-gap: 11%;position: relative;}
.about_company figure{position: relative;width: 32.5%;}
.about_company::after{content: ""; position: absolute;display: block;width: 50px;height: 145px;background: url(images/about-dotted-bg.png) no-repeat center/100%;top: 0;left: 33.6%;filter: var(--iconColor); filter: brightness(0) saturate(100%) invert(9%) sepia(40%) saturate(7496%) hue-rotate(272deg) brightness(97%) contrast(102%);}
.about_company figure img{max-width: 453px;}
.about_company_content{width: 57%;}
.about_company_content .flex_con {display: flex;justify-content: space-between;column-gap: 10%;}
.about_company_content h2{position: relative;font-size: 55px;color: #333;font-weight: var(--hdrFontWeight);line-height: 100%;flex-shrink: 0;padding-top: 128px; font-family: var(--secFont); width: 200px;}
.about_company_content h2::before{content: "";display: block;width: 59px;height: 60px;position: absolute;top: 62px;left: 0;background: url(images/about-icon3.png) no-repeat top/100%;}
.about_company_content h2 small{display: block;line-height: 100%;font-size: 30px;color: var(--priColor); font-family: var(--priFont);}
.about_company_content p{padding-top: 54px;}

.company-mission-vision{min-height: 671px;display: flex;justify-content: space-between;padding-top: 202px; position: relative;z-index: 0;}
.company-mission-vision::after{content: ""; position: absolute;width: 138%;height: 100%;background: #f7f7f7;z-index: -1;top: 68px;left: 50%;transform: translateX(-50%);}
.company-mission-vision figure{position: relative;}
.company-mission-vision figure img{max-width: 541px;}

.img_container{position: relative;width: 41%;}
.img_container::before{content: ""; position: absolute;display: block;width: 50px;height: 145px;background: url(images/about-dotted-bg.png) no-repeat center/100%;top: 0;left: -71px;filter: var(--iconColor); filter: brightness(0) saturate(100%) invert(9%) sepia(40%) saturate(7496%) hue-rotate(272deg) brightness(97%) contrast(102%);}
.img_container::after{content: ""; position: absolute;display: block;width: 50px;height: 145px;background: url(images/about-dotted-bg.png) no-repeat center/100%;bottom: 69px;right: -71px;filter: var(--iconColor); filter: brightness(0) saturate(100%) invert(9%) sepia(40%) saturate(7496%) hue-rotate(272deg) brightness(97%) contrast(102%);}

.sub_content{position: relative;max-width: 429px;width: 100%;padding-top: 42px;}
.sub_content::after{content: ""; position: absolute;}

.flex-con{}

.about_vision{position: relative;}
.about_mission{position: relative;}

.about_vision::before{content: ""; position: absolute;display: block;width: 99px;height: 99px;background-image: url(images/about-icon2.png);background-color: var(--priColor);background-repeat: no-repeat;background-position: center center;background-size: 70%;top: -42px;left: 20px;}
.about_mission::after{content: ""; position: absolute;display: block;width: 99px;height: 99px;background-image: url(images/about-icon1.png);background-color: var(--priColor);background-repeat: no-repeat;background-position: center center;background-size: 50%;bottom: -4px;right: 20px;}

.sub_content h2{color: #333;line-height: 100%;font-size: 55px;margin-bottom: 20px; font-family: var(--secFont);}
.sub_content h2 span{}
.sub_content h2 small{display: block;line-height: 100%;font-size: 40px;color: var(--priColor);}
.sub_content p{max-width: 65%;}

.sub_content figure{}
.sub_content figure img{object-fit: cover;width: 100%;height: 100%;}

.content{}

.sub_content:first-of-type{}
#mission figure{}
.sub_content:last-of-type{}

#vision .about_vision, #vision .about_vision p {  text-align: right !important;margin-left: auto;}

.text_center, .text_center p{text-align: left; display: block;}
/* utility classes */
.figure-center{ overflow: hidden;}
.figure-center img{ margin-left: 50%; transform:translateX(-50%);}

/* Media Queries */
@media only screen and (max-width:1400px) {
   
}
@media only screen and (max-width:1200px) {
.about_company figure { width: 25%; } 
.about_company_content { width: 63%; } 
.img_container { width: 30%; } 
.about_company::after { left: 27.6%; } 
.about_mission::after { right: 8px; } 
.about_vision::before { left: 8px; } 
}
@media only screen and (max-width:1090px) {

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

/* utility classes */
/* .psuedo::before, .psuedo::after{display: none;} */
.text-align-center{text-align: center !important;} 

.main_content { max-width: 100%; min-height: auto; padding: 30px; position: static; background: #252525; width: 100%; text-align: center; } 
.text_center, .text_center p { text-align: center; } 
.main_content h2::after { right: 0; margin: 0 auto; } 
.main_content p { text-align: center !important; } 

#breadcrumbs { margin-bottom: 46px; text-align: left !important; flex-direction: row-reverse; width: 100%; column-gap: 23px; } 

#about_con { padding: 20px 10px 67px; } 
.about_company { margin-top: 80px; column-gap: 0; flex-direction: column; } 
.about_company::after { display: none; } 
.about_company figure { width: 100%; text-align: center;} 
.about_company_content {width: 100%;  } 
.about_company_content .flex_con {flex-direction: column; justify-content: center; align-items: center; }
.about_company_content h2 { text-align: center; } 
.about_company_content h2::before { right: 0; margin: 0 auto; } 
.about_company_content p { padding-top: 30px; text-align: center !important; } 
.company-mission-vision { flex-direction: column; row-gap: 40px; } 
.sub_content { max-width: 100%; } 
.img_container { width: 55%; margin: 0 auto; } 
.figure-center img {transform: none;margin: 0;width: 100%;max-width: 540px !important;}
.about_mission::after { right: 0; left: 0; margin: 0 auto; top: -117px; } 
.about_vision::before { left: 0; right: 0; margin: 0 auto; top: -114px; } 
.sub_content h2 { text-align: center; } 
.sub_content p { max-width: 100%; text-align: center !important; } 
#vision .about_vision, #vision .about_vision p { text-align: center !important; } 
.sub_content:last-of-type { padding-top: 145px; } 
}

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

@media only screen and (max-width:600px) {
    .img_container::before { display: none;}
    .img_container::after { display: none; } 
    .img_container { width: 100%; } 
}