/* ── Design tokens ─────────────────────────────────────── */
:root {
    --up-navy: #0A2240;
    --up-blue: #1A3F6F;
    --up-mid-blue: #1E5FA8;
    --up-saffron: #E8650A;
    --up-amber: #F5A623;
    --up-gold: #D4A017;
    --up-cream: #FDF8F1;
    --up-light: #EEF4FB;
    --up-border: #C8D8EC;
    --up-text: #1A1A2E;
    --up-muted: #5A6A80;
    --font-hindi: 'Noto Serif Devanagari', serif;
    --font-body: 'Noto Sans', 'Inter', sans-serif;
    --radius: 10px;
    --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
    --shadow-md: 0 4px 20px rgba(10, 34, 64, .12);
}

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

body {
    font-family: var(--font-body);
    color: var(--up-text);
    background: #fff;
}

/* ── Utility strip ─────────────────────────────────────── */
.util-strip {
    background: var(--up-navy);
    color: rgba(255, 255, 255, .75);
    font-size: .78rem;
    padding: 5px 0;
    letter-spacing: .3px;
}

.util-strip a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.util-strip a:hover {
    color: var(--up-amber);
}

.util-strip .sep {
    margin: 0 10px;
    opacity: .35;
}

/* ── Header ────────────────────────────────────────────── */
.site-header {
    background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
    border-bottom: 4px solid var(--up-saffron);
    padding: 14px 0;
}

.header-emblem {
    width: 62px;
    height: 62px;
    background: radial-gradient(circle, var(--up-amber) 0%, var(--up-gold) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--up-navy);
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, .2);
    flex-shrink: 0;
}

.header-titles {
    line-height: 1.25;
}

.header-titles .hindi-title {
    font-family: var(--font-hindi);
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .5px;
}

.header-titles .eng-title {
    font-size: .82rem;
    color: rgba(255, 255, 255, .65);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 2px;
}

.header-right {
    text-align: right;
}

.header-right .helpline {
    background: var(--up-saffron);
    color: #fff;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: .78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}

.lang-btn {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: .75rem;
    cursor: pointer;
    transition: background .2s;
}

.lang-btn:hover,
.lang-btn.active {
    background: var(--up-mid-blue);
}

/* ── Navigation ────────────────────────────────────────── */
.main-nav {
    background: var(--up-mid-blue);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
}

.main-nav .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .88) !important;
    font-size: .85rem;
    font-weight: 500;
    padding: 14px 15px !important;
    letter-spacing: .2px;
    border-bottom: 3px solid transparent;
    transition: all .2s;
}

.main-nav .navbar-nav .nav-link:hover,
.main-nav .navbar-nav .nav-link.active {
    color: #fff !important;
    border-bottom-color: var(--up-saffron);
    background: rgba(255, 255, 255, .08);
}

.main-nav .dropdown-menu {
    background: var(--up-navy);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    margin-top: 0;
}

.main-nav .dropdown-item {
    color: rgba(255, 255, 255, .8);
    font-size: .82rem;
    padding: 8px 16px;
}

.main-nav .dropdown-item:hover {
    background: var(--up-mid-blue);
    color: #fff;
}

.nav-search-box {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 20px;
    color: #fff;
    padding: 6px 16px;
    font-size: .83rem;
    width: 220px;
    outline: none;
    transition: background .2s, width .3s;
}

.nav-search-box::placeholder {
    color: rgba(255, 255, 255, .55);
}

.nav-search-box:focus {
    background: rgba(255, 255, 255, .22);
    width: 260px;
}

/* ── Hero / Ticker ─────────────────────────────────────── */
.ticker-bar {
    background: var(--up-navy);
    color: #fff;
    padding: 8px 0;
    overflow: hidden;
}

.ticker-label {
    background: var(--up-saffron);
    padding: 2px 14px;
    font-size: .78rem;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    margin-right: 12px;
    letter-spacing: .5px;
}

.ticker-track {
    display: flex;
    animation: ticker-scroll 30s linear infinite;
    white-space: nowrap;
}

.ticker-track span {
    font-size: .8rem;
    color: rgba(255, 255, 255, .85);
    margin-right: 60px;
}

.ticker-track span::before {
    content: '◆  ';
    color: var(--up-amber);
    font-size: .6rem;
}

@keyframes ticker-scroll {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

/* ── Hero Banner ───────────────────────────────────────── */
.hero {
    background: linear-gradient(160deg, var(--up-navy) 0%, var(--up-blue) 55%, var(--up-mid-blue) 100%);
    padding: 56px 0 44px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 45%;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Emblem_of_Uttar_Pradesh.svg/300px-Emblem_of_Uttar_Pradesh.svg.png') center/contain no-repeat;
    opacity: .05;
}

.hero-eyebrow {
    font-size: .8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--up-amber);
    font-weight: 600;
    margin-bottom: 10px;
}

.hero-title {
    font-family: var(--font-hindi);
    font-size: 2.8rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 8px;
}

.hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 28px;
    max-width: 540px;
    line-height: 1.6;
}

.hero-search {
    background: #fff;
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    display: flex;
    align-items: center;
    max-width: 520px;
    box-shadow: 0 4px 24px rgba(10, 34, 64, .3);
}

.hero-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: .95rem;
    color: var(--up-text);
    background: transparent;
}

.hero-search button {
    background: var(--up-saffron);
    color: #fff;
    border: none;
    border-radius: 40px;
    padding: 8px 22px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

.hero-search button:hover {
    background: #c9540a;
}

.hero-tags {
    margin-top: 14px;
}

.hero-tag {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: .75rem;
    cursor: pointer;
    display: inline-block;
    margin: 3px 4px 3px 0;
    transition: background .2s;
}

.hero-tag:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* Stats row in hero */
.hero-stats {
    margin-top: 40px;
}

.hero-stat {
    border-left: 3px solid var(--up-saffron);
    padding-left: 14px;
}

.hero-stat .num {
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.hero-stat .lbl {
    font-size: .75rem;
    color: rgba(255, 255, 255, .6);
    margin-top: 3px;
}

/* ── Quick access cards ─────────────────────────────────── */
.quick-section {
    background: var(--up-cream);
    padding: 48px 0;
}

.section-head {
    margin-bottom: 32px;
}

.section-eyebrow {
    font-size: .75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--up-saffron);
    font-weight: 700;
    margin-bottom: 6px;
}

.section-title {
    font-family: var(--font-hindi);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--up-navy);
}

.section-divider {
    width: 48px;
    height: 4px;
    background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
    border-radius: 2px;
    margin: 10px 0 0;
}

.quick-card {
    background: #fff;
    border: 1px solid var(--up-border);
    border-radius: var(--radius);
    padding: 22px 18px;
    text-align: center;
    transition: transform .22s, box-shadow .22s, border-color .22s;
    cursor: pointer;
    height: 100%;
    text-decoration: none;
    display: block;
    color: inherit;
}

.quick-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--up-mid-blue);
}

.quick-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 12px;
}

.quick-card .q-title {
    font-size: .88rem;
    font-weight: 600;
    color: var(--up-navy);
    margin-bottom: 4px;
}

.quick-card .q-sub {
    font-size: .75rem;
    color: var(--up-muted);
}

/* ── News + GOs ─────────────────────────────────────────── */
.news-section {
    background: #fff;
    padding: 52px 0;
}

.news-card {
    border: 1px solid var(--up-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}

.news-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--up-mid-blue);
}

.news-card .news-meta {
    font-size: .72rem;
    color: var(--up-muted);
    margin-bottom: 6px;
}

.news-card .news-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--up-navy);
    line-height: 1.4;
    margin-bottom: 8px;
}

.news-card .news-dept {
    font-size: .72rem;
    font-weight: 600;
    background: var(--up-light);
    color: var(--up-mid-blue);
    border-radius: 4px;
    padding: 2px 8px;
    display: inline-block;
}

.go-item {
    padding: 12px 0;
    border-bottom: 1px dashed var(--up-border);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

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

.go-badge {
    background: var(--up-saffron);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
    margin-top: 2px;
    flex-shrink: 0;
}

.go-title {
    font-size: .83rem;
    color: var(--up-navy);
    font-weight: 500;
    line-height: 1.4;
}

.go-date {
    font-size: .7rem;
    color: var(--up-muted);
    margin-top: 2px;
}

/* Tab pills */
.tab-pill .nav-link {
    border-radius: 20px;
    font-size: .82rem;
    padding: 6px 18px;
    color: var(--up-muted);
    border: 1px solid var(--up-border);
    margin-right: 6px;
}

.tab-pill .nav-link.active {
    background: var(--up-navy);
    color: #fff;
    border-color: var(--up-navy);
}

/* ── District section ───────────────────────────────────── */
.district-section {
    background: var(--up-light);
    padding: 52px 0;
}

.region-group {
    margin-bottom: 28px;
}

.region-name {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--up-saffron);
    margin-bottom: 10px;
}

.dist-pill {
    background: #fff;
    border: 1px solid var(--up-border);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: .8rem;
    color: var(--up-navy);
    font-weight: 500;
    margin: 4px 4px 4px 0;
    display: inline-block;
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
    text-decoration: none;
}

.dist-pill:hover {
    background: var(--up-navy);
    color: #fff;
    border-color: var(--up-navy);
}

/* ── Schemes ────────────────────────────────────────────── */
.schemes-section {
    background: #fff;
    padding: 52px 0;
}

.scheme-card {
    background: var(--up-cream);
    border: 1px solid var(--up-border);
    border-radius: var(--radius);
    padding: 20px;
    height: 100%;
    transition: box-shadow .2s, border-color .2s;
    cursor: pointer;
}

.scheme-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--up-saffron);
}

.scheme-icon {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.scheme-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--up-navy);
    margin-bottom: 4px;
}

.scheme-desc {
    font-size: .77rem;
    color: var(--up-muted);
    line-height: 1.5;
}

.scheme-link {
    font-size: .77rem;
    font-weight: 600;
    color: var(--up-saffron);
    margin-top: 10px;
    display: inline-block;
    text-decoration: none;
}

.scheme-link:hover {
    text-decoration: underline;
}

/* ── Department portals ─────────────────────────────────── */
.portals-section {
    background: var(--up-navy);
    padding: 52px 0;
}

.portals-section .section-title {
    color: #fff;
}

.portals-section .section-eyebrow {
    color: var(--up-amber);
}

.portal-tile {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    padding: 16px 14px;
    text-align: center;
    cursor: pointer;
    height: 100%;
    transition: background .2s, border-color .2s;
    text-decoration: none;
    display: block;
}

.portal-tile:hover {
    background: rgba(255, 255, 255, .14);
    border-color: var(--up-saffron);
}

.portal-tile .pt-icon {
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.portal-tile .pt-name {
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
}

.portal-tile .pt-link {
    font-size: .7rem;
    color: rgba(255, 255, 255, .45);
}

/* ── Grievance / Helpline strip ─────────────────────────── */
.helpline-strip {
    background: linear-gradient(90deg, var(--up-saffron), #c9540a);
    padding: 22px 0;
    color: #fff;
}

.helpline-strip .hs-num {
    font-size: 2rem;
    font-weight: 700;
}

.helpline-strip .hs-lbl {
    font-size: .82rem;
    opacity: .85;
}

.hs-btn {
    background: #fff;
    color: var(--up-saffron);
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    transition: transform .15s;
}

.hs-btn:hover {
    transform: scale(1.03);
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
    background: #060F1C;
    color: rgba(255, 255, 255, .65);
    padding: 50px 0 0;
}

.footer-brand .hindi {
    font-family: var(--font-hindi);
    font-size: 1.1rem;
    color: #fff;
}

.footer-brand .eng {
    font-size: .75rem;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .4);
    margin-top: 3px;
}

.footer-brand p {
    font-size: .78rem;
    margin-top: 10px;
    line-height: 1.6;
}

.site-footer h6 {
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.site-footer ul {
    list-style: none;
    padding: 0;
}

.site-footer ul li a {
    color: rgba(255, 255, 255, .55);
    font-size: .8rem;
    text-decoration: none;
    line-height: 2;
    transition: color .2s;
}

.site-footer ul li a:hover {
    color: var(--up-amber);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 36px;
    padding: 18px 0;
    font-size: .75rem;
    color: rgba(255, 255, 255, .35);
}

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

.footer-bottom a:hover {
    color: var(--up-amber);
}

/* ── Misc ───────────────────────────────────────────────── */
.btn-outline-saffron {
    border: 1.5px solid var(--up-saffron);
    color: var(--up-saffron);
    background: transparent;
    border-radius: 6px;
    padding: 6px 18px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

.btn-outline-saffron:hover {
    background: var(--up-saffron);
    color: #fff;
}

.btn-navy {
    background: var(--up-navy);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-navy:hover {
    background: var(--up-blue);
}

.view-all-link {
    font-size: .82rem;
    font-weight: 600;
    color: var(--up-mid-blue);
    text-decoration: none;
}

.view-all-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 1.9rem;
    }

    .header-titles .hindi-title {
        font-size: 1.1rem;
    }

    .ticker-track {
        animation-duration: 18s;
    }
}

        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
            /* Accessibility overrides */
            --a11y-font-size: 16px;
            --a11y-bg: #fff;
            --a11y-text: #1A1A2E;
            --a11y-link: #1E5FA8;
        }

        /* High contrast mode */
        body.high-contrast {
            --a11y-bg: #000;
            --a11y-text: #fff;
            --a11y-link: #ff0;
            --up-border: #fff;
        }

        body.high-contrast * {
            background-color: #000 !important;
            color: #fff !important;
            border-color: #fff !important;
        }

        body.high-contrast a,
        body.high-contrast .page-link {
            color: #ff0 !important;
        }

        body.high-contrast .site-header,
        body.high-contrast .main-nav,
        body.high-contrast .page-hero,
        body.high-contrast .emergency-strip {
            background: #000 !important;
            border-color: #fff !important;
        }

        body.high-contrast .card-head,
        body.high-contrast .sidebar-head {
            background: #222 !important;
        }

        /* Large text mode */
        body.large-text {
            font-size: 1.2rem !important;
        }

        body.large-text .page-link,
        body.large-text .sec-title {
            font-size: 1.1rem !important;
        }

        /* Focus visible */
        body.keyboard-mode *:focus {
            outline: 3px solid var(--up-saffron) !important;
            outline-offset: 2px !important;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
            font-size: var(--a11y-font-size);
        }

        /* ── Chrome ── */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* ── Skip links ── */
        .skip-links {
            position: absolute;
            top: -100px;
            left: 0;
            z-index: 9999;
            transition: top .2s;
        }

        .skip-links:focus-within {
            top: 0;
        }

        .skip-link {
            display: inline-block;
            background: var(--up-saffron);
            color: #fff;
            padding: 10px 20px;
            font-size: .88rem;
            font-weight: 700;
            text-decoration: none;
            border-radius: 0 0 8px 0;
        }

        .skip-link:focus {
            outline: 3px solid #fff;
        }

        /* ── Toolbar ── */
        .a11y-toolbar {
            background: var(--up-navy);
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .1);
            position: sticky;
            top: 49px;
            z-index: 990;
        }

        .toolbar-label {
            font-size: .72rem;
            font-weight: 700;
            color: rgba(255, 255, 255, .5);
            text-transform: uppercase;
            letter-spacing: .8px;
            margin-right: 8px;
            white-space: nowrap;
        }

        .tb-btn {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .18);
            color: rgba(255, 255, 255, .85);
            border-radius: 6px;
            padding: 5px 12px;
            font-size: .78rem;
            font-weight: 600;
            cursor: pointer;
            transition: all .18s;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .tb-btn:hover {
            background: rgba(255, 255, 255, .18);
            color: #fff;
        }

        .tb-btn.active {
            background: var(--up-saffron);
            border-color: var(--up-saffron);
            color: #fff;
        }

        .tb-divider {
            width: 1px;
            background: rgba(255, 255, 255, .15);
            height: 24px;
            margin: 0 8px;
        }

        .font-size-display {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 6px;
            padding: 4px 10px;
            font-size: .8rem;
            color: #fff;
            font-weight: 700;
            min-width: 42px;
            text-align: center;
        }

        /* ── Hero ── */
        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 55%, #1e6ea8 100%);
            padding: 38px 0 30px;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -50px;
            top: -50px;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .09);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 6px;
            line-height: 1.7;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 20px;
            padding: 4px 14px;
            font-size: .75rem;
            color: rgba(255, 255, 255, .85);
            margin: 4px 4px 4px 0;
        }

        .hero-badge i {
            color: var(--up-amber);
        }

        /* ── Page body ── */
        .page-body {
            padding: 30px 0 60px;
        }

        /* ── Cards ── */
        .info-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            margin-bottom: 20px;
        }

        .card-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 18px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .card-body-inner {
            padding: 20px;
        }

        /* ── Section heads ── */
        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-saffron);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 38px;
            height: 3px;
            background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
            border-radius: 2px;
            margin-top: 8px;
            margin-bottom: 24px;
        }

        /* ── Compliance badges ── */
        .compliance-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 12px;
        }

        .compliance-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 18px 14px;
            text-align: center;
            box-shadow: var(--shadow-sm);
            transition: all .2s;
        }

        .compliance-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
        }

        .compliance-icon {
            font-size: 2rem;
            margin-bottom: 8px;
        }

        .compliance-name {
            font-size: .82rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 4px;
        }

        .compliance-status {
            font-size: .7rem;
            font-weight: 700;
            padding: 2px 10px;
            border-radius: 10px;
            display: inline-block;
        }

        .status-compliant {
            background: #d4edda;
            color: #155724;
        }

        .status-partial {
            background: #fff3cd;
            color: #856404;
        }

        .compliance-desc {
            font-size: .72rem;
            color: var(--up-muted);
            margin-top: 6px;
            line-height: 1.5;
        }

        /* ── Feature cards ── */
        .feature-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 20px;
            height: 100%;
            box-shadow: var(--shadow-sm);
            transition: all .2s;
        }

        .feature-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
        }

        .feature-icon {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            margin-bottom: 14px;
        }

        .feature-title {
            font-size: .92rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 6px;
        }

        .feature-desc {
            font-size: .8rem;
            color: var(--up-muted);
            line-height: 1.65;
        }

        .feature-how {
            font-size: .76rem;
            color: var(--up-mid);
            margin-top: 10px;
            font-weight: 600;
        }

        /* ── Keyboard shortcuts ── */
        .shortcut-table {
            width: 100%;
            border-collapse: collapse;
        }

        .shortcut-table th {
            background: var(--up-light);
            color: var(--up-navy);
            font-size: .76rem;
            font-weight: 700;
            padding: 9px 14px;
            border-bottom: 1px solid var(--up-border);
            text-align: left;
            letter-spacing: .3px;
        }

        .shortcut-table td {
            padding: 10px 14px;
            border-bottom: 1px solid var(--up-border);
            font-size: .8rem;
            vertical-align: middle;
        }

        .shortcut-table tr:last-child td {
            border-bottom: none;
        }

        .shortcut-table tr:hover td {
            background: var(--up-cream);
        }

        .kbd {
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        .k {
            background: var(--up-navy);
            color: #fff;
            border-radius: 5px;
            padding: 2px 8px;
            font-size: .72rem;
            font-weight: 700;
            font-family: monospace;
            border-bottom: 2px solid rgba(0, 0, 0, .3);
            white-space: nowrap;
        }

        .k-plus {
            color: var(--up-muted);
            font-size: .7rem;
        }

        /* ── Screen reader guide ── */
        .sr-step {
            display: flex;
            gap: 14px;
            margin-bottom: 20px;
        }

        .sr-num {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--up-navy);
            color: #fff;
            font-size: .82rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .sr-title {
            font-size: .88rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 4px;
        }

        .sr-desc {
            font-size: .8rem;
            color: var(--up-muted);
            line-height: 1.65;
        }

        /* ── Color contrast ── */
        .contrast-pair {
            display: flex;
            align-items: center;
            gap: 0;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 10px;
            border: 1px solid var(--up-border);
        }

        .cp-swatch {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .cp-info {
            padding: 10px 14px;
            flex: 1;
        }

        .cp-name {
            font-size: .8rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .cp-ratio {
            font-size: .72rem;
            color: var(--up-muted);
        }

        .cp-pass {
            font-size: .68rem;
            font-weight: 700;
            padding: 1px 7px;
            border-radius: 10px;
        }

        .pass-aaa {
            background: #d4edda;
            color: #155724;
        }

        .pass-aa {
            background: #d1ecf1;
            color: #0c5460;
        }

        .pass-fail {
            background: #f8d7da;
            color: #721c24;
        }

        /* ── Live demo widget ── */
        .demo-box {
            background: var(--up-light);
            border: 2px solid var(--up-border);
            border-radius: var(--radius);
            padding: 24px;
            text-align: center;
            transition: all .3s;
        }

        .demo-text {
            font-size: 1rem;
            color: var(--up-navy);
            line-height: 1.7;
            margin-bottom: 16px;
        }

        .demo-btn {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 10px 24px;
            font-size: .9rem;
            font-weight: 700;
            cursor: pointer;
            margin: 4px;
            transition: all .2s;
        }

        .demo-btn:hover {
            background: #c9540a;
            transform: scale(1.04);
        }

        .demo-btn:focus {
            outline: 3px solid #000;
            outline-offset: 2px;
        }

        /* ── Tip boxes ── */
        .tip-box {
            border-radius: var(--radius);
            padding: 14px 16px;
            margin-bottom: 16px;
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .tip-box.info {
            background: var(--up-light);
            border: 1px solid var(--up-border);
        }

        .tip-box.success {
            background: #d4edda;
            border: 1px solid #28a745;
        }

        .tip-box.warning {
            background: #fff3cd;
            border: 1px solid #ffc107;
        }

        .tip-box i {
            font-size: 1.1rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .tip-box.info i {
            color: var(--up-mid);
        }

        .tip-box.success i {
            color: var(--up-green);
        }

        .tip-box.warning i {
            color: #856404;
        }

        .tip-box p {
            font-size: .8rem;
            line-height: 1.65;
            margin: 0;
        }

        /* ── Sidebar ── */
        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-body {
            padding: 14px;
        }

        .jump-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .79rem;
            cursor: pointer;
            text-decoration: none;
            color: var(--up-text);
            transition: color .15s;
        }

        .jump-link:last-child {
            border-bottom: none;
        }

        .jump-link:hover {
            color: var(--up-saffron);
        }

        .stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .79rem;
        }

        .stat-row:last-child {
            border-bottom: none;
        }

        .stat-row .lbl {
            color: var(--up-muted);
        }

        .stat-row .val {
            font-weight: 700;
            color: var(--up-navy);
        }

        /* ── FAQ ── */
        .faq-item {
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 8px;
            overflow: hidden;
        }

        .faq-q {
            padding: 12px 16px;
            font-size: .85rem;
            font-weight: 600;
            color: var(--up-navy);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background .15s;
            user-select: none;
        }

        .faq-q:hover {
            background: var(--up-light);
        }

        .faq-q.open {
            background: var(--up-navy);
            color: #fff;
        }

        .faq-q.open .faq-chev {
            transform: rotate(180deg);
        }

        .faq-chev {
            transition: transform .2s;
            flex-shrink: 0;
        }

        .faq-a {
            display: none;
            padding: 12px 16px;
            font-size: .8rem;
            color: var(--up-muted);
            line-height: 1.75;
            background: var(--up-cream);
        }

        .faq-a.show {
            display: block;
        }

        /* ── Progress/checklist ── */
        .check-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 9px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .82rem;
        }

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

        .check-item .ci-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .75rem;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .ci-pass {
            background: #d4edda;
            color: #155724;
        }

        .ci-partial {
            background: #fff3cd;
            color: #856404;
        }

        .ci-fail {
            background: #f8d7da;
            color: #721c24;
        }

        .ci-text {
            flex: 1;
            line-height: 1.5;
        }

        .ci-criterion {
            font-size: .7rem;
            color: var(--up-muted);
            margin-top: 2px;
        }

        /* footer */
        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.5rem;
            }

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

            .a11y-toolbar .d-flex {
                flex-wrap: wrap;
                gap: 6px;
            }
        }
    

