/* HOMEPAGE STYLES
-----------------------------------------------*/
.contentarea .main-btn {
    margin: 0;
}

.contentarea .external-link {
    display: none;
}

.contentarea ul {
    list-style-type: none;
}

.slick-dots {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    list-style-type: none;
    max-width: 280px;
    width: 100%;
    margin: 0 auto;
}

.slick-dots button {
    padding: 0;
    border-radius: 100%;
    text-indent: -9999px;
    width: 1rem;
    height: 1rem;
    background: transparent;
    border: 2px solid var(--White-Color);
}

.slick-dots .slick-active button {
    background: var(--White-Color);
    border: 0;
    width: 0.9rem;
    height: 0.9rem;
}

/* AFF SECTION */
.aff-section {
    width: 100%;
    padding: 50px 25px;
    background: var(--Black-Color);
}

.aff-section .row {
    justify-content: space-evenly;
    align-items: center;
    gap: 25px;
}
.aff-section a.slick-slide {
    display: flex;
    justify-content: center;
    max-width: 400px;
    
}
.aff-section a img {
    transition: all ease-in-out 0.3s;
    margin: 0 auto;
}

.aff-section a:hover img {
    transform: scale(1.025);
}

/* WELCOME SECTION */
.welcome {
    padding: 50px 0;
    position: relative;
    background: var(--Grey-Color);
}

.welcome-hr {
    width: 40%;
    height: 2px;
    background: var(--Secondary-Color);
    margin: 0 auto;
}

.loaded .welcome .watermark {
    background-image: url(../images/welcome-logo.webp);
}

.welcome .watermark {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 581px;
    height: 137px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.welcome .inner {
    max-width: 1507px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 40px 0;
    position: relative;
    z-index: 1;
}

.welcome h2 {
    font-family: 'Raleway';
    color: var(--Main-Color);
    font-size: clamp(40px, 2.5vw, 45px);
    line-height: 124%;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 auto;
    font-style: normal;
    font-weight: 500;
}

.welcome h2 span {
    font-family: 'Lobster';
    color: var(--Main-Color);
    font-size: clamp(32px, 2.5vw, 36px);
    text-transform: initial;
    letter-spacing: 2px;
    line-height: 124%;
    display: block;
}

/*.welcome h2 {*/
/*    font-size: clamp(20px, 1.38vw, 25px);*/
/*    font-weight: 600;*/
/*    line-height: 138%;*/
/*    letter-spacing: 1.15px;*/
/*    text-transform: uppercase;*/
/*    position: relative;*/
/*    margin: 0 auto;*/
/*}*/

/*.welcome h2:after {*/
/*    content: '';*/
/*    background: var(--Secondary-Color);*/
/*    max-width: 700px;*/
/*    width: 100%;*/
/*    min-height: 2px;*/
/*    position: relative;*/
/*    display: block;*/
/*    margin: 40px auto 0;*/
/*}*/

.welcome p {
    margin: 0 auto;
}

.unique-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
}

.unique-holder .content-holder {
    max-width: 450px;
    min-height: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.unique-holder h3 {
    font-size: 28px;
    color: var(--Main-Color);
    text-transform: capitalize;
    margin: 30px 0;
    font-weight: 500;
    line-height: 138%;
    letter-spacing: 1.15px;
    font-family: 'Raleway';
    font-style: normal;
}

.unique-holder p {
    text-align: left;
}

.oral-health {
    background: var(--Black-Color);
}

.oral-health .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1439px;
    width: 100%;
    margin: 0 auto;
    padding: 50px 0;
    gap: 20px 50px;
}

.oral-health .title-box .left-side {
    max-width: 455px;
    width: 100%;
}

.oral-health .title-box .left-side h2 {
    font-family: 'Raleway';
    font-size: clamp(20px, 1.38vw, 25px);
    font-weight: 600;
    line-height: 138%;
    letter-spacing: 1.15px;
    text-transform: uppercase;
    color: var(--White-Color);
    margin: 0;
}

.oral-health .title-box .left-side h1 {
        color: var(--White-Color);
    text-shadow: 6px 6px 10px #000;
    font-size: clamp(16px, 2.5vw, 16px);
    /* line-height: 1.2; */
    letter-spacing: 2px;
    text-transform: uppercase;
    /* margin-bottom: 4px; */
}

.oral-health .title-box .left-side h2 span {
    font-size: clamp(52px, 3.55vw, 60px);
    line-height: 120%;
    letter-spacing: 2px;
    color: var(--Quaternary-Color);
    text-transform: uppercase;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    margin: 0;
}

.oral-health .title-box .right-side p {
    color: var(--White-Color);
}

.oral-health .title-box .left-side .button-wrap {
    justify-self: center;
    margin-top: 20px;
}

