/* =====================================================
   RESET
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"DM Sans",sans-serif;
    color:#34312e;
    background:#f8f5f0;
    line-height:1.7;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

.container{
    width:min(1240px,calc(100% - 50px));
    margin:auto;
}


/* =====================================================
   HEADER
===================================================== */


.hero {
    min-height: 100vh;
    position: relative;
    background: linear-gradient(90deg, rgb(24 40 64 / 88%) 0%, rgba(13, 29, 22, 0.68) 40%, rgba(13, 29, 22, 0.15) 100%), url(../images/skin-clinic-hero.png) center / cover no-repeat;
    color: #fff;
}


.header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:20;
}

.header-inner{
    height:110px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-mark{
    width:58px;
    height:58px;
    border:1px solid rgba(255,255,255,.6);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#d8b36a;
    font-size:22px;
}

.logo-text strong{
    display:block;
    font-family:"Playfair Display",serif;
    font-size:22px;
    font-weight:600;
    line-height:1.1;
}

.logo-text span{
    display:block;
    font-size:9px;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#d9bd82;
    margin-top:4px;
}

.nav{
    display:flex;
    align-items:center;
    gap:5px;
    padding:7px;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(12px);
    border-radius:50px;
}

.nav a{
    color:#fff;
    font-size:13px;
    font-weight:600;
    padding:11px 17px;
    border-radius:30px;
    transition:.3s;
}

.nav a:hover{
    background:rgba(255,255,255,.14);
}

.nav .book{
    background: #cfad6b;
    color: #000000;
}

.nav .book:hover{
    background:#e7ad4c;
}


/* =====================================================
   HERO CONTENT
===================================================== */

.hero-content{
    min-height:100vh;
    display:flex;
    align-items:center;
}

.hero-text{
    width:720px;
    padding-top:65px;
}

.hero-location{
    display:flex;
    align-items:center;
    gap:12px;
    color:#e0b75f;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.hero-location:before{
    content:"";
    width:38px;
    height:1px;
    background:#d7a94f;
}

.hero h1{
    font-family:"Playfair Display",serif;
    font-size:clamp(52px,7vw,88px);
    font-weight:500;
    line-height:.98;
    letter-spacing:-2px;
    margin-bottom:28px;
}

.hero h1 span{
    color: #cfad6b;
}

.hero-description{
    max-width:670px;
    font-size:17px;
    color:#eeeae4;
    margin-bottom:34px;
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:11px;
    padding:15px 22px;
    font-size:13px;
    font-weight:700;
    border-radius:4px;
    transition:.3s;
}

.btn-book{
    background:#e7b04d;
    color:#161b17;
}

.btn-book:hover{
    background:#e7b04d;
    transform:translateY(-2px);
}

.btn-call{
    background:#fff;
    color:#29322d;
}

.btn-call:hover{
    background:#f0eee9;
    transform:translateY(-2px);
}

.hero-bottom{
    position:absolute;
    bottom:35px;
    left:0;
    width:100%;
}

.hero-bottom-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.hero-scroll{
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
}

.hero-scroll i{
    margin-right:8px;
}

.hero-contact{
    display:flex;
    gap:25px;
    font-size:13px;
    color:#fff;
}

.hero-contact a:hover{
    color:#e1bc73;
}


/* =====================================================
   INTRO
===================================================== */

.intro{
    background:#f5f0e9;
    padding:110px 0;
}

.intro-grid{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:90px;
    align-items:center;
}

.intro-image{
    min-height:580px;
    background:
        url("../images/clinic-background.png")
        center/cover no-repeat;
}

.eyebrow{
    color:#9a723b;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.intro h2{
    font-family:"Playfair Display",serif;
    font-size:50px;
    font-weight:500;
    line-height:1.1;
    color:#252521;
    margin-bottom:25px;
}

.intro p{
    color:#625d57;
    font-size:15px;
    margin-bottom:18px;
}

.intro-highlight{
    margin-top:30px;
    padding:22px 25px;
    border-left:2px solid #b98b48;
    background:#ebe3d8;
    color:#4c4843;
}


/* =====================================================
   FEATURE STRIP
===================================================== */

.feature-strip{
    background:#182840;
    color:#fff;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.feature-item{
    padding:35px 25px;
    border-right:1px solid rgba(255,255,255,.1);
}

.feature-item:last-child{
    border-right:0;
}

.feature-item i{
    color:#d5ae64;
    font-size: 25px;
    margin-bottom:12px;
}

.feature-item strong{
    display:block;
    font-family:"Playfair Display",serif;
    font-size: 20px;
    font-weight:500;
}

.feature-item span{
    color: #ffffff;
}


/* =====================================================
   SERVICES
===================================================== */

.services{
    background:#fff;
    padding:110px 0;
}

.section-heading{
    max-width:720px;
    margin-bottom:55px;
}

.section-heading.center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.section-label{
    color:#a1763d;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:13px;
}

.section-heading h2{
    font-family:"Playfair Display",serif;
    font-size:50px;
    font-weight:500;
    line-height:1.1;
    color: #000000;
    margin-bottom:18px;
}

.section-heading p{
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.service{
    padding:38px 30px;
    background:#f7f4ef;
    border:1px solid #ebe5dc;
    min-height:220px;
    transition:.35s;
}

.service:hover{
    background:#182840;
    color:#fff;
    transform:translateY(-5px);
}

.service-icon{
    width: 58px;
    height: 58px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: #e9dfd1;
    color: #937c5e;
    margin-bottom:20px;
    font-size: 25px;
    border-radius: 50%;
}

.service h3{
    font-family:"Playfair Display",serif;
    font-size:24px;
    font-weight:500;
    margin-bottom:9px;
    color: #000;
}
.service:hover h3 {
    color: #ffffff;
}
.service p{
    color: #000000;
}

.service:hover p{
    color:#ffffff;
}

.service:hover .service-icon{
    background:rgba(255,255,255,.1);
    color:#e1bb70;
}


/* =====================================================
   DOCTORS
===================================================== */

.doctors{
    padding:110px 0;
    background:#f5f1eb;
}

.doctor-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.doctor-card{
    background:#fff;
    overflow:hidden;
    transition:.3s;
}

.doctor-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(30,25,20,.10);
}

.doctor-image{
    height:390px;
    background:#e9e1d7;
    overflow:hidden;
}

.doctor-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.doctor-card:hover .doctor-image img{
    transform:scale(1.03);
}

.doctor-info{
    padding:25px 25px 30px;
}

.doctor-info h3{
    font-family:"Playfair Display",serif;
    font-size:27px;
    color: #000000;
    font-weight:500;
}

.doctor-role{
    color:#a4773c;
    font-size: 15px;
    font-weight:700;
    margin:4px 0 13px;
}

.doctor-info p{
    /* font-size:13px; */
    /* color:#6d6862; */
    margin-bottom:5px;
}


/* =====================================================
   QUOTE / PHILOSOPHY
===================================================== */

.philosophy{
    min-height:570px;
    display:flex;
    align-items:center;
    background:
        linear-gradient(
            rgba(17,32,24,.82),
            rgba(17,32,24,.82)
        ),
        url("../images/skin-care.jpg") center/cover no-repeat;
    color:#fff;
}

.philosophy-content{
    max-width:820px;
    text-align:center;
    margin:auto;
}

.philosophy-mark{
    font-family:Georgia,serif;
    color:#d8b36b;
    font-size:65px;
    line-height:.5;
    margin-bottom:30px;
}

.philosophy h2{
    font-family:"Playfair Display",serif;
    font-size:50px;
    line-height:1.2;
    font-weight:500;
    margin-bottom:25px;
}

.philosophy p{
    color:#d4d4ce;
    font-size:16px;
}


/* =====================================================
   APPOINTMENT
===================================================== */

.appointment{
    padding:110px 0;
    background:#eee7dd;
}

.appointment-box{
    background:#182840;
    color:#fff;
    padding:65px;
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:70px;
    align-items:center;
}

.appointment-box h2{
    font-family:"Playfair Display",serif;
    font-size:52px;
    line-height:1.08;
    font-weight:500;
    margin-bottom:20px;
}

.appointment-box p{
    color:#c2c6bf;
    max-width:650px;
    margin-bottom:25px;
}

.contact-lines{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.contact-lines a{
    color:#fff;
    font-size:14px;
}

.contact-lines i{
    color:#d8b36b;
    margin-right:7px;
}

.booking-card{
    background:#f8f5ef;
    color:#292824;
    padding:35px;
}

.booking-card h3{
    font-family:"Playfair Display",serif;
    font-size:30px;
    font-weight:500;
    margin-bottom:8px;
}

.booking-card p{
    color:#6b665f;
    font-size:13px;
    margin-bottom:20px;
}

.booking-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:#d49a37;
    color:#171b17;
    padding:16px;
    font-size:13px;
    font-weight:700;
    transition:.3s;
}

.booking-btn:hover{
    background:#e7af50;
}


/* =====================================================
   CONTACT
===================================================== */

.contact{
    padding:110px 0;
    background:#fff;
}

.contact-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:70px;
}