/* ==========================================================================
   Styles migrated from citizen-services.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        /* ── Shared header ── */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* ── Hero ── */
        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 55%, #1760aa 100%);
            padding: 38px 0 0;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -50px;
            top: -50px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .08);
        }

        .page-hero::after {
            content: '';
            position: absolute;
            left: -30px;
            bottom: -30px;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: rgba(30, 95, 168, .15);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2.1rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 6px;
            line-height: 1.6;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .72rem;
            color: rgba(255, 255, 255, .8);
            margin: 3px 4px 3px 0;
        }

        .hero-stat {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: var(--radius);
            padding: 14px;
            text-align: center;
        }

        .hero-stat .num {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-amber);
        }

        .hero-stat .lbl {
            font-size: .7rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 3px;
        }

        /* search hero bar */
        .hero-search {
            background: #fff;
            border-radius: 50px;
            padding: 5px 5px 5px 20px;
            display: flex;
            align-items: center;
            max-width: 560px;
            box-shadow: 0 4px 24px rgba(10, 34, 64, .3);
            margin-top: 22px;
        }

        .hero-search input {
            flex: 1;
            border: none;
            outline: none;
            font-size: .92rem;
            color: var(--up-text);
            background: transparent;
        }

        .hero-search input::placeholder {
            color: var(--up-muted);
        }

        .hero-search button {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 40px;
            padding: 9px 22px;
            font-size: .88rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }

        .hero-search button:hover {
            background: #c9540a;
        }

        .quick-tags {
            margin-top: 12px;
        }

        .quick-tag {
            background: rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .78);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .74rem;
            cursor: pointer;
            display: inline-block;
            margin: 3px 4px 3px 0;
            transition: background .18s;
        }

        .quick-tag:hover {
            background: rgba(255, 255, 255, .2);
            color: #fff;
        }

        /* hero tab bar */
        .hero-tabs .nav-link {
            color: rgba(255, 255, 255, .6) !important;
            font-size: .82rem;
            padding: 11px 18px;
            border-bottom: 3px solid transparent;
            transition: all .2s;
            font-weight: 500;
        }

        .hero-tabs .nav-link:hover {
            color: #fff !important;
            background: rgba(255, 255, 255, .07);
        }

        .hero-tabs .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron) !important;
            background: rgba(255, 255, 255, .08);
        }

        /* ── Status tracker bar ── */
        .tracker-bar {
            background: var(--up-cream);
            border-bottom: 1px solid var(--up-border);
            padding: 14px 0;
        }

        .tracker-inner {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .tracker-input {
            flex: 1;
            min-width: 200px;
            border: 1.5px solid var(--up-border);
            border-radius: 8px;
            padding: 8px 14px;
            font-size: .84rem;
            outline: none;
            transition: border-color .2s;
        }

        .tracker-input:focus {
            border-color: var(--up-mid);
        }

        .tracker-btn {
            background: var(--up-navy);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 9px 20px;
            font-size: .84rem;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: background .2s;
        }

        .tracker-btn:hover {
            background: var(--up-blue);
        }

        .tracker-label {
            font-size: .78rem;
            font-weight: 700;
            color: var(--up-navy);
            white-space: nowrap;
        }

        /* ── Page body ── */
        .page-body {
            padding: 28px 0 56px;
        }

        /* ── Cards ── */
        .info-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .info-card .card-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 16px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .card-head-left {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .info-card .card-body-inner {
            padding: 16px;
        }

        /* ── Service category tabs ── */
        .cat-tabs {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .cat-tab {
            border: 1.5px solid var(--up-border);
            border-radius: 8px;
            padding: 8px 14px;
            font-size: .78rem;
            font-weight: 600;
            color: var(--up-navy);
            background: #fff;
            cursor: pointer;
            transition: all .18s;
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }

        .cat-tab:hover {
            border-color: var(--up-mid);
            color: var(--up-mid);
        }

        .cat-tab.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .cat-tab .ct-count {
            font-size: .68rem;
            opacity: .7;
        }

        /* ── Service cards ── */
        .svc-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 18px;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: box-shadow .2s, border-color .2s, transform .15s;
            cursor: pointer;
        }

        .svc-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
            transform: translateY(-2px);
        }

        .svc-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            margin-bottom: 12px;
            flex-shrink: 0;
        }

        .svc-name {
            font-size: .88rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 5px;
            line-height: 1.3;
        }

        .svc-desc {
            font-size: .76rem;
            color: var(--up-muted);
            line-height: 1.55;
            flex: 1;
        }

        .svc-meta {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed var(--up-border);
        }

        .svc-badge {
            font-size: .66rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 10px;
            white-space: nowrap;
        }

        .badge-free {
            background: #d4edda;
            color: #155724;
        }

        .badge-paid {
            background: #fff3cd;
            color: #856404;
        }

        .badge-days {
            background: var(--up-light);
            color: var(--up-mid);
        }

        .badge-new {
            background: #FEF0E7;
            color: var(--up-saffron);
        }

        .svc-apply-btn {
            margin-top: 12px;
            width: 100%;
            background: var(--up-light);
            color: var(--up-mid);
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 7px;
            font-size: .78rem;
            font-weight: 700;
            cursor: pointer;
            transition: all .18s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            text-decoration: none;
        }

        .svc-apply-btn:hover {
            background: var(--up-mid);
            color: #fff;
            border-color: var(--up-mid);
        }

        /* ── Application form panel ── */
        .form-panel {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .form-panel-head {
            background: linear-gradient(90deg, var(--up-navy), var(--up-blue));
            color: #fff;
            padding: 14px 20px;
        }

        .form-panel-head h5 {
            font-size: .92rem;
            font-weight: 700;
            margin: 0;
        }

        .form-panel-head p {
            font-size: .75rem;
            opacity: .7;
            margin: 4px 0 0;
        }

        .form-body {
            padding: 20px;
        }

        .form-label-up {
            font-size: .78rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 4px;
        }

        .form-label-up span {
            color: #c0392b;
        }

        .form-ctrl {
            width: 100%;
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 9px 12px;
            font-size: .84rem;
            color: var(--up-text);
            outline: none;
            transition: border-color .2s;
        }

        .form-ctrl:focus {
            border-color: var(--up-mid);
            box-shadow: 0 0 0 3px rgba(30, 95, 168, .1);
        }

        .form-ctrl::placeholder {
            color: var(--up-muted);
        }

        select.form-ctrl {
            cursor: pointer;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .upload-zone {
            border: 2px dashed var(--up-border);
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all .2s;
            background: var(--up-cream);
        }

        .upload-zone:hover,
        .upload-zone.dragover {
            border-color: var(--up-mid);
            background: var(--up-light);
        }

        .upload-zone .uz-icon {
            font-size: 2rem;
            margin-bottom: 6px;
            opacity: .5;
        }

        .upload-zone p {
            font-size: .78rem;
            color: var(--up-muted);
            margin: 0;
        }

        .uploaded-file {
            background: var(--up-light);
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 8px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 8px;
            font-size: .78rem;
        }

        .uploaded-file .uf-name {
            color: var(--up-navy);
            font-weight: 600;
        }

        .uploaded-file .uf-remove {
            color: #c0392b;
            cursor: pointer;
            font-size: .7rem;
        }

        .fee-box {
            background: var(--up-cream);
            border: 1px solid var(--up-border);
            border-radius: 8px;
            padding: 14px;
            margin-bottom: 16px;
        }

        .fee-row {
            display: flex;
            justify-content: space-between;
            font-size: .8rem;
            padding: 4px 0;
        }

        .fee-row.total {
            font-weight: 700;
            color: var(--up-navy);
            border-top: 1px solid var(--up-border);
            margin-top: 6px;
            padding-top: 8px;
        }

        .submit-btn {
            width: 100%;
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px;
            font-size: .9rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .submit-btn:hover {
            background: #c9540a;
        }

        .submit-btn:disabled {
            background: var(--up-muted);
            cursor: not-allowed;
        }

        /* progress steps in form */
        .form-steps {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
        }

        .fstep {
            flex: 1;
            text-align: center;
            position: relative;
        }

        .fstep-circle {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--up-border);
            color: var(--up-muted);
            font-size: .78rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 5px;
            transition: all .3s;
        }

        .fstep-label {
            font-size: .68rem;
            color: var(--up-muted);
            line-height: 1.3;
        }

        .fstep.done .fstep-circle {
            background: var(--up-green);
            color: #fff;
        }

        .fstep.active .fstep-circle {
            background: var(--up-saffron);
            color: #fff;
            box-shadow: 0 0 0 4px rgba(232, 101, 10, .2);
        }

        .fstep.active .fstep-label {
            color: var(--up-navy);
            font-weight: 600;
        }

        .fstep-line {
            flex: 1;
            height: 2px;
            background: var(--up-border);
            margin-top: -18px;
        }

        .fstep-line.done {
            background: var(--up-green);
        }

        /* step panels */
        .step-panel {
            display: none;
        }

        .step-panel.active {
            display: block;
        }

        /* ── Status tracker result ── */
        .status-result {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 20px;
            display: none;
        }

        .status-timeline {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .st-item {
            display: flex;
            gap: 14px;
            padding-bottom: 20px;
            position: relative;
        }

        .st-item:last-child {
            padding-bottom: 0;
        }

        .st-item::before {
            content: '';
            position: absolute;
            left: 15px;
            top: 28px;
            bottom: 0;
            width: 2px;
            background: var(--up-border);
        }

        .st-item:last-child::before {
            display: none;
        }

        .st-dot {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .85rem;
            flex-shrink: 0;
            z-index: 1;
        }

        .st-dot-done {
            background: #d4edda;
            color: var(--up-green);
        }

        .st-dot-active {
            background: var(--up-saffron);
            color: #fff;
            box-shadow: 0 0 0 4px rgba(232, 101, 10, .2);
        }

        .st-dot-pending {
            background: var(--up-border);
            color: var(--up-muted);
        }

        .st-title {
            font-size: .85rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 2px;
        }

        .st-meta {
            font-size: .72rem;
            color: var(--up-muted);
        }

        .st-note {
            font-size: .75rem;
            color: var(--up-muted);
            background: var(--up-light);
            border-radius: 5px;
            padding: 6px 10px;
            margin-top: 5px;
            line-height: 1.5;
        }

        /* ── CSC locator ── */
        .csc-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 14px;
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transition: all .2s;
            cursor: pointer;
        }

        .csc-card:hover {
            box-shadow: var(--shadow-sm);
            border-color: var(--up-mid);
        }

        .csc-num {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: var(--up-light);
            color: var(--up-mid);
            font-size: .82rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .csc-name {
            font-size: .85rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 2px;
        }

        .csc-addr {
            font-size: .74rem;
            color: var(--up-muted);
            line-height: 1.4;
        }

        .csc-dist {
            font-size: .7rem;
            font-weight: 600;
            color: var(--up-mid);
            margin-top: 3px;
        }

        /* ── Info / tip boxes ── */
        .tip-box {
            border-radius: var(--radius);
            padding: 14px 16px;
            margin-bottom: 14px;
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .tip-box.info {
            background: var(--up-light);
            border: 1px solid var(--up-border);
        }

        .tip-box.warning {
            background: #fff3cd;
            border: 1px solid #ffc107;
        }

        .tip-box.success {
            background: #d4edda;
            border: 1px solid #28a745;
        }

        .tip-box i {
            font-size: 1.1rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .tip-box.info i {
            color: var(--up-mid);
        }

        .tip-box.warning i {
            color: #856404;
        }

        .tip-box.success i {
            color: var(--up-green);
        }

        .tip-box p {
            font-size: .8rem;
            line-height: 1.6;
            margin: 0;
            color: var(--up-text);
        }

        /* ── Right sidebar ── */
        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-body {
            padding: 14px;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .79rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-row .lbl {
            color: var(--up-muted);
        }

        .info-row .val {
            font-weight: 600;
            color: var(--up-navy);
            text-align: right;
        }

        .link-list a {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 8px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .8rem;
            color: var(--up-mid);
            text-decoration: none;
            transition: color .15s;
        }

        .link-list a:last-child {
            border-bottom: none;
        }

        .link-list a:hover {
            color: var(--up-saffron);
        }

        .helpline-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid var(--up-border);
        }

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

        .helpline-item i {
            color: var(--up-saffron);
            font-size: 1rem;
            width: 18px;
        }

        .helpline-num {
            font-size: .9rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .helpline-lbl {
            font-size: .7rem;
            color: var(--up-muted);
        }

        /* section heads */
        .sec-head {
            margin-bottom: 18px;
        }

        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-saffron);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 36px;
            height: 3px;
            background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
            border-radius: 2px;
            margin-top: 7px;
        }

        /* success modal overlay */
        .success-overlay {
            position: fixed;
            inset: 0;
            background: rgba(10, 34, 64, .6);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .success-box {
            background: #fff;
            border-radius: 16px;
            padding: 36px 32px;
            max-width: 420px;
            width: 90%;
            text-align: center;
            box-shadow: 0 8px 40px rgba(10, 34, 64, .3);
        }

        .success-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: #d4edda;
            color: var(--up-green);
            font-size: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }

        .success-title {
            font-family: var(--font-hindi);
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 8px;
        }

        .success-refno {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--up-saffron);
            letter-spacing: 1px;
            background: var(--up-cream);
            border-radius: 8px;
            padding: 8px 20px;
            display: inline-block;
            margin: 8px 0 14px;
        }

        .success-msg {
            font-size: .82rem;
            color: var(--up-muted);
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .success-close {
            background: var(--up-navy);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 10px 28px;
            font-size: .88rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }

        .success-close:hover {
            background: var(--up-blue);
        }

        /* footer */
        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.5rem;
            }

            .cat-tabs {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 4px;
            }

            .cat-tab {
                flex-shrink: 0;
            }
        }
    

/* ==========================================================================
   Styles migrated from contact.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        /* ── Chrome ── */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* ── Hero ── */
        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 55%, #1e6ea8 100%);
            padding: 40px 0 36px;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .09);
        }

        .page-hero::after {
            content: '';
            position: absolute;
            left: -40px;
            bottom: -40px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(30, 95, 168, .13);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2.1rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 6px;
            line-height: 1.7;
        }

        /* ── Emergency strip ── */
        .emergency-strip {
            background: linear-gradient(90deg, #b71c1c, #c62828);
            padding: 18px 0;
        }

        .emer-num {
            font-size: 1.9rem;
            font-weight: 700;
            color: #fff;
            line-height: 1;
        }

        .emer-lbl {
            font-size: .72rem;
            color: rgba(255, 255, 255, .75);
            margin-top: 3px;
        }

        .emer-call-btn {
            background: #fff;
            color: #b71c1c;
            border: none;
            border-radius: 8px;
            padding: 8px 18px;
            font-size: .82rem;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: transform .15s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .emer-call-btn:hover {
            transform: scale(1.04);
            color: #b71c1c;
        }

        .emer-divider {
            width: 1px;
            background: rgba(255, 255, 255, .2);
            height: 50px;
            margin: 0 20px;
        }

        /* ── Page body ── */
        .page-body {
            padding: 30px 0 60px;
        }

        /* ── Section heads ── */
        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-saffron);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 38px;
            height: 3px;
            background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
            border-radius: 2px;
            margin-top: 8px;
            margin-bottom: 24px;
        }

        /* ── Helpline cards ── */
        .helpline-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            height: 100%;
            transition: box-shadow .2s, border-color .2s, transform .15s;
            cursor: pointer;
        }

        .helpline-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
            transform: translateY(-3px);
        }

        .hc-top {
            padding: 18px 18px 14px;
            display: flex;
            align-items: flex-start;
            gap: 14px;
        }

        .hc-icon {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            flex-shrink: 0;
        }

        .hc-name {
            font-size: .9rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 3px;
            line-height: 1.3;
        }

        .hc-dept {
            font-size: .72rem;
            color: var(--up-muted);
            margin-bottom: 8px;
        }

        .hc-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-saffron);
            letter-spacing: .5px;
            line-height: 1;
        }

        .hc-number-small {
            font-size: 1rem;
        }

        .hc-footer {
            background: var(--up-cream);
            border-top: 1px dashed var(--up-border);
            padding: 10px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 6px;
        }

        .hc-timing {
            font-size: .72rem;
            color: var(--up-muted);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .hc-call-btn {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 5px 14px;
            font-size: .74rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .18s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .hc-call-btn:hover {
            background: #c9540a;
            color: #fff;
        }

        .hc-status {
            font-size: .66rem;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 10px;
        }

        .status-247 {
            background: #d4edda;
            color: #155724;
        }

        .status-day {
            background: #fff3cd;
            color: #856404;
        }

        /* ── Department directory table ── */
        .info-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            margin-bottom: 20px;
        }

        .info-card .card-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 16px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .dept-table {
            width: 100%;
            border-collapse: collapse;
            font-size: .8rem;
        }

        .dept-table th {
            background: var(--up-light);
            color: var(--up-navy);
            font-weight: 700;
            padding: 9px 14px;
            border-bottom: 1px solid var(--up-border);
            text-align: left;
            font-size: .74rem;
            letter-spacing: .3px;
        }

        .dept-table td {
            padding: 10px 14px;
            border-bottom: 1px solid var(--up-border);
            vertical-align: middle;
        }

        .dept-table tr:last-child td {
            border-bottom: none;
        }

        .dept-table tr:hover td {
            background: var(--up-cream);
        }

        .dept-table .dept-name {
            font-weight: 600;
            color: var(--up-navy);
        }

        .dept-table .dept-num {
            font-weight: 700;
            color: var(--up-saffron);
        }

        .dept-table .dept-email a {
            color: var(--up-mid);
            text-decoration: none;
            font-size: .75rem;
        }

        .dept-table .dept-email a:hover {
            text-decoration: underline;
        }

        .table-search {
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 7px 14px;
            font-size: .82rem;
            outline: none;
            width: 100%;
            transition: border-color .2s;
        }

        .table-search:focus {
            border-color: var(--up-mid);
        }

        /* ── Feedback / grievance form ── */
        .form-ctrl {
            width: 100%;
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 9px 12px;
            font-size: .84rem;
            color: var(--up-text);
            outline: none;
            transition: border-color .2s;
            background: #fff;
        }

        .form-ctrl:focus {
            border-color: var(--up-mid);
            box-shadow: 0 0 0 3px rgba(30, 95, 168, .1);
        }

        .form-ctrl::placeholder {
            color: var(--up-muted);
        }

        .form-label-up {
            font-size: .78rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 4px;
        }

        .form-label-up span {
            color: #c0392b;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .submit-btn {
            width: 100%;
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px;
            font-size: .9rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .submit-btn:hover {
            background: #c9540a;
        }

        .char-count {
            font-size: .7rem;
            color: var(--up-muted);
            text-align: right;
            margin-top: 3px;
        }

        /* ── Office cards ── */
        .office-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 18px;
            height: 100%;
            box-shadow: var(--shadow-sm);
            transition: box-shadow .2s, border-color .2s;
        }

        .office-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
        }

        .office-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            margin-bottom: 12px;
            flex-shrink: 0;
        }

        .office-name {
            font-size: .9rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 6px;
        }

        .office-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: .78rem;
            color: var(--up-muted);
            margin-bottom: 5px;
            line-height: 1.5;
        }

        .office-item i {
            color: var(--up-saffron);
            font-size: .85rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .office-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .office-item a:hover {
            text-decoration: underline;
        }

        .directions-btn {
            width: 100%;
            background: var(--up-light);
            color: var(--up-mid);
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 7px;
            font-size: .76rem;
            font-weight: 700;
            cursor: pointer;
            margin-top: 12px;
            transition: all .2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .directions-btn:hover {
            background: var(--up-mid);
            color: #fff;
            border-color: var(--up-mid);
        }

        /* ── Social media ── */
        .social-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 16px;
            text-align: center;
            height: 100%;
            transition: all .2s;
            cursor: pointer;
            text-decoration: none;
            display: block;
            color: inherit;
        }

        .social-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-3px);
        }

        .social-icon {
            font-size: 1.8rem;
            margin-bottom: 8px;
        }

        .social-name {
            font-size: .82rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 3px;
        }

        .social-handle {
            font-size: .72rem;
            color: var(--up-mid);
        }

        .social-followers {
            font-size: .68rem;
            color: var(--up-muted);
            margin-top: 4px;
        }

        /* ── FAQ ── */
        .faq-item {
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 8px;
            overflow: hidden;
        }

        .faq-q {
            padding: 12px 16px;
            font-size: .85rem;
            font-weight: 600;
            color: var(--up-navy);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background .15s;
            user-select: none;
        }

        .faq-q:hover {
            background: var(--up-light);
        }

        .faq-q.open {
            background: var(--up-navy);
            color: #fff;
        }

        .faq-q.open .faq-chevron {
            transform: rotate(180deg);
        }

        .faq-a {
            display: none;
            padding: 12px 16px;
            font-size: .8rem;
            color: var(--up-muted);
            line-height: 1.75;
            background: var(--up-cream);
        }

        .faq-a.show {
            display: block;
        }

        .faq-chevron {
            transition: transform .2s;
            flex-shrink: 0;
        }

        /* ── Tip boxes ── */
        .tip-box {
            border-radius: var(--radius);
            padding: 14px 16px;
            margin-bottom: 16px;
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .tip-box.info {
            background: var(--up-light);
            border: 1px solid var(--up-border);
        }

        .tip-box.warning {
            background: #fff3cd;
            border: 1px solid #ffc107;
        }

        .tip-box i {
            font-size: 1.1rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .tip-box.info i {
            color: var(--up-mid);
        }

        .tip-box.warning i {
            color: #856404;
        }

        .tip-box p {
            font-size: .8rem;
            line-height: 1.65;
            margin: 0;
        }

        /* ── Status indicator ── */
        .status-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }

        .dot-green {
            background: var(--up-green);
            animation: pulse 2s infinite;
        }

        .dot-yellow {
            background: var(--up-amber);
        }

        .dot-red {
            background: #c0392b;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: .4;
            }
        }

        /* ── RTI section ── */
        .rti-step {
            display: flex;
            gap: 14px;
            margin-bottom: 18px;
        }

        .rti-num {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--up-navy);
            color: #fff;
            font-size: .82rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .rti-title {
            font-size: .88rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 3px;
        }

        .rti-desc {
            font-size: .78rem;
            color: var(--up-muted);
            line-height: 1.6;
        }

        /* ── Live chat widget ── */
        .chat-widget {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 999;
        }

        .chat-bubble {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: var(--up-saffron);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(232, 101, 10, .45);
            transition: transform .2s;
        }

        .chat-bubble:hover {
            transform: scale(1.08);
        }

        .chat-panel {
            position: absolute;
            bottom: 70px;
            right: 0;
            width: 300px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 8px 40px rgba(10, 34, 64, .2);
            overflow: hidden;
            display: none;
        }

        .chat-panel.open {
            display: block;
        }

        .chat-header {
            background: var(--up-navy);
            color: #fff;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .chat-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--up-saffron);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .chat-header-title {
            font-size: .85rem;
            font-weight: 700;
        }

        .chat-header-sub {
            font-size: .7rem;
            opacity: .7;
        }

        .chat-messages {
            height: 200px;
            overflow-y: auto;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .chat-msg {
            max-width: 80%;
            padding: 8px 12px;
            border-radius: 12px;
            font-size: .78rem;
            line-height: 1.5;
        }

        .chat-msg.bot {
            background: var(--up-light);
            color: var(--up-text);
            align-self: flex-start;
            border-bottom-left-radius: 3px;
        }

        .chat-msg.user {
            background: var(--up-saffron);
            color: #fff;
            align-self: flex-end;
            border-bottom-right-radius: 3px;
        }

        .chat-input-wrap {
            padding: 10px;
            border-top: 1px solid var(--up-border);
            display: flex;
            gap: 6px;
        }

        .chat-input {
            flex: 1;
            border: 1px solid var(--up-border);
            border-radius: 20px;
            padding: 7px 12px;
            font-size: .78rem;
            outline: none;
        }

        .chat-send {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 34px;
            height: 34px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .chat-options {
            padding: 0 14px 12px;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .chat-opt {
            border: 1px solid var(--up-border);
            border-radius: 20px;
            padding: 4px 10px;
            font-size: .72rem;
            cursor: pointer;
            background: #fff;
            transition: all .15s;
        }

        .chat-opt:hover {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        /* Success toast */
        .toast-wrap {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
        }

        .toast-msg {
            background: var(--up-green);
            color: #fff;
            border-radius: 8px;
            padding: 12px 18px;
            font-size: .82rem;
            font-weight: 600;
            box-shadow: var(--shadow-md);
            display: flex;
            align-items: center;
            gap: 8px;
            animation: slideIn .3s ease;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(40px);
            }

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

        /* footer */
        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 20px 0;
            font-size: .75rem;
        }

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

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.5rem;
            }

            .emer-num {
                font-size: 1.4rem;
            }

            .hc-number {
                font-size: 1.2rem;
            }
        }
    

/* ==========================================================================
   Styles migrated from disclaimer.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 60%, #1e6ea8 100%);
            padding: 34px 0 28px;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -50px;
            top: -50px;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .09);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 1.9rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .86rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 6px;
        }

        .last-updated {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            margin-top: 10px;
        }

        .page-body {
            padding: 30px 0 60px;
        }

        .doc-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .doc-section {
            padding: 24px 28px;
            border-bottom: 1px solid var(--up-border);
            scroll-margin-top: 130px;
        }

        .doc-section:last-child {
            border-bottom: none;
        }

        .doc-section h3 {
            font-family: var(--font-hindi);
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .doc-section h3 .num-badge {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--up-light);
            color: var(--up-mid);
            font-size: .8rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .doc-section p {
            font-size: .85rem;
            line-height: 1.85;
            color: var(--up-text);
            margin-bottom: 12px;
        }

        .doc-section ul {
            margin: 0 0 12px 0;
            padding-left: 20px;
        }

        .doc-section ul li {
            font-size: .84rem;
            line-height: 1.8;
            color: var(--up-text);
            margin-bottom: 5px;
        }

        .doc-section ul li strong {
            color: var(--up-navy);
        }

        .highlight-box {
            background: var(--up-light);
            border-left: 4px solid var(--up-mid);
            border-radius: 6px;
            padding: 14px 16px;
            margin: 14px 0;
        }

        .highlight-box p {
            margin: 0;
            font-size: .82rem;
        }

        .warning-box {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            border-radius: 6px;
            padding: 14px 16px;
            margin: 14px 0;
        }

        .warning-box p {
            margin: 0;
            font-size: .82rem;
            color: #664d03;
        }

        .danger-box {
            background: #f8d7da;
            border-left: 4px solid #dc3545;
            border-radius: 6px;
            padding: 14px 16px;
            margin: 14px 0;
        }

        .danger-box p {
            margin: 0;
            font-size: .82rem;
            color: #58151c;
        }

        .toc-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 130px;
        }

        .toc-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
        }

        .toc-item {
            display: block;
            padding: 9px 14px;
            font-size: .79rem;
            color: var(--up-text);
            text-decoration: none;
            border-bottom: 1px solid var(--up-border);
            transition: all .15s;
        }

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

        .toc-item:hover {
            background: var(--up-light);
            color: var(--up-saffron);
        }

        .toc-item.active {
            background: var(--up-light);
            color: var(--up-mid);
            font-weight: 700;
            border-left: 3px solid var(--up-saffron);
        }

        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-top: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
        }

        .sidebar-body {
            padding: 14px;
        }

        .sidebar-body p {
            font-size: .78rem;
            color: var(--up-muted);
            line-height: 1.6;
            margin-bottom: 8px;
        }

        .action-btns {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .action-btn {
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 7px 14px;
            font-size: .78rem;
            font-weight: 600;
            color: var(--up-navy);
            background: #fff;
            cursor: pointer;
            transition: all .18s;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
        }

        .action-btn:hover {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.4rem;
            }

            .doc-section {
                padding: 18px 16px;
            }

            .toc-card {
                position: static;
            }
        }
    

/* ==========================================================================
   Styles migrated from district.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .14);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f8fafd;
        }

        /* ── Utility / Header (compact) ─────────── */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .65);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .65);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .header-titles .h1 {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .header-titles .h2 {
            font-size: .72rem;
            color: rgba(255, 255, 255, .55);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        /* ── Breadcrumb ──────────────────────────── */
        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 10px 0;
            font-size: .8rem;
        }

        .breadcrumb-bar .breadcrumb {
            margin: 0;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        .breadcrumb-item+.breadcrumb-item::before {
            color: var(--up-border);
        }

        /* ── District Hero Banner ────────────────── */
        .dist-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 60%, #1e6ea8 100%);
            padding: 36px 0 28px;
            position: relative;
            overflow: hidden;
        }

        .dist-hero::after {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .12);
        }

        .dist-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--up-saffron);
            color: #fff;
            border-radius: 20px;
            padding: 4px 14px;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .5px;
            margin-bottom: 10px;
        }

        .dist-name-hi {
            font-family: var(--font-hindi);
            font-size: 2.4rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.15;
        }

        .dist-name-en {
            font-size: .95rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 2px;
        }

        .dist-meta-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .8);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .75rem;
            margin: 4px 4px 0 0;
        }

        /* Stat cards in hero */
        .dist-stat-row {
            margin-top: 28px;
        }

        .dist-stat {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: var(--radius);
            padding: 14px 18px;
            text-align: center;
        }

        .dist-stat .num {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-amber);
        }

        .dist-stat .lbl {
            font-size: .7rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 2px;
        }

        /* ── Main layout ─────────────────────────── */
        .page-body {
            padding: 32px 0 48px;
        }

        /* ── Sidebar ─────────────────────────────── */
        .info-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .info-card .card-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 16px;
            font-size: .8rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .info-card .card-body-inner {
            padding: 14px 16px;
        }

        .official-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid var(--up-border);
        }

        .official-row:last-child {
            border-bottom: none;
        }

        .official-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--up-light);
            color: var(--up-mid);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .official-name {
            font-size: .85rem;
            font-weight: 600;
            color: var(--up-navy);
        }

        .official-role {
            font-size: .72rem;
            color: var(--up-muted);
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .8rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-row .lbl {
            color: var(--up-muted);
        }

        .info-row .val {
            font-weight: 600;
            color: var(--up-navy);
            text-align: right;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            font-size: .8rem;
            color: var(--up-text);
        }

        .contact-item i {
            color: var(--up-saffron);
            width: 16px;
        }

        .contact-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        /* ── Map ─────────────────────────────────── */
        #districtMap {
            height: 380px;
            border-radius: var(--radius);
            border: 1px solid var(--up-border);
            box-shadow: var(--shadow-sm);
        }

        .map-toolbar {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .map-btn {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 5px 12px;
            font-size: .78rem;
            cursor: pointer;
            color: var(--up-navy);
            font-weight: 500;
            transition: all .18s;
        }

        .map-btn:hover,
        .map-btn.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .map-legend {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 8px;
            font-size: .72rem;
            color: var(--up-muted);
        }

        .legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 4px;
        }

        /* ── Drill-down tabs ─────────────────────── */
        .drill-tabs .nav-link {
            font-size: .83rem;
            padding: 9px 18px;
            border-radius: 8px 8px 0 0;
            color: var(--up-muted);
            border: 1px solid var(--up-border);
            border-bottom: none;
            background: #f0f4f8;
            margin-right: 4px;
        }

        .drill-tabs .nav-link.active {
            background: #fff;
            color: var(--up-navy);
            font-weight: 700;
            border-bottom: 1px solid #fff;
        }

        .drill-content {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: 0 var(--radius) var(--radius) var(--radius);
            padding: 20px;
        }

        /* Tehsil accordion */
        .tehsil-item {
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 10px;
            overflow: hidden;
        }

        .tehsil-header {
            background: var(--up-light);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
            transition: background .18s;
        }

        .tehsil-header:hover {
            background: #dce8f5;
        }

        .tehsil-header.open {
            background: var(--up-navy);
            color: #fff;
        }

        .tehsil-title {
            font-weight: 700;
            font-size: .88rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tehsil-meta {
            font-size: .72rem;
            opacity: .7;
        }

        .tehsil-body {
            display: none;
            padding: 16px;
        }

        .tehsil-body.show {
            display: block;
        }

        .block-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .block-pill {
            background: var(--up-cream);
            border: 1px solid var(--up-border);
            border-radius: 20px;
            padding: 4px 14px;
            font-size: .78rem;
            color: var(--up-navy);
            font-weight: 500;
            cursor: pointer;
            transition: all .18s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .block-pill:hover {
            background: var(--up-saffron);
            color: #fff;
            border-color: var(--up-saffron);
        }

        .block-pill .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--up-saffron);
            flex-shrink: 0;
        }

        .block-pill:hover .dot {
            background: #fff;
        }

        /* Block detail panel */
        .block-detail {
            background: var(--up-light);
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 14px 16px;
            margin-top: 12px;
            display: none;
        }

        .block-detail.show {
            display: block;
        }

        .block-detail h6 {
            font-size: .82rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 10px;
        }

        .gp-chip {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: 4px;
            padding: 3px 9px;
            font-size: .72rem;
            color: var(--up-muted);
            margin: 2px;
            display: inline-block;
        }

        /* ── Services section ────────────────────── */
        .svc-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 16px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transition: box-shadow .2s, border-color .2s;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            height: 100%;
        }

        .svc-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
        }

        .svc-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .svc-title {
            font-size: .85rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 3px;
        }

        .svc-desc {
            font-size: .75rem;
            color: var(--up-muted);
            line-height: 1.45;
        }

        /* ── News mini ───────────────────────────── */
        .news-mini {
            border-bottom: 1px dashed var(--up-border);
            padding: 10px 0;
        }

        .news-mini:last-child {
            border-bottom: none;
        }

        .news-mini .date {
            font-size: .7rem;
            color: var(--up-muted);
        }

        .news-mini .title {
            font-size: .83rem;
            font-weight: 600;
            color: var(--up-navy);
            line-height: 1.4;
            margin-top: 2px;
        }

        .news-mini .dept {
            font-size: .7rem;
            font-weight: 600;
            color: var(--up-mid);
        }

        /* ── Section heads ───────────────────────── */
        .sec-head {
            margin-bottom: 18px;
        }

        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-saffron);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.45rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 36px;
            height: 3px;
            background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
            border-radius: 2px;
            margin-top: 7px;
        }

        /* ── Footer compact ──────────────────────── */
        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .5);
            padding: 22px 0;
            font-size: .78rem;
            text-align: center;
        }

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

        /* ── District selector ───────────────────── */
        .dist-selector {
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .25);
            color: #fff;
            border-radius: 6px;
            padding: 6px 12px;
            font-size: .82rem;
            cursor: pointer;
            outline: none;
        }

        .dist-selector option {
            background: var(--up-navy);
            color: #fff;
        }

        @media (max-width: 768px) {
            .dist-name-hi {
                font-size: 1.7rem;
            }

            #districtMap {
                height: 280px;
            }
        }
    

