@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 :root {
    --main: #008999;
    --dark-blue: #334468;
    --light-blue: #2C90D1;
    --body: #FAFAFA;
    --white: #FFFFFF;
    --btn-text: #334468;
    --grey-text: #D2D2D2;
}

body,
html {
    font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth;
    color: var(--dark-blue);
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--body);
}

::-webkit-scrollbar-thumb {
    background-color: var(--light-blue);
}

.main-nav {
    background: url("../image/Group\ 20920.svg"), #334468;
    background-size: cover;
    /* background-repeat: no-repeat; */
    background-color: var(--dark-blue);
}

.border-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--light-blue);
    height: 3px;
    border-radius: 10px;
    margin-left: 0.75rem;
    margin-right: 1rem;
}

.hover\:border-bottom:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--light-blue);
    height: 3px;
    border-radius: 10px;
    margin-left: 0.75rem;
    margin-right: 1rem;
}

.nav-btn {
    background-color: var(--white);
    color: var(--btn-text);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    margin-inline-end: 1rem;
    font-size: smaller;
    font-weight: 500;
}

.pb-rem-1 {
    padding-bottom: 1.5rem;
}

.heroDetails {
    top: 0;
    left: 15%;
}

.heroDetails h2 {
    color: var(--dark-blue);
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: bold;
}

.heroDetails button {
    background-color: var(--light-blue);
    color: var(--white);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    margin-top: 2rem;
}

#about {
    padding: 2rem 1rem;
    padding-bottom: 0;
    background-image: url(../image/right-quote-sign.png);
    background-repeat: no-repeat;
    background-position: top 137px left -83px;
    background-color: var(--body);
}

#aboutUsCarousel {
    background-color: var(--body);
    padding: 4rem 1rem;
}

.about-con {
    display: flex;
    flex-direction: column;
}

#about .about-con h6 {
    color: var(--light-blue);
    text-transform: uppercase;
    word-spacing: 15px;
    font-size: 1.5rem;
    font-weight: 500;
}

#about .about-con h2 {
    font-weight: 600;
    font-size: 2rem;
}

.before-caoursel-icon {
    align-self: self-end;
    padding-bottom: 2rem;
    position: absolute;
    right: 0;
    top: -119px;
}

.caoursel-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8rem;
}

.caoursel-content p {
    border-inline-start-width: medium;
    border-inline-start-style: solid;
    border-inline-start-color: var(--light-blue);
    padding-inline-start: 1rem;
    width: fit-content;
}

#carouselExampleIndicators button {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border-color: var(--light-blue) !important;
    border: solid 1px;
}

#carouselExampleIndicators button.\!opacity-100 {
    background-color: var(--light-blue) !important;
}

#why-us {
    padding: 4rem 0rem;
    background-color: var(--light-blue);
    background: linear-gradient(to bottom, var(--body) 8rem, var(--light-blue) 2%);
    color: var(--white);
}

.why-us-about-page {
    padding-top: 0 !important;
}

.noBg {
    background: unset !important;
}

.inner-why-us {
    padding: 0rem 1rem;
}

#why-us .why-heading {
    background-color: var(--dark-blue);
    padding: 4rem 1rem;
    border-radius: 10px;
}

.aboutPage {
    padding-bottom: 10rem;
    height: 80vh;
}

.why-heading-about-page {
    background-image: url("../image/about/background.webp");
    background-color: unset;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#why-us .why-heading img {
    position: absolute;
    right: 42px;
    top: 42px;
    width: 70px
}

.blueColor {
    color: var(--light-blue);
}

.benefitHand img {
    position: absolute;
    right: 0px;
    top: 42px;
    width: 354px;
}

#why-us .second-why-us {
    margin: 6rem 0;
}

.second-why-us p {
    font-size: 1.6rem;
}

#why-us .second-why-us img {
    position: absolute;
    right: 0;
    width: 500px;
}

.why-heading h2 {
    font-size: 2rem;
}

.aboutUsImage {
    width: 500px;
}

.heroDetails {
    height: 100%;
}

.benefits {
    padding-top: 7rem;
}

.benefit {
    padding-top: 5rem;
    /* padding-bottom: 2rem; */
}

.benefitsTitle {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    font-weight: 500;
}

.circle {
    z-index: 0;
    top: -14px;
    left: -18px;
}

.benefitNumbers {
    width: 50px;
    height: 80px;
    margin-right: 1rem;
}

