:root {
            --navy: #0c2438;
            --navy-light: #123b59;
            --gold: #c9a45c;
            --gold-light: #e0c27c;
            --white: #ffffff;
            --light: #f7f8f9;
            --text: #52606d;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 'DM Sans', sans-serif;
            color: var(--text);
            background: #ffffff;
        }

        h1, h2, h3, h4, h5 {
            font-family: 'Playfair Display', serif;
        }

        /* ========================================
           TOP BAR
        ======================================== */

        .top-bar {
            background: var(--navy);
            color: rgba(255,255,255,0.85);
            font-size: 13px;
            padding: 9px 0;
        }

        .top-bar a {
            color: rgba(255,255,255,0.9);
            text-decoration: none;
            transition: 0.3s;
        }

        .top-bar a:hover {
            color: var(--gold-light);
        }

        .top-item {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .top-item i {
            color: var(--gold);
        }


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

        .main-header {
            background: rgba(255,255,255,0.97);
            border-bottom: 1px solid rgba(12,36,56,0.08);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .main-header.scrolled {
            box-shadow: 0 8px 30px rgba(0,0,0,0.08);
        }

        .navbar {
            
            min-height: 70px;
            padding: 8px 0;
        }


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

        .clinic-brand {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: var(--navy);
        }

        .logo-symbol {
            width: 52px;
            height: 52px;
            border: 1.5px solid var(--gold);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 13px;
            position: relative;
        }

        .logo-symbol::before {
            content: "";
            width: 25px;
            height: 25px;
            border: 2px solid var(--gold);
            border-radius: 50%;
            position: absolute;
        }

        .logo-symbol i {
            font-size: 19px;
            color: var(--gold);
            z-index: 2;
            background: white;
            padding: 2px;
        }

        .brand-text {
            line-height: 1.15;
        }

        .brand-name {
            font-family: 'Playfair Display', serif;
            font-size: 21px;
            font-weight: 600;
            color: var(--navy);
            display: block;
        }

        .brand-subtitle {
            font-size: 9px;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--gold);
            margin-top: 4px;
            display: block;
        }


        /* ========================================
           NAVIGATION
        ======================================== */

        .navbar-nav {
            gap: 7px;
        }

        .nav-link {
            color: var(--navy) !important;
            font-size: 14px;
            font-weight: 500;
            padding: 10px 14px !important;
            position: relative;
            transition: 0.3s;
        }

        .nav-link::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 3px;
            height: 1.5px;
            background: var(--gold);
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.3s ease;
        }

        .nav-link:hover {
            color: var(--gold) !important;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            transform: scaleX(1);
        }


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

        .appointment-btn {
            background: var(--navy);
            color: white;
            border: 1px solid var(--navy);
            padding: 12px 22px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.3px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            transition: all 0.3s ease;
        }

        .appointment-btn:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: white;
            transform: translateY(-2px);
        }


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

        .navbar-toggler {
            border: none;
            padding: 8px;
            box-shadow: none !important;
        }

        .navbar-toggler i {
            font-size: 26px;
            color: var(--navy);
        }


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

        .footer {
            background: var(--navy);
            color: rgba(255,255,255,0.72);
            padding-top: 70px;
        }

        .footer-brand {
            display: inline-block;
            text-decoration: none;
            color: white;
            margin-bottom: 22px;
        }

        .footer-brand .brand-name {
            color: white;
            font-size: 24px;
        }

        .footer-brand .brand-subtitle {
            color: var(--gold-light);
        }

        .footer-about {
            font-size: 14px;
            line-height: 1.8;
            max-width: 350px;
        }


        /* Footer headings */

        .footer-title {
            color: white;
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 23px;
            position: relative;
            padding-bottom: 12px;
        }

        .footer-title::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 32px;
            height: 2px;
            background: var(--gold);
        }


        /* Footer links */

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: rgba(255,255,255,0.65);
            text-decoration: none;
            font-size: 14px;
            transition: 0.3s;
        }

        .footer-links a:hover {
            color: var(--gold-light);
            padding-left: 5px;
        }


        /* Contact */

        .footer-contact {
            display: flex;
            gap: 12px;
            margin-bottom: 18px;
            font-size: 14px;
            line-height: 1.6;
        }

        .footer-contact i {
            color: var(--gold);
            font-size: 17px;
            margin-top: 2px;
        }


        /* Opening hours */

        .hours-row {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            padding: 9px 0;
            font-size: 13px;
        }

        .hours-row span:last-child {
            color: white;
        }


        /* Social icons */

        /* ========================================
   PREMIUM SOCIAL ICONS
======================================== */

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.social-links a {
    width: 44px;
    height: 44px;

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

    color: rgba(255,255,255,0.8);

    border: 1px solid rgba(201,164,92,0.35);

    background: rgba(255,255,255,0.03);

    text-decoration: none;

    transition: all 0.35s ease;

    position: relative;
    overflow: hidden;
}

.social-links a::before {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    background: var(--gold);

    left: 0;
    bottom: -100%;

    transition: all 0.35s ease;

    z-index: 0;
}

.social-links a i {
    font-size: 17px;
    position: relative;
    z-index: 1;

    transition: all 0.35s ease;
}

.social-links a:hover::before {
    bottom: 0;
}

.social-links a:hover {
    border-color: var(--gold);
    color: white;

    transform: translateY(-5px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

.social-links a:hover i {
    transform: scale(1.1);
}


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

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            margin-top: 55px;
            padding: 20px 0;
            font-size: 12px;
        }

        .footer-bottom a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
        }

        .footer-bottom a:hover {
            color: var(--gold-light);
        }


        /* ========================================
           WHATSAPP / FLOATING BUTTON
        ======================================== */

        .floating-appointment {
            position: fixed;
            right: 25px;
            bottom: 25px;
            width: 52px;
            height: 52px;
            background: var(--gold);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            z-index: 999;
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
            transition: 0.3s;
        }

        .floating-appointment:hover {
            background: var(--navy);
            color: white;
            transform: translateY(-4px);
        }

        .floating-appointment i {
            font-size: 22px;
        }


        /* ========================================
           RESPONSIVE
        ======================================== */

        @media (max-width: 991px) {

            .navbar-collapse {
                background: white;
                padding: 15px 0;
                border-top: 1px solid rgba(0,0,0,0.06);
                margin-top: 15px;
            }

            .navbar-nav {
                gap: 0;
            }

            .nav-link {
                padding: 12px 5px !important;
            }

            .nav-link::after {
                display: none;
            }

            .header-appointment {
                margin-top: 10px;
            }
        }

        @media (max-width: 767px) {

            .top-bar {
                display: none;
            }

            .navbar {
                padding: 13px 0;
            }

            /* .logo-symbol {
                width: 45px;
                height: 45px;
            } */

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

            .brand-subtitle {
                font-size: 8px;
                letter-spacing: 2px;
            }

            .footer {
                padding-top: 50px;
            }

            .footer-column {
                margin-bottom: 35px;
            }
        }

        .clinic-logo {
            width: 65px;
            height: 65px;
            object-fit: contain;
            margin-right: 10px;
            flex-shrink: 0;
        }

        /* ========================================
   BACK TO TOP
======================================== */

/* ========================================
   PREMIUM ROUND BACK TO TOP
======================================== */

.back-to-top {
    position: fixed;

    right: 25px;
    bottom: 90px;

    width: 50px;
    height: 50px;

    border-radius: 50%;

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

    background: var(--navy);
    color: var(--gold);

    border: 1px solid var(--gold);

    text-decoration: none;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition: all 0.35s ease;

    z-index: 998;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.back-to-top i {
    font-size: 19px;
    transition: transform 0.3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--gold);
    color: white;

    border-color: var(--gold);

    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
}