/* ==========================================================================
   Styles migrated from district2.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .14);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f8fafd;
        }

        /* ── Utility / Header (compact) ─────────── */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .65);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .65);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .header-titles .h1 {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .header-titles .h2 {
            font-size: .72rem;
            color: rgba(255, 255, 255, .55);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        /* ── Breadcrumb ──────────────────────────── */
        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 10px 0;
            font-size: .8rem;
        }

        .breadcrumb-bar .breadcrumb {
            margin: 0;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        .breadcrumb-item+.breadcrumb-item::before {
            color: var(--up-border);
        }

        /* ── District Hero Banner ────────────────── */
        .dist-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 60%, #1e6ea8 100%);
            padding: 36px 0 28px;
            position: relative;
            overflow: hidden;
        }

        .dist-hero::after {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .12);
        }

        .dist-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--up-saffron);
            color: #fff;
            border-radius: 20px;
            padding: 4px 14px;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .5px;
            margin-bottom: 10px;
        }

        .dist-name-hi {
            font-family: var(--font-hindi);
            font-size: 2.4rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.15;
        }

        .dist-name-en {
            font-size: .95rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 2px;
        }

        .dist-meta-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .8);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .75rem;
            margin: 4px 4px 0 0;
        }

        /* Stat cards in hero */
        .dist-stat-row {
            margin-top: 28px;
        }

        .dist-stat {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: var(--radius);
            padding: 14px 18px;
            text-align: center;
        }

        .dist-stat .num {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-amber);
        }

        .dist-stat .lbl {
            font-size: .7rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 2px;
        }

        /* ── Main layout ─────────────────────────── */
        .page-body {
            padding: 32px 0 48px;
        }

        /* ── Sidebar ─────────────────────────────── */
        .info-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .info-card .card-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 16px;
            font-size: .8rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .info-card .card-body-inner {
            padding: 14px 16px;
        }

        .official-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid var(--up-border);
        }

        .official-row:last-child {
            border-bottom: none;
        }

        .official-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--up-light);
            color: var(--up-mid);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .official-name {
            font-size: .85rem;
            font-weight: 600;
            color: var(--up-navy);
        }

        .official-role {
            font-size: .72rem;
            color: var(--up-muted);
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .8rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-row .lbl {
            color: var(--up-muted);
        }

        .info-row .val {
            font-weight: 600;
            color: var(--up-navy);
            text-align: right;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            font-size: .8rem;
            color: var(--up-text);
        }

        .contact-item i {
            color: var(--up-saffron);
            width: 16px;
        }

        .contact-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        /* ── Map ─────────────────────────────────── */
        #districtMap {
            height: 380px;
            border-radius: var(--radius);
            border: 1px solid var(--up-border);
            box-shadow: var(--shadow-sm);
        }

        .map-toolbar {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .map-btn {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 5px 12px;
            font-size: .78rem;
            cursor: pointer;
            color: var(--up-navy);
            font-weight: 500;
            transition: all .18s;
        }

        .map-btn:hover,
        .map-btn.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .map-legend {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 8px;
            font-size: .72rem;
            color: var(--up-muted);
        }

        .legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 4px;
        }

        /* ── Drill-down tabs ─────────────────────── */
        .drill-tabs .nav-link {
            font-size: .83rem;
            padding: 9px 18px;
            border-radius: 8px 8px 0 0;
            color: var(--up-muted);
            border: 1px solid var(--up-border);
            border-bottom: none;
            background: #f0f4f8;
            margin-right: 4px;
        }

        .drill-tabs .nav-link.active {
            background: #fff;
            color: var(--up-navy);
            font-weight: 700;
            border-bottom: 1px solid #fff;
        }

        .drill-content {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: 0 var(--radius) var(--radius) var(--radius);
            padding: 20px;
        }

        /* Tehsil accordion */
        .tehsil-item {
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 10px;
            overflow: hidden;
        }

        .tehsil-header {
            background: var(--up-light);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
            transition: background .18s;
        }

        .tehsil-header:hover {
            background: #dce8f5;
        }

        .tehsil-header.open {
            background: var(--up-navy);
            color: #fff;
        }

        .tehsil-title {
            font-weight: 700;
            font-size: .88rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tehsil-meta {
            font-size: .72rem;
            opacity: .7;
        }

        .tehsil-body {
            display: none;
            padding: 16px;
        }

        .tehsil-body.show {
            display: block;
        }

        .block-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .block-pill {
            background: var(--up-cream);
            border: 1px solid var(--up-border);
            border-radius: 20px;
            padding: 4px 14px;
            font-size: .78rem;
            color: var(--up-navy);
            font-weight: 500;
            cursor: pointer;
            transition: all .18s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .block-pill:hover {
            background: var(--up-saffron);
            color: #fff;
            border-color: var(--up-saffron);
        }

        .block-pill .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--up-saffron);
            flex-shrink: 0;
        }

        .block-pill:hover .dot {
            background: #fff;
        }

        /* Block detail panel */
        .block-detail {
            background: var(--up-light);
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 14px 16px;
            margin-top: 12px;
            display: none;
        }

        .block-detail.show {
            display: block;
        }

        .block-detail h6 {
            font-size: .82rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 10px;
        }

        .gp-chip {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: 4px;
            padding: 3px 9px;
            font-size: .72rem;
            color: var(--up-muted);
            margin: 2px;
            display: inline-block;
        }

        /* ── Services section ────────────────────── */
        .svc-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 16px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transition: box-shadow .2s, border-color .2s;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            height: 100%;
        }

        .svc-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
        }

        .svc-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .svc-title {
            font-size: .85rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 3px;
        }

        .svc-desc {
            font-size: .75rem;
            color: var(--up-muted);
            line-height: 1.45;
        }

        /* ── News mini ───────────────────────────── */
        .news-mini {
            border-bottom: 1px dashed var(--up-border);
            padding: 10px 0;
        }

        .news-mini:last-child {
            border-bottom: none;
        }

        .news-mini .date {
            font-size: .7rem;
            color: var(--up-muted);
        }

        .news-mini .title {
            font-size: .83rem;
            font-weight: 600;
            color: var(--up-navy);
            line-height: 1.4;
            margin-top: 2px;
        }

        .news-mini .dept {
            font-size: .7rem;
            font-weight: 600;
            color: var(--up-mid);
        }

        /* ── Section heads ───────────────────────── */
        .sec-head {
            margin-bottom: 18px;
        }

        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-saffron);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.45rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 36px;
            height: 3px;
            background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
            border-radius: 2px;
            margin-top: 7px;
        }

        /* ── Footer compact ──────────────────────── */
        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .5);
            padding: 22px 0;
            font-size: .78rem;
            text-align: center;
        }

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

        /* ── District selector ───────────────────── */
        .dist-selector {
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .25);
            color: #fff;
            border-radius: 6px;
            padding: 6px 12px;
            font-size: .82rem;
            cursor: pointer;
            outline: none;
        }

        .dist-selector option {
            background: var(--up-navy);
            color: #fff;
        }

        @media (max-width: 768px) {
            .dist-name-hi {
                font-size: 1.7rem;
            }

            #districtMap {
                height: 280px;
            }
        }
    

/* ==========================================================================
   Styles migrated from education-dept.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --ed: #1A3F6F;
            --ed-dark: #0d2447;
            --ed-accent: #2563C4;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* Hero */
        .page-hero {
            background: linear-gradient(135deg, #0d2447 0%, #1A3F6F 55%, #2563C4 100%);
            padding: 44px 0 36px;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .05);
        }

        .page-hero::after {
            content: '';
            position: absolute;
            left: -40px;
            bottom: -40px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(30, 95, 168, .12);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2.3rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .92rem;
            color: rgba(255, 255, 255, .7);
            margin-top: 8px;
            line-height: 1.7;
            max-width: 560px;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 20px;
            padding: 4px 13px;
            font-size: .74rem;
            color: rgba(255, 255, 255, .88);
            margin: 4px 4px 0 0;
        }

        .hero-stat {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: var(--radius);
            padding: 16px;
            text-align: center;
        }

        .hero-stat .num {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--up-amber);
        }

        .hero-stat .lbl {
            font-size: .71rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 4px;
        }

        .cta-btn {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 11px 24px;
            font-size: .88rem;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            transition: background .2s;
            text-decoration: none;
        }

        .cta-btn:hover {
            background: #c9540a;
            color: #fff;
        }

        .cta-outline {
            background: rgba(255, 255, 255, .1);
            color: #fff;
            border: 1.5px solid rgba(255, 255, 255, .3);
            border-radius: 8px;
            padding: 11px 20px;
            font-size: .84rem;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all .2s;
            text-decoration: none;
        }

        .cta-outline:hover {
            background: rgba(255, 255, 255, .2);
            color: #fff;
        }

        .page-body {
            padding: 32px 0 60px;
        }

        /* Section heads */
        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-saffron);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 38px;
            height: 3px;
            background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
            border-radius: 2px;
            margin-top: 8px;
            margin-bottom: 24px;
        }

        /* Info card */
        .info-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            margin-bottom: 20px;
        }

        .card-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 16px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .card-body-inner {
            padding: 18px;
        }

        /* Quick link cards */
        .ql-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 22px 18px;
            height: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all .2s;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }

        .ql-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--ed-accent);
            transform: translateY(-3px);
        }

        .ql-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 12px;
        }

        .ql-title {
            font-size: .9rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 5px;
        }

        .ql-desc {
            font-size: .76rem;
            color: var(--up-muted);
            line-height: 1.5;
            flex: 1;
        }

        .ql-badge {
            font-size: .66rem;
            font-weight: 700;
            padding: 2px 9px;
            border-radius: 10px;
            margin-top: 8px;
        }

        /* Portal links */
        .portal-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px dashed var(--up-border);
            text-decoration: none;
            color: inherit;
            transition: all .15s;
        }

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

        .portal-item:hover {
            color: var(--up-saffron);
        }

        .portal-item .pi-icon {
            width: 38px;
            height: 38px;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .portal-item .pi-name {
            font-size: .83rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .portal-item .pi-url {
            font-size: .71rem;
            color: var(--up-mid);
        }

        .portal-item:hover .pi-name {
            color: var(--up-saffron);
        }

        /* Stats row */
        .stat-highlight {
            background: linear-gradient(135deg, var(--up-navy), var(--ed-accent));
            border-radius: var(--radius);
            padding: 20px;
            text-align: center;
            color: #fff;
        }

        .stat-highlight .num {
            font-size: 1.9rem;
            font-weight: 700;
            color: var(--up-amber);
        }

        .stat-highlight .lbl {
            font-size: .74rem;
            color: rgba(255, 255, 255, .7);
            margin-top: 4px;
        }

        /* Officer cards */
        .officer-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: all .2s;
        }

        .officer-card:hover {
            box-shadow: var(--shadow-sm);
        }

        .officer-avatar {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--up-light);
            color: var(--ed-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            flex-shrink: 0;
        }

        .officer-name {
            font-size: .88rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 2px;
        }

        .officer-role {
            font-size: .74rem;
            color: var(--up-muted);
        }

        .officer-phone {
            font-size: .76rem;
            color: var(--ed-accent);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: 4px;
            text-decoration: none;
        }

        /* Timeline */
        .timeline-item {
            display: flex;
            gap: 14px;
            margin-bottom: 20px;
            position: relative;
        }

        .timeline-item:not(:last-child)::before {
            content: '';
            position: absolute;
            left: 15px;
            top: 32px;
            bottom: -8px;
            width: 2px;
            background: var(--up-border);
        }

        .tl-dot {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--ed-accent);
            color: #fff;
            font-size: .78rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            z-index: 1;
        }

        .tl-year {
            font-size: .82rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 3px;
        }

        .tl-desc {
            font-size: .8rem;
            color: var(--up-muted);
            line-height: 1.6;
        }

        /* Scheme cards */
        .scheme-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 18px;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: all .2s;
        }

        .scheme-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--ed-accent);
        }

        .scheme-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            margin-bottom: 12px;
        }

        .scheme-name {
            font-size: .88rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 5px;
        }

        .scheme-desc {
            font-size: .78rem;
            color: var(--up-muted);
            line-height: 1.6;
            flex: 1;
        }

        .scheme-btn {
            margin-top: 12px;
            background: var(--up-light);
            color: var(--ed-accent);
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 7px;
            font-size: .78rem;
            font-weight: 700;
            text-align: center;
            transition: all .18s;
            text-decoration: none;
            display: block;
        }

        .scheme-btn:hover {
            background: var(--ed-accent);
            color: #fff;
        }

        /* Sidebar */
        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-body {
            padding: 14px;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .79rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-row .lbl {
            color: var(--up-muted);
        }

        .info-row .val {
            font-weight: 700;
            color: var(--up-navy);
            text-align: right;
        }

        .tip-box {
            border-radius: var(--radius);
            padding: 13px 16px;
            margin-bottom: 16px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
            background: var(--up-light);
            border: 1px solid var(--up-border);
        }

        .tip-box i {
            font-size: 1rem;
            flex-shrink: 0;
            margin-top: 2px;
            color: var(--up-mid);
        }

        .tip-box p {
            font-size: .79rem;
            line-height: 1.65;
            margin: 0;
        }

        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.6rem;
            }
        }
    

/* ==========================================================================
   Styles migrated from hospital-details.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --hc: #1A7A3C;
            --hc-dark: #0f5c2c;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* Hero */
        .hosp-hero {
            background: linear-gradient(135deg, #08321b 0%, #0f5c2c 55%, #1A7A3C 100%);
            padding: 34px 0 0;
            position: relative;
            overflow: hidden;
        }

        .hosp-hero::before {
            content: '';
            position: absolute;
            right: -50px;
            top: -50px;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .05);
        }

        .hosp-logo {
            width: 74px;
            height: 74px;
            border-radius: 16px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
            flex-shrink: 0;
        }

        .hosp-name {
            font-family: var(--font-hindi);
            font-size: 1.7rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.25;
        }

        .hosp-name-en {
            font-size: .85rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 3px;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .72rem;
            color: rgba(255, 255, 255, .85);
            margin: 3px 4px 0 0;
        }

        .hero-tabs .nav-link {
            color: rgba(255, 255, 255, .6) !important;
            font-size: .82rem;
            padding: 11px 18px;
            border-bottom: 3px solid transparent;
            transition: all .2s;
            font-weight: 500;
        }

        .hero-tabs .nav-link:hover {
            color: #fff !important;
            background: rgba(255, 255, 255, .07);
        }

        .hero-tabs .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-amber) !important;
            background: rgba(255, 255, 255, .08);
        }

        .cta-btn {
            background: #fff;
            color: var(--hc);
            border: none;
            border-radius: 8px;
            padding: 10px 22px;
            font-size: .86rem;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            transition: all .2s;
            text-decoration: none;
        }

        .cta-btn:hover {
            background: var(--up-amber);
            color: #08321b;
        }

        .cta-outline {
            background: rgba(255, 255, 255, .12);
            color: #fff;
            border: 1.5px solid rgba(255, 255, 255, .3);
            border-radius: 8px;
            padding: 10px 18px;
            font-size: .82rem;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all .2s;
            text-decoration: none;
        }

        .cta-outline:hover {
            background: rgba(255, 255, 255, .22);
            color: #fff;
        }

        .page-body {
            padding: 28px 0 56px;
        }

        .info-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .card-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 16px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .card-body-inner {
            padding: 18px;
        }

        .main-tab {
            display: none;
        }

        .main-tab.active {
            display: block;
        }

        .stat-box {
            background: var(--up-light);
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 16px;
            text-align: center;
        }

        .stat-box .num {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1;
        }

        .stat-box .lbl {
            font-size: .7rem;
            color: var(--up-muted);
            margin-top: 4px;
        }

        /* Bed availability */
        .bed-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid var(--up-border);
        }

        .bed-row:last-child {
            border-bottom: none;
        }

        .bed-dept {
            font-size: .85rem;
            font-weight: 700;
            color: var(--up-navy);
            width: 140px;
            flex-shrink: 0;
        }

        .bed-progress {
            flex: 1;
            height: 12px;
            background: var(--up-border);
            border-radius: 6px;
            overflow: hidden;
        }

        .bed-progress-fill {
            height: 100%;
            border-radius: 6px;
        }

        .bed-count {
            font-size: .78rem;
            font-weight: 700;
            color: var(--up-navy);
            width: 80px;
            text-align: right;
            flex-shrink: 0;
        }

        /* Department / officer cards */
        .officer-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid var(--up-border);
        }

        .officer-row:last-child {
            border-bottom: none;
        }

        .officer-avatar {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--up-light);
            color: var(--up-mid);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .officer-name {
            font-size: .86rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .officer-role {
            font-size: .74rem;
            color: var(--up-muted);
        }

        .officer-phone {
            font-size: .76rem;
            color: var(--hc);
            font-weight: 600;
            margin-left: auto;
            text-decoration: none;
            white-space: nowrap;
        }

        /* Service grid */
        .svc-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 16px;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: all .2s;
            cursor: pointer;
        }

        .svc-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--hc);
            transform: translateY(-2px);
        }

        .svc-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            margin-bottom: 10px;
        }

        .svc-name {
            font-size: .84rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 4px;
        }

        .svc-desc {
            font-size: .75rem;
            color: var(--up-muted);
            line-height: 1.55;
            flex: 1;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .8rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-row .lbl {
            color: var(--up-muted);
        }

        .info-row .val {
            font-weight: 600;
            color: var(--up-navy);
            text-align: right;
            max-width: 60%;
        }

        .fac-chip-lg {
            background: var(--up-cream);
            border: 1px solid var(--up-border);
            border-radius: 20px;
            padding: 5px 14px;
            font-size: .79rem;
            color: var(--up-navy);
            display: inline-block;
            margin: 3px;
        }

        #hospDetailMap {
            height: 300px;
            border-radius: var(--radius);
            border: 1px solid var(--up-border);
        }

        /* OPD schedule table */
        .opd-table {
            width: 100%;
            border-collapse: collapse;
            font-size: .8rem;
        }

        .opd-table th {
            background: var(--up-light);
            color: var(--up-navy);
            font-weight: 700;
            padding: 9px 12px;
            border: 1px solid var(--up-border);
            text-align: left;
            font-size: .73rem;
        }

        .opd-table td {
            padding: 9px 12px;
            border: 1px solid var(--up-border);
            color: var(--up-text);
        }

        .opd-table tr:nth-child(even) td {
            background: var(--up-cream);
        }

        /* Reviews */
        .review-card {
            background: var(--up-cream);
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 14px;
            margin-bottom: 10px;
        }

        .review-stars {
            color: var(--up-amber);
            font-size: .85rem;
        }

        .review-text {
            font-size: .8rem;
            color: var(--up-muted);
            margin-top: 6px;
            line-height: 1.6;
        }

        .review-author {
            font-size: .72rem;
            color: var(--up-navy);
            font-weight: 600;
            margin-top: 8px;
        }

        /* Form */
        .form-ctrl {
            width: 100%;
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 9px 12px;
            font-size: .84rem;
            color: var(--up-text);
            outline: none;
            transition: border-color .2s;
            background: #fff;
        }

        .form-ctrl:focus {
            border-color: var(--up-mid);
            box-shadow: 0 0 0 3px rgba(30, 95, 168, .1);
        }

        .form-label-up {
            font-size: .78rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 4px;
        }

        .form-label-up span {
            color: #c0392b;
        }

        .form-group {
            margin-bottom: 14px;
        }

        .submit-btn {
            width: 100%;
            background: var(--hc);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 11px;
            font-size: .86rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }

        .submit-btn:hover {
            background: var(--hc-dark);
        }

        /* Sidebar */
        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-body {
            padding: 14px;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .8rem;
        }

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

        .contact-item i {
            color: var(--hc);
            width: 16px;
        }

        .contact-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .related-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: inherit;
            transition: all .2s;
            margin-bottom: 8px;
        }

        .related-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--hc);
        }

        .related-icon {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: #e9f7ee;
            color: var(--hc);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .95rem;
            flex-shrink: 0;
        }

        .float-call {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 999;
            background: var(--hc);
            color: #fff;
            border: none;
            border-radius: 50px;
            padding: 12px 22px;
            font-size: .88rem;
            font-weight: 700;
            box-shadow: 0 4px 20px rgba(26, 122, 60, .4);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 7px;
            text-decoration: none;
            transition: transform .2s;
        }

        .float-call:hover {
            transform: translateY(-2px);
            color: #fff;
        }

        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--hc);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 34px;
            height: 3px;
            background: linear-gradient(90deg, var(--hc), var(--up-amber));
            border-radius: 2px;
            margin-top: 7px;
            margin-bottom: 18px;
        }

        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .hosp-name {
                font-size: 1.3rem;
            }

            .float-call {
                bottom: 16px;
                right: 16px;
                padding: 10px 16px;
            }
        }
    

