/*Common Section*/
 /*Common Section*/
:root {
    --themeColor: #182363;
    --themeColorRGBA: rgba(24,35,99, 1);
    --secondaryColor: #FF6500;
    --secondaryColorRGBA: rgba(255,101,0, 1);
    --bgColor: #E3EFFF;
    --lessBgColor: #0E1F2F;
    --bgBodyColor: #171717;
    --bgBodyColorRGBA: rgba(23, 23, 23, 1);
    --primaryTextColor: #464646;
    --secondaryTextColor: #CDCED0;
    --font-weight-bold: 700;
    --font-weight-regular: 400;
    --line-height: 1.5; 
    --fontFamilyHKGrotesk: 'HKGrotesk';
    --fontFamilyCabinetGrotesk: 'CabinetGrotesk';
    --fontFamilyMulish: 'Mulish';
    --color-white: white;
    --line-height-titles: 1.2;
    --grid-gap: 40px 60px;
    --box-shadow10: 1px 5px 10px 0px #DEECFF;
    --box-shadow20: 1px 5px 20px 0px #DEECFF;
    --box-shadow40: 0 .5rem 2rem rgba(0, 0, 0, .1);
    --box-shadow50: 0 .5rem 2rem rgba(0, 0, 0, .2);
    --themeColorRGBA01: rgba(24,35,99, 0.1);
    --themeColorRGBA02: rgba(24,35,99, 0.2);
    --themeColorRGBA03: rgba(24,35,99, 0.3);
    --themeColorRGBA04: rgba(24,35,99, 0.4);
    --themeColorRGBA05: rgba(24,35,99, 0.5);
    --themeColorRGBA06: rgba(24,35,99, 0.6);
    --themeColorRGBA07: rgba(24,35,99, 0.7);
    --themeColorRGBA08: rgba(24,35,99, 0.8);
    --themeColorRGBA09: rgba(24,35,99, 0.9);
    --Approved: #239B56;
    --New: #B03A2E;
    --InProgress: #F39C12;
    --OnHold: #FF5733;
    --Closed: #2ECC71;
    --Assigned: #0096CC;
      --bgImage: linear-gradient(90deg, 
        var(--themeColor), var(--secondaryColor));
}

body {

    transition: background-color .5s;
    background-color: var(--bgColor);
}

html {
    scroll-behavior: smooth;
}
 
@font-face {
    font-family: 'HKGrotesk';
    src: url(../fonts/hk-grotesk/TTF/HKGrotesk-Regular.ttf);
}

@font-face {
    font-family: 'CabinetGrotesk';
    src: url(../fonts/cabinet-grotesk/CabinetGrotesk-Variable.ttf);
}

@font-face {
    font-family: 'Mulish';
    src: url(../fonts/mulish/Mulish-Regular.ttf);
}

h1,
h2,
h3 {
    color: var(--primary-text-color);
    font-family: var(--font-family);
}

h4,
h5,
h6,
p {
    color: var(--secondary-text-color);
    font-family: var(--font-family);
}
/*Common Section*/



/*Common Styles*/
.sectionHeader .sectionSubHead h1 {
    text-align: center;
    font-size: 3.5em;
    margin: 0px;
    font-weight: 600;
    padding: 10px 0px 10px 0px;
     font-family: var(--fontFamilyCabinetGrotesk);
    color: var(--themeColor);
}

.sectionHeader .sectionSubHead h5 {
    text-align: center;
    font-size: 1.2em;
    margin: 0px;
    padding: 0px;
    font-family: var(--fontFamilyCabinetGrotesk);
    color: white;
}

.sectionHeader .sectionSubHead p {
    text-align: center;
    font-size: 1.2em;
    font-family: var(--fontFamilyCabinetGrotesk);
    color: var(--themeColor);
}

.subHeadingComp {
    background-color: var(--secondaryColor);
    padding:15px;
    border-radius: 40px;
}

/*Common Styles*/

/*================= INDEX PAGE STARTS ======================*/

/* ------------- LandingSection STARTS ----------------*/
#LandingSection {
    background: var(--themeColor);
    top: 0;
    width: 100%;
    z-index: 0;
    background-size: calc(100% + 50px);
}

#LandingSection .container-fluid {
    padding: 9% 0% 2% 11%;

}

