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

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

html {
    scroll-behavior: smooth;
    background: #071A35;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #071A35;
    background: var(--_theme---background--bg-primary);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: #ef4545;
    font-weight: 600;
}

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

button {
    font-family: inherit;
}


/* ========================================
   CONTAINER
======================================== */

.container {
    width: min(1200px, 92%);
    margin: 0 auto;
}




/* =========================================================
   DESKTOP NAVBAR
   ========================================================= */

.navbar {
    position: fixed;
    top: 24px;
    left: 50%;

    transform: translateX(-50%);

    width: min(1100px, calc(100% - 80px));
    height: 60px;

    display: flex;
    align-items: center;

    padding: 0 18px;

    background: rgba(255, 255, 255, 0.96);
    border-radius: 10px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

    z-index: 1000;

    transition:
        transform 0.4s ease,
        opacity 0.3s ease;

    will-change: transform, opacity;
}


/* =========================================================
   NAVBAR HIDDEN STATE
   ========================================================= */

.navbar.navbar-hidden {
    opacity: 0;

    transform:
        translateX(-50%)
        translateY(-120px);

    pointer-events: none;
}


/* LOGO */

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}


/* NAVIGATION LINKS */

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;

    /* Move navigation toward the left */
    margin-left: 80px;
    margin-right: auto;
}

.nav-links a {
    color: #263238;
    text-decoration: none;

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

    white-space: nowrap;

    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: #287c78;
}


/* =========================================================
   NAVBAR ACTION BUTTONS
   ========================================================= */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: 30px;
}


/* LOGIN BUTTON */

.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 40px;
    min-width: 76px;

    padding: 0 18px;

    background: #ffffff;
    color: #263238;

    border: 1px solid #aeb8b7;
    border-radius: 5px;

    text-decoration: none;

    font-size: 18px;
    font-weight: 600;

    box-sizing: border-box;

    transition: all 0.2s ease;
}


/* LOGIN HOVER */

.login-btn:hover {
    background: #f5f8f7;
    border-color: #287c78;
    color: #287c78;
}


/* BOOK APPOINTMENT BUTTON */

.book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 40px;

    padding: 0 24px;

    background: #287c78;
    color: #ffffff;

    border: 1px solid #287c78;
    border-radius: 5px;

    text-decoration: none;

    font-size: 18px;
    font-weight: 600;

    white-space: nowrap;

    box-sizing: border-box;

    transition: all 0.2s ease;
}


/* BOOK APPOINTMENT HOVER */

.book-btn:hover {
    background: #236d69;
    border-color: #236d69;
}








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

.hero {
    position: relative;

    width: 100%;
    min-height: 760px;

    margin: 0;
    padding: 0 7%;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    overflow: hidden;

    border-radius: 0;

    background: #102E2D;
}

/* VIDEO */

.hero-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
    visibility: visible;
    opacity: 1;

    object-fit: cover;

    z-index: 0;
}


/* OVERLAY */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 31, 30, .88) 0%,
            rgba(8, 31, 30, .70) 42%,
            rgba(8, 31, 30, .28) 75%,
            rgba(8, 31, 30, .10) 100%
        );
}


/* CONTENT */

.hero-content {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 720px;

    margin: 0;

    padding: 130px 0 80px;

    box-sizing: border-box;

    color: #fff;
}


/* LABEL */

.hero-label {
    display: block;

    margin-bottom: 24px;

    color: #9BD7CE;

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

    letter-spacing: .16em;
}


/* HEADING */

.hero h1 {
    margin: 0 0 28px;

    max-width: 720px;

    color: #fff;

    font-size: clamp(52px, 6vw, 88px);

    line-height: .98;

    font-weight: 700;

    letter-spacing: -0.045em;
}

.hero h1 span {
    color: #83CEC4;
}


/* DESCRIPTION */

.hero p {
    max-width: 570px;

    margin: 0 0 34px;

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

    font-size: 18px;

    line-height: 1.65;
}


/* BUTTONS */

.hero-buttons {
    display: flex;

    gap: 14px;

    align-items: center;
}

.hero-primary,
.hero-secondary {
    min-height: 54px;

    padding: 0 27px;

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

    border-radius: 6px;

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

    box-sizing: border-box;

    text-decoration: none;
}

.hero-primary {
    background: #3F9A90;

    color: #fff;
}

.hero-secondary {
    background: transparent;

    color: #fff;

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


/* =========================================================
   REMOVE ALL HERO CURVES
   ========================================================= */

.hero::before,
.hero::after {
    display: none;

    content: none;
}









/* =========================================================
   11. PREMIUM FOOTER
   
========================================================= */

.site-footer {
    position: relative !important;

    overflow: hidden !important;

    padding: 45px 0 28px !important;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(85, 199, 184, 0.10),
            transparent 32%
        ),
        #071A35 !important;

    color: #FFFFFF !important;
}


/* =========================================================
   SUBTLE DECORATIVE GLOW
========================================================= */

.site-footer::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -260px;
    bottom: -280px;

    border-radius: 50%;

    border: 1px solid rgba(85, 199, 184, 0.10);

    pointer-events: none;
}


.site-footer::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -160px;
    bottom: -180px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.06);

    pointer-events: none;
}


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

.site-footer .footer-content {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(260px, 2fr)
        repeat(3, minmax(130px, 1fr));

    gap: 55px;

    padding-bottom: 65px;

    top: 25px;
}


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

.site-footer .footer-brand {
    max-width: 350px;
}


.site-footer .footer-logo {
    display: inline-block;

    margin: 0 0 18px;

    color: #FFFFFF !important;

    font-size: 27px;

    line-height: 1.2;

    font-weight: 750;

    letter-spacing: -0.5px;
}


.main-logo {
    max-width: 28%;
    display: block;
}


.site-footer .footer-brand p {
    max-width: 330px;

    margin: 0;

    color: #B9C8D6 !important;

    font-size: 14px;

    line-height: 1.8;
}


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

.site-footer .footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}


.site-footer .footer-column h3 {
    position: relative;

    margin: 0 0 10px;

    color: #FFFFFF !important;

    font-size: 14px;

    font-weight: 750;

    letter-spacing: 0.3px;
}


/* Small teal line */

.site-footer .footer-column h3::after {
    content: "";

    display: block;

    width: 22px;

    height: 2px;

    margin-top: 9px;

    border-radius: 5px;

    background: #55C7B8;
}


/* =========================================================
   LINKS
========================================================= */

.site-footer .footer-column a {
    position: relative;

    display: inline-block;

    padding-bottom: 2px;

    color: #B9C8D6 !important;

    font-size: 14px;

    line-height: 1.5;

    text-decoration: none;

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


.site-footer .footer-column a:hover {
    color: #55C7B8 !important;

    transform: translateX(4px);
}


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

.site-footer .footer-bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 0;

    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.10);

    color: #8FA3B5 !important;

    font-size: 12px;
}


/* =========================================================
   LEGAL LINKS
========================================================= */

.site-footer .footer-legal {
    display: flex;

    align-items: center;

    gap: 25px;
}


.site-footer .footer-legal a {
    color: #8FA3B5 !important;

    font-size: 12px;

    text-decoration: none;

    transition: color 0.25s ease;
}


.site-footer .footer-legal a:hover {
    color: #55C7B8 !important;
}


/* =========================================================
   FOOTER TEXT LINKS
========================================================= */

.site-footer a:focus-visible {
    outline: 2px solid #55C7B8;

    outline-offset: 4px;

    border-radius: 3px;
}


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

@media (max-width: 900px) {

    .site-footer {
        padding: 70px 0 25px !important;
    }


    .site-footer .footer-content {
        grid-template-columns:
            1.5fr 1fr 1fr;

        gap: 45px;
    }


    .site-footer .footer-brand {
        grid-column: span 3;

        max-width: 500px;
    }


    .site-footer .footer-brand p {
        max-width: 500px;
    }

}


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

@media (max-width: 600px) {

    .site-footer {
        padding: 60px 0 22px !important;
    }


    .site-footer .footer-content {
        grid-template-columns: 1fr;

        gap: 38px;

        padding-bottom: 45px;
    }


    .site-footer .footer-brand {
        grid-column: auto;

        max-width: none;
    }


    .site-footer .footer-logo {
        font-size: 25px;
    }


    .site-footer .footer-brand p {
        max-width: 330px;

        font-size: 14px;
    }


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


    .site-footer .footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        padding-top: 22px;

        line-height: 1.6;
    }


    .site-footer .footer-legal {
        flex-wrap: wrap;

        gap: 12px 20px;
    }

}






/* ========================================
   TRUST & BENEFITS
   DARK PREMIUM UI
======================================== */

.trust-section {
    position: relative;

    padding: 115px 0 120px;

    background: #071A35;

    overflow: hidden;
}


/* ----------------------------------------
   BACKGROUND DECORATION
---------------------------------------- */

.trust-section::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -390px;
    right: -180px;

    border-radius: 50%;

    background: rgba(85, 199, 184, 0.07);

    pointer-events: none;
}

.trust-section::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    bottom: -320px;
    left: -220px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* ----------------------------------------
   HEADING
---------------------------------------- */

.trust-heading {
    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: 0 auto 62px;

    text-align: center;
}


/* SECTION LABEL */

.trust-section .section-label {
    display: inline-block;

    margin-bottom: 17px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #55C7B8;
}


/* MAIN HEADING */

.trust-heading h2 {
    margin: 0;

    font-size: clamp(40px, 4vw, 56px);

    line-height: 1.08;

    letter-spacing: -1.7px;

    font-weight: 600;

    color: #FFFFFF;
}


/* ACCENT WORD */

.trust-heading h2 span {
    color: #55C7B8;
}


/* DESCRIPTION */

.trust-heading p {
    max-width: 650px;

    margin: 20px auto 0;

    font-size: 17px;

    line-height: 1.75;

    color: #C9D5E2;
}


/* ----------------------------------------
   TRUST GRID
---------------------------------------- */

.trust-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

    background: none;
}


/* ----------------------------------------
   TRUST CARD
---------------------------------------- */

.trust-card {
    position: relative;

    min-height: 285px;

    padding: 32px 28px 35px;

    background: #FFFFFF;

    border: 1px solid rgba(255, 255, 255, 0.85);

    border-radius: 20px;

    overflow: hidden;

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


/* CARD HOVER */

.trust-card:hover {
    transform: translateY(-7px);

    border-color: #55C7B8;

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.22);
}


/* ----------------------------------------
   ICON
---------------------------------------- */

.trust-icon {
    width: 58px;
    height: 58px;

    display: flex;

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

    margin-bottom: 28px;

    border-radius: 16px;

    background: #E5F5F1;

    color: #0F8B8D;

    font-size: 25px;

    font-weight: 700;
}


/* ----------------------------------------
   CARD HEADING
---------------------------------------- */

.trust-card h3 {
    margin: 0 0 12px;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 700;

    color: #123B5D;
}


/* ----------------------------------------
   CARD DESCRIPTION
---------------------------------------- */

.trust-card p {
    margin: 0;

    max-width: 270px;

    font-size: 14px;

    line-height: 1.75;

    color: #64748B;
}


/* ----------------------------------------
   SMALL BOTTOM ACCENT
---------------------------------------- */

.trust-card::after {
    content: "";

    position: absolute;

    left: 28px;

    bottom: 22px;

    width: 32px;

    height: 2px;

    border-radius: 20px;

    background: #0F8B8D;

    opacity: 0;

    transform: scaleX(0);

    transform-origin: left;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.trust-card:hover::after {
    opacity: 1;

    transform: scaleX(1);
}





/* =========================================================
   TRUST SECTION — FINAL OVERRIDE
   ========================================================= */

.trust-section {
    position: relative !important;
    padding: 120px 0 120px !important;
    background: #071A35 !important;
    overflow: hidden !important;
}


/* KEEP CONTENT ABOVE DECORATIONS */

.trust-section .container {
    position: relative !important;
    z-index: 5 !important;
}


/* =========================================================
   TRUST HEADING
   ========================================================= */

.trust-section .trust-heading {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    z-index: 10 !important;

    max-width: 760px !important;

    margin: 0 auto 60px !important;

    text-align: center !important;
}


.trust-section .trust-heading .section-label {
    display: inline-block !important;

    margin-bottom: 16px !important;

    color: #55C7B8 !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    letter-spacing: 2px !important;
}


.trust-section .trust-heading h2 {
    display: block !important;

    margin: 0 !important;

    color: #FFFFFF !important;

    font-size: clamp(38px, 4vw, 56px) !important;

    line-height: 1.08 !important;

    font-weight: 600 !important;

    letter-spacing: -1.5px !important;
}


.trust-section .trust-heading h2 span {
    color: #55C7B8 !important;
}


.trust-section .trust-heading p {
    display: block !important;

    max-width: 650px !important;

    margin: 20px auto 0 !important;

    color: #C9D5E2 !important;

    font-size: 17px !important;

    line-height: 1.7 !important;
}


/* =========================================================
   TRUST GRID
   ========================================================= */

.trust-section .trust-grid {
    position: relative !important;

    z-index: 5 !important;

    display: grid !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 20px !important;

    width: 100% !important;
}


/* =========================================================
   TRUST CARDS
   ========================================================= */

.trust-section .trust-card {
    display: block !important;

    position: relative !important;

    min-width: 0 !important;

    min-height: 285px !important;

    padding: 32px 28px 35px !important;

    background: #FFFFFF !important;

    border: 1px solid #E4EEEE !important;

    border-radius: 22px !important;

    color: #123B5D !important;

    overflow: hidden !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10) !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}


/* CARD HOVER */

.trust-section .trust-card:hover {
    transform: translateY(-7px) !important;

    background: #FFFFFF !important;

    border-color: #55C7B8 !important;

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.22) !important;
}


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

.trust-section .trust-icon {
    width: 58px !important;
    height: 58px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin-bottom: 28px !important;

    border-radius: 16px !important;

    background: #E5F5F1 !important;

    color: #0F8B8D !important;

    font-size: 25px !important;

    font-weight: 700 !important;
}


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

.trust-section .trust-card h3 {
    display: block !important;

    margin: 0 0 12px !important;

    color: #123B5D !important;

    font-size: 20px !important;

    line-height: 1.3 !important;

    font-weight: 700 !important;
}


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

.trust-section .trust-card p {
    display: block !important;

    max-width: 100% !important;

    margin: 0 !important;

    color: #64748B !important;

    font-size: 14px !important;

    line-height: 1.75 !important;
}


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

.trust-section .trust-card::after {
    content: "";

    position: absolute;

    left: 28px;
    bottom: 22px;

    width: 36px;
    height: 3px;

    border-radius: 10px;

    background: #0F8B8D;

    opacity: 0;

    transform: scaleX(0);

    transform-origin: left;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.trust-section .trust-card:hover::after {
    
    opacity: 1;

    transform: scaleX(1);
}











/* =========================================================
   HEALTHCARE SERVICES
   PREMIUM LIGHT UI
========================================================= */

.services-section {
    position: relative;

    padding: 125px 0 130px;

    background: #F7FAFC;

    overflow: hidden;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.services-heading {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 58px;
}


/* LEFT HEADING */

.services-heading > div {
    max-width: 650px;
}


.services-heading .section-label {
    display: inline-block;

    margin-bottom: 16px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #0F8B8D;
}


.services-heading h2 {
    max-width: 650px;

    margin: 0;

    font-size: clamp(40px, 4vw, 56px);

    line-height: 1.08;

    letter-spacing: -1.7px;

    font-weight: 600;

    color: #123B5D;
}


.services-heading h2 span {
    color: #0F8B8D;
}


/* RIGHT DESCRIPTION */

.services-heading > p {
    max-width: 420px;

    margin: 0 0 5px;

    font-size: 16px;

    line-height: 1.75;

    color: #64748B;
}


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

.services-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    grid-auto-rows: 285px;

    gap: 18px;
}


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

.service-card {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    min-width: 0;

    padding: 30px;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    border-radius: 20px;

    text-decoration: none;

    overflow: hidden;

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


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

.service-card-large {
    grid-column: span 2;

    grid-row: span 2;

    min-height: 588px;

    padding: 38px;
}


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

.service-card:hover {
    transform: translateY(-6px);

    border-color: #B8DDD8;

    box-shadow:
        0 20px 45px rgba(18, 59, 93, 0.09);
}


/* =========================================================
   FEATURED CARD SUBTLE BACKGROUND
========================================================= */

.service-card-large::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: -150px;
    right: -130px;

    border-radius: 50%;

    background: #EAF7F4;

    opacity: 0.8;

    pointer-events: none;
}


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

.service-card-content {
    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;
}


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

.service-icon {
    position: relative;

    width: 58px;
    height: 58px;

    display: flex;

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

    margin-bottom: auto;

    border-radius: 16px;

    background: #E5F5F1;

    color: #0F8B8D;

    font-size: 25px;

    font-weight: 700;
}


/* FEATURED ICON */

.service-card-large .service-icon {
    width: 68px;
    height: 68px;

    margin-bottom: auto;

    border-radius: 18px;

    font-size: 28px;
}


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

.service-card h3 {
    position: relative;

    z-index: 2;

    margin: 0 0 10px;

    font-size: 21px;

    line-height: 1.3;

    font-weight: 700;

    color: #123B5D;
}


/* FEATURED TITLE */

.service-card-large h3 {
    max-width: 520px;

    font-size: 30px;

    letter-spacing: -0.5px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.service-card p {
    position: relative;

    z-index: 2;

    max-width: 420px;

    margin: 0 0 20px;

    font-size: 14px;

    line-height: 1.7;

    color: #64748B;
}


/* FEATURED DESCRIPTION */

.service-card-large p {
    max-width: 500px;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   LEARN MORE
========================================================= */

.service-link {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    font-size: 14px;

    font-weight: 700;

    color: #0F8B8D;
}


.service-link span {
    display: inline-block;

    transition:
        transform 0.25s ease;
}


.service-card:hover .service-link span {
    transform: translateX(5px);
}


/* =========================================================
   VIEW ALL SERVICES
========================================================= */

.services-button {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    margin-top: 48px;
}


.services-button .btn-primary {
    min-height: 48px;

    padding: 0 26px;

    border-radius: 8px;
}


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

@media (max-width: 1000px) {

    .services-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }

    .services-heading > p {
        max-width: 600px;

        margin: 0;
    }

    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        grid-auto-rows: 280px;
    }

    .service-card-large {
        grid-column: span 2;

        grid-row: span 1;

        min-height: 360px;
    }
}


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

@media (max-width: 650px) {

    .services-section {
        padding: 85px 0 90px;
    }

    .services-heading {
        margin-bottom: 42px;

        gap: 15px;
    }

    .services-heading h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .services-heading > p {
        font-size: 15px;

        line-height: 1.7;
    }

    .services-grid {
        grid-template-columns: 1fr;

        grid-auto-rows: auto;

        gap: 14px;
    }

    .service-card,
    .service-card-large {
        grid-column: span 1;

        grid-row: span 1;

        min-height: 280px;

        padding: 28px;

        border-radius: 17px;
    }

    .service-card-large {
        min-height: 340px;
    }

    .service-card-large h3 {
        font-size: 26px;
    }

    .service-card-large p {
        font-size: 15px;
    }

    .service-icon,
    .service-card-large .service-icon {
        width: 54px;
        height: 54px;

        border-radius: 15px;

        font-size: 23px;
    }
}






/* =========================================================
   HOW IT WORKS — PREMIUM UI
========================================================= */

.how-it-works {
    position: relative !important;

    padding: 120px 0 125px !important;

    background: #F3FAF8 !important;

    color: #123B5D !important;

    overflow: hidden !important;
}


/* =========================================================
   SUBTLE BACKGROUND SHAPE
========================================================= */

.how-it-works::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -220px;
    top: -300px;

    border-radius: 50%;

    background: rgba(15, 139, 141, 0.045);

    pointer-events: none;
}


/* =========================================================
   HEADING
========================================================= */

.how-it-works .how-heading {
    position: relative;

    z-index: 5;

    max-width: 760px;

    margin: 0 auto 72px;

    text-align: center;
}