/* ==========================================================================
   Styles migrated from hospital.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --hc: #1A7A3C;
            --hc-dark: #0f5c2c;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* Hero */
        .page-hero {
            background: linear-gradient(135deg, #08321b 0%, #0f5c2c 55%, #1A7A3C 100%);
            padding: 36px 0 0;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .06);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2.1rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .7);
            margin-top: 6px;
            line-height: 1.7;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .72rem;
            color: rgba(255, 255, 255, .85);
            margin: 3px 4px 0 0;
        }

        .hero-stat {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: var(--radius);
            padding: 14px;
            text-align: center;
        }

        .hero-stat .num {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-amber);
        }

        .hero-stat .lbl {
            font-size: .7rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 3px;
        }

        .hero-tabs .nav-link {
            color: rgba(255, 255, 255, .6) !important;
            font-size: .82rem;
            padding: 11px 18px;
            border-bottom: 3px solid transparent;
            transition: all .2s;
            font-weight: 500;
        }

        .hero-tabs .nav-link:hover {
            color: #fff !important;
            background: rgba(255, 255, 255, .07);
        }

        .hero-tabs .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-amber) !important;
            background: rgba(255, 255, 255, .08);
        }

        /* Emergency strip */
        .emer-strip {
            background: #0f5c2c;
            padding: 12px 0;
        }

        .emer-num {
            font-size: 1.5rem;
            font-weight: 700;
            color: #fff;
        }

        .emer-call {
            background: #fff;
            color: #0f5c2c;
            border: none;
            border-radius: 8px;
            padding: 9px 20px;
            font-size: .84rem;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: transform .15s;
        }

        .emer-call:hover {
            transform: scale(1.04);
            color: #0f5c2c;
        }

        /* Search bar */
        .search-bar-wrap {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 14px 0;
            position: sticky;
            top: 49px;
            z-index: 900;
            box-shadow: 0 2px 8px rgba(10, 34, 64, .06);
        }

        .search-input-group {
            display: flex;
            border: 1.5px solid var(--up-border);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            transition: border-color .2s;
            box-shadow: var(--shadow-sm);
        }

        .search-input-group:focus-within {
            border-color: var(--up-mid);
            box-shadow: 0 0 0 3px rgba(30, 95, 168, .1);
        }

        .search-input-group .s-icon {
            padding: 0 14px;
            display: flex;
            align-items: center;
            color: var(--up-muted);
        }

        .search-input-group input {
            flex: 1;
            border: none;
            outline: none;
            font-size: .9rem;
            padding: 10px 0;
            color: var(--up-text);
            background: #fff;
        }

        .search-input-group input::placeholder {
            color: var(--up-muted);
        }

        .search-input-group .s-btn {
            background: var(--hc);
            color: #fff;
            border: none;
            padding: 0 20px;
            font-size: .84rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }

        .search-input-group .s-btn:hover {
            background: var(--hc-dark);
        }

        .filter-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 10px;
            align-items: center;
        }

        .fp {
            border: 1.5px solid var(--up-border);
            border-radius: 20px;
            padding: 4px 13px;
            font-size: .75rem;
            font-weight: 500;
            color: var(--up-navy);
            background: #fff;
            cursor: pointer;
            white-space: nowrap;
            transition: all .18s;
        }

        .fp:hover {
            border-color: var(--hc);
            color: var(--hc);
        }

        .fp.active {
            background: var(--hc);
            color: #fff;
            border-color: var(--hc);
        }

        .fp .cnt {
            font-size: .67rem;
            opacity: .7;
            margin-left: 2px;
        }

        .page-body {
            padding: 28px 0 56px;
        }

        /* Sidebar */
        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-body {
            padding: 14px;
        }

        .filter-label {
            font-size: .75rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 6px;
            margin-top: 10px;
        }

        .filter-label:first-child {
            margin-top: 0;
        }

        .filter-select {
            width: 100%;
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 7px 10px;
            font-size: .79rem;
            color: var(--up-text);
            outline: none;
            cursor: pointer;
            background: #fff;
            transition: border-color .2s;
            margin-bottom: 8px;
        }

        .filter-select:focus {
            border-color: var(--up-mid);
        }

        .filter-check {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 5px 0;
            font-size: .79rem;
            cursor: pointer;
            border-bottom: 1px dashed var(--up-border);
        }

        .filter-check:last-child {
            border-bottom: none;
        }

        .filter-check input {
            accent-color: var(--hc);
            width: 14px;
            height: 14px;
        }

        .reset-filter-btn {
            width: 100%;
            background: transparent;
            color: var(--up-muted);
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 7px;
            font-size: .76rem;
            cursor: pointer;
            margin-top: 6px;
            transition: all .2s;
        }

        .reset-filter-btn:hover {
            color: var(--up-navy);
            border-color: var(--up-navy);
        }

        /* Map */
        #hospitalMap {
            height: 420px;
            border-radius: var(--radius);
            border: 1px solid var(--up-border);
            box-shadow: var(--shadow-sm);
        }

        .map-toolbar {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .map-btn {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 5px 12px;
            font-size: .78rem;
            cursor: pointer;
            color: var(--up-navy);
            font-weight: 500;
            transition: all .18s;
        }

        .map-btn:hover,
        .map-btn.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .map-legend {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 8px;
            font-size: .72rem;
            color: var(--up-muted);
        }

        .legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 4px;
        }

        /* Sort bar */
        .sort-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .sort-bar .rc {
            font-size: .82rem;
            color: var(--up-muted);
        }

        .sort-bar .rc strong {
            color: var(--up-navy);
        }

        .view-btns button {
            background: transparent;
            border: 1px solid var(--up-border);
            padding: 6px 10px;
            font-size: .85rem;
            color: var(--up-muted);
            cursor: pointer;
            transition: all .2s;
        }

        .view-btns button:first-child {
            border-radius: 6px 0 0 6px;
        }

        .view-btns button:last-child {
            border-radius: 0 6px 6px 0;
        }

        .view-btns button.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        /* Hospital card */
        .hosp-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 18px;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: all .2s;
            cursor: pointer;
        }

        .hosp-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--hc);
            transform: translateY(-2px);
        }

        .hosp-card.phc {
            border-left: 4px solid var(--up-mid);
        }

        .hosp-card.chc {
            border-left: 4px solid var(--up-amber);
        }

        .hosp-card.district {
            border-left: 4px solid var(--hc);
        }

        .hosp-card.medical {
            border-left: 4px solid #5A2DA0;
        }

        .hc-top {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 10px;
        }

        .hc-icon {
            width: 46px;
            height: 46px;
            border-radius: 10px;
            background: #e9f7ee;
            color: var(--hc);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .hc-name {
            font-size: .9rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1.35;
        }

        .hc-zone {
            font-size: .72rem;
            color: var(--up-muted);
            margin-top: 2px;
        }

        .hc-type-badge {
            font-size: .62rem;
            font-weight: 700;
            padding: 1px 7px;
            border-radius: 10px;
            margin-left: 5px;
            vertical-align: middle;
            white-space: nowrap;
        }

        .badge-phc {
            background: #EEF4FB;
            color: var(--up-mid);
        }

        .badge-chc {
            background: #FFF3E8;
            color: var(--up-amber);
        }

        .badge-district {
            background: #e9f7ee;
            color: var(--hc);
        }

        .badge-medical {
            background: #F3EEFB;
            color: #5A2DA0;
        }

        .hc-meta {
            font-size: .78rem;
            color: var(--up-muted);
            line-height: 1.7;
            flex: 1;
        }

        .hc-meta div {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            margin-bottom: 3px;
        }

        .hc-meta i {
            color: var(--hc);
            flex-shrink: 0;
            margin-top: 2px;
            font-size: .82rem;
        }

        .hc-facilities {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 8px;
        }

        .fac-chip {
            font-size: .64rem;
            background: var(--up-cream);
            border: 1px solid var(--up-border);
            color: var(--up-navy);
            padding: 1px 7px;
            border-radius: 8px;
        }

        .hc-footer {
            display: flex;
            gap: 6px;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed var(--up-border);
            flex-wrap: wrap;
        }

        .hc-btn {
            font-size: .74rem;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all .18s;
            text-decoration: none;
            flex: 1;
            justify-content: center;
        }

        .hc-btn-view {
            background: var(--up-light);
            color: var(--up-mid);
        }

        .hc-btn-view:hover {
            background: var(--up-mid);
            color: #fff;
        }

        .hc-btn-call {
            background: #e9f7ee;
            color: var(--hc);
        }

        .hc-btn-call:hover {
            background: var(--hc);
            color: #fff;
        }

        .hc-bed-info {
            font-size: .71rem;
            color: var(--up-navy);
            font-weight: 600;
            margin-top: 6px;
            display: flex;
            justify-content: space-between;
        }

        .bed-avail {
            color: var(--hc);
        }

        .bed-low {
            color: #c0392b;
        }

        /* List view */
        .list-view .hosp-card {
            flex-direction: row;
            align-items: center;
            padding: 12px 16px;
            gap: 14px;
        }

        .list-view .hc-top {
            margin-bottom: 0;
            flex: 1;
            min-width: 0;
        }

        .list-view .hc-icon {
            width: 38px;
            height: 38px;
            font-size: 1rem;
        }

        .list-view .hc-meta {
            display: none;
        }

        .list-view .hc-facilities {
            display: none;
        }

        .list-view .hc-footer {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
            flex-shrink: 0;
        }

        .list-view .hc-bed-info {
            display: none;
        }

        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: var(--up-muted);
        }

        .empty-state .es-icon {
            font-size: 3rem;
            margin-bottom: 12px;
            opacity: .3;
        }

        .tip-box {
            border-radius: var(--radius);
            padding: 12px 16px;
            margin-bottom: 14px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
            background: var(--up-light);
            border: 1px solid var(--up-border);
        }

        .tip-box i {
            font-size: 1rem;
            flex-shrink: 0;
            margin-top: 2px;
            color: var(--up-mid);
        }

        .tip-box p {
            font-size: .79rem;
            line-height: 1.65;
            margin: 0;
        }

        .main-tab {
            display: none;
        }

        .main-tab.active {
            display: block;
        }

        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--hc);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 36px;
            height: 3px;
            background: linear-gradient(90deg, var(--hc), var(--up-amber));
            border-radius: 2px;
            margin-top: 7px;
            margin-bottom: 20px;
        }

        mark {
            background: rgba(232, 101, 10, .15);
            color: var(--up-saffron);
            padding: 0 2px;
            border-radius: 2px;
        }

        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.5rem;
            }

            #hospitalMap {
                height: 280px;
            }

            .filter-row {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 4px;
            }

            .fp {
                flex-shrink: 0;
            }
        }
    

/* ==========================================================================
   Styles migrated from index2.html
   ========================================================================== */


        /* ── Design tokens ─────────────────────────────────────── */
        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid-blue: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-gold: #D4A017;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .12);
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #fff;
        }

        /* ── Utility strip ─────────────────────────────────────── */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .75);
            font-size: .78rem;
            padding: 5px 0;
            letter-spacing: .3px;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .75);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .util-strip .sep {
            margin: 0 10px;
            opacity: .35;
        }

        /* ── Header ────────────────────────────────────────────── */
        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 14px 0;
        }

        .header-emblem {
            width: 62px;
            height: 62px;
            background: radial-gradient(circle, var(--up-amber) 0%, var(--up-gold) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            color: var(--up-navy);
            font-weight: 700;
            border: 2px solid rgba(255, 255, 255, .2);
            flex-shrink: 0;
        }

        .header-titles {
            line-height: 1.25;
        }

        .header-titles .hindi-title {
            font-family: var(--font-hindi);
            font-size: 1.45rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: .5px;
        }

        .header-titles .eng-title {
            font-size: .82rem;
            color: rgba(255, 255, 255, .65);
            letter-spacing: 1.2px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .header-right {
            text-align: right;
        }

        .header-right .helpline {
            background: var(--up-saffron);
            color: #fff;
            border-radius: 20px;
            padding: 4px 14px;
            font-size: .78rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 6px;
        }

        .lang-btn {
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .25);
            color: #fff;
            padding: 3px 10px;
            border-radius: 4px;
            font-size: .75rem;
            cursor: pointer;
            transition: background .2s;
        }

        .lang-btn:hover,
        .lang-btn.active {
            background: var(--up-mid-blue);
        }

        /* ── Navigation ────────────────────────────────────────── */
        .main-nav {
            background: var(--up-mid-blue);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .navbar-nav .nav-link {
            color: rgba(255, 255, 255, .88) !important;
            font-size: .85rem;
            font-weight: 500;
            padding: 14px 15px !important;
            letter-spacing: .2px;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .navbar-nav .nav-link:hover,
        .main-nav .navbar-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .08);
        }

        .main-nav .dropdown-menu {
            background: var(--up-navy);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--radius);
            margin-top: 0;
        }

        .main-nav .dropdown-item {
            color: rgba(255, 255, 255, .8);
            font-size: .82rem;
            padding: 8px 16px;
        }

        .main-nav .dropdown-item:hover {
            background: var(--up-mid-blue);
            color: #fff;
        }

        .nav-search-box {
            background: rgba(255, 255, 255, .15);
            border: 1px solid rgba(255, 255, 255, .3);
            border-radius: 20px;
            color: #fff;
            padding: 6px 16px;
            font-size: .83rem;
            width: 220px;
            outline: none;
            transition: background .2s, width .3s;
        }

        .nav-search-box::placeholder {
            color: rgba(255, 255, 255, .55);
        }

        .nav-search-box:focus {
            background: rgba(255, 255, 255, .22);
            width: 260px;
        }

        /* ── Hero / Ticker ─────────────────────────────────────── */
        .ticker-bar {
            background: var(--up-navy);
            color: #fff;
            padding: 8px 0;
            overflow: hidden;
        }

        .ticker-label {
            background: var(--up-saffron);
            padding: 2px 14px;
            font-size: .78rem;
            font-weight: 700;
            border-radius: 3px;
            white-space: nowrap;
            margin-right: 12px;
            letter-spacing: .5px;
        }

        .ticker-track {
            display: flex;
            animation: ticker-scroll 30s linear infinite;
            white-space: nowrap;
        }

        .ticker-track span {
            font-size: .8rem;
            color: rgba(255, 255, 255, .85);
            margin-right: 60px;
        }

        .ticker-track span::before {
            content: '◆  ';
            color: var(--up-amber);
            font-size: .6rem;
        }

        @keyframes ticker-scroll {
            from {
                transform: translateX(100%);
            }

            to {
                transform: translateX(-100%);
            }
        }

        /* ── Hero Banner ───────────────────────────────────────── */
        .hero {
            background: linear-gradient(160deg, var(--up-navy) 0%, var(--up-blue) 55%, var(--up-mid-blue) 100%);
            padding: 56px 0 44px;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 45%;
            background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Emblem_of_Uttar_Pradesh.svg/300px-Emblem_of_Uttar_Pradesh.svg.png') center/contain no-repeat;
            opacity: .05;
        }

        .hero-eyebrow {
            font-size: .8rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-amber);
            font-weight: 600;
            margin-bottom: 10px;
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2.8rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
            margin-bottom: 8px;
        }

        .hero-subtitle {
            font-size: 1.05rem;
            color: rgba(255, 255, 255, .7);
            margin-bottom: 28px;
            max-width: 540px;
            line-height: 1.6;
        }

        .hero-search {
            background: #fff;
            border-radius: 50px;
            padding: 6px 6px 6px 20px;
            display: flex;
            align-items: center;
            max-width: 520px;
            box-shadow: 0 4px 24px rgba(10, 34, 64, .3);
        }

        .hero-search input {
            flex: 1;
            border: none;
            outline: none;
            font-size: .95rem;
            color: var(--up-text);
            background: transparent;
        }

        .hero-search button {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 40px;
            padding: 8px 22px;
            font-size: .88rem;
            font-weight: 600;
            cursor: pointer;
            transition: background .2s;
        }

        .hero-search button:hover {
            background: #c9540a;
        }

        .hero-tags {
            margin-top: 14px;
        }

        .hero-tag {
            background: rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .75);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .75rem;
            cursor: pointer;
            display: inline-block;
            margin: 3px 4px 3px 0;
            transition: background .2s;
        }

        .hero-tag:hover {
            background: rgba(255, 255, 255, .2);
            color: #fff;
        }

        /* Stats row in hero */
        .hero-stats {
            margin-top: 40px;
        }

        .hero-stat {
            border-left: 3px solid var(--up-saffron);
            padding-left: 14px;
        }

        .hero-stat .num {
            font-size: 1.7rem;
            font-weight: 700;
            color: #fff;
            line-height: 1;
        }

        .hero-stat .lbl {
            font-size: .75rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 3px;
        }

        /* ── Quick access cards ─────────────────────────────────── */
        .quick-section {
            background: var(--up-cream);
            padding: 48px 0;
        }

        .section-head {
            margin-bottom: 32px;
        }

        .section-eyebrow {
            font-size: .75rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-saffron);
            font-weight: 700;
            margin-bottom: 6px;
        }

        .section-title {
            font-family: var(--font-hindi);
            font-size: 1.7rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .section-divider {
            width: 48px;
            height: 4px;
            background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
            border-radius: 2px;
            margin: 10px 0 0;
        }

        .quick-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 22px 18px;
            text-align: center;
            transition: transform .22s, box-shadow .22s, border-color .22s;
            cursor: pointer;
            height: 100%;
            text-decoration: none;
            display: block;
            color: inherit;
        }

        .quick-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid-blue);
        }

        .quick-icon {
            width: 54px;
            height: 54px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin: 0 auto 12px;
        }

        .quick-card .q-title {
            font-size: .88rem;
            font-weight: 600;
            color: var(--up-navy);
            margin-bottom: 4px;
        }

        .quick-card .q-sub {
            font-size: .75rem;
            color: var(--up-muted);
        }

        /* ── News + GOs ─────────────────────────────────────────── */
        .news-section {
            background: #fff;
            padding: 52px 0;
        }

        .news-card {
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            transition: box-shadow .2s, border-color .2s;
        }

        .news-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid-blue);
        }

        .news-card .news-meta {
            font-size: .72rem;
            color: var(--up-muted);
            margin-bottom: 6px;
        }

        .news-card .news-title {
            font-size: .9rem;
            font-weight: 600;
            color: var(--up-navy);
            line-height: 1.4;
            margin-bottom: 8px;
        }

        .news-card .news-dept {
            font-size: .72rem;
            font-weight: 600;
            background: var(--up-light);
            color: var(--up-mid-blue);
            border-radius: 4px;
            padding: 2px 8px;
            display: inline-block;
        }

        .go-item {
            padding: 12px 0;
            border-bottom: 1px dashed var(--up-border);
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

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

        .go-badge {
            background: var(--up-saffron);
            color: #fff;
            font-size: .65rem;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 3px;
            white-space: nowrap;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .go-title {
            font-size: .83rem;
            color: var(--up-navy);
            font-weight: 500;
            line-height: 1.4;
        }

        .go-date {
            font-size: .7rem;
            color: var(--up-muted);
            margin-top: 2px;
        }

        /* Tab pills */
        .tab-pill .nav-link {
            border-radius: 20px;
            font-size: .82rem;
            padding: 6px 18px;
            color: var(--up-muted);
            border: 1px solid var(--up-border);
            margin-right: 6px;
        }

        .tab-pill .nav-link.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        /* ── District section ───────────────────────────────────── */
        .district-section {
            background: var(--up-light);
            padding: 52px 0;
        }

        .region-group {
            margin-bottom: 28px;
        }

        .region-name {
            font-size: .75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--up-saffron);
            margin-bottom: 10px;
        }

        .dist-pill {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: 20px;
            padding: 4px 14px;
            font-size: .8rem;
            color: var(--up-navy);
            font-weight: 500;
            margin: 4px 4px 4px 0;
            display: inline-block;
            cursor: pointer;
            transition: background .18s, border-color .18s, color .18s;
            text-decoration: none;
        }

        .dist-pill:hover {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        /* ── Schemes ────────────────────────────────────────────── */
        .schemes-section {
            background: #fff;
            padding: 52px 0;
        }

        .scheme-card {
            background: var(--up-cream);
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 20px;
            height: 100%;
            transition: box-shadow .2s, border-color .2s;
            cursor: pointer;
        }

        .scheme-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-saffron);
        }

        .scheme-icon {
            font-size: 1.6rem;
            margin-bottom: 10px;
        }

        .scheme-title {
            font-size: .88rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 4px;
        }

        .scheme-desc {
            font-size: .77rem;
            color: var(--up-muted);
            line-height: 1.5;
        }

        .scheme-link {
            font-size: .77rem;
            font-weight: 600;
            color: var(--up-saffron);
            margin-top: 10px;
            display: inline-block;
            text-decoration: none;
        }

        .scheme-link:hover {
            text-decoration: underline;
        }

        /* ── Department portals ─────────────────────────────────── */
        .portals-section {
            background: var(--up-navy);
            padding: 52px 0;
        }

        .portals-section .section-title {
            color: #fff;
        }

        .portals-section .section-eyebrow {
            color: var(--up-amber);
        }

        .portal-tile {
            background: rgba(255, 255, 255, .07);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: var(--radius);
            padding: 16px 14px;
            text-align: center;
            cursor: pointer;
            height: 100%;
            transition: background .2s, border-color .2s;
            text-decoration: none;
            display: block;
        }

        .portal-tile:hover {
            background: rgba(255, 255, 255, .14);
            border-color: var(--up-saffron);
        }

        .portal-tile .pt-icon {
            font-size: 1.6rem;
            margin-bottom: 8px;
        }

        .portal-tile .pt-name {
            font-size: .8rem;
            font-weight: 600;
            color: #fff;
        }

        .portal-tile .pt-link {
            font-size: .7rem;
            color: rgba(255, 255, 255, .45);
        }

        /* ── Grievance / Helpline strip ─────────────────────────── */
        .helpline-strip {
            background: linear-gradient(90deg, var(--up-saffron), #c9540a);
            padding: 22px 0;
            color: #fff;
        }

        .helpline-strip .hs-num {
            font-size: 2rem;
            font-weight: 700;
        }

        .helpline-strip .hs-lbl {
            font-size: .82rem;
            opacity: .85;
        }

        .hs-btn {
            background: #fff;
            color: var(--up-saffron);
            border: none;
            border-radius: 6px;
            padding: 10px 24px;
            font-weight: 700;
            font-size: .88rem;
            cursor: pointer;
            transition: transform .15s;
        }

        .hs-btn:hover {
            transform: scale(1.03);
        }

        /* ── Footer ─────────────────────────────────────────────── */
        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .65);
            padding: 50px 0 0;
        }

        .footer-brand .hindi {
            font-family: var(--font-hindi);
            font-size: 1.1rem;
            color: #fff;
        }

        .footer-brand .eng {
            font-size: .75rem;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, .4);
            margin-top: 3px;
        }

        .footer-brand p {
            font-size: .78rem;
            margin-top: 10px;
            line-height: 1.6;
        }

        .site-footer h6 {
            color: #fff;
            font-size: .8rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .site-footer ul {
            list-style: none;
            padding: 0;
        }

        .site-footer ul li a {
            color: rgba(255, 255, 255, .55);
            font-size: .8rem;
            text-decoration: none;
            line-height: 2;
            transition: color .2s;
        }

        .site-footer ul li a:hover {
            color: var(--up-amber);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .08);
            margin-top: 36px;
            padding: 18px 0;
            font-size: .75rem;
            color: rgba(255, 255, 255, .35);
        }

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

        .footer-bottom a:hover {
            color: var(--up-amber);
        }

        /* ── Misc ───────────────────────────────────────────────── */
        .btn-outline-saffron {
            border: 1.5px solid var(--up-saffron);
            color: var(--up-saffron);
            background: transparent;
            border-radius: 6px;
            padding: 6px 18px;
            font-size: .82rem;
            font-weight: 600;
            cursor: pointer;
            transition: all .2s;
        }

        .btn-outline-saffron:hover {
            background: var(--up-saffron);
            color: #fff;
        }

        .btn-navy {
            background: var(--up-navy);
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 8px 20px;
            font-size: .84rem;
            font-weight: 600;
            cursor: pointer;
        }

        .btn-navy:hover {
            background: var(--up-blue);
        }

        .view-all-link {
            font-size: .82rem;
            font-weight: 600;
            color: var(--up-mid-blue);
            text-decoration: none;
        }

        .view-all-link:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 1.9rem;
            }

            .header-titles .hindi-title {
                font-size: 1.1rem;
            }

            .ticker-track {
                animation-duration: 18s;
            }
        }
    