.contact h2{
    font-family:"Playfair Display",serif;
    font-size:50px;
    line-height:1.1;
    font-weight:500;
    color:#292824;
    margin-bottom:25px;
}

.contact-item{
    display:flex;
    gap:15px;
    padding:18px 0;
    border-bottom:1px solid #e7e1d9;
}

.contact-icon{
    width: 53px;
    height: 53px;
    background:#eee7dd;
    color:#9a713b;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border-radius: 50%;
}

.contact-item h4{
    color:#292824;
    font-size:13px;
    margin-bottom:3px;
}

.contact-item p,
.contact-item a{
}

.contact-item a:hover{
    color:#9b733c;
}

.map{
    min-height:430px;
    background:
        linear-gradient(rgba(18,31,23,.25),rgba(18,31,23,.25)),
        url("../images/location.jpg") center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
}

.map-btn{
    background:#fff;
    padding:16px 24px;
    font-weight:700;
    font-size:13px;
    box-shadow:0 12px 35px rgba(0,0,0,.15);
}

.map-btn:hover{
    color:#9a713b;
}


/* =====================================================
   FOOTER
===================================================== */

footer{
    background:#17231c;
    color:#aaaFA9;
    padding:55px 0 25px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:50px;
    padding-bottom:40px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-logo{
    font-family:"Playfair Display",serif;
    color:#fff;
    font-size:25px;
    margin-bottom:12px;
}

footer p{
    /* font-size:13px; */
}

footer h4{
    color:#fff;
    font-size:14px;
    margin-bottom:15px;
}

.footer-links{
    display:grid;
    gap:8px;
    font-size:13px;
}

.footer-links a:hover{
    color:#dcb875;
}

.copyright{
    padding-top:22px;
    text-align:center;
    font-size:11px;
}


/* =====================================================
   FLOATING BUTTONS
===================================================== */

.floating{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:1000;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.float{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background: #ffffff;
    color: #182840;
    box-shadow:0 7px 25px rgba(0,0,0,.2);
    transition:.3s;
    border: 1px solid #182840;
    font-size: 23px;
}

.float:hover{
    background:#c9943c;
    transform:scale(1.08);
}


/* =====================================================
   MOBILE
===================================================== */

.mobile-menu{
    display:none;
}

@media(max-width:991px){

    .nav{
        display:none;
    }

    .mobile-menu{
        display:flex;
        width:44px;
        height:44px;
        border-radius:50%;
        border:1px solid rgba(255,255,255,.4);
        align-items:center;
        justify-content:center;
        color:#fff;
        background:rgba(255,255,255,.08);
    }

    .hero-text{
        width:100%;
        max-width:700px;
    }

    .intro-grid,
    .appointment-box,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .service-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .doctor-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .feature-item:nth-child(2){
        border-right:0;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }
}


@media(max-width:600px){

    .container{
        width:calc(100% - 30px);
    }

    .header-inner{
        height:82px;
    }

    .logo-mark{
        width:45px;
        height:45px;
    }

    .logo-text strong{
        font-size:17px;
    }

    .logo-text span{
        font-size:7px;
    }

    
.hero {
    min-height: 760px;

    background:
        linear-gradient(
            rgba(12, 28, 21, 0.78),
            rgba(12, 28, 21, 0.72)
        ),
        url("../images/skin-clinic-hero.png") 65% center / cover no-repeat;
}


    .hero-content{
        min-height:760px;
    }

    .hero h1{
        font-size:48px;
        letter-spacing:-1px;
    }

    .hero-description{
        font-size:15px;
    }

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

    .hero-buttons .btn{
        width:100%;
    }

    .hero-bottom{
        display:none;
    }

    .intro,
    .services,
    .doctors,
    .appointment,
    .contact{
        padding:70px 0;
    }

    .intro-image{
        min-height:400px;
    }

    .intro h2,
    .section-heading h2,
    .contact h2{
        font-size:37px;
    }

    .service-grid,
    .doctor-grid{
        grid-template-columns:1fr;
    }

    .feature-grid{
        grid-template-columns:1fr 1fr;
    }

    .feature-item{
        padding:25px 15px;
    }

    .feature-item strong{
        font-size:18px;
    }

    .doctor-image{
        height:390px;
    }

    .philosophy{
        min-height:500px;
        padding:70px 20px;
    }

    .philosophy h2{
        font-size:37px;
    }

    .appointment-box{
        padding:35px 22px;
        gap:35px;
    }

    .appointment-box h2{
        font-size:38px;
    }

    .booking-card{
        padding:28px 22px;
    }

    .map{
        min-height:320px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

}

/* =========================================
   PREMIUM TREATMENTS SECTION
========================================= */

.dlc-treatments {
    background: #fcfaf7;
    padding: 110px 0 120px;
}

.dlc-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


/* SECTION HEADING */

.dlc-section-heading {
    max-width: 820px;
    margin: 0 auto 55px;
    text-align: center;
}

.dlc-eyebrow {
    display: block;
    color: #a4773c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.dlc-section-heading h2 {
    margin: 0 0 20px;
    color: #000000;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 600;
}

.dlc-section-heading p {
    max-width: 760px;
    margin: auto;
    line-height: 1.8;
}


/* GRID */

.dlc-treatment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


/* CARD */

.dlc-treatment-card {
    min-height: 365px;
    padding: 40px 34px 35px;
    background: #ffffff;
    border-radius: 13px;
    text-align: center;

    box-shadow:
        0 10px 35px rgba(20, 55, 80, 0.07);

    border: 1px solid rgba(15, 80, 120, 0.04);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.dlc-treatment-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(20, 55, 80, 0.13);
    border-color: rgb(252 250 247);
}


/* ICON */

.dlc-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 35px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #d5ae64;

    font-size: 27px;

    border: 1px solid #e6e8e5;

    background: #fff;
}


/* TITLE */

.dlc-treatment-card h3 {
    margin: 0 0 14px;
    color: #000000;
    font-family:
        "Playfair Display",
        Georgia,
        serif;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
}


/* DESCRIPTION */

.dlc-treatment-card p {
    margin: 0 auto;
    max-width: 300px;
    /* color: #626a72; */
    /* font-size: 14px; */
    line-height: 1.75;
}


/* LINK */

.dlc-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: #d5ae64;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(8px);
    transition: .3s;
}

.dlc-treatment-card:hover .dlc-card-link {
    opacity: 1;
    transform: translateY(0);
}

.dlc-card-link i {
    font-size: 10px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .dlc-treatment-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dlc-section-heading h2 {
        font-size: 40px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .dlc-treatments {
        padding: 75px 0 80px;
    }

    .dlc-container {
        width: calc(100% - 30px);
    }

    .dlc-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
        margin-bottom: 20px;
    }

    .dlc-section-heading h2 {
        font-size: 32px;
    }

    .dlc-section-heading p {
        font-size: 14px;
    }

    .dlc-treatment-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .dlc-treatment-card {
        min-height: auto;
        padding: 35px 25px;
    }

    .dlc-icon {
        width: 62px;
        height: 62px;
        margin-bottom: 25px;
    }

    .dlc-treatment-card h3 {
        font-size: 22px;
    }

    .dlc-treatment-card p {
        font-size: 14px;
    }

    .dlc-card-link {
        opacity: 1;
        transform: none;
    }

}

/* =========================================
   DLC LOGO
========================================= */

.dlc-logo {
    display: flex;
    align-items: center;
    width: 92px;
    height: 92px;
    flex-shrink: 0;
}

.dlc-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


/* Desktop header */

.header-inner {
    height: 110px;
}


/* Mobile */

@media (max-width: 600px) {

    .dlc-logo {
        width: 68px;
        height: 68px;
    }

    .header-inner {
        height: 82px;
    }

}

/* =========================================
   DLC BRAND / LOGO
========================================= */

.dlc-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #fff;
}