.back-to-top:hover i {
    transform: translateY(-2px);
}


/* Mobile */

@media (max-width: 767px) {

    .back-to-top {
        width: 45px;
        height: 45px;

        right: 18px;
        bottom: 80px;
    }

    .back-to-top i {
        font-size: 17px;
    }

}
/* ========================================
   REVIEWS SECTION
======================================== */

.reviews-section {
    background: #f7f8f9;
    padding: 100px 0;
}


/* Review Card */

.review-card {
    height: 100%;
    background: white;
    padding: 38px 35px 32px;
    border: 1px solid #e8ebed;
    position: relative;
    transition: all 0.35s ease;
}


.review-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(12,36,56,0.10);
}


.featured-review {
    border-top: 2px solid #c9a45c;
}


/* Quote */

.quote-icon {
    position: absolute;
    top: 25px;
    right: 30px;
    color: #e9dfca;
    font-size: 45px;
    line-height: 1;
}


/* Stars */

.review-stars {
    color: #c9a45c;
    font-size: 13px;
    margin-bottom: 22px;
}


.review-stars i {
    margin-right: 2px;
}


/* Review text */

.review-text {
    color: #596875;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 28px;
}


/* Author */

.review-author {
    display: flex;
    align-items: center;
    gap: 13px;
    border-top: 1px solid #edf0f2;
    padding-top: 20px;
}


.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #0c2438;
    color: #c9a45c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 17px;
}


.review-author h6 {
    margin: 0 0 3px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0c2438;
}


.review-author span {
    color: #8b959e;
    font-size: 11px;
}


/* Overall rating */

.overall-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 55px;
}


.rating-number {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    color: #0c2438;
    font-weight: 600;
}


.rating-stars {
    color: #c9a45c;
    font-size: 15px;
    margin-bottom: 3px;
}


.overall-rating span {
    font-size: 12px;
    color: #7b858d;
}


@media (max-width: 767px) {

    .reviews-section {
        padding: 70px 0;
    }

    .review-card {
        padding: 30px 25px;
    }

    .overall-rating {
        margin-top: 40px;
    }

}

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

.faq-section {
    background: #ffffff;
    padding: 100px 0;
}


/* Section Heading */

.section-heading {
    max-width: 700px;
    margin: auto;
}

.section-eyebrow {
    display: inline-block;
    color: #c9a45c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.section-heading h2 {
    color: #0c2438;
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 15px;
}

.heading-line {
    width: 45px;
    height: 2px;
    background: #c9a45c;
    margin: 0 auto 20px;
}

.section-heading p {
    color: #6b7785;
    font-size: 15px;
    line-height: 1.8;
}


/* Accordion */

.luxury-accordion {
    border-top: 1px solid #e6e9ec;
}

.luxury-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid #e6e9ec;
    background: transparent;
}


.luxury-accordion .accordion-button {
    background: white;
    color: #0c2438;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 23px 25px;
    box-shadow: none;
}


.luxury-accordion .accordion-button:not(.collapsed) {
    color: #0c2438;
    background: #fafbfc;
}


.luxury-accordion .accordion-button::after {
    background-size: 14px;
}


.luxury-accordion .accordion-button:focus {
    box-shadow: none;
}


/* Number */

.faq-number {
    color: #c9a45c;
    font-size: 12px;
    letter-spacing: 1px;
    min-width: 42px;
    font-weight: 600;
}


/* Answer */

.luxury-accordion .accordion-body {
    background: #fafbfc;
    padding: 0 60px 25px 67px;
    color: #687582;
    font-size: 14px;
    line-height: 1.9;
}


/* CTA */

.faq-cta {
    margin-top: 40px;
}

.faq-cta p {
    color: #7a858f;
    font-size: 14px;
    margin-bottom: 15px;
}


.faq-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0c2438;
    border: 1px solid #c9a45c;
    padding: 11px 21px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: 0.3s;
}


.faq-contact-btn:hover {
    background: #c9a45c;
    color: white;
}


@media (max-width: 767px) {

    .faq-section {
        padding: 70px 0;
    }

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

    .luxury-accordion .accordion-button {
        padding: 20px 15px;
        font-size: 14px;
    }

    .luxury-accordion .accordion-body {
        padding: 0 20px 22px 57px;
    }

}

/* =========================================
       CONTACT PAGE VARIABLES
    ========================================= */

    .contact-page {
        background: #ffffff;
        color: #52606d;
    }

    .contact-navy {
        color: #0c2438;
    }

    .contact-gold {
        color: #c9a45c;
    }

    /* =========================================
       PAGE HERO
    ========================================= */

    .contact-hero {
    position: relative;
    background:
        linear-gradient(
            rgba(12, 36, 56, 0.94),
            rgba(12, 36, 56, 0.94)
        ),
        url('images/clinic-contact.jpg') center/cover no-repeat;

    padding: 75px 0;
    overflow: hidden;
}

.contact-hero-image {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    object-fit: cover;

    border: 5px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 0 0 8px rgba(201, 164, 92, 0.45),
        0 25px 60px rgba(0, 0, 0, 0.35);

    display: block;
    margin-left: auto;
}

@media (max-width: 991px) {

    .contact-hero-image {
        width: 280px;
        height: 280px;
        margin: 45px auto 0;
    }

}