.contentLandComp .BtnServices {
    text-align: center;
    background-image: linear-gradient(to right, #0f5c97, #0076ac, #0091bb, #00abc4, #27c4ca);
    padding: 15px 45px;
    border-radius: 50px;
    color: white;
    background-repeat: no-repeat;
    margin-top: 25px;
    font-size: 1em;
    font-weight: 600;
    border: none;
}

.contentLandComp .BtnBookAppoint {
    text-align: center;
    background-color: var(--themeColor);
    padding: 15px 45px;
    border-radius: 50px;
    color: white;
    margin-top: 25px;
    font-size: 1em;
    font-weight: 600;
    border: none;
}

.contentLandComp {
    padding-top: 5%;
}

.contentLandComp h1 {
    font-size: 4em;
    color: var(--themeColor);
    font-weight: 600;
}

.contentLandComp h2 {
    font-size: 4em;
    color: var(--themeColor);
    line-height: 75px;
    font-weight: 900;
}

.contentLandComp h4 {
    font-size: 1.5em;
    padding-top: 4%;
    color: var(--secondaryColor);
    font-weight: 500;
}

.contentLandComp h5 {
    font-size: 1.3em;
    line-height: 30px;
}

.circleCompLanding {
    height: 700px;
    width: 700px;
    border-radius: 50% 0% 0% 50%;
    overflow: hidden;
    cursor: pointer;
    border: 10px solid var(--secondaryColor);
    transition: 1.5s ease-in;
}

.circleCompLanding img {
    transition: 2.5s ease-in;
}

.circleCompLanding:hover img {
    transform: scale(1.3);
    transition: 2.5s ease-in;
}

/* ------------- LandingSection ENDS ----------------*/

/* ------------- inAmazingServices STARTS ----------------*/

#inAmazingServices .container-fluid {
    padding: 4% 9% 2% 12%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../image/bgServices.jpg);

}

.servicesComp .well {
    background-color: white;
    padding: 0px 25px 20px 25px;
    border-radius: 15px;
    overflow: hidden;
    margin-top: 35px;
    transition: 0.5s ease-in;
}

.servicesComp .well:hover {
    box-shadow: var(--box-shadow40);
    transition: 0.2s ease-in;
}

.servicesComp .well h2 {
    font-size: 1.5em;
    font-weight: 600;
    padding: 10px 0px 0px 0px;
}

.servicesDiveder {
    width: 100%;
    height: 1px;
    background-color: rgba(29, 40, 100, 0.1);
}

.servicesComp .well img {
    transition: 0.2s ease-in;
}

.servicesComp .well:hover img {
    transform: rotate(20deg);
    transition: 0.1s ease-in;
    filter: drop-shadow(15px 15px 15px var(--secondaryColor));
}

.servicesComp .well .serviceCounter {
    background-image: linear-gradient(to right, #0f5c97, #0076ac, #0091bb, #00abc4, #27c4ca);
    height: 45px;
    width: 55px;
    color: white;
    padding-left: 20px;
    border-radius: 50px 30px 0px 50px;
    right: 15px;
    top: 25px;
    position: absolute;
}

.servicesComp .well .serviceCounter h5 {
    font-size: 1.5em;
}

.servicesComp .well h4 {
    font-size: 1.1em;
    text-align: center;
    line-height: 25px;
    padding: 10px 25px 0px 25px;
}

/* ------------- inAmazingServices ENDS ----------------*/

/* ------------- inPerformCount STARTS ----------------*/
#inPerformCount {
    background-color: var(--themeColor);
}






#inPerformCount span {
    text-align: center;
    color: var(--secondaryColor);
}

#inPerformCount .counterComp {
    background-color: white;
    padding: 25px 45px;
    margin-top: 25px;
    border-left: 10px solid var(--secondaryColor);
    border-radius: 15px;
}

.counterComp h2 {
    font-weight: 600;
    font-size: 3em;
    font-family: var(--fontFamilyCabinetGrotesk);
    color: var(--secondaryColor);
    text-align: center;
    transition: all .6s ease-out;
}

.counterComp h4 {
    font-size: 1.2em;
    color: var(--themeColor);
    text-align: center;
    padding-top: 10px;
    transition: all .6s ease-out;
}


.counterComp {
    display: block;
    background: linear-gradient(to right, var(--secondaryColor) 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
}

.counterComp:hover {
    background-position: left bottom;
}

.counterComp:hover h2 {
    color: var(--themeColor);
}

.counterComp:hover h4 {
    color: var(--themeColor);
}

/* ------------- inPerformCount ENDS ----------------*/

/* ------------- inPremiumServices STARTS ----------------*/

#inPremiumServices .container-fluid {
    padding: 4% 9% 5% 12%;
}

.preimiumSerComp {
    padding-top: 3%;
}

.flip-box {
    width: 70px;
    height: 80px;
    overflow: hidden;
    perspective: 1000px;
}

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.3s;
    transform-style: preserve-3d;
}