.oral-health .title-box .vertical-line {
    background: var(--Secondary-Color);
    width: 2px;
    height: 219px;
}

.oral-health .title-box .right-side {
    max-width: 963px;
    width: 100%;
    flex: 1;
}
/* SEE THE DIFFERENCE (BEFORE / AFTER) SECTION
-----------------------------------------------*/
.before-after {
    padding: 60px 0;
    position: relative;
    background: var(--Black-Color);
}

.before-after .container {
    padding: 0 25px;
}

.before-after .inner {
    background: var(--Main-Color);
    border-radius: 0px 100px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.before-after h2 {
    margin: 0 auto;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--White-Color);
}

.before-after-slider {
    margin: 60px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}
.before-after-box {
    max-width: 706px;
    width: 100%;
    align-content: center;
    height: 460px;
    position: relative;
    margin: 20px auto;
}
.before-after-box .button-wrap {
    margin-top: 20px;
}

.before-after-box.image img {
    border-bottom-left-radius: 50px;
}

.before-after-box.image2 img {
    border-top-right-radius: 50px;
}

.loaded .before-after-box img {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* DENTIST SECTION */
.dentist {
    padding: 136px 0 160px;
    position: relative;
    background: var(--Black-Color);
}

.dentist .content-side .inner h3 {
     font-size: clamp(20px, 1.38vw, 25px);
    font-weight: 600;
    line-height: 138%;
    color: var(--White-Color);
    letter-spacing: 1.15px;
    text-transform: uppercase;
    font-family: 'Raleway';
    font-style: normal;
    margin: 0;

}

.dentist .container {
    padding: 0 25px;
    position: relative;
    z-index: 2;
}

.dentist .row {
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
    justify-content: space-evenly;
    gap: 50px 60px;
    position: relative;
}

.loaded .dentist .office-photo {
    background: var(--Dark-Gradient, linear-gradient(180deg, #00243A 0%, #00589B 100%));
}

.loaded .dentist.implants .office-photo {
    background: var(--New-Gradient, linear-gradient(157deg, #4DC1BC 14.78%, #00589B 86.51%));
}

.dentist.implants {
    background : var(--Grey-Color);   
}

.dentist.implants h2{
    color : var(--Main-Color);  
}

.dentist.implants p{
    color : var(--Black);  
}

.loaded .dentist.implants .photo-side {
    background-image: url(../images/dental-implants-bg.webp);
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 500px;
    width: 100%;
    min-height: 500px;
    border-radius: 94px 0px;
    /* margin: 0 0 20px auto; */
    position: relative;
}


.dentist .office-photo {
    content: '';
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 720px;
    height: 100%;
    border-bottom-right-radius: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5%;
    margin: auto 0;
    z-index: 0;
}

.dentist .title-box {
    width: 100%;
    height: auto;
}

.dentist h2 {
    font-size: clamp(52px, 3.55vw, 64px);
    line-height: 120%;
    letter-spacing: 2px;
    font-weight: 500;
    color: var(--Quaternary-Color);
    text-transform: uppercase;
}

.loaded .dentist-logo {
    background-image: url(../images/welcome-logo.webp);
}

.dentist-logo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    width: 581px;
    height: 137px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.dentist .container {
    position: relative;
    z-index: 2;
}

.dentist .photo-side {
    max-width: 571px;
    width: 100%;
    flex: 1;
}

.loaded .dentist .photo-box.danny {
    background-image: url(../images/dr-lee.webp);
}

.loaded .dentist .photo-box.donna {
    background-image: url(../images/dr-donna.webp);
}

.loaded .dentist .photo-box.vanessa {
    background-image: url(../images/dr-vanessa.webp);
}

.loaded .dentist .photo-box.david {
    background-image: url(../images/dr-david.webp);
}

.loaded .dentist .photo-box.catherine {
    background-image: url(../images/dr-catherine.webp);
}

.loaded .dentist .photo-box.natalie {
    background-image: url(../images/dr-natalie.webp);
}

.loaded .dentist .photo-box.andrew {
    background-image: url(../images/dr-andrew.webp);
}

.dentist .photo-box {
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 452px;
    width: 100%;
    min-height: 451px;
    border-radius: 94px 0px;
    margin: 0 0 20px auto;
    position: relative;
}

.dentist .photo-box:before {
    content: '';
    width: 452px;
    height: 451px;
    position: absolute;
    bottom: -15px;
    left: -15px;
    z-index: -1;
    background: var(--White-Color);
    border-radius: 94px 0px;
}

.dentist .content-side {
    flex: 1;
    max-width: 50%;
}

.dentist .inner {
    max-width: 906px;
    width: 100%;
}

.dentist .doc-box p {
    font-family: 'Lato';
    color: #85BECE;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 2px;
    font-size: clamp(34px, 2.22vw, 40px);
    margin: 0;
}

.dentist .white-text {
    color: var(--White-Color);
}

.dentist .slick-dots {
    margin: 0 0 40px;
}

/* SERVICES SECTION */
.services {
    padding: 120px 0 90px;
    position: relative;
    background: var(--Grey-Color);
}

.services .container {
    position: relative;
    z-index: 2;
    padding: 0 25px;
}

.services .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1439px;
    width: 100%;
    margin: 0 auto;
    gap: 20px 50px;
}

.services .title-box .left-side {
    max-width: 316px;
    width: 100%;
}

.services .title-box h2 {
   font-family: 'Raleway';
    font-size: clamp(20px, 1.38vw, 25px);
    font-weight: 600;
    line-height: 138%;
    letter-spacing: 1.15px;
    text-transform: uppercase;
    color: var(--Black);
    margin: 0;
}

.services .title-box span {
    font-size: clamp(52px, 3.55vw, 64px);
    line-height: 120%;
    letter-spacing: 2px;
    color: var(--Quaternary-Color);
    text-transform: uppercase;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    margin: 0;
}

.services .title-box .vertical-line {
    background: var(--Secondary-Color);
    width: 2px;
    height: 219px;
}

.services .title-box .right-side {
    max-width: 963px;
    width: 100%;
    flex: 1;
}

.services .title-box .right-side p {
    color: var(--Black);
}

.services-slider {
    max-width: 1600px;
    margin: 80px auto;
}

.loaded .service-box.implants:before {
    background-image: url(../images/invisalign-showcase.webp);
}

.loaded .service-box.invisalign:before {
    background-image: url(../images/implants-showcase.webp);
}

.loaded .service-box.veneers:before {
    background-image: url(../images/veneers-showcase.webp);
}

.loaded .service-box.braces:before {
    background-image: url(../images/braces-showcase.webp);
}

.loaded .service-box.whitening:before {
    background-image: url(../images/whitening-showcase.webp);
}

.loaded .service-box.wisdom-teeth:before {
    background-image: url(../images/wisdom-teeth-showcase.webp);
}

.loaded .service-box.perio-surgery:before {
    background-image: url(../images/perio-surgery-showcase.webp);
}

a.service-box {
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 351px;
    width: 100%;
    min-height: 419px;
    margin: 20px auto;
    border-radius: 60px;
    padding: 5px 25px;
    position: relative;
    overflow: hidden;
    transition: all ease-in-out 0.3s;
    text-decoration: none;
}

.service-box:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    z-index: 0;
}

.service-box:after {
    content: '';
    width: 150%;
    height: 150px;
    background: var(--Black-Color);
    filter: blur(27px);
    position: absolute;
    bottom: -20%;
    left: -25%;
    z-index: 1;
}

.service-box .inner {
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.services .service-box .service-box-title {
    font-family: 'Raleway';
    font-size: clamp(20px, 1.38vw, 25px);
    font-weight: 600;
    line-height: 138%;
    color: var(--White-Color);
    letter-spacing: 1.15px;
    text-transform: uppercase;
}

span.learn-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    font-size: clamp(16px, 1vw, 18px);
    text-transform: uppercase;
    color: var(--Quaternary-Color);
    font-weight: 800;
    line-height: normal;
    letter-spacing: 1.15px;
    margin: 7px auto 0;
    transition: all ease-in-out 0.3s;
}

span.learn-more svg path,
span.learn-more svg circle {
    transition: all ease-in-out 0.3s;
}

.services .slick-dots {
    transform: translateY(50px);
}

.service-box:hover {
    transform: scale(1.1);
}

.service-box:hover span.learn-more {
    color: var(--White-Color);
}

.service-box:hover span.learn-more svg path {
    fill: var(--White-Color);
}

.service-box:hover span.learn-more svg circle {
    stroke: var(--White-Color);
}
/* CTA SECTION
-----------------------------------------------*/
.cta {
    padding: 60px 0;
    position: relative;
    background: url(../images/dream-smiles-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.cta .container {
    padding: 0 25px;
}

.cta .inner {
    max-width: 900px;
    width: 100%;
    margin: 0 auto 0 0;
    padding: 85px 25px;
}

.cta .inner-content {
    max-width: 1360px;
    width: 100%;
    margin: 0 auto;
}

.cta h2 {
    font-family: 'Raleway';
    font-size: clamp(20px, 1.38vw, 25px);
    line-height: 138%;
    color: #00253B;
    text-transform: uppercase;
    letter-spacing: 1.15px;
    margin: 0 auto;
}

.cta h3 {
    font-size: clamp(40px, calc(24.33px + 4.352vw), 87px);
    line-height: 130%;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--Main-Color);
    margin: 10px auto 0;
}

.cta p {
    margin: 30px auto;
}

/* REVIEWS SECTION
-----------------------------------------------*/
.reviews {
    padding: 80px 0;
    position: relative;
    background: var(--Black-Color);
}

.loaded .reviews .shape {
    background-image: url(../images/welcome-logo.webp);
}

.reviews .shape {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 581px;
    width: 100%;
    min-height: 137px;
    position: absolute;
    bottom: 160px;
    left: 0;
    z-index: 1;
}

.reviews .container {
    position: relative;
    z-index: 2;
    padding: 0;
    max-width: 100%;
    width: 100%;
}

.reviews h2 {
    font-family: 'Raleway';
    font-size: clamp(52px, 3.55vw, 64px);
    line-height: 120%;
    color: var(--White-Color);
    letter-spacing: 2px;
    font-weight: 500;
    margin: 0 auto;
    text-transform: uppercase;
}

.reviews-slider {
    margin: 100px auto;
}

.reviews-box {
    max-width: 600px;
    width: 100%;
    min-height: 400px;
    margin: 0 auto;
    border-radius: 0 100px;
    background: #a7a9ab;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 15px 25px;
}

.reviews-box .inner {
    max-width: 550px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.reviews-slider .slick-slide.slick-current .reviews-box {
    background: var(--White-Color);
}

p.patient-name {
    color: var(--Main-Color);
    font-size: clamp(20px, 1.38vw, 25px);
    font-weight: 600;
    line-height: 138%;
    letter-spacing: 1.15px;
    margin: 0 auto;
}

.loaded .five-stars {
    background-image: url(../images/five-stars.svg);
}

.reviews-box .five-stars {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 253px;
    width: 100%;
    min-height: 50px;
    margin: 0 auto;
}

p.patient-review {
    color: var(--Black-Color);
    margin: 0 auto;
}

.reviews-slider .slick-dots {
    transform: translateY(80px);
}

/* RESPONSIVE 
-----------------------------------------------*/
@media (max-width: 1400px) {
    .before-after-slider {
        flex-direction: column;
    }
    .before-after-box {
        height: unset;
    }
}

@media (max-width: 1400px) {
    .dentist .content-side {
        max-width: 39%;
    }
}

@media (max-width: 1200px) {
    .dentist .row {
        flex-flow: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .dentist .office-photo {
        left: 0;
        margin: 0 auto;
        bottom: unset;
        /* top: -150px; */
        height: 650px;
        width: 50%;
    }

    .dentist .photo-side {
        order: -1;
    }

    .dentist .content-side {
        max-width: 100%;
    }

    .dentist .slick-dots {
        margin: 0 auto 40px;
    }

    .dentist .button-wrap {
        margin: 0 auto;
        justify-content: center;
    }
    .cta {
        background: #CECEC9;
    }
    .cta .inner {
        margin: 0 auto;
    }
}

@media (max-width: 1025px) {
    .before-after .inner {
        padding: 40px 50px;
    }

    .dentist-logo {
        max-width: 73vw;
        min-height: 28vw;
    }

    .dentist {
        padding-bottom: 24vw;
    }

    .services .title-box {
        flex-flow: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .services .title-box .vertical-line {
        height: 2px;
        width: 219px;
    }

    .oral-health .title-box {
        flex-flow: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .oral-health .title-box .vertical-line {
        height: 2px;
        width: 219px;
    }

    .services p {
        margin: 0 auto;
    }

    .cta .inner {
        padding: 50px 25px;
    }

    .cta {
        padding: 50px 0;
    }

    .reviews {
        padding-top: 50px;
    }
}

@media (max-width: 767px) {
    .before-after-slider {
        margin: 30px auto 60px;
    }

    .dentist .photo-side {
        max-width: 100%;
        flex: unset;
    }

    .dentist .photo-box {
        max-width: 100%;
        min-height: 92vw;
        margin: 0 auto;
    }

    .reviews .shape {
        display: none;
    }

    .reviews .container {
        padding: 0 25px;
    }

    .services .shape {
        max-width: 510px;
        min-height: 160px;
        left: -100px;
        bottom: -80px;
    }

    .services {
        padding: 50px 0 100px;
    }
}

@media (max-width: 600px) {
    .bp-slider-box {
        max-width: 100%;
        height: 39vw;
    }

    .dentist .shape {
        left: -100px;
        max-width: 370px;
        min-height: 106px;
    }

    .dentist {
        padding: 100px 0 24vw;
    }
}

@media (max-width: 450px) {
    .before-after .inner {
        padding: 40px 25px;
    }

    .reviews-slider {
        margin: 50px auto;
    }

    .reviews-slider .slick-dots {
        transform: translateY(40px);
    }

    .reviews-box .five-stars {
        max-width: 200px;
        min-height: 31px;
    }
}