.how-it-works .section-label {
    display: inline-block;

    margin-bottom: 16px;

    color: #0F8B8D;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}


.how-it-works .how-heading h2 {
    margin: 0;

    font-size: clamp(40px, 4vw, 56px);

    line-height: 1.08;

    letter-spacing: -1.7px;

    font-weight: 600;

    color: #123B5D;
}


.how-it-works .how-heading h2 span {
    color: #0F8B8D;
}


.how-it-works .how-heading p {
    max-width: 620px;

    margin: 20px auto 0;

    font-size: 17px;

    line-height: 1.75;

    color: #64748B;
}


/* =========================================================
   STEPS GRID
========================================================= */

.how-it-works .steps-grid {
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.how-it-works .steps-grid::before {
    content: "";

    position: absolute;

    top: 65px;

    left: 12.5%;

    right: 12.5%;

    height: 2px;

    background: #B9DDD8;

    z-index: 0;
}


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

.how-it-works .step-card {
    position: relative;

    z-index: 2;

    min-width: 0;

    min-height: 320px;

    padding: 25px 26px 30px;

    text-align: center;

    background: #FFFFFF;

    border: 1px solid #DDEBE8;

    border-radius: 20px;

    box-shadow:
        0 8px 28px rgba(18, 59, 93, 0.045);

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


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

.how-it-works .step-card:hover {
    transform: translateY(-7px);

    border-color: #A9D8D1;

    box-shadow:
        0 20px 45px rgba(18, 59, 93, 0.10);
}


/* =========================================================
   STEP NUMBER
========================================================= */

.how-it-works .step-number {
    position: relative;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 46px;

    height: 30px;

    margin-bottom: 14px;

    padding: 0 10px;

    border-radius: 30px;

    background: #F3FAF8;

    color: #0F8B8D;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    border: 1px solid #CFE6E2;
}


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

.how-it-works .step-icon {
    position: relative;

    z-index: 5;

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 10px auto 25px;

    border-radius: 20px;

    background: #E5F5F1;

    color: #0F8B8D;

    font-size: 27px;

    font-weight: 700;

    border: 1px solid #D2ECE7;

}


/* =========================================================
   STEP TITLE
========================================================= */

.how-it-works .step-card h3 {
    margin: 0 0 12px;

    color: #123B5D;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   STEP DESCRIPTION
========================================================= */

.how-it-works .step-card p {
    max-width: 245px;

    margin: 0 auto;

    color: #64748B;

    font-size: 14px;

    line-height: 1.7;
}


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

@media (max-width: 1000px) {

    .how-it-works {
        padding: 95px 0 100px !important;
    }

    .how-it-works .steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    /* Hide desktop connector */
    .how-it-works .steps-grid::before {
        display: none;
    }

    .how-it-works .step-card {
        min-height: 290px;
    }
}


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

@media (max-width: 650px) {

    .how-it-works {
        padding: 80px 0 85px !important;
    }

    .how-it-works .how-heading {
        margin-bottom: 45px;
    }

    .how-it-works .how-heading h2 {
        font-size: 37px;

        letter-spacing: -1px;
    }

    .how-it-works .how-heading p {
        font-size: 15px;

        line-height: 1.7;
    }

    .how-it-works .steps-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .how-it-works .step-card {
        min-height: auto;

        padding: 25px 24px 28px;

        text-align: left;
    }

    .how-it-works .step-number {
        margin-bottom: 12px;
    }

    .how-it-works .step-icon {
        margin: 8px 0 22px;
    }

    .how-it-works .step-card p {
        max-width: none;

        margin: 0;
    }
}




/* =========================================================
   HOW IT WORKS — FINAL COLOR/UI OVERRIDE
========================================================= */

.how-it-works {
    background: #F3FAF8 !important;
    color: #123B5D !important;
}


/* Section label */

.how-it-works .section-label {
    color: #0F8B8D !important;
}


/* Main heading */

.how-it-works .how-heading h2 {
    color: #123B5D !important;
}


/* Teal heading portion */

.how-it-works .how-heading h2 span {
    color: #0F8B8D !important;
}


/* Description */

.how-it-works .how-heading p {
    color: #64748B !important;
}


/* =========================================================
   STEP CARDS
========================================================= */

.how-it-works .step-card {
    background: #FFFFFF !important;

    color: #123B5D !important;

    border: 1px solid #DDEBE8 !important;

    border-radius: 20px !important;

    box-shadow:
        0 8px 28px rgba(18, 59, 93, 0.06) !important;
}


/* Card number */

.how-it-works .step-number {
    color: #0F8B8D !important;

    background: #F3FAF8 !important;

    border: 1px solid #CFE6E2 !important;
}


/* Icon */

.how-it-works .step-icon {
    background: #E5F5F1 !important;

    color: #0F8B8D !important;

    border: 1px solid #D2ECE7 !important;
}


/* Card heading */

.how-it-works .step-card h3 {
    color: #123B5D !important;
}


/* Card description */

.how-it-works .step-card p {
    color: #64748B !important;
}


/* Connecting line */

.how-it-works .steps-grid::before {
    background: #B9DDD8 !important;
}


/* Hover */

.how-it-works .step-card:hover {
    background: #FFFFFF !important;

    border-color: #A9D8D1 !important;

    box-shadow:
        0 20px 45px rgba(18, 59, 93, 0.10) !important;

    transform: translateY(-7px) !important;
}






/* =========================================================
   DOCTORS / FIND A DOCTOR
   PREMIUM UI
========================================================= */

.find-doctor-section {
    position: relative;

    padding: 125px 0 130px;

    background: #FFFFFF;

    overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.find-doctor-section .doctor-heading {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 45px;
}


.find-doctor-section .doctor-heading .section-label {
    display: inline-block;

    margin-bottom: 16px;

    color: #0F8B8D;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}


.find-doctor-section .doctor-heading h2 {
    max-width: 650px;

    margin: 0;

    font-size: clamp(40px, 4vw, 56px);

    line-height: 1.08;

    letter-spacing: -1.7px;

    font-weight: 600;

    color: #123B5D;
}


.find-doctor-section .doctor-heading h2 span {
    color: #0F8B8D;
}


/* =========================================================
   VIEW ALL
========================================================= */

.find-doctor-section .doctor-view-all {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding-bottom: 7px;

    color: #0F8B8D;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}


.find-doctor-section .doctor-view-all span {
    transition: transform 0.25s ease;
}


.find-doctor-section .doctor-view-all:hover span {
    transform: translateX(5px);
}


/* =========================================================
   SEARCH PANEL
========================================================= */

.find-doctor-section .doctor-search {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(280px, 1fr)
        190px
        190px
        125px;

    gap: 10px;

    padding: 12px;

    margin-bottom: 35px;

    background: #F7FAFC;

    border: 1px solid #E2E8F0;

    border-radius: 16px;

    box-shadow: none;
}


/* =========================================================
   SEARCH INPUT
========================================================= */

.find-doctor-section .search-box {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0 15px;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    border-radius: 10px;
}


.find-doctor-section .search-icon {
    flex-shrink: 0;

    color: #0F8B8D;

    font-size: 21px;
}


.find-doctor-section .search-box input {
    width: 100%;

    height: 48px;

    padding: 0;

    border: none;

    outline: none;

    background: transparent;

    color: #123B5D;

    font-family: inherit;

    font-size: 14px;
}


.find-doctor-section .search-box input::placeholder {
    color: #94A3B8;
}


/* =========================================================
   SELECTS
========================================================= */

.find-doctor-section .doctor-search select {
    height: 48px;

    padding: 0 14px;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    border-radius: 10px;

    color: #475569;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    cursor: pointer;
}


.find-doctor-section .doctor-search select:focus,
.find-doctor-section .search-box:focus-within {
    border-color: #8CCFC6;
}


/* =========================================================
   SEARCH BUTTON
========================================================= */

.find-doctor-section .doctor-search-button {
    min-width: 0;

    height: 48px;

    padding: 0 18px;

    border: none;

    border-radius: 10px;

    background: #0F8B8D;

    color: #FFFFFF;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

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


.find-doctor-section .doctor-search-button:hover {
    background: #0B7476;

    transform: translateY(-2px);
}


/* =========================================================
   DOCTOR GRID
========================================================= */

.find-doctor-section .doctor-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;
}


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

.find-doctor-section .doctor-card {
    min-width: 0;

    overflow: hidden;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    border-radius: 20px;

    box-shadow:
        0 8px 30px rgba(18, 59, 93, 0.06);

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


.find-doctor-section .doctor-card:hover {
    transform: translateY(-7px);

    border-color: #B8DDD8;

    box-shadow:
        0 20px 45px rgba(18, 59, 93, 0.12);
}


/* =========================================================
   DOCTOR IMAGE
========================================================= */

.find-doctor-section .doctor-image {
    position: relative;

    height: 315px;

    overflow: hidden;

    background: #EAF4F2;
}


.find-doctor-section .doctor-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


.find-doctor-section .doctor-card:hover .doctor-image img {
    transform: scale(1.035);
}


/* =========================================================
   AVAILABLE BADGE
========================================================= */

.find-doctor-section .doctor-status {
    position: absolute;

    top: 15px;
    right: 15px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

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

    border-radius: 30px;

    color: #0F8B8D;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 5px 18px rgba(18, 59, 93, 0.12);

    backdrop-filter: blur(6px);
}


.find-doctor-section .doctor-status::before {
    content: "";

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #35B78A;
}


/* =========================================================
   DOCTOR INFORMATION
========================================================= */

.find-doctor-section .doctor-info {
    padding: 25px 25px 26px;
    background: #0d0e0e;
}


.find-doctor-section .doctor-specialty {
    display: inline-block;

    margin-bottom: 8px;

    color: #0F8B8D;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.find-doctor-section .doctor-info h3 {
    margin: 0 0 7px;

    color: #000000;

    font-size: 21px;

    line-height: 1.3;

    font-weight: 700;
}


.find-doctor-section .doctor-experience {
    margin: 0 0 12px;

    color: #64748B;

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   RATING
========================================================= */

.find-doctor-section .doctor-rating {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 20px;

    color: #123B5D;

    font-size: 14px;

    font-weight: 700;
}


.find-doctor-section .doctor-rating > span {
    color: #0F8B8D;

    font-size: 15px;
}


.find-doctor-section .doctor-rating small {
    color: #94A3B8;

    font-size: 12px;

    font-weight: 400;
}


/* =========================================================
   VIEW PROFILE BUTTON
========================================================= */

.find-doctor-section .doctor-profile-button {
    width: 100%;

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px 18px;

    background: #FFFFFF;

    border: 1px solid #0F8B8D;

    border-radius: 9px;

    color: #0F8B8D;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

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


.find-doctor-section .doctor-profile-button:hover {
    background: #0F8B8D;

    color: #FFFFFF;
}


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

@media (max-width: 1000px) {

    .find-doctor-section .doctor-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }

    .find-doctor-section .doctor-search {
        grid-template-columns: 1fr 1fr;
    }

    .find-doctor-section .search-box {
        grid-column: span 2;
    }

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

}


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

@media (max-width: 650px) {

    .find-doctor-section {
        padding: 85px 0 90px;
    }

    .find-doctor-section .doctor-heading {
        margin-bottom: 35px;
    }

    .find-doctor-section .doctor-heading h2 {
        font-size: 38px;
    }

    .find-doctor-section .doctor-view-all {
        padding-bottom: 0;
    }

    .find-doctor-section .doctor-search {
        grid-template-columns: 1fr;

        padding: 10px;

        gap: 9px;

        border-radius: 14px;
    }

    .find-doctor-section .search-box {
        grid-column: span 1;
    }

    .find-doctor-section .doctor-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .find-doctor-section .doctor-image {
        height: 300px;
    }

    .find-doctor-section .doctor-info {
        padding: 23px;
    }

}





/* ========================================
   HEALTHCARE RESOURCES
======================================== */

.resources-section {
    padding: 110px 0;
    background: #f3faf8;
}

.resources-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 50px;
}

.resources-heading h2 {
    max-width: 620px;

    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.resources-heading h2 span {
    color: #126b68;
}

.resource-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding-bottom: 6px;

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

    color: #126b68;
}

.resource-view-all span {
    transition: transform 0.3s ease;
}

.resource-view-all:hover span {
    transform: translateX(5px);
}


/* RESOURCE GRID */

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


/* RESOURCE CARD */

.resource-card {
    overflow: hidden;

    border: 1px solid #dfece8;
    border-radius: 24px;

    background: #ffffff;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.resource-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 50px rgba(23, 50, 77, 0.09);
}


/* IMAGE */

.resource-image {
    position: relative;

    height: 240px;

    overflow: hidden;

    background: #e6f3f0;
}

.resource-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.resource-card:hover .resource-image img {
    transform: scale(1.04);
}


/* CATEGORY */

.resource-category {
    position: absolute;

    top: 16px;
    left: 16px;

    padding: 7px 12px;

    border-radius: 20px;

    background: #ffffff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;

    color: #126b68;

    box-shadow:
        0 5px 15px rgba(23, 50, 77, 0.08);
}


/* CONTENT */

.resource-content {
    padding: 28px;
}

.resource-meta {
    display: block;

    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #126b68;
}

.resource-content h3 {
    margin-bottom: 12px;

    font-size: 21px;
    line-height: 1.35;

    color: #17324d;
}

.resource-content p {
    margin-bottom: 22px;

    font-size: 14px;
    line-height: 1.7;

    color: #6c7b87;
}


/* ARTICLE LINK */

.resource-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

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

    color: #126b68;
}

.resource-link span {
    transition: transform 0.3s ease;
}

.resource-link:hover span {
    transform: translateX(5px);
}





/* ========================================
   TESTIMONIALS
======================================== */

.testimonials-section {
    padding: 110px 0;
    background: #ffffff;
}

.testimonials-heading {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.testimonials-heading h2 {
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: #17324d;
}

.testimonials-heading h2 span {
    color: #126b68;
}

.testimonials-heading p {
    max-width: 600px;
    margin: 20px auto 0;

    font-size: 17px;
    line-height: 1.7;

    color: #617181;
}


/* GRID */

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


/* CARD */

.testimonial-card {
    padding: 34px;

    border: 1px solid #e4eeec;
    border-radius: 24px;

    background: #f8fcfb;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(23, 50, 77, 0.08);
}


/* FEATURED */

.featured-testimonial {
    background: #e8f6f3;
    border-color: #d5ebe6;
}


/* RATING */

.testimonial-rating {
    margin-bottom: 20px;

    font-size: 15px;
    letter-spacing: 3px;

    color: #126b68;
}


/* QUOTE */

.testimonial-card blockquote {
    min-height: 145px;

    margin-bottom: 25px;

    font-size: 17px;
    line-height: 1.7;

    color: #31485a;
}


/* PERSON */

.testimonial-person {
    display: flex;
    align-items: center;
    gap: 13px;

    padding-top: 20px;

    border-top: 1px solid #dde9e6;
}

.testimonial-avatar {
    width: 44px;
    height: 44px;

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

    border-radius: 50%;

    background: #126b68;
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
}

.testimonial-person strong {
    display: block;

    margin-bottom: 2px;

    font-size: 14px;

    color: #17324d;
}

.testimonial-person span {
    display: block;

    font-size: 12px;

    color: #788691;
}





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

.appointment-cta-section {
    padding: 80px 0 110px;
    background: #ffffff;
}

.appointment-cta {
    position: relative;

    min-height: 420px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding: 65px 80px;

    border-radius: 32px;

    background: #e8f6f3;
}

.appointment-cta-content {
    position: relative;
    z-index: 2;

    max-width: 700px;
}

.appointment-cta-content h2 {
    max-width: 650px;

    font-size: clamp(40px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -1.8px;

    color: #FFFFFF;;
}

.appointment-cta-content h2 span {
    color: #55C7B8;
}

.appointment-cta-content p {
    max-width: 580px;

    margin-top: 22px;

    font-size: 17px;
    line-height: 1.8;

    color: #C9D5E2;
}


/* BUTTONS */

.appointment-cta-buttons {
    display: flex;
    align-items: center;
    gap: 25px;

    margin-top: 32px;
}

.cta-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

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

    color: #126b68;
}

.cta-text-link span {
    transition: transform 0.3s ease;
}

.cta-text-link:hover span {
    transform: translateX(5px);
}


/* VISUAL */

.appointment-cta-visual {
    position: absolute;

    top: 0;
    right: 0;

    width: 44%;
    height: 100%;

    overflow: hidden;
}


/* DECORATIVE CIRCLES */

.cta-circle {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(18, 107, 104, 0.15);
}

.cta-circle-one {
    width: 420px;
    height: 420px;

    top: 50%;
    right: -110px;

    transform: translateY(-50%);
}

.cta-circle-two {
    width: 270px;
    height: 270px;

    top: 50%;
    right: 80px;

    transform: translateY(-50%);
}


/* CENTER SYMBOL */

.cta-symbol {
    position: absolute;

    top: 50%;
    right: 210px;

    width: 105px;
    height: 105px;

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

    transform: translateY(-50%);

    border-radius: 30px;

    background: #ffffff;

    color: #126b68;

    font-size: 52px;
    font-weight: 300;

    box-shadow:
        0 18px 45px rgba(23, 50, 77, 0.10);
}






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

/* =========================================
   SERVICES HERO
   SAME AS SPECIALITY HERO
========================================= */

.services-page-hero {
    position: relative;

    width: 100%;
    min-height: 760px;

    margin: 0;

    padding: 0 7%;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    overflow: hidden;

    border-radius: 0;

    background: #102E2D;
}


/* =========================================
   BACKGROUND VIDEO
========================================= */

.services-page-hero .hero-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    visibility: visible;
    opacity: 1;

    object-fit: cover;

    z-index: 0;
}


/* =========================================
   DARK OVERLAY
========================================= */

.services-page-hero .hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 31, 30, .88) 0%,
            rgba(8, 31, 30, .70) 42%,
            rgba(8, 31, 30, .28) 75%,
            rgba(8, 31, 30, .10) 100%
        );
}


/* =========================================
   CONTAINER
========================================= */

.services-page-hero > .container {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    display: block;
}


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

.services-page-hero-content {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 720px;

    margin: 0;

    padding: 130px 0 80px;

    box-sizing: border-box;

    text-align: left;

    color: #fff;
}


/* =========================================
   LABEL
========================================= */

.services-page-hero-content .section-label {
    display: block;

    margin: 0 0 24px;

    color: #9BD7CE;

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

    letter-spacing: .16em;

    text-transform: uppercase;
}


/* =========================================
   HEADING
========================================= */

.services-page-hero-content h1 {
    margin: 0 0 28px;

    max-width: 720px;

    color: #fff;

    font-size: clamp(52px, 6vw, 88px);

    line-height: .98;

    font-weight: 700;

    letter-spacing: -0.045em;
}


/* =========================================
   TEAL HIGHLIGHT
========================================= */

.services-page-hero-content h1 span {
    color: #83CEC4;
}


/* =========================================
   DESCRIPTION
========================================= */

.services-page-hero-content p {
    max-width: 570px;

    margin: 0;

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

    font-size: 18px;

    line-height: 1.65;

    text-align: left;
}

.services-page-hero-content .section-label {
    display: inline-block;
    margin-bottom: 16px;
    margin-top: 25px;

    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #12ed90;
}

.services-page-hero-content h1 {
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.05;
    letter-spacing: -2px;
    color: #7e9bb8;
}

.services-page-hero-content h1 span {
    color: #148b87;
}

.services-page-hero-content p {
    max-width: 700px;
    margin: 25px auto 0;

    font-size: 25px;
    font-weight: 400;
    line-height: 1.8;

    color: #8a97a1;
}


/* ALL SERVICES */

.all-services-section {
    width: min(1400px, 94%);
    margin: 32px auto;
    padding: 110px 70px;
    background: #ffffff;
    border-radius: 32px;
    overflow: hidden;
    box-sizing: border-box;
}

.all-services-heading {
    max-width: 700px;
    margin-bottom: 55px;
}

.all-services-heading .section-label {
    display: inline-block;
    margin-bottom: 16px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #51cdc9;
}

.all-services-heading h2 {
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: #6791bc;
}

.all-services-heading h2 span {
    color: #51cdc9;
}

.all-services-heading p {
    margin-top: 18px;

    font-size: 17px;
    line-height: 1.7;

    color: #898f92;
}


/* SERVICE CARDS */

.all-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.full-service-card {
    display: flex;
    align-items: flex-start;
    gap: 25px;

    padding: 35px;

    border: 1px solid #e3eeeb;
    border-radius: 25px;

    background:
    linear-gradient(
        rgba(255, 255, 255, 0.373),
        rgba(255, 255, 255, 0.278)
    ),
    url("../images/general/beat.jpg");

background-size: cover;
background-position: center;
background-repeat: no-repeat;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.full-service-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 50px rgba(23, 50, 77, 0.08);
}

.full-service-icon {
    width: 62px;
    height: 62px;

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

    flex-shrink: 0;

    border-radius: 18px;

    background: #e5f5f1;
    color: #126b68;

    font-size: 27px;
    font-weight: 700;
}

.full-service-content h3 {
    margin-bottom: 10px;

    font-size: 22px;
    color: #011529;
}

.full-service-content p {
    margin-bottom: 18px;

    font-size: 14px;
    line-height: 1.7;

    color: #1b486b;
}

.full-service-content span {
    font-size: 14px;
    font-weight: 700;

    color: #145253;
}


/* SERVICE CTA */

.service-page-cta {
    padding: 0 0 110px;
    background: #ffffff;
}

.service-page-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 60px 65px;

    border-radius: 30px;

    background: #56aba0;
}

.service-page-cta-box h2 {
    max-width: 650px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #123b5d;
}

.service-page-cta-box h2 span {
    color: #2c3837;
}

.service-page-cta-box p {
    margin-top: 15px;

    font-size: 16px;

    color: #4b4e50;
}

.service-cta-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}




/* ========================================
   SERVICE DETAIL PAGE
======================================== */

.service-detail-hero {
    padding: 95px 0;
    background: #f3faf8;
}

.service-detail-hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 75px;
}

.service-detail-hero-text h1 {
    max-width: 650px;

    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.05;
    letter-spacing: -2px;

    color: #17324d;
}

.service-detail-hero-text h1 span {
    color: #126b68;
}

.service-detail-hero-text > p {
    max-width: 570px;

    margin-top: 25px;

    font-size: 18px;
    line-height: 1.8;

    color: #617181;
}

.service-detail-buttons {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 35px;
}

.service-detail-hero-image {
    overflow: hidden;
    border-radius: 30px;
}

.service-detail-hero-image img {
    width: 100%;
    height: 560px;
    object-fit: cover;
}


/* OFFERINGS */

.service-offerings-section {
    padding: 110px 0;
    background: #ffffff;
}

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

.service-offerings-heading h2 {
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.service-offerings-heading h2 span {
    color: #126b68;
}

.service-offerings-heading p {
    margin-top: 18px;

    font-size: 17px;
    line-height: 1.7;

    color: #617181;
}

.service-offerings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.offering-card {
    padding: 30px 26px;

    border: 1px solid #e4eeec;
    border-radius: 22px;

    background: #f8fcfb;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.offering-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(23, 50, 77, 0.08);
}

.offering-icon {
    width: 55px;
    height: 55px;

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

    margin-bottom: 22px;

    border-radius: 16px;

    background: #e5f5f1;
    color: #126b68;

    font-size: 24px;
    font-weight: 700;
}

.offering-card h3 {
    margin-bottom: 10px;

    font-size: 19px;
    color: #17324d;
}

.offering-card p {
    font-size: 14px;
    line-height: 1.7;

    color: #6c7c88;
}


/* AUDIENCE */

.service-audience-section {
    padding: 110px 0;
    background: #f3faf8;
}

.service-audience-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.service-audience-image {
    overflow: hidden;
    border-radius: 30px;
}

.service-audience-image img {
    width: 100%;
    height: 570px;
    object-fit: cover;
}

.service-audience-text h2 {
    max-width: 650px;

    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.service-audience-text h2 span {
    color: #126b68;
}

.service-audience-text > p {
    max-width: 600px;

    margin-top: 22px;

    font-size: 17px;
    line-height: 1.8;

    color: #617181;
}

.audience-check-list {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin: 30px 0;
}

.audience-check-list div {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 15px;
    color: #425b6a;
}

.audience-check-list span {
    width: 28px;
    height: 28px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #e5f5f1;
    color: #126b68;

    font-size: 13px;
    font-weight: 700;
}


/* CTA */

.service-detail-cta {
    padding: 0 0 110px;
    background: #f3faf8;
}

.service-detail-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 60px 65px;

    border-radius: 30px;

    background: #ffffff;

    border: 1px solid #dfebe8;
}

.service-detail-cta-box h2 {
    max-width: 620px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.service-detail-cta-box h2 span {
    color: #126b68;
}

.service-detail-cta-box p {
    margin-top: 15px;

    font-size: 16px;
    color: #607481;
}





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

.doctors-page-hero {
    position: relative;
    width: 100%;
    min-height: 760px;
    margin: 0;
    padding: 0 7%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.doctors-page-hero .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

/* DARK OVERLAY */
.doctors-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 31, 30, .88) 0%,
            rgba(8, 31, 30, .70) 42%,
            rgba(8, 31, 30, .30) 75%,
            rgba(8, 31, 30, .12) 100%
        );
}

/* CONTAINER */
.doctors-page-hero > .container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* HERO CONTENT */
.doctors-page-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 720px;
    margin: 0;
    padding: 130px 0 80px;
    box-sizing: border-box;
    text-align: left;
    color: #ffffff;
}

/* LABEL */
.doctors-page-hero-content .section-label {
    display: block;
    margin: 0 0 24px;
    color: #9BD7CE;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* HEADING */
.doctors-page-hero-content h1 {
    margin: 0 0 28px;
    max-width: 720px;
    color: #ffffff;
    font-size: clamp(52px, 6vw, 88px);
    line-height: .98;
    font-weight: 700;
    letter-spacing: -0.045em;
}

/* HIGHLIGHT */
.doctors-page-hero-content h1 span {
    color: #83CEC4;
}

/* DESCRIPTION */
.doctors-page-hero-content p {
    max-width: 570px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 18px;
    line-height: 1.65;
    text-align: left;
}


/* DIRECTORY */

.doctor-directory-section {
    padding: 95px 0 110px;
    background: #ede9e3 !important;
}


/* TOOLBAR */

.directory-toolbar {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 220px 220px;
    gap: 12px;

    padding: 14px;
    margin-bottom: 70px;

    border: 1px solid #e1ece9;
    border-radius: 20px;

    background: #f8fcfb;
}

.directory-search {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 15px;

    border: 1px solid #e3eceb;
    border-radius: 12px;

    background: #ffffff;
}

.directory-search-icon {
    font-size: 22px;
    color: #126b68;
}

.directory-search input {
    width: 100%;
    height: 48px;

    border: none;
    outline: none;

    font-family: inherit;
    font-size: 14px;

    color: #17324d;
}

.directory-search input::placeholder {
    color: #8997a2;
}

.directory-toolbar select {
    height: 48px;

    padding: 0 14px;

    border: 1px solid #e3eceb;
    border-radius: 12px;

    background: #ffffff;

    font-family: inherit;
    font-size: 14px;

    color: #425466;

    outline: none;
}


/* RESULTS HEADER */

.doctor-results-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 35px;
}

.results-label {
    display: block;
    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;

    color: #126b68;
}

.doctor-results-header h2 {
    font-size: 36px;
    line-height: 1.15;

    color: #17324d;
}

.doctor-result-count {
    font-size: 14px;
    color: #778792;
}

.doctor-result-count strong {
    color: #17324d;
}


/* GRID */

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


/* CARD */

.directory-doctor-card {
    overflow: hidden;

    border: 1px solid #e2ecea;
    border-radius: 25px;

    background: #ffffff;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.directory-doctor-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 50px rgba(23, 50, 77, 0.09);
}


/* IMAGE */

.directory-doctor-image {
    position: relative;

    height: 310px;
    overflow: hidden;

    background: #e6f3f0;
}

.directory-doctor-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.directory-availability {
    position: absolute;

    top: 16px;
    left: 16px;

    padding: 7px 12px;

    border-radius: 20px;

    background: #ffffff;

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

    color: #126b68;

    box-shadow:
        0 5px 15px rgba(23, 50, 77, 0.08);
}


/* INFO */

.directory-doctor-info {
    padding: 27px;
}

.directory-specialty {
    display: block;

    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    color: #126b68;
}

.directory-doctor-info h3 {
    margin-bottom: 5px;

    font-size: 22px;
    color: #17324d;
}

.directory-experience {
    margin-bottom: 12px;

    font-size: 14px;
    color: #71808d;
}

.directory-rating {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 20px;

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

    color: #17324d;
}

.directory-rating span {
    color: #126b68;
}

.directory-rating small {
    font-size: 12px;
    font-weight: 400;

    color: #7c8a95;
}

.directory-profile-button {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    padding: 12px 18px;

    border: 1px solid #126b68;
    border-radius: 12px;

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

    color: #126b68;

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

.directory-profile-button:hover {
    background: #126b68;
    color: #ffffff;
}


/* NO RESULTS */

.doctor-no-results {
    padding: 70px 20px;

    text-align: center;

    border: 1px dashed #d7e5e2;
    border-radius: 24px;

    background: #f8fcfb;
}

.no-results-icon {
    width: 60px;
    height: 60px;

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

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #e5f5f1;
    color: #126b68;

    font-size: 26px;
}

.doctor-no-results h3 {
    margin-bottom: 8px;

    font-size: 21px;
    color: #17324d;
}

.doctor-no-results p {
    font-size: 14px;
    color: #74838e;
}


/* CTA */

.doctors-page-cta {
    padding: 0 0 110px;
    background: #ede9e3;
}

.doctors-page-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 60px 65px;

    border-radius: 30px;

    background: #a0ccc6;
}