.benefitNumbersBlack {
    /* width: 50px; */
    height: 80px;
    margin-right: 1rem;
}

.toTheEnd {
    margin-right: unset;
    margin-left: 1rem;
}

.benefitNumbers {
    width: 50px;
    height: 50px;
    margin-right: 1rem;
}

.benefitsPara {
    color: var(--dark-blue);
}

.benefitTitleParaBiggerBlack {}

.benefitTitlePara {
    font-weight: 600;
    font-size: 1.2rem;
}

.benefitTitleParaBlack {
    color: var(--dark-blue);
}

.noWrap {
    white-space: nowrap;
}

.spiral {
    width: 100px;
    top: -127px;
    right: 39px;
}

.spiral2 {
    width: 100px;
    top: -102px;
    right: 0;
}

.spiral3 {
    width: 100px;
    bottom: -50px;
    right: 0;
}

.spiral4 {
    width: 100px;
    bottom: -70px;
    right: 27px;
}

.seeMore {
    color: var(--dark-blue);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    margin-top: 2rem;
    font-weight: 500;
}

.bottomImage {
    bottom: 0;
    width: 300px;
}

#doctors {
    padding: 3rem 0rem;
}

.doctorImage {
    width: 700px;
    cursor: pointer;
    transition: all .3s ease;
}

.doctorImage:hover {
    transform: scale(1.1);
    transition: all .3s ease;
}


/* footer */

footer {
    background-image: url("../image/Group\ 21058.png");
    padding-top: 4rem;
    color: var(--grey-text);
    padding-left: 1rem;
    padding-right: 1rem;
}

.flex-column {
    flex-direction: column;
}

.footer-logo {
    margin-bottom: 4rem;
}

.footer-title {
    color: var(--white);
    font-size: 19px;
    padding-bottom: 0.5rem;
}

.explore {
    padding-bottom: 3rem;
}

.instagram {
    padding-inline-start: 0.5rem;
    padding-inline-end: .5rem;
}

.active-footer-link {
    color: var(--white);
    font-size: 14px;
}

.footer-link {
    font-size: 14px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.contact-footer {
    margin-bottom: 2rem;
}

.up {
    top: -92px;
    left: 24px;
    cursor: pointer;
}

#beforeAfter {
    padding: 4rem 1rem;
    background-color: var(--body);
}

.beforeAfter h2 {
    color: var(--light-blue);
    letter-spacing: 10px;
    margin-right: -10px;
    font-size: 2rem;
    font-weight: 500;
}

.beforeAfter h3 {
    font-size: 1.5rem;
    color: var(--dark-blue);
    font-weight: 500;
}

.mySwiper .swiper-wrapper {
    height: 24rem !important;
}

.swiper-wrapper-blogs {
    height: 39rem !important;
}

.afterImage {
    position: absolute;
    top: 150px;
    left: 0px;
    height: 10rem;
}

.beforeImage {
    position: absolute;
    top: 104px;
    left: 74px;
    height: 13rem;
    z-index: 2;
}

.beforeImage img {
    height: 100%;
    transition: all .3s ease;
    filter: grayscale(1);
}

.afterImage img {
    height: 100%;
    transition: all .3s ease;
}

.beforeAfterActive .beforeImage {
    top: 47px;
    height: 16rem;
    z-index: 1;
    transition: all .3s ease;
}

.beforeAfterActive .caseImage {
    filter: brightness(0) invert(1);
}

.beforeAfterActive .afterImage {
    top: 143px;
    z-index: 2;
    transition: all .3s ease;
}

.blueBg {
    background-color: var(--btn-text);
    border-radius: 15px;
}

#cases {
    padding: 2rem 1rem;
    background-color: var(--body);
}

.casesTitle h2 {
    color: var(--white);
}

.casesTitle h2 span {
    color: var(--white);
    font-weight: 600;
}

.casesTitle {
    font-size: 1.8rem;
}

.swiperCase {
    height: 500px;
    padding-bottom: 8rem !important;
}

.swiperCase img {
    filter: grayscale(0);
    transition: all .3s ease;
}

.swiperCase img:hover {
    filter: grayscale(1);
    transition: all .3s ease;
}

.caseActiveClass.swiperCase img {
    filter: grayscale(1);
    transition: all .3s ease;
}