.dlc-logo {
    width: 82px;
    height: 82px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}


/* Brand text */

.dlc-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dlc-brand-name {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.05;
    color: #ffffff;
    letter-spacing: .2px;
}

.dlc-brand-subtitle {
    margin-top: 5px;
    color: #d8b36b;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .dlc-logo {
        width: 60px;
        height: 60px;
    }

    .dlc-brand {
        gap: 9px;
    }

    .dlc-brand-name {
        font-size: 18px;
    }

    .dlc-brand-subtitle {
        font-size: 7px;
        letter-spacing: 1.7px;
        margin-top: 3px;
    }

}

/* =====================================================
   PREMIUM DLC FOOTER
===================================================== */

.dlc-footer {
    background: #17231d;
    color: #b9c0ba;
    padding: 75px 0 25px;
}

.dlc-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 55px;
    padding-bottom: 55px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}


/* =========================================
   FOOTER BRAND
========================================= */

.dlc-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    margin-bottom: 22px;
}

.dlc-footer-logo img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    display: block;
}

.dlc-footer-brand-text {
    display: flex;
    flex-direction: column;
}

.dlc-footer-brand-text strong {
    color: #fff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.1;
}

.dlc-footer-brand-text span {
    margin-top: 5px;
    color: #d8b36b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}


.dlc-footer-brand > p {
    max-width: 380px;
    color: #aeb6af;
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 25px;
}


/* =========================================
   FOOTER BOOK BUTTON
========================================= */

.dlc-footer-book {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 19px;

    background: #d69c3b;
    color: #17231d;

    font-size: 12px;
    font-weight: 700;

    border-radius: 4px;

    transition: all .3s ease;
}

.dlc-footer-book:hover {
    background: #e6b04e;
    color: #17231d;
    transform: translateY(-2px);
}

.dlc-footer-book i:last-child {
    font-size: 10px;
}


/* =========================================
   FOOTER COLUMNS
========================================= */

.dlc-footer-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dlc-footer-column h4 {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.dlc-footer-column a {
    color: #aeb6af;
    /* font-size: 13px; */
    transition: .25s;
}

.dlc-footer-column a:hover {
    color: #d9b56f;
    padding-left: 3px;
}


/* =========================================
   CONTACT
========================================= */

.dlc-footer-contact a {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dlc-footer-contact a i,
.dlc-footer-contact p i {
    color: #d5ae64;
    width: 16px;
}

.dlc-footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 5px;
    color: #aeb6af;
    /* font-size: 13px; */
    /* line-height: 1.7; */
}


/* =========================================
   FOOTER BOTTOM
========================================= */

.dlc-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-top: 22px;
}

.dlc-footer-bottom p {
    margin: 0;
    color: #7f8982;
    font-size: 11px;
}


/* SOCIAL */

.dlc-footer-social {
    display: flex;
    gap: 8px;
}

.dlc-footer-social a {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;

    color: #aeb6af;

    font-size: 13px;

    transition: .3s;
}

.dlc-footer-social a:hover {
    background: #d69c3b;
    border-color: #d69c3b;
    color: #17231d;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .dlc-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .dlc-footer {
        padding: 55px 0 22px;
    }

    .dlc-footer-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .dlc-footer-logo img {
        width: 68px;
        height: 68px;
    }

    .dlc-footer-brand-text strong {
        font-size: 20px;
    }

    .dlc-footer-brand-text span {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .dlc-footer-bottom {
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }

}


/* =====================================================
   MULTI-PAGE NAVIGATION + FAQ
===================================================== */
.nav a.active { background: rgba(255,255,255,.16); }
.nav .book {background: #cfad6b;color: #000000;}

.inner-page-banner {
    min-height: 330px;
    padding: 155px 0 70px;
    display: flex;
    align-items: center;
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(13, 29, 22, 0.88) 0%,
            rgba(13, 29, 22, 0.62) 50%,
            rgba(13, 29, 22, 0.30) 100%
        ),
        url("../images/clinic-background.jpg") center 45% / cover no-repeat;
}

.inner-page-banner h1 {
    font-family: "Playfair Display", serif;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 12px;
}

.inner-page-banner p {
    color: #eeeae4;
    max-width: 700px;
}

@media (max-width: 767px) {
    .inner-page-banner {
        min-height: 280px;
        padding: 120px 0 55px;
        background-position: 60% center;
    }
}

.page-content { min-height:300px; }
.faq-section { padding:95px 0; background:#fff; }
.faq-list { max-width:900px; margin:35px auto 0; display:grid; gap:13px; }
.faq-item { border:1px solid #e9e3da; border-radius:8px; background:#fcfaf7; overflow:hidden; }
.faq-question {
    width:100%; border:0; background:transparent; color:#292824;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:20px 23px; text-align:left; font:600 15px "DM Sans",sans-serif; cursor:pointer;
}
.faq-question i { color:#9a713b; transition:transform .25s ease; }
.faq-answer {display:none;padding:0 23px 22px;}
.faq-item.open .faq-answer { display:block; }
.faq-item.open .faq-question i { transform:rotate(180deg); }
.page-cta { padding:55px 0; background:#182840; color:#fff; text-align:center; }
.page-cta h2 { font:500 clamp(30px,4vw,44px) "Playfair Display",serif; margin-bottom:12px; }
.page-cta p { color:#c2c6bf; margin:0 auto 22px; max-width:700px; }
.page-cta .btn { display:inline-flex; }
@media(max-width:991px) {
  .inner-page-banner { min-height:280px; padding-top:130px; }
}

@media(max-width:991px) {
  .nav.mobile-nav-open {
    display:flex; position:absolute; top:82px; left:15px; right:15px;
    flex-direction:column; align-items:stretch; border-radius:14px;
    background:rgba(23,35,28,.98); padding:12px; z-index:50;
  }
  .nav.mobile-nav-open a { text-align:center; }
}



/* =========================================
   PROFESSIONAL MOBILE NAVIGATION
========================================= */

@media (max-width: 991px) {

    .header {
        z-index: 1000;
    }

    .header-inner {
        position: relative;
        height: 82px;
    }

    /* Hamburger button */
    .mobile-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
        font-size: 19px;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .mobile-menu:hover {
        background: #d69a35;
        color: #17231c;
    }

    /* Dropdown menu panel */
    .nav.mobile-nav-open {
        display: flex;
        position: absolute;
        top: 74px;
        left: 0;
        right: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;

        padding: 12px;
        margin: 0;

        background: #17231c;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px;

        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);

        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);

        z-index: 1001;
        max-height: calc(100vh - 105px);
        overflow-y: auto;

        animation: mobileMenuOpen 0.25s ease;
    }

    /* Menu links */
    .nav.mobile-nav-open a {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 45px;
        padding: 12px 16px;

        border-radius: 30px;
        color: #f7f5ef;
        background: transparent;

        font-family: "DM Sans", sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-align: center;

        transition:
            background 0.25s ease,
            color 0.25s ease;
    }

    /* Hover and active link */
    .nav.mobile-nav-open a:hover,
    .nav.mobile-nav-open a.active {
        background: rgba(255, 255, 255, 0.12);
        color: #e5bd78;
    }

    /* Appointment button */
    .nav.mobile-nav-open a.book {
        min-height: 46px;
        margin-top: 5px;
        background: #d69a35;
        color: #17231c;
        border-radius: 30px;
        font-weight: 700;
    }

    .nav.mobile-nav-open a.book:hover {
        background: #e7b04d;
        color: #17231c;
    }

    /* Keep the menu above the hero content */
    .hero-content {
        position: relative;
        z-index: 1;
    }

    .hero-bottom {
        z-index: 2;
    }
}

@keyframes mobileMenuOpen {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smaller mobile screens */
@media (max-width: 600px) {

    .nav.mobile-nav-open {
        top: 74px;
        left: 0;
        right: 0;
        width: 100%;
        padding: 10px;
        gap: 4px;
        border-radius: 15px;
    }

    .nav.mobile-nav-open a {
        min-height: 42px;
        padding: 10px 14px;
        font-size: 13px;
    }

    .nav.mobile-nav-open a.book {
        min-height: 44px;
    }
}




/* ========================================
   DLC ABOUT SECTION
======================================== */

.dlc-about {
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

.dlc-about-container {
    width: min(1240px, calc(100% - 50px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 80px;
}

/* IMAGE COLLAGE */

.dlc-about-visual {
    position: relative;
    min-height: 540px;
}

.dlc-doctor-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 76%;
    height: 410px;
    z-index: 2;
    overflow: hidden;
    border-radius: 18px;
    background: #e8e0d5;
    box-shadow: 0 15px 40px rgba(32, 42, 34, 0.08);
}

.dlc-doctor-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.dlc-treatment-photo {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 62%;
    height: 300px;
    overflow: hidden;
    border: 5px solid #f5f0e8;
    border-radius: 18px;
    z-index: 3;
    background: #d9e1d9;
}

.dlc-treatment-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.dlc-treatment-photo::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(
        transparent,
        rgba(20, 36, 27, 0.65)
    );
    pointer-events: none;
}

.dlc-treatment-label {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.dlc-treatment-label i {
    color: #e1b55f;
    font-size: 23px;
}

.dlc-decoration {
    position: absolute;
    width: 65%;
    height: 72%;
    top: 35px;
    right: 4%;
    border: 1px solid #d4a54d;
    border-radius: 25px;
    z-index: 1;
}

/* ABOUT CONTENT */

.dlc-about-content {
    position: relative;
    z-index: 4;
}

.dlc-about-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;

    color: #a57839;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.dlc-about-eyebrow span {
    width: 28px;
    height: 2px;
    background: #c99a47;
}

.dlc-about-content h2 {
    margin: 0 0 25px;
    color: #292823;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(36px, 4vw, 54px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -1px;
}

.dlc-about-content h2 span {
    color: #cfad6b;
}

.dlc-about-content > p {
    margin: 0 0 17px;
    line-height: 1.9;
}

/* FEATURES */

.dlc-about-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.dlc-about-feature {
    display: flex;
    align-items: center;
    gap: 13px;
}

.dlc-feature-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #182840;
    color: #e2b967;
    border-radius: 50%;
    font-size: 18px;
}

.dlc-about-feature h4 {
    margin: 0 0 4px;
    color: #292823;
    font-size: 13px;
    font-weight: 700;
}

.dlc-about-feature p {
    margin: 0;
    /* color: #777168; */
    /* font-size: 11px; */
    line-height: 1.6;
}

/* BUTTON */

.dlc-about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    padding: 15px 23px;
    background: #d69a35;
    color: #17231c;

    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.dlc-about-btn:hover {
    background: #e7b04d;
    color: #17231c;
    transform: translateY(-3px);
}

.dlc-about-btn i {
    transition: transform 0.3s ease;
}

.dlc-about-btn:hover i {
    transform: translateX(4px);
}

/* TABLET */

@media (max-width: 991px) {
    .dlc-about {
        padding: 80px 0;
    }

    .dlc-about-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .dlc-about-visual {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
        min-height: 520px;
    }

    .dlc-doctor-photo {
        width: 72%;
        height: 390px;
    }

    .dlc-treatment-photo {
        width: 58%;
        height: 280px;
    }

    .dlc-about-content h2 {
        max-width: 650px;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .dlc-about {
        padding: 60px 0;
    }

    .dlc-about-container {
        width: calc(100% - 32px);
        gap: 38px;
    }

    .dlc-about-visual {
        min-height: 360px;
    }

    .dlc-doctor-photo {
        width: 78%;
        height: 280px;
        border-radius: 13px;
    }

    .dlc-treatment-photo {
        width: 60%;
        height: 195px;
        bottom: 0;
        border-width: 4px;
        border-radius: 13px;
    }

    .dlc-treatment-label {
        left: 12px;
        bottom: 12px;
        font-size: 10px;
    }

    .dlc-treatment-label i {
        font-size: 18px;
    }

    .dlc-decoration {
        top: 22px;
        right: 2%;
        height: 75%;
    }

    .dlc-about-eyebrow {
        font-size: 10px;
        letter-spacing: 1.5px;
        margin-bottom: 16px;
    }

    .dlc-about-content h2 {
        font-size: 36px;
        line-height: 1.15;
        letter-spacing: -0.6px;
        margin-bottom: 20px;
    }

    .dlc-about-content > p {
        font-size: 13px;
        line-height: 1.8;
    }

    .dlc-about-features {
        grid-template-columns: 1fr;
        gap: 18px;
        margin: 25px 0;
    }

    .dlc-about-btn {
        width: 100%;
        padding: 15px;
    }
}



/* ABOUT HIGHLIGHT */

.dlc-about-highlight {
    margin: 25px 0 30px;
    padding: 23px 25px;
    background: #ebe3d8;
    border-left: 2px solid #b98b48;
}

.dlc-about-highlight h3 {
    margin: 0 0 10px;
    color: #292823;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
}

.dlc-about-highlight p {
    margin: 0;
    color: #625e57;
    font-size: 13px;
    line-height: 1.8;
}

/* FEATURE LAYOUT */

.dlc-about-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
}

.dlc-about-feature {
    align-items: flex-start;
}

.dlc-feature-icon {
    width: 46px;
    height: 46px;
}

.dlc-about-feature h4 {
    font-size: 13px;
    line-height: 1.5;
}

.dlc-about-feature p {
    margin-top: 4px;
    /* color: #777168; */
    /* font-size: 12px; */
    line-height: 1.7;
}

/* ABOUT ACTIONS */

.dlc-about-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.dlc-about-call {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #29352c;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.dlc-about-call i {
    color: #cfad6b;
}

.dlc-about-call:hover {
    color: #cfad6b;
}

/* MOBILE */

@media (max-width: 600px) {

    .dlc-about-highlight {
        padding: 20px;
        margin: 22px 0;
    }

    .dlc-about-highlight h3 {
        font-size: 20px;
    }

    .dlc-about-features {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dlc-about-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .dlc-about-actions .dlc-about-btn {
        width: 100%;
    }

    .dlc-about-call {
        justify-content: center;
    }
}



/* ========================================
   DLC FAQ SECTION
======================================== */

.dlc-faq {
    padding: 90px 0;
    background: #fffdf9;
}

.dlc-faq-container {
    width: min(1000px, calc(100% - 40px));
    margin: 0 auto;
}

.dlc-faq-heading {
    max-width: 720px;
    margin: 0 auto 45px;
    text-align: center;
}

.dlc-faq-heading .dlc-about-eyebrow {
    justify-content: center;
}

.dlc-faq-heading h2 {
    margin: 0 0 18px;
    color: #292823;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 500;
    line-height: 1.2;
}

.dlc-faq-heading h2 span {
    color: #cfad6b;
}

.dlc-faq-heading > p {
    color: #625e57;
    font-size: 14px;
    line-height: 1.8;
}

.dlc-faq-list {
    border-top: 1px solid #e6ded2;
}

.dlc-faq-item {
    border-bottom: 1px solid #e6ded2;
}

.dlc-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 5px;
    cursor: pointer;
    list-style: none;
    color: #292823;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
}

.dlc-faq-item summary::-webkit-details-marker {
    display: none;
}

.dlc-faq-item summary i {
    flex-shrink: 0;
    color: #b98b48;
    font-size: 13px;
    transition: transform 0.25s ease;
}

.dlc-faq-item[open] summary {
    color: #9b7136;
}

.dlc-faq-item[open] summary i {
    transform: rotate(45deg);
}

.dlc-faq-answer {
    padding: 0 35px 22px 5px;
}

.dlc-faq-answer p {
    margin: 0 0 12px;
    color: #625e57;
    font-size: 14px;
    line-height: 1.9;
}

.dlc-faq-answer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #94703b;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.dlc-faq-answer a:hover {
    color: #29352c;
}

.dlc-faq-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 35px;
    padding: 25px 28px;
    background: #f0e8dc;
    border-left: 3px solid #c99a47;
}

.dlc-faq-cta h3 {
    margin: 0 0 7px;
    color: #292823;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 23px;
    font-weight: 500;
}

.dlc-faq-cta p {
    margin: 0;
    color: #625e57;
    font-size: 13px;
    line-height: 1.7;
}

.dlc-faq-cta .dlc-about-btn {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .dlc-faq {
        padding: 60px 0;
    }

    .dlc-faq-container {
        width: calc(100% - 32px);
    }

    .dlc-faq-heading {
        margin-bottom: 30px;
    }

    .dlc-faq-item summary {
        padding: 18px 2px;
        font-size: 14px;
    }

    .dlc-faq-answer {
        padding: 0 5px 20px;
    }

    .dlc-faq-answer p {
        font-size: 13px;
    }

    .dlc-faq-cta {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }

    .dlc-faq-cta .dlc-about-btn {
        width: 100%;
    }
}



/* =========================================
   PREMIUM TEAL FOOTER
========================================= */

.dlc-footer {
    margin: 24px 3% 0;
    padding: 65px 0 28px;
    background: #182840;
    color: #ffffff;
    border-radius: 22px 22px 0 0;
}

.dlc-footer .container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}

.dlc-footer-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr 0.9fr;
    gap: 38px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,.18);
}