@media (max-width: 575px) {

    .contact-hero-image {
        width: 220px;
        height: 220px;
    }

}
    /* .contact-hero::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border: 1px solid rgba(201, 164, 92, 0.25);
        border-radius: 50%;
        right: 7%;
        top: 50%;
        transform: translateY(-50%);
    } */

    .hero-small-title {
        color: #d9b96e;
        text-transform: uppercase;
        letter-spacing: 3px;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .contact-hero h1 {
        color: #ffffff;
        font-family: 'Playfair Display', serif;
        font-size: clamp(42px, 5vw, 64px);
        font-weight: 600;
        margin-bottom: 20px;
    }

    .contact-hero p {
        max-width: 650px;
        color: rgba(255,255,255,0.78);
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 0;
    }

    

    /* =========================================
       INTRODUCTION
    ========================================= */

    .contact-intro {
        padding: 85px 0 65px;
    }

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

    .section-heading {
        font-family: 'Playfair Display', serif;
        color: #0c2438;
        font-size: clamp(30px, 4vw, 43px);
        font-weight: 600;
        line-height: 1.25;
        margin-bottom: 18px;
    }

    .section-description {
        color: #667481;
        font-size: 15px;
        line-height: 1.9;
        max-width: 680px;
    }


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

    .contact-card {
        height: 100%;
        padding: 32px 28px;
        background: #ffffff;
        border: 1px solid #e9ecef;
        position: relative;
        transition: all 0.35s ease;
    }

    .contact-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 0;
        background: #c9a45c;
        transition: height 0.35s ease;
    }

    .contact-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 45px rgba(12, 36, 56, 0.09);
    }

    .contact-card:hover::before {
        height: 100%;
    }

    .contact-icon {
        width: 52px;
        height: 52px;
        border: 1px solid rgba(201,164,92,0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #c9a45c;
        font-size: 20px;
        margin-bottom: 22px;
    }

    .contact-card h4 {
        font-family: 'Playfair Display', serif;
        color: #0c2438;
        font-size: 22px;
        margin-bottom: 12px;
    }

    .contact-card p {
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 8px;
    }

    .contact-card a {
        color: #0c2438;
        font-weight: 600;
        text-decoration: none;
    }

    .contact-card a:hover {
        color: #c9a45c;
    }


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

    .appointment-section {
        background: #f7f8f9;
        padding: 85px 0;
    }

    .appointment-box {
        background: #ffffff;
        box-shadow: 0 20px 60px rgba(12,36,56,0.08);
    }

    .appointment-content {
        padding: 50px;
    }

    .appointment-content h2 {
        color: #0c2438;
        font-family: 'Playfair Display', serif;
        font-size: 36px;
        line-height: 1.3;
        margin-bottom: 16px;
    }

    .appointment-content > p {
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 28px;
    }

    .appointment-benefit {
        display: flex;
        gap: 12px;
        margin-bottom: 15px;
        font-size: 14px;
    }

    .appointment-benefit i {
        color: #c9a45c;
        font-size: 17px;
    }


    /* =========================================
       FORM
    ========================================= */

    .appointment-form {
        padding: 50px;
        background: #0c2438;
    }

    .appointment-form h3 {
        color: #ffffff;
        font-family: 'Playfair Display', serif;
        font-size: 28px;
        margin-bottom: 8px;
    }

    .appointment-form > p {
        color: rgba(255,255,255,0.65);
        font-size: 13px;
        margin-bottom: 28px;
    }

    .form-label {
        color: rgba(255,255,255,0.8);
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 7px;
    }

    .form-control,
    .form-select {
        border-radius: 0;
        border: 1px solid rgba(255,255,255,0.14);
        background: rgba(255,255,255,0.06);
        color: #ffffff;
        padding: 13px 14px;
        font-size: 13px;
        box-shadow: none !important;
    }

    .form-control::placeholder {
        color: rgba(255,255,255,0.4);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #c9a45c;
        background: rgba(255,255,255,0.08);
        color: #ffffff;
    }

    .form-select option {
        color: #0c2438;
    }

    .submit-btn {
        width: 100%;
        border: none;
        background: #c9a45c;
        color: #ffffff;
        padding: 14px 22px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.4px;
        transition: 0.3s;
    }

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


    /* =========================================
       WHY CONTACT US
    ========================================= */

    .why-contact {
        padding: 90px 0;
    }

    .reason {
        display: flex;
        gap: 18px;
        margin-bottom: 30px;
    }

    .reason-number {
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(201,164,92,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #c9a45c;
        font-family: 'Playfair Display', serif;
    }

    .reason h5 {
        font-family: 'DM Sans', sans-serif;
        color: #0c2438;
        font-weight: 700;
        font-size: 15px;
        margin-bottom: 7px;
    }

    .reason p {
        font-size: 13px;
        line-height: 1.7;
        margin: 0;
    }


    /* =========================================
       MAP
    ========================================= */

    .map-section {
        padding-bottom: 90px;
    }

    .map-container {
        height: 430px;
        background: #eef1f3;
        position: relative;
        overflow: hidden;
    }

    .map-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
        filter: grayscale(90%);
    }

    .map-info {
        position: absolute;
        left: 25px;
        bottom: 25px;
        background: #ffffff;
        padding: 23px 25px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.12);
        max-width: 310px;
    }

    .map-info h5 {
        color: #0c2438;
        font-family: 'Playfair Display', serif;
        margin-bottom: 8px;
    }

    .map-info p {
        font-size: 13px;
        margin-bottom: 12px;
        line-height: 1.6;
    }

    .directions-btn {
        display: inline-block;
        color: #0c2438;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        border-bottom: 1px solid #c9a45c;
        padding-bottom: 3px;
    }


    /* =========================================
       FAQ
    ========================================= */

    .faq-section {
        background: #f7f8f9;
        padding: 85px 0;
    }

    .faq-item {
        background: #ffffff;
        border: 1px solid #e7eaed;
        margin-bottom: 12px;
    }

    .faq-item button {
        width: 100%;
        background: none;
        border: none;
        padding: 20px 23px;
        text-align: left;
        color: #0c2438;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .faq-item button i {
        color: #c9a45c;
        transition: 0.3s;
    }

    .faq-item button:not(.collapsed) i {
        transform: rotate(45deg);
    }

    .faq-answer {
        padding: 0 23px 20px;
        color: #667481;
        font-size: 13px;
        line-height: 1.8;
    }


    /* =========================================
       EMERGENCY NOTICE
    ========================================= */

    .emergency-section {
        padding: 45px 0;
        background: #c9a45c;
    }

    .emergency-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
    }

    .emergency-icon {
        width: 55px;
        height: 55px;
        border: 1px solid rgba(255,255,255,0.5);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 23px;
        flex-shrink: 0;
    }

    .emergency-content h4 {
        color: #ffffff;
        font-family: 'Playfair Display', serif;
        margin-bottom: 5px;
    }

    .emergency-content p {
        color: rgba(255,255,255,0.85);
        font-size: 13px;
        margin: 0;
    }

    .emergency-btn {
        border: 1px solid #ffffff;
        color: #ffffff;
        text-decoration: none;
        padding: 13px 23px;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 700;
        transition: 0.3s;
    }

    .emergency-btn:hover {
        background: #ffffff;
        color: #0c2438;
    }


    /* =========================================
       RESPONSIVE
    ========================================= */

    @media (max-width: 991px) {

        .contact-hero {
            padding: 75px 0;
        }

        .appointment-content,
        .appointment-form {
            padding: 38px;
        }

        .map-info {
            max-width: 280px;
        }

    }

    @media (max-width: 767px) {

        .contact-hero {
            padding: 60px 0;
        }

        .contact-intro,
        .why-contact,
        .appointment-section,
        .faq-section {
            padding: 60px 0;
        }

        .appointment-content,
        .appointment-form {
            padding: 30px 23px;
        }

        .appointment-content h2 {
            font-size: 30px;
        }

        .map-container {
            height: 350px;
        }

        .map-info {
            left: 15px;
            right: 15px;
            bottom: 15px;
            max-width: none;
        }

        .emergency-content {
            align-items: flex-start;
            flex-direction: column;
        }

        .emergency-btn {
            margin-left: 70px;
        }

    }

    /* =====================================================
       ABOUT PAGE VARIABLES
    ===================================================== */

    :root {
        --about-navy: #0c2438;
        --about-navy-light: #123b59;
        --about-gold: #c9a45c;
        --about-gold-light: #e0c27c;
        --about-light: #f7f8f9;
        --about-text: #5c6873;
        --about-border: rgba(12, 36, 56, 0.10);
    }

    .about-page {
        overflow: hidden;
        background: #ffffff;
    }


    /* =====================================================
       COMMON
    ===================================================== */

    .about-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--about-gold);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        margin-bottom: 16px;
    }

    .about-eyebrow::before {
        content: "";
        width: 32px;
        height: 1px;
        background: var(--about-gold);
    }

    .about-heading {
        font-family: "Playfair Display", serif;
        color: var(--about-navy);
        font-size: clamp(34px, 4vw, 52px);
        line-height: 1.15;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .about-heading span {
        color: var(--about-gold);
    }

    .about-description {
        color: var(--about-text);
        font-size: 15px;
        line-height: 1.9;
    }


    /* =====================================================
       PAGE HERO
    ===================================================== */

    .about-hero {
        position: relative;
        min-height: 420px;
        display: flex;
        align-items: center;
        background:
            linear-gradient(
                90deg,
                rgba(8, 29, 45, 0.97) 0%,
                rgba(8, 29, 45, 0.90) 45%,
                rgba(8, 29, 45, 0.55) 100%
            ),
            url("https://images.unsplash.com/photo-1551601651-2a8555f1a136?auto=format&fit=crop&w=2000&q=85")
            center/cover no-repeat;
    }

    .about-hero-content {
        max-width: 760px;
        color: white;
        padding: 80px 0;
    }

    .about-hero-label {
        display: inline-block;
        color: var(--about-gold-light);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 18px;
    }

    .about-hero h1 {
        font-family: "Playfair Display", serif;
        font-size: clamp(42px, 6vw, 70px);
        line-height: 1.05;
        font-weight: 600;
        margin-bottom: 22px;
    }

    .about-hero h1 span {
        color: var(--about-gold-light);
    }

    .about-hero p {
        max-width: 650px;
        font-size: 17px;
        line-height: 1.8;
        color: rgba(255,255,255,0.82);
        margin-bottom: 0;
    }

    .hero-line {
        width: 60px;
        height: 2px;
        background: var(--about-gold);
        margin-top: 28px;
    }


    /* =====================================================
       DOCTOR INTRODUCTION
    ===================================================== */

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

    .doctor-image-wrapper {
        position: relative;
        padding-right: 35px;
    }

    .doctor-image {
        width: 100%;
        height: 590px;
        object-fit: cover;
        display: block;
        position: relative;
        z-index: 2;
    }

    .doctor-image-frame {
        position: absolute;
        width: 180px;
        height: 180px;
        border: 1px solid var(--about-gold);
        right: 0;
        bottom: -25px;
        z-index: 1;
    }

    .doctor-image-caption {
        position: absolute;
        z-index: 3;
        left: -20px;
        bottom: 25px;
        background: var(--about-navy);
        color: white;
        padding: 20px 25px;
        min-width: 220px;
        box-shadow: 0 12px 35px rgba(0,0,0,0.18);
    }

    .doctor-image-caption strong {
        display: block;
        font-family: "Playfair Display", serif;
        font-size: 19px;
        margin-bottom: 4px;
    }

    .doctor-image-caption span {
        font-size: 11px;
        color: var(--about-gold-light);
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }


    .doctor-content {
        padding-left: 30px;
    }

    .doctor-name {
        font-family: "Playfair Display", serif;
        font-size: 44px;
        color: var(--about-navy);
        margin-bottom: 5px;
    }

    .doctor-qualification {
        color: var(--about-gold);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1px;
        margin-bottom: 25px;
    }

    .doctor-position {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--about-light);
        border-left: 3px solid var(--about-gold);
        padding: 12px 16px;
        margin-bottom: 25px;
        color: var(--about-navy);
        font-size: 14px;
        font-weight: 600;
    }

    .doctor-position i {
        color: var(--about-gold);
    }

    .doctor-content p {
        color: var(--about-text);
        font-size: 15px;
        line-height: 1.9;
        margin-bottom: 18px;
    }


    /* =====================================================
       DOCTOR CREDENTIALS
    ===================================================== */

    .credentials-section {
        background: var(--about-light);
        padding: 80px 0;
    }

    .credential-card {
        height: 100%;
        background: #ffffff;
        border: 1px solid var(--about-border);
        padding: 30px 25px;
        transition: all 0.35s ease;
    }

    .credential-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 18px 40px rgba(12,36,56,0.09);
        border-color: rgba(201,164,92,0.4);
    }

    .credential-icon {
        width: 50px;
        height: 50px;
        border: 1px solid rgba(201,164,92,0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .credential-icon i {
        color: var(--about-gold);
        font-size: 21px;
    }

    .credential-card h4 {
        font-family: "DM Sans", sans-serif;
        color: var(--about-navy);
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 9px;
    }

    .credential-card p {
        color: var(--about-text);
        font-size: 13px;
        line-height: 1.7;
        margin: 0;
    }


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

    .philosophy-section {
        padding: 100px 0;
        position: relative;
    }

    .philosophy-content {
        max-width: 700px;
    }

    .philosophy-quote {
        position: relative;
        padding: 30px 0 30px 35px;
        border-left: 2px solid var(--about-gold);
        margin-top: 30px;
    }

    .philosophy-quote p {
        font-family: "Playfair Display", serif;
        color: var(--about-navy);
        font-size: 25px;
        line-height: 1.5;
        margin: 0;
    }

    .philosophy-image {
        width: 100%;
        height: 470px;
        object-fit: cover;
    }


    /* =====================================================
       CLINIC INTRODUCTION
    ===================================================== */

    .clinic-section {
        padding: 100px 0;
        background: var(--about-light);
    }

    .clinic-image {
        width: 100%;
        height: 480px;
        object-fit: cover;
    }

    .clinic-content {
        padding-left: 45px;
    }

    .clinic-name {
        font-family: "Playfair Display", serif;
        color: var(--about-navy);
        font-size: 38px;
        line-height: 1.25;
        margin-bottom: 20px;
    }

    .clinic-name span {
        color: var(--about-gold);
    }

    .clinic-content p {
        color: var(--about-text);
        font-size: 15px;
        line-height: 1.9;
        margin-bottom: 18px;
    }

    .clinic-highlight {
        display: flex;
        gap: 15px;
        margin-top: 30px;
        padding-top: 25px;
        border-top: 1px solid var(--about-border);
    }

    .clinic-highlight i {
        color: var(--about-gold);
        font-size: 23px;
    }

    .clinic-highlight strong {
        display: block;
        color: var(--about-navy);
        font-size: 14px;
        margin-bottom: 3px;
    }

    .clinic-highlight span {
        color: var(--about-text);
        font-size: 13px;
    }


    /* =====================================================
       TRUST SECTION
    ===================================================== */

    .trust-section {
        padding: 85px 0;
        background: var(--about-navy);
        color: white;
    }

    .trust-heading {
        font-family: "Playfair Display", serif;
        color: white;
        font-size: 42px;
        margin-bottom: 18px;
    }

    .trust-description {
        color: rgba(255,255,255,0.68);
        font-size: 14px;
        line-height: 1.8;
        max-width: 650px;
        margin: auto;
    }

    .trust-item {
        text-align: center;
        padding: 30px 20px;
        border-right: 1px solid rgba(255,255,255,0.10);
    }

    .trust-item:last-child {
        border-right: none;
    }

    .trust-icon {
        width: 60px;
        height: 60px;
        border: 1px solid rgba(201,164,92,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 18px;
    }

    .trust-icon i {
        color: var(--about-gold-light);
        font-size: 24px;
    }

    .trust-item h4 {
        font-family: "DM Sans", sans-serif;
        color: white;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .trust-item p {
        color: rgba(255,255,255,0.6);
        font-size: 12px;
        line-height: 1.7;
        margin: 0;
    }


    /* =====================================================
       CTA
    ===================================================== */

    .about-cta {
        padding: 90px 0;
        background:
            linear-gradient(
                rgba(12,36,56,0.94),
                rgba(25, 75, 116, 0.94)
            ),
            url("https://images.unsplash.com/photo-1584982751601-97dcc096659c?auto=format&fit=crop&w=1800&q=85")
            center/cover;
    }

    .about-cta h2 {
        font-family: "Playfair Display", serif;
        color: white;
        font-size: clamp(32px, 4vw, 48px);
        margin-bottom: 15px;
    }

    .about-cta p {
        color: rgba(255,255,255,0.72);
        font-size: 15px;
        max-width: 620px;
        margin: 0 auto 30px;
        line-height: 1.8;
    }

    .cta-button {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--about-gold);
        color: white;
        padding: 14px 28px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        transition: 0.3s ease;
    }

    .cta-button:hover {
        background: var(--about-gold-light);
        color: var(--about-navy);
        transform: translateY(-3px);
    }

    .cta-secondary {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: white;
        border: 1px solid rgba(255,255,255,0.35);
        padding: 13px 25px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        margin-left: 10px;
        transition: 0.3s;
    }

    .cta-secondary:hover {
        border-color: var(--about-gold);
        color: var(--about-gold-light);
    }


    /* =====================================================
       RESPONSIVE
    ===================================================== */

    @media (max-width: 991px) {

        .doctor-section,
        .philosophy-section,
        .clinic-section {
            padding: 75px 0;
        }

        .doctor-content {
            padding-left: 0;
            margin-top: 55px;
        }

        .clinic-content {
            padding-left: 0;
            margin-top: 45px;
        }

        .doctor-image-wrapper {
            padding-right: 20px;
        }

        .trust-item {
            border-right: none;
            border-bottom: 1px solid rgba(255,255,255,0.10);
        }

        .trust-item:last-child {
            border-bottom: none;
        }
    }


    @media (max-width: 767px) {

        .about-hero {
            min-height: 400px;
        }

        .about-hero-content {
            padding: 60px 15px;
        }

        .doctor-image {
            height: 450px;
        }

        .doctor-image-caption {
            left: 10px;
            bottom: 20px;
        }

        .doctor-name {
            font-size: 35px;
        }

        .philosophy-image {
            height: 350px;
            margin-top: 40px;
        }

        .clinic-image {
            height: 350px;
        }

        .clinic-name {
            font-size: 32px;
        }

        .cta-secondary {
            margin-left: 0;
            margin-top: 12px;
        }

    }



     /* =====================================================
       SERVICES PAGE VARIABLES
    ===================================================== */

    :root {
        --service-navy: #0c2438;
        --service-navy-light: #123b59;
        --service-gold: #c9a45c;
        --service-gold-light: #e0c27c;
        --service-light: #f7f8f9;
        --service-text: #5c6873;
        --service-border: rgba(12, 36, 56, 0.10);
    }

    .services-page {
        background: #ffffff;
        overflow: hidden;
    }


    /* =====================================================
       COMMON
    ===================================================== */

    .service-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--service-gold);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    .service-eyebrow::before {
        content: "";
        width: 32px;
        height: 1px;
        background: var(--service-gold);
    }

    .service-heading {
        font-family: "Playfair Display", serif;
        color: var(--service-navy);
        font-size: clamp(34px, 4vw, 52px);
        line-height: 1.15;
        font-weight: 600;
        margin-bottom: 18px;
    }

    .service-heading span {
        color: var(--service-gold);
    }

    .service-description {
        color: var(--service-text);
        font-size: 15px;
        line-height: 1.9;
    }


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

    .services-hero {
        min-height: 470px;
        display: flex;
        align-items: center;

        background:
            linear-gradient(
                90deg,
                rgba(8, 29, 45, 0.97) 0%,
                rgba(8, 29, 45, 0.90) 45%,
                rgba(8, 29, 45, 0.55) 100%
            ),
            url("https://images.unsplash.com/photo-1559757175-0eb30cd8c063?auto=format&fit=crop&w=2000&q=85")
            center/cover no-repeat;
    }

    .services-hero-content {
        max-width: 780px;
        padding: 85px 0;
        color: white;
    }

    .services-hero-label {
        color: var(--service-gold-light);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        display: inline-block;
        margin-bottom: 18px;
    }

    .services-hero h1 {
        font-family: "Playfair Display", serif;
        font-size: clamp(42px, 6vw, 68px);
        line-height: 1.05;
        font-weight: 600;
        margin-bottom: 22px;
    }

    .services-hero h1 span {
        color: var(--service-gold-light);
    }

    .services-hero p {
        color: rgba(255,255,255,0.80);
        max-width: 650px;
        font-size: 17px;
        line-height: 1.8;
        margin-bottom: 30px;
    }

    .hero-button {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 26px;
        background: var(--service-gold);
        color: white;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        transition: 0.3s;
    }

    .hero-button:hover {
        background: var(--service-gold-light);
        color: var(--service-navy);
        transform: translateY(-3px);
    }


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

    .services-intro {
        padding: 90px 0 65px;
    }

    .intro-box {
        max-width: 800px;
        margin: auto;
        text-align: center;
    }

    .intro-box .service-eyebrow {
        justify-content: center;
    }


    /* =====================================================
       SPECIALTY SECTION
    ===================================================== */

    .specialty-section {
        background: var(--service-light);
        padding: 85px 0;
    }

    .specialty-image {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }

    .specialty-content {
        padding-left: 45px;
    }

    .specialty-content h2 {
        font-family: "Playfair Display", serif;
        color: var(--service-navy);
        font-size: 42px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .specialty-content h2 span {
        color: var(--service-gold);
    }

    .specialty-content p {
        color: var(--service-text);
        font-size: 15px;
        line-height: 1.9;
        margin-bottom: 18px;
    }

    .specialty-points {
        list-style: none;
        padding: 0;
        margin: 28px 0 0;
    }

    .specialty-points li {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 13px;
        color: var(--service-navy);
        font-size: 14px;
        font-weight: 600;
    }

    .specialty-points i {
        color: var(--service-gold);
        font-size: 17px;
    }


    /* =====================================================
       SERVICE CARDS
    ===================================================== */

    .procedures-section {
        padding: 100px 0;
    }

    .section-header {
        text-align: center;
        max-width: 750px;
        margin: 0 auto 55px;
    }

    .section-header .service-eyebrow {
        justify-content: center;
    }

    .procedure-card {
        height: 100%;
        background: #ffffff;
        border: 1px solid var(--service-border);
        padding: 32px 28px;
        position: relative;
        transition: all 0.35s ease;
        overflow: hidden;
    }

    .procedure-card::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 0;
        background: var(--service-gold);
        transition: 0.35s ease;
    }

    .procedure-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 45px rgba(12,36,56,0.10);
        border-color: rgba(201,164,92,0.35);
    }

    .procedure-card:hover::after {
        width: 100%;
    }

    .procedure-icon {
        width: 58px;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(201,164,92,0.45);
        margin-bottom: 23px;
        transition: 0.3s;
    }

    .procedure-card:hover .procedure-icon {
        background: var(--service-navy);
        border-color: var(--service-navy);
    }

    .procedure-icon i {
        color: var(--service-gold);
        font-size: 25px;
    }

    .procedure-card h3 {
        font-family: "DM Sans", sans-serif;
        font-size: 17px;
        font-weight: 700;
        color: var(--service-navy);
        margin-bottom: 10px;
    }

    .procedure-card p {
        color: var(--service-text);
        font-size: 13px;
        line-height: 1.75;
        margin: 0;
    }


    /* =====================================================
       FEATURED SERVICE
    ===================================================== */

    .featured-service {
        background: var(--service-navy);
        padding: 90px 0;
        color: white;
    }

    .featured-image {
        width: 100%;
        height: 480px;
        object-fit: cover;
    }

    .featured-content {
        padding-left: 45px;
    }

    .featured-content .service-eyebrow {
        color: var(--service-gold-light);
    }

    .featured-content h2 {
        font-family: "Playfair Display", serif;
        color: white;
        font-size: 43px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .featured-content h2 span {
        color: var(--service-gold-light);
    }

    .featured-content p {
        color: rgba(255,255,255,0.68);
        font-size: 14px;
        line-height: 1.9;
        margin-bottom: 18px;
    }

    .featured-list {
        list-style: none;
        padding: 0;
        margin-top: 25px;
    }

    .featured-list li {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;
        color: rgba(255,255,255,0.85);
        font-size: 13px;
    }

    .featured-list i {
        color: var(--service-gold-light);
    }


    /* =====================================================
       CONDITIONS / CONSULTATION
    ===================================================== */

    .conditions-section {
        padding: 100px 0;
        background: var(--service-light);
    }

    .condition-card {
        background: white;
        border: 1px solid var(--service-border);
        padding: 20px 18px;
        display: flex;
        align-items: center;
        gap: 13px;
        height: 100%;
        transition: 0.3s;
    }

    .condition-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(12,36,56,0.08);
        border-color: rgba(201,164,92,0.4);
    }

    .condition-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 50%;
        background: rgba(201,164,92,0.10);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .condition-icon i {
        color: var(--service-gold);
        font-size: 17px;
    }

    .condition-card span {
        color: var(--service-navy);
        font-size: 13px;
        font-weight: 600;
    }


    /* =====================================================
       CARE PROCESS
    ===================================================== */

    .process-section {
        padding: 100px 0;
    }

    .process-card {
        text-align: center;
        padding: 20px 25px;
        position: relative;
    }

    .process-number {
        width: 62px;
        height: 62px;
        margin: 0 auto 22px;
        border: 1px solid var(--service-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--service-gold);
        font-family: "Playfair Display", serif;
        font-size: 22px;
        position: relative;
        background: white;
        z-index: 2;
    }

    .process-card h4 {
        font-family: "DM Sans", sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--service-navy);
        margin-bottom: 10px;
    }

    .process-card p {
        color: var(--service-text);
        font-size: 13px;
        line-height: 1.7;
        margin: 0;
    }


    /* =====================================================
       EMERGENCY / IMPORTANT NOTE
    ===================================================== */

    .medical-note {
        background: #fffaf0;
        border-left: 3px solid var(--service-gold);
        padding: 25px 28px;
        margin-top: 45px;
    }

    .medical-note h5 {
        font-family: "DM Sans", sans-serif;
        color: var(--service-navy);
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .medical-note p {
        color: var(--service-text);
        font-size: 13px;
        line-height: 1.7;
        margin: 0;
    }


    /* =====================================================
       FINAL CTA
    ===================================================== */

    .services-cta {
        padding: 95px 0;

        background:
            linear-gradient(
                rgba(12,36,56,0.95),
                rgba(12,36,56,0.95)
            ),
            url("https://images.unsplash.com/photo-1584982751601-97dcc096659c?auto=format&fit=crop&w=1800&q=85")
            center/cover;
    }

    .services-cta h2 {
        font-family: "Playfair Display", serif;
        color: white;
        font-size: clamp(34px, 4vw, 50px);
        margin-bottom: 17px;
    }

    .services-cta p {
        max-width: 650px;
        margin: 0 auto 30px;
        color: rgba(255,255,255,0.70);
        font-size: 15px;
        line-height: 1.8;
    }

    .cta-main {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--service-gold);
        color: white;
        padding: 14px 28px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        transition: 0.3s;
    }

    .cta-main:hover {
        background: var(--service-gold-light);
        color: var(--service-navy);
        transform: translateY(-3px);
    }

    .cta-call {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: white;
        border: 1px solid rgba(255,255,255,0.35);
        padding: 13px 25px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        margin-left: 10px;
        transition: 0.3s;
    }

    .cta-call:hover {
        color: var(--service-gold-light);
        border-color: var(--service-gold);
    }


    /* =====================================================
       RESPONSIVE
    ===================================================== */

    @media (max-width: 991px) {

        .specialty-content,
        .featured-content {
            padding-left: 0;
            margin-top: 45px;
        }

        .specialty-image,
        .featured-image {
            height: 400px;
        }

        .procedure-card {
            padding: 28px 23px;
        }

    }


    @media (max-width: 767px) {

        .services-hero {
            min-height: 450px;
        }

        .services-hero-content {
            padding: 65px 15px;
        }

        .specialty-section,
        .procedures-section,
        .conditions-section,
        .process-section {
            padding: 70px 0;
        }

        .specialty-content h2,
        .featured-content h2 {
            font-size: 34px;
        }

        .specialty-image,
        .featured-image {
            height: 330px;
        }

        .cta-call {
            margin-left: 0;
            margin-top: 12px;
        }

    }

    .facilities-page {
    overflow: hidden;
    background: var(--facility-white);
}


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