.doctors-page-cta-box h2 {
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.doctors-page-cta-box h2 span {
    color: #126b68;
}

.doctors-page-cta-box p {
    margin-top: 15px;

    font-size: 16px;
    color: #2c2e30;
}




.doctors-page-cta .btn-primary11 {
    border: 1px solid black;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 76px;
    padding: 0 18px;
    background: #302222c7;
}





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

.doctor-profile-hero {
    padding: 90px 0;
    background: #f3faf8;
}

.doctor-profile-layout {
    display: grid;
    grid-template-columns: 430px 1fr;
    align-items: center;
    gap: 75px;
}

.doctor-profile-photo {
    position: relative;

    height: 560px;

    overflow: hidden;

    border-radius: 30px;

    background: #e6f3f0;
}

.doctor-profile-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.profile-availability {
    position: absolute;

    top: 18px;
    left: 18px;

    padding: 8px 13px;

    border-radius: 20px;

    background: #ffffff;

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

    color: #126b68;
}

.doctor-profile-main h1 {
    margin-top: 5px;

    font-size: clamp(44px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -2px;

    color: #17324d;
}

.profile-title {
    margin-top: 8px;

    font-size: 17px;

    color: #617181;
}

.profile-rating {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 18px;
}

.profile-rating > span:first-child {
    color: #126b68;
}

.profile-rating strong {
    font-size: 15px;
    color: #17324d;
}

.profile-reviews {
    font-size: 13px;
    color: #7b8994;
}

.profile-description {
    max-width: 650px;

    margin-top: 25px;

    font-size: 17px;
    line-height: 1.8;

    color: #617181;
}

.profile-details {
    display: flex;
    gap: 35px;

    margin-top: 30px;
    padding: 25px 0;

    border-top: 1px solid #dbe8e5;
    border-bottom: 1px solid #dbe8e5;
}

.profile-details div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.profile-details strong {
    font-size: 22px;
    color: #17324d;
}

.profile-details span {
    font-size: 12px;
    color: #7a8995;
}

.profile-actions {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 30px;
}

.profile-actions .btn-primary01, .profile-actions .btn-secondary01 {
    border: 1px solid black;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 76px;
    padding: 0 18px;
    background: #287c78;
}


/* INFORMATION */

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

.doctor-information-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    align-items: start;
}

.doctor-about h2 {
    max-width: 650px;

    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.doctor-about h2 span {
    color: #126b68;
}

.doctor-about p {
    max-width: 650px;

    margin-top: 20px;

    font-size: 16px;
    line-height: 1.8;

    color: #617181;
}

.doctor-detail-card {
    padding: 30px;

    border: 1px solid #e2ecea;
    border-radius: 24px;

    background: #f8fcfb;
}

.doctor-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 0;

    border-bottom: 1px solid #e0ebe8;
}

.doctor-detail-row:first-child {
    padding-top: 0;
}

.doctor-detail-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.doctor-detail-row span {
    font-size: 14px;
    color: #788792;
}

.doctor-detail-row strong {
    text-align: right;

    font-size: 14px;
    color: #17324d;
}


/* AREAS OF CARE */

.doctor-care-section {
    padding: 110px 0;
    background: #f3faf8;
}

.doctor-care-heading {
    margin-bottom: 50px;
}

.doctor-care-heading h2 {
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.doctor-care-heading h2 span {
    color: #126b68;
}

.doctor-care-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.doctor-care-card {
    padding: 30px 26px;

    border: 1px solid #dfece8;
    border-radius: 22px;

    background: #ffffff;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.doctor-care-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(23, 50, 77, 0.08);
}

.doctor-care-icon {
    width: 54px;
    height: 54px;

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

    margin-bottom: 22px;

    border-radius: 16px;

    background: #e5f5f1;
    color: #126b68;

    font-size: 23px;
    font-weight: 700;
}

.doctor-care-card h3 {
    margin-bottom: 9px;

    font-size: 19px;
    color: #17324d;
}

.doctor-care-card p {
    font-size: 14px;
    line-height: 1.7;

    color: #6c7c88;
}


/* PROFILE CTA */

.doctor-profile-cta {
    padding: 0 0 110px;
    background: #f3faf8;
}

.doctor-profile-cta-box {
        display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px 65px;
    border-radius: 30px;
    background: #a0ccc6;
}

.doctor-profile-cta-box .btn-primary03{
    border: 1px solid black;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 76px;
    padding: 0 18px;
    background: #302222c7;
}

.doctor-profile-cta-box h2 {
    max-width: 650px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.doctor-profile-cta-box h2 span {
    color: #126b68;
}

.doctor-profile-cta-box p {
    margin-top: 15px;

    font-size: 16px;
    color: #607481;
}





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

.resources-page-hero {
    position: relative;

    width: 100%;
    min-height: 760px;

    margin: 0;

    padding: 0 7%;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    overflow: hidden;

    border-radius: 0;

    background: #102E2D;
}


/* =========================================
   BACKGROUND VIDEO
========================================= */

.resources-page-hero .hero-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    visibility: visible;
    opacity: 1;

    object-fit: cover;

    z-index: 0;
}


/* =========================================
   DARK OVERLAY
========================================= */

.resources-page-hero .hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 31, 30, .88) 0%,
            rgba(8, 31, 30, .70) 42%,
            rgba(8, 31, 30, .28) 75%,
            rgba(8, 31, 30, .10) 100%
        );
}


    .resources-page-hero > .container {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    display: flex;
    justify-content: flex-end;
}

.resources-page-hero-content {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 720px;

    margin: 0;

    padding: 130px 0 80px;

    box-sizing: border-box;

    text-align: right;

    color: #fff;
}

.resources-page-hero-content .section-label {
        display: block;

    margin: 0 0 24px;

    color: #0b0e0e;

    font-size: 13px;
    font-weight: 1000;

    letter-spacing: .16em;

    text-transform: uppercase;
}



.resources-page-hero-content h1 {
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.05;
    letter-spacing: -2px;
    color: #1e0e17b8;
}

.resources-page-hero-content h1 span {
    color: #0a3f3d;
}

.resources-page-hero-content p {
    max-width: 700px;
    margin: 25px auto 0;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.8;
    color: #262a2d;
}


/* FEATURED RESOURCE */

.featured-resource-section {
    padding: 100px 0;
    background: #ede9e3;
}

.featured-resource {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;

    overflow: hidden;

    border: 1px solid #e0ebe8;
    border-radius: 30px;

    background: #f8fcfb;
}

.featured-resource-image {
    min-height: 500px;
    overflow: hidden;
}

.featured-resource-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-resource-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px;
    background: #a0ccc6;
}

.featured-resource-content h2 {
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.featured-resource-content p {
    max-width: 520px;

    margin: 20px 0 30px;

    font-size: 16px;
    line-height: 1.8;

    color: #617181;
}


/* CATEGORIES */

.resource-categories-section {
    padding: 110px 0;
    background: #ede9e3;
}

.resource-categories-heading {
    max-width: 700px;
    margin-bottom: 35px;
}

.resource-categories-heading h2 {
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: #17324d;
}

.resource-categories-heading h2 span {
    color: #126b68;
}


/* FILTERS */

.resource-category-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 45px;
}

.resource-filter {
    padding: 11px 20px;

    border: 1px solid #dce9e6;
    border-radius: 25px;

    background: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    color: #5d717e;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.resource-filter:hover,
.resource-filter.active {
    border-color: #126b68;
    background: #126b68;
    color: #ffffff;
}


/* RESOURCE LIBRARY */

.resource-library-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.library-resource-card {
    overflow: hidden;

    border: 1px solid #deebe8;
    border-radius: 24px;

    background: #ffffff;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.library-resource-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(23, 50, 77, 0.09);
}


/* RESOURCE IMAGE */

.library-resource-image {
    position: relative;

    height: 230px;

    overflow: hidden;

    background: #e5f2ef;
}

.library-resource-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.library-resource-card:hover .library-resource-image img {
    transform: scale(1.04);
}

.library-resource-image span {
    position: absolute;

    top: 15px;
    left: 15px;

    padding: 7px 11px;

    border-radius: 20px;

    background: #ffffff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;

    color: #126b68;
}


/* CONTENT */

.library-resource-content {
    padding: 27px;
    background: #a0ccc6;
}

.library-resource-content small {
    display: block;

    margin-bottom: 9px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.9px;

    color: #126b68;
}

.library-resource-content h3 {
    margin-bottom: 12px;

    font-size: 20px;
    line-height: 1.35;

    color: #17324d;
}

.library-resource-content p {
    margin-bottom: 20px;

    font-size: 14px;
    line-height: 1.7;

    color: #6b7b87;
}

.library-resource-content a {
    font-size: 14px;
    font-weight: 700;

    color: #126b68;
}


/* NO RESULTS */

.resource-no-results {
    padding: 60px 20px;

    text-align: center;

    border: 1px dashed #d4e3df;
    border-radius: 22px;

    background: #ffffff;
}

.resource-no-results h3 {
    margin-bottom: 7px;

    color: #17324d;
}

.resource-no-results p {
    font-size: 14px;
    color: #73838e;
}


/* CTA */

.resources-page-cta {
    padding: 0 0 110px;
    background: #ede9e3;
}

.resources-page-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 60px 65px;

    border-radius: 30px;

    background: #a0ccc6;

    border: 1px solid #dfebe8;
}

.resources-page-cta-box h2 {
    max-width: 700px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.resources-page-cta-box h2 span {
    color: #126b68;
}

.resources-page-cta-box p {
    margin-top: 15px;

    font-size: 16px;
    color: #323538;
}



.resources-page-cta .btn-primary22 {
    border: 1px solid black;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 76px;
    padding: 0 18px;
    background: #302222c7;
}




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

.about-page-hero {
    position: relative;
    width: 100%;
    min-height: 760px;
    margin: 0;
    padding: 0 7%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.about-page-hero .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

/* DARK OVERLAY */
.about-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 31, 30, .88) 0%,
            rgba(8, 31, 30, .70) 42%,
            rgba(8, 31, 30, .30) 75%,
            rgba(8, 31, 30, .12) 100%
        );
}

/* CONTAINER */
.about-page-hero > .container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.about-page-hero .section-label {
    display: block;
    margin: 0 0 24px;
    color: #9BD7CE;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.about-page-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 720px;
    margin: 0;
    padding: 130px 0 80px;
    box-sizing: border-box;
    text-align: left;
    color: #ffffff;
}

.about-page-hero-content h1 {
    margin: 0 0 28px;
    max-width: 720px;
    color: #ffffff;
    font-size: clamp(52px, 6vw, 88px);
    line-height: .98;
    font-weight: 700;
    letter-spacing: -0.045em;
}

.about-page-hero-content h1 span {
    color: #126b68;
}

.about-page-hero-content p {
    max-width: 700px;
    margin: 25px auto 0;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.8;
    color: #1e1e15;
}


/* MISSION */

.about-mission-section {
    padding: 110px 0;
    background: #ffffff;
}

.about-mission-section .section-label {
    display: inline-block;
    margin-bottom: 18px;
    color: #51cdc9;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.about-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.about-mission-image {
    overflow: hidden;
    border-radius: 30px;
}

.about-mission-image img {
    width: 100%;
    height: 580px;
    object-fit: cover;
}

.about-mission-content h2 {
    margin: 0;
    color: #6791bc;
    font-size: clamp(42px, 4.5vw, 62px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 600;
}

.about-mission-content h2 span {
    color: #51cdc9;
}

.about-mission-content p {
    max-width: 600px;
    margin: 24px 0 0;
    color: #898f92;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.about-mission-content .btn {
    margin-top: 28px;
}


/* VALUES */

.about-values-section {
    padding: 110px 0;
    background: #f3faf8;
}

.about-values-section .section-label {
    display: inline-block;
    margin-bottom: 18px;
    color: #51cdc9;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

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

.about-values-heading h2 {
    margin: 0;
    color: #6791bc;
    font-size: clamp(42px, 4.5vw, 62px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 600;
}

.about-values-heading h2 span {
    color: #51cdc9;
}

.about-values-heading p {
    max-width: 600px;
    margin: 24px 0 0;
    color: #898f92;
    font-size: 17px;
    line-height: 1.8;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.about-value-card {
    position: relative;

    padding: 30px 26px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 22px;

    background-image: url("../images/blog/human.jpg");
    background-size: cover;
    background-position: center;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.about-value-card::before {
    content: "";

    position: absolute;
    inset: 0;

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

    z-index: 0;
}

.about-value-card > * {
    position: relative;
    z-index: 1;
}

.about-value-card::before {
    content: "";
    position: absolute;
    inset: 0;

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

    z-index: 0;
}

.about-value-card > * {
    position: relative;
    z-index: 1;
}

.about-value-icon {
    width: 55px;
    height: 55px;

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

    margin-bottom: 22px;

    border-radius: 16px;

    background: #e5f5f1;
    color: #126b68;

    font-size: 24px;
    font-weight: 700;
}

.about-value-card h3 {
    margin-bottom: 10px;

    font-size: 19px;
    color: #17324d;
}

.about-value-card p {
    font-size: 14px;
    line-height: 1.7;

    color: #6c7c88;
}


/* EXPERIENCE */

.about-experience-section {
    padding: 120px 0;
    background: #ffffff;
}

.about-experience-section .section-label {
    display: inline-block;
    margin-bottom: 18px;
    color: #51cdc9;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.about-experience-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.about-experience-text h2 {
    margin: 0;
    color: #6791bc;
    font-size: clamp(42px, 4.5vw, 62px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 600;
}

.about-experience-text h2 span {
    color: #51cdc9;
}

.about-experience-text > p {
    max-width: 600px;
    margin: 24px 0 0;
    color: #898f92;
    font-size: 17px;
    line-height: 1.8;
}

.about-experience-points {
    display: flex;
    flex-direction: column;
    gap: 24px;

    margin-top: 35px;
}

.about-experience-point {
    display: flex;
    gap: 18px;
}

.about-experience-point > span {
    flex-shrink: 0;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #22f191;
}

.about-experience-point h3 {
    margin-bottom: 5px;
    font-size: 18px;
    color: #5a9bdc;
}

.about-experience-point p {
    font-size: 14px;
    line-height: 1.7;

    color: #71808d;
}

.about-experience-image {
    position: relative;

    padding-bottom: 30px;
}

.about-experience-image > img {
    width: 100%;
    height: 580px;

    object-fit: cover;

    border-radius: 30px;
}

.about-experience-card {
    position: absolute;

    left: -30px;
    bottom: 0;

    display: flex;
    flex-direction: column;

    min-width: 260px;

    padding: 18px 22px;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(23, 50, 77, 0.12);
}

.about-experience-card strong {
    margin-bottom: 3px;

    font-size: 15px;
    color: #17324d;
}

.about-experience-card span {
    font-size: 12px;
    color: #7a8995;
}


/* CTA */

.about-page-cta {
    padding: 0 0 110px;
    background: #ffffff;
}

.about-page-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 60px 65px;

    border-radius: 30px;

    background: #a0ccc6;
}

.about-page-cta-box h2 {
    max-width: 700px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.about-page-cta-box h2 span {
    color: #126b68;
}

.about-page-cta-box p {
    margin-top: 15px;

    font-size: 16px;
    color: #323538;
}

.about-cta-buttons {
    display: flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;
}


.about-cta-buttons .btn-primary44, .about-cta-buttons .btn-secondary55 {
    border: 1px solid black;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 76px;
    padding: 0 18px;
    background: #302222c7;
}




/* ========================================
   CONTACT & APPOINTMENT PAGE
======================================== */

.contact-page-hero {
    position: relative;
    width: 100%;
    min-height: 760px;
    margin: 0;
    padding: 0 7%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.contact-page-hero .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

/* DARK OVERLAY */
.contact-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 31, 30, .88) 0%,
            rgba(8, 31, 30, .70) 42%,
            rgba(8, 31, 30, .30) 75%,
            rgba(8, 31, 30, .12) 100%
        );
}

/* CONTAINER */
.contact-page-hero > .container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.contact-page-hero .section-label {
    display: block;
    margin: 0 0 24px;
    color: #9BD7CE;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.contact-page-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 720px;
    margin: 0;
    padding: 130px 0 80px;
    box-sizing: border-box;
    text-align: left;
    color: #ffffff;
}

.contact-page-hero-content h1 {
    margin: 0 0 28px;
    max-width: 720px;
    color: #ffffff;
    font-size: clamp(52px, 6vw, 88px);
    line-height: .98;
    font-weight: 700;
    letter-spacing: -0.045em;
}

.contact-page-hero-content h1 span {
    color: #126b68;
}

.contact-page-hero-content p {
        max-width: 700px;
    margin: 25px auto 0;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.8;
    color: #080b0e;
}


/* MAIN AREA */

.contact-main-section {
    padding: 110px 0;
    background: #ffffff;
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
    gap: 80px;
}


/* CONTACT INFORMATION */

.contact-information h2 {
    max-width: 600px;

    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.contact-information h2 span {
    color: #126b68;
}

.contact-information > p {
    max-width: 550px;

    margin-top: 20px;

    font-size: 16px;
    line-height: 1.8;

    color: #617181;
}


/* INFO LIST */

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 24px;

    margin-top: 40px;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-info-icon {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;

    border-radius: 14px;

    background: #e5f5f1;
    color: #126b68;

    font-size: 20px;
    font-weight: 700;
}

.contact-info-item span {
    display: block;

    margin-bottom: 3px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    color: #126b68;
}

.contact-info-item strong {
    display: block;

    font-size: 16px;

    color: #17324d;
}

.contact-info-item small {
    display: block;

    margin-top: 2px;

    font-size: 13px;

    color: #74838e;
}


/* NOTE */

.contact-note {
    margin-top: 40px;

    padding: 20px 22px;

    border-left: 3px solid #126b68;

    background: #f8fcfb;
}

.contact-note strong {
    display: block;

    margin-bottom: 5px;

    font-size: 14px;

    color: #17324d;
}

.contact-note p {
    font-size: 12px;
    line-height: 1.7;

    color: #71808d;
}


/* APPOINTMENT FORM */

.appointment-form-card {
    padding: 45px;

    border: 1px solid #e1ece9;
    border-radius: 28px;

    background: #071a35;

    box-shadow:
        0 15px 45px rgba(23, 50, 77, 0.06);
}

.appointment-form-card .section-label {
    display: inline-block;
    margin-bottom: 18px;
    color: #51cdc9;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.appointment-form-heading {
    margin-bottom: 30px;
}

.appointment-form-heading h2 {
    margin: 0;
    color: #6791bc;
    font-size: clamp(22px, 4.5vw, 45px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 600;
}

.appointment-form-heading h2 span {
    color: #51cdc9;
}

.appointment-form-heading p {
    max-width: 600px;
    margin: 24px 0 0;
    color: #898f92;
    font-size: 15px;
    line-height: 1.8;
}


/* FORM */

.appointment-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;

    color: #3e5667;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    border: 1px solid #dce8e5;
    border-radius: 12px;

    padding: 13px 14px;

    outline: none;

    background: #ffffff;

    font-family: inherit;
    font-size: 14px;

    color: #17324d;

    transition: border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.form-group input,
.form-group select {
    height: 48px;
}

.form-group textarea {
    min-height: 130px;

    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #126b68;

    box-shadow:
        0 0 0 3px rgba(18, 107, 104, 0.08);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #97a3ad;
}


/* CONSENT */

.appointment-form-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 2px;
}

.appointment-form-disclaimer input {
    margin-top: 3px;
}

.appointment-form-disclaimer label {
    font-size: 12px;
    line-height: 1.6;

    color: #898f92;
}

.form-submit-button {
    width: 100%;
    border: none;
    cursor: pointer;
    border: 1px solid black;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 76px;
    padding: 0 18px;
    background: #287c78;
 
}

.form-small-note {
    text-align: center;

    font-size: 11px;
    line-height: 1.6;

    color: #89959e;
}


/* FAQ */

.contact-faq-section {
    padding: 110px 0;
    background: #f3faf8;
}

.contact-faq-section .section-label {
    display: inline-block;
    margin-bottom: 18px;
    color: #51cdc9;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.contact-faq-heading {
    max-width: 700px;
    margin-bottom: 45px;
}

.contact-faq-heading h2 {
    margin: 0;
    color: #6791bc;
    font-size: clamp(42px, 4.5vw, 62px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 600;
}

.contact-faq-heading h2 span {
    color: #51cdc9;
}

.faq-list {
    max-width: 850px;
}

.faq-item {
    padding: 22px 0;

    border-bottom: 1px solid #dce9e5;
}

.faq-item:first-child {
    border-top: 1px solid #dce9e5;
}

.faq-item summary {
    position: relative;

    padding-right: 35px;

    list-style: none;

    cursor: pointer;

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

    color: #d4d9df;
}

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

.faq-item summary::after {
    content: "+";

    position: absolute;

    right: 0;
    top: -2px;

    font-size: 22px;
    font-weight: 400;

    color: #d4d9df;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item p {
    max-width: 750px;

    margin-top: 13px;

    font-size: 14px;
    line-height: 1.8;

    color: #687985;
}


/* FINAL CTA */

.contact-final-cta {
    padding: 0 0 110px;
    background: #f3faf8;
}

.contact-final-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 60px 65px;

    border-radius: 30px;

    background: #a0ccc6;

    border: 1px solid #dfece8;
}

.contact-final-cta-box h2 {
    max-width: 700px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.contact-final-cta-box h2 span {
    color: #126b68;
}

.contact-final-cta-box p {
    margin-top: 15px;

    font-size: 16px;

    color: #323538;
}

.contact-final-cta-box .btn-primary66 {
    border: 1px solid black;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 76px;
    padding: 0 18px;
    background: #302222c7;
}




/* ========================================
   AUTHENTICATION PAGES
======================================== */

.auth-page-section {
    padding: 90px 0 110px;
    background: #f3faf8;
}

.auth-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 80px;

    max-width: 1100px;
    margin: 0 auto;
}

/* INTRO */

.auth-intro h1 {
    max-width: 600px;

    font-size: clamp(42px, 5vw, 62px);
    line-height: 1.05;
    letter-spacing: -2px;

    color: #17324d;
}

.auth-intro h1 span {
    color: #126b68;
}

.auth-intro > p {
    max-width: 540px;

    margin-top: 22px;

    font-size: 17px;
    line-height: 1.8;

    color: #617181;
}

.auth-benefits {
    display: flex;
    flex-direction: column;
    gap: 15px;

    margin-top: 32px;
}

.auth-benefits div {
    display: flex;
    align-items: center;
    gap: 11px;

    font-size: 14px;
    color: #536c7a;
}

.auth-benefits span {
    width: 27px;
    height: 27px;

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

    border-radius: 50%;

    background: #e5f5f1;
    color: #126b68;

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


/* FORM CARD */

.auth-form-card {
    padding: 42px;

    border: 1px solid #e0ece9;
    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 18px 50px rgba(23, 50, 77, 0.07);
}

.auth-form-heading {
    margin-bottom: 28px;
}

.auth-form-heading h2 {
    margin-top: 2px;

    font-size: 32px;
    line-height: 1.15;

    color: #17324d;
}

.auth-form-heading p {
    margin-top: 8px;

    font-size: 13px;

    color: #71808c;
}

.auth-form-heading a {
    font-weight: 700;
    color: #126b68;
}


/* ALERT */

.form-alert {
    margin-bottom: 20px;

    padding: 14px 16px;

    border-radius: 12px;

    font-size: 13px;
}

.form-alert p {
    margin: 0 0 5px;
}

.form-alert p:last-child {
    margin-bottom: 0;
}

.form-alert-error {
    border: 1px solid #efd7d7;
    background: #fff7f7;
    color: #9a3f3f;
}


/* FORM */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.auth-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.auth-form .form-group label {
    font-size: 13px;
    font-weight: 600;

    color: #3e5667;
}

.auth-form .form-group input {
    width: 100%;
    height: 48px;

    padding: 0 14px;

    border: 1px solid #dce8e5;
    border-radius: 12px;

    outline: none;

    background: #ffffff;

    font-family: inherit;
    font-size: 14px;

    color: #17324d;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.auth-form .form-group input:focus {
    border-color: #126b68;

    box-shadow:
        0 0 0 3px rgba(18, 107, 104, 0.08);
}

.field-note {
    font-size: 11px;
    color: #8997a1;
}


/* CONSENT */

.auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 2px;
}

.auth-consent input {
    margin-top: 3px;
}

.auth-consent label {
    font-size: 11px;
    line-height: 1.6;

    color: #71808c;
}

.auth-submit {
    width: 100%;
    min-height: 50px;
    padding: 0 27px;

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

    background: #0F8B8D;
    border: 1px solid #0F8B8D;
    border-radius: 8px;

    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
    text-decoration: none;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.auth-submit:hover {
    background: #0B7476;
    border-color: #0B7476;
    transform: translateY(-2px);
}













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

.auth-login-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 80px;

    max-width: 1050px;
    margin: 0 auto;
}


/* SUCCESS ALERT */

.form-alert-success {
    border: 1px solid #cfe8df;
    background: #f1faf7;
    color: #276b5c;
}


/* FORM OPTIONS */

.auth-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: -3px;
}



.remember-option {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 12px;
    color: #71808d;
}

.remember-option input {
    margin: 0;
}

.auth-form-options > a {
    font-size: 12px;
    font-weight: 700;

    color: #126b68;
}




/* ========================================
   PATIENT DASHBOARD
======================================== */

.dashboard-hero {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(10, 35, 34, 0.88),
            rgba(10, 35, 34, 0.55)
        ),
        url("../images/general/account.jpg") center/cover no-repeat;
}

.dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 45px;
}

.dashboard-header .section-label {
    color: #0ffbff;
}

.dashboard-header h1 {
    margin-top: 3px;

    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #a5cdf5;
}

.dashboard-header p {
    margin-top: 10px;

    font-size: 35px;

    color: #99a2a8;
}

.dashboard-logout {
    padding: 11px 18px;

    border: 1px solid #d5e4e0;
    border-radius: 12px;

    background: #ffffff;

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

    color: #126b68;
}



.dashboard-content {
    padding: 80px 0 110px;
    background: #f3faf8;
}

.dashboard-content .container {
    padding: 50px;
    border: 1px solid #dce8e5;
    border-radius: 30px;
    background: #ffffff;
    box-sizing: border-box;
    background: #262b49;
}


/* DASHBOARD GRID */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.dashboard-card {
    padding: 32px;

    border: 1px solid #dfebe8;
    border-radius: 24px;

    background: #8aadac;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.dashboard-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(23, 50, 77, 0.08);
}

.dashboard-card-icon {
    width: 55px;
    height: 55px;

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

    margin-bottom: 22px;

    border-radius: 16px;

    background: #e5f5f1;
    color: #126b68;

    font-size: 24px;
    font-weight: 700;
}

.dashboard-card h2 {
    margin-bottom: 8px;

    font-size: 22px;

    color: #17324d;
}

.dashboard-card p {
    max-width: 450px;

    font-size: 14px;
    line-height: 1.7;

    color: #71808d;
}

.dashboard-card-link {
    display: inline-block;

    margin-top: 20px;

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

    color: #126b68;
}


/* PROFILE */

.dashboard-profile-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-top: 30px;
    padding: 35px;

    border: 1px solid #dfebe8;
    border-radius: 24px;

    background: #ffffff;
}

.dashboard-profile-card h2 {
    margin-top: 3px;

    font-size: 24px;

    color: #17324d;
}

.dashboard-profile-details {
    display: flex;
    gap: 45px;
}

.dashboard-profile-details div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dashboard-profile-details span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;

    color: #126b68;
}