/* Logo */
.dlc-footer-logo img {
    width: 160px;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    margin-bottom: 28px;
}

.dlc-footer-brand-text {
    display: none;
}

.dlc-footer-brand > p {
    color: rgba(255,255,255,.88);
    font-size: 13px;
    /* line-height: 1.8; */
    margin-bottom: 24px;
}

/* Footer headings */
.dlc-footer-column h4 {
    color: #ffffff;
    font-family: "DM Sans", sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    margin: 3px 0 20px;
}

/* Quick links */
.dlc-footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dlc-footer-column a {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: rgba(255,255,255,.94);
    /* font-size: 13px; */
    line-height: 1.65;
    transition: color .25s ease, transform .25s ease;
}

.dlc-footer-column a::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    margin-top: 8px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 50%;
}

.dlc-footer-column a:hover {
    color: #ffe1a0;
    transform: translateX(3px);
}

/* Contact links */
.dlc-footer-contact a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.dlc-footer-contact a::before {
    display: none;
}

.dlc-footer-contact a i,
.dlc-footer-contact p i {
    width: 18px;
    flex-shrink: 0;
    color: #ffe1a0;
    margin-top: 4px;
}

.dlc-footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 5px 0 0;
    color: rgba(255,255,255,.9);
    /* font-size: 13px; */
    /* line-height: 1.8; */
}