.facility-hero {
    min-height: 500px;

    display: flex;
    align-items: center;

    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(5,22,35,.96),
            rgba(5,22,35,.78),
            rgba(5,22,35,.42)
        ),
        url("https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=2200&q=90")
        center/cover no-repeat;

    animation: heroZoom 12s ease-in-out infinite alternate;
}

@keyframes heroZoom {

    from {
        background-size: 100%;
    }

    to {
        background-size: 108%;
    }

}


.facility-hero-content {
    max-width: 760px;
    color: white;
    padding: 90px 0;
}

.facility-label {
    color: var(--facility-gold-light);
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 700;
    text-transform: uppercase;

    opacity: 0;
    animation: fadeUp .9s ease forwards;
}

.facility-hero h1 {

    font-family: "Playfair Display", serif;

    font-size: clamp(45px, 6vw, 72px);

    line-height: 1.05;

    margin: 18px 0;

    opacity: 0;

    animation: fadeUp .9s ease .15s forwards;
}

.facility-hero h1 span {
    color: var(--facility-gold-light);
}

.facility-hero p {

    max-width: 650px;

    color: rgba(255,255,255,.78);

    font-size: 17px;

    line-height: 1.8;

    opacity: 0;

    animation: fadeUp .9s ease .3s forwards;
}