.dashboard-profile-details strong {
    font-size: 14px;

    color: #17324d;
}




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

.auth-login-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 80px;

    max-width: 1050px;
    margin: 0 auto;
}


/* SUCCESS ALERT */

.form-alert-success {
    border: 1px solid #cfe8df;
    background: #f1faf7;
    color: #276b5c;
}


/* FORM OPTIONS */

.auth-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: -3px;
}

.remember-option {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 12px;
    color: #71808d;
}

.remember-option input {
    margin: 0;
}

.auth-form-options > a {
    font-size: 12px;
    font-weight: 700;

    color: #126b68;
}





/* ========================================
   PATIENT PROFILE
======================================== */

.patient-profile-section {
    padding: 80px 0 110px;
    background: #f3faf8;
}

.patient-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 40px;
}

.patient-page-header h1 {
    margin-top: 3px;

    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.patient-page-header p {
    margin-top: 10px;

    font-size: 16px;
    color: #667985;
}

.profile-back-link {
    font-size: 14px;
    font-weight: 700;

    color: #126b68;
}


/* GRID */

.patient-profile-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
    gap: 28px;
}


/* FORM CARD */

.patient-profile-form-card {
    padding: 40px;

    border: 1px solid #dfebe8;
    border-radius: 25px;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(23, 50, 77, 0.05);
}

.patient-card-heading {
    margin-bottom: 30px;
}

.patient-card-heading h2 {
    font-size: 28px;
    color: #17324d;
}

.patient-card-heading p {
    margin-top: 7px;

    font-size: 14px;

    color: #74838e;
}


/* FORM */

.patient-profile-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.patient-profile-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.patient-profile-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.patient-profile-form .form-group label {
    font-size: 13px;
    font-weight: 600;

    color: #405a6a;
}

.patient-profile-form input,
.patient-profile-form select,
.patient-profile-form textarea {
    width: 100%;

    border: 1px solid #dce8e5;
    border-radius: 12px;

    padding: 12px 14px;

    outline: none;

    background: #ffffff;

    font-family: inherit;
    font-size: 14px;

    color: #17324d;
}

.patient-profile-form input,
.patient-profile-form select {
    height: 48px;
}

.patient-profile-form textarea {
    resize: vertical;
    min-height: 110px;
}

.patient-profile-form input:focus,
.patient-profile-form select:focus,
.patient-profile-form textarea:focus {
    border-color: #126b68;

    box-shadow:
        0 0 0 3px rgba(18, 107, 104, 0.08);
}

.patient-profile-form input:disabled {
    background: #f3f6f6;
    color: #778691;
}

.patient-form-divider {
    display: flex;
    align-items: center;
    gap: 15px;

    margin: 10px 0 2px;
}

.patient-form-divider::before,
.patient-form-divider::after {
    content: "";

    height: 1px;
    flex: 1;

    background: #e1ece9;
}

.patient-form-divider span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.9px;

    text-transform: uppercase;

    color: #126b68;
}

.profile-save-button {
    align-self: flex-start;

    border: none;

    cursor: pointer;
}


/* ACCOUNT CARD */

.patient-account-card {
    padding: 35px;

    border: 1px solid #dfece8;
    border-radius: 25px;

    background: #ffffff;
}

.patient-avatar {
    width: 72px;
    height: 72px;

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

    margin: 22px 0 18px;

    border-radius: 22px;

    background: #e5f5f1;
    color: #126b68;

    font-size: 28px;
    font-weight: 700;
}

.patient-account-card h2 {
    font-size: 26px;

    color: #17324d;
}

.patient-account-card > p {
    margin-top: 4px;

    font-size: 13px;

    color: #7a8995;
}

.account-summary-list {
    display: flex;
    flex-direction: column;
    gap: 20px;

    margin-top: 30px;
    padding-top: 25px;

    border-top: 1px solid #e1ece9;
}

.account-summary-list div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.account-summary-list span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;

    color: #126b68;
}

.account-summary-list strong {
    font-size: 14px;
    line-height: 1.5;

    word-break: break-word;

    color: #17324d;
}

.account-dashboard-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin-top: 30px;
    padding: 13px 18px;

    border: 1px solid #126b68;
    border-radius: 12px;

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

    color: #126b68;

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

.account-dashboard-button:hover {
    background: #126b68;
    color: #ffffff;
}



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

.booking-section {
    padding: 80px 0 110px;
    background: #f3faf8;
}

.booking-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.booking-header h1 {
    margin-top: 3px;

    font-size: clamp(40px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -1.5px;

    color: #17324d;
}

.booking-header h1 span {
    color: #126b68;
}

.booking-header p {
    max-width: 600px;

    margin-top: 12px;

    font-size: 16px;

    color: #667985;
}

.booking-back-link {
    font-size: 14px;
    font-weight: 700;

    color: #126b68;
}


/* LAYOUT */

.booking-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 28px;
    align-items: start;
}


/* FORM CARD */

.booking-form-card {
    padding: 42px;

    border: 1px solid #dfece8;
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 15px 45px rgba(23, 50, 77, 0.06);
}

.booking-card-heading {
    margin-bottom: 30px;
}

.booking-card-heading h2 {
    margin-top: 2px;

    font-size: 30px;

    color: #17324d;
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.booking-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.booking-form .form-group label {
    font-size: 13px;
    font-weight: 600;

    color: #405868;
}

.booking-form select,
.booking-form input,
.booking-form textarea {
    width: 100%;

    border: 1px solid #dce8e5;
    border-radius: 12px;

    padding: 12px 14px;

    outline: none;

    background: #ffffff;

    font-family: inherit;
    font-size: 14px;

    color: #17324d;
}

.booking-form select,
.booking-form input[type="date"] {
    height: 49px;
}

.booking-form textarea {
    resize: vertical;
    min-height: 120px;
}

.booking-form select:focus,
.booking-form input:focus,
.booking-form textarea:focus {
    border-color: #126b68;

    box-shadow:
        0 0 0 3px rgba(18, 107, 104, 0.08);
}


/* TIME SLOTS */

.appointment-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.appointment-slot {
    position: relative;
    cursor: pointer;
}

.appointment-slot input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appointment-slot span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 10px;

    border: 1px solid #dce8e5;
    border-radius: 11px;

    background: #ffffff;

    font-size: 13px;
    font-weight: 600;

    color: #536b79;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.appointment-slot:hover span {
    border-color: #126b68;
    color: #126b68;
}

.appointment-slot input:checked + span {
    border-color: #126b68;
    background: #126b68;
    color: #ffffff;
}


/* SLOT STATES */

.slot-helper,
.no-slots-message {
    padding: 18px;

    border: 1px dashed #d6e4e1;
    border-radius: 12px;

    background: #f8fcfb;

    font-size: 13px;
    line-height: 1.6;

    color: #73838e;
}

.no-slots-message {
    background: #fffafa;
    border-color: #eddcdc;
}


/* SUBMIT */

.booking-submit {
    width: 100%;
    border: none;

    cursor: pointer;
}

.booking-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.booking-disclaimer {
    text-align: center;

    font-size: 11px;
    line-height: 1.6;

    color: #89969f;
}


/* SIDE CARD */

.booking-info-card {
    padding: 35px;

    border: 1px solid #dfece8;
    border-radius: 26px;

    background: #e8f6f3;
}

.booking-info-card h2 {
    max-width: 400px;

    margin-top: 3px;

    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -1px;

    color: #17324d;
}


/* STEPS */

.booking-steps {
    display: flex;
    flex-direction: column;
    gap: 26px;

    margin-top: 35px;
}

.booking-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.booking-step > span {
    flex-shrink: 0;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #126b68;
}

.booking-step strong {
    display: block;

    margin-bottom: 5px;

    font-size: 15px;

    color: #17324d;
}

.booking-step p {
    font-size: 13px;
    line-height: 1.7;

    color: #617580;
}


/* SECURITY */

.booking-security-note {
    margin-top: 35px;
    padding-top: 25px;

    border-top: 1px solid rgba(18, 107, 104, 0.15);
}

.booking-security-note strong {
    display: block;

    margin-bottom: 6px;

    font-size: 13px;

    color: #17324d;
}

.booking-security-note p {
    font-size: 12px;
    line-height: 1.7;

    color: #6a7b85;
}




/* ========================================
   ADMIN DASHBOARD
======================================== */

.admin-dashboard-section {
    padding: 80px 0 110px;
    background: #f3faf8;
}

.admin-dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 45px;
}

.admin-dashboard-header h1 {
    margin-top: 3px;

    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.1;

    color: #17324d;
}

.admin-dashboard-header p {
    margin-top: 10px;

    font-size: 16px;

    color: #667985;
}

.admin-logout {
    padding: 11px 18px;

    border: 1px solid #d5e4e0;
    border-radius: 12px;

    background: #ffffff;

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

    color: #126b68;
}


/* STATISTICS */

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;

    margin-bottom: 30px;
}

.admin-stat-card {
    padding: 28px;

    border: 1px solid #dfebe8;
    border-radius: 22px;

    background: #ffffff;
}

.admin-stat-card > span {
    display: block;

    margin-bottom: 12px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #126b68;
}

.admin-stat-card strong {
    display: block;

    font-size: 38px;
    line-height: 1;

    color: #17324d;
}

.admin-stat-card p {
    margin-top: 8px;

    font-size: 13px;

    color: #71808d;
}


/* ACTIONS */

.admin-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.admin-action-card {
    padding: 32px;

    border: 1px solid #dfebe8;
    border-radius: 24px;

    background: #ffffff;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.admin-action-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(23, 50, 77, 0.08);
}

.admin-action-icon {
    width: 55px;
    height: 55px;

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

    margin-bottom: 22px;

    border-radius: 16px;

    background: #e5f5f1;
    color: #126b68;

    font-size: 23px;
    font-weight: 700;
}

.admin-action-card h2 {
    margin-bottom: 8px;

    font-size: 21px;

    color: #17324d;
}

.admin-action-card p {
    font-size: 14px;
    line-height: 1.7;

    color: #71808d;
}

.admin-action-card > span:last-child {
    display: inline-block;

    margin-top: 20px;

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

    color: #126b68;
}




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

.admin-doctors-section {
    padding: 80px 0 110px;
    background: #f3faf8;
}

.admin-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 40px;
}

.admin-page-header h1 {
    margin-top: 3px;

    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.admin-page-header p {
    margin-top: 10px;

    font-size: 16px;

    color: #667985;
}

.admin-back-link {
    font-size: 14px;
    font-weight: 700;

    color: #126b68;
}


/* CREATE CARD */

.admin-doctor-create-card,
.admin-doctor-list-card {
    padding: 40px;

    border: 1px solid #dfebe8;
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 12px 40px rgba(23, 50, 77, 0.05);
}

.admin-doctor-list-card {
    margin-top: 28px;
}

.admin-card-heading {
    margin-bottom: 28px;
}

.admin-card-heading h2 {
    margin-top: 3px;

    font-size: 29px;

    color: #17324d;
}

.admin-card-heading p {
    margin-top: 7px;

    font-size: 14px;

    color: #74838e;
}


/* FORM */

.admin-doctor-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.admin-doctor-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.admin-doctor-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.admin-doctor-form .form-group label {
    font-size: 13px;
    font-weight: 600;

    color: #405868;
}

.admin-doctor-form input,
.admin-doctor-form select {
    width: 100%;
    height: 48px;

    padding: 0 14px;

    border: 1px solid #dce8e5;
    border-radius: 12px;

    outline: none;

    background: #ffffff;

    font-family: inherit;
    font-size: 14px;

    color: #17324d;
}

.admin-doctor-form input:focus,
.admin-doctor-form select:focus {
    border-color: #126b68;

    box-shadow:
        0 0 0 3px rgba(18, 107, 104, 0.08);
}

.admin-doctor-form button {
    align-self: flex-start;

    border: none;

    cursor: pointer;
}


/* TABLE */

.admin-doctor-table-wrap {
    overflow-x: auto;

    border: 1px solid #e2ecea;
    border-radius: 16px;
}

.admin-doctor-table {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;
}

.admin-doctor-table th {
    padding: 15px 16px;

    text-align: left;

    background: #f3faf8;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;

    color: #126b68;
}

.admin-doctor-table td {
    padding: 18px 16px;

    border-top: 1px solid #e4ecea;

    font-size: 13px;

    color: #526978;
}

.admin-doctor-table td strong {
    display: block;

    margin-bottom: 3px;

    color: #17324d;
}

.admin-doctor-table td small {
    display: block;

    font-size: 11px;

    color: #8996a0;
}


/* STATUS */

.admin-status {
    display: inline-flex;

    padding: 6px 10px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 700;
}

.status-verified {
    background: #e5f5f1;
    color: #126b68;
}

.status-pending {
    background: #fff8e8;
    color: #9b7114;
}

.status-inactive {
    background: #f7eeee;
    color: #9a5555;
}


/* ACTIONS */

.admin-doctor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.admin-small-button {
    padding: 8px 11px;

    border: 1px solid #cfe2df;
    border-radius: 9px;

    background: #ffffff;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    color: #126b68;

    cursor: pointer;
}

.admin-small-button:hover {
    background: #eaf6f3;
}

.admin-small-button.danger {
    border-color: #ecd5d5;
    color: #9a5555;
}

.admin-small-button.danger:hover {
    background: #fff4f4;
}


/* EMPTY */

.admin-empty-state {
    padding: 55px 20px;

    text-align: center;

    border: 1px dashed #d6e4e1;
    border-radius: 18px;

    background: #f8fcfb;
}

.admin-empty-state h3 {
    margin-bottom: 7px;

    font-size: 20px;

    color: #17324d;
}

.admin-empty-state p {
    font-size: 14px;

    color: #768691;
}







/* ========================================
   DOCTOR IMAGE PLACEHOLDER
======================================== */

.doctor-image-placeholder {
    width: 100%;
    height: 100%;

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

    background: #e5f2ef;

    color: #126b68;

    font-size: 15px;
    font-weight: 700;
}






/* ========================================
   DOCTOR DIRECTORY EXTRA DETAILS
======================================== */

.directory-fee {
    margin-bottom: 12px;

    font-size: 13px;

    color: #71808d;
}

.directory-fee strong {
    color: #17324d;
}

.directory-consultation {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 20px;
}

.directory-consultation span {
    padding: 5px 9px;

    border-radius: 15px;

    background: #e8f6f3;

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

    color: #126b68;
}


.doctor-empty-state {
    padding: 70px 20px;

    text-align: center;

    border: 1px dashed #d5e3e0;
    border-radius: 24px;

    background: #f8fcfb;
}

.doctor-empty-state h3 {
    margin-bottom: 8px;

    font-size: 21px;

    color: #17324d;
}

.doctor-empty-state p {
    font-size: 14px;

    color: #75838e;
}








/* ========================================
   DYNAMIC DOCTOR PROFILE
======================================== */

.doctor-profile-placeholder {
    width: 100%;
    height: 100%;

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

    background: #e5f2ef;

    color: #126b68;

    font-size: 90px;
    font-weight: 700;
}

.profile-details-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;

    margin-top: 30px;
    padding: 25px 0;

    border-top: 1px solid #dbe8e5;
    border-bottom: 1px solid #dbe8e5;
}

.profile-details-list div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-details-list strong {
    font-size: 21px;
    color: #17324d;
}

.profile-details-list span {
    font-size: 11px;
    color: #7a8995;
}

.profile-consultation-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 20px;
}

.profile-consultation-modes span {
    padding: 7px 11px;

    border-radius: 20px;

    background: #e5f5f1;

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

    color: #126b68;
}

.doctor-specialty-description {
    max-width: 800px;

    padding: 30px;

    border: 1px solid #dfece8;
    border-radius: 22px;

    background: #ffffff;
}

.doctor-specialty-description p {
    font-size: 16px;
    line-height: 1.8;

    color: #617181;
}





/* ========================================
   ADMIN AVAILABILITY
======================================== */

.admin-availability-section {
    padding: 80px 0 110px;
    background: #f3faf8;
}

.availability-card {
    padding: 40px;

    border: 1px solid #dfebe8;
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 12px 40px rgba(23, 50, 77, 0.05);
}

.availability-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.availability-day {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    gap: 25px;

    padding: 18px;

    border: 1px solid #e4edeb;
    border-radius: 16px;

    background: #f8fcfb;
}

.availability-day-toggle {
    display: flex;
    align-items: center;
    gap: 12px;

    cursor: pointer;

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

    color: #17324d;
}

.availability-day-toggle input {
    width: 17px;
    height: 17px;
}

.availability-times {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 12px;
}

.availability-times .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.availability-times .form-group label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    color: #71818c;
}

.availability-times input {
    width: 100%;
    height: 45px;

    padding: 0 12px;

    border: 1px solid #dce8e5;
    border-radius: 10px;

    outline: none;

    background: #ffffff;

    font-family: inherit;
    font-size: 13px;

    color: #17324d;
}

.availability-times input:focus {
    border-color: #126b68;

    box-shadow:
        0 0 0 3px rgba(18, 107, 104, 0.08);
}

.availability-to {
    padding-bottom: 13px;

    font-size: 13px;
    color: #7b8994;
}

.availability-actions {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 20px;
}

.availability-actions .btn {
    border: none;
    cursor: pointer;
}

.availability-note {
    margin-top: 20px;
    padding: 20px 22px;

    border-left: 3px solid #126b68;

    background: #ffffff;
}

.availability-note strong {
    display: block;

    margin-bottom: 5px;

    font-size: 13px;

    color: #17324d;
}

.availability-note p {
    font-size: 12px;
    line-height: 1.7;

    color: #71818c;
}






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

.selected-doctor-summary {
    margin: 25px 0;

    padding: 20px;

    border: 1px solid #dfece8;
    border-radius: 16px;

    background: #f8fcfb;
}

.selected-doctor-summary h3 {
    margin-top: 2px;

    font-size: 21px;

    color: #17324d;
}

.selected-doctor-summary p {
    margin-top: 5px;

    font-size: 13px;

    color: #75838e;
}


.appointment-history {
    margin-top: 70px;
}

.appointment-history-heading {
    margin-bottom: 28px;
}

.appointment-history-heading h2 {
    margin-top: 3px;

    font-size: 32px;

    color: #17324d;
}


.appointment-history-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.appointment-history-card {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;

    gap: 20px;

    padding: 20px;

    border: 1px solid #dfebe8;
    border-radius: 18px;

    background: #ffffff;
}


.appointment-date-box {
    width: 62px;
    height: 68px;

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

    border-radius: 14px;

    background: #e8f6f3;

    color: #126b68;
}

.appointment-date-box span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.appointment-date-box strong {
    margin-top: 2px;

    font-size: 24px;

    line-height: 1;

    color: #17324d;
}


.appointment-history-info h3 {
    margin-top: 2px;

    font-size: 19px;

    color: #17324d;
}

.appointment-history-info p {
    margin-top: 5px;

    font-size: 13px;

    color: #71808d;
}


/* STATUS */

.appointment-status {
    display: inline-flex;

    padding: 7px 11px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 700;
}


.appointment-status-pending {
    background: #fff8e8;
    color: #9b7114;
}

.appointment-status-confirmed {
    background: #e5f5f1;
    color: #126b68;
}

.appointment-status-completed {
    background: #eaf1f7;
    color: #46677f;
}

.appointment-status-cancelled,
.appointment-status-no_show {
    background: #f8eded;
    color: #9a5555;
}


/* EMPTY */

.appointment-empty {
    padding: 55px 20px;

    text-align: center;

    border: 1px dashed #d5e3e0;
    border-radius: 22px;

    background: #f8fcfb;
}

.appointment-empty h3 {
    margin-bottom: 7px;

    font-size: 21px;

    color: #17324d;
}

.appointment-empty p {
    font-size: 14px;

    color: #74838e;
}





/* ========================================
   DOCTOR DASHBOARD
======================================== */

.doctor-dashboard-section {
    padding: 80px 0 110px;
    background: #f3faf8;
}

.doctor-dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
    margin-bottom: 40px;
}

.doctor-dashboard-header h1 {
    margin-top: 3px;

    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #17324d;
}

.doctor-dashboard-header p {
    margin-top: 8px;

    font-size: 14px;

    color: #6c7c88;
}

.doctor-logout {
    padding: 11px 18px;

    border: 1px solid #d5e4e0;
    border-radius: 12px;

    background: #ffffff;

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

    color: #126b68;
}


/* STATISTICS */

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

    margin-bottom: 25px;
}

.doctor-stat-card {
    padding: 28px;

    border: 1px solid #dfebe8;
    border-radius: 22px;

    background: #ffffff;
}

.doctor-stat-card span {
    display: block;

    margin-bottom: 10px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #126b68;
}

.doctor-stat-card strong {
    display: block;

    font-size: 38px;
    line-height: 1;

    color: #17324d;
}

.doctor-stat-card p {
    margin-top: 8px;

    font-size: 13px;

    color: #71808d;
}


/* QUICK ACTIONS */

.doctor-dashboard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;

    margin-bottom: 25px;
}

.doctor-dashboard-action {
    display: flex;
    align-items: center;

    gap: 17px;

    padding: 24px;

    border: 1px solid #dfebe8;
    border-radius: 20px;

    background: #ffffff;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.doctor-dashboard-action:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 40px rgba(23, 50, 77, 0.07);
}

.doctor-action-icon {
    width: 52px;
    height: 52px;

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

    flex-shrink: 0;

    border-radius: 15px;

    background: #e5f5f1;
    color: #126b68;

    font-size: 22px;
    font-weight: 700;
}

.doctor-dashboard-action h2 {
    margin-bottom: 4px;

    font-size: 19px;

    color: #17324d;
}

.doctor-dashboard-action p {
    font-size: 13px;

    color: #71808d;
}


/* APPOINTMENTS */

.doctor-appointments-card {
    padding: 35px;

    border: 1px solid #dfebe8;
    border-radius: 25px;

    background: #ffffff;
}

.doctor-appointments-heading {
    margin-bottom: 25px;
}

.doctor-appointments-heading h2 {
    margin-top: 3px;

    font-size: 29px;

    color: #17324d;
}

.doctor-appointment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doctor-appointment-row {
    display: grid;
    grid-template-columns: 65px 1fr auto;

    align-items: start;

    gap: 18px;

    padding: 18px;

    border: 1px solid #e2ecea;
    border-radius: 17px;

    background: #f8fcfb;
}

.doctor-appointment-date {
    width: 58px;
    height: 63px;

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

    border-radius: 13px;

    background: #e8f6f3;
}

.doctor-appointment-date span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #126b68;
}

.doctor-appointment-date strong {
    margin-top: 2px;

    font-size: 23px;
    line-height: 1;

    color: #17324d;
}

.doctor-appointment-info h3 {
    margin-top: 2px;

    font-size: 19px;

    color: #17324d;
}

.doctor-appointment-info > p {
    margin-top: 5px;

    font-size: 13px;

    color: #71808d;
}

.doctor-patient-note {
    margin-top: 13px;
    padding: 13px 15px;

    border-left: 3px solid #126b68;

    background: #ffffff;
}

.doctor-patient-note strong {
    display: block;

    margin-bottom: 4px;

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;

    color: #126b68;
}

.doctor-patient-note p {
    font-size: 12px;
    line-height: 1.6;

    color: #61737f;
}

.doctor-appointment-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.doctor-action-button {
    min-width: 90px;

    padding: 9px 12px;

    border: 1px solid #cfe2df;
    border-radius: 9px;

    background: #ffffff;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    color: #126b68;

    cursor: pointer;
}

.doctor-action-button:hover {
    background: #eaf6f3;
}

.doctor-action-button.danger {
    border-color: #ecd5d5;

    color: #9a5555;
}

.doctor-action-button.danger:hover {
    background: #fff4f4;
}


/* EMPTY */

.doctor-empty-state {
    padding: 55px 20px;

    text-align: center;

    border: 1px dashed #d5e3e0;
    border-radius: 18px;

    background: #f8fcfb;
}

.doctor-empty-state h3 {
    margin-bottom: 7px;

    font-size: 20px;

    color: #17324d;
}

.doctor-empty-state p {
    font-size: 14px;

    color: #75838e;
}




/* ========================================
   ADMIN DOCTOR EDIT
======================================== */

.admin-doctor-edit-section {
    padding: 80px 0 110px;
    background: #f3faf8;
}

.admin-edit-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    align-items: start;
}

.admin-doctor-edit-card {
    padding: 40px;

    border: 1px solid #dfebe8;
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 12px 40px rgba(23, 50, 77, 0.05);
}

.admin-doctor-form textarea {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #dce8e5;
    border-radius: 12px;

    outline: none;

    background: #ffffff;

    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;

    color: #17324d;

    resize: vertical;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.admin-doctor-form textarea:focus {
    border-color: #126b68;

    box-shadow:
        0 0 0 3px rgba(18, 107, 104, 0.08);
}

.admin-doctor-form input[type="file"] {
    height: auto;
    padding: 11px;

    cursor: pointer;
}


/* PREVIEW */

.doctor-edit-preview {
    padding: 35px;

    border: 1px solid #dfebe8;
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 12px 40px rgba(23, 50, 77, 0.05);
}

.doctor-edit-preview-image {
    height: 360px;

    margin: 20px 0 25px;

    overflow: hidden;

    border-radius: 22px;

    background: #e5f2ef;
}

.doctor-edit-preview-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.doctor-edit-preview h2 {
    margin-top: 5px;

    font-size: 27px;

    color: #17324d;
}

.doctor-preview-title {
    margin-top: 5px;

    font-size: 14px;

    color: #71808d;
}

.doctor-preview-bio {
    margin-top: 18px;

    font-size: 14px;
    line-height: 1.8;

    color: #617181;
}

.doctor-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 20px;
}

