@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');


:root {
    --header-font-color: #4055A9;
    --font-weight-100: 100;
    --font-weight-200: 200;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-100: 100;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-size--10: 10px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-28: 28px;
    --font-size-30: 30px;
    --body-font: #575A6E;
    --manorope-font-family: Manrope;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--manorope-font-family);
}

.breadcrumBackground {
    background: url("../img/about/background.png");
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px;
}

.about .experienceImgDivInner {
    left: 0;
    /* max-width: fit-content; */
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.about .experienceCard {
    background-color: white;
    padding: 0;
}

.experienceCardHeaderButton {
    border-radius: 100px;
    color: black;
    background-color: white;
    padding: 16px;
    font-family: var(--manorope-font-family);
    font-size: 19.33px;
    font-weight: 600;
    line-height: 26.41px;


}

.about .experienceCardHeader {
    font-family: var(--manorope-font-family);
    font-size: clamp(28px, 6vw, 36px);
    font-weight: var(--font-weight-700);
    line-height: 130% !important;
    color: black;
    padding-left: 15px;
}

.about .experienceCardHeaderBody {
    font-family: var(--manorope-font-family);
    font-size: clamp(12px, 5vw, var(--font-size-16));
    font-weight: var(--font-weight-500);
    line-height: 32px;
    color: var(--body-font);

}

.about .experienceCardHeaderSpan {
    border-left: 5px solid var(--header-font-color);
    position: absolute;
    left: 0;
    height: 100%;
}

.about .experienceCardHeaderButton {
    background-color: white;
}




.about .serviceTaxCard ul li {
    list-style: none;
    position: relative;
    padding-left: 2rem;
    font-family: var(--manorope-font-family);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-600);
    line-height: 21.86px;
    color: #575A6E;
}

.about .serviceTaxCard ul li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    background-image: url('../img/servicreLogo/check.svg');
    background-size: contain;
    background-repeat: no-repeat;
    ;
}

.about .serviceTaxCard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}



.aboutMissionCard {
    border-radius: 20px;
    background-color: white;
}

.bg-img-custom-aboutMission {
    background-color: #4055A9;
    min-width: 80px ;
    min-height: 80px;

}
.backgroundCustomColor{
     background: #FAFAFA;
    
}
.aboutCardHeading {
    font-family: var(--manorope-font-family);
    font-size: clamp(var(--font-size-16), 6vw, 24px);
    font-weight: var(--font-weight-700);
    line-height: 100%;
    color: black;
}

.aboutMissionCardBody p {
    font-family: var(--manorope-font-family);
    font-size: clamp(12px, 5vw, var(--font-size-16));
    font-weight: var(--font-weight-500);
    color: var(--body-font);
}

.coreValueSlideCard {
    background-image: url("../img/about/slider1Back.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 500px;


}

.coreValueSlideCardInner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    height: 85%;
    background-color: black;
    transition: 0.3s ease;
    z-index: -1;
    border-radius: 10px;
    background-color: black;
    opacity: 0.5;
    transform: translate(-50%, -50%);

}




.coreValueSlideCardInner p {
    font-family: var(--manorope-font-family);
    font-size: clamp(var(--font-size-20), 6vw, 32px);
    font-weight: var(--font-weight-800);
    color: white;
    text-align: center !important;
}


.coreValueSlideCardInner {
    /* display: flex; */
}


.coreValueSlideCardInnerHover {
    /* display: none; */
    font-family: var(--manorope-font-family);
    font-size: 32px;
    font-weight: var(--font-weight-800);
    color: white;
    opacity: 0;
    position: absolute;
    z-index: -2;
    display: flex;
}

.coreValueSlideCardInnerregular {
    height: 500px;
}

.coreValueSlideCardInnerregular .words {
    font-family: var(--manorope-font-family);
    font-size: clamp(var(--font-size-14), 6vw, var(--font-size-16));
    font-weight: var(--font-weight-500);


}