/* Appointment button */
.dlc-footer-book {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: #ffffff;
    color: #182840;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    transition: .3s ease;
}

.dlc-footer-book:hover {
    background: #d5ae64;
    transform: translateY(-2px);
}

/* Bottom bar */
.dlc-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    padding-top: 25px;
}

.dlc-footer-bottom p {
    margin: 0;
    color: rgba(255,255,255,.92);
    font-size: 14px;
}

/* Social icons */
.dlc-footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dlc-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 41px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 50%;
    color: #ffffff;
    font-size: 15px;
    transition: .3s ease;
}

.dlc-footer-social a:hover {
    background: #ffffff;
    color: #07869a;
    transform: translateY(-3px);
}

/* Tablet */
@media (max-width: 991px) {
    .dlc-footer {
        margin: 18px 2% 0;
        padding: 50px 0 25px;
    }

    .dlc-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px 30px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .dlc-footer {
        margin: 10px 10px 0;
        padding: 38px 0 22px;
        border-radius: 16px 16px 0 0;
    }

    .dlc-footer .container {
        width: calc(100% - 30px);
    }

    .dlc-footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 30px;
    }

    .dlc-footer-logo img {
        width: 145px;
        max-height: 85px;
        margin-bottom: 20px;
    }

    .dlc-footer-column h4 {
        font-size: 16px;
        margin-bottom: 13px;
    }

    .dlc-footer-column {
        gap: 10px;
    }

    .dlc-footer-column a,
    .dlc-footer-contact p {
        font-size: 13px;
    }

    .dlc-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-top: 22px;
    }

    .dlc-footer-bottom p {
        font-size: 11px;
        line-height: 1.8;
    }

    .dlc-footer-social {
        gap: 10px;
    }

    .dlc-footer-social a {
        width: 38px;
        height: 38px;
    }
}