.doctor-preview-meta span {
    padding: 7px 10px;

    border-radius: 18px;

    background: #e8f6f3;

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

    color: #126b68;
}







/* =========================================================
   ADMIN PATIENT MANAGEMENT
   ========================================================= */

.admin-panel {
    background: #ffffff;
    border: 1px solid #e5eeee;
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(20, 70, 70, 0.05);
}

.admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.admin-panel-header h2 {
    margin: 6px 0 0;
    font-size: 1.5rem;
}

.admin-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: #547070;
}

.admin-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 180px auto;
    gap: 18px;
    align-items: end;
}

.admin-filter-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-filter-field label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #294747;
}

.admin-filter-field input,
.admin-filter-field select {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #d8e5e5;
    border-radius: 10px;
    background: #ffffff;
    color: #1e3737;
    font: inherit;
    outline: none;
}

.admin-filter-field input:focus,
.admin-filter-field select:focus {
    border-color: #2d8585;
    box-shadow: 0 0 0 3px rgba(45, 133, 133, 0.1);
}

.admin-filter-actions {
    display: flex;
    gap: 10px;
}

.admin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}

.admin-button-primary {
    background: #216f6f;
    color: #ffffff;
}

.admin-button-primary:hover {
    background: #195b5b;
}

.admin-button-secondary {
    background: #eef4f4;
    color: #315353;
}

.admin-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 950px;
}

.admin-table th {
    text-align: left;
    padding: 15px 14px;
    background: #f7fbfb;
    color: #536d6d;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.admin-table td {
    padding: 17px 14px;
    border-top: 1px solid #edf2f2;
    color: #294141;
    vertical-align: middle;
}

.admin-person-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 190px;
}

.admin-person-cell strong {
    display: block;
    color: #193737;
    margin-bottom: 3px;
}

.admin-person-cell span {
    display: block;
    color: #728383;
    font-size: 0.78rem;
}

.admin-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e4f2f0;
    color: #216f6f;
    font-weight: 700;
}

.admin-contact-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.admin-contact-cell small {
    color: #718080;
}

.admin-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
}

.status-active {
    background: #e4f5eb;
    color: #207347;
}

.status-inactive {
    background: #f1eeee;
    color: #765b5b;
}

.status-suspended {
    background: #fff1df;
    color: #996016;
}

.status-default {
    background: #eef1f1;
    color: #5d6b6b;
}

.admin-action-group {
    display: flex;
    align-items: center;
}

.admin-action-group form {
    margin: 0;
}

.admin-action-button {
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 7px 0;
}

.admin-action-danger {
    color: #b34f4f;
}

.admin-action-danger:hover {
    color: #8e3636;
}

.admin-action-success {
    color: #27784f;
}

.admin-action-success:hover {
    color: #1e5e3e;
}

.admin-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.admin-empty-state h3 {
    margin: 0 0 8px;
    color: #203c3c;
}

.admin-empty-state p {
    margin: 0;
    color: #708080;
}




/* =========================================================
   DOCTOR PROFILE MANAGEMENT
   ========================================================= */

.doctor-profile-management {
    max-width: 1050px;
    margin: 0 auto;
}

.doctor-profile-card {
    background: #ffffff;
    border: 1px solid #e4eeee;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(20, 70, 70, 0.06);
    overflow: hidden;
}

.doctor-profile-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    padding: 30px;
    border-bottom: 1px solid #edf2f2;
}

.doctor-profile-card-header h2 {
    margin: 7px 0 8px;
    color: #1b3939;
    font-size: 1.55rem;
}

.doctor-profile-card-header p {
    margin: 0;
    color: #718080;
    line-height: 1.6;
}

.doctor-profile-form {
    padding: 30px;
}

.doctor-form-section {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #edf2f2;
}

.doctor-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.doctor-form-section h3 {
    margin: 0 0 20px;
    color: #254343;
    font-size: 1.08rem;
}

.doctor-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: #898f92;
    font-size: 0.88rem;
    font-weight: 650;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7e4e4;
    border-radius: 10px;
    background: #ffffff;
    color: #1f3838;
    font: inherit;
    outline: none;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.form-group input,
.form-group select {
    min-height: 46px;
    padding: 10px 13px;
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
    padding: 13px;
    line-height: 1.6;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #2d8585;
    box-shadow: 0 0 0 3px rgba(45, 133, 133, 0.1);
}

.form-group input:disabled {
    background: #f5f8f8;
    color: #7b8888;
    cursor: not-allowed;
}

.form-group small {
    color: #788888;
    font-size: 0.76rem;
    line-height: 1.5;
}

.doctor-profile-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 5px;
}





/* =========================================================
   PATIENT MEDICAL REPORTS
   ========================================================= */

.medical-report-panel {
    background: #ffffff;
    border: 1px solid #e4eeee;
    border-radius: 22px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 12px 35px rgba(20, 70, 70, 0.05);
}

.medical-report-panel-header {
    margin-bottom: 24px;
}

.medical-report-panel-header h2 {
    margin: 7px 0 8px;
    color: #1c3939;
    font-size: 1.5rem;
}

.medical-report-panel-header p {
    margin: 0;
    color: #718080;
    line-height: 1.6;
}

.medical-report-upload-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: end;
    padding: 20px;
    background: #f7fbfb;
    border: 1px dashed #cddddd;
    border-radius: 15px;
}

.medical-upload-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.medical-upload-field label {
    font-size: 0.88rem;
    font-weight: 650;
    color: #304c4c;
}

.medical-upload-field input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #d7e4e4;
    border-radius: 10px;
    background: #ffffff;
    color: #435858;
}

.medical-upload-field small {
    color: #768585;
    font-size: 0.76rem;
}

.medical-reports-list {
    display: flex;
    flex-direction: column;
}

.medical-report-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid #edf2f2;
}

.medical-report-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf6f5;
    border-radius: 12px;
    font-size: 1.3rem;
}

.medical-report-info {
    min-width: 0;
    flex: 1;
}

.medical-report-info strong {
    display: block;
    color: #203d3d;
    margin-bottom: 5px;
    overflow-wrap: anywhere;
}

.medical-report-info span {
    color: #5d7474;
    font-size: 0.8rem;
}

.medical-report-info small {
    display: block;
    margin-top: 4px;
    color: #879494;
    font-size: 0.75rem;
}

.medical-report-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.medical-report-actions form {
    margin: 0;
}





/* =========================================================
   DOCTOR PATIENT RECORDS
   ========================================================= */

.doctor-patient-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px;
    margin-bottom: 24px;
    background: #ffffff;
    border: 1px solid #e4eeee;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(20, 70, 70, 0.05);
}

.doctor-patient-avatar {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e5f3f1;
    color: #216f6f;
    font-size: 1.7rem;
    font-weight: 700;
}

.doctor-patient-hero-info h2 {
    margin: 7px 0 5px;
    color: #1d3939;
    font-size: 1.7rem;
}

.doctor-patient-hero-info p {
    margin: 0;
    color: #708080;
}

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

.patient-detail-item {
    padding: 17px;
    background: #f7fbfb;
    border: 1px solid #e8f0f0;
    border-radius: 13px;
}

.patient-detail-item span {
    display: block;
    margin-bottom: 6px;
    color: #718181;
    font-size: 0.78rem;
}

.patient-detail-item strong {
    color: #274343;
    font-size: 0.92rem;
    line-height: 1.5;
}

.patient-detail-wide {
    grid-column: 1 / -1;
}

.doctor-prescription-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.doctor-prescription-card {
    padding: 20px;
    border: 1px solid #e4eeee;
    background: #f9fcfc;
    border-radius: 14px;
}

.doctor-prescription-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.doctor-prescription-card-header strong {
    color: #254343;
}

.doctor-prescription-card-header span {
    color: #768585;
    font-size: 0.78rem;
}

.doctor-prescription-card p {
    margin: 0 0 12px;
    color: #435858;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.doctor-prescription-card small {
    color: #7a8888;
}

.doctor-prescription-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 850px;
}

.prescription-create-panel {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}





/* =========================================================
   PATIENT PRESCRIPTIONS
   ========================================================= */

.prescriptions-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.prescriptions-page-header h2 {
    margin: 7px 0 8px;
    color: #1c3939;
    font-size: 1.65rem;
}

.prescriptions-page-header p {
    margin: 0;
    color: #718080;
    line-height: 1.6;
}

.patient-prescription-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.patient-prescription-card {
    background: #ffffff;
    border: 1px solid #e3eeee;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 12px 32px rgba(20, 70, 70, 0.05);
}

.patient-prescription-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf2f2;
}

.patient-prescription-doctor {
    display: flex;
    align-items: center;
    gap: 13px;
}

.patient-prescription-doctor strong {
    display: block;
    color: #203c3c;
    margin-bottom: 4px;
}

.patient-prescription-doctor span,
.patient-prescription-doctor small {
    display: block;
    color: #718181;
    line-height: 1.5;
}

.patient-prescription-doctor small {
    font-size: 0.76rem;
    margin-top: 2px;
}

.patient-prescription-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.patient-prescription-date span {
    color: #849090;
    font-size: 0.75rem;
}

.patient-prescription-date strong {
    color: #315555;
    font-size: 0.88rem;
}

.patient-prescription-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    padding: 20px 0;
}

.patient-prescription-meta > div {
    background: #f7fbfb;
    border: 1px solid #e8efef;
    border-radius: 12px;
    padding: 13px 15px;
}

.patient-prescription-meta span {
    display: block;
    color: #7a8888;
    font-size: 0.74rem;
    margin-bottom: 5px;
}

.patient-prescription-meta strong {
    color: #334f4f;
    font-size: 0.86rem;
}

.patient-prescription-content {
    padding-top: 3px;
}

.patient-prescription-content h3 {
    margin: 0 0 12px;
    color: #284343;
    font-size: 1rem;
}

.prescription-text {
    padding: 18px;
    background: #fbfdfd;
    border: 1px solid #e6eeee;
    border-radius: 12px;
    color: #435858;
    line-height: 1.75;
    white-space: normal;
    overflow-wrap: anywhere;
}







/* =========================================================
   TRUST / WHY CHOOSE US — DARK VERSION
========================================================= */

.trust-section {
    position: relative;

    padding: 120px 0 125px;

    background: #123B5D;

    overflow: hidden;
}


/* =========================================================
   SUBTLE BACKGROUND DECORATION
========================================================= */

.trust-section::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -360px;
    right: -180px;

    border-radius: 50%;

    background: rgba(69, 199, 183, 0.07);

    pointer-events: none;
}

.trust-section::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    bottom: -280px;
    left: -180px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* =========================================================
   HEADING
========================================================= */

.trust-heading {
    position: relative;
    z-index: 2;

    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;
}


.trust-heading .section-label {
    display: inline-block;

    margin-bottom: 16px;

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

    letter-spacing: 2.2px;

    color: #45C7B7;
}


.trust-heading h2 {
    margin: 0 auto 20px;

    font-size: clamp(38px, 4vw, 56px);

    line-height: 1.08;

    letter-spacing: -1.8px;

    color: #FFFFFF;
}


.trust-heading h2 span {
    color: #45C7B7;
}


.trust-heading > p {
    max-width: 650px;

    margin: 0 auto;

    font-size: 17px;

    line-height: 1.75;

    color: #CBD5E1;
}


/* =========================================================
   TRUST GRID
========================================================= */

.trust-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}


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

.trust-card {
    position: relative;

    min-height: 285px;

    padding: 34px 30px;

    background: #FFFFFF;

    border: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: 18px;

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


.trust-card:hover {
    transform: translateY(-6px);

    border-color: #45C7B7;

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


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

.trust-icon {
    width: 58px;
    height: 58px;

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

    margin-bottom: 30px;

    border-radius: 16px;

    background: #E5F5F1;

    color: #0F8B8D;

    font-size: 25px;
    font-weight: 700;
}


.trust-icon span {
    line-height: 1;
}


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

.trust-card h3 {
    margin: 0 0 12px;

    font-size: 20px;

    line-height: 1.3;

    color: #123B5D;
}


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

.trust-card p {
    margin: 0;

    font-size: 14px;

    line-height: 1.75;

    color: #64748B;
}


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

.trust-card::after {
    content: "";

    position: absolute;

    left: 30px;
    bottom: 24px;

    width: 30px;
    height: 2px;

    border-radius: 10px;

    background: #0F8B8D;

    opacity: 0;

    transform: scaleX(0);

    transform-origin: left;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.trust-card:hover::after {
    opacity: 1;

    transform: scaleX(1);
}










/* =========================================================
   HOMEPAGE RESET — MAVEN INSPIRED
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    background: #F5F3EC;
}

body {
    overflow-x: hidden;
}





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

.trust-section {
    position: relative;

    width: 100%;

    margin: 0 !important;

    padding: 120px 0 130px !important;

    background: #F5F3EC !important;

    border-radius: 0 !important;

    overflow: hidden;
}


/* REMOVE OLD TRUST DECORATIONS */

.trust-section::before,
.trust-section::after {
    display: none !important;

    content: none !important;
}


/* TRUST HEADING */

.trust-heading {
    max-width: 900px;

    margin: 0 auto 65px;

    text-align: center;
}

.trust-section .section-label {
    color: #398D84 !important;
}

.trust-section .trust-heading h2 {
    margin: 0;

    color: #173B39 !important;

    font-size: clamp(42px, 5vw, 68px) !important;

    line-height: 1 !important;

    letter-spacing: -.045em;

    font-weight: 700;
}

.trust-section .trust-heading h2 span {
    color: #398D84 !important;
}

.trust-section .trust-heading p {
    max-width: 620px;

    margin: 24px auto 0;

    color: #61706D !important;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   TRUST CARDS
   ========================================================= */

.trust-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}

.trust-section .trust-card {
    background: #FFFFFF !important;

    border: 1px solid rgba(23,59,57,.08) !important;

    border-radius: 22px !important;

    box-shadow: 0 12px 35px rgba(20,50,48,.07);

    backdrop-filter: none !important;
}

.trust-section .trust-card h3 {
    color: #173B39 !important;
}

.trust-section .trust-card p {
    color: #657572 !important;
}

.trust-section .trust-icon {
    background: #E1F1ED !important;

    color: #398D84 !important;
}


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

.services-section {
    margin: 0 !important;

    padding: 130px 0 !important;

    background: #FFFFFF !important;

    border-radius: 0 !important;
}


/* =========================================================
   REMOVE THE OLD SECTION SYSTEM
   ========================================================= */

.how-it-works,
.find-doctor-section,

.resources-section,
.testimonials-section,
.appointment-cta-section {
    margin-top: 0 !important;

    border-radius: 0 !important;
}








/* =========================================================
   DARK HEALTHCARE THEME
   Keep the current UI/layout — change only the colors
   ========================================================= */


/* =========================
   GLOBAL
   ========================= */

html,
body {
    background: #ede9e3 !important;
    color: #071A35;
}

main {
    background: #ede9e3 !important;
}





/* =========================
   TRUST / WHY CHOOSE US
   ========================= */

.trust-section {
    background: #0B2525 !important;

    color: #FFFFFF !important;

    border-radius: 0 !important;
}


/* Remove old decorative circles */

.trust-section::before,
.trust-section::after {
    display: none !important;
}


/* Label */

.trust-section .section-label {
    color: #75C9BE !important;
}


/* Heading */

.trust-section .trust-heading h2 {
    color: #FFFFFF !important;
}

.trust-section .trust-heading h2 span {
    color: #75C9BE !important;
}


/* Description */

.trust-section .trust-heading p {
    color: rgba(255,255,255,0.68) !important;
}


/* =========================
   TRUST CARDS
   ========================= */

.trust-section .trust-card {
    background: #ffff !important;

    border: 1px solid rgba(143,216,205,0.12) !important;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.25) !important;

    border-radius: 22px !important;
}

.trust-section .trust-card:hover {
    background: #143735 !important;

    box-shadow:
        0 22px 50px rgba(0,0,0,0.35) !important;
}


/* Icon */

.trust-section .trust-icon {
    background: rgba(75,174,163,0.14) !important;

    color: #79CEC3 !important;
}


/* Card title */

.trust-section .trust-card h3 {
    color: #3F9A90 !important;
}


/* Card text */

.trust-section .trust-card p {
    color: #64748B !important;
}


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

.services-section {
    background: #071A1A !important;

    color: #FFFFFF !important;

    border-radius: 0 !important;
}


/* =========================
   HOW IT WORKS
   ========================= */

.how-it-works {
    background: #0B2525 !important;

    color: #FFFFFF !important;

    border-radius: 0 !important;
}


/* =========================
   FIND DOCTOR
   ========================= */

.find-doctor-section {
    background: #071A1A !important;

    color: #FFFFFF !important;

    border-radius: 0 !important;
}





/* =========================
   RESOURCES
   ========================= */

.resources-section {
    background: #071A1A !important;

    color: #FFFFFF !important;

    border-radius: 0 !important;
}


/* =========================
   TESTIMONIALS
   ========================= */

.testimonials-section {
    background: #0B2525 !important;

    color: #FFFFFF !important;

    border-radius: 0 !important;
}


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

.appointment-cta-section {
    background: #061515 !important;

    color: #FFFFFF !important;

    border-radius: 0 !important;
}

.appointment-cta {
    background: #10312F !important;

    border: 1px solid rgba(117,201,190,0.15) !important;

    border-radius: 28px !important;
}


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

.site-footer {
    background: #051f2d !important;

    color: #FFFFFF !important;
}


/* =========================
   GENERAL DARK TEXT FIX
   ========================= */

.services-section h1,
.services-section h2,
.services-section h3,
.how-it-works h1,
.how-it-works h2,
.how-it-works h3,
.find-doctor-section h1,
.find-doctor-section h2,
.find-doctor-section h3,
.resources-section h1,
.resources-section h2,
.resources-section h3,
.testimonials-section h1,
.testimonials-section h2,
.testimonials-section h3 {
    color: #FFFFFF !important;
}


/* Paragraphs */

.services-section p,
.how-it-works p,
.find-doctor-section p,
.resources-section p,
.testimonials-section p {
    color: rgba(255,255,255,0.68) !important;
}


/* =========================
   ACCENT LINKS
   ========================= */

.services-section a,
.how-it-works a,
.find-doctor-section a,
.resources-section a,
.testimonials-section a {
    color: #72C8BC;
}


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

@media (max-width: 600px) {

    .trust-section,
    .services-section,
    .how-it-works,
    .find-doctor-section,
    .resources-section,
    .testimonials-section,
    .appointment-cta-section {
        border-radius: 0 !important;
    }

}







/* =========================================================
   MAVEN-STYLE SCROLL FOCUS
   ========================================================= */

.scroll-focus-block {

    --scroll-blur: 0px;
    --scroll-opacity: 1;
    --scroll-scale: 1;

    filter: blur(var(--scroll-blur));
    opacity: var(--scroll-opacity);

    transform: scale(var(--scroll-scale));

    transform-origin: center center;

    will-change:
        filter,
        opacity,
        transform;

    transition:
        filter 0.08s linear,
        opacity 0.08s linear,
        transform 0.08s linear;
}


/* Keep text readable on smaller screens */

@media (max-width: 768px) {

    .scroll-focus-block {

        transition:
            filter 0.12s linear,
            opacity 0.12s linear,
            transform 0.12s linear;

    }

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .scroll-focus-block {

        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;

    }

}







/* =========================================================
   HOW IT WORKS — FINAL OVERRIDE
   MUST BE AT THE VERY END OF style(5).css
========================================================= */

.how-it-works {
    background: #0B2525 !important;
    color: #123B5D !important;
}


/* Heading */

.how-it-works .how-heading h2 {
    color: #dcdddf !important;
}

.how-it-works .how-heading h2 span {
    color: #0F8B8D !important;
}


/* Label */

.how-it-works .section-label {
    color: #0F8B8D !important;
}


/* Intro paragraph */

.how-it-works .how-heading p {
    color: #64748B !important;
}


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

.how-it-works .step-card {
    background: #FFFFFF !important;

    color: #123B5D !important;

    border: 1px solid #DDEBE8 !important;

    box-shadow:
        0 8px 28px rgba(18, 59, 93, 0.06) !important;
}


/* Card titles */

.how-it-works .step-card h3 {
    color: #123B5D !important;
}


/* Card descriptions */

.how-it-works .step-card p {
    color: #64748B !important;
}


/* Numbers */

.how-it-works .step-number {
    color: #0F8B8D !important;

    background: #F3FAF8 !important;

    border-color: #CFE6E2 !important;
}


/* Icons */

.how-it-works .step-icon {
    background: #E5F5F1 !important;

    color: #0F8B8D !important;

    border-color: #D2ECE7 !important;
}


/* Connecting line */

.how-it-works .steps-grid::before {
    background: #B9DDD8 !important;
}


/* Card hover */

.how-it-works .step-card:hover {
    background: #FFFFFF !important;

    border-color: #A9D8D1 !important;

    box-shadow:
        0 20px 45px rgba(18, 59, 93, 0.10) !important;

    transform: translateY(-7px) !important;
}


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

@media (max-width: 650px) {

    .how-it-works {
        background: #F3FAF8 !important;
    }

    .how-it-works .step-card {
        background: #FFFFFF !important;
    }

}









/* =========================================================
   7. APPOINTMENT CTA
   PREMIUM DARK CTA
   THIS MUST BE AT THE VERY BOTTOM OF style(5).css
========================================================= */

.appointment-cta-section {
    position: relative !important;

    padding: 105px 0 115px !important;

    background: #071a1a !important;

    color: #FFFFFF !important;

    overflow: hidden !important;
}


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

.appointment-cta-section .appointment-cta {
    position: relative !important;

    min-height: 430px !important;

    display: flex !important;

    align-items: center !important;

    overflow: hidden !important;

    padding: 70px 75px !important;

    background: #071A35 !important;

    border-radius: 28px !important;

    box-shadow:
        0 20px 60px rgba(7, 26, 53, 0.16) !important;
}


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

.appointment-cta-section .appointment-cta-content {
    position: relative !important;

    z-index: 10 !important;

    max-width: 690px !important;
}


/* LABEL */

.appointment-cta-section .section-label {
    display: inline-block !important;

    margin-bottom: 18px !important;

    color: #55C7B8 !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    letter-spacing: 2px !important;
}


/* =========================================================
   HEADING
========================================================= */

.appointment-cta-section .appointment-cta-content h2 {
    max-width: 650px !important;

    margin: 0 !important;

    color: #FFFFFF !important;

    font-size: clamp(40px, 4vw, 58px) !important;

    line-height: 1.08 !important;

    letter-spacing: -1.8px !important;

    font-weight: 600 !important;
}


/* TEAL HEADING */

.appointment-cta-section .appointment-cta-content h2 span {
    color: #55C7B8 !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.appointment-cta-section .appointment-cta-content p {
    max-width: 570px !important;

    margin: 22px 0 0 !important;

    color: #C9D5E2 !important;

    font-size: 16px !important;

    line-height: 1.8 !important;
}


/* =========================================================
   BUTTON AREA
========================================================= */

.appointment-cta-section .appointment-cta-buttons {
    position: relative !important;

    z-index: 10 !important;

    display: flex !important;

    align-items: center !important;

    gap: 28px !important;

    margin-top: 32px !important;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.appointment-cta-section .appointment-cta-buttons .btn-primary {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-height: 50px !important;

    padding: 0 27px !important;

    background: #0F8B8D !important;

    border: 1px solid #0F8B8D !important;

    border-radius: 8px !important;

    color: #FFFFFF !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease !important;
}


.appointment-cta-section .appointment-cta-buttons .btn-primary:hover {
    background: #0B7476 !important;

    border-color: #0B7476 !important;

    transform: translateY(-2px) !important;
}


/* =========================================================
   FIND A DOCTOR LINK
========================================================= */

.appointment-cta-section .cta-text-link {
    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    color: #55C7B8 !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    text-decoration: none !important;
}


.appointment-cta-section .cta-text-link span {
    display: inline-block !important;

    transition: transform 0.25s ease !important;
}


.appointment-cta-section .cta-text-link:hover span {
    transform: translateX(5px) !important;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.appointment-cta-section .appointment-cta-visual {
    position: absolute !important;

    top: 0 !important;

    right: 0 !important;

    width: 42% !important;

    height: 100% !important;

    overflow: hidden !important;

    pointer-events: none !important;
}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.appointment-cta-section .cta-circle {
    position: absolute !important;

    border-radius: 50% !important;

    border: 1px solid rgba(85, 199, 184, 0.25) !important;

    background: transparent !important;
}


.appointment-cta-section .cta-circle-one {
    width: 420px !important;

    height: 420px !important;

    top: 50% !important;

    left: 20% !important;

    transform: translateY(-50%) !important;
}


.appointment-cta-section .cta-circle-two {
    width: 280px !important;

    height: 280px !important;

    top: 50% !important;

    left: 37% !important;

    transform: translateY(-50%) !important;

    border-color: rgba(85, 199, 184, 0.35) !important;
}


/* =========================================================
   PLUS SYMBOL
========================================================= */

.appointment-cta-section .cta-symbol {
    position: absolute !important;

    top: 50% !important;

    left: 53% !important;

    transform: translate(-50%, -50%) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 90px !important;

    height: 90px !important;

    border-radius: 50% !important;

    background: rgba(85, 199, 184, 0.12) !important;

    border: 1px solid rgba(85, 199, 184, 0.25) !important;

    color: #55C7B8 !important;

    font-size: 60px !important;

    font-weight: 300 !important;

    line-height: 1 !important;
}


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

@media (max-width: 1000px) {

    .appointment-cta-section {
        padding: 90px 0 95px !important;
    }

    .appointment-cta-section .appointment-cta {
        padding: 60px 50px !important;
    }

    .appointment-cta-section .appointment-cta-visual {
        width: 35% !important;

        opacity: 0.7 !important;
    }

    .appointment-cta-section .appointment-cta-content {
        max-width: 650px !important;
    }
}


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

@media (max-width: 650px) {

    .appointment-cta-section {
        padding: 75px 0 80px !important;
    }

    .appointment-cta-section .appointment-cta {
        min-height: auto !important;

        padding: 45px 28px 50px !important;

        border-radius: 22px !important;
    }

    .appointment-cta-section .appointment-cta-content {
        max-width: none !important;
    }

    .appointment-cta-section .appointment-cta-content h2 {
        font-size: 37px !important;

        letter-spacing: -1px !important;
    }

    .appointment-cta-section .appointment-cta-content p {
        font-size: 15px !important;

        line-height: 1.7 !important;
    }

    .appointment-cta-section .appointment-cta-buttons {
        align-items: flex-start !important;

        flex-direction: column !important;

        gap: 20px !important;

        margin-top: 28px !important;
    }

    .appointment-cta-section .appointment-cta-buttons .btn-primary {
        width: 100% !important;
    }

    .appointment-cta-section .appointment-cta-visual {
        width: 100% !important;

        height: 240px !important;

        top: auto !important;

        bottom: -130px !important;

        opacity: 0.45 !important;
    }

    .appointment-cta-section .cta-symbol {
        width: 70px !important;

        height: 70px !important;

        font-size: 48px !important;
    }
}







/* =========================================================
   APPOINTMENT CTA — FINAL CONTRAST FIX
========================================================= */

.appointment-cta-section .appointment-cta {
    background: #071A35 !important;
}


/* Main heading */
.appointment-cta-section .appointment-cta-content h2 {
    color: #FFFFFF !important;
}


/* Highlighted heading */
.appointment-cta-section .appointment-cta-content h2 span {
    color: #55C7B8 !important;
}


/* Description */
.appointment-cta-section .appointment-cta-content p {
    color: #C9D5E2 !important;
}


/* Label */
.appointment-cta-section .section-label {
    color: #55C7B8 !important;
}


/* Book Appointment button */
.appointment-cta-section .appointment-cta-buttons .btn-primary {
    background: #0F8B8D !important;

    border: 1px solid #0F8B8D !important;

    color: #FFFFFF !important;
}


/* Button hover */
.appointment-cta-section .appointment-cta-buttons .btn-primary:hover {
    background: #0B7476 !important;

    border-color: #0B7476 !important;
}


/* Find Doctor */
.appointment-cta-section .cta-text-link {
    color: #55C7B8 !important;
}


/* Plus symbol */
.appointment-cta-section .cta-symbol {
    background: rgba(85, 199, 184, 0.12) !important;

    border-color: rgba(85, 199, 184, 0.28) !important;

    color: #55C7B8 !important;
}




/* =========================================================
   OUR APPROACH — RESTORE NORMAL HOMEPAGE UI
   ========================================================= */

.approach-section {
    position: relative;
    width: 100%;

    padding: 120px 0;

    background: #0B2525 !important;
    color: #17324d !important;

    overflow: hidden;
}


/* =========================================================
   MAIN TWO-COLUMN LAYOUT
   ========================================================= */

.approach-content {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;
}


/* =========================================================
   LEFT TEXT
   ========================================================= */

.approach-text {
    min-width: 0;
}


/* SECTION LABEL */

.approach-text .section-label {
    display: inline-block;

    margin-bottom: 16px;

    color: #126b68 !important;

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

    letter-spacing: 2px;
}


/* MAIN HEADING */

.approach-text h2 {
    max-width: 620px;

    margin: 0;

    font-size: clamp(40px, 4vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.8px;

    font-weight: 600;

    color: #ffff !important;
}


.approach-text h2 span {
    color: #126b68 !important;
}


/* INTRO */

.approach-intro {
    max-width: 590px;

    margin-top: 24px;

    font-size: 17px;

    line-height: 1.8;

    color: #617181 !important;
}


/* =========================================================
   APPROACH POINTS
   ========================================================= */

.approach-points {
    display: flex;

    flex-direction: column;

    gap: 28px;

    margin-top: 38px;
}


.approach-point {
    display: flex;

    align-items: flex-start;

    gap: 17px;
}


/* CHECK ICON */

.approach-point-icon {
    flex-shrink: 0;

    width: 35px;
    height: 35px;

    display: flex;

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

    margin-top: 2px;

    border-radius: 50%;

    background: #e5f5f1 !important;

    color: #126b68 !important;

    font-size: 16px;

    font-weight: 700;
}


/* POINT HEADING */

.approach-point h3 {
    margin: 0 0 5px;

    font-size: 18px;

    line-height: 1.35;

    font-weight: 700;

    color: #ffff !important;
}


/* POINT DESCRIPTION */

.approach-point p {
    max-width: 500px;

    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: #71808d !important;
}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.approach-visual {
    position: relative;

    min-width: 0;

    padding-bottom: 35px;
}


/* =========================================================
   OUR APPROACH — IMAGE FIX
========================================================= */

.approach-visual {
    position: relative;
    width: 100%;
    min-width: 0;
}

.approach-image {
    position: relative;
    width: 100%;
    height: 590px;

    overflow: hidden;

    border-radius: 32px;

    background: #eaf4f2;
}

.approach-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;

    transition: transform 0.5s ease;
}

.approach-image:hover img {
    transform: scale(1.025);
}


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

.approach-card {
    position: absolute;

    left: -35px;

    bottom: 0;

    display: flex;

    align-items: center;

    gap: 15px;

    min-width: 280px;

    padding: 20px 24px;

    background: #ffffff !important;

    border-radius: 18px;

    box-shadow:
        0 18px 45px rgba(23, 50, 77, 0.12);

    z-index: 5;
}


/* CARD ICON */

.approach-card-icon {
    width: 46px;
    height: 46px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 14px;

    background: #e5f5f1 !important;

    color: #126b68 !important;

    font-size: 24px;

    font-weight: 700;
}


/* CARD TITLE */

.approach-card strong {
    display: block;

    margin-bottom: 3px;

    font-size: 15px;

    line-height: 1.4;

    color: #17324d !important;
}


/* CARD DESCRIPTION */

.approach-card span {
    display: block;

    font-size: 12px;

    line-height: 1.5;

    color: #7a8995 !important;
}







/* =========================================================
   SERVICES PAGE
   ROUNDED SERVICE SECTIONS
   ========================================================= */

.service-feature-section {
    width: min(1400px, 94%);
    margin: 32px auto;

    padding: 110px 70px;

    background: #ffffff;

    border-radius: 32px;

    overflow: hidden;
    box-sizing: border-box;
}

.service-feature-section.service-feature-light {
    background: #f3faf8;
}

.service-feature-section > .container {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.85fr);

    align-items: center;

    gap: 90px;
}


/* CONTENT */

.service-feature-content {
    max-width: 680px;
}

.service-feature-content .section-label {
    display: inline-block;

    margin-bottom: 18px;

    color: #51cdc9;

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

    letter-spacing: 1.8px;
}

.service-feature-content h2 {
    margin: 0;

    color: #6791bc;

    font-size: clamp(42px, 4.5vw, 62px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 600;
}

.service-feature-content h2 span {
    color: #51cdc9;
}

.service-feature-content p {
    max-width: 600px;

    margin: 24px 0 0;

    color: #898f92;

    font-size: 17px;

    line-height: 1.8;
}

.service-feature-content .btn {
    margin-top: 32px;
}


/* VISUAL */

.service-feature-visual {
    position: relative;

    min-height: 390px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.service-feature-visual::before {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    border-radius: 50%;

    background: #e2f2ef;
}

.service-feature-visual::after {
    content: "";

    position: absolute;

    width: 215px;
    height: 215px;

    border-radius: 50%;

    border: 1px solid rgba(18,107,104,.15);
}

.service-feature-icon {
    position: relative;
    z-index: 2;

    width: 120px;
    height: 120px;

    display: flex;

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

    border-radius: 30px;

    background: #ffffff;

    color: #126b68;

    font-size: 52px;

    box-shadow:
        0 20px 50px rgba(18,107,104,.12);
}

.service-feature-icon img {
    width: 200%;
    height: 200%;
    min-height: 320px;
    min-width: 320px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}


/* REVERSED SECTIONS */

.service-feature-section.service-feature-reverse
> .container {
    grid-template-columns:
        minmax(320px, .85fr)
        minmax(0, 1fr);
}

.service-feature-section.service-feature-reverse
.service-feature-visual {
    order: 1;
}

.service-feature-section.service-feature-reverse
.service-feature-content {
    order: 2;
}






/* =========================================================
   SERVICES PAGE - FINAL BACKGROUND FIX
   ========================================================= */

main {
    background: var(--_theme---background--bg-primary) !important;
}

/* Remove full-width background from the service-page wrapper sections */
.services-page-hero {
    background: transparent !important;
}

.all-services-section {
    background: #262b49 !important;
}

/* Rounded individual service cards */
.service-feature-section {
    width: min(1400px, 94%) !important;
    margin: 32px auto !important;
    padding: 110px 70px !important;

    background: #071a35 !important;

    border-radius: 32px !important;
    overflow: hidden;
    box-sizing: border-box;
}

/* Light variation */
.service-feature-section.service-feature-light {
    background: #262b49 !important;
}

/* CTA stays as its own rounded box, but section itself is transparent */
.service-page-cta {
    background: transparent !important;
}


.service-cta-buttons .btn-primary1, .service-cta-buttons .btn-secondary1 {
    border: 1px solid black;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    color:#ffffff;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 76px;
    padding: 0 18px;
    background: #302222c7;
}






/* =========================================================
   LOGIN - GOOGLE BUTTON FINAL
   ========================================================= */

.auth-form .google-login-divider {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin: 6px 0 0 !important;

    color: #8997A1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.auth-form .google-login-divider::before,
.auth-form .google-login-divider::after {
    content: "" !important;
    display: block !important;
    width: auto !important;
    height: 1px !important;
    flex: 1 1 auto !important;

    background: #DFE5E5 !important;
}

.auth-form .google-login-divider span {
    display: block !important;
    flex: 0 0 auto !important;
}

.auth-form .google-login-btn {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    background: #FFFFFF !important;
    border: 1px solid #CFD8D8 !important;
    border-radius: 8px !important;

    color: #263238 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
    box-sizing: border-box !important;

    cursor: pointer !important;
}

.auth-form .google-login-btn:hover {
    background: #F8FAF9 !important;
    border-color: #AEB8B7 !important;
}

.auth-form .google-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex: 0 0 20px !important;
}







/* =========================================================
   WEBSITE PRELOADER
   ========================================================= */

#preloader {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    background: #000000;

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

    z-index: 9999999;

    opacity: 1;
    visibility: visible;

    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Center container */
.preloader-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SMALL LOGO */
.preloader-logo {
    width: 65px;
    height: 65px;

    object-fit: contain;
    display: block;

    animation: logo-loading 1.4s ease-in-out infinite;
}

/* Logo animation */
@keyframes logo-loading {
    0% {
        opacity: 0.4;
        transform: scale(0.92);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0.4;
        transform: scale(0.92);
    }
}






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

/* =========================================
   SPECIALITY HERO
   SAME POSITIONING AS HOMEPAGE HERO
========================================= */

.speciality-hero {
    position: relative;

    width: 100%;
    min-height: 760px;

    margin: 0;

    padding: 0 7%;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    overflow: hidden;

    border-radius: 0;

    background: #102E2D;
}


/* =========================================
   BACKGROUND VIDEO
========================================= */

.speciality-hero .hero-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    visibility: visible;
    opacity: 1;

    object-fit: cover;

    z-index: 0;
}


/* =========================================
   OVERLAY
========================================= */

.speciality-hero .hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 31, 30, .88) 0%,
            rgba(8, 31, 30, .70) 42%,
            rgba(8, 31, 30, .28) 75%,
            rgba(8, 31, 30, .10) 100%
        );
}


/* =========================================
   REMOVE CONTAINER'S CENTERING
========================================= */

.speciality-hero > .container {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    display: block;
}


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

.speciality-hero-content {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 720px;

    margin: 0;

    padding: 130px 0 80px;

    box-sizing: border-box;

    text-align: left;

    color: #fff;
}


/* =========================================
   LABEL
========================================= */

.speciality-hero .section-subtitle {
    display: block;

    margin: 0 0 24px;

    color: #9BD7CE;

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

    letter-spacing: .16em;
}


/* =========================================
   HEADING
========================================= */

.speciality-hero h1 {
    margin: 0 0 28px;

    max-width: 720px;

    color: #fff;

    font-size: clamp(52px, 6vw, 88px);

    line-height: .98;

    font-weight: 700;

    letter-spacing: -0.045em;
}


/* =========================================
   HIGHLIGHTED TEXT
========================================= */

.speciality-hero h1 .h1 {
    color: #83CEC4;
}


/* =========================================
   DESCRIPTION
========================================= */

.speciality-hero p {
    max-width: 570px;

    margin: 0 0 34px;

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

    font-size: 18px;

    line-height: 1.65;

    text-align: left;
}


/* =========================================
   SPECIALITY CONTENT
========================================= */

.speciality-page {
    padding: 60px 20px 100px;
    background: #ede9e3    !important ;
}




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

.speciality-page {
    padding: 40px 20px 100px;
    background: var(--_theme---background--bg-primary);
    padding-bottom: 1px;
}

.speciality-list {
    max-width: 1200px;
    margin: 0 auto;
}

.speciality-page + .service-cta {
    margin-bottom: 0;
}


/* =========================================
   SPECIALITY ROW
========================================= */

.speciality-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;

    padding: 10px 65px !important;
    margin-bottom: 35px;
    border-radius: 28px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #262b49;
}