/* ==========================================================================
   Styles migrated from invest-up.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* Hero */
        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 50%, #1e6ea8 100%);
            padding: 40px 0 0;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .1);
        }

        .page-hero::after {
            content: '';
            position: absolute;
            left: -40px;
            bottom: -40px;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: rgba(30, 95, 168, .15);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2.2rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .9rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 8px;
            line-height: 1.7;
            max-width: 560px;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 20px;
            padding: 4px 13px;
            font-size: .74rem;
            color: rgba(255, 255, 255, .85);
            margin: 4px 4px 0 0;
        }

        .hero-stat {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: var(--radius);
            padding: 16px;
            text-align: center;
        }

        .hero-stat .num {
            font-size: 1.7rem;
            font-weight: 700;
            color: var(--up-amber);
        }

        .hero-stat .lbl {
            font-size: .71rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 4px;
        }

        .hero-tabs .nav-link {
            color: rgba(255, 255, 255, .6) !important;
            font-size: .82rem;
            padding: 11px 18px;
            border-bottom: 3px solid transparent;
            transition: all .2s;
            font-weight: 500;
        }

        .hero-tabs .nav-link:hover {
            color: #fff !important;
            background: rgba(255, 255, 255, .07);
        }

        .hero-tabs .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron) !important;
            background: rgba(255, 255, 255, .08);
        }

        .cta-btn {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 11px 26px;
            font-size: .88rem;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            transition: background .2s;
            text-decoration: none;
        }

        .cta-btn:hover {
            background: #c9540a;
            color: #fff;
        }

        .cta-outline {
            background: rgba(255, 255, 255, .1);
            color: #fff;
            border: 1.5px solid rgba(255, 255, 255, .3);
            border-radius: 8px;
            padding: 11px 22px;
            font-size: .84rem;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all .2s;
            text-decoration: none;
        }

        .cta-outline:hover {
            background: rgba(255, 255, 255, .2);
            color: #fff;
        }

        .page-body {
            padding: 30px 0 60px;
        }

        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-saffron);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 38px;
            height: 3px;
            background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
            border-radius: 2px;
            margin-top: 8px;
            margin-bottom: 24px;
        }

        .info-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            margin-bottom: 20px;
        }

        .card-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 16px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .card-body-inner {
            padding: 18px;
        }

        /* Sector cards */
        .sector-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 18px;
            height: 100%;
            text-align: center;
            transition: all .2s;
            cursor: pointer;
        }

        .sector-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
            transform: translateY(-3px);
        }

        .sector-icon {
            width: 54px;
            height: 54px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin: 0 auto 12px;
        }

        .sector-name {
            font-size: .86rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 4px;
        }

        .sector-stat {
            font-size: .72rem;
            color: var(--up-green);
            font-weight: 600;
        }

        /* Industrial zone map markers list */
        .zone-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
            gap: 14px;
            transition: all .2s;
            cursor: pointer;
        }

        .zone-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
        }

        .zone-icon {
            width: 46px;
            height: 46px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .zone-name {
            font-size: .88rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 3px;
        }

        .zone-meta {
            font-size: .74rem;
            color: var(--up-muted);
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 6px;
        }

        .zone-meta span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .zone-badge {
            font-size: .66rem;
            font-weight: 700;
            padding: 2px 9px;
            border-radius: 10px;
        }

        /* MoU tracker table */
        .mou-table {
            width: 100%;
            border-collapse: collapse;
            font-size: .8rem;
        }

        .mou-table th {
            background: var(--up-light);
            color: var(--up-navy);
            font-weight: 700;
            padding: 9px 12px;
            border-bottom: 1px solid var(--up-border);
            text-align: left;
            font-size: .72rem;
            letter-spacing: .3px;
        }

        .mou-table td {
            padding: 10px 12px;
            border-bottom: 1px solid var(--up-border);
            vertical-align: middle;
        }

        .mou-table tr:last-child td {
            border-bottom: none;
        }

        .mou-table tr:hover td {
            background: var(--up-cream);
        }

        .mou-status {
            font-size: .66rem;
            font-weight: 700;
            padding: 3px 9px;
            border-radius: 10px;
            white-space: nowrap;
        }

        .status-ground {
            background: #d4edda;
            color: #155724;
        }

        .status-progress {
            background: #fff3cd;
            color: #856404;
        }

        .status-signed {
            background: #d1ecf1;
            color: #0c5460;
        }

        /* Sidebar */
        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-body {
            padding: 14px;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .79rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-row .lbl {
            color: var(--up-muted);
        }

        .info-row .val {
            font-weight: 700;
            color: var(--up-navy);
            text-align: right;
        }

        /* Incentive cards */
        .incentive-item {
            display: flex;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px dashed var(--up-border);
        }

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

        .inc-icon {
            width: 38px;
            height: 38px;
            border-radius: 9px;
            background: var(--up-light);
            color: var(--up-mid);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .inc-title {
            font-size: .84rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 2px;
        }

        .inc-desc {
            font-size: .76rem;
            color: var(--up-muted);
            line-height: 1.5;
        }

        /* Steps */
        .step-item {
            display: flex;
            gap: 14px;
            margin-bottom: 18px;
        }

        .step-num {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--up-navy);
            color: #fff;
            font-size: .8rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .step-title {
            font-size: .85rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 3px;
        }

        .step-desc {
            font-size: .78rem;
            color: var(--up-muted);
            line-height: 1.6;
        }

        /* Form */
        .form-ctrl {
            width: 100%;
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 9px 12px;
            font-size: .84rem;
            color: var(--up-text);
            outline: none;
            transition: border-color .2s;
            background: #fff;
        }

        .form-ctrl:focus {
            border-color: var(--up-mid);
            box-shadow: 0 0 0 3px rgba(30, 95, 168, .1);
        }

        .form-label-up {
            font-size: .78rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 4px;
        }

        .form-label-up span {
            color: #c0392b;
        }

        .form-group {
            margin-bottom: 14px;
        }

        .submit-btn {
            width: 100%;
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 11px;
            font-size: .86rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }

        .submit-btn:hover {
            background: #c9540a;
        }

        .filter-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 18px;
            align-items: center;
        }

        .fp {
            border: 1.5px solid var(--up-border);
            border-radius: 20px;
            padding: 4px 13px;
            font-size: .75rem;
            font-weight: 500;
            color: var(--up-navy);
            background: #fff;
            cursor: pointer;
            white-space: nowrap;
            transition: all .18s;
        }

        .fp:hover {
            border-color: var(--up-mid);
            color: var(--up-mid);
        }

        .fp.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .tip-box {
            border-radius: var(--radius);
            padding: 13px 16px;
            margin-bottom: 16px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
            background: var(--up-light);
            border: 1px solid var(--up-border);
        }

        .tip-box i {
            font-size: 1rem;
            flex-shrink: 0;
            margin-top: 2px;
            color: var(--up-mid);
        }

        .tip-box p {
            font-size: .79rem;
            line-height: 1.65;
            margin: 0;
        }

        .main-tab {
            display: none;
        }

        .main-tab.active {
            display: block;
        }

        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.6rem;
            }
        }
    

/* ==========================================================================
   Styles migrated from media-gallery.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        /* ── Chrome ── */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* ── Hero ── */
        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 55%, #1e6ea8 100%);
            padding: 36px 0 0;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .09);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 6px;
            line-height: 1.7;
        }

        .hero-stat {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: var(--radius);
            padding: 14px;
            text-align: center;
        }

        .hero-stat .num {
            font-size: 1.45rem;
            font-weight: 700;
            color: var(--up-amber);
        }

        .hero-stat .lbl {
            font-size: .7rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 3px;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .72rem;
            color: rgba(255, 255, 255, .8);
            margin: 3px 4px 3px 0;
        }

        .hero-tabs .nav-link {
            color: rgba(255, 255, 255, .6) !important;
            font-size: .82rem;
            padding: 11px 18px;
            border-bottom: 3px solid transparent;
            transition: all .2s;
            font-weight: 500;
        }

        .hero-tabs .nav-link:hover {
            color: #fff !important;
            background: rgba(255, 255, 255, .07);
        }

        .hero-tabs .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron) !important;
            background: rgba(255, 255, 255, .08);
        }

        /* ── Search bar ── */
        .search-bar-wrap {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 14px 0;
            position: sticky;
            top: 49px;
            z-index: 900;
            box-shadow: 0 2px 8px rgba(10, 34, 64, .06);
        }

        .search-input-group {
            display: flex;
            border: 1.5px solid var(--up-border);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            transition: border-color .2s;
            box-shadow: var(--shadow-sm);
        }

        .search-input-group:focus-within {
            border-color: var(--up-mid);
            box-shadow: 0 0 0 3px rgba(30, 95, 168, .1);
        }

        .search-input-group .s-icon {
            padding: 0 14px;
            display: flex;
            align-items: center;
            color: var(--up-muted);
        }

        .search-input-group input {
            flex: 1;
            border: none;
            outline: none;
            font-size: .9rem;
            padding: 10px 0;
            color: var(--up-text);
            background: #fff;
        }

        .search-input-group input::placeholder {
            color: var(--up-muted);
        }

        .search-input-group .s-btn {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            padding: 0 20px;
            font-size: .84rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }

        .search-input-group .s-btn:hover {
            background: #c9540a;
        }

        .filter-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 10px;
            align-items: center;
        }

        .fp {
            border: 1.5px solid var(--up-border);
            border-radius: 20px;
            padding: 4px 13px;
            font-size: .75rem;
            font-weight: 500;
            color: var(--up-navy);
            background: #fff;
            cursor: pointer;
            white-space: nowrap;
            transition: all .18s;
            user-select: none;
        }

        .fp:hover {
            border-color: var(--up-mid);
            color: var(--up-mid);
        }

        .fp.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .fp .cnt {
            font-size: .67rem;
            opacity: .7;
            margin-left: 2px;
        }

        /* ── Page body ── */
        .page-body {
            padding: 28px 0 56px;
        }

        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-saffron);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 36px;
            height: 3px;
            background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
            border-radius: 2px;
            margin-top: 7px;
            margin-bottom: 20px;
        }

        /* ── Photo grid (CSS-generated thumbnails, no external images) ── */
        .photo-card {
            border-radius: var(--radius);
            overflow: hidden;
            cursor: pointer;
            position: relative;
            box-shadow: var(--shadow-sm);
            transition: transform .2s, box-shadow .2s;
            background: #fff;
            border: 1px solid var(--up-border);
        }

        .photo-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        .photo-thumb {
            height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.6rem;
            position: relative;
            overflow: hidden;
        }

        .photo-thumb::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .55) 100%);
        }

        .photo-thumb .ph-count {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, .55);
            color: #fff;
            font-size: .7rem;
            font-weight: 700;
            padding: 3px 9px;
            border-radius: 12px;
            z-index: 2;
            backdrop-filter: blur(2px);
        }

        .photo-thumb .ph-icon {
            z-index: 1;
            opacity: .9;
        }

        .photo-info {
            padding: 12px 14px;
        }

        .photo-cat-tag {
            font-size: .66rem;
            font-weight: 700;
            color: var(--up-saffron);
            text-transform: uppercase;
            letter-spacing: .4px;
            margin-bottom: 4px;
        }

        .photo-title {
            font-size: .82rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1.4;
            margin-bottom: 4px;
        }

        .photo-date {
            font-size: .7rem;
            color: var(--up-muted);
        }

        /* ── Video card ── */
        .video-card {
            border-radius: var(--radius);
            overflow: hidden;
            cursor: pointer;
            background: #fff;
            border: 1px solid var(--up-border);
            box-shadow: var(--shadow-sm);
            transition: all .2s;
        }

        .video-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
        }

        .video-thumb {
            height: 170px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .video-thumb .play-btn {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .92);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: var(--up-saffron);
            box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
            transition: transform .2s;
            z-index: 2;
        }

        .video-card:hover .play-btn {
            transform: scale(1.1);
        }

        .video-thumb .vt-duration {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0, 0, 0, .7);
            color: #fff;
            font-size: .68rem;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            z-index: 2;
        }

        .video-thumb .vt-live {
            position: absolute;
            top: 8px;
            left: 8px;
            background: #c0392b;
            color: #fff;
            font-size: .65rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 10px;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .video-thumb .vt-live .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #fff;
            animation: blink 1.4s infinite;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: .3;
            }
        }

        .video-info {
            padding: 13px 14px;
        }

        .video-title {
            font-size: .84rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1.4;
            margin-bottom: 4px;
        }

        .video-meta {
            font-size: .7rem;
            color: var(--up-muted);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* ── Press release card ── */
        .press-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 12px;
            display: flex;
            gap: 14px;
            transition: all .2s;
            cursor: pointer;
        }

        .press-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
        }

        .press-icon {
            width: 46px;
            height: 46px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .press-title {
            font-size: .88rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1.4;
            margin-bottom: 5px;
        }

        .press-meta {
            font-size: .72rem;
            color: var(--up-muted);
            margin-bottom: 6px;
        }

        .press-desc {
            font-size: .79rem;
            color: var(--up-muted);
            line-height: 1.6;
        }

        .press-actions {
            display: flex;
            gap: 6px;
            margin-top: 8px;
        }

        .press-btn {
            font-size: .72rem;
            font-weight: 700;
            padding: 4px 11px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all .18s;
            text-decoration: none;
        }

        .pb-read {
            background: var(--up-light);
            color: var(--up-mid);
        }

        .pb-read:hover {
            background: var(--up-mid);
            color: #fff;
        }

        .pb-pdf {
            background: #FEF0E7;
            color: var(--up-saffron);
        }

        .pb-pdf:hover {
            background: var(--up-saffron);
            color: #fff;
        }

        /* ── Event calendar ── */
        .cal-wrap {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .cal-header {
            background: var(--up-navy);
            color: #fff;
            padding: 14px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .cal-nav-btn {
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .2);
            color: #fff;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .18s;
        }

        .cal-nav-btn:hover {
            background: rgba(255, 255, 255, .2);
        }

        .cal-month-label {
            font-size: .95rem;
            font-weight: 700;
            font-family: var(--font-hindi);
        }

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

        .cal-dow {
            background: var(--up-light);
            padding: 8px 4px;
            text-align: center;
            font-size: .7rem;
            font-weight: 700;
            color: var(--up-navy);
            border-bottom: 1px solid var(--up-border);
        }

        .cal-day {
            min-height: 64px;
            border: 1px solid var(--up-border);
            padding: 6px;
            font-size: .76rem;
            color: var(--up-text);
            position: relative;
            cursor: pointer;
            transition: background .15s;
        }

        .cal-day:hover {
            background: var(--up-cream);
        }

        .cal-day.empty {
            background: #fafbfc;
            cursor: default;
        }

        .cal-day.today {
            background: var(--up-light);
        }

        .cal-day .day-num {
            font-weight: 700;
            color: var(--up-navy);
        }

        .cal-day.today .day-num {
            color: var(--up-saffron);
        }

        .cal-event-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block;
            margin-top: 4px;
            margin-right: 2px;
        }

        .cal-event-label {
            font-size: .62rem;
            background: var(--up-cream);
            color: var(--up-navy);
            border-radius: 3px;
            padding: 1px 4px;
            margin-top: 3px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* ── Upcoming events list ── */
        .event-item {
            display: flex;
            gap: 14px;
            padding: 12px 0;
            border-bottom: 1px dashed var(--up-border);
        }

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

        .event-date-box {
            width: 54px;
            height: 54px;
            border-radius: 8px;
            background: var(--up-light);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .event-date-box .ed-day {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1;
        }

        .event-date-box .ed-month {
            font-size: .65rem;
            color: var(--up-muted);
            text-transform: uppercase;
        }

        .event-name {
            font-size: .84rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 3px;
        }

        .event-loc {
            font-size: .74rem;
            color: var(--up-muted);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* ── Social embed cards ── */
        .social-feed-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 14px;
            margin-bottom: 10px;
            box-shadow: var(--shadow-sm);
        }

        .sf-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .sf-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--up-navy);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .9rem;
            flex-shrink: 0;
        }

        .sf-name {
            font-size: .78rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sf-handle {
            font-size: .7rem;
            color: var(--up-muted);
        }

        .sf-text {
            font-size: .79rem;
            color: var(--up-text);
            line-height: 1.6;
            margin-bottom: 8px;
        }

        .sf-meta {
            display: flex;
            gap: 14px;
            font-size: .72rem;
            color: var(--up-muted);
        }

        /* ── Sidebar ── */
        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-body {
            padding: 14px;
        }

        .stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .79rem;
        }

        .stat-row:last-child {
            border-bottom: none;
        }

        .stat-row .lbl {
            color: var(--up-muted);
        }

        .stat-row .val {
            font-weight: 700;
            color: var(--up-navy);
        }

        /* ── View toggle ── */
        .view-btns button {
            background: transparent;
            border: 1px solid var(--up-border);
            padding: 6px 10px;
            font-size: .85rem;
            color: var(--up-muted);
            cursor: pointer;
            transition: all .2s;
        }

        .view-btns button:first-child {
            border-radius: 6px 0 0 6px;
        }

        .view-btns button:last-child {
            border-radius: 0 6px 6px 0;
        }

        .view-btns button.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .sort-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .sort-bar .rc {
            font-size: .82rem;
            color: var(--up-muted);
        }

        .sort-bar .rc strong {
            color: var(--up-navy);
        }

        /* ── Lightbox modal ── */
        .modal-header {
            background: var(--up-navy);
            color: #fff;
        }

        .modal-header .btn-close {
            filter: invert(1);
        }

        .lightbox-img {
            height: 380px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 5rem;
            border-radius: 8px;
            margin-bottom: 14px;
        }

        .lightbox-thumbs {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 4px;
        }

        .lb-thumb {
            width: 60px;
            height: 45px;
            border-radius: 6px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color .15s;
        }

        .lb-thumb.active {
            border-color: var(--up-saffron);
        }

        /* Video lightbox */
        .video-player-box {
            height: 380px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            position: relative;
        }

        .video-player-box .vp-play {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .15);
            border: 2px solid rgba(255, 255, 255, .4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            cursor: pointer;
            margin-bottom: 14px;
        }

        /* tip box */
        .tip-box {
            border-radius: var(--radius);
            padding: 12px 16px;
            margin-bottom: 16px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }

        .tip-box.info {
            background: var(--up-light);
            border: 1px solid var(--up-border);
        }

        .tip-box i {
            font-size: 1rem;
            flex-shrink: 0;
            margin-top: 2px;
            color: var(--up-mid);
        }

        .tip-box p {
            font-size: .79rem;
            line-height: 1.65;
            margin: 0;
        }

        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: var(--up-muted);
        }

        .empty-state .es-icon {
            font-size: 3rem;
            margin-bottom: 12px;
            opacity: .3;
        }

        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        mark {
            background: rgba(232, 101, 10, .15);
            color: var(--up-saffron);
            padding: 0 2px;
            border-radius: 2px;
        }

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.5rem;
            }

            .cal-day {
                min-height: 48px;
                font-size: .68rem;
            }

            .filter-row {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 4px;
            }

            .fp {
                flex-shrink: 0;
            }
        }
    

/* ==========================================================================
   Styles migrated from news-orders.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        /* ── Header ── */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        .breadcrumb-item+.breadcrumb-item::before {
            color: var(--up-border);
        }

        /* ── Page hero ── */
        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 60%, #1e6ea8 100%);
            padding: 32px 0 28px;
            position: relative;
            overflow: hidden;
        }

        .page-hero::after {
            content: '';
            position: absolute;
            right: -40px;
            top: -40px;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .1);
        }

        .page-hero-title {
            font-family: var(--font-hindi);
            font-size: 2rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .page-hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 6px;
        }

        /* ── Counters strip ── */
        .count-strip {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 14px 0;
        }

        .count-box {
            text-align: center;
            padding: 0 20px;
            border-right: 1px solid var(--up-border);
        }

        .count-box:last-child {
            border-right: none;
        }

        .count-box .num {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .count-box .lbl {
            font-size: .72rem;
            color: var(--up-muted);
            margin-top: 1px;
        }

        /* ── Search bar ── */
        .search-bar-wrap {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 18px 0;
            position: sticky;
            top: 49px;
            z-index: 900;
            box-shadow: 0 2px 8px rgba(10, 34, 64, .06);
        }

        .search-input-group {
            display: flex;
            gap: 0;
            border: 1.5px solid var(--up-border);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            transition: border-color .2s;
            box-shadow: var(--shadow-sm);
        }

        .search-input-group:focus-within {
            border-color: var(--up-mid);
            box-shadow: 0 0 0 3px rgba(30, 95, 168, .12);
        }

        .search-input-group .s-icon {
            padding: 0 14px;
            display: flex;
            align-items: center;
            color: var(--up-muted);
            font-size: 1rem;
            background: #fff;
        }

        .search-input-group input {
            flex: 1;
            border: none;
            outline: none;
            font-size: .92rem;
            padding: 11px 0;
            color: var(--up-text);
            background: #fff;
        }

        .search-input-group input::placeholder {
            color: var(--up-muted);
        }

        .search-input-group .s-btn {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            padding: 0 22px;
            font-size: .88rem;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: background .2s;
        }

        .search-input-group .s-btn:hover {
            background: #c9540a;
        }

        .search-input-group .s-clear {
            background: transparent;
            border: none;
            padding: 0 12px;
            color: var(--up-muted);
            cursor: pointer;
            font-size: .85rem;
            display: none;
        }

        /* ── Filter pills (horizontal scroll on mobile) ── */
        .filter-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 12px;
        }

        .filter-pill {
            border: 1.5px solid var(--up-border);
            border-radius: 20px;
            padding: 5px 14px;
            font-size: .78rem;
            font-weight: 500;
            color: var(--up-navy);
            background: #fff;
            cursor: pointer;
            white-space: nowrap;
            transition: all .18s;
            user-select: none;
        }

        .filter-pill:hover {
            border-color: var(--up-mid);
            color: var(--up-mid);
        }

        .filter-pill.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .filter-pill .count {
            background: rgba(255, 255, 255, .2);
            border-radius: 10px;
            padding: 1px 6px;
            font-size: .68rem;
            margin-left: 4px;
        }

        .filter-pill:not(.active) .count {
            background: var(--up-light);
            color: var(--up-muted);
        }

        /* ── Layout ── */
        .page-body {
            padding: 28px 0 56px;
        }

        /* ── Sidebar filters ── */
        .filter-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .filter-card .fc-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

        .filter-card .fc-body {
            padding: 14px;
        }

        .filter-check {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 0;
            font-size: .8rem;
            cursor: pointer;
            border-bottom: 1px solid var(--up-border);
        }

        .filter-check:last-child {
            border-bottom: none;
        }

        .filter-check input[type=checkbox] {
            accent-color: var(--up-mid);
            width: 14px;
            height: 14px;
            cursor: pointer;
        }

        .filter-check .fc-label {
            flex: 1;
            color: var(--up-navy);
        }

        .filter-check .fc-count {
            font-size: .7rem;
            color: var(--up-muted);
        }

        .date-input {
            width: 100%;
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 6px 10px;
            font-size: .8rem;
            color: var(--up-text);
            outline: none;
            transition: border-color .2s;
        }

        .date-input:focus {
            border-color: var(--up-mid);
        }

        .apply-btn {
            width: 100%;
            background: var(--up-navy);
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 8px;
            font-size: .82rem;
            font-weight: 700;
            cursor: pointer;
            margin-top: 10px;
            transition: background .2s;
        }

        .apply-btn:hover {
            background: var(--up-blue);
        }

        .reset-btn {
            width: 100%;
            background: transparent;
            color: var(--up-muted);
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 7px;
            font-size: .78rem;
            cursor: pointer;
            margin-top: 6px;
            transition: all .2s;
        }

        .reset-btn:hover {
            border-color: var(--up-mid);
            color: var(--up-mid);
        }

        /* ── Sort / view bar ── */
        .sort-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .sort-bar .result-count {
            font-size: .82rem;
            color: var(--up-muted);
        }

        .sort-bar .result-count strong {
            color: var(--up-navy);
        }

        .sort-select {
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 6px 12px;
            font-size: .8rem;
            color: var(--up-navy);
            outline: none;
            cursor: pointer;
        }

        .view-btns button {
            background: transparent;
            border: 1px solid var(--up-border);
            padding: 6px 10px;
            font-size: .85rem;
            color: var(--up-muted);
            cursor: pointer;
            transition: all .2s;
        }

        .view-btns button:first-child {
            border-radius: 6px 0 0 6px;
        }

        .view-btns button:last-child {
            border-radius: 0 6px 6px 0;
        }

        .view-btns button.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        /* ── News cards ── */
        .news-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 18px 20px;
            margin-bottom: 12px;
            transition: box-shadow .2s, border-color .2s, transform .18s;
            cursor: pointer;
        }

        .news-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
            transform: translateX(3px);
        }

        .news-card .nc-top {
            display: flex;
            align-items: flex-start;
            gap: 14px;
        }

        .nc-type-badge {
            flex-shrink: 0;
            width: 46px;
            height: 46px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .nc-meta {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 7px;
        }

        .nc-tag {
            font-size: .68rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 4px;
            white-space: nowrap;
        }

        .tag-go {
            background: #FEF0E7;
            color: #C9400A;
        }

        .tag-news {
            background: #EEF4FB;
            color: #1A3F6F;
        }

        .tag-circular {
            background: #EAF8F0;
            color: #1A7A3C;
        }

        .tag-notification {
            background: #F3EEFB;
            color: #5A2DA0;
        }

        .tag-press {
            background: #FFF3E8;
            color: #A07010;
        }

        .nc-date {
            font-size: .72rem;
            color: var(--up-muted);
        }

        .nc-dept {
            font-size: .72rem;
            color: var(--up-mid);
            font-weight: 600;
        }

        .nc-title {
            font-size: .95rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1.45;
            margin-bottom: 6px;
        }

        .nc-title a {
            color: inherit;
            text-decoration: none;
        }

        .nc-title a:hover {
            color: var(--up-mid);
        }

        .nc-desc {
            font-size: .8rem;
            color: var(--up-muted);
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .nc-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed var(--up-border);
        }

        .nc-actions {
            display: flex;
            gap: 8px;
        }

        .nc-btn {
            font-size: .74rem;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all .18s;
            text-decoration: none;
        }

        .nc-btn-read {
            background: var(--up-light);
            color: var(--up-mid);
        }

        .nc-btn-read:hover {
            background: var(--up-mid);
            color: #fff;
        }

        .nc-btn-pdf {
            background: #FEF0E7;
            color: var(--up-saffron);
        }

        .nc-btn-pdf:hover {
            background: var(--up-saffron);
            color: #fff;
        }

        .nc-share {
            font-size: .78rem;
            color: var(--up-muted);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid transparent;
            transition: all .18s;
        }

        .nc-share:hover {
            border-color: var(--up-border);
            color: var(--up-navy);
        }

        .nc-new-badge {
            background: var(--up-saffron);
            color: #fff;
            font-size: .62rem;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 3px;
            margin-left: 6px;
            vertical-align: middle;
        }

        /* ── GO specific highlight ── */
        .news-card.go-card {
            border-left: 4px solid var(--up-saffron);
        }

        .news-card.circular-card {
            border-left: 4px solid #1A7A3C;
        }

        .news-card.notification-card {
            border-left: 4px solid #5A2DA0;
        }

        /* ── List view ── */
        .list-view .news-card {
            padding: 12px 16px;
        }

        .list-view .nc-top {
            gap: 10px;
        }

        .list-view .nc-type-badge {
            width: 34px;
            height: 34px;
            font-size: .95rem;
        }

        .list-view .nc-title {
            font-size: .86rem;
        }

        .list-view .nc-desc {
            display: none;
        }

        /* ── Pagination ── */
        .pagination .page-link {
            color: var(--up-mid);
            border-color: var(--up-border);
            font-size: .82rem;
            padding: 7px 13px;
        }

        .pagination .page-item.active .page-link {
            background: var(--up-navy);
            border-color: var(--up-navy);
            color: #fff;
        }

        .pagination .page-link:hover {
            background: var(--up-light);
            color: var(--up-navy);
        }

        /* ── Breaking ticker ── */
        .ticker-bar {
            background: var(--up-navy);
            color: #fff;
            padding: 7px 0;
            overflow: hidden;
        }

        .ticker-label {
            background: var(--up-saffron);
            padding: 2px 12px;
            font-size: .75rem;
            font-weight: 700;
            border-radius: 3px;
            white-space: nowrap;
            margin-right: 10px;
        }

        .ticker-track {
            display: flex;
            animation: ticker-scroll 35s linear infinite;
            white-space: nowrap;
        }

        .ticker-track span {
            font-size: .78rem;
            color: rgba(255, 255, 255, .8);
            margin-right: 60px;
        }

        .ticker-track span::before {
            content: '◆  ';
            color: var(--up-amber);
            font-size: .58rem;
        }

        @keyframes ticker-scroll {
            from {
                transform: translateX(60%)
            }

            to {
                transform: translateX(-100%)
            }
        }

        /* ── GO detail modal ── */
        .modal-header {
            background: var(--up-navy);
            color: #fff;
        }

        .modal-header .btn-close {
            filter: invert(1);
        }

        .go-detail-meta span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: .78rem;
            color: var(--up-muted);
            margin-right: 16px;
            margin-bottom: 6px;
        }

        .go-detail-body {
            font-size: .88rem;
            line-height: 1.8;
            color: var(--up-text);
        }

        /* ── Highlighted search term ── */
        mark {
            background: rgba(232, 101, 10, .18);
            color: var(--up-saffron);
            padding: 0 2px;
            border-radius: 2px;
        }

        /* ── Empty state ── */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--up-muted);
        }

        .empty-state .es-icon {
            font-size: 3rem;
            margin-bottom: 14px;
            opacity: .35;
        }

        .empty-state h5 {
            font-size: .95rem;
            color: var(--up-navy);
            margin-bottom: 6px;
        }

        .empty-state p {
            font-size: .82rem;
        }

        /* ── Trending tags ── */
        .trending-wrap {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 14px;
            margin-bottom: 14px;
            box-shadow: var(--shadow-sm);
        }

        .trending-wrap h6 {
            font-size: .75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--up-navy);
            margin-bottom: 10px;
        }

        .trend-tag {
            background: var(--up-cream);
            border: 1px solid var(--up-border);
            border-radius: 20px;
            padding: 4px 12px;
            font-size: .75rem;
            color: var(--up-navy);
            cursor: pointer;
            display: inline-block;
            margin: 3px;
            transition: all .18s;
        }

        .trend-tag:hover {
            background: var(--up-saffron);
            color: #fff;
            border-color: var(--up-saffron);
        }

        /* ── Footer ── */
        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .page-hero-title {
                font-size: 1.5rem;
            }

            .count-box .num {
                font-size: 1.1rem;
            }

            .filter-row {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 4px;
            }

            .filter-pill {
                flex-shrink: 0;
            }
        }
    