/* =========================================================
   COMMON
========================================================= */

.facility-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--facility-gold);

    font-size: 12px;

    letter-spacing: 2.5px;

    font-weight: 700;

    text-transform: uppercase;
}

.facility-eyebrow::before {

    content: "";

    width: 32px;

    height: 1px;

    background: var(--facility-gold);
}

.facility-heading {

    font-family: "Playfair Display", serif;

    color: var(--facility-navy);

    font-size: clamp(35px,4vw,52px);

    line-height: 1.15;

    margin: 15px 0 20px;
}

.facility-heading span {
    color: var(--facility-gold);
}

.facility-description {

    color: var(--facility-text);

    font-size: 15px;

    line-height: 1.9;
}


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

.facility-intro {

    padding: 95px 0;

}

.facility-intro-box {

    max-width: 800px;

    margin: auto;

    text-align: center;
}

.facility-intro-box .facility-eyebrow {

    justify-content: center;
}


/* =========================================================
   FEATURED FACILITY
========================================================= */

.featured-facility {

    padding: 90px 0;

    background: var(--facility-light);
}

.facility-image-wrap {

    position: relative;

    overflow: hidden;
}

.facility-main-image {

    width: 100%;

    height: 500px;

    object-fit: cover;

    transition: transform .8s ease;
}