/* Alternate row */

.speciality-row-reverse {
    flex-direction: row-reverse;
}


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

.speciality-content {
    width: 52%;
}

.speciality-number {
    display: block;

    margin-bottom: 12px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;

    opacity: 0.5;
}

.speciality-content h2 {
    margin: 0 0 20px;

    font-size: 36px;
    line-height: 1.2;

    color: #51cdc9;
}

.speciality-content p {
    margin: 0;

    font-size: 16px;
    line-height: 1.8;

    color: #898f92;
}


/* =========================================
   IMAGE
========================================= */

/* =========================================
   SPECIALITY VIDEO — PORTRAIT / REELS STYLE
========================================= */

.speciality-image {
    width: 360px;
    height: 640px;

    overflow: hidden;

    border-radius: 28px;

    flex-shrink: 0;
}


/* VIDEO */

.speciality-image video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* SUBTLE HOVER */

.speciality-image:hover video {
    transform: scale(1.03);
}

.speciality-image video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.speciality-image:hover video {
    transform: scale(1.04);
}


/* =========================================
   LAST ROW
========================================= */

.speciality-row:last-child {
    border-bottom: none;
}








/* =========================================================
   GENERAL HEALTHCARE FEATURED IMAGE
========================================================= */

.service-card-large .hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center center;

    z-index: 0;
}


/* IMAGE OVERLAY */

.service-card-large .hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(7, 26, 26, 0.05) 0%,
            rgba(7, 26, 26, 0.20) 40%,
            rgba(7, 26, 26, 0.88) 100%
        );
}


/* KEEP CONTENT ABOVE IMAGE */

.service-card-large .service-card-content {
    position: relative;

    z-index: 3;
}


/* WHITE TEXT ON IMAGE */

.service-card-large h3 {
    color: #FFFFFF !important;
}

.service-card-large p {
    color: rgba(255,255,255,0.78) !important;
}

.service-card-large .service-link {
    color: #72C8BC !important;
}





/* =========================================================
   SECOND SERVICE CARD - WOMEN'S HEALTH
========================================================= */

.service-card-image {
    position: relative !important;

    overflow: hidden !important;

    padding: 0 !important;

    min-height: 285px;

    border-radius: 18px;
}


/* BACKGROUND IMAGE */

.service-card-image .service-card-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;

    transition: transform 0.5s ease;
}


/* DARK OVERLAY */

.service-card-image .service-card-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(7, 26, 26, 0.10) 0%,
            rgba(7, 26, 26, 0.30) 45%,
            rgba(7, 26, 26, 0.90) 100%
        );
}


/* CONTENT */

.service-card-image .service-card-content {
    position: relative;

    z-index: 3;

    height: 100%;

    min-height: 285px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    box-sizing: border-box;
}


/* ICON */

.service-card-image .service-icon {
    position: absolute;

    top: 28px;
    left: 28px;

    margin: 0;

    width: 54px;
    height: 54px;

    display: flex;

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

    border-radius: 15px;

    background: rgba(229, 245, 241, 0.95);

    color: #126b68;

    font-size: 24px;
}


/* TITLE */

.service-card-image h3 {
    margin: 0 0 12px;

    color: #ffffff !important;

    font-size: 25px;

    line-height: 1.15;

    font-weight: 700;
}


/* DESCRIPTION */

.service-card-image p {
    margin: 0 0 22px;

    color: rgba(255,255,255,0.80) !important;

    font-size: 15px;

    line-height: 1.6;
}


/* LINK */

.service-card-image .service-link {
    color: #72C8BC !important;
}


/* IMAGE ZOOM */

.service-card-image:hover .service-card-bg {
    transform: scale(1.04);
}






/* =========================================================
   HOW IT WORKS — IMAGE CARDS
========================================================= */

.how-it-works .step-card {
    position: relative !important;

    min-height: 390px !important;

    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 22px !important;

    border: 1px solid rgba(255,255,255,0.35) !important;

    background: #102E2D !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.12) !important;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.how-it-works .step-card-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    z-index: 0;

    transition: transform 0.5s ease;
}


/* =========================================================
   DARK IMAGE OVERLAY
========================================================= */

.how-it-works .step-card-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(7,26,26,0.18) 0%,
            rgba(7,26,26,0.28) 35%,
            rgba(7,26,26,0.90) 100%
        );
}


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

.how-it-works .step-card-content {
    position: relative;

    z-index: 3;

    min-height: 390px;

    padding: 28px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    text-align: center;
}


/* =========================================================
   STEP NUMBER
========================================================= */

.how-it-works .step-card .step-number {
    position: absolute;

    top: 25px;
    left: 25px;

    margin: 0;

    min-width: 46px;
    height: 30px;

    padding: 0 10px;

    display: inline-flex;

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

    border-radius: 30px;

    background: rgba(255,255,255,0.92) !important;

    color: #0F8B8D !important;

    border: 1px solid rgba(255,255,255,0.5);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;
}


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

.how-it-works .step-card .step-icon {
    width: 68px;
    height: 68px;

    margin: 0 0 22px;

    display: flex;

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

    border-radius: 20px;

    background: rgba(229,245,241,0.95) !important;

    color: #0F8B8D !important;

    border: 1px solid rgba(255,255,255,0.4);

    font-size: 27px;

    font-weight: 700;
}


/* =========================================================
   TITLE
========================================================= */

.how-it-works .step-card h3 {
    margin: 0 0 12px;

    color: #FFFFFF !important;

    font-size: 21px;

    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.how-it-works .step-card p {
    max-width: 250px;

    margin: 0;

    color: rgba(255,255,255,0.82) !important;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.how-it-works .step-card:hover .step-card-bg {
    transform: scale(1.06);
}


/* =========================================================
   REMOVE OLD CONNECTING LINE
========================================================= */

.how-it-works .steps-grid::before {
    display: none !important;
}





/* =========================================================
   PATIENT EXPERIENCE — IMAGE TESTIMONIAL CARDS
========================================================= */

.testimonials-grid .testimonial-image-card {
    position: relative !important;

    min-height: 420px !important;

    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 22px !important;

    border: 1px solid rgba(255,255,255,0.35) !important;

    background: #102E2D !important;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.testimonial-image-card .testimonial-card-bg {
    position: absolute;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover;

    object-position: center center;

    z-index: 0;

    transition: transform 0.5s ease;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.testimonial-image-card .testimonial-card-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(7,26,26,0.12) 0%,
            rgba(7,26,26,0.25) 35%,
            rgba(7,26,26,0.92) 100%
        );
}


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

.testimonial-image-card .testimonial-card-content {
    position: relative;

    z-index: 3;

    min-height: 420px;

    padding: 30px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


/* =========================================================
   RATING
========================================================= */

.testimonial-image-card .testimonial-rating {
    color: #83CEC4 !important;

    font-size: 18px;

    letter-spacing: 3px;

    margin: 0;
}


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

.testimonial-image-card blockquote {
    margin: auto 0 35px;

    padding: 0;

    color: #ffffff !important;

    font-size: 19px;

    line-height: 1.65;

    font-weight: 400;
}


/* =========================================================
   PERSON
========================================================= */

.testimonial-image-card .testimonial-person {
    display: flex;

    align-items: center;

    gap: 14px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,0.20);
}


/* =========================================================
   AVATAR
========================================================= */

.testimonial-image-card .testimonial-avatar {
    flex-shrink: 0;

    width: 54px;
    height: 54px;

    display: flex;

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

    border-radius: 50%;

    background: #14817D !important;

    color: #ffffff !important;

    font-size: 17px;

    font-weight: 700;
}


/* =========================================================
   NAME
========================================================= */

.testimonial-image-card .testimonial-person strong {
    display: block;

    margin-bottom: 3px;

    color: #ffffff !important;

    font-size: 16px;
}


/* =========================================================
   SUBTEXT
========================================================= */

.testimonial-image-card .testimonial-person span {
    display: block;

    color: rgba(255,255,255,0.65) !important;

    font-size: 13px;
}


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

.testimonial-image-card:hover .testimonial-card-bg {
    transform: scale(1.05);
}





/* =========================================================
   TRUST & BENEFITS
   MAVEN-STYLE IMAGE GRID
========================================================= */

.trust-section {
    position: relative;

    width: 100%;

    padding: 125px 0 130px;

    background: #073B36;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.trust-container {
    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.trust-heading {
    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: 0 auto 58px;

    text-align: center;
}

.trust-heading .section-label {
    display: inline-block;

    margin-bottom: 16px;

    color: #52C8B8;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.2px;

    text-transform: uppercase;
}

.trust-heading h2 {
    margin: 0 0 20px;

    color: #FFFFFF !important;

    font-size: clamp(40px, 4vw, 58px);

    line-height: 1.06;

    font-weight: 600;

    letter-spacing: -2px;
}

.trust-heading h2 span {
    color: #4BC8B8 !important;
}

.trust-heading p {
    max-width: 650px;

    margin: 0 auto;

    color: rgba(255,255,255,0.70) !important;

    font-size: 17px;

    line-height: 1.7;
}


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

.trust-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    width: 100%;
}


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

.trust-card {
    position: relative;

    height: 600px;

    min-width: 0;

    margin: 0;

    padding: 0 !important;

    overflow: hidden;

    border: none !important;

    border-radius: 8px !important;

    background: #0B2927 !important;

    box-shadow: none !important;

    isolation: isolate;
}


/* =========================================================
   IMAGE
========================================================= */

.trust-card > img {
    position: absolute;

    inset: 0;

    width: 100% !important;

    height: 100% !important;

    object-fit: cover;

    object-position: center;

    display: block;

    z-index: 0;

    transition:
        transform 0.6s ease;
}


/* =========================================================
   IMAGE GRADIENT
========================================================= */

.trust-card-gradient {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to bottom,
            rgba(5,25,24,0.02) 0%,
            rgba(5,25,24,0.03) 35%,
            rgba(5,25,24,0.18) 55%,
            rgba(5,25,24,0.68) 78%,
            rgba(5,25,24,0.96) 100%
        );
}


/* =========================================================
   TOP DOT
========================================================= */

.trust-card-dot {
    position: absolute;

    top: 20px;

    left: 20px;

    z-index: 4;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);
}

.trust-card-dot span {
    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: #39C7BB;
}


/* CARD DOT COLORS */

.trust-card:nth-child(2)
.trust-card-dot span {
    background: #0CB28D;
}

.trust-card:nth-child(3)
.trust-card-dot span {
    background: #7774FF;
}

.trust-card:nth-child(4)
.trust-card-dot span {
    background: #FFD21F;
}


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

.trust-card-content {
    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 3;

    padding: 30px 20px 22px;
}


/* =========================================================
   TITLE
========================================================= */

.trust-card-content h3 {
    margin: 0 0 7px !important;

    color: #FFFFFF !important;

    font-size: 27px !important;

    line-height: 1.12;

    font-weight: 500 !important;

    letter-spacing: -0.7px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.trust-card-content p {
    max-width: 100%;

    margin: 0 !important;

    color: rgba(255,255,255,0.90) !important;

    font-size: 14px !important;

    line-height: 1.45;

    font-weight: 400;
}


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

.trust-card:hover > img {
    transform: scale(1.04);
}












/* =========================================
   ASK A DOCTOR FLOATING WIDGET
========================================= */

.ask-doctor-widget {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 99999;
    font-family: 'Poppins', sans-serif;
}

/* Floating Button */

.ask-doctor-button {
    border: none;
    outline: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px 20px;

    border-radius: 50px;

    background: #102e2d;
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);

    transition: all 0.3s ease;
}

.ask-doctor-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
}

.ask-doctor-icon {
    width: 34px;
    height: 34px;

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

    background: rgba(255, 255, 255, 0.14);
    border-radius: 50%;

    font-size: 17px;
}


/* Popup */

.ask-doctor-panel {
    position: absolute;

    right: 0;
    bottom: 70px;

    width: 360px;

    background: #ffffff;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px) scale(0.97);

    transition: all 0.3s ease;
}

.ask-doctor-panel.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0) scale(1);
}


/* Header */