/* ==========================================================================
   Styles migrated from police-station-detail.html
   ========================================================================== */


/* ==========================================================================
   Styles migrated from police-stationns.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --up-red: #c0392b;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* Hero */
        .page-hero {
            background: linear-gradient(135deg, #3a0a0a 0%, #5c1414 55%, #7a1c1c 100%);
            padding: 36px 0 0;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .06);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2.1rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .7);
            margin-top: 6px;
            line-height: 1.7;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .72rem;
            color: rgba(255, 255, 255, .85);
            margin: 3px 4px 0 0;
        }

        .hero-stat {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: var(--radius);
            padding: 14px;
            text-align: center;
        }

        .hero-stat .num {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-amber);
        }

        .hero-stat .lbl {
            font-size: .7rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 3px;
        }

        .hero-tabs .nav-link {
            color: rgba(255, 255, 255, .6) !important;
            font-size: .82rem;
            padding: 11px 18px;
            border-bottom: 3px solid transparent;
            transition: all .2s;
            font-weight: 500;
        }

        .hero-tabs .nav-link:hover {
            color: #fff !important;
            background: rgba(255, 255, 255, .07);
        }

        .hero-tabs .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-amber) !important;
            background: rgba(255, 255, 255, .08);
        }

        /* Emergency strip */
        .emer-strip {
            background: #7a1c1c;
            padding: 12px 0;
        }

        .emer-num {
            font-size: 1.5rem;
            font-weight: 700;
            color: #fff;
        }

        .emer-call {
            background: #fff;
            color: #7a1c1c;
            border: none;
            border-radius: 8px;
            padding: 9px 20px;
            font-size: .84rem;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: transform .15s;
        }

        .emer-call:hover {
            transform: scale(1.04);
            color: #7a1c1c;
        }

        /* Search bar */
        .search-bar-wrap {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 14px 0;
            position: sticky;
            top: 49px;
            z-index: 900;
            box-shadow: 0 2px 8px rgba(10, 34, 64, .06);
        }

        .search-input-group {
            display: flex;
            border: 1.5px solid var(--up-border);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            transition: border-color .2s;
            box-shadow: var(--shadow-sm);
        }

        .search-input-group:focus-within {
            border-color: var(--up-mid);
            box-shadow: 0 0 0 3px rgba(30, 95, 168, .1);
        }

        .search-input-group .s-icon {
            padding: 0 14px;
            display: flex;
            align-items: center;
            color: var(--up-muted);
        }

        .search-input-group input {
            flex: 1;
            border: none;
            outline: none;
            font-size: .9rem;
            padding: 10px 0;
            color: var(--up-text);
            background: #fff;
        }

        .search-input-group input::placeholder {
            color: var(--up-muted);
        }

        .search-input-group .s-btn {
            background: #7a1c1c;
            color: #fff;
            border: none;
            padding: 0 20px;
            font-size: .84rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }

        .search-input-group .s-btn:hover {
            background: #5c1414;
        }

        .filter-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 10px;
            align-items: center;
        }

        .fp {
            border: 1.5px solid var(--up-border);
            border-radius: 20px;
            padding: 4px 13px;
            font-size: .75rem;
            font-weight: 500;
            color: var(--up-navy);
            background: #fff;
            cursor: pointer;
            white-space: nowrap;
            transition: all .18s;
        }

        .fp:hover {
            border-color: #7a1c1c;
            color: #7a1c1c;
        }

        .fp.active {
            background: #7a1c1c;
            color: #fff;
            border-color: #7a1c1c;
        }

        .fp .cnt {
            font-size: .67rem;
            opacity: .7;
            margin-left: 2px;
        }

        .page-body {
            padding: 28px 0 56px;
        }

        /* Sidebar */
        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-body {
            padding: 14px;
        }

        .filter-label {
            font-size: .75rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 6px;
            margin-top: 10px;
        }

        .filter-label:first-child {
            margin-top: 0;
        }

        .filter-select {
            width: 100%;
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 7px 10px;
            font-size: .79rem;
            color: var(--up-text);
            outline: none;
            cursor: pointer;
            background: #fff;
            transition: border-color .2s;
            margin-bottom: 8px;
        }

        .filter-select:focus {
            border-color: var(--up-mid);
        }

        .reset-filter-btn {
            width: 100%;
            background: transparent;
            color: var(--up-muted);
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 7px;
            font-size: .76rem;
            cursor: pointer;
            margin-top: 6px;
            transition: all .2s;
        }

        .reset-filter-btn:hover {
            color: var(--up-navy);
            border-color: var(--up-navy);
        }

        /* Map */
        #stationMap {
            height: 420px;
            border-radius: var(--radius);
            border: 1px solid var(--up-border);
            box-shadow: var(--shadow-sm);
        }

        .map-toolbar {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .map-btn {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 5px 12px;
            font-size: .78rem;
            cursor: pointer;
            color: var(--up-navy);
            font-weight: 500;
            transition: all .18s;
        }

        .map-btn:hover,
        .map-btn.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .map-legend {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 8px;
            font-size: .72rem;
            color: var(--up-muted);
        }

        .legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 4px;
        }

        /* Sort bar */
        .sort-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .sort-bar .rc {
            font-size: .82rem;
            color: var(--up-muted);
        }

        .sort-bar .rc strong {
            color: var(--up-navy);
        }

        .view-btns button {
            background: transparent;
            border: 1px solid var(--up-border);
            padding: 6px 10px;
            font-size: .85rem;
            color: var(--up-muted);
            cursor: pointer;
            transition: all .2s;
        }

        .view-btns button:first-child {
            border-radius: 6px 0 0 6px;
        }

        .view-btns button:last-child {
            border-radius: 0 6px 6px 0;
        }

        .view-btns button.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        /* Station card */
        .station-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 18px;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: all .2s;
            cursor: pointer;
        }

        .station-card:hover {
            box-shadow: var(--shadow-md);
            border-color: #7a1c1c;
            transform: translateY(-2px);
        }

        .station-card.women {
            border-left: 4px solid #5A2DA0;
        }

        .station-card.cyber {
            border-left: 4px solid var(--up-mid);
        }

        .station-card.highway {
            border-left: 4px solid var(--up-amber);
        }

        .sc-top {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 10px;
        }

        .sc-icon {
            width: 46px;
            height: 46px;
            border-radius: 10px;
            background: #fdeaea;
            color: #7a1c1c;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .sc-name {
            font-size: .9rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1.35;
        }

        .sc-zone {
            font-size: .72rem;
            color: var(--up-muted);
            margin-top: 2px;
        }

        .sc-type-badge {
            font-size: .62rem;
            font-weight: 700;
            padding: 1px 7px;
            border-radius: 10px;
            margin-left: 5px;
            vertical-align: middle;
            white-space: nowrap;
        }

        .badge-women {
            background: #F3EEFB;
            color: #5A2DA0;
        }

        .badge-cyber {
            background: #EEF4FB;
            color: var(--up-mid);
        }

        .badge-highway {
            background: #FFF3E8;
            color: var(--up-amber);
        }

        .sc-meta {
            font-size: .78rem;
            color: var(--up-muted);
            line-height: 1.7;
            flex: 1;
        }

        .sc-meta div {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            margin-bottom: 3px;
        }

        .sc-meta i {
            color: #7a1c1c;
            flex-shrink: 0;
            margin-top: 2px;
            font-size: .82rem;
        }

        .sc-footer {
            display: flex;
            gap: 6px;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed var(--up-border);
            flex-wrap: wrap;
        }

        .sc-btn {
            font-size: .74rem;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all .18s;
            text-decoration: none;
            flex: 1;
            justify-content: center;
        }

        .sc-btn-view {
            background: var(--up-light);
            color: var(--up-mid);
        }

        .sc-btn-view:hover {
            background: var(--up-mid);
            color: #fff;
        }

        .sc-btn-call {
            background: #fdeaea;
            color: #7a1c1c;
        }

        .sc-btn-call:hover {
            background: #7a1c1c;
            color: #fff;
        }

        .sc-officer {
            font-size: .71rem;
            color: var(--up-navy);
            font-weight: 600;
            margin-top: 6px;
        }

        /* List view */
        .list-view .station-card {
            flex-direction: row;
            align-items: center;
            padding: 12px 16px;
            gap: 14px;
        }

        .list-view .sc-top {
            margin-bottom: 0;
            flex: 1;
            min-width: 0;
        }

        .list-view .sc-icon {
            width: 38px;
            height: 38px;
            font-size: 1rem;
        }

        .list-view .sc-meta {
            display: none;
        }

        .list-view .sc-footer {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
            flex-shrink: 0;
        }

        .list-view .sc-officer {
            display: none;
        }

        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: var(--up-muted);
        }

        .empty-state .es-icon {
            font-size: 3rem;
            margin-bottom: 12px;
            opacity: .3;
        }

        .tip-box {
            border-radius: var(--radius);
            padding: 12px 16px;
            margin-bottom: 14px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
            background: var(--up-light);
            border: 1px solid var(--up-border);
        }

        .tip-box i {
            font-size: 1rem;
            flex-shrink: 0;
            margin-top: 2px;
            color: var(--up-mid);
        }

        .tip-box p {
            font-size: .79rem;
            line-height: 1.65;
            margin: 0;
        }

        .main-tab {
            display: none;
        }

        .main-tab.active {
            display: block;
        }

        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #7a1c1c;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 36px;
            height: 3px;
            background: linear-gradient(90deg, #7a1c1c, var(--up-amber));
            border-radius: 2px;
            margin-top: 7px;
            margin-bottom: 20px;
        }

        mark {
            background: rgba(232, 101, 10, .15);
            color: var(--up-saffron);
            padding: 0 2px;
            border-radius: 2px;
        }

        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.5rem;
            }

            #stationMap {
                height: 280px;
            }

            .filter-row {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 4px;
            }

            .fp {
                flex-shrink: 0;
            }
        }
    

/* ==========================================================================
   Styles migrated from portal-details.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        /* ── Header ── */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* ── Portal hero ── */
        .portal-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 55%, #1760aa 100%);
            padding: 36px 0 0;
            position: relative;
            overflow: hidden;
        }

        .portal-hero::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .1);
        }

        .portal-hero::after {
            content: '';
            position: absolute;
            left: -40px;
            bottom: -40px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(30, 95, 168, .15);
        }

        .portal-logo-wrap {
            width: 80px;
            height: 80px;
            border-radius: 18px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
            box-shadow: 0 4px 20px rgba(10, 34, 64, .25);
            flex-shrink: 0;
        }

        .portal-name {
            font-family: var(--font-hindi);
            font-size: 1.9rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
            margin-bottom: 4px;
        }

        .portal-name-en {
            font-size: .88rem;
            color: rgba(255, 255, 255, .6);
            margin-bottom: 10px;
        }

        .portal-url-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 255, 255, .12);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 20px;
            padding: 4px 14px;
            font-size: .78rem;
            color: rgba(255, 255, 255, .85);
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .73rem;
            color: rgba(255, 255, 255, .8);
            margin: 3px 4px 3px 0;
        }

        /* hero tab bar */
        .hero-tabs {
            margin-top: 28px;
            border-bottom: none;
        }

        .hero-tabs .nav-link {
            color: rgba(255, 255, 255, .6) !important;
            font-size: .82rem;
            padding: 10px 18px;
            border-radius: 0;
            border-bottom: 3px solid transparent;
            transition: all .2s;
            font-weight: 500;
        }

        .hero-tabs .nav-link:hover {
            color: #fff !important;
            background: rgba(255, 255, 255, .07);
        }

        .hero-tabs .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron) !important;
            background: rgba(255, 255, 255, .08);
        }

        /* CTA buttons */
        .btn-visit {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 10px 24px;
            font-size: .88rem;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            transition: background .2s;
            text-decoration: none;
        }

        .btn-visit:hover {
            background: #c9540a;
            color: #fff;
        }

        .btn-outline-white {
            background: rgba(255, 255, 255, .1);
            color: #fff;
            border: 1.5px solid rgba(255, 255, 255, .3);
            border-radius: 8px;
            padding: 10px 18px;
            font-size: .82rem;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all .2s;
            text-decoration: none;
        }

        .btn-outline-white:hover {
            background: rgba(255, 255, 255, .2);
            color: #fff;
        }

        /* status badge */
        .status-live {
            background: #d4edda;
            color: #155724;
            font-size: .72rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 12px;
        }

        .status-beta {
            background: #fff3cd;
            color: #856404;
            font-size: .72rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 12px;
        }

        .status-new {
            background: #FEF0E7;
            color: var(--up-saffron);
            font-size: .72rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 12px;
        }

        /* ── Page body ── */
        .page-body {
            padding: 28px 0 56px;
        }

        /* ── Cards ── */
        .info-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .info-card .card-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 16px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .info-card .card-body-inner {
            padding: 16px;
        }

        /* stat boxes */
        .stat-box {
            background: var(--up-light);
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 16px;
            text-align: center;
        }

        .stat-box .num {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1;
        }

        .stat-box .lbl {
            font-size: .72rem;
            color: var(--up-muted);
            margin-top: 4px;
        }

        .stat-box .trend {
            font-size: .68rem;
            margin-top: 4px;
        }

        .trend-up {
            color: var(--up-green);
        }

        .trend-dn {
            color: #c0392b;
        }

        /* service list */
        .service-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid var(--up-border);
        }

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

        .svc-icon-sm {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .svc-name {
            font-size: .88rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 2px;
        }

        .svc-desc {
            font-size: .76rem;
            color: var(--up-muted);
            line-height: 1.5;
        }

        .svc-tag {
            font-size: .66rem;
            font-weight: 700;
            padding: 1px 7px;
            border-radius: 3px;
            margin-left: 6px;
        }

        .svc-tag-free {
            background: #d4edda;
            color: #155724;
        }

        .svc-tag-paid {
            background: #fff3cd;
            color: #856404;
        }

        .svc-time {
            font-size: .72rem;
            color: var(--up-muted);
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .svc-link {
            font-size: .75rem;
            font-weight: 700;
            color: var(--up-saffron);
            text-decoration: none;
            margin-top: 6px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        .svc-link:hover {
            text-decoration: underline;
        }

        /* info rows */
        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .8rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-row .lbl {
            color: var(--up-muted);
        }

        .info-row .val {
            font-weight: 600;
            color: var(--up-navy);
            text-align: right;
            max-width: 60%;
        }

        /* steps */
        .step-item {
            display: flex;
            gap: 14px;
            margin-bottom: 20px;
        }

        .step-num {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--up-navy);
            color: #fff;
            font-size: .82rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .step-title {
            font-size: .88rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 3px;
        }

        .step-desc {
            font-size: .78rem;
            color: var(--up-muted);
            line-height: 1.6;
        }

        .step-connector {
            width: 2px;
            background: var(--up-border);
            margin: 4px 0;
            flex-shrink: 0;
            margin-left: 16px;
        }

        /* FAQ */
        .faq-item {
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 8px;
            overflow: hidden;
        }

        .faq-q {
            padding: 12px 16px;
            font-size: .85rem;
            font-weight: 600;
            color: var(--up-navy);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background .15s;
        }

        .faq-q:hover {
            background: var(--up-light);
        }

        .faq-q.open {
            background: var(--up-navy);
            color: #fff;
        }

        .faq-q.open i {
            transform: rotate(180deg);
        }

        .faq-a {
            display: none;
            padding: 12px 16px;
            font-size: .8rem;
            color: var(--up-muted);
            line-height: 1.7;
            background: var(--up-cream);
        }

        .faq-a.show {
            display: block;
        }

        /* reviews */
        .review-card {
            background: var(--up-cream);
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 14px;
            margin-bottom: 10px;
        }

        .review-stars {
            color: var(--up-amber);
            font-size: .85rem;
        }

        .review-text {
            font-size: .8rem;
            color: var(--up-muted);
            margin-top: 6px;
            line-height: 1.6;
        }

        .review-author {
            font-size: .72rem;
            color: var(--up-navy);
            font-weight: 600;
            margin-top: 8px;
        }

        .rating-bar-wrap {
            margin-bottom: 6px;
        }

        .rating-label {
            font-size: .75rem;
            color: var(--up-muted);
            width: 30px;
            text-align: right;
            margin-right: 8px;
        }

        .rating-bar {
            flex: 1;
            height: 8px;
            background: var(--up-border);
            border-radius: 4px;
            overflow: hidden;
        }

        .rating-bar-fill {
            height: 100%;
            border-radius: 4px;
            background: var(--up-amber);
            transition: width .6s ease;
        }

        .rating-count {
            font-size: .72rem;
            color: var(--up-muted);
            margin-left: 8px;
            width: 30px;
        }

        .avg-rating {
            font-size: 3rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1;
        }

        /* related portals */
        .related-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: inherit;
            transition: all .2s;
            margin-bottom: 10px;
        }

        .related-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
        }

        .related-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .related-name {
            font-size: .82rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .related-url {
            font-size: .7rem;
            color: var(--up-mid);
        }

        /* contact */
        .contact-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .8rem;
        }

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

        .contact-item i {
            color: var(--up-saffron);
            width: 16px;
        }

        .contact-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .contact-item a:hover {
            text-decoration: underline;
        }

        /* floating action */
        .float-visit {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 999;
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 50px;
            padding: 12px 22px;
            font-size: .88rem;
            font-weight: 700;
            box-shadow: 0 4px 20px rgba(232, 101, 10, .4);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 7px;
            text-decoration: none;
            transition: transform .2s, box-shadow .2s;
        }

        .float-visit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(232, 101, 10, .5);
            color: #fff;
        }

        /* tab content */
        .tab-pane {
            display: none;
        }

        .tab-pane.active {
            display: block;
        }

        /* update timeline */
        .timeline-item {
            display: flex;
            gap: 14px;
            padding: 10px 0;
            border-bottom: 1px dashed var(--up-border);
        }

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

        .tl-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--up-saffron);
            margin-top: 5px;
            flex-shrink: 0;
        }

        .tl-date {
            font-size: .72rem;
            color: var(--up-muted);
            min-width: 80px;
        }

        .tl-text {
            font-size: .8rem;
            color: var(--up-navy);
        }

        /* footer */
        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .portal-name {
                font-size: 1.4rem;
            }

            .float-visit {
                bottom: 16px;
                right: 16px;
                padding: 10px 16px;
                font-size: .82rem;
            }
        }
    