.facility-image-wrap:hover .facility-main-image {

    transform: scale(1.06);

}

.facility-image-badge {

    position: absolute;

    left: 25px;

    bottom: 25px;

    background: rgba(12,36,56,.94);

    color: white;

    padding: 18px 22px;

    border-left: 3px solid var(--facility-gold);

}

.facility-image-badge strong {

    display: block;

    font-family: "Playfair Display",serif;

    font-size: 19px;

}

.facility-image-badge span {

    font-size: 11px;

    color: var(--facility-gold-light);

    letter-spacing: 1px;

}


.featured-content {

    padding-left: 45px;

}

.featured-content p {

    color: var(--facility-text);

    font-size: 15px;

    line-height: 1.9;

}


/* =========================================================
   FACILITY GRID
========================================================= */

.facility-grid {

    padding: 100px 0;

}

.facility-card {

    position: relative;

    height: 360px;

    overflow: hidden;

    cursor: pointer;

}

.facility-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;
}

.facility-card:hover img {

    transform: scale(1.10);

}

.facility-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5,22,35,.95),
            rgba(5,22,35,.05) 70%
        );

}

.facility-card-content {

    position: absolute;

    z-index: 2;

    left: 25px;

    right: 25px;

    bottom: 25px;

    color: white;

    transform: translateY(8px);

    transition: .4s ease;
}