.caseDesc {
    color: var(--white);
    font-weight: 600;
    font-size: 1.2rem;
}

.swiper-button-next,
.swiper-button-prev {
    top: unset !important;
    /* z-index: 9999; */
    bottom: 0;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    content: "" !important;
    display: none;
}

.blogs {
    padding: 2rem 1rem;
    background-color: var(--white);
}

.blogsTitle h2 {
    font-size: 1.5rem;
    letter-spacing: 5px;
}

.blogsTitle h3 {
    font-size: 2rem;
    text-align: center;
}

.blogCardDetails {
    background-color: white;
    bottom: 118px;
    padding: 1.5rem;
    width: 343px;
    border-radius: 20px;
    box-shadow: 0 27px 25px 0px var(--grey-text);
}

.blogCardDetails p {
    font-size: .9rem;
}

.blogLinks a {
    color: var(--light-blue);
    text-decoration: underline;
    font-weight: 600;
}

.blogLinks p {
    color: var(--grey-text);
}

.down {
    cursor: pointer;
    transition: all .3s ease;
}

.down:hover {
    transform: scale(1.1);
    transition: all .3s ease;
}

span.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border-color: var(--light-blue) !important;
    border: solid 1px;
    background: transparent;
    opacity: 1;
}

span.swiper-pagination-bullet-active {
    background-color: var(--light-blue);
}

.second-why-us-about {
    height: fit-content;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.aboutUsPageImage {
    height: 100px;
    width: 100px;
}

.fadedText {
    font-size: 7rem;
    color: #f4f4f4;
    left: 0;
    top: -85px;
    font-weight: 500;
    z-index: 0;
}

.backslash {
    width: 50px;
    height: 50px;
}

.treatmentHero {
    background: url("../image/Group\ 20920.svg"), #334468;
    background-size: contain;
}

.treatmentColor {
    color: var(--white);
}

.treatmentPara {
    margin-top: -10px;
}

.blogsHero {
    left: -79px;
}

.blogsQuote {
    top: -44px;
}

.blogImageDetails {
    top: -40px;
}

#why-us.why-us-about-page {
    background: linear-gradient(to bottom, var(--body) 8rem, var(--white) 2%);
}

.for-doctor {
    background-color: var(--light-blue);
    color: var(--white);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    /* margin-top: 2rem; */
    transition: all .3s ease;
}

.for-doctor:hover {
    transform: scale(1.1);
    transition: all .3s ease;
}

#contact-hero {
    background: linear-gradient(to top, var(--light-blue) 16rem, var(--body) 2%);
}

.contact-button {
    background-color: var(--dark-blue) !important;
}

.blog-details h3,
.blog-details h4,
.blog-details h5,
.blog-details h6,
.blog-details h1,
.blog-details h2 {
    font-weight: revert !important;
    font-size: revert !important;
}