/* ==========================================================================
   Styles migrated from portals.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        /* header / nav */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* hero */
        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 60%, #1e6ea8 100%);
            padding: 32px 0 28px;
            position: relative;
            overflow: hidden;
        }

        .page-hero::after {
            content: '';
            position: absolute;
            right: -40px;
            top: -40px;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .1);
        }

        .page-hero-title {
            font-family: var(--font-hindi);
            font-size: 2rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .page-hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 6px;
        }

        /* stats strip */
        .count-strip {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 12px 0;
        }

        .count-box {
            text-align: center;
            padding: 0 18px;
            border-right: 1px solid var(--up-border);
        }

        .count-box:last-child {
            border-right: none;
        }

        .count-box .num {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .count-box .lbl {
            font-size: .7rem;
            color: var(--up-muted);
            margin-top: 1px;
        }

        /* search bar */
        .search-bar-wrap {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 16px 0;
            position: sticky;
            top: 49px;
            z-index: 900;
            box-shadow: 0 2px 8px rgba(10, 34, 64, .06);
        }

        .search-input-group {
            display: flex;
            border: 1.5px solid var(--up-border);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            transition: border-color .2s;
            box-shadow: var(--shadow-sm);
        }

        .search-input-group:focus-within {
            border-color: var(--up-mid);
            box-shadow: 0 0 0 3px rgba(30, 95, 168, .12);
        }

        .search-input-group .s-icon {
            padding: 0 14px;
            display: flex;
            align-items: center;
            color: var(--up-muted);
            font-size: 1rem;
        }

        .search-input-group input {
            flex: 1;
            border: none;
            outline: none;
            font-size: .92rem;
            padding: 11px 0;
            color: var(--up-text);
        }

        .search-input-group input::placeholder {
            color: var(--up-muted);
        }

        .search-input-group .s-btn {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            padding: 0 22px;
            font-size: .88rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }

        .search-input-group .s-btn:hover {
            background: #c9540a;
        }

        /* filter pills */
        .filter-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 12px;
            align-items: center;
        }

        .filter-pill {
            border: 1.5px solid var(--up-border);
            border-radius: 20px;
            padding: 5px 14px;
            font-size: .76rem;
            font-weight: 500;
            color: var(--up-navy);
            background: #fff;
            cursor: pointer;
            white-space: nowrap;
            transition: all .18s;
            user-select: none;
        }

        .filter-pill:hover {
            border-color: var(--up-mid);
            color: var(--up-mid);
        }

        .filter-pill.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .filter-pill .cnt {
            font-size: .68rem;
            opacity: .7;
            margin-left: 3px;
        }

        /* layout */
        .page-body {
            padding: 28px 0 56px;
        }

        /* dept sidebar */
        .dept-nav {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 130px;
        }

        .dept-nav-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 14px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
        }

        .dept-nav-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 9px 14px;
            border-bottom: 1px solid var(--up-border);
            cursor: pointer;
            font-size: .8rem;
            color: var(--up-navy);
            transition: background .15s;
            text-decoration: none;
        }

        .dept-nav-item:hover {
            background: var(--up-light);
        }

        .dept-nav-item.active {
            background: var(--up-light);
            color: var(--up-mid);
            font-weight: 700;
            border-left: 3px solid var(--up-saffron);
        }

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

        .dept-nav-item .dcnt {
            background: var(--up-light);
            color: var(--up-muted);
            font-size: .68rem;
            font-weight: 700;
            border-radius: 10px;
            padding: 1px 7px;
        }

        .dept-nav-item.active .dcnt {
            background: var(--up-saffron);
            color: #fff;
        }

        /* view toggle */
        .sort-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .sort-bar .rc {
            font-size: .82rem;
            color: var(--up-muted);
        }

        .sort-bar .rc strong {
            color: var(--up-navy);
        }

        .view-btns button {
            background: transparent;
            border: 1px solid var(--up-border);
            padding: 6px 10px;
            font-size: .85rem;
            color: var(--up-muted);
            cursor: pointer;
            transition: all .2s;
        }

        .view-btns button:first-child {
            border-radius: 6px 0 0 6px;
        }

        .view-btns button:last-child {
            border-radius: 0 6px 6px 0;
        }

        .view-btns button.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        /* department section heading */
        .dept-section {
            margin-bottom: 36px;
        }

        .dept-section-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--up-border);
        }

        .dept-section-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .dept-section-name {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .dept-section-name small {
            font-family: var(--font-body);
            font-size: .75rem;
            font-weight: 400;
            color: var(--up-muted);
            margin-left: 8px;
        }

        /* portal card - grid view */
        .portal-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 18px 16px;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: box-shadow .2s, border-color .2s, transform .18s;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }

        .portal-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
            transform: translateY(-3px);
        }

        .portal-card .pc-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            margin-bottom: 12px;
            flex-shrink: 0;
        }

        .portal-card .pc-name {
            font-size: .88rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 4px;
            line-height: 1.35;
        }

        .portal-card .pc-url {
            font-size: .72rem;
            color: var(--up-mid);
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .portal-card .pc-desc {
            font-size: .76rem;
            color: var(--up-muted);
            line-height: 1.5;
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .portal-card .pc-footer {
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed var(--up-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .pc-status {
            font-size: .68rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 10px;
        }

        .status-live {
            background: #d4edda;
            color: #155724;
        }

        .status-beta {
            background: #fff3cd;
            color: #856404;
        }

        .status-new {
            background: #FEF0E7;
            color: var(--up-saffron);
        }

        .pc-visit {
            font-size: .72rem;
            font-weight: 700;
            color: var(--up-mid);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        .pc-visit:hover {
            color: var(--up-saffron);
        }

        /* portal card - list view */
        .list-view .portal-card {
            flex-direction: row;
            align-items: center;
            padding: 12px 16px;
            gap: 14px;
        }

        .list-view .portal-card .pc-icon {
            margin-bottom: 0;
            width: 38px;
            height: 38px;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .list-view .portal-card .pc-desc {
            display: none;
        }

        .list-view .portal-card .pc-footer {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
            margin-left: auto;
            flex-shrink: 0;
        }

        .list-view .portal-card .pc-main {
            flex: 1;
            min-width: 0;
        }

        .list-view .portal-card .pc-name {
            margin-bottom: 2px;
        }

        /* badge featured */
        .featured-badge {
            background: var(--up-amber);
            color: var(--up-navy);
            font-size: .62rem;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 3px;
            margin-left: 6px;
            vertical-align: middle;
        }

        /* empty */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--up-muted);
        }

        .empty-state .es-icon {
            font-size: 3rem;
            margin-bottom: 14px;
            opacity: .3;
        }

        /* footer */
        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        mark {
            background: rgba(232, 101, 10, .18);
            color: var(--up-saffron);
            padding: 0 2px;
            border-radius: 2px;
        }

        @media(max-width:992px) {
            .dept-nav {
                position: static;
                margin-bottom: 20px;
            }
        }

        @media(max-width:768px) {
            .page-hero-title {
                font-size: 1.5rem;
            }
        }
    

/* ==========================================================================
   Styles migrated from privacy.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 60%, #1e6ea8 100%);
            padding: 34px 0 28px;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -50px;
            top: -50px;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .09);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 1.9rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .86rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 6px;
        }

        .last-updated {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            margin-top: 10px;
        }

        .page-body {
            padding: 30px 0 60px;
        }

        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-saffron);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 34px;
            height: 3px;
            background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
            border-radius: 2px;
            margin-top: 7px;
            margin-bottom: 18px;
        }

        .doc-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .doc-section {
            padding: 24px 28px;
            border-bottom: 1px solid var(--up-border);
            scroll-margin-top: 130px;
        }

        .doc-section:last-child {
            border-bottom: none;
        }

        .doc-section h3 {
            font-family: var(--font-hindi);
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .doc-section h3 .num-badge {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--up-light);
            color: var(--up-mid);
            font-size: .8rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .doc-section p {
            font-size: .85rem;
            line-height: 1.85;
            color: var(--up-text);
            margin-bottom: 12px;
        }

        .doc-section ul {
            margin: 0 0 12px 0;
            padding-left: 20px;
        }

        .doc-section ul li {
            font-size: .84rem;
            line-height: 1.8;
            color: var(--up-text);
            margin-bottom: 5px;
        }

        .doc-section ul li strong {
            color: var(--up-navy);
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: .8rem;
            margin: 10px 0 14px;
        }

        .data-table th {
            background: var(--up-light);
            color: var(--up-navy);
            font-weight: 700;
            padding: 9px 12px;
            border: 1px solid var(--up-border);
            text-align: left;
            font-size: .73rem;
        }

        .data-table td {
            padding: 9px 12px;
            border: 1px solid var(--up-border);
            color: var(--up-text);
        }

        .data-table tr:nth-child(even) td {
            background: var(--up-cream);
        }

        .highlight-box {
            background: var(--up-light);
            border-left: 4px solid var(--up-mid);
            border-radius: 6px;
            padding: 14px 16px;
            margin: 14px 0;
        }

        .highlight-box p {
            margin: 0;
            font-size: .82rem;
        }

        .warning-box {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            border-radius: 6px;
            padding: 14px 16px;
            margin: 14px 0;
        }

        .warning-box p {
            margin: 0;
            font-size: .82rem;
            color: #664d03;
        }

        /* TOC sidebar */
        .toc-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 130px;
        }

        .toc-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
        }

        .toc-item {
            display: block;
            padding: 9px 14px;
            font-size: .79rem;
            color: var(--up-text);
            text-decoration: none;
            border-bottom: 1px solid var(--up-border);
            transition: all .15s;
        }

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

        .toc-item:hover {
            background: var(--up-light);
            color: var(--up-saffron);
        }

        .toc-item.active {
            background: var(--up-light);
            color: var(--up-mid);
            font-weight: 700;
            border-left: 3px solid var(--up-saffron);
        }

        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-top: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
        }

        .sidebar-body {
            padding: 14px;
        }

        .sidebar-body p {
            font-size: .78rem;
            color: var(--up-muted);
            line-height: 1.6;
            margin-bottom: 8px;
        }

        .action-btns {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .action-btn {
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 7px 14px;
            font-size: .78rem;
            font-weight: 600;
            color: var(--up-navy);
            background: #fff;
            cursor: pointer;
            transition: all .18s;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
        }

        .action-btn:hover {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.4rem;
            }

            .doc-section {
                padding: 18px 16px;
            }

            .toc-card {
                position: static;
            }
        }
    

/* ==========================================================================
   Styles migrated from schemes.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        /* ── Shared chrome ── */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* ── Hero ── */
        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 50%, #1e6ea8 100%);
            padding: 36px 0 0;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .1);
        }

        .page-hero::after {
            content: '';
            position: absolute;
            left: -40px;
            bottom: -40px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(30, 95, 168, .12);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2.1rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 6px;
            line-height: 1.6;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .72rem;
            color: rgba(255, 255, 255, .8);
            margin: 3px 4px 3px 0;
        }

        .hero-stat {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: var(--radius);
            padding: 14px;
            text-align: center;
        }

        .hero-stat .num {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-amber);
        }

        .hero-stat .lbl {
            font-size: .7rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 3px;
        }

        .hero-search {
            background: #fff;
            border-radius: 50px;
            padding: 5px 5px 5px 20px;
            display: flex;
            align-items: center;
            max-width: 560px;
            box-shadow: 0 4px 24px rgba(10, 34, 64, .3);
            margin-top: 22px;
        }

        .hero-search input {
            flex: 1;
            border: none;
            outline: none;
            font-size: .92rem;
            color: var(--up-text);
            background: transparent;
        }

        .hero-search input::placeholder {
            color: var(--up-muted);
        }

        .hero-search button {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 40px;
            padding: 9px 22px;
            font-size: .88rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }

        .hero-search button:hover {
            background: #c9540a;
        }

        .quick-tag {
            background: rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .78);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .74rem;
            cursor: pointer;
            display: inline-block;
            margin: 3px 4px 3px 0;
            transition: background .18s;
        }

        .quick-tag:hover {
            background: rgba(255, 255, 255, .2);
            color: #fff;
        }

        .hero-tabs .nav-link {
            color: rgba(255, 255, 255, .6) !important;
            font-size: .82rem;
            padding: 11px 18px;
            border-bottom: 3px solid transparent;
            transition: all .2s;
            font-weight: 500;
        }

        .hero-tabs .nav-link:hover {
            color: #fff !important;
            background: rgba(255, 255, 255, .07);
        }

        .hero-tabs .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron) !important;
            background: rgba(255, 255, 255, .08);
        }

        /* ── Eligibility checker bar ── */
        .eligibility-bar {
            background: linear-gradient(90deg, var(--up-cream), #fff);
            border-bottom: 1px solid var(--up-border);
            padding: 16px 0;
        }

        .elig-title {
            font-size: .82rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .elig-title i {
            color: var(--up-saffron);
        }

        .elig-select {
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 7px 12px;
            font-size: .8rem;
            color: var(--up-text);
            outline: none;
            cursor: pointer;
            transition: border-color .2s;
            background: #fff;
        }

        .elig-select:focus {
            border-color: var(--up-mid);
        }

        .elig-btn {
            background: var(--up-navy);
            color: #fff;
            border: none;
            border-radius: 7px;
            padding: 8px 20px;
            font-size: .82rem;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: background .2s;
        }

        .elig-btn:hover {
            background: var(--up-blue);
        }

        .elig-reset {
            background: transparent;
            color: var(--up-muted);
            border: 1px solid var(--up-border);
            border-radius: 7px;
            padding: 8px 16px;
            font-size: .78rem;
            cursor: pointer;
            transition: all .2s;
        }

        .elig-reset:hover {
            color: var(--up-navy);
            border-color: var(--up-navy);
        }

        /* ── Search bar ── */
        .search-bar-wrap {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 14px 0;
            position: sticky;
            top: 49px;
            z-index: 900;
            box-shadow: 0 2px 8px rgba(10, 34, 64, .06);
        }

        .search-input-group {
            display: flex;
            border: 1.5px solid var(--up-border);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            transition: border-color .2s;
            box-shadow: var(--shadow-sm);
        }

        .search-input-group:focus-within {
            border-color: var(--up-mid);
            box-shadow: 0 0 0 3px rgba(30, 95, 168, .1);
        }

        .search-input-group .s-icon {
            padding: 0 14px;
            display: flex;
            align-items: center;
            color: var(--up-muted);
        }

        .search-input-group input {
            flex: 1;
            border: none;
            outline: none;
            font-size: .9rem;
            padding: 10px 0;
            color: var(--up-text);
            background: #fff;
        }

        .search-input-group input::placeholder {
            color: var(--up-muted);
        }

        .search-input-group .s-btn {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            padding: 0 20px;
            font-size: .84rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }

        .search-input-group .s-btn:hover {
            background: #c9540a;
        }

        .filter-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 10px;
            align-items: center;
        }

        .fp {
            border: 1.5px solid var(--up-border);
            border-radius: 20px;
            padding: 4px 13px;
            font-size: .75rem;
            font-weight: 500;
            color: var(--up-navy);
            background: #fff;
            cursor: pointer;
            white-space: nowrap;
            transition: all .18s;
            user-select: none;
        }

        .fp:hover {
            border-color: var(--up-mid);
            color: var(--up-mid);
        }

        .fp.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .fp .cnt {
            font-size: .67rem;
            opacity: .7;
            margin-left: 2px;
        }

        /* ── Page body ── */
        .page-body {
            padding: 28px 0 56px;
        }

        /* ── Dept sidebar ── */
        .dept-nav {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 130px;
        }

        .dept-nav-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
        }

        .dept-nav-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 9px 14px;
            border-bottom: 1px solid var(--up-border);
            cursor: pointer;
            font-size: .79rem;
            color: var(--up-navy);
            transition: background .15s;
            text-decoration: none;
        }

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

        .dept-nav-item:hover {
            background: var(--up-light);
        }

        .dept-nav-item.active {
            background: var(--up-light);
            color: var(--up-mid);
            font-weight: 700;
            border-left: 3px solid var(--up-saffron);
        }

        .dept-nav-item .dn-cnt {
            background: var(--up-light);
            color: var(--up-muted);
            font-size: .67rem;
            font-weight: 700;
            border-radius: 10px;
            padding: 1px 7px;
        }

        .dept-nav-item.active .dn-cnt {
            background: var(--up-saffron);
            color: #fff;
        }

        /* ── Sort bar ── */
        .sort-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .sort-bar .rc {
            font-size: .82rem;
            color: var(--up-muted);
        }

        .sort-bar .rc strong {
            color: var(--up-navy);
        }

        .view-btns button {
            background: transparent;
            border: 1px solid var(--up-border);
            padding: 6px 10px;
            font-size: .85rem;
            color: var(--up-muted);
            cursor: pointer;
            transition: all .2s;
        }

        .view-btns button:first-child {
            border-radius: 6px 0 0 6px;
        }

        .view-btns button:last-child {
            border-radius: 0 6px 6px 0;
        }

        .view-btns button.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        /* ── Scheme card (grid) ── */
        .scheme-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: box-shadow .2s, border-color .2s, transform .15s;
            cursor: pointer;
        }

        .scheme-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
            transform: translateY(-3px);
        }

        .sc-banner {
            height: 6px;
            width: 100%;
        }

        .sc-body {
            padding: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .sc-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            margin-bottom: 12px;
            flex-shrink: 0;
        }

        .sc-level {
            font-size: .66rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 10px;
            display: inline-block;
            margin-bottom: 6px;
        }

        .level-state {
            background: #EEF4FB;
            color: var(--up-mid);
        }

        .level-central {
            background: #FFF3E8;
            color: #A07010;
        }

        .sc-name {
            font-size: .9rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1.35;
            margin-bottom: 6px;
        }

        .sc-dept {
            font-size: .7rem;
            color: var(--up-muted);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .sc-desc {
            font-size: .76rem;
            color: var(--up-muted);
            line-height: 1.6;
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .sc-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 10px;
        }

        .sc-tag {
            background: var(--up-cream);
            border: 1px solid var(--up-border);
            border-radius: 20px;
            padding: 2px 9px;
            font-size: .66rem;
            color: var(--up-navy);
        }

        .sc-footer {
            padding: 12px 16px;
            border-top: 1px dashed var(--up-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--up-cream);
        }

        .sc-benefit {
            font-size: .72rem;
            font-weight: 700;
            color: var(--up-green);
        }

        .sc-apply-btn {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 5px 14px;
            font-size: .74rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .18s;
        }

        .sc-apply-btn:hover {
            background: #c9540a;
        }

        /* scheme card list view */
        .list-view .scheme-card {
            flex-direction: row;
            border-radius: var(--radius);
        }

        .list-view .sc-banner {
            width: 6px;
            height: auto;
            flex-shrink: 0;
        }

        .list-view .sc-body {
            flex-direction: row;
            align-items: center;
            gap: 14px;
            padding: 14px;
        }

        .list-view .sc-icon {
            margin-bottom: 0;
            width: 42px;
            height: 42px;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .list-view .sc-desc {
            display: none;
        }

        .list-view .sc-tags {
            display: none;
        }

        .list-view .sc-main {
            flex: 1;
        }

        .list-view .sc-footer {
            border-top: none;
            padding: 0 14px;
            background: transparent;
            flex-shrink: 0;
            min-width: 160px;
        }

        /* ── Section heading ── */
        .cat-section {
            margin-bottom: 36px;
        }

        .cat-section-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--up-border);
        }

        .cat-section-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .cat-section-name {
            font-family: var(--font-hindi);
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .cat-section-name small {
            font-family: var(--font-body);
            font-size: .74rem;
            font-weight: 400;
            color: var(--up-muted);
            margin-left: 8px;
        }

        /* ── Eligibility result ── */
        .elig-result-bar {
            background: var(--up-light);
            border: 1.5px solid var(--up-mid);
            border-radius: var(--radius);
            padding: 14px 18px;
            margin-bottom: 20px;
            display: none;
        }

        .elig-result-bar.show {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .elig-match-count {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .elig-desc {
            font-size: .8rem;
            color: var(--up-muted);
        }

        /* ── Scheme detail modal ── */
        .modal-header {
            background: var(--up-navy);
            color: #fff;
        }

        .modal-header .btn-close {
            filter: invert(1);
        }

        .modal-body {
            padding: 0;
        }

        .modal-banner {
            height: 8px;
            width: 100%;
        }

        .modal-content-inner {
            padding: 24px;
        }

        .detail-stat {
            background: var(--up-light);
            border: 1px solid var(--up-border);
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }

        .detail-stat .num {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1;
        }

        .detail-stat .lbl {
            font-size: .68rem;
            color: var(--up-muted);
            margin-top: 3px;
        }

        .elig-check-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .82rem;
        }

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

        .elig-check-item i {
            font-size: .9rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .benefit-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .82rem;
        }

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

        .benefit-item .bi-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .9rem;
            flex-shrink: 0;
        }

        .doc-chip {
            background: var(--up-cream);
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 5px 10px;
            font-size: .75rem;
            color: var(--up-navy);
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin: 3px;
        }

        .modal-tab-btn {
            border: none;
            background: transparent;
            padding: 9px 16px;
            font-size: .8rem;
            color: var(--up-muted);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all .2s;
        }

        .modal-tab-btn.active {
            color: var(--up-navy);
            font-weight: 700;
            border-bottom-color: var(--up-saffron);
        }

        .modal-tab-pane {
            display: none;
        }

        .modal-tab-pane.active {
            display: block;
        }

        .apply-portal-btn {
            width: 100%;
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px;
            font-size: .9rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background .2s;
            text-decoration: none;
        }

        .apply-portal-btn:hover {
            background: #c9540a;
            color: #fff;
        }

        /* ── Featured scheme banner ── */
        .featured-banner {
            background: linear-gradient(90deg, var(--up-saffron), #c9540a);
            border-radius: var(--radius);
            padding: 18px 20px;
            color: #fff;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .featured-banner::after {
            content: '★ Featured';
            position: absolute;
            top: 10px;
            right: 14px;
            font-size: .68rem;
            font-weight: 700;
            background: rgba(255, 255, 255, .2);
            padding: 2px 8px;
            border-radius: 10px;
        }

        .featured-banner .fb-icon {
            font-size: 2rem;
            margin-bottom: 6px;
        }

        .featured-banner .fb-name {
            font-family: var(--font-hindi);
            font-size: 1.1rem;
            font-weight: 700;
        }

        .featured-banner .fb-desc {
            font-size: .78rem;
            opacity: .85;
            margin-top: 3px;
        }

        .featured-banner .fb-btn {
            background: #fff;
            color: var(--up-saffron);
            border: none;
            border-radius: 6px;
            padding: 6px 16px;
            font-size: .78rem;
            font-weight: 700;
            cursor: pointer;
            margin-top: 10px;
        }

        /* ── Sidebar widgets ── */
        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-body {
            padding: 14px;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .79rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-row .lbl {
            color: var(--up-muted);
        }

        .info-row .val {
            font-weight: 600;
            color: var(--up-navy);
            text-align: right;
        }

        .scheme-mini {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px dashed var(--up-border);
            cursor: pointer;
            transition: background .15s;
        }

        .scheme-mini:last-child {
            border-bottom: none;
        }

        .scheme-mini:hover {
            background: var(--up-light);
        }

        .scheme-mini .sm-icon {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .9rem;
            flex-shrink: 0;
        }

        .scheme-mini .sm-name {
            font-size: .8rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1.3;
        }

        .scheme-mini .sm-benefit {
            font-size: .7rem;
            color: var(--up-green);
            font-weight: 600;
        }

        .elig-form-ctrl {
            width: 100%;
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 7px 10px;
            font-size: .78rem;
            color: var(--up-text);
            outline: none;
            transition: border-color .2s;
            margin-bottom: 8px;
        }

        .elig-form-ctrl:focus {
            border-color: var(--up-mid);
        }

        /* ── Empty state ── */
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: var(--up-muted);
        }

        .empty-state .es-icon {
            font-size: 3rem;
            margin-bottom: 12px;
            opacity: .3;
        }

        /* footer */
        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        mark {
            background: rgba(232, 101, 10, .15);
            color: var(--up-saffron);
            padding: 0 2px;
            border-radius: 2px;
        }

        @media(max-width:992px) {
            .dept-nav {
                position: static;
                margin-bottom: 20px;
            }
        }

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.5rem;
            }

            .filter-row {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 4px;
            }

            .fp {
                flex-shrink: 0;
            }
        }
    

/* ==========================================================================
   Styles migrated from sitemap.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        /* ── Chrome ── */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* ── Hero ── */
        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 55%, #1e6ea8 100%);
            padding: 36px 0 30px;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -50px;
            top: -50px;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .09);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 6px;
            line-height: 1.6;
        }

        /* ── Search bar ── */
        .search-bar-wrap {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 14px 0;
            position: sticky;
            top: 49px;
            z-index: 900;
            box-shadow: 0 2px 8px rgba(10, 34, 64, .06);
        }

        .search-input-group {
            display: flex;
            border: 1.5px solid var(--up-border);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            transition: border-color .2s;
            box-shadow: var(--shadow-sm);
            max-width: 600px;
        }

        .search-input-group:focus-within {
            border-color: var(--up-mid);
        }

        .search-input-group .s-icon {
            padding: 0 14px;
            display: flex;
            align-items: center;
            color: var(--up-muted);
        }

        .search-input-group input {
            flex: 1;
            border: none;
            outline: none;
            font-size: .9rem;
            padding: 10px 0;
            color: var(--up-text);
            background: #fff;
        }

        .search-input-group input::placeholder {
            color: var(--up-muted);
        }

        .search-input-group .s-btn {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            padding: 0 20px;
            font-size: .84rem;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
        }

        .search-input-group .s-btn:hover {
            background: #c9540a;
        }

        .search-stats {
            font-size: .78rem;
            color: var(--up-muted);
            margin-top: 8px;
        }

        .search-stats strong {
            color: var(--up-navy);
        }

        /* ── Page body ── */
        .page-body {
            padding: 28px 0 60px;
        }

        /* ── Visual tree view ── */
        .tree-view {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Root node */
        .tree-root {
            background: linear-gradient(135deg, var(--up-navy), var(--up-blue));
            border-radius: var(--radius);
            padding: 18px 22px;
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 4px;
            box-shadow: var(--shadow-md);
        }

        .tree-root-icon {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            background: rgba(255, 255, 255, .15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            flex-shrink: 0;
        }

        .tree-root-name {
            font-family: var(--font-hindi);
            font-size: 1.2rem;
            font-weight: 700;
            color: #fff;
        }

        .tree-root-url {
            font-size: .73rem;
            color: rgba(255, 255, 255, .55);
            margin-top: 2px;
        }

        .tree-root-count {
            background: var(--up-saffron);
            color: #fff;
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .72rem;
            font-weight: 700;
            margin-left: auto;
            white-space: nowrap;
        }

        /* Section card */
        .sitemap-section {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            margin-bottom: 0;
            transition: box-shadow .2s;
        }

        .sitemap-section:hover {
            box-shadow: var(--shadow-md);
        }

        .section-head {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            border-bottom: 1px solid var(--up-border);
            cursor: pointer;
            user-select: none;
            transition: background .15s;
        }

        .section-head:hover {
            background: var(--up-cream);
        }

        .section-head.collapsed .section-chevron {
            transform: rotate(-90deg);
        }

        .section-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            flex-shrink: 0;
        }

        .section-name {
            font-size: .95rem;
            font-weight: 700;
            color: var(--up-navy);
            flex: 1;
        }

        .section-name small {
            font-size: .72rem;
            font-weight: 400;
            color: var(--up-muted);
            margin-left: 6px;
        }

        .section-url {
            font-size: .72rem;
            color: var(--up-mid);
            font-weight: 500;
        }

        .section-chevron {
            color: var(--up-muted);
            transition: transform .2s;
            flex-shrink: 0;
        }

        .section-body {
            padding: 14px 18px 18px;
        }

        /* Page items */
        .page-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .page-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px dashed var(--up-border);
            transition: background .15s;
        }

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

        .page-item:hover .page-link {
            color: var(--up-saffron);
        }

        .page-bullet {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .8rem;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .page-link {
            font-size: .84rem;
            font-weight: 600;
            color: var(--up-mid);
            text-decoration: none;
            line-height: 1.3;
            transition: color .15s;
        }

        .page-link:hover {
            color: var(--up-saffron);
        }

        .page-desc {
            font-size: .73rem;
            color: var(--up-muted);
            margin-top: 2px;
            line-height: 1.4;
        }

        .page-url {
            font-size: .68rem;
            color: var(--up-border);
            margin-top: 1px;
        }

        .page-badge {
            font-size: .62rem;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 10px;
            margin-left: 6px;
            vertical-align: middle;
            white-space: nowrap;
        }

        .badge-new {
            background: #FEF0E7;
            color: var(--up-saffron);
        }

        .badge-live {
            background: #d4edda;
            color: #155724;
        }

        .badge-beta {
            background: #fff3cd;
            color: #856404;
        }

        .badge-external {
            background: var(--up-light);
            color: var(--up-mid);
        }

        /* Sub-pages (level 3) */
        .sub-pages {
            margin-top: 10px;
            margin-left: 38px;
            border-left: 2px solid var(--up-border);
            padding-left: 14px;
        }

        .sub-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 0;
            font-size: .79rem;
        }

        .sub-item i {
            color: var(--up-border);
            font-size: .7rem;
            flex-shrink: 0;
        }

        .sub-item a {
            color: var(--up-muted);
            text-decoration: none;
            transition: color .15s;
        }

        .sub-item a:hover {
            color: var(--up-saffron);
        }

        .sub-item .sub-badge {
            font-size: .6rem;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 8px;
            margin-left: 4px;
        }

        /* ── Sidebar ── */
        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-body {
            padding: 14px;
        }

        .jump-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .79rem;
            cursor: pointer;
            text-decoration: none;
            color: var(--up-text);
            transition: color .15s;
        }

        .jump-link:last-child {
            border-bottom: none;
        }

        .jump-link:hover {
            color: var(--up-saffron);
        }

        .jump-icon {
            width: 30px;
            height: 30px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .85rem;
            flex-shrink: 0;
        }

        .stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .79rem;
        }

        .stat-row:last-child {
            border-bottom: none;
        }

        .stat-row .lbl {
            color: var(--up-muted);
        }

        .stat-row .val {
            font-weight: 700;
            color: var(--up-navy);
        }

        /* ── XML / print buttons ── */
        .action-btns {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 16px;
        }

        .action-btn {
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 7px 14px;
            font-size: .78rem;
            font-weight: 600;
            color: var(--up-navy);
            background: #fff;
            cursor: pointer;
            transition: all .18s;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
        }

        .action-btn:hover {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        /* ── Grid sitemap view ── */
        .grid-view {
            display: none;
        }

        .grid-section-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 16px;
            height: 100%;
            box-shadow: var(--shadow-sm);
            transition: all .2s;
        }

        .grid-section-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
        }

        .gs-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--up-border);
        }

        .gs-icon {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .gs-name {
            font-size: .85rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .gs-link-list {
            list-style: none;
        }

        .gs-link-list li {
            padding: 4px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .76rem;
        }

        .gs-link-list li:last-child {
            border-bottom: none;
        }

        .gs-link-list li a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .gs-link-list li a:hover {
            color: var(--up-saffron);
        }

        /* view toggle */
        .view-btns button {
            background: transparent;
            border: 1px solid var(--up-border);
            padding: 6px 12px;
            font-size: .8rem;
            color: var(--up-muted);
            cursor: pointer;
            transition: all .2s;
        }

        .view-btns button:first-child {
            border-radius: 6px 0 0 6px;
        }

        .view-btns button:last-child {
            border-radius: 0 6px 6px 0;
        }

        .view-btns button.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        /* highlight search match */
        mark {
            background: rgba(232, 101, 10, .18);
            color: var(--up-saffron);
            padding: 0 2px;
            border-radius: 2px;
        }

        .hidden-item {
            display: none !important;
        }

        /* last updated tag */
        .last-updated {
            font-size: .7rem;
            color: rgba(255, 255, 255, .5);
            margin-top: 4px;
        }

        /* footer */
        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.5rem;
            }

            .grid-view .row {
                --bs-gutter-x: 12px;
            }
        }
    