.facility-card:hover .facility-card-content {

    transform: translateY(0);

}

.facility-card-content h3 {

    font-family: "Playfair Display",serif;

    font-size: 24px;

    margin-bottom: 7px;
}

.facility-card-content p {

    font-size: 12px;

    line-height: 1.6;

    color: rgba(255,255,255,.72);

    margin: 0;
}


/* =========================================================
   FACILITY FEATURES
========================================================= */
.premium-care-section {

    position: relative;

    padding: 110px 0 100px;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(201,164,92,.09),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(201,164,92,.06),
            transparent 30%
        ),

        #071b2b;

    overflow: hidden;

}


/* subtle decorative circle */

.premium-care-section::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border: 1px solid rgba(201,164,92,.08);

    border-radius: 50%;

    top: -250px;

    right: -150px;

}

.premium-care-section::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    border: 1px solid rgba(201,164,92,.06);

    border-radius: 50%;

    bottom: -220px;

    left: -150px;

}


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

.premium-care-header {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: 0 auto 55px;

}


.premium-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #d8b86e;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

}


.premium-eyebrow span {

    width: 35px;

    height: 1px;

    background: #c9a45c;

}


.premium-care-header h2 {

    margin: 18px 0 18px;

    color: #ffffff;

    font-family: "Playfair Display", serif;

    font-size: clamp(36px, 4vw, 53px);

    line-height: 1.15;

    font-weight: 400;

}


.premium-care-header h2 strong {

    color: #d5b56d;

    font-weight: 500;

}


.premium-care-header p {

    margin: 0 auto;

    max-width: 650px;

    color: rgba(255,255,255,.65);

    font-size: 15px;

    line-height: 1.9;

}


/* =========================================================
   CARD
========================================================= */

.premium-care-card {

    position: relative;

    height: 490px;

    overflow: hidden;

    background: #102c40;

    cursor: pointer;

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:

        0 15px 40px rgba(0,0,0,.18);

    transition:

        transform .5s cubic-bezier(.2,.8,.2,1),

        box-shadow .5s ease,

        border-color .5s ease;

}


/* IMAGE */

.premium-care-card > img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform 1s cubic-bezier(.2,.8,.2,1),

        filter .7s ease;

}


.premium-care-card:hover > img {

    transform: scale(1.09);

    filter: saturate(1.08);

}


/* DARK OVERLAY */

.premium-card-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(

            to bottom,

            rgba(4,19,30,.12) 0%,

            rgba(4,19,30,.20) 25%,

            rgba(4,19,30,.72) 62%,

            rgba(4,19,30,.98) 100%

        );

    transition: .5s ease;

}


.premium-care-card:hover .premium-card-overlay {

    background:

        linear-gradient(

            to bottom,

            rgba(4,19,30,.08) 0%,

            rgba(4,19,30,.22) 20%,

            rgba(4,19,30,.78) 58%,

            rgba(4,19,30,.99) 100%

        );

}


/* =========================================================
   CARD NUMBER
========================================================= */

.premium-card-number {

    position: absolute;

    top: 22px;

    right: 22px;

    z-index: 3;

    color: rgba(255,255,255,.75);

    font-family: "Playfair Display", serif;

    font-size: 16px;

    letter-spacing: 2px;

}


.premium-card-number::after {

    content: "";

    display: block;

    width: 22px;

    height: 1px;

    background: #c9a45c;

    margin-top: 5px;

    margin-left: auto;

}


/* =========================================================
   ICON
========================================================= */

.premium-card-icon {

    position: absolute;

    top: 27px;

    left: 25px;

    z-index: 3;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(220,190,115,.65);

    background: rgba(7,27,43,.45);

    backdrop-filter: blur(8px);

    color: #dfc17a;

    font-size: 20px;

    transition: .45s ease;

}


.premium-care-card:hover .premium-card-icon {

    background: #c9a45c;

    color: #071b2b;

    transform: rotateY(180deg);

}


/* =========================================================
   CARD CONTENT
========================================================= */

.premium-card-content {

    position: absolute;

    z-index: 3;

    left: 25px;

    right: 25px;

    bottom: 25px;

}


.premium-card-label {

    display: block;

    margin-bottom: 8px;

    color: #d9b970;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2.2px;

}


.premium-card-content h3 {

    margin: 0 0 11px;

    color: #ffffff;

    font-family: "Playfair Display", serif;

    font-size: 25px;

    font-weight: 500;

    line-height: 1.2;

}


.premium-card-content p {

    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: 12.5px;

    line-height: 1.75;

}


/* GOLD LINE */

.premium-card-line {

    width: 0;

    height: 2px;

    margin-top: 18px;

    background: #c9a45c;

    transition: width .5s ease;

}


.premium-care-card:hover .premium-card-line {

    width: 45px;

}


/* =========================================================
   CARD HOVER
========================================================= */

.premium-care-card:hover {

    transform: translateY(-12px);

    border-color: rgba(201,164,92,.55);

    box-shadow:

        0 28px 60px rgba(0,0,0,.35),

        0 0 0 1px rgba(201,164,92,.08);

}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.premium-care-bottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 65px;

}


.premium-care-bottom p {

    margin: 0;

    color: rgba(255,255,255,.58);

    font-size: 11px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-align: center;

}


.premium-care-bottom i {

    color: #d5b56d;

    margin-right: 5px;

}


.premium-bottom-line {

    width: 70px;

    height: 1px;

    background: rgba(201,164,92,.35);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px) {

    .premium-care-section {

        padding: 85px 0;

    }

    .premium-care-card {

        height: 450px;

    }

}


@media(max-width:767px) {

    .premium-care-header {

        margin-bottom: 35px;

    }

    .premium-care-header h2 {

        font-size: 36px;

    }

    .premium-care-card {

        height: 430px;

    }

    .premium-care-bottom {

        gap: 10px;

    }

    .premium-bottom-line {

        width: 30px;

    }

    .premium-care-bottom p {

        font-size: 9px;

    }

}


/* =========================================================
   CTA
========================================================= */

.facility-cta {

    padding: 100px 0;

    text-align: center;

    background:
        linear-gradient(
            rgba(215, 222, 229, 0.94),
            rgba(215, 222, 229, 0.94),
        ),
        url("https://images.unsplash.com/photo-1587351021759-3e566b6af7cc?auto=format&fit=crop&w=2000&q=90")
        center/cover;
}

.facility-cta h2 {

    color: rgb(133, 106, 37);

    font-family: "Playfair Display",serif;

    font-size: 46px;

    margin-bottom: 15px;
}

.facility-cta p {

    max-width: 650px;

    margin: auto auto 30px;

    color: rgba(11, 11, 11, 0.7);

    line-height: 1.8;
}