/* =========================================
   DLC FACILITIES SECTION
========================================= */

.dlc-facilities {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0 3%;
    padding: 75px 0 85px;
    background: #f5f0e8;
    border-radius: 20px;
}

.dlc-facilities-container {
    position: relative;
    z-index: 2;
    width: min(1240px, calc(100% - 50px));
    margin: 0 auto;
}

.dlc-facilities-heading {
    max-width: 750px;
    margin: 0 0 35px;
}

.dlc-facilities-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #bf9b56;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.dlc-facilities-heading h2 {
    margin: 0 0 12px;
    color: #07869a;
    font-family: "Playfair Display",serif;
    font-size: clamp(32px, 3vw, 44px);
    font-weight: 600;
    line-height: 1.2;
}

.dlc-facilities-heading p {
    max-width: 620px;
    margin: 0;
    /* color: #596a70; */
    /* font-size: 14px; */
    line-height: 1.8;
}

.dlc-facilities-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.dlc-facility-card {
    position: relative;
    height: 345px;
    overflow: hidden;
    margin: 0;
    background: #dce7e8;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(20, 65, 75, .08);
}

.dlc-facility-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.dlc-facility-card:hover img {
    transform: scale(1.06);
}

.dlc-facility-overlay {
    position: absolute;
    inset: 35% 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px 12px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(10, 20, 25, .2) 35%,
        rgba(10, 20, 25, .88) 100%
    );
}