/* ==========================================================================
   Styles migrated from tenders.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        /* ── Chrome ── */
        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .util-strip a:hover {
            color: var(--up-amber);
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        /* ── Hero ── */
        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 55%, #1e6ea8 100%);
            padding: 36px 0 0;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .09);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 6px;
            line-height: 1.7;
        }

        .hero-stat {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: var(--radius);
            padding: 14px;
            text-align: center;
        }

        .hero-stat .num {
            font-size: 1.45rem;
            font-weight: 700;
            color: var(--up-amber);
        }

        .hero-stat .lbl {
            font-size: .7rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 3px;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .72rem;
            color: rgba(255, 255, 255, .8);
            margin: 3px 4px 3px 0;
        }

        .hero-tabs .nav-link {
            color: rgba(255, 255, 255, .6) !important;
            font-size: .82rem;
            padding: 11px 18px;
            border-bottom: 3px solid transparent;
            transition: all .2s;
            font-weight: 500;
        }

        .hero-tabs .nav-link:hover {
            color: #fff !important;
            background: rgba(255, 255, 255, .07);
        }

        .hero-tabs .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron) !important;
            background: rgba(255, 255, 255, .08);
        }

        /* ── Search bar ── */
        .search-bar-wrap {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 14px 0;
            position: sticky;
            top: 49px;
            z-index: 900;
            box-shadow: 0 2px 8px rgba(10, 34, 64, .06);
        }

        .search-input-group {
            display: flex;
            border: 1.5px solid var(--up-border);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            transition: border-color .2s;
            box-shadow: var(--shadow-sm);
        }

        .search-input-group:focus-within {
            border-color: var(--up-mid);
            box-shadow: 0 0 0 3px rgba(30, 95, 168, .1);
        }

        .search-input-group .s-icon {
            padding: 0 14px;
            display: flex;
            align-items: center;
            color: var(--up-muted);
        }

        .search-input-group input {
            flex: 1;
            border: none;
            outline: none;
            font-size: .9rem;
            padding: 10px 0;
            color: var(--up-text);
            background: #fff;
        }

        .search-input-group input::placeholder {
            color: var(--up-muted);
        }

        .search-input-group .s-btn {
            background: var(--up-saffron);
            color: #fff;
            border: none;
            padding: 0 20px;
            font-size: .84rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }

        .search-input-group .s-btn:hover {
            background: #c9540a;
        }

        .filter-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 10px;
            align-items: center;
        }

        .fp {
            border: 1.5px solid var(--up-border);
            border-radius: 20px;
            padding: 4px 13px;
            font-size: .75rem;
            font-weight: 500;
            color: var(--up-navy);
            background: #fff;
            cursor: pointer;
            white-space: nowrap;
            transition: all .18s;
            user-select: none;
        }

        .fp:hover {
            border-color: var(--up-mid);
            color: var(--up-mid);
        }

        .fp.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        .fp .cnt {
            font-size: .67rem;
            opacity: .7;
            margin-left: 2px;
        }

        /* ── Page body ── */
        .page-body {
            padding: 28px 0 56px;
        }

        /* ── Sidebar ── */
        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-body {
            padding: 14px;
        }

        .filter-label {
            font-size: .75rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 6px;
            margin-top: 10px;
        }

        .filter-label:first-child {
            margin-top: 0;
        }

        .filter-select {
            width: 100%;
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 7px 10px;
            font-size: .79rem;
            color: var(--up-text);
            outline: none;
            cursor: pointer;
            background: #fff;
            transition: border-color .2s;
            margin-bottom: 8px;
        }

        .filter-select:focus {
            border-color: var(--up-mid);
        }

        .filter-check {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 5px 0;
            font-size: .79rem;
            cursor: pointer;
            border-bottom: 1px dashed var(--up-border);
        }

        .filter-check:last-child {
            border-bottom: none;
        }

        .filter-check input {
            accent-color: var(--up-mid);
            width: 14px;
            height: 14px;
        }

        .filter-check .fc-count {
            font-size: .7rem;
            color: var(--up-muted);
            margin-left: auto;
        }

        .apply-filter-btn {
            width: 100%;
            background: var(--up-navy);
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 8px;
            font-size: .8rem;
            font-weight: 700;
            cursor: pointer;
            margin-top: 10px;
            transition: background .2s;
        }

        .apply-filter-btn:hover {
            background: var(--up-blue);
        }

        .reset-filter-btn {
            width: 100%;
            background: transparent;
            color: var(--up-muted);
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 7px;
            font-size: .76rem;
            cursor: pointer;
            margin-top: 6px;
            transition: all .2s;
        }

        .reset-filter-btn:hover {
            color: var(--up-navy);
            border-color: var(--up-navy);
        }

        /* ── Sort bar ── */
        .sort-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .sort-bar .rc {
            font-size: .82rem;
            color: var(--up-muted);
        }

        .sort-bar .rc strong {
            color: var(--up-navy);
        }

        .view-btns button {
            background: transparent;
            border: 1px solid var(--up-border);
            padding: 6px 10px;
            font-size: .85rem;
            color: var(--up-muted);
            cursor: pointer;
            transition: all .2s;
        }

        .view-btns button:first-child {
            border-radius: 6px 0 0 6px;
        }

        .view-btns button:last-child {
            border-radius: 0 6px 6px 0;
        }

        .view-btns button.active {
            background: var(--up-navy);
            color: #fff;
            border-color: var(--up-navy);
        }

        /* ── Tender card ── */
        .tender-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 18px 20px;
            margin-bottom: 12px;
            transition: box-shadow .2s, border-color .2s;
            cursor: pointer;
            position: relative;
        }

        .tender-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
        }

        .tender-card.urgent {
            border-left: 4px solid #c0392b;
        }

        .tender-card.new-card {
            border-left: 4px solid var(--up-saffron);
        }

        .tender-card.closing-soon {
            border-left: 4px solid var(--up-amber);
        }

        .tender-card.closed {
            border-left: 4px solid var(--up-muted);
            opacity: .75;
        }

        .tc-top {
            display: flex;
            align-items: flex-start;
            gap: 14px;
        }

        .tc-icon {
            width: 46px;
            height: 46px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .tc-ref {
            font-size: .7rem;
            font-weight: 700;
            color: var(--up-muted);
            letter-spacing: .3px;
            margin-bottom: 4px;
        }

        .tc-title {
            font-size: .92rem;
            font-weight: 700;
            color: var(--up-navy);
            line-height: 1.4;
            margin-bottom: 6px;
        }

        .tc-dept {
            font-size: .74rem;
            color: var(--up-mid);
            font-weight: 600;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .tc-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            font-size: .74rem;
            color: var(--up-muted);
        }

        .tc-meta span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .tc-meta i {
            font-size: .8rem;
        }

        .tc-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed var(--up-border);
            flex-wrap: wrap;
            gap: 8px;
        }

        .tc-value {
            font-size: .82rem;
            font-weight: 700;
            color: var(--up-green);
        }

        .tc-deadline {
            font-size: .75rem;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
        }

        .deadline-open {
            background: #d4edda;
            color: #155724;
        }

        .deadline-soon {
            background: #fff3cd;
            color: #856404;
        }

        .deadline-closed {
            background: #f8d7da;
            color: #721c24;
        }

        .tc-actions {
            display: flex;
            gap: 6px;
        }

        .tc-btn {
            font-size: .74rem;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all .18s;
            text-decoration: none;
        }

        .tc-btn-view {
            background: var(--up-light);
            color: var(--up-mid);
        }

        .tc-btn-view:hover {
            background: var(--up-mid);
            color: #fff;
        }

        .tc-btn-doc {
            background: #FEF0E7;
            color: var(--up-saffron);
        }

        .tc-btn-doc:hover {
            background: var(--up-saffron);
            color: #fff;
        }

        .tc-btn-bid {
            background: var(--up-saffron);
            color: #fff;
        }

        .tc-btn-bid:hover {
            background: #c9540a;
            color: #fff;
        }

        .tc-status-badge {
            font-size: .66rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 10px;
            white-space: nowrap;
        }

        .status-open {
            background: #d4edda;
            color: #155724;
        }

        .status-soon {
            background: #fff3cd;
            color: #856404;
        }

        .status-closed {
            background: #f8d7da;
            color: #721c24;
        }

        .status-new {
            background: #FEF0E7;
            color: var(--up-saffron);
        }

        .new-badge {
            background: var(--up-saffron);
            color: #fff;
            font-size: .62rem;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 3px;
            margin-left: 6px;
            vertical-align: middle;
        }

        /* List view */
        .list-view .tender-card {
            padding: 12px 16px;
        }

        .list-view .tc-top {
            gap: 10px;
        }

        .list-view .tc-icon {
            width: 36px;
            height: 36px;
            font-size: .95rem;
        }

        .list-view .tc-title {
            font-size: .84rem;
        }

        .list-view .tc-meta {
            display: none;
        }

        /* ── Corrigendum timeline ── */
        .corr-item {
            display: flex;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px dashed var(--up-border);
        }

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

        .corr-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--up-saffron);
            margin-top: 5px;
            flex-shrink: 0;
        }

        .corr-date {
            font-size: .72rem;
            color: var(--up-muted);
            min-width: 90px;
            flex-shrink: 0;
        }

        .corr-text {
            font-size: .8rem;
            color: var(--up-navy);
        }

        /* ── Info card ── */
        .info-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            margin-bottom: 14px;
        }

        .card-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .card-body-inner {
            padding: 14px;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .79rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-row .lbl {
            color: var(--up-muted);
        }

        .info-row .val {
            font-weight: 600;
            color: var(--up-navy);
            text-align: right;
        }

        .portal-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 0;
            border-bottom: 1px dashed var(--up-border);
            text-decoration: none;
            color: inherit;
            transition: all .15s;
        }

        .portal-link:last-child {
            border-bottom: none;
        }

        .portal-link:hover {
            color: var(--up-saffron);
        }

        .portal-link .pl-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .95rem;
            flex-shrink: 0;
        }

        .portal-link .pl-name {
            font-size: .8rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .portal-link .pl-url {
            font-size: .7rem;
            color: var(--up-mid);
        }

        /* ── Deadline countdown ── */
        .countdown-box {
            background: linear-gradient(135deg, var(--up-navy), var(--up-blue));
            border-radius: var(--radius);
            padding: 16px;
            color: #fff;
            text-align: center;
        }

        .cd-num {
            font-size: 2rem;
            font-weight: 700;
            color: var(--up-amber);
            line-height: 1;
        }

        .cd-lbl {
            font-size: .68rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 2px;
        }

        .cd-title {
            font-size: .75rem;
            color: rgba(255, 255, 255, .7);
            margin-bottom: 12px;
        }

        /* ── Gem/eProcurement portal cards ── */
        .proc-portal {
            background: var(--up-cream);
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 16px;
            text-align: center;
            cursor: pointer;
            transition: all .2s;
            text-decoration: none;
            display: block;
            height: 100%;
        }

        .proc-portal:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-saffron);
        }

        .proc-portal .pp-icon {
            font-size: 2rem;
            margin-bottom: 8px;
        }

        .proc-portal .pp-name {
            font-size: .85rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 4px;
        }

        .proc-portal .pp-url {
            font-size: .7rem;
            color: var(--up-mid);
            margin-bottom: 6px;
        }

        .proc-portal .pp-desc {
            font-size: .74rem;
            color: var(--up-muted);
            line-height: 1.5;
        }

        /* ── Stats strip ── */
        .stats-strip {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 12px 0;
        }

        .stat-box {
            text-align: center;
            padding: 0 16px;
            border-right: 1px solid var(--up-border);
        }

        .stat-box:last-child {
            border-right: none;
        }

        .stat-box .num {
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .stat-box .lbl {
            font-size: .7rem;
            color: var(--up-muted);
            margin-top: 2px;
        }

        /* ── Tender detail modal ── */
        .modal-header {
            background: var(--up-navy);
            color: #fff;
        }

        .modal-header .btn-close {
            filter: invert(1);
        }

        .modal-tab-btn {
            border: none;
            background: transparent;
            padding: 9px 16px;
            font-size: .8rem;
            color: var(--up-muted);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all .2s;
        }

        .modal-tab-btn.active {
            color: var(--up-navy);
            font-weight: 700;
            border-bottom-color: var(--up-saffron);
        }

        .modal-tab-pane {
            display: none;
            padding: 18px 0 4px;
        }

        .modal-tab-pane.active {
            display: block;
        }

        /* ── Tip boxes ── */
        .tip-box {
            border-radius: var(--radius);
            padding: 12px 16px;
            margin-bottom: 14px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }

        .tip-box.info {
            background: var(--up-light);
            border: 1px solid var(--up-border);
        }

        .tip-box.warning {
            background: #fff3cd;
            border: 1px solid #ffc107;
        }

        .tip-box i {
            font-size: 1rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .tip-box.info i {
            color: var(--up-mid);
        }

        .tip-box.warning i {
            color: #856404;
        }

        .tip-box p {
            font-size: .79rem;
            line-height: 1.65;
            margin: 0;
        }

        /* ── Empty state ── */
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: var(--up-muted);
        }

        .empty-state .es-icon {
            font-size: 3rem;
            margin-bottom: 12px;
            opacity: .3;
        }

        /* section heads */
        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-saffron);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 36px;
            height: 3px;
            background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
            border-radius: 2px;
            margin-top: 7px;
            margin-bottom: 20px;
        }

        mark {
            background: rgba(232, 101, 10, .15);
            color: var(--up-saffron);
            padding: 0 2px;
            border-radius: 2px;
        }

        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.5rem;
            }

            .filter-row {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 4px;
            }

            .fp {
                flex-shrink: 0;
            }
        }
    

/* ==========================================================================
   Styles migrated from voter-services.html
   ========================================================================== */


        :root {
            --up-navy: #0A2240;
            --up-blue: #1A3F6F;
            --up-mid: #1E5FA8;
            --up-saffron: #E8650A;
            --up-amber: #F5A623;
            --up-cream: #FDF8F1;
            --up-light: #EEF4FB;
            --up-border: #C8D8EC;
            --up-text: #1A1A2E;
            --up-muted: #5A6A80;
            --up-green: #1A7A3C;
            --radius: 10px;
            --shadow-sm: 0 2px 8px rgba(10, 34, 64, .08);
            --shadow-md: 0 4px 20px rgba(10, 34, 64, .13);
            --font-hindi: 'Noto Serif Devanagari', serif;
            --font-body: 'Noto Sans', 'Inter', sans-serif;
        }

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

        body {
            font-family: var(--font-body);
            color: var(--up-text);
            background: #f4f7fb;
        }

        .util-strip {
            background: var(--up-navy);
            color: rgba(255, 255, 255, .6);
            font-size: .75rem;
            padding: 5px 0;
        }

        .util-strip a {
            color: rgba(255, 255, 255, .6);
            text-decoration: none;
        }

        .site-header {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 100%);
            border-bottom: 4px solid var(--up-saffron);
            padding: 12px 0;
        }

        .header-emblem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--up-amber), var(--up-saffron));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--up-navy);
            font-weight: 700;
            flex-shrink: 0;
        }

        .h-title {
            font-family: var(--font-hindi);
            font-size: 1.25rem;
            color: #fff;
            font-weight: 700;
        }

        .h-sub {
            font-size: .72rem;
            color: rgba(255, 255, 255, .5);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .main-nav {
            background: var(--up-mid);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(10, 34, 64, .25);
        }

        .main-nav .nav-link {
            color: rgba(255, 255, 255, .85) !important;
            font-size: .83rem;
            padding: 12px 14px !important;
            border-bottom: 3px solid transparent;
            transition: all .2s;
        }

        .main-nav .nav-link:hover,
        .main-nav .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron);
            background: rgba(255, 255, 255, .07);
        }

        .breadcrumb-bar {
            background: #fff;
            border-bottom: 1px solid var(--up-border);
            padding: 9px 0;
            font-size: .8rem;
        }

        .breadcrumb-item a {
            color: var(--up-mid);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: var(--up-muted);
        }

        .page-hero {
            background: linear-gradient(135deg, var(--up-navy) 0%, var(--up-blue) 55%, #1e6ea8 100%);
            padding: 38px 0 0;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: rgba(232, 101, 10, .09);
        }

        .hero-title {
            font-family: var(--font-hindi);
            font-size: 2.1rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
        }

        .hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .65);
            margin-top: 6px;
            line-height: 1.7;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: .72rem;
            color: rgba(255, 255, 255, .8);
            margin: 3px 4px 3px 0;
        }

        .hero-stat {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: var(--radius);
            padding: 14px;
            text-align: center;
        }

        .hero-stat .num {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-amber);
        }

        .hero-stat .lbl {
            font-size: .7rem;
            color: rgba(255, 255, 255, .6);
            margin-top: 3px;
        }

        .hero-tabs .nav-link {
            color: rgba(255, 255, 255, .6) !important;
            font-size: .82rem;
            padding: 11px 18px;
            border-bottom: 3px solid transparent;
            transition: all .2s;
            font-weight: 500;
        }

        .hero-tabs .nav-link:hover {
            color: #fff !important;
            background: rgba(255, 255, 255, .07);
        }

        .hero-tabs .nav-link.active {
            color: #fff !important;
            border-bottom-color: var(--up-saffron) !important;
            background: rgba(255, 255, 255, .08);
        }

        .page-body {
            padding: 30px 0 60px;
        }

        .sec-eyebrow {
            font-size: .72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--up-saffron);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sec-title {
            font-family: var(--font-hindi);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--up-navy);
        }

        .sec-divider {
            width: 38px;
            height: 3px;
            background: linear-gradient(90deg, var(--up-saffron), var(--up-amber));
            border-radius: 2px;
            margin-top: 8px;
            margin-bottom: 24px;
        }

        .info-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            margin-bottom: 20px;
        }

        .card-head {
            background: var(--up-navy);
            color: #fff;
            padding: 10px 16px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .card-body-inner {
            padding: 18px;
        }

        .svc-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 18px;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: all .2s;
            cursor: pointer;
        }

        .svc-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--up-mid);
            transform: translateY(-2px);
        }

        .svc-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            margin-bottom: 12px;
        }

        .svc-name {
            font-size: .88rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 5px;
        }

        .svc-desc {
            font-size: .78rem;
            color: var(--up-muted);
            line-height: 1.6;
            flex: 1;
        }

        .svc-btn {
            margin-top: 12px;
            background: var(--up-light);
            color: var(--up-mid);
            border: 1px solid var(--up-border);
            border-radius: 6px;
            padding: 7px;
            font-size: .78rem;
            font-weight: 700;
            text-align: center;
            transition: all .18s;
        }

        .svc-card:hover .svc-btn {
            background: var(--up-mid);
            color: #fff;
            border-color: var(--up-mid);
        }

        .form-ctrl {
            width: 100%;
            border: 1.5px solid var(--up-border);
            border-radius: 7px;
            padding: 9px 12px;
            font-size: .84rem;
            color: var(--up-text);
            outline: none;
            transition: border-color .2s;
            background: #fff;
        }

        .form-ctrl:focus {
            border-color: var(--up-mid);
            box-shadow: 0 0 0 3px rgba(30, 95, 168, .1);
        }

        .form-label-up {
            font-size: .78rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 4px;
        }

        .form-label-up span {
            color: #c0392b;
        }

        .form-group {
            margin-bottom: 14px;
        }

        .submit-btn {
            width: 100%;
            background: var(--up-saffron);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 11px;
            font-size: .86rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
        }

        .submit-btn:hover {
            background: #c9540a;
        }

        .result-box {
            background: var(--up-light);
            border: 1.5px solid var(--up-mid);
            border-radius: var(--radius);
            padding: 18px;
            margin-top: 16px;
            display: none;
        }

        .result-box.show {
            display: block;
        }

        .result-row {
            display: flex;
            justify-content: space-between;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .82rem;
        }

        .result-row:last-child {
            border-bottom: none;
        }

        .result-row .lbl {
            color: var(--up-muted);
        }

        .result-row .val {
            font-weight: 700;
            color: var(--up-navy);
        }

        .booth-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
            gap: 14px;
        }

        .booth-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: var(--up-light);
            color: var(--up-mid);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .booth-name {
            font-size: .86rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 3px;
        }

        .booth-meta {
            font-size: .76rem;
            color: var(--up-muted);
            line-height: 1.5;
        }

        .step-item {
            display: flex;
            gap: 14px;
            margin-bottom: 18px;
        }

        .step-num {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--up-navy);
            color: #fff;
            font-size: .8rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .step-title {
            font-size: .85rem;
            font-weight: 700;
            color: var(--up-navy);
            margin-bottom: 3px;
        }

        .step-desc {
            font-size: .78rem;
            color: var(--up-muted);
            line-height: 1.6;
        }

        .sidebar-card {
            background: #fff;
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-head {
            background: var(--up-navy);
            color: #fff;
            padding: 9px 14px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-body {
            padding: 14px;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 7px 0;
            border-bottom: 1px dashed var(--up-border);
            font-size: .79rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-row .lbl {
            color: var(--up-muted);
        }

        .info-row .val {
            font-weight: 700;
            color: var(--up-navy);
            text-align: right;
        }

        .faq-item {
            border: 1px solid var(--up-border);
            border-radius: var(--radius);
            margin-bottom: 8px;
            overflow: hidden;
        }

        .faq-q {
            padding: 12px 16px;
            font-size: .85rem;
            font-weight: 600;
            color: var(--up-navy);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background .15s;
        }

        .faq-q:hover {
            background: var(--up-light);
        }

        .faq-q.open {
            background: var(--up-navy);
            color: #fff;
        }

        .faq-q.open .chev {
            transform: rotate(180deg);
        }

        .chev {
            transition: transform .2s;
        }

        .faq-a {
            display: none;
            padding: 12px 16px;
            font-size: .8rem;
            color: var(--up-muted);
            line-height: 1.75;
            background: var(--up-cream);
        }

        .faq-a.show {
            display: block;
        }

        .tip-box {
            border-radius: var(--radius);
            padding: 13px 16px;
            margin-bottom: 16px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }

        .tip-box.info {
            background: var(--up-light);
            border: 1px solid var(--up-border);
        }

        .tip-box.warning {
            background: #fff3cd;
            border: 1px solid #ffc107;
        }

        .tip-box i {
            font-size: 1rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .tip-box.info i {
            color: var(--up-mid);
        }

        .tip-box.warning i {
            color: #856404;
        }

        .tip-box p {
            font-size: .79rem;
            line-height: 1.65;
            margin: 0;
        }

        .main-tab {
            display: none;
        }

        .main-tab.active {
            display: block;
        }

        .site-footer {
            background: #060F1C;
            color: rgba(255, 255, 255, .45);
            padding: 18px 0;
            font-size: .75rem;
            text-align: center;
        }

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

        @media(max-width:768px) {
            .hero-title {
                font-size: 1.5rem;
            }
        }