:root{
    --blue:#0759b8;
    --blue-dark:#063b7d;
    --cyan:#15b7d6;
    --soft:#eef8ff;
    --ink:#12243a;
    --muted:#61738a;
    --line:#dbe8f6;
    --white:#fff;
    --shadow:0 18px 55px rgba(5,48,95,.13);
    --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.65}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 32px));margin-inline:auto}
.top-strip{background:linear-gradient(90deg,var(--blue-dark),var(--blue));color:#fff;font-size:14px}
.top-strip__inner{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:8px 0}
.top-strip__links{display:flex;gap:16px;flex-wrap:wrap}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(219,232,246,.85)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:82px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);min-width:0}
.brand__logo{width:68px;height:68px;border-radius:18px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;box-shadow:0 12px 30px rgba(7,89,184,.16);flex:0 0 auto}
.brand__logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.brand__logo--footer{border-color:rgba(255,255,255,.22);box-shadow:none}
.brand__text{min-width:0}
.brand strong{display:block;font-size:21px;line-height:1.1}
.brand small{display:block;color:var(--muted);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.primary-nav{display:flex;align-items:center;gap:6px}
.primary-nav a{padding:10px 12px;border-radius:999px;color:#26384d;font-weight:750;font-size:15px;transition:.2s ease}
.primary-nav a:hover{color:var(--blue);background:#eef8ff}
.primary-nav .nav-cta{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;margin-left:6px;padding:11px 18px;box-shadow:0 10px 25px rgba(7,89,184,.24)}
.primary-nav .nav-cta:hover{color:#fff;background:linear-gradient(135deg,var(--blue-dark),var(--blue))}
.menu-toggle{display:none;border:0;border-radius:12px;background:var(--blue);color:#fff;padding:10px 14px;font-weight:800}
.page-hero{position:relative;isolation:isolate;background:linear-gradient(135deg,rgba(4,55,114,.94),rgba(7,89,184,.72)),var(--hero-bg,linear-gradient(135deg,#e7f7ff,#fff));background-size:cover;background-position:center;overflow:hidden;color:#fff}
.page-hero:after{content:"";position:absolute;right:-130px;bottom:-190px;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.12);z-index:-1}
.page-hero__inner{min-height:370px;display:grid;align-content:center;padding:70px 0}
.home-hero .page-hero__inner{min-height:560px;max-width:980px;margin-left:auto;margin-right:auto;text-align:center}
.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:#c7f6ff;text-transform:uppercase;font-weight:900;letter-spacing:.12em;font-size:12px}
.section-kicker{color:var(--blue)}
.page-hero h1{font-size:clamp(36px,6vw,68px);line-height:1.02;margin:14px 0 18px;max-width:980px}
.page-hero p{font-size:clamp(17px,2.3vw,22px);max-width:820px;margin:0 0 24px;color:#e6f8ff}
.home-hero p{margin-inline:auto}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.home-hero .hero-actions{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:13px 20px;font-weight:900;cursor:pointer;transition:.2s ease}
.btn-primary{background:linear-gradient(135deg,var(--cyan),#6ee7ff);color:#06243f;box-shadow:0 14px 34px rgba(21,183,214,.28)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--blue)}
.btn-full{width:100%}
.intro-panel{display:grid;grid-template-columns:1.4fr .75fr;gap:28px;align-items:center;margin-top:-58px;position:relative;z-index:3;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.intro-panel h2,.section-head h2,.split-section h2,.cta-band h2{font-size:clamp(28px,4vw,44px);line-height:1.12;margin:8px 0 12px;color:var(--ink)}
.intro-panel p,.section-head p,.split-section p{color:var(--muted);margin:0}
.stats-card{background:linear-gradient(135deg,#eef8ff,#fff);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:4px}
.stats-card strong{font-size:24px;color:var(--blue)}
.stats-card span{color:var(--muted);margin-bottom:10px}
.section{padding:20px 0}
.section-soft{background:linear-gradient(180deg,#f4fbff,#fff)}
.section-head{text-align:center;max-width:760px;margin:0 auto 34px}
.section-head--left{text-align:left;margin-left:0}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 12px 35px rgba(5,48,95,.08);transition:.2s ease}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.service-icon{width:48px;height:48px;border-radius:16px;background:#eaf8ff;color:var(--blue);display:grid;place-items:center;font-size:28px;font-weight:900;margin-bottom:14px}
.service-card h3{font-size:22px;margin:0 0 8px}
.service-card p{color:var(--muted);margin:0 0 14px}
.service-card a{color:var(--blue);font-weight:900}
.split-section{display:grid;grid-template-columns:1fr .9fr;gap:34px;align-items:start;padding:20px 0}
.content-body h2,.content-body h3{line-height:1.22;color:var(--ink)}
.content-body p{color:#354b63}
.content-body ul{padding-left:20px}
.content-body li{margin:8px 0}
.feature-list{display:grid;gap:14px}
.feature-list div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 10px 28px rgba(5,48,95,.07)}
.feature-list strong{display:block;color:var(--blue);font-size:18px}
.feature-list span{color:var(--muted)}
.facility-visuals{display:grid;gap:16px}
.facility-photo{margin:0;position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 38px rgba(5,48,95,.1);background:#fff}
.facility-photo img{width:100%;height:230px;object-fit:cover}
.facility-photo--main img{height:320px}
.facility-photo figcaption{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,.92);border-radius:14px;padding:10px 12px;font-weight:900;color:var(--blue-dark);box-shadow:0 10px 24px rgba(5,48,95,.12)}
.feature-list--compact{grid-template-columns:repeat(2,1fr)}
.feature-list--compact div{padding:15px;box-shadow:0 8px 22px rgba(5,48,95,.06)}
.page-content-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;padding:60px 0}
.content-card,.side-card,.contact-card,.contact-info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:0 14px 38px rgba(5,48,95,.08)}
.side-card{position:sticky;top:112px;height:max-content;background:linear-gradient(180deg,#fff,#f4fbff)}
.side-phone{font-size:22px;font-weight:900;color:var(--blue);margin-bottom:0}
.gallery-wrap{padding:64px 0}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery-item{margin:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(5,48,95,.08)}
.gallery-item img{width:100%;height:250px;object-fit:cover}
.gallery-item figcaption{padding:16px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.gallery-item figcaption strong{display:block}
.gallery-item figcaption span{color:var(--muted);font-size:13px}
.contact-grid{display:grid;grid-template-columns:1fr .9fr;gap:28px;padding:64px 0}
.contact-form{display:grid;gap:16px}
.contact-form label{display:grid;gap:6px;font-weight:800;color:#27384c}
input,textarea,select{font:inherit;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;outline:none;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(7,89,184,.08)}
.alert{padding:14px 16px;border-radius:14px;margin-bottom:16px;font-weight:800}
.alert-success{background:#e9fbf2;color:#116b3b}.alert-error{background:#fff0f0;color:#a31919}
.map-box iframe{width:100%;height:300px;border:0;border-radius:18px}.map-placeholder{min-height:220px;border:1px dashed var(--line);border-radius:18px;background:#f7fbff;display:grid;place-items:center;color:var(--muted);text-align:center;padding:18px}
.site-footer{background:#071d36;color:#dcecff;padding:56px 0 0;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr .9fr;gap:32px}.brand--footer{color:#fff;margin-bottom:14px}.brand--footer small{color:#99c7f8}.site-footer h3{color:#fff;margin-top:0}.site-footer p{color:#b9cde3}.footer-link{display:block;color:#dcecff;margin:8px 0}.footer-link:hover{color:#8deeff}.footer-actions{display:flex;gap:10px;flex-wrap:wrap}.footer-actions a{border:1px solid rgba(255,255,255,.2);padding:9px 13px;border-radius:999px;color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding:18px 0;display:flex;justify-content:space-between;gap:20px;color:#97b2ce;font-size:14px}
.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:60;background:#25d366;color:#fff;font-weight:900;padding:13px 18px;border-radius:999px;box-shadow:0 12px 35px rgba(37,211,102,.35)}
@media(max-width:980px){.menu-toggle{display:inline-flex}.primary-nav{position:absolute;top:82px;left:16px;right:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;padding:12px;display:none;flex-direction:column;align-items:stretch}.primary-nav.is-open{display:flex}.primary-nav a{border-radius:12px}.intro-panel,.split-section,.page-content-wrap,.contact-grid,.cta-band__inner{grid-template-columns:1fr}.service-grid,.gallery-grid,.footer-grid,.feature-list--compact{grid-template-columns:repeat(2,1fr)}.side-card{position:static}.top-strip__inner{flex-direction:column;align-items:flex-start;gap:4px}.cta-band__inner{display:grid}}
@media(max-width:640px){.container{width:min(100% - 22px,1180px)}.nav-wrap{min-height:72px}.brand__logo{width:54px;height:54px;border-radius:14px}.brand strong{font-size:17px}.brand small{font-size:10px}.primary-nav{top:72px}.page-hero__inner,.home-hero .page-hero__inner{min-height:430px;padding:48px 0}.intro-panel{margin-top:-32px;padding:22px}.service-grid,.gallery-grid,.footer-grid,.feature-list--compact{grid-template-columns:1fr}.contact-card,.contact-info-card,.content-card,.side-card{padding:22px}.footer-bottom{flex-direction:column}.gallery-item img{height:220px}.facility-photo img,.facility-photo--main img{height:230px}
}

/* =========================================================
   Vishal Eye Hospital - Header / Menu Clean Final
   Replace all old header overrides with this block.
========================================================= */

/* Top strip */
.top-strip {
    background: linear-gradient(90deg, var(--blue-dark), var(--blue));
    color: #fff;
    font-size: 14px;
    position: relative;
    z-index: 1001;
}

.top-strip__inner {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 8px 0;
}

.top-strip__links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.top-strip a {
    color: #fff;
    font-weight: 700;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(219, 232, 246, 0.9);
    box-shadow: 0 2px 18px rgba(15, 57, 104, 0.06);
}

.nav-wrap {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
}

/* Brand */
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink);
    text-decoration: none;
    min-width: 0;
    flex: 0 0 auto;
}

.brand__logo {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(7, 89, 184, 0.16);
    flex: 0 0 auto;
}

.brand__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
}

.brand__text {
    min-width: 0;
}

.brand__text strong,
.brand strong {
    display: block;
    color: #1e2d40;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.45px;
}

.brand__text small,
.brand small {
    display: block;
    margin-top: 6px;
    color: #66738a;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.3px;
    line-height: 1.35;
    text-transform: uppercase;
}

/* Main navigation */
.main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
}

.main-nav > a,
.menu-dropdown-title {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: #243246 !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    padding: 22px 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.menu-dropdown-title span {
    font-size: 12px;
    line-height: 1;
    margin-top: 2px;
}

.main-nav > a::after,
.menu-dropdown-title::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 13px;
    height: 3px;
    background: #17a7d6;
    border-radius: 20px;
    transform: scaleX(0);
    transition: transform 0.22s ease;
}

.main-nav > a:hover::after,
.main-nav > a.active::after,
.menu-dropdown:hover .menu-dropdown-title::after,
.menu-dropdown.active .menu-dropdown-title::after {
    transform: scaleX(1);
}

/* Dropdown */
.menu-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
}

.menu-dropdown-box {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    min-width: 230px;
    padding: 10px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 47, 83, 0.18);
    transform: translateX(-50%) translateY(12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 99999;
    transition: all 0.22s ease;
}

.menu-dropdown:hover .menu-dropdown-box,
.menu-dropdown:focus-within .menu-dropdown-box {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.menu-dropdown-box a {
    display: block !important;
    color: #243246 !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    text-decoration: none !important;
    padding: 12px 14px !important;
    border-radius: 10px;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.menu-dropdown-box a:hover,
.menu-dropdown-box a.active {
    background: #eef8fd;
    color: #0b78b6 !important;
}

/* CTA */
.header-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 178px;
    min-height: 60px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #0759b5, #19b9d2);
    color: #fff !important;
    border-radius: 35px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.18;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(10, 104, 181, 0.18);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(10, 104, 181, 0.26);
}

/* Mobile hamburger */
.menu-toggle {
    display: none !important;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent !important;
    padding: 0;
    cursor: pointer;
    z-index: 1002;
    border-radius: 12px;
}

.menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: #12365c;
    border-radius: 20px;
    margin: 4px auto;
    transition: 0.22s ease;
}

.menu-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Tablet */
@media (max-width: 1199px) {
    .nav-wrap {
        gap: 18px;
    }

    .main-nav {
        gap: 20px !important;
    }

    .brand__text strong,
    .brand strong {
        font-size: 24px;
    }

    .brand__text small,
    .brand small {
        font-size: 12px;
    }

    .main-nav > a,
    .menu-dropdown-title {
        font-size: 15px !important;
    }

    .header-cta {
        width: 150px;
        min-height: 56px;
        font-size: 15px;
    }
}

/* Keep desktop nav visible from tablet upward */
@media (min-width: 768px) {
    .menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
    }
}

/* Mobile header fixed */
@media (max-width: 767px) {
    .top-strip {
        font-size: 14px;
    }

    .top-strip__inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
        padding: 10px 0;
    }

    .top-strip__links {
        gap: 16px;
    }

    .site-header {
        top: 0;
        background: #ffffff;
    }

    .nav-wrap {
        min-height: auto;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 10px;
        padding: 12px 0;
    }

    .brand {
        grid-column: 1;
        gap: 10px;
        min-width: 0;
        overflow: hidden;
    }

    .brand__logo {
        width: 58px;
        height: 58px;
        border-radius: 16px;
    }

    .brand__text strong,
    .brand strong {
        font-size: 22px;
        line-height: 1.05;
        letter-spacing: -0.35px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .brand__text small,
    .brand small {
        margin-top: 5px;
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 1.25;
        white-space: nowrap;
    }

    .header-cta {
        grid-column: 2;
        width: auto !important;
        min-height: 44px !important;
        padding: 9px 14px !important;
        border-radius: 28px !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
        white-space: nowrap;
        box-shadow: 0 10px 24px rgba(10, 104, 181, 0.16);
    }

    .menu-toggle {
        grid-column: 3;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-left: 0;
    }

    .main-nav {
        grid-column: 1 / -1;
        display: none !important;
        width: 100%;
        flex: 0 0 100%;
        order: initial;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        margin-top: 8px;
        padding: 8px 0;
        background: #ffffff;
        border-top: 1px solid #e6eef6;
        box-shadow: 0 14px 28px rgba(5, 48, 95, 0.08);
    }

    .nav-wrap.menu-open .main-nav,
    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav > a,
    .menu-dropdown-title {
        display: block !important;
        width: 100%;
        padding: 14px 16px !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
        color: #243246 !important;
        border-radius: 0 !important;
    }

    .main-nav > a::after,
    .menu-dropdown-title::after {
        display: none !important;
    }

    .main-nav > a:hover,
    .main-nav > a.active,
    .menu-dropdown.active .menu-dropdown-title {
        background: #f6fbff !important;
        color: #0b78b6 !important;
    }

    .menu-dropdown {
        display: block !important;
        width: 100%;
    }

    .menu-dropdown-box {
        position: static !important;
        display: block !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        min-width: 100% !important;
        padding: 0 0 8px 22px !important;
        background: #f6fbff !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .menu-dropdown-box a {
        display: block !important;
        padding: 10px 14px !important;
        font-size: 15px !important;
        font-weight: 750 !important;
        color: #243246 !important;
    }
}

/* Very small phones */
@media (max-width: 420px) {
    .container {
        width: min(100% - 22px, 1180px);
    }

    .nav-wrap {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
    }

    .brand__logo {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .brand__text strong,
    .brand strong {
        font-size: 18px;
    }

    .brand__text small,
    .brand small {
        font-size: 9px;
        letter-spacing: 0.8px;
    }

    .header-cta {
        min-height: 40px !important;
        padding: 8px 11px !important;
        font-size: 12px !important;
    }

    .menu-toggle {
        width: 38px;
        height: 38px;
    }

    .menu-toggle span {
        width: 24px;
    }
}

/* Footer brand text fix */
.brand--footer .brand__text strong,
.brand--footer strong {
    color: #ffffff !important;
}

.brand--footer .brand__text small,
.brand--footer small {
    color: #99c7f8 !important;
}

.brand__logo--footer {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

/* WhatsApp floating button mobile safe */
@media (max-width: 767px) {
    .whatsapp-float {
        right: 14px;
        bottom: 14px;
        padding: 12px 16px;
        font-size: 14px;
        z-index: 900;
    }
}
/* ===============================
   Mobile CTA Inside Menu Fix
================================ */

.header-cta-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .header-cta-desktop {
        display: inline-flex !important;
    }

    .header-cta-mobile {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .header-cta-desktop {
        display: none !important;
    }

    .header-cta-mobile {
        display: inline-flex !important;
        width: calc(100% - 32px) !important;
        margin: 14px 16px 10px !important;
        min-height: 48px !important;
        justify-content: center !important;
        padding: 12px 18px !important;
        border-radius: 999px !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        color: #fff !important;
        background: linear-gradient(135deg, #0759b5, #19b9d2) !important;
        box-shadow: 0 12px 26px rgba(10, 104, 181, 0.22) !important;
    }

    .menu-toggle.is-active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}
/* ===============================
   Final Desktop/Mobile CTA Fix
================================ */

/* Desktop */
@media (min-width: 768px) {
    .main-nav > a.header-cta-mobile,
    .header-cta-mobile {
        display: none !important;
    }

    .header-cta-desktop {
        display: inline-flex !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .header-cta-desktop {
        display: none !important;
    }

    .main-nav > a.header-cta-mobile,
    .header-cta-mobile {
        display: inline-flex !important;
        width: calc(100% - 32px) !important;
        margin: 14px 16px 10px !important;
        min-height: 48px !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 12px 18px !important;
        border-radius: 999px !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        color: #fff !important;
        background: linear-gradient(135deg, #0759b5, #19b9d2) !important;
        box-shadow: 0 12px 26px rgba(10, 104, 181, 0.22) !important;
    }
}
.footer-grid {
    align-items: flex-start;
}

.footer-quick {
    min-width: 300px;
}

.footer-links--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px 28px;
}

.footer-links--two .footer-link {
    display: block;
    margin: 0;
    line-height: 1.35;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .footer-quick {
        min-width: 0;
    }

    .footer-links--two {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
        gap: 10px 22px;
    }
}

@media (max-width: 480px) {
    .footer-links--two {
        grid-template-columns: 1fr 1fr;
        gap: 10px 18px;
    }

    .footer-links--two .footer-link {
        white-space: normal;
    }
}
.home-faq {
    padding: 70px 0;
    background: #f7fbff;
}

.home-faq .section-heading {
    max-width: 760px;
    margin: 0 auto 34px;
    text-align: center;
}

.home-faq .section-heading span {
    display: inline-block;
    margin-bottom: 10px;
    color: #0b79bd;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 13px;
}

.home-faq .section-heading h2 {
    margin: 0 0 12px;
    color: #073763;
    font-size: clamp(28px, 4vw, 42px);
}

.home-faq .section-heading p {
    margin: 0;
    color: #5f7185;
    font-size: 16px;
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.faq-list details {
    background: #ffffff;
    border: 1px solid rgba(11, 121, 189, .14);
    border-radius: 18px;
    box-shadow: 0 14px 35px rgba(7, 55, 99, .07);
    overflow: hidden;
}

.faq-list summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 54px 20px 22px;
    position: relative;
    color: #073763;
    font-weight: 800;
    font-size: 17px;
}

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

.faq-list summary::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eaf6ff;
    color: #0b79bd;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 800;
}

.faq-list details[open] summary::after {
    content: "−";
    background: #0b79bd;
    color: #ffffff;
}

.faq-list p {
    margin: 0;
    padding: 0 22px 22px;
    color: #5f7185;
    line-height: 1.7;
}

/* Custom Location Page Template */
.location-template-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 28px;
    align-items: start;
    padding: 70px 0;
}
.location-template-main {
    min-width: 0;
}
.location-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}
.location-info-card,
.location-map-card,
.location-appointment-card,
.location-extra-content {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.location-info-card {
    padding: 20px;
}
.location-info-card strong {
    display: block;
    color: var(--blue);
    margin-bottom: 8px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.location-info-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}
.location-info-card a {
    font-weight: 900;
}
.location-map-card {
    overflow: hidden;
    min-height: 390px;
}
.location-map-card iframe {
    width: 100%;
    min-height: 390px;
    border: 0;
    display: block;
}
.location-extra-content {
    margin-top: 22px;
    padding: 26px;
}
.location-appointment-card {
    padding: 26px;
    position: sticky;
    top: 110px;
}
.location-appointment-card h2 {
    margin: 0 0 8px;
    color: var(--dark);
}
.location-appointment-card > p {
    color: var(--muted);
    margin: 0 0 18px;
}
@media (max-width: 1020px) {
    .location-template-wrap {
        grid-template-columns: 1fr;
    }
    .location-appointment-card {
        position: static;
    }
}
@media (max-width: 760px) {
    .location-template-wrap {
        padding: 44px 0;
    }
    .location-info-grid {
        grid-template-columns: 1fr;
    }
    .location-map-card,
    .location-map-card iframe {
        min-height: 300px;
    }
    .location-appointment-card,
    .location-extra-content {
        padding: 22px;
    }
}
.services-showcase .section-head {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

.services-layout {
    display: grid;
    grid-template-columns: 1.05fr 1.4fr;
    gap: 24px;
    align-items: stretch;
}

.service-feature-card {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.10);
}

.service-feature-card__image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.service-feature-card__content {
    padding: 28px;
}

.service-feature-card__content h3 {
    margin: 10px 0 12px;
    font-size: 30px;
    line-height: 1.15;
    color: #001f45;
}

.service-feature-card__content p {
    color: #415a7a;
    line-height: 1.75;
    margin-bottom: 22px;
}

.service-grid--compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.service-grid--compact .service-card {
    min-height: 210px;
}

@media (max-width: 900px) {
    .services-layout {
        grid-template-columns: 1fr;
    }

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

    .service-feature-card__image img {
        height: 230px;
    }
}
.appointment-highlight {
    padding: 20px 0;
    background: linear-gradient(180deg, #f7fcff 0%, #ffffff 100%);
}

.appointment-highlight__inner {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 34px;
    align-items: stretch;
}

.appointment-highlight__content {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 28px;
    padding: 42px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
}

.appointment-highlight__content h2 {
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.12;
    color: #002b5c;
    margin: 10px 0 18px;
}

.appointment-highlight__content p {
    max-width: 760px;
    color: #49637f;
    font-size: 17px;
    line-height: 1.8;
}

.appointment-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 28px;
}

.appointment-points div {
    background: #f0f9ff;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    padding: 18px;
}

.appointment-points strong {
    display: block;
    color: #00336f;
    margin-bottom: 8px;
    font-size: 16px;
}

.appointment-points span {
    display: block;
    color: #516b88;
    font-size: 14px;
    line-height: 1.6;
}

.appointment-card {
    background: linear-gradient(135deg, #003f8f, #0066c9);
    color: #fff;
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 24px 60px rgba(0, 70, 150, 0.20);
}

.appointment-card h3 {
    color: #fff;
    font-size: 28px;
    margin: 0 0 22px;
}

.time-row {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.22);
}

.time-row span {
    display: block;
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    margin-bottom: 5px;
}

.time-row strong {
    display: block;
    color: #fff;
    font-size: 17px;
}

.appointment-card .btn {
    margin-top: 26px;
    background: #42d2ea;
    color: #002442;
    border: 0;
}

.call-link {
    display: block;
    margin-top: 16px;
    color: #fff;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

@media (max-width: 900px) {
    .appointment-highlight {
        padding: 55px 0;
    }

    .appointment-highlight__inner {
        grid-template-columns: 1fr;
    }

    .appointment-points {
        grid-template-columns: 1fr;
    }

    .appointment-highlight__content {
        padding: 28px;
    }
}
.cta-band .section-kicker {
    color: #35c9f2;
}

.cta-band h2 {
    color: #fff;
    font-size: clamp(32px, 4vw, 58px);
    line-height: 1.1;
    margin: 10px 0 0;
    max-width: 900px;
}

.cta-band .btn {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 22px 34px;
    font-size: 18px;
    font-weight: 800;
}

@media (max-width: 768px) {
    .cta-band {
        padding: 48px 0;
    }

    .cta-band__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-band h2 {
        font-size: 34px;
    }
}
.cta-band {
    background: transparent;
    color: #fff;
    padding: 28px 0 35px;
    margin-top: 10px;
}

.cta-band__inner {
    background: linear-gradient(135deg, var(--blue-dark), var(--blue));
    border-radius: 28px;
    padding: 55px 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    box-shadow: 0 22px 55px rgba(0, 70, 150, 0.16);
}

.cta-band .section-kicker {
    color: #42d2ea;
}

.cta-band h2 {
    color: #fff;
    font-size: clamp(32px, 4vw, 58px);
    line-height: 1.12;
    margin: 12px 0 0;
    max-width: 850px;
}

.cta-band .btn {
    background: linear-gradient(135deg, #26c4dd, #67dff0);
    color: #002442;
    border: 0;
    border-radius: 999px;
    padding: 22px 38px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: none;
}

@media (max-width: 768px) {
    .cta-band {
        padding: 24px 0 28px;
        margin-top: 5px;
    }

    .cta-band__inner {
        padding: 36px 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-band h2 {
        font-size: 34px;
    }
}
.faq-direction-link {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 10px 18px;
    color: #ffffff;
    background: var(--blue, #1769aa);
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-direction-link:hover {
    color: #ffffff;
    opacity: 0.9;
    transform: translateY(-1px);
}
/* =========================================================
   VISHAL EYE HOSPITAL — ABOUT US PAGE
   ========================================================= */

.about-hero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 60px;
    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(59, 155, 230, 0.16),
            transparent 32%
        ),
        linear-gradient(180deg, #f5faff 0%, #ffffff 100%);
}

.about-hero::before {
    content: "";
    position: absolute;
    top: -130px;
    right: -100px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 75px solid rgba(20, 112, 184, 0.05);
}

.about-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 70px;
    align-items: center;
}

.about-hero__content {
    max-width: 820px;
}

.about-hero__content h1 {
    max-width: 800px;
    margin: 10px 0 24px;
    color: var(--blue-dark, #083f73);
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.06;
    letter-spacing: -2px;
}

.about-hero__content p {
    max-width: 780px;
    margin: 0 0 17px;
    color: #526273;
    font-size: 17px;
    line-height: 1.8;
}

.about-hero__content .about-hero__lead {
    color: #263b4f;
    font-size: 20px;
    line-height: 1.7;
}

.about-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.btn-light {
    color: var(--blue-dark, #083f73);
    background: #ffffff;
    border: 1px solid #d6e4ef;
}

.btn-light:hover {
    color: #ffffff;
    background: var(--blue-dark, #083f73);
    border-color: var(--blue-dark, #083f73);
}

.about-hero__experience {
    position: relative;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 45px 30px;
    border-radius: 30px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--blue-dark, #083f73),
            var(--blue, #1476b8)
        );
    box-shadow: 0 28px 70px rgba(8, 63, 115, 0.22);
}

.experience-circle {
    width: 245px;
    height: 245px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-align: center;
    background: rgba(255, 255, 255, 0.11);
    border: 2px solid rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 0 0 15px rgba(255, 255, 255, 0.04);
}

.experience-circle strong {
    display: block;
    font-size: 105px;
    line-height: 0.85;
    letter-spacing: -8px;
}

.experience-circle span {
    display: block;
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.experience-since {
    margin-top: 28px;
    text-align: center;
}

.experience-since span {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.experience-since strong {
    display: block;
    font-size: 30px;
}

.about-trust-strip {
    position: relative;
    z-index: 3;
    margin-top: -32px;
}

.about-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    border: 1px solid #e0eaf3;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 55px rgba(31, 68, 101, 0.11);
}

.trust-stat {
    position: relative;
    padding: 27px 22px;
    text-align: center;
}

.trust-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 25%;
    right: 0;
    width: 1px;
    height: 50%;
    background: #e2ebf2;
}

.trust-stat strong {
    display: block;
    margin-bottom: 5px;
    color: var(--blue-dark, #083f73);
    font-size: 21px;
}

.trust-stat span {
    display: block;
    color: #657381;
    font-size: 14px;
    line-height: 1.5;
}

.about-section {
    padding: 85px 0;
}

.about-two-column {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    gap: 75px;
    align-items: start;
}

.about-section__heading {
    position: sticky;
    top: 110px;
}

.about-section__heading h2 {
    margin: 10px 0 0;
    color: var(--blue-dark, #083f73);
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.14;
}

.about-section__content p {
    margin: 0 0 18px;
    color: #566575;
    font-size: 17px;
    line-height: 1.82;
}

.doctor-experience-note {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    padding: 25px 28px;
    border-left: 5px solid var(--blue, #1476b8);
    border-radius: 0 18px 18px 0;
    background: #f1f8fd;
}

.doctor-experience-note strong {
    margin-bottom: 5px;
    color: var(--blue-dark, #083f73);
    font-size: 20px;
}

.doctor-experience-note span {
    color: #627181;
    line-height: 1.6;
}

.section-heading--center {
    max-width: 830px;
    margin: 0 auto 44px;
    text-align: center;
}

.section-heading--center h2 {
    margin: 9px 0 16px;
    color: var(--blue-dark, #083f73);
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.16;
}

.section-heading--center p {
    max-width: 760px;
    margin: 0 auto;
    color: #5d6b79;
    font-size: 17px;
    line-height: 1.75;
}

.about-mission {
    background: #f7fafc;
}

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

.about-value-card {
    padding: 32px 27px;
    border: 1px solid #e1eaf1;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(33, 68, 99, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(33, 68, 99, 0.11);
}

.about-card-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 17px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--blue-dark, #083f73),
        var(--blue, #1476b8)
    );
    font-weight: 800;
}

.about-value-card h3 {
    margin: 0 0 12px;
    color: #173b58;
    font-size: 21px;
}

.about-value-card p {
    margin: 0;
    color: #637180;
    line-height: 1.7;
}

.eye-technology {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f9fd 100%
        );
}

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

.technology-card {
    position: relative;
    overflow: hidden;
    padding: 36px;
    border: 1px solid #dde8f1;
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 15px 38px rgba(34, 72, 105, 0.07);
}

.technology-card::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -55px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: rgba(20, 118, 184, 0.06);
}

.technology-card__label {
    display: inline-flex;
    margin-bottom: 19px;
    padding: 8px 13px;
    border-radius: 30px;
    color: var(--blue-dark, #083f73);
    background: #eaf5fc;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.technology-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    color: #153b59;
    font-size: 25px;
}

.technology-card p {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: #61707f;
    line-height: 1.72;
}

.why-choose-hospital {
    background: #ffffff;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 21px;
}

.why-choose-card {
    position: relative;
    min-height: 255px;
    padding: 29px 26px;
    border: 1px solid #dfe8ef;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 13px 35px rgba(35, 72, 104, 0.06);
}

.why-choose-card--featured {
    color: #ffffff;
    border-color: transparent;
    background:
        linear-gradient(
            145deg,
            var(--blue-dark, #083f73),
            var(--blue, #1476b8)
        );
}

.why-number {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 17px;
    color: var(--blue-dark, #083f73);
    background: #eaf5fc;
    font-size: 16px;
    font-weight: 800;
}

.why-choose-card--featured .why-number {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
}

.why-choose-card h3 {
    margin: 0 0 12px;
    color: #183d5a;
    font-size: 20px;
    line-height: 1.35;
}

.why-choose-card p {
    margin: 0;
    color: #657382;
    line-height: 1.68;
}

.why-choose-card--featured h3,
.why-choose-card--featured p {
    color: #ffffff;
}

.eye-services {
    background: #f7fafc;
}

.about-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
}

.about-service-card {
    padding: 31px 28px;
    border: 1px solid #e0e8ef;
    border-radius: 22px;
    background: #ffffff;
}

.about-service-card h3 {
    margin: 0 0 12px;
    color: #163c5b;
    font-size: 21px;
}

.about-service-card p {
    margin: 0;
    color: #637180;
    line-height: 1.7;
}

.care-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.care-process-card {
    position: relative;
    padding: 30px 23px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f3f9fd 0%, #ffffff 100%);
    border: 1px solid #dfeaf2;
}

.care-process-card span {
    display: block;
    margin-bottom: 16px;
    color: var(--blue, #1476b8);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.care-process-card h3 {
    margin: 0 0 12px;
    color: #193e5a;
    font-size: 20px;
}

.care-process-card p {
    margin: 0;
    color: #647381;
    line-height: 1.66;
}

.preventive-care {
    padding-top: 25px;
}

.preventive-care__box {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    padding: 48px;
    border-radius: 28px;
    background: #eff8fe;
    border: 1px solid #d8eaf6;
}

.preventive-care__box h2 {
    margin: 8px 0 0;
    color: var(--blue-dark, #083f73);
    font-size: clamp(31px, 4vw, 45px);
    line-height: 1.16;
}

.preventive-care__box p {
    margin: 0 0 15px;
    color: #596978;
    font-size: 16px;
    line-height: 1.78;
}

.about-faq {
    background: #ffffff;
}

.faq-list {
    max-width: 920px;
    margin: 0 auto;
}

.faq-list details {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid #dfe8ef;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(35, 70, 101, 0.04);
}

.faq-list summary {
    position: relative;
    padding: 22px 60px 22px 24px;
    color: #183b57;
    cursor: pointer;
    list-style: none;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.45;
}

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

.faq-list summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--blue, #1476b8);
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 500;
}

.faq-list details[open] summary::after {
    content: "−";
}

.faq-list details p {
    margin: 0;
    padding: 0 24px 23px;
    color: #647281;
    line-height: 1.75;
}

.about-final-cta {
    padding: 0 0 80px;
}

.about-final-cta__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 45px;
    padding: 52px;
    border-radius: 28px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 255, 255, 0.17),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--blue-dark, #083f73),
            var(--blue, #1476b8)
        );
    box-shadow: 0 24px 60px rgba(8, 63, 115, 0.2);
}

.about-final-cta__inner .section-kicker {
    color: #bee5ff;
}

.about-final-cta__inner h2 {
    max-width: 700px;
    margin: 8px 0 14px;
    color: #ffffff;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.14;
}

.about-final-cta__inner p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, 0.87);
    font-size: 16px;
    line-height: 1.72;
}

.about-final-cta__actions {
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-white {
    color: var(--blue-dark, #083f73);
    background: #ffffff;
    border: 1px solid #ffffff;
}

.btn-white:hover {
    color: #ffffff;
    background: transparent;
}

.btn-outline-white {
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.65);
}

.btn-outline-white:hover {
    color: var(--blue-dark, #083f73);
    background: #ffffff;
    border-color: #ffffff;
}


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

@media (max-width: 1100px) {
    .about-values-grid,
    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .care-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .about-hero {
        padding-top: 55px;
    }

    .about-hero__inner,
    .about-two-column,
    .preventive-care__box {
        grid-template-columns: 1fr;
    }

    .about-hero__experience {
        min-height: auto;
    }

    .about-section__heading {
        position: static;
    }

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

    .trust-stat:nth-child(2)::after {
        display: none;
    }

    .trust-stat:nth-child(-n+2) {
        border-bottom: 1px solid #e2ebf2;
    }

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

    .about-final-cta__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-final-cta__actions {
        min-width: 0;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 650px) {
    .about-hero {
        padding: 42px 0 50px;
    }

    .about-hero__inner {
        gap: 38px;
    }

    .about-hero__content h1 {
        font-size: 39px;
        letter-spacing: -1px;
    }

    .about-hero__content .about-hero__lead {
        font-size: 18px;
    }

    .about-hero__actions,
    .about-final-cta__actions {
        flex-direction: column;
    }

    .about-hero__actions .btn,
    .about-final-cta__actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .about-hero__experience {
        padding: 35px 20px;
        border-radius: 24px;
    }

    .experience-circle {
        width: 210px;
        height: 210px;
    }

    .experience-circle strong {
        font-size: 87px;
    }

    .about-trust-strip {
        margin-top: -20px;
    }

    .about-trust-grid {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .trust-stat {
        border-bottom: 1px solid #e2ebf2;
    }

    .trust-stat::after {
        display: none;
    }

    .trust-stat:last-child {
        border-bottom: 0;
    }

    .about-section {
        padding: 60px 0;
    }

    .about-two-column {
        gap: 30px;
    }

    .about-values-grid,
    .technology-grid,
    .why-choose-grid,
    .about-services-grid,
    .care-process-grid {
        grid-template-columns: 1fr;
    }

    .technology-card,
    .about-value-card,
    .why-choose-card,
    .about-service-card {
        padding: 27px 23px;
    }

    .preventive-care {
        padding-top: 10px;
    }

    .preventive-care__box {
        gap: 25px;
        padding: 30px 23px;
        border-radius: 22px;
    }

    .faq-list summary {
        padding: 20px 55px 20px 20px;
        font-size: 16px;
    }

    .faq-list details p {
        padding: 0 20px 21px;
    }

    .about-final-cta {
        padding-bottom: 55px;
    }

    .about-final-cta__inner {
        padding: 34px 23px;
        border-radius: 23px;
    }
}
.side-card__list {
    display: grid;
    gap: 11px;
    margin: 20px 0 25px;
    padding: 0;
    list-style: none;
}

.side-card__list li {
    position: relative;
    padding-left: 27px;
    color: #536273;
    font-size: 15px;
    line-height: 1.55;
}

.side-card__list li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--blue, #1476b8);
    font-size: 11px;
    font-weight: 800;
}

.side-card__call {
    display: block;
    margin-top: 15px;
    color: var(--blue-dark, #083f73);
    text-align: center;
    font-size: 15px;
    font-weight: 750;
    text-decoration: none;
}

.side-card__call:hover {
    color: var(--blue, #1476b8);
}
/* =========================================================
   ABOUT PAGE — CONTENT + SIDEBAR LAYOUT FIX
   Add at the end of style.css
   ========================================================= */

.page-content-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 32px;
    align-items: start;
    padding-top: 48px;
    padding-bottom: 80px;
}

/* Main white content box */
.page-content-wrap .content-card {
    min-width: 0;
    width: 100%;
    padding: clamp(26px, 3vw, 44px);
    border: 1px solid #e1ebf3;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(24, 67, 105, 0.08);
}

/* Fix nested containers inside CMS content */
.content-body .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Reduce oversized spacing inside the content card */
.content-body .about-section {
    padding: 60px 0;
}

.content-body .about-section:first-child {
    padding-top: 0;
}

.content-body .about-section:last-child {
    padding-bottom: 0;
}


/* =========================================================
   WHY CHOOSE US MAIN CARDS
   ========================================================= */

.content-body .why-choose-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.content-body .why-choose-card {
    min-width: 0;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid #dce8f1;
    border-radius: 24px;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 12px 32px rgba(24, 68, 106, 0.07);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.content-body .why-choose-card:hover {
    transform: translateY(-5px);
    border-color: rgba(18, 116, 184, 0.28);
    box-shadow: 0 20px 44px rgba(24, 68, 106, 0.12);
}

.content-body .why-number {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 18px;
    color: #084681;
    background: #e9f5fc;
    font-size: 18px;
    font-weight: 800;
}

.content-body .why-choose-card h3 {
    margin: 0 0 13px;
    color: #102f4d;
    font-size: 23px;
    line-height: 1.3;
}

.content-body .why-choose-card p {
    margin: 0;
    color: #5e6f7f;
    font-size: 16px;
    line-height: 1.72;
}


/* Featured 27-year card */
.content-body .why-choose-card--featured {
    grid-column: 1 / -1;
    min-height: auto;
    display: grid;
    grid-template-columns: 115px minmax(0, 1fr);
    column-gap: 28px;
    align-items: center;
    padding: 38px;
    border: 0;
    color: #fff;
    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(255, 255, 255, 0.18),
            transparent 34%
        ),
        linear-gradient(135deg, #063f7a 0%, #0872bf 100%);
    box-shadow: 0 20px 48px rgba(6, 72, 130, 0.2);
}

.content-body .why-choose-card--featured .why-number {
    grid-row: 1 / 3;
    width: 115px;
    height: 115px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 28px;
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
    font-size: 42px;
}

.content-body .why-choose-card--featured h3 {
    align-self: end;
    margin-bottom: 8px;
    color: #fff;
    font-size: clamp(26px, 3vw, 35px);
}

.content-body .why-choose-card--featured p {
    align-self: start;
    max-width: 720px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   WHY CHOOSE US SIDEBAR
   ========================================================= */

.page-content-wrap .side-card {
    position: sticky;
    top: 120px;
    overflow: hidden;
    padding: 34px 30px 30px;
    border: 1px solid #dceaf4;
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(34, 174, 212, 0.12),
            transparent 35%
        ),
        linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
    box-shadow: 0 20px 50px rgba(27, 70, 106, 0.11);
}

.page-content-wrap .side-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30px;
    width: 78px;
    height: 5px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, #0872bf, #1cb6cc);
}

.side-card .eyebrow {
    display: block;
    margin: 12px 0 25px;
    color: #0872bf;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.side-card h3 {
    margin: 0 0 17px;
    color: #102f4d;
    font-size: 27px;
    line-height: 1.28;
}

.side-card > p {
    margin: 0;
    color: #566a7c;
    font-size: 16px;
    line-height: 1.75;
}

.side-card__list {
    display: grid;
    gap: 13px;
    margin: 25px 0 28px;
    padding: 0;
    list-style: none;
}

.side-card__list li {
    position: relative;
    min-height: 25px;
    padding-left: 35px;
    color: #53687a;
    font-size: 15px;
    line-height: 1.55;
}

.side-card__list li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    left: 0;
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #096abc, #12a9c8);
    box-shadow: 0 5px 12px rgba(9, 106, 188, 0.22);
    font-size: 12px;
    font-weight: 900;
}

.side-card .btn-full {
    width: 100%;
    min-height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, #0870bd, #1bb4cb);
    box-shadow: 0 12px 25px rgba(7, 112, 189, 0.22);
    font-size: 15px;
    font-weight: 750;
}

.side-card .btn-full:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(7, 112, 189, 0.28);
}

.side-card__call {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    margin-top: 12px;
    border: 1px solid #cfe2ef;
    border-radius: 14px;
    color: #075a9b;
    background: #fff;
    font-size: 15px;
    font-weight: 750;
    text-decoration: none;
    transition: 0.25s ease;
}

.side-card__call:hover {
    color: #fff;
    background: #075a9b;
    border-color: #075a9b;
}


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

@media (max-width: 1100px) {
    .page-content-wrap {
        grid-template-columns: minmax(0, 1fr) 310px;
        gap: 24px;
    }

    .content-body .why-choose-grid {
        grid-template-columns: 1fr;
    }

    .content-body .why-choose-card--featured {
        grid-column: auto;
    }
}


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

@media (max-width: 850px) {
    .page-content-wrap {
        grid-template-columns: 1fr;
        padding-top: 30px;
        padding-bottom: 60px;
    }

    .page-content-wrap .side-card {
        position: static;
        top: auto;
    }

    .content-body .why-choose-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .content-body .why-choose-card--featured {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .page-content-wrap .content-card {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .content-body .about-section {
        padding: 45px 0;
    }

    .content-body .why-choose-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .content-body .why-choose-card {
        min-height: auto;
        padding: 25px 22px;
        border-radius: 20px;
    }

    .content-body .why-choose-card--featured {
        grid-column: auto;
        display: block;
        padding: 28px 23px;
    }

    .content-body .why-choose-card--featured .why-number {
        width: 82px;
        height: 82px;
        margin-bottom: 22px;
        border-radius: 22px;
        font-size: 32px;
    }

    .content-body .why-choose-card--featured h3 {
        font-size: 26px;
    }

    .page-content-wrap .side-card {
        padding: 31px 23px 24px;
        border-radius: 23px;
    }

    .side-card h3 {
        font-size: 24px;
    }
}
/* =========================================================
   VISHAL EYE HOSPITAL — ABOUT PAGE CONTENT
   Designed for the existing content-card + sidebar layout.
   Add this at the END of the main stylesheet.
   ========================================================= */

.content-body {
    overflow: hidden;
}

.content-body .veh-about-intro,
.content-body .veh-about-section,
.content-body .veh-preventive-box,
.content-body .veh-about-cta {
    box-sizing: border-box;
}

.veh-kicker {
    display: block;
    margin-bottom: 10px;
    color: #0871bb;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.veh-about-intro {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 34px;
    align-items: center;
    overflow: hidden;
    padding: clamp(30px, 5vw, 52px);
    border: 1px solid #dceaf4;
    border-radius: 26px;
    background:
        radial-gradient(circle at 95% 0%, rgba(17, 155, 207, .16), transparent 33%),
        linear-gradient(145deg, #f6fbff 0%, #ffffff 68%);
}

.veh-about-intro::after {
    content: "";
    position: absolute;
    top: -130px;
    right: -105px;
    width: 330px;
    height: 330px;
    border: 55px solid rgba(9, 108, 181, .045);
    border-radius: 50%;
    pointer-events: none;
}

.veh-about-intro__content,
.veh-experience-badge {
    position: relative;
    z-index: 1;
}

.veh-about-intro h2 {
    max-width: 680px;
    margin: 0 0 18px;
    color: #0b3f75;
    font-size: clamp(31px, 4vw, 48px);
    line-height: 1.12;
    letter-spacing: -.8px;
}

.veh-about-intro p {
    max-width: 730px;
    margin: 0 0 14px;
    color: #566b7e;
    font-size: 16px;
    line-height: 1.75;
}

.veh-about-intro .veh-lead {
    color: #29445e;
    font-size: 17px;
}

.veh-about-intro__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.veh-btn-secondary {
    color: #075997;
    background: #fff;
    border: 1px solid #cfe1ee;
}

.veh-btn-secondary:hover {
    color: #fff;
    background: #075997;
    border-color: #075997;
}

.veh-experience-badge {
    width: 178px;
    height: 178px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-self: end;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    background: linear-gradient(145deg, #074b8d, #0e89c5);
    box-shadow: 0 20px 42px rgba(7, 83, 143, .23);
}

.veh-experience-badge strong {
    display: block;
    font-size: 62px;
    line-height: .9;
    letter-spacing: -4px;
}

.veh-experience-badge span {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.veh-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 22px 0 0;
    overflow: hidden;
    border: 1px solid #dfeaf2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(25, 65, 99, .06);
}

.veh-trust-strip article {
    position: relative;
    padding: 24px 18px;
    text-align: center;
}

.veh-trust-strip article:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 24%;
    right: 0;
    width: 1px;
    height: 52%;
    background: #dfe9f0;
}

.veh-trust-strip strong {
    display: block;
    margin-bottom: 6px;
    color: #0b4380;
    font-size: 18px;
    line-height: 1.3;
}

.veh-trust-strip span {
    display: block;
    color: #667787;
    font-size: 13px;
    line-height: 1.5;
}

.veh-about-section {
    padding: 62px 0;
}

.veh-about-section + .veh-about-section {
    border-top: 1px solid #edf2f6;
}

.veh-section-heading {
    max-width: 700px;
    margin: 0 auto 32px;
    text-align: center;
}

.veh-section-heading--left {
    margin: 0;
    text-align: left;
}

.veh-section-heading h2 {
    margin: 0 0 13px;
    color: #0b3f75;
    font-size: clamp(28px, 3.3vw, 40px);
    line-height: 1.2;
    letter-spacing: -.5px;
}

.veh-section-heading p {
    margin: 0;
    color: #627382;
    font-size: 16px;
    line-height: 1.7;
}

.veh-doctor {
    display: grid;
    grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
    gap: 42px;
    align-items: start;
}

.veh-doctor__content p {
    margin: 0 0 16px;
    color: #576a7b;
    font-size: 16px;
    line-height: 1.78;
}

.veh-doctor-note {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 24px;
    padding: 22px 24px;
    border-left: 4px solid #0c80be;
    border-radius: 0 16px 16px 0;
    background: #eef8fd;
}

.veh-doctor-note strong {
    color: #0b416f;
    font-size: 17px;
}

.veh-doctor-note span {
    color: #607384;
    font-size: 14px;
    line-height: 1.6;
}

.veh-soft-section {
    margin-right: calc(clamp(26px, 3vw, 44px) * -1);
    margin-left: calc(clamp(26px, 3vw, 44px) * -1);
    padding-right: clamp(26px, 3vw, 44px);
    padding-left: clamp(26px, 3vw, 44px);
    background: #f6fafe;
}

.veh-card-grid,
.veh-benefit-grid,
.veh-service-grid,
.veh-process-grid {
    display: grid;
    gap: 20px;
}

.veh-card-grid--two,
.veh-benefit-grid,
.veh-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.veh-info-card,
.veh-tech-card,
.veh-service-grid article {
    min-width: 0;
    padding: 27px 25px;
    border: 1px solid #dce7ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 27px rgba(29, 70, 104, .055);
}

.veh-card-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, #07519a, #0d79bf);
    font-size: 15px;
    font-weight: 800;
}

.veh-info-card h3,
.veh-tech-card h3,
.veh-service-grid h3 {
    margin: 0 0 11px;
    color: #123d5e;
    font-size: 20px;
    line-height: 1.35;
}

.veh-info-card p,
.veh-tech-card p,
.veh-service-grid p {
    margin: 0 0 9px;
    color: #607283;
    font-size: 15px;
    line-height: 1.68;
}

.veh-tech-label {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #075b9d;
    background: #eaf6fc;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .7px;
}

.veh-benefit-grid article {
    min-width: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 24px;
    border: 1px solid #dce7ef;
    border-radius: 19px;
    background: #fff;
}

.veh-benefit-grid article > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #075a99;
    background: #e8f5fc;
    font-size: 14px;
    font-weight: 850;
}

.veh-benefit-grid h3 {
    margin: 1px 0 8px;
    color: #133d5e;
    font-size: 18px;
    line-height: 1.35;
}

.veh-benefit-grid p {
    margin: 0;
    color: #627383;
    font-size: 14px;
    line-height: 1.65;
}

.veh-service-grid article {
    position: relative;
    padding-top: 29px;
}

.veh-service-grid article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25px;
    width: 54px;
    height: 4px;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(90deg, #0874ba, #1cb0ca);
}

.veh-care-section {
    padding-bottom: 54px;
}

.veh-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.veh-process-grid article {
    min-width: 0;
    padding: 23px 21px;
    border: 1px solid #dce8f0;
    border-radius: 18px;
    background: linear-gradient(180deg, #f2f9fd 0%, #fff 100%);
}

.veh-process-grid article:nth-child(4),
.veh-process-grid article:nth-child(5) {
    grid-column: span 1;
}

.veh-process-grid article > span {
    display: block;
    margin-bottom: 12px;
    color: #0871b8;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.veh-process-grid h3 {
    margin: 0 0 9px;
    color: #123d5d;
    font-size: 18px;
}

.veh-process-grid p {
    margin: 0;
    color: #627485;
    font-size: 14px;
    line-height: 1.6;
}

.veh-preventive-box {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 32px;
    margin: 6px 0 62px;
    padding: 34px;
    border: 1px solid #d7e9f5;
    border-radius: 23px;
    background: #edf8fe;
}

.veh-preventive-box h2 {
    margin: 0;
    color: #0a4179;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.2;
}

.veh-preventive-box p {
    margin: 0 0 12px;
    color: #5b6f80;
    font-size: 15px;
    line-height: 1.72;
}

.veh-faq-section {
    padding-top: 0;
    border-top: 0 !important;
}

.veh-faq-list {
    display: grid;
    gap: 12px;
}

.veh-faq-list details {
    overflow: hidden;
    border: 1px solid #dce7ef;
    border-radius: 15px;
    background: #fff;
}

.veh-faq-list summary {
    position: relative;
    padding: 19px 55px 19px 20px;
    color: #133d5c;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.45;
}

.veh-faq-list summary::-webkit-details-marker {
    display: none;
}

.veh-faq-list summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #0874ba;
    transform: translateY(-50%);
    font-size: 18px;
}

.veh-faq-list details[open] summary::after {
    content: "−";
}

.veh-faq-list details p {
    margin: 0;
    padding: 0 20px 19px;
    color: #627484;
    font-size: 14px;
    line-height: 1.7;
}

.veh-about-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    padding: 35px;
    border-radius: 23px;
    color: #fff;
    background:
        radial-gradient(circle at 95% 0%, rgba(255, 255, 255, .17), transparent 34%),
        linear-gradient(135deg, #07457f, #118ec5);
}

.veh-about-cta .veh-kicker {
    color: #bcecff;
}

.veh-about-cta h2 {
    max-width: 570px;
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.2;
}

.veh-about-cta p {
    max-width: 610px;
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: 14px;
    line-height: 1.65;
}

.veh-about-cta__actions {
    min-width: 185px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.veh-btn-white {
    color: #07558f;
    background: #fff;
    border: 1px solid #fff;
}

.veh-btn-outline {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .58);
}

.veh-btn-white:hover {
    color: #fff;
    background: transparent;
}

.veh-btn-outline:hover {
    color: #07558f;
    background: #fff;
}


/* Sidebar wording and layout */
.page-content-wrap .side-card {
    position: sticky;
    top: 115px;
}

.page-content-wrap .side-card h3 {
    margin-bottom: 13px;
    font-size: 24px;
    line-height: 1.3;
}

.page-content-wrap .side-card > p {
    font-size: 15px;
    line-height: 1.7;
}


/* Tablet */
@media (max-width: 1050px) {
    .veh-about-intro {
        grid-template-columns: minmax(0, 1fr) 155px;
    }

    .veh-experience-badge {
        width: 150px;
        height: 150px;
    }

    .veh-experience-badge strong {
        font-size: 52px;
    }

    .veh-doctor {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .veh-section-heading--left {
        max-width: 680px;
    }

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

    .veh-process-grid article:last-child {
        grid-column: 1 / -1;
    }
}


/* Mobile */
@media (max-width: 700px) {
    .veh-about-intro {
        grid-template-columns: 1fr;
        padding: 28px 22px;
    }

    .veh-experience-badge {
        width: 145px;
        height: 145px;
        justify-self: start;
    }

    .veh-about-intro__actions {
        flex-direction: column;
    }

    .veh-about-intro__actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .veh-trust-strip,
    .veh-card-grid--two,
    .veh-benefit-grid,
    .veh-service-grid,
    .veh-process-grid,
    .veh-preventive-box {
        grid-template-columns: 1fr;
    }

    .veh-trust-strip article:not(:last-child)::after {
        top: auto;
        right: 12%;
        bottom: 0;
        left: 12%;
        width: 76%;
        height: 1px;
    }

    .veh-about-section {
        padding: 48px 0;
    }

    .veh-soft-section {
        margin-right: -18px;
        margin-left: -18px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .veh-section-heading {
        margin-bottom: 25px;
        text-align: left;
    }

    .veh-process-grid article:last-child {
        grid-column: auto;
    }

    .veh-preventive-box {
        gap: 18px;
        margin-bottom: 48px;
        padding: 25px 22px;
    }

    .veh-about-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 22px;
    }

    .veh-about-cta__actions {
        width: 100%;
    }

    .veh-about-cta__actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}
/* =========================================================
   IMPROVED ABOUT INTRO
   ========================================================= */

.veh-about-intro {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 245px;
    gap: 55px;
    align-items: center;
    overflow: hidden;
    padding: clamp(38px, 5vw, 64px);
    border: 1px solid #d8e8f3;
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 94% 5%,
            rgba(23, 164, 207, 0.15),
            transparent 31%
        ),
        linear-gradient(145deg, #f7fbff 0%, #ffffff 72%);
}

.veh-about-intro::after {
    content: "";
    position: absolute;
    top: -185px;
    right: -130px;
    width: 440px;
    height: 440px;
    border: 62px solid rgba(12, 107, 178, 0.045);
    border-radius: 50%;
    pointer-events: none;
}

.veh-about-intro__content,
.veh-about-intro__visual {
    position: relative;
    z-index: 2;
}

.veh-about-intro__content {
    max-width: 690px;
}

.veh-about-intro h2 {
    max-width: 660px;
    margin: 0 0 22px;
    color: #093f78;
    font-size: clamp(38px, 4.6vw, 57px);
    line-height: 1.07;
    letter-spacing: -1.5px;
}

.veh-about-intro p {
    max-width: 680px;
    margin: 0 0 15px;
    color: #576c7f;
    font-size: 16px;
    line-height: 1.78;
}

.veh-about-intro .veh-lead {
    color: #29445d;
    font-size: 18px;
    line-height: 1.72;
}

.veh-about-intro__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.veh-about-intro__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.veh-experience-badge {
    width: 205px;
    height: 205px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 8px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    background:
        linear-gradient(145deg, #07529a 0%, #1296c8 100%);
    box-shadow:
        0 24px 50px rgba(6, 78, 139, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.veh-experience-badge strong {
    display: block;
    font-size: 72px;
    line-height: 0.9;
    letter-spacing: -5px;
}

.veh-experience-badge span {
    display: block;
    max-width: 145px;
    margin-top: 15px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.veh-since-label {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d6e6f1;
    border-radius: 15px;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
}

.veh-since-label small {
    display: block;
    margin-bottom: 3px;
    color: #67798a;
    font-size: 12px;
}

.veh-since-label strong {
    display: block;
    color: #07518f;
    font-size: 18px;
}

.veh-btn-secondary {
    color: #075a98;
    background: #ffffff;
    border: 1px solid #cadeec;
}

.veh-btn-secondary:hover {
    color: #ffffff;
    background: #075a98;
    border-color: #075a98;
}


/* =========================================================
   IMPROVED DOCTOR JOURNEY
   ========================================================= */

.veh-about-section.veh-doctor {
    display: grid;
    grid-template-columns: minmax(245px, 0.72fr) minmax(0, 1.28fr);
    gap: 52px;
    align-items: stretch;
    padding: 62px 0;
}

.veh-doctor__profile {
    position: relative;
    overflow: hidden;
    padding: 34px 31px;
    border: 1px solid #d9e8f2;
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(23, 168, 207, 0.14),
            transparent 35%
        ),
        linear-gradient(160deg, #f2f9fe 0%, #ffffff 80%);
}

.veh-doctor__profile::after {
    content: "";
    position: absolute;
    right: -52px;
    bottom: -52px;
    width: 150px;
    height: 150px;
    border: 28px solid rgba(8, 102, 171, 0.05);
    border-radius: 50%;
}

.veh-doctor__profile h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: #0a417c;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -1px;
}

.veh-doctor__designation {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #5f7385;
    font-size: 16px;
    line-height: 1.6;
}

.veh-doctor__year {
    position: relative;
    z-index: 1;
    margin-top: 32px;
    padding-top: 25px;
    border-top: 1px solid #d8e6ef;
}

.veh-doctor__year span {
    display: block;
    margin-bottom: 5px;
    color: #65798a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.veh-doctor__year strong {
    display: block;
    color: #0870b8;
    font-size: 43px;
    line-height: 1;
}

.veh-doctor__content {
    padding: 5px 0;
}

.veh-doctor__content > h3 {
    margin: 0 0 20px;
    color: #123e61;
    font-size: clamp(25px, 3vw, 33px);
    line-height: 1.3;
}

.veh-doctor__content > p {
    margin: 0 0 17px;
    color: #586c7e;
    font-size: 16px;
    line-height: 1.78;
}

.veh-doctor-note {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 27px;
    padding: 23px 24px;
    border: 1px solid #d6e8f3;
    border-radius: 18px;
    background: #edf8fe;
}

.veh-doctor-note__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(145deg, #0768ad, #13a1c7);
    font-size: 18px;
    font-weight: 900;
}

.veh-doctor-note strong {
    display: block;
    margin-bottom: 6px;
    color: #0c416f;
    font-size: 17px;
    line-height: 1.45;
}

.veh-doctor-note p {
    margin: 0;
    color: #617587;
    font-size: 14px;
    line-height: 1.65;
}


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

@media (max-width: 1000px) {
    .veh-about-intro {
        grid-template-columns: minmax(0, 1fr) 190px;
        gap: 35px;
    }

    .veh-experience-badge {
        width: 175px;
        height: 175px;
    }

    .veh-experience-badge strong {
        font-size: 61px;
    }

    .veh-about-section.veh-doctor {
        grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
        gap: 35px;
    }
}

@media (max-width: 760px) {
    .veh-about-intro {
        grid-template-columns: 1fr;
        padding: 30px 23px;
    }

    .veh-about-intro__content {
        max-width: none;
    }

    .veh-about-intro h2 {
        font-size: 38px;
    }

    .veh-about-intro__visual {
        align-items: flex-start;
    }

    .veh-since-label {
        max-width: 205px;
    }

    .veh-about-section.veh-doctor {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .veh-doctor__profile {
        padding: 28px 24px;
    }
}

@media (max-width: 520px) {
    .veh-about-intro__actions {
        flex-direction: column;
    }

    .veh-about-intro__actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .veh-doctor-note {
        grid-template-columns: 1fr;
    }
}
/* Full-width heading in About introduction */

.veh-about-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    column-gap: 55px;
    row-gap: 35px;
    align-items: start;
}

.veh-about-intro__heading {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
}

.veh-about-intro__heading .veh-kicker {
    margin-bottom: 12px;
}

.veh-about-intro__heading h2 {
    width: 100%;
    max-width: 900px;
    margin: 0;
    color: #093f78;
    font-size: clamp(40px, 5vw, 62px);
    line-height: 1.08;
    letter-spacing: -1.5px;
}

.veh-about-intro__content {
    position: relative;
    z-index: 2;
    max-width: 680px;
}

.veh-about-intro__content p {
    max-width: 680px;
}

.veh-about-intro__visual {
    position: relative;
    z-index: 2;
    align-self: start;
    padding-top: 4px;
}

@media (max-width: 900px) {
    .veh-about-intro {
        grid-template-columns: minmax(0, 1fr) 210px;
        column-gap: 35px;
    }

    .veh-about-intro__heading h2 {
        font-size: clamp(38px, 6vw, 54px);
    }
}

@media (max-width: 700px) {
    .veh-about-intro {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }

    .veh-about-intro__heading {
        grid-column: auto;
    }

    .veh-about-intro__heading h2 {
        font-size: 38px;
    }

    .veh-about-intro__visual {
        align-items: flex-start;
    }
    
}
/* About introduction right-side actions */

.veh-about-intro__visual {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.veh-about-intro__visual .veh-about-intro__actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 2px;
}

.veh-about-intro__visual .veh-about-intro__actions .btn {
    width: 100%;
    min-height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 18px;
    padding-left: 18px;
    border-radius: 16px;
    text-align: center;
    white-space: nowrap;
}

.veh-about-intro__visual .veh-since-label {
    width: 100%;
    margin-bottom: 0;
}

/* Let left text use the available height naturally */
.veh-about-intro__content {
    align-self: start;
}

@media (max-width: 700px) {
    .veh-about-intro__visual {
        max-width: none;
        align-items: center;
    }

    .veh-about-intro__visual .veh-about-intro__actions {
        width: 100%;
    }

    .veh-about-intro__visual .veh-experience-badge {
        align-self: center;
    }

    .veh-about-intro__visual .veh-since-label {
        max-width: none;
    }
}
/* =========================================================
   DR. VISHAL KUMAR JOURNEY SECTION — FINAL FIX
   ========================================================= */

.veh-about-section.veh-doctor {
    display: grid;
    grid-template-columns: minmax(245px, 300px) minmax(0, 1fr);
    gap: 46px;
    align-items: start;
    padding: 65px 0;
}

/* Compact doctor profile card */
.veh-doctor__profile {
    position: relative;
    overflow: hidden;
    height: auto;
    min-height: 0;
    align-self: start;
    padding: 34px 30px;
    border: 1px solid #d9e8f2;
    border-radius: 25px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(30, 173, 214, 0.15),
            transparent 40%
        ),
        linear-gradient(155deg, #eff9fe 0%, #ffffff 82%);
    box-shadow: 0 15px 38px rgba(28, 72, 107, 0.07);
}

/* Remove the large bottom decorative circle */
.veh-doctor__profile::after {
    content: none;
}

.veh-doctor__profile .veh-kicker {
    margin-bottom: 19px;
    color: #0871bb;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.veh-doctor__profile h2 {
    margin: 0 0 14px;
    color: #0a417c;
    font-size: clamp(36px, 4vw, 49px);
    line-height: 1.05;
    letter-spacing: -1px;
}

.veh-doctor__designation {
    margin: 0;
    color: #566d7f;
    font-size: 16px;
    line-height: 1.65;
}

/* Year box */
.veh-doctor__year {
    margin-top: 28px;
    padding: 22px 20px;
    border: 1px solid #d5e7f2;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.85);
}

.veh-doctor__year span {
    display: block;
    margin-bottom: 7px;
    color: #687b8b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.veh-doctor__year strong {
    display: block;
    color: #0873bd;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -1px;
}


/* Right content */
.veh-doctor__content {
    min-width: 0;
    padding: 3px 0 0;
}

.veh-doctor__content > h3 {
    max-width: 680px;
    margin: 0 0 24px;
    color: #103f63;
    font-size: clamp(29px, 3.4vw, 42px);
    line-height: 1.18;
    letter-spacing: -0.7px;
}

.veh-doctor__content > p {
    margin: 0 0 18px;
    color: #586d7f;
    font-size: 16px;
    line-height: 1.78;
}


/* Patient-first highlight */
.veh-doctor-note {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 17px;
    align-items: start;
    margin-top: 28px;
    padding: 24px;
    border: 1px solid #d2e7f3;
    border-radius: 20px;
    background:
        linear-gradient(135deg, #edf8fe 0%, #f7fcff 100%);
}

.veh-doctor-note__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(145deg, #0770b6, #18a5c8);
    box-shadow: 0 8px 18px rgba(8, 121, 182, 0.2);
    font-size: 18px;
    font-weight: 900;
}

.veh-doctor-note strong {
    display: block;
    margin: 1px 0 7px;
    color: #0c416f;
    font-size: 18px;
    line-height: 1.4;
}

.veh-doctor-note p {
    margin: 0;
    color: #607486;
    font-size: 14px;
    line-height: 1.65;
}


/* Tablet */
@media (max-width: 900px) {
    .veh-about-section.veh-doctor {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 30px;
    }

    .veh-doctor__profile {
        padding: 28px 24px;
    }

    .veh-doctor__content > h3 {
        font-size: 31px;
    }
}


/* Mobile */
@media (max-width: 700px) {
    .veh-about-section.veh-doctor {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 50px 0;
    }

    .veh-doctor__profile {
        width: 100%;
        padding: 28px 24px;
    }

    .veh-doctor__profile h2 {
        font-size: 39px;
    }

    .veh-doctor__year {
        max-width: 230px;
    }

    .veh-doctor__content > h3 {
        font-size: 29px;
    }
}

@media (max-width: 480px) {
    .veh-doctor-note {
        grid-template-columns: 1fr;
    }
}
/* Patient-first box inside the left doctor profile */

.veh-doctor-note--profile {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #d2e7f3;
    border-radius: 17px;
    background: linear-gradient(135deg, #edf8fe 0%, #ffffff 100%);
}

.veh-doctor-note--profile .veh-doctor-note__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #ffffff;
    background: linear-gradient(145deg, #0770b6, #18a5c8);
    box-shadow: 0 7px 16px rgba(8, 121, 182, 0.18);
    font-size: 16px;
    font-weight: 900;
}

.veh-doctor-note--profile strong {
    display: block;
    margin: 0 0 6px;
    color: #0c416f;
    font-size: 16px;
    line-height: 1.4;
}

.veh-doctor-note--profile p {
    margin: 0;
    color: #607486;
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .veh-doctor-note--profile {
        grid-template-columns: 42px minmax(0, 1fr);
    }
}
/* =====================================================
   TREATMENT PAGE FAQ
   ===================================================== */

.treatment-faq {
    margin-top: 38px;
    padding: 34px;
    background: #f5fbff;
    border: 1px solid #dceff8;
    border-radius: 24px;
}

.treatment-faq .section-kicker {
    display: block;
    margin-bottom: 8px;
    color: #0785bd;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.treatment-faq > h3 {
    margin: 0 0 24px;
    color: #17243b;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.25;
}

.treatment-faq details {
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #dce7ee;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.treatment-faq details:last-child {
    margin-bottom: 0;
}

.treatment-faq details[open] {
    border-color: #68bcdc;
    box-shadow: 0 10px 25px rgba(20, 90, 125, .08);
}

.treatment-faq summary {
    position: relative;
    padding: 19px 55px 19px 20px;
    color: #1e2c43;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    cursor: pointer;
    list-style: none;
}

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

.treatment-faq summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    background: #e8f7fd;
    border-radius: 50%;
    color: #0785bd;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.treatment-faq details[open] summary::after {
    content: "−";
    background: #0785bd;
    color: #fff;
}

.treatment-faq details p {
    margin: 0;
    padding: 0 20px 20px;
    color: #536174;
    font-size: 16px;
    line-height: 1.75;
}

@media (max-width: 767px) {
    .treatment-faq {
        padding: 24px 16px;
        border-radius: 18px;
    }

    .treatment-faq summary {
        padding: 17px 50px 17px 16px;
        font-size: 16px;
    }

    .treatment-faq summary::after {
        right: 14px;
    }

    .treatment-faq details p {
        padding: 0 16px 18px;
        font-size: 15px;
    }
}
/* Contact form Turnstile and anti-spam protection */
.form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.turnstile-box {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid #cfe3f8;
    border-radius: 18px;
    background: linear-gradient(135deg, #f4fbff, #ffffff);
    overflow: hidden;
}

.turnstile-box__label {
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.turnstile-box .cf-turnstile {
    width: 100%;
    max-width: 100%;
    min-height: 65px;
}

.form-security-note {
    margin: -5px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.contact-form button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

@media (max-width: 400px) {
    .turnstile-box {
        padding: 14px;
    }
}