@media(max-width:1140px) {
    .blogCardDetails {
        width: 100%;
    }
    .main-nav {
        background: url("../image/Group\ 20920.svg"), #334468;
        background-size: cover;
        /* background-repeat: no-repeat; */
        background-color: var(--dark-blue);
    }
    .border-bottom::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--light-blue);
        height: 3px;
        border-radius: 10px;
        margin-left: 0.75rem;
        margin-right: 1rem;
    }
    .hover\:border-bottom:hover::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--light-blue);
        height: 3px;
        border-radius: 10px;
        margin-left: 0.75rem;
        margin-right: 1rem;
    }
    .nav-btn {
        background-color: var(--white);
        color: var(--btn-text);
        border-radius: 5px;
        padding: 0.5rem 1rem;
        margin-inline-end: 1rem;
        font-size: smaller;
        font-weight: 500;
    }
    .pb-rem-1 {
        padding-bottom: 1.5rem;
    }
    .heroDetails {
        top: 0;
        left: 15%;
    }
    .heroDetails h2 {
        color: var(--dark-blue);
        text-transform: uppercase;
        font-size: 2rem;
        font-weight: bold;
    }
    .heroDetails button {
        background-color: var(--light-blue);
        color: var(--white);
        border-radius: 5px;
        padding: 0.5rem 1rem;
        margin-top: 2rem;
    }
    #about {
        padding: 2rem 1rem;
        padding-bottom: 0;
        background-image: url(../image/right-quote-sign.png);
        background-repeat: no-repeat;
        background-position: top 137px left -83px;
        background-color: var(--body);
    }
    #aboutUsCarousel {
        background-color: var(--body);
        padding: 4rem 1rem;
    }
    .about-con {
        display: flex;
        flex-direction: column;
    }
    #about .about-con h6 {
        color: var(--light-blue);
        text-transform: uppercase;
        word-spacing: 15px;
        font-size: 1.5rem;
        font-weight: 500;
    }
    #about .about-con h2 {
        font-weight: 600;
        font-size: 2rem;
    }
    .before-caoursel-icon {
        align-self: self-end;
        padding-bottom: 2rem;
        position: absolute;
        right: 0;
        top: -119px;
    }
    .caoursel-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 8rem;
    }
    .caoursel-content p {
        border-inline-start-width: medium;
        border-inline-start-style: solid;
        border-inline-start-color: var(--light-blue);
        padding-inline-start: 1rem;
        width: fit-content;
    }
    #carouselExampleIndicators button {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        border-color: var(--light-blue) !important;
        border: solid 1px;
    }
    #carouselExampleIndicators button.\!opacity-100 {
        background-color: var(--light-blue) !important;
    }
    #why-us {
        padding: 4rem 0rem;
        background-color: var(--light-blue);
        background: linear-gradient(to bottom, var(--body) 8rem, var(--light-blue) 2%);
        color: var(--white);
    }
    .why-us-about-page {
        padding-top: 0 !important;
    }
    .noBg {
        background: unset !important;
    }
    .inner-why-us {
        padding: 0rem 1rem;
    }
    #why-us .why-heading {
        background-color: var(--dark-blue);
        padding: 4rem 1rem;
        border-radius: 10px;
    }
    .aboutPage {
        padding-bottom: 10rem;
        height: 80vh;
    }
    .why-heading-about-page {
        background-image: url("../image/about/background.webp");
        background-color: unset;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .blueColor {
        color: var(--light-blue);
    }
    .benefitHand img {
        position: absolute;
        right: 0px;
        top: 42px;
        width: 21rem;
    }
    #why-us .second-why-us {
        margin: 6rem 0;
    }
    .second-why-us p {
        font-size: 1.6rem;
    }
    #why-us .second-why-us img {
        position: absolute;
        right: 0;
        width: 500px;
    }
    .why-heading h2 {
        font-size: 2rem;
    }
    .aboutUsImage {
        width: 500px;
    }
    .heroDetails {
        height: 100%;
    }
    .benefits {
        padding-top: 7rem;
    }
    .benefit {
        padding-top: 5rem;
        /* padding-bottom: 2rem; */
    }
    .benefitsTitle {
        position: relative;
        z-index: 1;
        font-size: 2rem;
        font-weight: 500;
    }
    .circle {
        z-index: 0;
        top: -14px;
        left: -18px;
    }
    .benefitsPara {
        color: var(--dark-blue);
    }
    .noWrap {
        white-space: nowrap;
    }
    .seeMore {
        color: var(--dark-blue);
        border-radius: 5px;
        padding: 0.5rem 1rem;
        margin-top: 2rem;
        font-weight: 500;
    }
    .bottomImage {
        bottom: 0;
        width: 300px;
    }
    #doctors {
        padding: 3rem 0rem;
    }
    .doctorImage {
        width: 700px;
        cursor: pointer;
        transition: all .3s ease;
    }
    .doctorImage:hover {
        transform: scale(1.1);
        transition: all .3s ease;
    }
    /* footer */
    footer {
        background-image: url("../image/Group\ 21058.png");
        padding-top: 4rem;
        color: var(--grey-text);
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .flex-column {
        flex-direction: column;
    }
    .footer-logo {
        margin-bottom: 4rem;
    }
    .footer-title {
        color: var(--white);
        font-size: 19px;
        padding-bottom: 0.5rem;
    }
    .explore {
        padding-bottom: 3rem;
    }
    .instagram {
        padding-inline-start: 0.5rem;
        padding-inline-end: .5rem;
    }
    .active-footer-link {
        color: var(--white);
        font-size: 14px;
    }
    .footer-link {
        font-size: 14px;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
    }
    .contact-footer {
        margin-bottom: 2rem;
    }
    .up {
        top: -92px;
        left: 24px;
        cursor: pointer;
    }
    #beforeAfter {
        padding: 4rem 1rem;
        background-color: var(--body);
    }
    .beforeAfter h2 {
        color: var(--light-blue);
        letter-spacing: 10px;
        margin-right: -10px;
        font-size: 2rem;
        font-weight: 500;
    }
    .beforeAfter h3 {
        font-size: 1.5rem;
        color: var(--dark-blue);
        font-weight: 500;
    }
    .mySwiper .swiper-wrapper {
        height: 24rem !important;
    }
    .swiper-wrapper-blogs {
        height: 39rem !important;
    }
    .afterImage {
        position: absolute;
        top: 150px;
        left: 0px;
        height: 10rem;
    }
    .beforeImage {
        position: absolute;
        top: 104px;
        left: 74px;
        height: 13rem;
        z-index: 2;
    }
    .beforeImage img {
        height: 100%;
        transition: all .3s ease;
        filter: grayscale(1);
    }
    .afterImage img {
        height: 100%;
        transition: all .3s ease;
    }
    .beforeAfterActive .beforeImage {
        top: 47px;
        height: 16rem;
        z-index: 1;
        transition: all .3s ease;
    }
    .beforeAfterActive .caseImage {
        filter: brightness(0) invert(1);
    }
    .beforeAfterActive .afterImage {
        top: 143px;
        z-index: 2;
        transition: all .3s ease;
    }
    .blueBg {
        background-color: var(--btn-text);
        border-radius: 15px;
    }
    #cases {
        padding: 4rem 1rem;
        background-color: var(--body);
    }
    .casesTitle h2 {
        color: var(--white);
    }
    .casesTitle h2 span {
        color: var(--white);
        font-weight: 600;
    }
    .casesTitle {
        font-size: 1.8rem;
    }
    .swiperCase {
        height: 500px;
        padding-bottom: 8rem !important;
    }
    .swiperCase img {
        /* filter: grayscale(1); */
        transition: all .3s ease;
    }
    .swiperCase img:hover {
        /* filter: brightness(0) invert(1); */
        transition: all .3s ease;
    }
    .caseActiveClass.swiperCase img {
        /* filter: brightness(0) invert(1); */
        transition: all .3s ease;
    }
    .caseDesc {
        color: var(--white);
        font-weight: 600;
        font-size: 1.2rem;
    }
    .swiper-button-next,
    .swiper-button-prev {
        top: unset !important;
        /* z-index: 9999; */
        bottom: 0;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        content: "" !important;
        display: none;
    }
    .blogs {
        padding: 2rem 1rem;
        background-color: var(--white);
    }
    .blogsTitle h2 {
        font-size: 1.5rem;
        letter-spacing: 5px;
    }
    .blogsTitle h3 {
        font-size: 2rem;
        text-align: center;
    }
    .blogCardDetails {
        background-color: white;
        bottom: 118px;
        padding: 1.5rem;
        width: 343px;
        border-radius: 20px;
        box-shadow: 0 27px 25px 0px var(--grey-text);
        max-width: 100%;
    }
}