.coreValueSlideCardInner:hover::before {
    background-color: var(--header-font-color);
    opacity: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: unset;

}

.coreValueSlideCard:hover .coreValueSlideCardInner {
    width: 100%;
    height: 100%;
    transition: 0.5s;
}

.slick-prev:before,
.slick-next:before {
    color: black !important;
}

.slick-track {
    gap: 35px !important;
}

.coreValueSlideCardInnerregularInner {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease;
}


.coreValueSlideCard:hover .coreValueSlideCardInnerregularInner {
    /* position: absolute; */
    opacity: 1;

}

.coreValueSlideCard:hover .p1 {
    /* position: absolute; */
    opacity: 0;
}

.p1 {
    /* position: absolute; */
    opacity: 1;
    transition: opacity 0.5s ease;
    text-align: center;
    line-height: 115%;
}
.Transformation_text{
    line-height: 115%;
}
.customContainerForAbout {
    max-width: 1843px;
}

.about .infi-experienceImgEllipse {
    position: absolute;
    left: -135px;
    top: -51px;
    z-index: -1;
}

.dotCustomFont {
    color: var(--header-font-color);
    font-family: var(--manorope-font-family);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-500);
    background-color: #C4CAE4;

}

.backImage2 {
    background-image: url("../img/aboutSlideBack2.png");
}

.backImage3 {
    background-image: url("../img/aboutSlideBack3.png");
}


.backImage4 {
    background-image: url("../img/aboutSlideBack4.png");
}

.backImage5 {
    background-image: url("../img/aboutSildeBack5.png");
}

.backImage6 {
    background-image: url("../img/aboutSildeBack6.png");
}

.backImage7 {
    background-image: url("../img/aboutSildeBack7.png");
}

.backImage8 {
    background-image: url("../img/aboutSildeBack8.png");
}



@media only screen and (max-width: 1536px) {
    .about .infi-experienceImgEllipse {
        left: -31px;
    }
}

@media only screen and (max-width: 768px) {
    .about .infi-experienceImgEllipse {
        left: -51px;
        top: -35px;
    }

}












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

    .aboutWidth {
        width: 100%;
    }

  

    .aboutWidth {
        width: 100%;
    }


    .aboutWidth {
        width: 100%;
    }

   

}






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

   

   

}





.slick-dots li button:before {
    font-size: 10px !important;
}





.bannerTopText
{
font-weight: var(--font-weight-500);
font-size: var(--font-size-16);
line-height: 28px;

}

.aboutTextHeading{
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-500);
}
@media (min-width: 1024px) {
    .container {
        max-width: 900px !important;

    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1100px !important;
    }
}

@media (min-width: 1420px) {
    .container {
        max-width: 1100px !important;
    }
}

@media (min-width: 1560px) {
    .container {
        max-width: 1300px !important;
    }
}

@media (min-width: 1700px) {
    .container {
        max-width: 1400px !important;
    }
}

.aboutSubHeading {
    font-weight: var(--font-weight-700);
    font-size:clamp(var(--font-size-16),5vw,var(--font-size-22));
    line-height: 170%;
}
.aboutImageCustom{
    height: auto;
}
.slideIcon{
    color: var(--header-font-color);
    font-size: 30px;
}
.slideIconDiv {
    border-radius: 100%;
    /* padding: 20px; */
    background-color: white;
    height: 80px;
    width: 80px;
    display: flex
;
    justify-content: center;
    align-items: center;
    /* padding-bottom: 20px; */
    margin-bottom: 20px;
}

@media (max-width: 1536px) {
    /* .aboutImageCustom {
        height: unset ;
    } */
}

@media (max-width: 991px) {
    /* .aboutImageCustom {
        height: 490px;
    } */
}

@media (max-width: 768px) {
    /* .aboutImageCustom {
        height: unset !important;
    } */
    .aboutSubHeading {
        line-height: 130%;
    }
}