.facility-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 14px 28px;

    background: var(--facility-gold);

    color: goldenrod;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: .3s;
}

.facility-btn:hover {

    background: var(--facility-gold-light);

    color: var(--facility-navy);

    transform: translateY(-3px);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

    .featured-content {

        padding-left: 0;

        margin-top: 45px;

    }

}

@media(max-width:767px){

    .facility-hero {

        min-height: 450px;

    }

    .facility-main-image {

        height: 380px;

    }

    .facility-card {

        height: 320px;

    }

    .facility-cta h2 {

        font-size: 35px;

    }

}

:root {

    --gallery-navy: #0c2438;
    --gallery-gold: #c9a45c;
    --gallery-gold-light: #e0c27c;
    --gallery-light: #f5f7f8;

}


/* =========================================================
   PAGE
========================================================= */

.gallery-page {

    background: var(--gallery-light);

    overflow: hidden;

}


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

.gallery-hero {

    min-height: 450px;

    display: flex;

    align-items: center;

    position: relative;

    background:

        linear-gradient(
            90deg,
            rgba(5,22,35,.96),
            rgba(5,22,35,.75),
            rgba(5,22,35,.45)
        ),

        url("https://images.unsplash.com/photo-1587351021759-3e566b6af7cc?auto=format&fit=crop&w=2200&q=90")
        center/cover no-repeat;

    animation: galleryZoom 12s ease-in-out infinite alternate;

}

@keyframes galleryZoom {

    from {
        background-size: 100%;
    }

    to {
        background-size: 108%;
    }

}


.gallery-hero-content {

    color: white;

    max-width: 750px;

    padding: 90px 0;

}

.gallery-label {

    color: var(--gallery-gold-light);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}

.gallery-hero h1 {

    font-family: "Playfair Display", serif;

    font-size: clamp(45px,6vw,70px);

    line-height: 1.05;

    margin: 18px 0;

}

.gallery-hero h1 span {

    color: var(--gallery-gold-light);

}

.gallery-hero p {

    color: rgba(255,255,255,.75);

    font-size: 16px;

    line-height: 1.8;

    max-width: 620px;

}


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

.gallery-intro {

    padding: 90px 0 55px;

    text-align: center;

}

.gallery-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--gallery-gold);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;

}

.gallery-eyebrow::before {

    content: "";

    width: 32px;

    height: 1px;

    background: var(--gallery-gold);

}

.gallery-intro h2 {

    font-family: "Playfair Display", serif;

    color: var(--gallery-navy);

    font-size: clamp(36px,4vw,52px);

    margin: 15px 0;

}

.gallery-intro h2 span {

    color: var(--gallery-gold);

}

.gallery-intro p {

    max-width: 700px;

    margin: auto;

    color: #64727d;

    font-size: 15px;

    line-height: 1.9;

}


/* =========================================================
   FILTER
========================================================= */

.gallery-filter {

    text-align: center;

    margin-bottom: 45px;

}

.gallery-filter button {

    background: transparent;

    border: 1px solid rgba(12,36,56,.15);

    padding: 10px 20px;

    margin: 4px;

    color: var(--gallery-navy);

    font-size: 12px;

    font-weight: 600;

    transition: .3s;

}

.gallery-filter button:hover,

.gallery-filter button.active {

    background: var(--gallery-navy);

    border-color: var(--gallery-navy);

    color: white;

}


/* =========================================================
   GALLERY
========================================================= */

.gallery-wrapper {

    padding-bottom: 100px;

}

.gallery-grid {

    columns: 3 300px;

    column-gap: 22px;

}

.gallery-item {

    position: relative;

    overflow: hidden;

    margin-bottom: 22px;

    break-inside: avoid;

    cursor: pointer;

    background: var(--gallery-navy);

}

.gallery-item img {

    width: 100%;

    display: block;

    transition:

        transform .7s ease,

        opacity .5s ease;

}

.gallery-item:hover img {

    transform: scale(1.07);

    opacity: .78;

}

.gallery-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 25px;

    background:

        linear-gradient(
            transparent 35%,
            rgba(5,22,35,.92)
        );

    opacity: 0;

    transition: .4s ease;

}

.gallery-item:hover .gallery-overlay {

    opacity: 1;

}

.gallery-overlay span {

    color: var(--gallery-gold-light);

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 5px;

}

.gallery-overlay h3 {

    color: white;

    font-family: "Playfair Display",serif;

    font-size: 22px;

    margin: 0;

}

.gallery-zoom {

    position: absolute;

    right: 20px;

    top: 20px;

    width: 42px;

    height: 42px;

    border: 1px solid rgba(255,255,255,.45);

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

}


/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox {

    position: fixed;

    inset: 0;

    background: rgba(2,12,20,.96);

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 35px;

}

.gallery-lightbox.show {

    display: flex;

}

.lightbox-image {

    max-width: 90vw;

    max-height: 82vh;

    object-fit: contain;

    box-shadow: 0 20px 70px rgba(0,0,0,.5);

    animation: lightboxIn .35s ease;

}

@keyframes lightboxIn {

    from {

        opacity: 0;

        transform: scale(.94);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

.lightbox-close {

    position: absolute;

    right: 30px;

    top: 25px;

    width: 48px;

    height: 48px;

    border: 1px solid rgba(255,255,255,.35);

    background: transparent;

    color: white;

    font-size: 20px;

}

.lightbox-prev,

.lightbox-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 50px;

    height: 50px;

    border: 1px solid rgba(255,255,255,.35);

    background: rgba(255,255,255,.04);

    color: white;

    font-size: 20px;

}

.lightbox-prev {

    left: 25px;

}

.lightbox-next {

    right: 25px;

}

.lightbox-caption {

    position: absolute;

    bottom: 20px;

    left: 0;

    right: 0;

    text-align: center;

    color: rgba(255,255,255,.75);

    font-size: 13px;

    letter-spacing: .5px;

}


/* =========================================================
   CTA
========================================================= */

.gallery-cta {

    padding: 95px 0;

    text-align: center;

    background:

        linear-gradient(
            rgba(12,36,56,.95),
            rgba(12,36,56,.95)
        ),

        url("https://images.unsplash.com/photo-1519494080410-f9aa76cb4283?auto=format&fit=crop&w=2000&q=90")
        center/cover;

}

.gallery-cta h2 {

    color: white;

    font-family: "Playfair Display",serif;

    font-size: 46px;

    margin-bottom: 15px;

}

.gallery-cta p {

    color: rgba(255,255,255,.68);

    max-width: 650px;

    margin: auto auto 30px;

    line-height: 1.8;

}

.gallery-cta a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    background: var(--gallery-gold);

    color: white;

    padding: 14px 28px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: .3s;

}

.gallery-cta a:hover {

    background: var(--gallery-gold-light);

    color: var(--gallery-navy);

    transform: translateY(-3px);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:767px){

    .gallery-hero {

        min-height: 420px;

    }

    .gallery-grid {

        columns: 2 180px;

        column-gap: 12px;

    }

    .gallery-item {

        margin-bottom: 12px;

    }

    .gallery-overlay {

        opacity: 1;

        padding: 15px;

    }

    .gallery-overlay h3 {

        font-size: 16px;

    }

    .gallery-zoom {

        width: 35px;

        height: 35px;

    }

    .lightbox-prev {

        left: 8px;

    }

    .lightbox-next {

        right: 8px;

    }

}

@media(max-width:450px){

    .gallery-grid {

        columns: 1;

    }

}