:root{


    --primaryTxtColor: #333333;
    /* --secTxtColor: ; */

    --white: #fff;
    --black: #000;


}
/* body:before{content:''; background: url(screenshot.jpg); width: 100%; height: 100%; position: absolute; inset: 0;} */

.para{ margin: 0;}
#about_con {  position: relative; padding: 45px 25px 0;   font-size: var(--bodySize); font-family: var(--secFont); color: var(--bodyColor); line-height: var(--bodyHeight); font-weight: var(--bodyWeight);}
#about_con .wrapper {max-width: 1440px;margin: 0 auto;}
h1, h2 {font-family: var(--priFont); padding: 0; margin: 0; line-height: 100%;}

.heading2{font:600 55px/100% var(--priFont); position: relative; color: var(--primaryTxtColor);   margin: 0 0 36px;}
.heading2 span{display: block;}
.margin0{margin: 0;}
.dynamic_img{ max-width: initial; position: relative; left: 50%; transform: translateX(-50%); object-fit: cover; object-position: center; height: 100%;}

.about_top_area { min-height: 657px; padding: 115px 0 0; position: relative;}
.about_comp_info { width: 100%; max-width: 590px; padding-left: 15px;  }
.about_comp_info h2 { }
.about_comp_info p { margin-bottom: 24px; }

.about_comp_figure_holder { position: absolute; bottom: 0; right: 0; width: 42.1%;  }
.about_comp_figure_holder::before { content: ''; position: absolute; right: -239px; top: -179px; background: var(--secColor); width: 419px; height: 410px; }
.about_comp_figure_holder figure {overflow: hidden; width: 100%;}
.about_comp_figure_holder figure img { }

.about_middle_area { position: relative; min-height: 775px; background: var(--priColor); padding: 157px 0 0; scroll-margin-top: 160px;}
.about_middle_area::after { content: ''; position: absolute; right: -239px; background: var(--priColor); width: 239px; height: 100%; top: 0; }
.about_middle_img_holder { position: absolute; left: -233px; top: 0; width: 59.5%;  overflow: hidden;}
.about_middle_img_holder figure{}
.about_middle_img_holder figure img{}

.mission_info { width: 100%; max-width: 583px; margin: 0 0 0 auto; color: var(--white);}
.mission_info h2 { color: inherit; }
.mission_info p { color: inherit; margin-bottom: 25px; }

.vision_info { width: 100%; max-width: 829px; color: var(--white); text-align: center; min-height: 0; position: absolute; bottom: -370px; left: 0; right: 0; margin: 0 auto; padding: 99px 120px 99px; background: var(--secColor); z-index: 1;}
.vision_info h2 { color: inherit; }
.vision_info p { color: inherit; }
.vision_info p { text-align: center; }

.about_btm_bg { width: 1920px; margin-left: 50%; position: relative; transform: translateX(-50%); }
.about_btm_bg::before { content: ''; position: absolute; width: 100%; height: 100%; inset: 0; background: var(--black); opacity: 0.52; }
/* Media Queries */
@media only screen and (max-width:1440px) {
    .about_comp_info { width: 50%; }
    .about_comp_info h2{font-size: 45px;}
    .about_middle_img_holder { left: -25px; width: 45%; }
    .mission_info { max-width: 600px; }
}
@media only screen and (max-width:1300px) {
}
@media only screen and (max-width:1200px) {
    .mission_info { max-width: 500px; }
    .about_middle_img_holder {width: 50%;}
}
@media only screen and (max-width:1100px) {
    .mission_info { max-width: 410px; }
    .about_middle_img_holder {width: 56%;}
    .about_middle_area { padding: 96px 0 0; }
}
@media only screen and (max-width:1000px) {
    .about_top_area { min-height: 0; padding: 25px 0; text-align: center; }
    .about_comp_info { width: 100%; max-width: 100%; padding: 0; }
    .about_comp_figure_holder { width: max-content; overflow: unset; max-width: 64%; margin: 0 auto; position: static; }
    .about_comp_figure_holder::before{display: none;}
    .dynamic_img { max-width: 100%; left: 0; transform: unset; }
    .about_middle_area { padding: 40px 0; background: unset; text-align: center; }
    .about_middle_img_holder { overflow: unset; width: max-content; max-width: 56%; margin: 50px auto; position: static;}
    .about_middle_area::after { left: 50%; width: 1920px; z-index: -1; right: auto; transform: translateX(-50%); }
    .mission_info { background: var(--secColor); padding: 40px 25px; width: 90%; max-width: 100%; margin: 0 auto; }
    .vision_info {position: static; width: 90%; max-width: 100%; min-height: 0; padding: 40px 25px; }
    .about_btm_bg { max-width: 130%; background-size: cover; }

    .about_comp_info p { text-align: center; } 
    .mission_info p { text-align: center; }
}
@media only screen and (max-width:800px) {
}

@media only screen and (max-width:600px) {
    .about_btm_bg { max-width: 250%; }
    .mission_info, .vision_info{width: 100%;}
    .heading2{font-size: 45px;}
    .about_comp_figure_holder, .about_middle_img_holder { width: 90%; max-width: 100%; }
}