.ask-doctor-header {
    background: #102e2d;
    color: #ffffff;

    padding: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ask-doctor-header h3 {
    margin: 0;

    font-size: 19px;
    font-weight: 600;
}

.ask-doctor-header p {
    margin: 3px 0 0;

    font-size: 12px;

    opacity: 0.75;
}

.ask-doctor-close {
    border: none;
    background: transparent;

    color: #ffffff;

    font-size: 28px;

    cursor: pointer;

    line-height: 1;
}


/* Content */

.ask-doctor-content {
    padding: 22px;
}

.ask-doctor-content form {
    display: flex;
    flex-direction: column;
}

.ask-doctor-content label {
    margin-bottom: 7px;

    font-size: 13px;
    font-weight: 600;

    color: #253b3a;
}

.ask-doctor-content select,
.ask-doctor-content textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #dce5e4;

    border-radius: 12px;

    padding: 12px 13px;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    margin-bottom: 16px;

    background: #fafcfc;

    transition: border 0.2s ease;
}

.ask-doctor-content select:focus,
.ask-doctor-content textarea:focus {
    border-color: #102e2d;
}

.ask-doctor-content textarea {
    height: 120px;

    resize: none;
}


/* Submit */

.ask-doctor-submit {
    width: 100%;

    border: none;

    border-radius: 12px;

    padding: 13px;

    background: #102e2d;

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.25s ease;
}

.ask-doctor-submit:hover {
    transform: translateY(-2px);
}


/* Login State */

.ask-doctor-login {
    text-align: center;
}

.ask-doctor-big-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 15px;

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

    border-radius: 50%;

    background: #eef5f4;

    font-size: 26px;
}

.ask-doctor-login h4 {
    margin: 0 0 8px;

    color: #102e2d;

    font-size: 17px;
}

.ask-doctor-login p {
    margin: 0 0 20px;

    color: #687877;

    font-size: 12px;

    line-height: 1.7;
}

.ask-doctor-login-btn {
    display: block;

    padding: 12px;

    border-radius: 12px;

    background: #102e2d;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;
}


/* Note */

.ask-doctor-note {
    margin: -7px 0 16px;

    font-size: 10px;

    line-height: 1.5;

    color: #8a9897;
}


/* My Queries */

.view-my-queries {
    display: block;

    margin-top: 15px;

    text-align: center;

    color: #102e2d;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;
}













/* =========================================================
   LOGGED-IN DESKTOP NAVBAR
   ========================================================= */

/* =========================================================
   LOGGED-IN DESKTOP NAVBAR
   ========================================================= */

@media (min-width: 769px) {

.site-header .nav-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    flex-shrink: 0 !important;

    margin-left: 22px !important;
    margin-right: 0 !important;

    gap: 10px !important;

    box-sizing: border-box !important;
}

/* My Account */
.site-header .nav-actions .account-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 48px !important;
    min-width: auto !important;

    padding: 0 20px !important;

    border: 1px solid #cbd7d7 !important;
    border-radius: 8px !important;

    background: #ffffff !important;
    color: #263238 !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    white-space: nowrap !important;
    line-height: 1 !important;

    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}

/* Log Out */
.site-header .nav-actions .logout-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 48px !important;
    min-width: auto !important;

    padding: 0 20px !important;

    border: 1px solid #cbd7d7 !important;
    border-radius: 8px !important;

    background: #ffffff !important;
    color: #263238 !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    white-space: nowrap !important;
    line-height: 1 !important;

    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}

/* Book Appointment */
.site-header .nav-actions .book-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 48px !important;

    min-width: 240px !important;
    width: 240px !important;

    padding: 0 20px !important;

    border-radius: 8px !important;

    white-space: nowrap !important;

    flex: 0 0 240px !important;

    box-sizing: border-box !important;
}











/* =========================================================
   CENTER NAVBAR — LOGGED IN / LOGGED OUT
   ========================================================= */






.ask-doctor-message {
    padding: 11px 13px;
    margin-bottom: 16px;

    border-radius: 10px;

    font-size: 11px;
    line-height: 1.5;
}

.ask-doctor-message.success {
    background: #eef8f3;
    color: #26704d;
    border: 1px solid #cce8d9;
}

.ask-doctor-message.error {
    background: #fff3f3;
    color: #9b4141;
    border: 1px solid #efd0d0;
}









/* =========================================================
   DOCTOR GENERAL QUERIES
   ========================================================= */

.queries-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 40px;
}

.queries-page-header h1 {
    margin: 5px 0 10px;

    font-size: clamp(38px, 4vw, 54px);

    line-height: 1.05;

    color: #17324d;
}

.queries-page-header p {
    max-width: 620px;

    margin: 0;

    color: #71828d;

    font-size: 15px;

    line-height: 1.7;
}

.queries-specialty-badge {
    padding: 12px 18px;

    border-radius: 30px;

    background: #e7f6f2;

    color: #126b68;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .5px;

    white-space: nowrap;
}


/* QUERY LIST */

.doctor-query-list {
    display: flex;

    flex-direction: column;

    gap: 22px;
}


/* QUERY CARD */

.doctor-query-card {
    padding: 28px;

    background: #ffffff;

    border: 1px solid #e4eeeb;

    border-radius: 22px;

    box-shadow:
        0 12px 35px rgba(23, 50, 77, 0.06);
}


/* HEADER */

.doctor-query-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid #edf2f1;
}

.doctor-query-patient {
    display: flex;

    align-items: center;

    gap: 13px;
}

.doctor-query-avatar {
    width: 46px;
    height: 46px;

    display: flex;

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

    border-radius: 50%;

    background: #e8f6f3;

    color: #126b68;

    font-size: 16px;

    font-weight: 700;
}

.doctor-query-patient strong {
    display: block;

    margin-bottom: 3px;

    color: #17324d;

    font-size: 15px;
}

.doctor-query-patient span {
    display: block;

    color: #83919a;

    font-size: 12px;
}


/* STATUS */

.query-status {
    display: inline-flex;

    align-items: center;

    padding: 7px 12px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 700;
}

.query-status.pending {
    background: #fff6e8;

    color: #a46a17;
}

.query-status.answered {
    background: #eaf7f0;

    color: #27734d;
}


/* QUESTION */

.doctor-query-question {
    padding: 24px 0;
}

.doctor-query-question > span,
.doctor-query-answer > span {
    display: block;

    margin-bottom: 10px;

    color: #87959d;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;
}

.doctor-query-question p {
    margin: 0;

    color: #3e5261;

    font-size: 15px;

    line-height: 1.8;
}


/* RESPONSE FORM */

.doctor-query-response-form {
    padding-top: 22px;

    border-top: 1px solid #edf2f1;
}

.doctor-query-response-form label {
    display: block;

    margin-bottom: 9px;

    color: #17324d;

    font-size: 13px;

    font-weight: 700;
}

.doctor-query-response-form textarea {
    width: 100%;

    min-height: 130px;

    padding: 15px;

    box-sizing: border-box;

    border: 1px solid #dce9e6;

    border-radius: 14px;

    background: #fbfdfc;

    color: #17324d;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.6;

    resize: vertical;

    outline: none;
}

.doctor-query-response-form textarea:focus {
    border-color: #51cdc9;

    background: #ffffff;
}

.doctor-query-submit {
    margin-top: 13px;

    padding: 12px 21px;

    border: none;

    border-radius: 10px;

    background: #126b68;

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}

.doctor-query-submit:hover {
    transform: translateY(-1px);

    opacity: .92;
}


/* ANSWER */

.doctor-query-answer {
    padding: 20px;

    border-radius: 15px;

    background: #f2faf7;

    border: 1px solid #dceee7;
}

.doctor-query-answer p {
    margin: 0;

    color: #365b50;

    font-size: 14px;

    line-height: 1.8;
}

.doctor-query-answer small {
    display: block;

    margin-top: 13px;

    color: #7b9189;

    font-size: 11px;
}











/* =========================================================
   PATIENT QUERIES
   ========================================================= */

.patient-query-list {
    display: flex;

    flex-direction: column;

    gap: 22px;
}

.patient-query-card {
    padding: 28px;

    background: #ffffff;

    border: 1px solid #e4eeeb;

    border-radius: 22px;

    box-shadow:
        0 12px 35px rgba(23, 50, 77, 0.06);
}


/* TOP */

.patient-query-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid #edf2f1;
}

.patient-query-top span:not(.query-status) {
    display: block;

    margin-bottom: 5px;

    color: #126b68;

    font-size: 12px;

    font-weight: 700;
}

.patient-query-top strong {
    display: block;

    color: #83919a;

    font-size: 11px;

    font-weight: 500;
}


/* QUESTION */

.patient-query-question {
    padding: 23px 0;
}

.patient-query-question > span,
.patient-query-answer > span {
    display: block;

    margin-bottom: 10px;

    color: #87959d;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;
}

.patient-query-question p,
.patient-query-answer p {
    margin: 0;

    color: #405564;

    font-size: 14px;

    line-height: 1.8;
}


/* RESPONSE */

.patient-query-response {
    padding-top: 22px;

    border-top: 1px solid #edf2f1;
}

.patient-query-doctor {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}

.patient-query-doctor strong {
    display: block;

    margin-bottom: 3px;

    color: #17324d;

    font-size: 14px;
}

.patient-query-doctor span {
    color: #84929a;

    font-size: 11px;
}


/* ANSWER */

.patient-query-answer {
    padding: 20px;

    background: #f2faf7;

    border: 1px solid #dceee7;

    border-radius: 15px;
}

.patient-query-response > small {
    display: block;

    margin-top: 12px;

    color: #899992;

    font-size: 10px;
}


/* PENDING */

.patient-query-pending {
    padding: 18px;

    border-radius: 14px;

    background: #fffaf0;

    border: 1px solid #f1e3c4;
}

.patient-query-pending strong {
    display: block;

    margin-bottom: 5px;

    color: #876321;

    font-size: 13px;
}

.patient-query-pending p {
    margin: 0;

    color: #907b58;

    font-size: 12px;

    line-height: 1.6;
}





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

.cta-symbol {
    position: relative !important;
    z-index: 10 !important;

    width: 600px !important;
    height: 600px !important;

    min-width: 400px !important;
    min-height: 400px !important;

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

    border-radius: 50% !important;
    overflow: hidden !important;

    background: #ffffff !important;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20) !important;
}

.appointment-cta-visual {
    position: relative !important;
    flex: 0 0 42% !important;
    width: 42% !important;
    min-width: 240px !important;
    height: 330px !important;

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

    overflow: visible !important;
}


.appointment-cta-visual {
    flex: 0 0 38%;
    width: 38%;
    height: 300px;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible;
}


.appointment-cta-section {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.site-footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}




/* =========================================================
   ABOUT PAGE — ROUNDED CONTENT SECTIONS
   HERO + CTA EXCLUDED
========================================================= */

.about-mission-section,
.about-values-section,
.about-experience-section {
    width: min(1400px, 94%);
    margin: 32px auto;

    box-sizing: border-box;

    border-radius: 32px;

    overflow: hidden;
}


/* MISSION */

.about-mission-section {
    padding: 110px 70px;
    background: #262b49;
}


/* VALUES */

.about-values-section {
    padding: 110px 70px;
    background: #262b49;
}


/* EXPERIENCE */

.about-experience-section {
    padding: 120px 70px;
    background: #262b49;
}

main {
    background:  white !important;
}




.contact-main-section,
.contact-faq-section {
    width: min(1400px, 94%);
    margin: 32px auto;
    box-sizing: border-box;
    border-radius: 32px;
    overflow: hidden;
}

.contact-main-section {
    padding: 110px 70px;
}

.contact-faq-section {
    padding: 110px 70px;
    background: #262b49;
}





.urgent-care-image {
    width: 100%;
    height: 330px;
    object-fit: cover;
    display: block;
    margin-top: 25px;
    border-radius: 20px;
}




.contact-faq-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: stretch;
}

.contact-faq-content {
    min-width: 0;
}

.contact-faq-image {
    height: auto !important;
    min-height: 0 !important;
    align-self: start;
    border-radius: 28px;
    overflow: hidden;
}

.contact-faq-image img {
    width: 100%;
    height: 500px !important;
    display: block;
    object-fit: cover;
}









/* =========================================================
   PATIENT APPOINTMENTS
   UI ONLY — DO NOT CHANGE PHP / CONTENT
========================================================= */

.booking-section {
    padding: 110px 0 120px;
    background: #F3FAF8;
}

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

.booking-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;

    margin-bottom: 45px;
}

.booking-header h1 {
    margin: 8px 0 0;

    color: #17324D;

    font-size: clamp(42px, 4.5vw, 58px);
    line-height: 1.05;

    letter-spacing: -1.8px;
    font-weight: 600;
}

.booking-header h1 span {
    color: #126B68;
}

.booking-header p {
    max-width: 620px;

    margin-top: 14px;

    color: #667985;

    font-size: 16px;
    line-height: 1.75;
}

.booking-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0 20px;

    border: 1px solid #D5E5E2;
    border-radius: 10px;

    background: rgba(23, 50, 77, 0.08);

    color: #126B68;

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

    transition: all .25s ease;
}

.booking-back-link:hover {
    background: #126B68;
    border-color: #126B68;
    color: #FFFFFF;
}


/* ================================
   MAIN BOOKING LAYOUT
================================ */

.booking-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, .75fr);

    gap: 25px;

    align-items: start;
}


/* ================================
   BOOKING FORM CARD
================================ */

.booking-form-card {
    padding: 40px;

    background: #a0ccc6;

    border: 1px solid #DCEAE7;
    border-radius: 24px;

    box-shadow:
        0 15px 45px rgba(23, 50, 77, .06);
}

.booking-card-heading {
    margin-bottom: 28px;
}

.booking-card-heading h2 {
    margin-top: 5px;

    color: #17324D;

    font-size: 30px;
    line-height: 1.2;

    font-weight: 600;
}


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

.booking-form,
.booking-selection-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.booking-form .form-group,
.booking-selection-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.booking-form .form-group label,
.booking-selection-form .form-group label {
    color: #405868;

    font-size: 13px;
    font-weight: 700;
}


/* INPUTS */

.booking-form select,
.booking-form input,
.booking-form textarea,
.booking-selection-form select,
.booking-selection-form input {
    width: 100%;

    padding: 13px 15px;

    border: 1px solid #DCE8E5;
    border-radius: 11px;

    outline: none;

    background: #FFFFFF;

    color: #17324D;

    font-family: inherit;
    font-size: 14px;

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

.booking-form select,
.booking-selection-form select,
.booking-form input[type="date"],
.booking-selection-form input[type="date"] {
    height: 50px;
}

.booking-form textarea {
    min-height: 120px;

    resize: vertical;
}

.booking-form select:focus,
.booking-form input:focus,
.booking-form textarea:focus,
.booking-selection-form select:focus,
.booking-selection-form input:focus {
    border-color: #126B68;

    box-shadow:
        0 0 0 3px rgba(18, 107, 104, .08);
}


/* ================================
   SELECTED DOCTOR
================================ */

.selected-doctor-summary {
    margin: 24px 0;

    padding: 22px;

    background: #F5FBF9;

    border: 1px solid #DCEAE7;
    border-radius: 17px;
}

.selected-doctor-summary h3 {
    margin-top: 7px;

    color: #17324D;

    font-size: 22px;
}

.selected-doctor-summary p {
    margin-top: 6px;

    color: #667985;

    font-size: 14px;
}


/* ================================
   TIME SLOTS
================================ */

.appointment-slots {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.appointment-slot {
    position: relative;

    cursor: pointer;
}

.appointment-slot input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.appointment-slot span {
    display: flex;

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

    min-height: 46px;

    padding: 0 10px;

    border: 1px solid #DCE8E5;
    border-radius: 10px;

    background: #FFFFFF;

    color: #405868;

    font-size: 13px;
    font-weight: 600;

    transition: all .2s ease;
}

.appointment-slot:hover span {
    border-color: #126B68;

    color: #126B68;

    background: #F4FBF9;
}

.appointment-slot input:checked + span {
    background: #126B68;

    border-color: #126B68;

    color: #FFFFFF;

    box-shadow:
        0 5px 15px rgba(18, 107, 104, .18);
}


/* ================================
   SUBMIT BUTTON
================================ */

.booking-submit {
    width: 100%;

    min-height: 52px;

    margin-top: 5px;

    border: 0;
    border-radius: 10px;

    background: #126B68;

    color: #FFFFFF;

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

    cursor: pointer;

    transition: all .25s ease;
}

.booking-submit:hover {
    background: #0D5956;

    transform: translateY(-1px);
}


/* ================================
   RIGHT INFORMATION CARD
================================ */

.booking-info-card {
    padding: 38px;

    background: #a0ccc6;

    border: 1px solid #DCEAE7;
    border-radius: 24px;

    box-shadow:
        0 15px 45px rgba(23, 50, 77, .05);
}

.booking-info-card h2 {
    margin-top: 8px;

    color: #17324D;

    font-size: 30px;
    line-height: 1.15;

    font-weight: 600;
}

.booking-steps {
    margin-top: 30px;
}

.booking-step {
    display: flex;

    gap: 17px;

    padding: 20px 0;

    border-bottom: 1px solid #DCEAE7;
}

.booking-step:last-child {
    border-bottom: 0;
}

.booking-step > span {
    flex-shrink: 0;

    display: flex;

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

    width: 40px;
    height: 40px;

    border-radius: 12px;

    background: #E5F5F1;

    color: #126B68;

    font-size: 12px;
    font-weight: 800;
}

.booking-step strong {
    display: block;

    margin-bottom: 5px;

    color: #17324D;

    font-size: 15px;
}

.booking-step p {
    color: #667985;

    font-size: 13px;
    line-height: 1.65;
}

.booking-security-note {
    margin-top: 25px;

    padding: 18px;

    border-radius: 14px;

    background: #EAF6F3;
}

.booking-security-note strong {
    display: block;

    margin-bottom: 5px;

    color: #126B68;

    font-size: 13px;
}

.booking-security-note p {
    color: #58706F;

    font-size: 12px;
    line-height: 1.6;
}


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

.appointment-history {
    margin-top: 70px;

    padding: 40px;

    background: #a0ccc6;

    border: 1px solid #DCEAE7;
    border-radius: 24px;

    box-shadow:
        0 15px 45px rgba(23, 50, 77, .05);
}

.appointment-history-heading {
    margin-bottom: 28px;
}

.appointment-history-heading h2 {
    margin-top: 5px;

    color: #17324D;

    font-size: 32px;
    font-weight: 600;
}

.appointment-history-list {
    display: flex;

    flex-direction: column;

    gap: 14px;
}

.appointment-history-card {
    display: grid;

    grid-template-columns: 75px minmax(0, 1fr) auto;

    align-items: center;

    gap: 22px;

    padding: 20px;

    border: 1px solid #E0EBE9;
    border-radius: 18px;

    background: #FFFFFF;

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

.appointment-history-card:hover {
    transform: translateY(-3px);

    border-color: #B9DCD6;

    box-shadow:
        0 12px 30px rgba(23, 50, 77, .07);
}


/* DATE */

.appointment-date-box {
    display: flex;

    flex-direction: column;

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

    width: 68px;
    height: 68px;

    border-radius: 15px;

    background: #E5F5F1;

    color: #126B68;
}

.appointment-date-box span {
    font-size: 11px;
    font-weight: 800;
}

.appointment-date-box strong {
    margin-top: 2px;

    font-size: 24px;
    line-height: 1;
}


/* HISTORY TEXT */

.appointment-history-info h3 {
    margin: 5px 0;

    color: #17324D;

    font-size: 19px;
}

.appointment-history-info p {
    margin: 0;

    color: #667985;

    font-size: 13px;
}


/* STATUS */

.appointment-status {
    padding: 8px 13px;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;
}


/* EMPTY */

.appointment-empty {
    padding: 50px 20px;

    text-align: center;

    border: 1px dashed #C9DEDA;
    border-radius: 18px;

    background: #F8FCFB;
}

.appointment-empty h3 {
    color: #17324D;

    font-size: 20px;
}

.appointment-empty p {
    margin-top: 8px;

    color: #667985;

    font-size: 14px;
}


/* ================================
   ALERTS
================================ */

.form-alert {
    margin-bottom: 25px;

    padding: 15px 18px;

    border-radius: 12px;
}

.form-alert p {
    margin: 3px 0;
}


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

@media (max-width: 900px) {

    .booking-section {
        padding: 80px 0 90px;
    }

    .booking-header {
        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 35px;
    }

    .booking-layout {
        grid-template-columns: 1fr;
    }

    .booking-info-card {
        order: -1;
    }

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

    .appointment-history-card {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .appointment-status {
        grid-column: 2;
        justify-self: start;
    }
}


@media (max-width: 600px) {

    .booking-section {
        padding: 65px 0 75px;
    }

    .booking-header h1 {
        font-size: 36px;
    }

    .booking-header p {
        font-size: 15px;
    }

    .booking-back-link {
        min-height: 42px;

        font-size: 13px;
    }

    .booking-form-card,
    .booking-info-card,
    .appointment-history {
        padding: 25px;

        border-radius: 20px;
    }

    .booking-card-heading h2,
    .booking-info-card h2 {
        font-size: 25px;
    }

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

    .appointment-history {
        margin-top: 50px;
    }

    .appointment-history-heading h2 {
        font-size: 27px;
    }

    .appointment-history-card {
        grid-template-columns: 58px minmax(0, 1fr);

        gap: 14px;

        padding: 15px;
    }

    .appointment-date-box {
        width: 58px;
        height: 58px;
    }

    .appointment-date-box strong {
        font-size: 20px;
    }
}


.booking-form-image {
    width: 100%;
    height: 320px;
    margin-top: 30px;
    overflow: hidden;
    border-radius: 22px;
}

.booking-form-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}







/* =========================================================
   PATIENT PROFILE — PREMIUM UI
   ========================================================= */

.patient-profile-section {
    padding: 105px 0 120px !important;
    background: #f3faf8 !important;
}


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

.patient-page-header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 35px !important;

    margin-bottom: 45px !important;
}

.patient-page-header .section-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #126b68;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.patient-page-header h1 {
    margin: 0 !important;

    max-width: 700px;

    font-size: clamp(42px, 4vw, 56px) !important;
    line-height: 1.06 !important;
    letter-spacing: -1.8px !important;

    color: #17324d !important;
}

.patient-page-header p {
    max-width: 650px;

    margin: 16px 0 0 !important;

    font-size: 16px !important;
    line-height: 1.7;

    color: #667985 !important;
}


/* =========================================================
   BACK TO DASHBOARD
   ========================================================= */

.profile-back-link {
    display: inline-flex;

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

    min-height: 46px;

    padding: 0 20px;

    border: 1px solid #c8ded9;
    border-radius: 10px;

    background: #ffffff;

    color: #126b68 !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    white-space: nowrap;

    box-shadow: 0 8px 25px rgba(23, 50, 77, 0.04);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.profile-back-link:hover {
    background: #126b68;

    border-color: #126b68;

    color: #ffffff !important;

    transform: translateY(-2px);
}


/* =========================================================
   ALERTS
   ========================================================= */

.patient-profile-section .form-alert {
    margin-bottom: 25px;

    padding: 15px 18px;

    border-radius: 13px;

    font-size: 13px;
    line-height: 1.6;
}

.patient-profile-section .form-alert p {
    margin: 0;
}

.patient-profile-section .form-alert-error {
    border: 1px solid #efd0d0;

    background: #fff5f5;

    color: #9b4141;
}

.patient-profile-section .form-alert-success {
    border: 1px solid #cfe8df;

    background: #f1faf7;

    color: #276b5c;
}


/* =========================================================
   MAIN PROFILE GRID
   ========================================================= */

.patient-profile-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(300px, 0.65fr) !important;

    align-items: start !important;

    gap: 28px !important;
}


/* =========================================================
   PERSONAL INFORMATION CARD
   ========================================================= */

.patient-profile-form-card {
    position: relative;

    padding: 42px !important;

    border: 1px solid #dfece8 !important;
    border-radius: 26px !important;

    background: #a0ccc6 !important;

    box-shadow:
        0 18px 50px rgba(23, 50, 77, 0.065) !important;

    overflow: hidden;
}

.patient-profile-form-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #126b68;
}


/* CARD HEADING */

.patient-card-heading {
    margin-bottom: 32px !important;
}

.patient-card-heading h2 {
    margin: 0 !important;

    font-size: 29px !important;
    line-height: 1.2;

    color: #17324d !important;
}

.patient-card-heading p {
    max-width: 600px;

    margin: 9px 0 0 !important;

    font-size: 14px !important;
    line-height: 1.7;

    color: #74838e !important;
}


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

.patient-profile-form {
    display: flex;

    flex-direction: column;

    gap: 20px !important;
}

.patient-profile-form .form-row {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px !important;
}

.patient-profile-form .form-group {
    display: flex;

    flex-direction: column;

    gap: 8px !important;
}

.patient-profile-form .form-group label {
    font-size: 12px !important;

    font-weight: 700 !important;

    letter-spacing: 0.2px;

    color: #405a6a !important;
}


/* INPUTS */