.dlc-facility-overlay h3 {
    margin: 0;
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.dlc-facilities-cta {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.dlc-facilities-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 5px;
    background: #182840;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: background .3s ease, transform .3s ease;
}

.dlc-facilities-btn:hover {
    background: #056c7d;
    color: #fff;
    transform: translateY(-2px);
}

.dlc-facilities-decoration {
    position: absolute;
    z-index: 1;
    bottom: -65px;
    left: -35px;
    width: 180px;
    height: 115px;
    
    border-radius: 0 100% 0 0;
    transform: rotate(-5deg);
}

/* Tablet */
@media (max-width: 991px) {
    .dlc-facilities {
        padding: 60px 0 70px;
    }

    .dlc-facilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .dlc-facility-card {
        height: 320px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .dlc-facilities {
        margin: 0 10px;
        padding: 42px 0 55px;
        border-radius: 15px;
    }

    .dlc-facilities-container {
        width: calc(100% - 30px);
    }

    .dlc-facilities-heading {
        margin-bottom: 24px;
    }

    .dlc-facilities-heading h2 {
        font-size: 32px;
    }

    .dlc-facilities-heading p {
        font-size: 13px;
    }

    .dlc-facilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .dlc-facility-card {
        height: 225px;
        border-radius: 11px;
    }

    .dlc-facility-overlay {
        padding: 12px 7px;
    }

    .dlc-facility-overlay h3 {
        font-size: 11px;
    }

    .dlc-facilities-cta {
        margin-top: 25px;
    }

    .dlc-facilities-btn {
        width: 100%;
        padding: 14px 12px;
        font-size: 12px;
    }

    .dlc-facilities-decoration {
        width: 105px;
        height: 75px;
        bottom: -45px;
        left: -25px;
    }
}


/* =========================================
   TREATMENTS & PROCEDURES
========================================= */

.dlc-procedures {
    padding: 90px 0;
    background: #ebebeb;
}

.dlc-procedures-container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}

.dlc-procedures-heading {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.dlc-procedures-eyebrow {
    display: inline-block;
    margin-bottom: 13px;
    color: #cfad6b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.dlc-procedures-heading h2 {
    margin: 0 0 18px;
    color: #292823;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.2;
}

.dlc-procedures-heading h2 span {
    color: #cfad6b;
}

.dlc-procedures-heading p {
    margin: 0;
    color: #5f6d70;
    font-size: 14px;
    line-height: 1.9;
}

.dlc-procedures-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.dlc-procedure-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 27px;
    min-height: 340px;
    background: #ffffff;
    border: 1px solid #e2ecec;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(20, 65, 75, 0.035);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.dlc-procedure-card:hover {
    transform: translateY(-5px);
    border-color: #9bcdd2;
    box-shadow: 0 16px 35px rgba(20, 65, 75, .09);
}

.dlc-procedure-number {
    position: absolute;
    top: 23px;
    right: 25px;
    color: #e6e6e6;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
}

.dlc-procedure-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 23px;
    border-radius: 12px;
    background: #efe9df;
    color: #cfad6b;
    font-size: 21px;
    transition: background .3s ease, color .3s ease;
}

.dlc-procedure-card:hover .dlc-procedure-icon {
    background: #07869a;
    color: #ffffff;
}

.dlc-procedure-card h3 {
    margin: 0 0 13px;
    padding-right: 10px;
    color: #292823;
    font-family: "DM Sans", sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
}

.dlc-procedure-card p {
    margin: 0 0 22px;
    /* color: #667174; */
    /* font-size: 13px; */
    line-height: 1.85;
}

.dlc-procedure-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    color: #bf9b56;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.dlc-procedure-link i {
    transition: transform .25s ease;
}

.dlc-procedure-link:hover {
    color: #cfad6b;
}

.dlc-procedure-link:hover i {
    transform: translateX(4px);
}

.dlc-procedures-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 32px;
    padding: 20px 22px;
    background: #e5efef;
    border-left: 3px solid #07869a;
    border-radius: 4px;
}

.dlc-procedures-note > i {
    margin-top: 3px;
    color: #07869a;
}

.dlc-procedures-note p {
    margin: 0;
    color: #53666a;
    font-size: 12px;
    line-height: 1.8;
}

/* Tablet */
@media (max-width: 991px) {
    .dlc-procedures {
        padding: 70px 0;
    }

    .dlc-procedures-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .dlc-procedure-card {
        min-height: 330px;
        padding: 25px 22px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .dlc-procedures {
        padding: 55px 0;
    }

    .dlc-procedures-container {
        width: calc(100% - 32px);
    }

    .dlc-procedures-heading {
        margin-bottom: 30px;
        text-align: left;
    }

    .dlc-procedures-heading h2 {
        font-size: 34px;
    }

    .dlc-procedures-heading p {
        font-size: 13px;
    }

    .dlc-procedures-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .dlc-procedure-card {
        min-height: auto;
        padding: 24px 22px;
    }

    .dlc-procedure-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 18px;
    }

    .dlc-procedure-card h3 {
        font-size: 18px;
    }

    .dlc-procedure-card p {
        font-size: 13px;
    }

    .dlc-procedure-number {
        top: 20px;
        right: 20px;
        font-size: 28px;
    }

    .dlc-procedures-note {
        padding: 17px;
    }
}


/* Doctor consultation timings */
.doctor-timing {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    background: #edf5ff;
    border: 1px solid #d5e6fb;
    border-radius: 10px;
}

.doctor-timing .timing-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #145da0;
    color: #ffffff;
    border-radius: 50%;
    font-size: 20px;
}

.doctor-timing strong {
    display: block;
    margin-bottom: 4px;
    color: #174a7c;
    font-size: 13px;
    font-weight: 700;
}

.doctor-timing p {
    margin: 0;
    color: #263e58;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

@media (max-width: 576px) {
    .doctor-timing {
        padding: 12px;
    }

    .doctor-timing .timing-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}


/* =========================================
   DOCTOR DETAILED PROFILE
========================================= */

.doctor-detail-banner {
    background:
        linear-gradient(
            90deg,
            rgba(24, 40, 64, .94),
            rgba(24, 40, 64, .70)
        ),
        url("../images/clinic-background.jpg") center/cover no-repeat;
}

.doctor-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: #e1e8f0;
    font-size: 12px;
}

.doctor-breadcrumb i {
    color: #d5ae64;
    font-size: 10px;
}