.preimiumSerComp .well:hover .flip-box-inner {
    transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-box-front {
    color: black;
}

.flip-box-back {
    color: white;
    transform: rotateY(180deg);
}

.preimiumSerComp .well {
    padding: 0px;
    overflow: hidden;
    background-color: white;
    border-radius: 10px;
    box-shadow: var(--box-shadow40);
}

.dividerComp {
    background-image: linear-gradient(to right, #0f5c97, #0076ac, #0091bb, #00abc4, #27c4ca);
    height: 10px;
    width: 100%;
}

.serImageComp {
    height: 300px;
    overflow: hidden;
}

.serDetails {
    padding: 20px;
}

.serDetails h2 {
    font-size: 1.5em;
    line-height: 27px;
    font-weight: 600;
    margin: 0px;
    padding-top: 15px;
}

.serDetails h6 {
    font-size: 1.1em;
    line-height: 22px;
    margin: 0px;
    padding-top: 15px;
}

.serDetails .readMoreServ {
    margin: 10px 0px 0px 0px;
    background-color: var(--bgColor);
    padding: 10px 30px;
    color: var(--themeColor);
    border-radius: 10px;
    transition: 0.4s ease-in;
    border: 1px solid rgba(29, 40, 100, 0.3);
}

.preimiumSerComp .well:hover .serDetails .readMoreServ {
    background-color: var(--themeColor);
    padding: 10px 30px;
    color: white;
    transition: 0.2s ease-in;
    border-radius: 40px;
    border: 1px solid rgba(29, 40, 100, 0.3);
}

/* ------------- inPremiumServices ENDS ----------------*/


/* ------------- inProPeers STARTS ----------------*/




/* ------------- inProPeers ENDS ----------------*/

/* ------------- inTestimonials STARTS ----------------*/
#inTestimonials .container-fluid {
background-image: url(../image/bgCounter.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}

#inTestimonials .sectionHeader h5 {
    color: white;
}

#inTestimonials .sectionHeader h1 {
    color: var(--secondaryColor);
}

#inTestimonials .sectionHeader p {
    color: white;
}

.testiCardOuter .well {
    border-radius: 15px;
    padding: 0px;
    background-color: white;
    padding: 25px;
    border: none;
    margin-top: 25px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: var(--box-shadow40);
    transition: 0.3s;
}

.innerCircle {
    height: 150px;
    width: 150px;
    z-index: 0;
    background-color: var(--secondaryColor);
    border-radius: 40px;
    position: relative;
    opacity: 0.2;
    left: -100px;
    top: -100px;
    transition: 0.3s;

}

.testiCardOuter .well:hover .innerCircle {
    transform: rotate(45deg);
    transition: 0.5s;
    opacity: 1;
}

.testiCardOuter .well:hover {
    background-image: url(../image/boxGrid.png);
    background-size: cover;
    background-position: center;
    transition: 0.3s;
}

.testiInnerCard {
    display: flex;
    margin-top: -100px;
}

.testiInnerCard .imageCard {
    height: 70px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.testiHeadingCard h2 {
    margin: 0px;
    padding: 15px 0px 0px 15px;
    font-size: 1.4em;
    font-family: var(--fontFamilyCabinetGrotesk);
    font-weight: 700;
}

.testiHeadingCard h5 {
    margin: 0px;
    padding: 5px 0px 0px 15px;
    font-size: 1em;
     font-family: var(--fontFamilyCabinetGrotesk);
    font-weight: 600;
    color: var(--secondaryColor);
    font-style: italic;
}

.testiFooterCard h6 {
    font-size: 1.1em;
    line-height: 22px;
    padding: 25px 0px 25px 0px;
    color: var(--primaryTextColor);
    overflow: hidden;
}

.ratingComp h5 {
    font-weight: 600;
}

.ratingComp span {
    color: var(--InProgress);
}

.swiper-slide {
    text-align: center;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 25px;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
}

.autoplay-progress {
    position: absolute;
    right: 20px;
    bottom: 35px;
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--themeColor);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--secondaryColor);
}

.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--secondaryColor);
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}

/* ------------- inTestimonials ENDS ----------------*/

/* ------------- inOurGallery STARTS ----------------*/
#inOurGallery .container-fluid {
    padding: 2% 9% 2% 12%;
}


/* ------------- inOurGallery ENDS ----------------*/

/* ------------- inOurPricing STARTS ----------------*/



/* ------------- inOurPricing ENDS ----------------*/

/* ------------- inBookAppointment STARTS ----------------*/
#inBookAppointment .container-fluid {
    background-image: url(../image/bgBanner04.jpg);
    background-size: cover;
    background-position: center;
}


/* ------------- inBookAppointment ENDS ----------------*/


/* ------------- inLatestResearch STARTS ----------------*/
#inLatestResearch .container-fluid {
    padding: 2% 9% 8% 12%;
}


/* ------------- inLatestResearch ENDS ----------------*/

/* ------------- inFooterComp STARTS ----------------*/
#inFooterComp{
    background-image: url(../image/bgFooter01.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
 


/* ------------- inFooterComp ENDS ----------------*/

/*================= INDEX PAGE ENDS ======================*/


/*ABOUT US*/

/*ABOUT US*/

/*CONTACT US*/

/*CONTACT US*/