.patient-profile-form input,
.patient-profile-form select,
.patient-profile-form textarea {
    width: 100% !important;

    border: 1px solid #d9e7e4 !important;
    border-radius: 11px !important;

    background: #fbfdfc !important;

    color: #17324d !important;

    font-family: inherit;

    font-size: 14px !important;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.patient-profile-form input,
.patient-profile-form select {
    height: 50px !important;

    padding: 0 15px !important;
}

.patient-profile-form textarea {
    min-height: 120px !important;

    padding: 14px 15px !important;

    resize: vertical;
}

.patient-profile-form input:hover,
.patient-profile-form select:hover,
.patient-profile-form textarea:hover {
    border-color: #bcd8d3 !important;
}

.patient-profile-form input:focus,
.patient-profile-form select:focus,
.patient-profile-form textarea:focus {
    border-color: #126b68 !important;

    background: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(18, 107, 104, 0.08) !important;
}

.patient-profile-form input:disabled {
    background: #f1f5f4 !important;

    color: #7b8993 !important;

    cursor: not-allowed;
}


/* EMAIL NOTE */

.patient-profile-form .field-note {
    margin-top: 2px;

    font-size: 11px;

    color: #8a989f;
}


/* =========================================================
   EMERGENCY CONTACT DIVIDER
   ========================================================= */

.patient-form-divider {
    display: flex !important;

    align-items: center;

    gap: 16px;

    margin: 12px 0 2px !important;
}

.patient-form-divider::before,
.patient-form-divider::after {
    content: "";

    height: 1px;

    flex: 1;

    background: #dfece8;
}

.patient-form-divider span {
    padding: 0 3px;

    font-size: 11px !important;

    font-weight: 800 !important;

    letter-spacing: 1px !important;

    text-transform: uppercase;

    color: #126b68 !important;
}


/* =========================================================
   SAVE BUTTON
   ========================================================= */

.profile-save-button {
    align-self: flex-start;

    min-height: 50px;

    margin-top: 5px;

    padding: 0 27px !important;

    border: 1px solid #126b68 !important;
    border-radius: 10px !important;

    background: #126b68 !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(18, 107, 104, 0.14);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.profile-save-button:hover {
    background: #0e5d5a !important;

    transform: translateY(-2px);

    box-shadow:
        0 15px 30px rgba(18, 107, 104, 0.20);
}


/* =========================================================
   ACCOUNT SUMMARY
   ========================================================= */

.patient-account-card {
    position: sticky;

    top: 105px;

    padding: 36px !important;

    border: 1px solid #dfece8 !important;
    border-radius: 26px !important;

    background: #a0ccc6 !important;

    box-shadow:
        0 18px 50px rgba(23, 50, 77, 0.065) !important;

    overflow: hidden;
}


/* ACCOUNT LABEL */

.patient-account-card > .section-label {
    display: inline-block;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;

    color: #126b68;
}


/* AVATAR */

.patient-avatar {
    width: 82px !important;
    height: 82px !important;

    display: flex;

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

    margin: 22px 0 20px !important;

    border-radius: 24px !important;

    background:
        linear-gradient(
            135deg,
            #e5f5f1,
            #cfe9e4
        ) !important;

    color: #126b68 !important;

    font-size: 30px !important;
    font-weight: 800 !important;

    border: 1px solid #cfe5e0;
}


/* ACCOUNT NAME */

.patient-account-card h2 {
    margin: 0 !important;

    font-size: 27px !important;

    line-height: 1.2;

    letter-spacing: -0.5px;

    color: #17324d !important;
}

.patient-account-card > p {
    margin: 6px 0 0 !important;

    font-size: 13px !important;

    color: #7a8995 !important;
}


/* ACCOUNT DETAILS */

.account-summary-list {
    display: flex;

    flex-direction: column;

    gap: 18px !important;

    margin-top: 30px !important;

    padding-top: 25px !important;

    border-top: 1px solid #e1ece9;
}

.account-summary-list div {
    display: flex;

    flex-direction: column;

    gap: 6px !important;

    padding: 13px 14px;

    border: 1px solid #e5efed;

    border-radius: 12px;

    background: #f8fcfb;
}

.account-summary-list span {
    font-size: 10px !important;

    font-weight: 800 !important;

    text-transform: uppercase;

    letter-spacing: 0.9px !important;

    color: #126b68 !important;
}

.account-summary-list strong {
    font-size: 13px !important;

    line-height: 1.5;

    word-break: break-word;

    color: #17324d !important;
}


/* DASHBOARD BUTTON */

.account-dashboard-button {
    display: flex;

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

    width: 100%;

    min-height: 48px;

    margin-top: 25px !important;

    padding: 0 18px !important;

    border: 1px solid #126b68 !important;
    border-radius: 10px !important;

    background: #126b68;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 700 !important;

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

.account-dashboard-button:hover {
    background: #126b68 !important;

    color: #ffffff !important;

    transform: translateY(-2px);
}


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

@media (max-width: 950px) {

    .patient-profile-grid {
        grid-template-columns: 1fr !important;
    }

    .patient-account-card {
        position: relative;

        top: auto;

        order: -1;
    }

}


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

@media (max-width: 650px) {

    .patient-profile-section {
        padding: 80px 0 85px !important;
    }

    .patient-page-header {
        align-items: flex-start !important;

        flex-direction: column !important;

        gap: 20px !important;

        margin-bottom: 30px !important;
    }

    .patient-page-header h1 {
        font-size: 38px !important;

        letter-spacing: -1px !important;
    }

    .patient-page-header p {
        font-size: 15px !important;
    }

    .profile-back-link {
        min-height: 44px;

        padding: 0 17px;
    }

    .patient-profile-form-card {
        padding: 25px !important;

        border-radius: 20px !important;
    }

    .patient-card-heading {
        margin-bottom: 25px !important;
    }

    .patient-card-heading h2 {
        font-size: 25px !important;
    }

    .patient-profile-form .form-row {
        grid-template-columns: 1fr !important;

        gap: 20px !important;
    }

    .patient-account-card {
        padding: 27px !important;

        border-radius: 20px !important;
    }

    .patient-account-card h2 {
        font-size: 24px !important;
    }

    .patient-avatar {
        width: 70px !important;
        height: 70px !important;

        border-radius: 20px !important;
    }

    .profile-save-button {
        width: 100%;

        align-self: stretch;
    }

}





/* =========================================================
   PATIENT MEDICAL REPORTS - POLISHED UI
   ========================================================= */

.dashboard-main {
    background: #f3faf8;
    min-height: calc(100vh - 110px);
    padding: 55px 0 100px;
}


/* ---------------------------------------------------------
   ALERTS
   --------------------------------------------------------- */

.dashboard-main .alert {
    margin-bottom: 24px;
    border-radius: 14px;
}


/* ---------------------------------------------------------
   REPORT PANEL
   --------------------------------------------------------- */

.medical-report-panel {
    position: relative;
    background: #a0ccc6;
    border: 1px solid #e3eeee;
    border-radius: 26px;
    padding: 34px;
    margin-bottom: 28px;
    box-shadow: 0 18px 45px rgba(20, 70, 70, 0.07);
    overflow: hidden;
}

.medical-report-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        #126b68,
        #2d8585,
        #8ccfca
    );
}


/* ---------------------------------------------------------
   PANEL HEADER
   --------------------------------------------------------- */

.medical-report-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 28px;
}

.medical-report-panel-header h2 {
    margin: 8px 0 8px;
    color: #17324d;
    font-size: clamp(24px, 2.4vw, 31px);
    line-height: 1.2;
    letter-spacing: -0.4px;
}

.medical-report-panel-header p {
    margin: 0;
    max-width: 650px;
    color: #718080;
    line-height: 1.7;
    font-size: 14px;
}


/* ---------------------------------------------------------
   UPLOAD AREA
   --------------------------------------------------------- */

.medical-report-upload-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: end;

    padding: 24px;

    background: #f7fbfb;
    border: 1px dashed #bfd6d4;
    border-radius: 18px;
}

.medical-upload-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.medical-upload-field label {
    color: #294646;
    font-size: 14px;
    font-weight: 700;
}

.medical-upload-field input[type="file"] {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;

    padding: 13px 15px;

    border: 1px solid #d4e2e1;
    border-radius: 12px;

    background: #ffffff;
    color: #435858;

    font-size: 13px;

    cursor: pointer;
    transition: all 0.25s ease;
}

.medical-upload-field input[type="file"]:hover {
    border-color: #9fc4c1;
}

.medical-upload-field input[type="file"]:focus {
    outline: none;
    border-color: #2d8585;
    box-shadow: 0 0 0 4px rgba(45, 133, 133, 0.10);
}

.medical-upload-field small {
    color: #7a8989;
    font-size: 12px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   UPLOAD BUTTON
   --------------------------------------------------------- */

.medical-report-upload-form .admin-button-primary {
    min-height: 52px;
    padding: 0 25px;

    border: none;
    border-radius: 12px;

    background: #126b68;
    color: #ffffff;

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

    white-space: nowrap;
    cursor: pointer;

    box-shadow: 0 8px 20px rgba(18, 107, 104, 0.18);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.medical-report-upload-form .admin-button-primary:hover {
    background: #0f5d5a;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(18, 107, 104, 0.23);
}


/* ---------------------------------------------------------
   REPORT HEADER / COUNT
   --------------------------------------------------------- */

.medical-report-panel:nth-of-type(2)
.medical-report-panel-header {
    align-items: center;
}

.medical-report-panel-header .admin-count {
    flex-shrink: 0;

    padding: 8px 14px;

    border: 1px solid #d5e8e6;
    border-radius: 30px;

    background: #edf7f5;
    color: #126b68;

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


/* ---------------------------------------------------------
   REPORT LIST
   --------------------------------------------------------- */

.medical-reports-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}


/* ---------------------------------------------------------
   INDIVIDUAL REPORT CARD
   --------------------------------------------------------- */

.medical-report-item {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 18px 20px;

    background: #fbfdfd;
    border: 1px solid #e4eeee;
    border-radius: 17px;

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

.medical-report-item:hover {
    transform: translateY(-2px);
    border-color: #cfe1df;
    box-shadow: 0 10px 28px rgba(20, 70, 70, 0.07);
}


/* ---------------------------------------------------------
   DOCUMENT ICON
   --------------------------------------------------------- */

.medical-report-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;

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

    background: linear-gradient(
        145deg,
        #edf8f6,
        #e1f1ef
    );

    border: 1px solid #d6eae7;
    border-radius: 15px;

    font-size: 23px;
}


/* ---------------------------------------------------------
   REPORT INFORMATION
   --------------------------------------------------------- */

.medical-report-info {
    min-width: 0;
    flex: 1;
}

.medical-report-info strong {
    display: block;

    margin-bottom: 6px;

    color: #17324d;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.medical-report-info span {
    color: #627676;
    font-size: 12px;
    line-height: 1.5;
}

.medical-report-info small {
    display: block;

    margin-top: 5px;

    color: #899696;
    font-size: 11px;
}


/* ---------------------------------------------------------
   REPORT ACTIONS
   --------------------------------------------------------- */

.medical-report-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    flex-shrink: 0;
}

.medical-report-actions form {
    margin: 0;
}


/* View / Download */

.medical-report-actions .admin-button-secondary {
    min-height: 42px;

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

    padding: 0 16px;

    border: 1px solid #cfe1df;
    border-radius: 10px;

    background: #ffffff;
    color: #126b68;

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

    text-decoration: none;

    transition: all 0.25s ease;
}

.medical-report-actions .admin-button-secondary:hover {
    background: #edf7f5;
    border-color: #126b68;
    transform: translateY(-1px);
}


/* Delete */

.medical-report-actions .admin-action-danger {
    min-height: 42px;

    padding: 0 15px;

    border: 1px solid #ead4d4;
    border-radius: 10px;

    background: #fffafa;
    color: #b44d4d;

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

    cursor: pointer;

    transition: all 0.25s ease;
}

.medical-report-actions .admin-action-danger:hover {
    background: #fff0f0;
    border-color: #d88c8c;
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

.medical-report-panel .admin-empty-state {
    padding: 45px 25px;

    border: 1px dashed #d3e2e1;
    border-radius: 17px;

    background: #f8fbfb;

    text-align: center;
}

.medical-report-panel .admin-empty-state h3 {
    margin: 0 0 8px;
    color: #17324d;
    font-size: 18px;
}

.medical-report-panel .admin-empty-state p {
    margin: 0;
    color: #788888;
    font-size: 13px;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .medical-report-upload-form {
        grid-template-columns: 1fr;
    }

    .medical-report-upload-form .admin-button-primary {
        width: 100%;
    }

    .medical-report-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .medical-report-info {
        flex: 1 1 calc(100% - 75px);
    }

    .medical-report-actions {
        width: 100%;
        padding-left: 72px;
        justify-content: flex-start;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .dashboard-main {
        padding: 30px 0 70px;
    }

    .medical-report-panel {
        padding: 22px 18px;
        border-radius: 21px;
        margin-bottom: 20px;
    }

    .medical-report-panel-header {
        margin-bottom: 21px;
    }

    .medical-report-panel-header h2 {
        font-size: 23px;
    }

    .medical-report-upload-form {
        padding: 17px;
        gap: 17px;
        border-radius: 15px;
    }

    .medical-report-item {
        gap: 13px;
        padding: 16px;
    }

    .medical-report-icon {
        width: 47px;
        height: 47px;
        flex-basis: 47px;
        border-radius: 13px;
    }

    .medical-report-info {
        flex-basis: calc(100% - 60px);
    }

    .medical-report-actions {
        padding-left: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .medical-report-actions .admin-button-secondary,
    .medical-report-actions .admin-action-danger {
        width: 100%;
        box-sizing: border-box;
        min-height: 44px;
    }

    .medical-report-panel-header .admin-count {
        font-size: 11px;
        padding: 7px 11px;
    }
}


/* ---------------------------------------------------------
   SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .medical-report-panel {
        padding: 19px 15px;
    }

    .medical-report-panel-header {
        display: block;
    }

    .medical-report-panel-header .admin-count {
        display: inline-flex;
        margin-top: 12px;
    }

    .medical-report-actions {
        grid-template-columns: 1fr;
    }

    .medical-report-info strong {
        font-size: 14px;
    }
}







/* =========================================================
   MEDICAL REPORTS HERO
   ========================================================= */

.dashboard-header1 {
    position: relative;
    overflow: hidden;

    padding: 58px 0 62px;

    

    border-bottom-left-radius: 42px;
    border-bottom-right-radius: 42px;

    box-shadow: 0 15px 40px rgba(16, 47, 63, 0.16);
}

.dashboard-header1 .section-label {
    color: #0ffbff;
}

.dashboard-header1 h1 {
    margin-top: 3px;

    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #a5cdf5;
}

.dashboard-header1 p {
    margin-top: 10px;

    font-size: 35px;

    color: #99a2a8;
}
   
.dashboard-header {
    position: relative;
    overflow: hidden;

    padding: 58px 0 62px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(83, 178, 171, 0.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #102f3f 0%,
            #173b4d 55%,
            #155b5b 100%
        );

    border-bottom-left-radius: 42px;
    border-bottom-right-radius: 42px;

    box-shadow: 0 15px 40px rgba(16, 47, 63, 0.16);
}


/* Decorative background shape */

.dashboard-header::before {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    right: -100px;
    top: -150px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.055);
}


/* Second decorative shape */

.dashboard-header::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -80px;
    bottom: -110px;

    border-radius: 50%;

    background: rgba(93, 203, 194, 0.07);
}


.dashboard-header-inner {
    position: relative;
    z-index: 2;

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

    gap: 40px;
}


/* ---------------------------------------------------------
   HERO TEXT
   --------------------------------------------------------- */

.dashboard-header .dashboard-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 13px;

    padding: 7px 13px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 30px;

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

    color: #9edbd6;

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

    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.dashboard-header .dashboard-title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(38px, 4.5vw, 58px);
    line-height: 1.05;

    letter-spacing: -1.8px;
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

.dashboard-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 9px;

    padding: 7px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;

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

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

    flex-shrink: 0;
}


.dashboard-header .dashboard-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 17px;

    border-radius: 11px;

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

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

    text-decoration: none;

    transition: all 0.25s ease;
}


.dashboard-header .dashboard-nav-link:hover {
    background: rgba(255, 255, 255, 0.11);

    color: #ffffff;

    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   LOGOUT
   --------------------------------------------------------- */

.dashboard-header .dashboard-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 18px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 11px;

    background: #ffffff;

    color: #126b68;

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

    text-decoration: none;

    transition: all 0.25s ease;
}


.dashboard-header .dashboard-logout:hover {
    background: #e9f7f5;

    transform: translateY(-1px);

    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.12);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 850px) {

    .dashboard-header {
        padding: 42px 0 46px;

        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }

    .dashboard-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

    .dashboard-header-actions {
        width: 100%;
        justify-content: flex-start;
        box-sizing: border-box;
        overflow-x: auto;
    }

}


@media (max-width: 600px) {

    .dashboard-header {
        padding: 34px 0 38px;
    }

    .dashboard-header .dashboard-title {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .dashboard-header .dashboard-eyebrow {
        margin-bottom: 10px;
        font-size: 10px;
    }

    .dashboard-header-actions {
        gap: 5px;
        padding: 6px;
        border-radius: 14px;
    }

    .dashboard-header .dashboard-nav-link,
    .dashboard-header .dashboard-logout {
        min-height: 40px;
        padding: 0 12px;
        font-size: 11px;
        white-space: nowrap;
    }

}









/* =========================================================
   PATIENT PRESCRIPTIONS - POLISHED UI
   ========================================================= */

.prescriptions-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;
    padding: 5px 2px;
}

.prescriptions-page-header h2 {
    margin: 8px 0 8px;

    color: #17324d;

    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.15;

    letter-spacing: -0.8px;
}

.prescriptions-page-header p {
    max-width: 650px;

    margin: 0;

    color: #71808d;

    font-size: 14px;
    line-height: 1.7;
}

.prescriptions-page-header .admin-count {
    flex-shrink: 0;

    padding: 9px 15px;

    border: 1px solid #d5e8e6;
    border-radius: 30px;

    background: #edf7f5;
    color: #126b68;

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


/* ---------------------------------------------------------
   PRESCRIPTION LIST
   --------------------------------------------------------- */

.patient-prescription-list {
    display: flex;
    flex-direction: column;

    gap: 22px;
}


/* ---------------------------------------------------------
   PRESCRIPTION CARD
   --------------------------------------------------------- */

.patient-prescription-card {
    position: relative;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e0ecea;
    border-radius: 24px;

    box-shadow: 0 12px 35px rgba(20, 70, 70, 0.055);

    overflow: hidden;

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

.patient-prescription-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #126b68,
        #43a7a0,
        #a3d9d4
    );
}

.patient-prescription-card:hover {
    transform: translateY(-3px);

    border-color: #cfe2df;

    box-shadow:
        0 18px 42px rgba(20, 70, 70, 0.09);
}


/* ---------------------------------------------------------
   DOCTOR HEADER
   --------------------------------------------------------- */

.patient-prescription-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding-bottom: 23px;

    border-bottom: 1px solid #edf2f2;
}

.patient-prescription-doctor {
    display: flex;
    align-items: center;

    gap: 15px;

    min-width: 0;
}

.patient-prescription-doctor .admin-avatar {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

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

    border-radius: 17px;

    background: linear-gradient(
        145deg,
        #126b68,
        #2d8585
    );

    color: #ffffff;

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

    box-shadow:
        0 8px 18px rgba(18, 107, 104, 0.16);
}

.patient-prescription-doctor strong {
    display: block;

    margin-bottom: 4px;

    color: #17324d;

    font-size: 17px;
    font-weight: 750;
}

.patient-prescription-doctor span {
    display: block;

    color: #667985;

    font-size: 12px;
}

.patient-prescription-doctor small {
    display: inline-block;

    margin-top: 5px;

    padding: 4px 9px;

    border-radius: 20px;

    background: #edf7f5;

    color: #126b68;

    font-size: 10px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   PRESCRIBED DATE
   --------------------------------------------------------- */

.patient-prescription-date {
    min-width: 105px;

    text-align: right;
}

.patient-prescription-date span {
    display: block;

    margin-bottom: 5px;

    color: #8a9898;

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

    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.patient-prescription-date strong {
    color: #17324d;

    font-size: 13px;
}


/* ---------------------------------------------------------
   APPOINTMENT META
   --------------------------------------------------------- */

.patient-prescription-meta {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin-top: 22px;
}

.patient-prescription-meta > div {
    padding: 15px 17px;

    border: 1px solid #e3eeee;
    border-radius: 14px;

    background: #f8fbfb;
}

.patient-prescription-meta span {
    display: block;

    margin-bottom: 6px;

    color: #819090;

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

    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.patient-prescription-meta strong {
    color: #294646;

    font-size: 13px;
}


/* ---------------------------------------------------------
   PRESCRIPTION CONTENT
   --------------------------------------------------------- */

.patient-prescription-content {
    margin-top: 24px;

    padding: 22px;

    border-radius: 17px;

    background: #f5faf9;

    border: 1px solid #e1eeec;
}

.patient-prescription-content h3 {
    margin: 0 0 12px;

    color: #17324d;

    font-size: 15px;
    font-weight: 750;
}

.prescription-text {
    color: #506666;

    font-size: 13px;
    line-height: 1.85;

    white-space: normal;
}


/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

.patient-prescription-card
.admin-empty-state {
    text-align: center;
}














.nav-dropdown {
    position: relative;
}

/* Resources button */
.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;

    background: none;
    border: none;
    padding: 0;

    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: inherit;

    cursor: pointer;
}

/* Arrow */
.nav-dropdown-toggle::after {
    content: "▾";
    font-size: 13px;
    transition: transform 0.25s ease;
}

/* Dropdown */
.resources-dropdown {
    position: absolute;

    /* Keep it very close to Resources */
    top: calc(100% + 6px);
    left: 50%;

    transform: translateX(-50%) translateY(8px);

    width: 180px;
    padding: 8px;

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

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    z-index: 9999;
}

/*
   Invisible hover bridge.

   This fills the tiny gap between Resources
   and the dropdown so the dropdown doesn't
   disappear while moving the mouse downward.
*/
.resources-dropdown::before {
    content: "";
    position: absolute;

    top: -12px;
    left: 0;

    width: 100%;
    height: 12px;

    background: transparent;
}

/* Dropdown links */
.resources-dropdown a {
    display: block;

    width: 100%;
    box-sizing: border-box;

    padding: 12px 14px;

    color: #263238;
    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    border-radius: 9px;

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

/* Link hover */
.resources-dropdown a:hover {
    background: #e8f4f3;
    color: #277f7a;
}

/* Show dropdown */
.nav-dropdown:hover .resources-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(-50%) translateY(0);
}

/* Rotate arrow */
.nav-dropdown:hover .nav-dropdown-toggle::after {
    transform: rotate(180deg);
}

}




/* Mobile-only About and Contact */
.mobile-resource-link {
    display: none;
}












/* =========================================================
   MOBILE RESOURCES — FINAL FIX
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Remove the extra Resources button */
    .site-header .nav-dropdown .nav-dropdown-toggle {
        display: none !important;
    }

    /* Make the Resources dropdown itself a normal menu item */
    .site-header .nav-dropdown .resources-dropdown {
        display: block !important;

        position: static !important;

        width: 100% !important;
        height: auto !important;

        padding: 0 !important;
        margin: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: none !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Only show the Resources link */
    .site-header .nav-dropdown .resources-dropdown a {
        display: none !important;
    }

    .site-header .nav-dropdown .resources-dropdown a:first-child {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 50px !important;

        padding: 0 24px !important;
        margin: 0 !important;

        box-sizing: border-box !important;

        color: #263238 !important;

        font-size: 16px !important;
        font-weight: 600 !important;

        border-bottom: 1px solid #101212 !important;
        border-radius: 0 !important;

        background: transparent !important;
    }

    /* Remove dropdown hover behaviour on mobile */
    .site-header .nav-dropdown:hover .resources-dropdown {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .site-header .nav-dropdown .resources-dropdown::before {
        display: none !important;
        content: none !important;
    }

}



/* Hospital map replacing the urgent-care image */

.urgent-care-map {
    width: 100%;
    height: 330px;
    margin-top: 25px;
    border-radius: 20px;
    overflow: hidden;
}

.urgent-care-map iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;

    filter: invert(90%) hue-rotate(180deg) brightness(80%) contrast(90%);
}





/* =========================================================
   DASHBOARD HERO — DESKTOP NAVBAR CLEARANCE
   ========================================================= */

@media only screen and (min-width: 851px) {

    .dashboard-header {
        padding-top: 105px !important;
        padding-bottom: 15px !important;
    }

}




/* =========================================================
   APPOINTMENT LOGIN MODAL
   ========================================================= */

.appointment-login-modal {
    position: fixed;
    inset: 0;

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

    padding: 20px;

    background: rgba(10, 25, 30, 0.65);

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

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

    z-index: 99999;
}


.appointment-login-modal.active {
    opacity: 1;
    visibility: visible;
}


.appointment-login-box {
    position: relative;

    width: min(440px, 100%);

    padding: 42px 35px;

    background: #ffffff;

    border-radius: 24px;

    text-align: center;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.25);

    transform: translateY(20px) scale(0.96);

    transition:
        transform 0.25s ease;
}


.appointment-login-modal.active
.appointment-login-box {
    transform: translateY(0) scale(1);
}


.appointment-login-close {
    position: absolute;

    top: 15px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #f1f4f4;

    color: #102e2d;

    font-size: 25px;

    cursor: pointer;

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


.appointment-login-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 22px;

    border-radius: 50%;

    background: #eef7f6;

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

    font-size: 30px;
}


.appointment-login-box h3 {
    margin: 0 0 12px;

    color: #102e2d;

    font-size: 25px;
    line-height: 1.3;
}


.appointment-login-box p {
    margin: 0 auto 25px;

    max-width: 350px;

    color: #667575;

    font-size: 15px;
    line-height: 1.7;
}


.appointment-login-button,
.appointment-create-button {
    display: block;

    width: 100%;

    padding: 14px 20px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 600;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.appointment-login-button {
    background: #102e2d;
    color: #ffffff;
}


.appointment-create-button {
    margin-top: 10px;

    background: #eef3f2;
    color: #102e2d;
}


.appointment-login-button:hover,
.appointment-create-button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}


body.appointment-modal-open {
    overflow: hidden;
}