.doctor-breadcrumb a:hover {
    color: #d5ae64;
}

.doctor-profile-section {
    padding: 100px 0;
    background: #fff;
}

.doctor-profile-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 75px;
    align-items: center;
}

.doctor-profile-visual {
    position: relative;
    padding: 0 0 28px 20px;
}

.doctor-profile-image {
    height: 540px;
    overflow: hidden;
    background: #edf2f7;
    border-radius: 5px;
    box-shadow: 15px 15px 0 #edf3fa;
}

.doctor-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.doctor-profile-caption {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: -55px 15px 0 0;
    padding: 20px;
    background: #182840;
    color: #fff;
    box-shadow: 0 12px 35px rgba(24, 40, 64, .16);
}

.profile-caption-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d5ae64;
    color: #182840;
    border-radius: 50%;
    font-size: 21px;
}

.doctor-profile-caption strong,
.doctor-profile-caption span:not(.profile-caption-icon) {
    display: block;
}

.doctor-profile-caption strong {
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 600;
}

.doctor-profile-caption div span {
    color: #d5ae64;
    font-size: 12px;
}

.doctor-detail-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #a1763d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.doctor-profile-content h2,
.doctor-detail-heading h2 {
    font-family: "Playfair Display", serif;
    color: #182840;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 22px;
}

.doctor-profile-intro {
    color: #626b75;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 30px;
}

.doctor-credential-list {
    display: grid;
    gap: 0;
    margin-bottom: 30px;
}

.doctor-credential {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    padding: 19px 0;
    border-bottom: 1px solid #e8edf3;
}

.credential-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf4fb;
    color: #245c91;
    border-radius: 5px;
    font-size: 18px;
}

.doctor-credential span {
    display: block;
    color: #77818d;
    font-size: 12px;
    margin-bottom: 5px;
}

.doctor-credential strong {
    display: block;
    color: #182840;
    font-size: 14px;
    line-height: 1.7;
}

.doctor-detail-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 22px;
    background: #182840;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: .3s ease;
}

.doctor-detail-cta:hover {
    background: #d5ae64;
    color: #182840;
    transform: translateY(-2px);
}


/* EXPERIENCE */

.doctor-experience-section {
    padding: 95px 0;
    background: #f3f7fb;
}

.doctor-detail-heading {
    max-width: 750px;
    margin: 0 auto 50px;
    text-align: center;
}

.doctor-detail-heading h2 {
    margin-bottom: 14px;
}

.doctor-detail-heading > p {
    color: #687482;
    font-size: 15px;
}

.doctor-experience-list {
    max-width: 850px;
    margin: 0 auto;
}

.doctor-experience-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 22px;
    padding: 28px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid #e3eaf2;
    border-radius: 5px;
}

.experience-marker {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #182840;
    color: #d5ae64;
    border-radius: 50%;
    font-size: 19px;
}

.experience-period {
    color: #a1763d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.experience-content h3 {
    color: #182840;
    font-family: "Playfair Display", serif;
    font-size: 23px;
    font-weight: 500;
    margin: 8px 0 10px;
}

.experience-content p {
    color: #697481;
    font-size: 14px;
    line-height: 1.8;
}


/* PUBLICATIONS */

.doctor-publications-section {
    padding: 100px 0;
    background: #fff;
}

.publication-list {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.publication-card {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 22px;
    padding: 28px;
    background: #fbfcfe;
    border: 1px solid #e6edf5;
    border-left: 3px solid #d5ae64;
    border-radius: 4px;
    transition: .3s ease;
}

.publication-card:hover {
    background: #f2f7fc;
    border-color: #d1dfed;
    transform: translateX(4px);
}

.publication-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #182840;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: 19px;
}

.publication-type {
    display: block;
    margin-bottom: 9px;
    color: #a1763d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.publication-content h3 {
    color: #182840;
    font-family: "Playfair Display", serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 10px;
}

.publication-content p {
    color: #687482;
    font-size: 13px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}


/* BOTTOM CTA */

.doctor-detail-bottom-cta {
    padding: 75px 0;
    background: #182840;
    color: #fff;
}

.doctor-detail-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.doctor-detail-cta-inner .doctor-detail-eyebrow {
    color: #d5ae64;
}

.doctor-detail-cta-inner h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 15px;
}

.doctor-detail-cta-inner p {
    max-width: 650px;
    color: #d0d8e2;
    font-size: 14px;
    line-height: 1.8;
}

.doctor-detail-cta-inner .doctor-detail-cta {
    flex-shrink: 0;
    background: #d5ae64;
    color: #182840;
}

.doctor-detail-cta-inner .doctor-detail-cta:hover {
    background: #fff;
}


/* DOCTORS LIST PROFILE BUTTON */

.doctor-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 16px;
    background: #182840;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    transition: .3s ease;
}

.doctor-profile-btn:hover {
    background: #d5ae64;
    color: #182840;
}

.doctor-profile-btn i {
    font-size: 11px;
}


/* RESPONSIVE */

@media (max-width: 991px) {
    .doctor-profile-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }

    .doctor-profile-image {
        height: 440px;
    }

    .doctor-profile-section,
    .doctor-publications-section {
        padding: 75px 0;
    }

    .doctor-detail-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }
}

@media (max-width: 600px) {
    .doctor-profile-section,
    .doctor-experience-section,
    .doctor-publications-section {
        padding: 60px 0;
    }

    .doctor-profile-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .doctor-profile-visual {
        padding-left: 10px;
    }

    .doctor-profile-image {
        height: 400px;
    }

    .doctor-profile-caption {
        padding: 15px;
        margin-top: -45px;
    }

    .doctor-profile-caption strong {
        font-size: 16px;
    }

    .doctor-credential {
        gap: 12px;
    }

    .doctor-detail-heading {
        margin-bottom: 32px;
    }

    .doctor-experience-item {
        grid-template-columns: 42px 1fr;
        gap: 13px;
        padding: 20px 15px;
    }

    .experience-marker {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .experience-content h3 {
        font-size: 20px;
    }

    .publication-card {
        grid-template-columns: 38px 1fr;
        gap: 13px;
        padding: 18px 13px;
    }

    .publication-number {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .publication-content h3 {
        font-size: 18px;
    }

    .publication-content p {
        font-size: 12px;
    }

    .doctor-detail-cta-inner .doctor-detail-cta {
        width: 100%;
        flex-wrap: wrap;
    }

    .doctor-breadcrumb {
        gap: 8px;
        font-size: 10px;
    }
}