@media(max-width:920px) {
    .before-caoursel-icon {
        right: 89px;
        width: 92px;
    }
    #why-us .second-why-us img {
        width: 300px;
    }
}

@media(max-width:830px) {
    #why-us .second-why-us img {
        display: none;
    }
    .benefits {
        padding-top: 0rem;
    }
    .noWrap {
        white-space: unset;
    }
}

@media(max-width:767px) {
    .spiral,
    .spiral3,
    .spiral2,
    .spiral4 {
        display: none !important;
    }
    .bottomImage {
        display: none;
    }
    .doctorImage:hover {
        transform: scale(1);
    }
    #why-us .why-heading img {
        display: none;
    }
    .before-caoursel-icon {
        display: none;
    }
    .second-why-us p {
        font-size: 1.2rem;
    }
    .nav-btn {
        font-size: .7rem;
    }
}

@media(max-width:550px) {
    .heroDetails h2 {
        font-size: 1.5rem;
    }
    .heroDetails button {
        font-size: .8rem;
    }
    .leftRight {
        width: 12px;
    }
    .why-heading h2 {
        font-size: 1.5rem;
    }
}

@media(max-width:525px) {
    .benefitNumbersBlack {
        height: 47px;
    }
    .benefitTitlePara {
        font-size: .8rem;
    }
}

@media(max-width: 425px) {
    .heroDetails h2 {
        font-size: 1rem;
    }
    .nav-btn {
        font-size: .5rem;
    }
}