/* ========== style.css ========== */
/* ==============================================
   AAKASH COOPERATIVE - MAIN STYLESHEET
   Green Theme Similar to Nepali Cooperative Sites
   ============================================== */

/* Color Variables */
/* ════════════════════════════════════════════════════
   ब्रान्ड CSS Variables — एकै ठाउँमा change गर्नुहोस्
   Brand color change गर्न यहाँ मात्र edit गर्नुहोस्
   ════════════════════════════════════════════════════ */
:root {
    /* ── Primary Green (Logo, Header, Buttons) ── */
    --primary-color:  #1a5f2a;   /* मुख्य हरियो */
    --primary-dark:   #145021;   /* dark hover state */
    --primary-light:  #28a745;   /* light / success green */
    --primary-green10: #e8f5e9;  /* very light green background */
    --primary-green20: #c8e6c9;  /* light green border/bg */

    /* ── Secondary (header/topbar — admin-overridable) ── */
    --secondary-color: #ffc107;  /* yellow/gold fallback — _color-vars.php override गर्छ */

    /* ── Dark mode backgrounds ── */
    --dark-bg:        #1a2535;   /* dark mode card/section bg */
    --dark-bg-deep:   #111825;   /* dark mode page bg */

    /* ── Text ── */
    --text-color:  #333333;      /* main body text */
    --text-light:  #666666;      /* secondary text */
    --text-muted:  #999999;      /* muted/placeholder */

    /* ── Backgrounds ── */
    --white:       #ffffff;
    --light-bg:    #f8f9fa;      /* page section bg */
    --light-green: #f8fdf9;      /* green-tinted section bg */
    --light-card:  #fafafa;      /* card bg */
    --off-white:   #f5f5f5;      /* alternate row bg */

    /* ── Borders ── */
    --border-color:  #e0e0e0;    /* standard border */
    --border-light:  #eeeeee;    /* subtle border */
    --border-medium: #cccccc;    /* form inputs */

    /* ── State Colors ── */
    --success: #28a745;
    --danger:  #dc3545;
    --warning: #ffc107;

    /* ── Spacing (consistent spacing) ── */
    --section-py: 60px;          /* section top/bottom padding */
    --card-radius: 12px;         /* card border radius */
    --btn-radius:  6px;          /* button border radius */

    /* ── Shadows ── */
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.16);
    --shadow-primary: 0 4px 16px rgba(26,95,42,0.25);
}

/* ==============================================
   WHATSAPP FLOATING BUTTON
   ============================================== */
.whatsapp-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    z-index: 9998;
    box-shadow: 0 3px 14px rgba(37, 211, 102, 0.35);
    transition: all 0.3s ease;
    animation: whatsapp-pulse 2s infinite;
}

.whatsapp-float:hover {
    background: #128C7E;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
}

@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

@media (max-width: 767px) {
    .whatsapp-float {
        right: 12px;
        bottom: 12px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* ==============================================
   SCROLL PROGRESS BAR
   ============================================== */
/* --- Scroll Progress Bar (माथि हरियो रेखा) --- */
.scroll-progress-container { display: none !important; /* SA panel removes need */

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;                                    /* मोटाई: 4px = पातलो, 6px = मोटो */
    background: rgba(0, 0, 0, 0.08);
    z-index: 99999;
}

.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
    transition: width 0.08s linear;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 12px rgba(26, 95, 42, 0.6);     /* रेखाको glow */
}

/* ==============================================
   SCROLL NAVIGATION BUTTONS (↑ / ↓)
   right side मा fixed देखिन्छ
   ============================================== */
.scroll-nav {
    display: none !important; /* SA panel ले scroll handle गर्छ — duplicate हटाइयो */
    position: fixed;
    right: 22px;
    bottom: 110px;   /* WhatsApp (bottom:25px + 60px height) भन्दा माथि राखियो */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(60px);                    /* दायाँबाट slide गरेर आउँछ */
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.35s;
}

.scroll-nav.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Swipe gesture flash feedback */
.scroll-nav.swipe-flash .scroll-btn {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(26, 95, 42, 0.5);
}

/* --- UP button (माथि जान) --- */
.scroll-btn {
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                background 0.25s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    position: relative;
}

.scroll-btn.up {
    background: linear-gradient(145deg, var(--primary-color), var(--primary-light));
    color: #fff;
    animation: pulse-scroll 2.5s ease-in-out infinite;
}

/* UP button: subtle pulse animation */
@keyframes pulse-scroll {
    0%, 100% { box-shadow: 0 4px 18px rgba(26, 95, 42, 0.3); }
    50%       { box-shadow: 0 4px 28px rgba(26, 95, 42, 0.55), 0 0 0 6px rgba(26, 95, 42, 0.08); }
}

.scroll-btn.down {
    background: #fff;
    color: var(--primary-color);
    border: 2px solid rgba(26, 95, 42, 0.3);
}

.scroll-btn:hover {
    transform: scale(1.14) translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.scroll-btn:active {
    transform: scale(0.95);
}

.scroll-btn.up:hover {
    background: linear-gradient(145deg, var(--primary-dark), var(--primary-color));
    box-shadow: 0 8px 28px rgba(26, 95, 42, 0.4);
}

.scroll-btn.down:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: transparent;
}

/* Keyboard hint tooltip (hover मा देखिन्छ) */
.scroll-btn::after {
    content: attr(data-hint);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: rgba(26, 95, 42, 0.92);
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-weight: 500;
}

.scroll-btn:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* --- Scroll Percentage Badge --- */
.scroll-percent {
    background: var(--primary-color);
    color: #fff;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    min-width: 36px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 2px 8px rgba(26, 95, 42, 0.3);
}

.scroll-nav:hover .scroll-percent {
    opacity: 1;
}

@media (max-width: 767px) {
    .scroll-nav {
        right: 15px;
        bottom: 15px;
    }

    .scroll-btn {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .scroll-percent {
        display: none;
    }
}

/* ==============================================
   PAGE LOADER
   ============================================== */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none !important;
}

/* Ensure page is visible when loaded class is added to body */
body.page-loaded .page-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none !important;
}

.loader-inner {
    text-align: center;
}

.loader-logo {
    margin-bottom: 30px;
    animation: pulse 1.5s ease-in-out infinite;
    display: none; /* Hide logo during loading */
}

.loader-spinner-wrap {
    margin-bottom: 30px;
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader-logo img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background: var(--white);
    border-radius: 50%;
    padding: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.loader-progress {
    width: 180px;
    margin: 0 auto 15px;
}

.progress-bar {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--secondary-color), #ffd54f);
    border-radius: 3px;
    transition: width 0.1s ease;
}

.progress-text {
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
}

.loader-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

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

/* Utility Classes */
.cursor-pointer {
    cursor: pointer;
}

body {
    font-family: 'Mukta', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Improved text rendering for Nepali/Devanagari */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Ensure proper rendering for Nepali text */
html[lang="ne"], html[lang="np"],
body.lang-ne, body.lang-np {
    font-feature-settings: "liga" 1, "kern" 1;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-light);
}

img {
    max-width: 100%;
    height: auto;
}

/* ==============================================
   TOP BAR
   ============================================== */
.top-bar {
    background: var(--primary-dark);
    color: var(--white);
    padding: 8px 0;
    font-size: 14px;
}

.top-bar .top-info {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.top-bar .top-info li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.top-bar .top-info i {
    color: var(--secondary-color);
}

.top-bar .social-links {
    list-style: none;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
}

.top-bar .social-links a {
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.1);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

.top-bar .social-links a:hover {
    background: var(--secondary-color);
    color: var(--primary-dark);
}

/* Language Switch */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 15px;
}

.lang-btn {
    color: rgba(255,255,255,0.7) !important;
    font-weight: 500;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s;
}

.lang-btn:hover,
.lang-btn.active {
    color: var(--white) !important;
    background: rgba(255,255,255,0.15);
}

.lang-divider {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
}

/* Topbar Search and Dark Mode Buttons */
.social-links .topbar-search-btn,
.social-links .topbar-darkmode-btn {
    margin-left: 5px;
}

.social-links .topbar-search-btn a,
.social-links .topbar-darkmode-btn a {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
}

.social-links .topbar-search-btn a:hover,
.social-links .topbar-darkmode-btn a:hover {
    background: var(--secondary-color) !important;
    transform: scale(1.1);
}

.social-links .topbar-search-btn a:hover i,
.social-links .topbar-darkmode-btn a:hover i {
    color: var(--primary-dark) !important;
}

/* Internet Banking Button - Icon Only */
.internet-banking-btn {
    margin-right: 5px;
}

.internet-banking-btn a {
    background: var(--secondary-color) !important;
    color: var(--primary-dark) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
}

.internet-banking-btn a:hover {
    background: var(--white) !important;
    color: var(--primary-color) !important;
    transform: scale(1.1);
}

/* ==============================================
   MAIN HEADER
   ============================================== */
.main-header {
    background: var(--white);
    padding: 12px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

@media (max-width: 767px) {
    .main-header {
        padding: 10px 0;
    }
}

/* Banner Style Logo - Wide logo with name/slogan embedded */
.logo-banner {
    display: flex;
    align-items: center;
}

.logo-banner-link {
    display: block;
    line-height: 0;
}

.logo-banner-img {
    height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* High quality image rendering for logos */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    /* Prevent blur on retina displays */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /* Ensure sharp edges */
    filter: contrast(1);
}

@media (max-width: 991px) {
    .logo-banner-img {
        height: 44px;
    }
}

@media (max-width: 767px) {
    .logo-banner-img {
        height: 36px;
    }
}

@media (max-width: 480px) {
    .logo-banner-img {
        height: 30px;
    }
}

/* Old Logo Style (kept for compatibility) */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo img {
    max-height: 60px;
    width: auto;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 220px;
}

.logo-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.5;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.logo-slogan {
    font-size: 0.72rem;
    color: var(--text-light);
    text-align: left;
    margin-top: 2px;
}

/* Navigation */
.main-nav {
    display: flex;
    justify-content: flex-end;
}

.nav-menu {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    align-items: center;
}

/* Ensure header container uses full width */
.main-header .container {
    max-width: 1400px;
}

.nav-menu > li {
    position: relative;
    margin: 0 2px;
}

.nav-menu > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    color: var(--text-color);
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s;
    white-space: nowrap;
    font-size: 14px;
}

.nav-menu > li > a:hover,
.nav-menu > li.active > a {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-1px);
}

/* Dropdown */
.nav-menu .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--white);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s;
    list-style: none;
}

.nav-menu .has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Fix dropdown going outside viewport for last menu items */
.nav-menu > li:nth-last-child(-n+3).has-dropdown .dropdown {
    left: auto;
    right: 0;
}

/* Ensure dropdown stays within viewport */
@media (min-width: 992px) {
    .nav-menu .dropdown {
        max-width: calc(100vw - 40px);
    }
}

.nav-menu .dropdown li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 400;
}

.nav-menu .dropdown li a i {
    font-size: 12px;
    width: 16px;
    text-align: center;
    opacity: 0.7;
}

.nav-menu .dropdown li a:hover {
    background: var(--light-bg);
    color: var(--primary-color);
}

/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 12px 16px;
    font-size: 22px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus,
.mobile-menu-toggle:active {
    background: var(--primary-dark);
    outline: none;
}

.close-menu {
    display: none;
}

@media (max-width: 991px) {
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        float: right;
        margin-top: 5px;
    }

    /* Main nav styles moved to MOBILE MENU FIXES section below for consistency */

    .close-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 15px;
        right: 15px;
        background: var(--light-bg);
        border: none;
        font-size: 24px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        z-index: 100001;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .close-menu:hover,
    .close-menu:active {
        background: var(--border-color);
    }

    .nav-menu {
        flex-direction: column;
        margin-top: 10px;
        width: 100%;
    }

    .nav-menu > li {
        width: 100%;
    }

    .nav-menu > li > a {
        padding: 15px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .nav-menu .dropdown {
        position: static;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transform: none;
        box-shadow: none;
        padding-left: 20px;
        transition: all 0.3s ease-in-out;
        background: var(--light-bg);
        border-radius: 0;
    }

    .nav-menu .has-dropdown.open .dropdown {
        opacity: 1;
        visibility: visible;
        max-height: 600px;
        padding: 10px 0 10px 20px;
    }

    .nav-menu .dropdown li a {
        padding: 12px 15px;
        display: block;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        color: var(--text-color);
        background: transparent;
        border-radius: 5px;
        margin: 2px 5px;
    }

    .nav-menu .dropdown li a:hover,
    .nav-menu .dropdown li a:active {
        background: var(--primary-color);
        color: var(--white);
    }

    .nav-menu .has-dropdown > a i {
        transition: transform 0.3s;
        pointer-events: none;
    }

    .nav-menu .has-dropdown.open > a i {
        transform: rotate(180deg);
    }

    /* Make parent dropdown link full width clickable */
    .nav-menu .has-dropdown > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        cursor: pointer;
    }

    /* Menu overlay styles moved to MOBILE MENU FIXES section below */
}

/* ==============================================
   NOTICE TICKER (Scrolling Notices)
   ============================================== */
.notice-ticker {
    background: #fff8e1;
    border-bottom: 2px solid var(--secondary-color);
    padding: 0;
    position: relative;
    z-index: 50;
    overflow: hidden;
}

.ticker-wrapper {
    display: flex;
    align-items: stretch;
    min-height: 30px;
    overflow: hidden;
}

.ticker-label {
    background: var(--primary-color);
    color: var(--white);
    padding: 5px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    position: relative;
    flex-shrink: 0;
    z-index: 1;
    letter-spacing: 0.02em;
}

.ticker-label::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 0;
    bottom: 0;
    border-style: solid;
    border-width: 15px 0 15px 12px;
    border-color: transparent transparent transparent var(--primary-color);
    height: 100%;
}

.ticker-label i {
    font-size: 13px;
}

.ticker-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 28px;
    margin-left: 0;
}

.ticker-scroll {
    display: flex;
    gap: 50px;
    animation: tickerScroll 30s linear infinite;
    white-space: nowrap;
    padding-left: 10px;
}

.ticker-scroll:hover {
    animation-play-state: paused;
}

@keyframes tickerScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.ticker-item:hover {
    color: var(--primary-color);
}

.ticker-item i {
    font-size: 6px;
    color: var(--primary-color);
}

@media (max-width: 767px) {
    .ticker-label {
        padding: 4px 10px;
        font-size: 10.5px;
    }

    .ticker-label span {
        display: none;
    }

    .ticker-label::after {
        border-width: 15px 0 15px 10px;
        right: -10px;
    }

    .ticker-content {
        padding-left: 18px;
    }

    .ticker-item {
        font-size: 11.5px;
    }
}

/* ==============================================
   POPUP NOTICE MODAL
   ============================================== */
.notice-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.popup-content {
    background: var(--white);
    border-radius: 15px;
    max-width: 500px;
    width: 100%;
    position: relative;
    animation: popupIn 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

@keyframes popupIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f1f1f1;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 10;
}

.popup-close:hover {
    background: var(--border-color);
    color: #c00;
}

.popup-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
    padding: 25px;
    text-align: center;
    border-radius: 15px 15px 0 0;
}

.popup-header i {
    font-size: 40px;
    margin-bottom: 10px;
    display: block;
}

.popup-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.popup-body {
    padding: 25px;
}

.popup-body h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.popup-body p {
    color: var(--text-color);
    line-height: 1.7;
    margin-bottom: 20px;
}

@media (max-width: 576px) {
    .popup-content {
        margin: 10px;
    }

    .popup-header {
        padding: 20px;
    }

    .popup-body {
        padding: 20px;
    }
}

/* ==============================================
   HERO SLIDER - Enhanced Eye-Catching Design
   ============================================== */
.hero-slider {
    position: relative;
    overflow: hidden;
}

.slider-bg {
    height: 550px;
    background: var(--primary-color);
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Slider background image - using img tag for better compatibility */
.slider-image-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.slider-bg.default-slider {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light)) !important;
}

.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 95, 42, 0.55) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
}

.slider-content {
    position: relative;
    z-index: 5;
    color: var(--white);
    max-width: 750px;
    animation: fadeInUp 0.8s ease-out;
}

.slider-bg .container {
    position: relative;
    z-index: 3;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slider-content h1 {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.4);
    line-height: 1.6;
    position: relative;
}

.slider-content h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-color), transparent);
    border-radius: 2px;
}

.slider-content p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    opacity: 0.95;
    margin-top: 25px;
    line-height: 1.7;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.slider-content .btn {
    padding: 14px 35px;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--secondary-color), #ffca2c);
    border: none;
    color: var(--primary-dark);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slider-content .btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 35px rgba(255, 193, 7, 0.5);
}

.slider-content .btn i {
    transition: transform 0.3s ease;
}

.slider-content .btn:hover i {
    transform: translateX(5px);
}

/* Carousel controls enhancement */
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {
    width: 60px;
    height: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    opacity: 0.8;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.hero-slider .carousel-control-prev:hover,
.hero-slider .carousel-control-next:hover {
    background: var(--secondary-color);
    opacity: 1;
}

.hero-slider .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 6px;
    border: 2px solid rgba(255,255,255,0.5);
    background: transparent;
    transition: all 0.3s ease;
}

.hero-slider .carousel-indicators button.active {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: scale(1.2);
}

@media (max-width: 991px) {
    .slider-bg {
        height: 450px;
    }

    .slider-content h1 {
        font-size: 2.4rem;
    }

    .slider-content p {
        font-size: 1.1rem;
    }
}

@media (max-width: 767px) {
    .slider-bg {
        height: 380px;
    }

    .slider-content h1 {
        font-size: 1.9rem;
    }

    .slider-content p {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .slider-content .btn {
        padding: 12px 25px;
        font-size: 0.9rem;
    }

    .hero-slider .carousel-control-prev,
    .hero-slider .carousel-control-next {
        width: 45px;
        height: 45px;
    }
}

/* ==============================================
   SECTIONS - Enhanced with Eye-Catching Headers
   ============================================== */
.section-padding {
    padding: 70px 0;
}

.section-header {
    margin-bottom: 50px;
    position: relative;
}

/* ── section-header h2 — pseudo dividers हटाइयो ──────────────────────────
   section-divider div (HTML मा छ) नै divider हो।
   h2::after र h2::before ले duplicate lines बनाउँथे।
   Fix: display:block गरेर h2 आफैँ full line लिन्छ।
─────────────────────────────────────────────────────────────────────── */
.section-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
    position: relative;
    display: block;   /* inline-block थियो — badge सँग same line मा आउँथ्यो */
    line-height: 1.6;
}

/* h2::after — अब disable, section-divider div नै line बनाउँछ */
.section-header.text-center h2::after,
.section-header h2::after {
    display: none;
}

/* h2::before — अब disable, section-divider::before नै dot बनाउँछ */
.section-header h2::before {
    display: none;
}

.section-header p {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-top: 20px;
    line-height: 1.7;
}

/* ==============================================
   SERVICE CARDS - Enhanced Eye-Catching Design
   ============================================== */
.service-card {
    background: var(--white);
    padding: 35px 25px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(26, 95, 42, 0.08);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(26, 95, 42, 0.2);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(26, 95, 42, 0.3);
}

.service-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 24px;
    border: 2px dashed rgba(26, 95, 42, 0.3);
    opacity: 0;
    transition: all 0.4s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
    border-radius: 50%;
}

.service-card:hover .service-icon::after {
    opacity: 1;
    animation: spin 8s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

.service-icon i {
    font-size: 36px;
    color: var(--white);
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon i {
    transform: scale(1.1);
}

.service-card h4 {
    font-size: 1.3rem;
    margin-bottom: 12px;
    color: var(--text-color);
    font-weight: 600;
    transition: color 0.3s ease;
}

.service-card:hover h4 {
    color: var(--primary-color);
}

.service-card p {
    color: var(--text-light);
    margin-bottom: 18px;
    line-height: 1.6;
}

.service-link {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 25px;
    background: linear-gradient(135deg, rgba(26, 95, 42, 0.08), rgba(26, 95, 42, 0.12));
    transition: all 0.3s ease;
}

.service-link:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateX(5px);
}

.service-link i {
    transition: transform 0.3s ease;
}

.service-link:hover i {
    transform: translateX(3px);
}

/* Service Detail Card */
.service-detail-card {
    background: var(--white);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    height: 100%;
    border-top: 4px solid var(--primary-color);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-detail-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.service-detail-card .new-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 12px;
    background: var(--secondary-color);
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    border-radius: 15px;
    text-transform: uppercase;
    animation: pulse-badge 2s ease-in-out infinite;
    z-index: 10;
}

.service-icon-lg {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.service-icon-lg i {
    font-size: 28px;
    color: var(--white);
}

.service-detail-card h4 {
    margin-bottom: 15px;
    color: var(--primary-color);
}

.service-features {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.service-features li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-features li i {
    color: var(--primary-light);
}

.service-more-btn {
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.service-more-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.dropdown a.service-sub-link {
    padding-left: 28px !important;
    font-size: 12px;
    opacity: 0.9;
}

/* ==============================================
   INTEREST RATES - Enhanced Eye-Catching Design
   ============================================== */
.rates-box, .notices-box {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    padding: 30px;
    height: 100%;
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.rates-box:hover, .notices-box:hover {
    box-shadow: 0 15px 45px rgba(26, 95, 42, 0.15);
}

.rate-card {
    background: linear-gradient(145deg, var(--light-bg) 0%, #ffffff 100%);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-color);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.rate-card:hover::before {
    transform: scaleY(1);
}

.rate-card:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.rate-card h5 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.05rem;
}

.rate-card h5 i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
}

.rate-card.saving h5 i {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.15), rgba(40, 167, 69, 0.25));
    color: var(--primary-light);
}
.rate-card.loan h5 i {
    background: rgba(var(--primary-rgb, 26,95,42), 0.12);
    color: var(--primary-color);
}

.rate-card .table {
    margin-bottom: 0;
    font-size: 14px;
    border-collapse: separate;
    border-spacing: 0;
}

.rate-card .table td {
    padding: 16px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    transition: background 0.2s ease;
    vertical-align: middle;
}

.rate-card .table tbody tr:last-child td {
    border-bottom: none;
}

.rate-card .table tr:hover td {
    background: rgba(26, 95, 42, 0.06);
}

.rate-card .table td:first-child {
    font-weight: 500;
    color: var(--text-color);
}

.rate-card .table td:last-child {
    text-align: right;
}

.rate-value {
    font-weight: 700;
    color: var(--primary-color);
    text-align: right;
    font-size: 1.05em;
    background: linear-gradient(135deg, rgba(26, 95, 42, 0.08), rgba(26, 95, 42, 0.12));
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
}

/* Rates Page */
.rates-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    overflow: hidden;
}

.rates-header {
    background: var(--primary-color);
    color: var(--white);
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rates-header.loan {
    background: var(--secondary-color);
}

.rates-header i {
    font-size: 28px;
}

.rates-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

.rates-body {
    padding: 20px;
}

.rates-table th {
    background: var(--light-bg);
}

.rate-badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
}

.rate-badge.saving {
    background: rgba(40, 167, 69, 0.1);
    color: var(--primary-light);
}

.rate-badge.loan {
    background: rgba(var(--primary-rgb, 26,95,42), 0.08);
    color: var(--primary-color);
}

.rates-note {
    background: #fff3cd;
    border-left: 4px solid var(--secondary-color);
    padding: 20px 25px;
    border-radius: 0 8px 8px 0;
}

.rates-note h5 {
    color: #856404;
    margin-bottom: 15px;
}

.rates-note ul {
    margin: 0;
    padding-left: 20px;
}

.rates-note li {
    margin-bottom: 8px;
}

/* ==============================================
   MODERN RATES CARD DESIGN
   ============================================== */
.rates-card-modern {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    height: 100%;
    transition: all 0.3s ease;
}

.rates-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.rates-header-modern {
    padding: 22px 25px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.saving-rates .rates-header-modern {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
}

.loan-rates .rates-header-modern {
    background: linear-gradient(135deg, var(--secondary-dark, #922b21) 0%, var(--secondary-color, #c0392b) 100%);
}

.rates-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.18);
}

.rates-icon.saving {
    color: #fff;
}

.rates-icon.loan {
    color: #fff;
}

.rates-header-modern h3 {
    margin: 0 0 2px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.rates-header-modern p {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.82);
}

.rates-body-modern {
    padding: 10px 0;
}

.rate-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background 0.2s ease;
    gap: 12px;
}

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

.rate-item:hover {
    background: rgba(26,95,42,0.04);
}

.rate-info {
    flex: 1;
}

.rate-info strong {
    display: block;
    color: var(--text-color);
    font-size: 1.08rem;
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.5;
}

.rate-info small {
    color: var(--text-light);
    font-size: 0.82rem;
}

.rate-value {
    font-size: 0.95rem;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: 30px;
    min-width: 78px;
    text-align: center;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.rate-value span {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
}

.rate-value.saving {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(26,95,42,0.28);
}

.rate-value.loan {
    background: linear-gradient(135deg, var(--secondary-dark, #922b21) 0%, var(--secondary-color, #c0392b) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(192,57,43,0.28);
}

.rate-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
}

.rate-empty i {
    font-size: 40px;
    margin-bottom: 10px;
    color: var(--border-light);
}

.rate-empty p {
    margin: 0;
}

@media (max-width: 767px) {
    .rates-header-modern {
        padding: 20px;
    }

    .rates-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .rates-header-modern h3 {
        font-size: 1.1rem;
    }

    .rate-item {
        padding: 14px 20px;
    }

    .rate-value {
        font-size: 0.88rem;
        padding: 5px 10px;
        min-width: 68px;
    }
}

/* ==============================================
   NOTICES
   ============================================== */
.notices-list {
    max-height: 350px;
    overflow-y: auto;
}

.notice-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.notice-date {
    font-size: 12px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.notice-item h6 {
    margin: 0;
}

.notice-item h6 a {
    color: var(--text-color);
}

.notice-item h6 a:hover {
    color: var(--primary-color);
}

/* Notice Card */
.notice-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    padding: 25px;
    display: flex;
    gap: 20px;
    position: relative;
    transition: all 0.3s;
}

.notice-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.notice-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notice-icon i {
    font-size: 20px;
    color: var(--white);
}

.notice-card .notice-content {
    flex: 1;
}

.notice-card h5 {
    margin-bottom: 8px;
}

.notice-card h5 a {
    color: var(--text-color);
}

.notice-card h5 a:hover {
    color: var(--primary-color);
}

.notice-card p {
    color: var(--text-light);
    margin-bottom: 10px;
    font-size: 14px;
}

.read-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.notice-attachment-icon {
    position: absolute;
    top: 15px;
    right: 15px;
}

.notice-attachment-icon a {
    color: var(--text-light);
}

/* Notice Detail */
.notice-detail-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    padding: 35px;
}

.notice-detail-card .notice-header {
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 20px;
    margin-bottom: 25px;
}

.notice-detail-card h2 {
    color: var(--text-color);
    margin-top: 10px;
}

.notice-detail-card .notice-content {
    line-height: 1.8;
    margin-bottom: 25px;
}

.notice-detail-card .notice-attachment {
    background: var(--light-bg);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.notice-detail-card .notice-footer {
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* ==============================================
   FEATURES / WHY US
   ============================================== */
.feature-box {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    text-align: center;
    height: 100%;
    transition: all 0.3s;
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.feature-icon i {
    font-size: 28px;
    color: var(--white);
}

.feature-box h5 {
    margin-bottom: 12px;
    color: var(--text-color);
}

.feature-box p {
    color: var(--text-light);
    font-size: 14px;
    margin: 0;
}

/* ==============================================
   MOBILE APP SECTION
   ============================================== */
.mobile-app-section {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    padding: 80px 0;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.mobile-app-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.05)"/><circle cx="80" cy="80" r="3" fill="rgba(255,255,255,0.05)"/><circle cx="40" cy="60" r="1.5" fill="rgba(255,255,255,0.05)"/></svg>');
    opacity: 0.5;
}

.app-content {
    position: relative;
    z-index: 1;
}

.app-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--white);
}

.app-content h3 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.app-tagline {
    font-size: 1.3rem;
    color: var(--primary-light);
    margin-bottom: 15px;
    font-weight: 500;
}

.app-description {
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1.7;
    margin-bottom: 30px;
}

.app-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.app-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 25px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s;
}

.app-btn i {
    font-size: 28px;
}

.app-btn span {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.app-btn span small {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.9;
}

.app-btn.google-play {
    background: var(--primary-color);
    color: var(--white);
}

.app-btn.google-play:hover {
    background: var(--primary-light);
    transform: translateY(-3px);
}

.app-btn.app-store {
    background: var(--white);
    color: var(--text-color);
}

.app-btn.app-store:hover {
    background: var(--secondary-color);
    color: var(--primary-dark);
    transform: translateY(-3px);
}

.app-image {
    position: relative;
    z-index: 1;
}

.app-image img {
    max-width: 350px;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}

.app-mockup {
    display: none;
    width: 200px;
    height: 350px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 30px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.app-mockup i {
    font-size: 80px;
    color: rgba(255,255,255,0.3);
}

.app-image img + .app-mockup {
    display: none;
}

@media (max-width: 991px) {
    .app-content h2 {
        font-size: 1.8rem;
    }

    .app-content h3 {
        font-size: 1.5rem;
    }

    .app-mockup {
        width: 160px;
        height: 280px;
    }
}

@media (max-width: 767px) {
    .mobile-app-section {
        padding: 50px 0;
    }

    .app-content h2 {
        font-size: 1.5rem;
    }

    .app-content h3 {
        font-size: 1.2rem;
    }

    .app-buttons {
        justify-content: center;
    }

    .app-btn {
        padding: 10px 20px;
    }

    .app-btn i {
        font-size: 22px;
    }
}

/* ==============================================
   APP FEATURES SECTION
   ============================================== */
.app-features-section {
    background: var(--white);
}

.section-badge-wrap {
    margin-bottom: 15px;
}

.section-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(26, 95, 42, 0.25);
}

.section-divider {
    width: 80px;
    height: 4px;
    background: var(--primary-color);
    margin: 15px auto;
    border-radius: 2px;
}

.section-divider::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    margin: -4px auto 0;
}

.app-features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    margin-top: 32px;
}

.app-feature-item {
    background: var(--light-bg);
    border-radius: 16px;
    padding: 18px 14px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.app-feature-item:hover {
    background: var(--white);
    border-color: var(--primary-light);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(46, 125, 50, 0.15);
}

.app-feature-item.has-new-badge {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.05), rgba(76, 175, 80, 0.08));
    border-color: rgba(46, 125, 50, 0.2);
}

.new-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--secondary-color);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-badge 2s infinite;
    box-shadow: 0 3px 10px rgba(var(--primary-rgb,26,95,42), 0.25);
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.feature-icon-wrap {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    transition: all 0.3s ease;
}

.app-feature-item:hover .feature-icon-wrap {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(46, 125, 50, 0.3);
}

.feature-icon-wrap i {
    font-size: 22px;
    color: var(--white);
}

.app-feature-item h5 {
    margin: 0 0 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--primary-dark);
    line-height: 1.2;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        rgba(var(--primary-rgb, 26, 95, 42), 0.22),
        rgba(var(--primary-rgb, 26, 95, 42), 0.10)
    );
}

.app-feature-details {
    margin-top: 2px;
    text-align: center;
}

.app-feature-details summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb, 26, 95, 42), 0.25);
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(var(--primary-rgb, 26, 95, 42), 0.05);
}

.app-feature-details summary::-webkit-details-marker {
    display: none;
}

.app-feature-details[open] summary {
    background: var(--primary-color);
    color: var(--white);
}

.app-feature-details-body {
    margin-top: 8px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-color);
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 8px;
    text-align: left;
}

@media (max-width: 991px) {
    .app-features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .app-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .app-feature-item {
        padding: 20px 15px;
    }

    .feature-icon-wrap {
        width: 55px;
        height: 55px;
    }

    .feature-icon-wrap i {
        font-size: 22px;
    }

    .app-feature-item h5 {
        font-size: 0.85rem;
    }

    .new-badge {
        font-size: 8px;
        padding: 4px 8px;
        top: -5px;
        right: -5px;
    }
}

@media (max-width: 400px) {
    .app-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .app-feature-item {
        padding: 15px 10px;
    }
}

/* Hidden Feature Items - Show More/Less Functionality */
.app-feature-item.hidden-feature {
    display: none;
}

.app-feature-item.hidden-feature.show {
    display: block;
    animation: fadeInUp 0.4s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#showMoreFeatures,
#showLessFeatures {
    transition: all 0.3s ease;
}

#showMoreFeatures .feature-count {
    opacity: 0.8;
    font-size: 0.9em;
    margin-left: 5px;
}

#showMoreFeatures:hover,
#showLessFeatures:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* ==============================================
   CTA SECTION
   ============================================== */
.cta-section {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    padding: 50px 0;
}

.cta-content {
    color: var(--white);
}

.cta-content h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.cta-content p {
    opacity: 0.9;
    margin-bottom: 0;
}

.cta-content .btn-light {
    color: var(--primary-color);
    font-weight: 600;
}

/* ==============================================
   PAGE BANNER — breadcrumb helpers
   (full .page-banner definition further below — "Page Banner Enhanced")
   ============================================== */
.page-banner .breadcrumb {
    justify-content: center;
    margin: 0;
    font-size: 0.9rem;
}
.page-banner h1 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.6;
}
.page-banner .breadcrumb-item a { color: rgba(255,255,255,0.8); }
.page-banner .breadcrumb-item.active { color: var(--white); }
.page-banner .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.6); }
@media (max-width: 768px) {
    .page-banner h1 { font-size: 1.42rem; }
    .page-banner .breadcrumb { font-size: 0.82rem; }
}

/* ==============================================
   UNIFORM SUCCESS / TRACKING UI (Public Forms)
   ============================================== */
.form-success-section {
    padding: 3rem 0;
    background: linear-gradient(135deg,#e8f5e9,#f1f8e9);
}
.form-success-card {
    text-align: center;
}
.form-success-icon {
    font-size: 3.6rem;
    color: #2d8b47;
}
.form-tracking-box {
    display: inline-block;
    padding: 14px 20px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color,#28a745) 8%, white);
    border: 2px dashed var(--primary-light, #28a745);
    margin-bottom: 12px;
}
.form-tracking-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 700;
    font-size: 1.8rem;
    color: #16a34a;
    letter-spacing: 1px;
}
.form-tracking-help {
    font-size: 0.9rem;
    color: #6b7280;
}

/* ==============================================
   ABOUT PAGE
   ============================================== */
.about-image img {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.about-content h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.about-content h4 {
    color: var(--text-color);
    margin-top: 25px;
    margin-bottom: 10px;
}

/* Mission Vision Values */
.mvv-card {
    background: var(--white);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    text-align: center;
    height: 100%;
}

.mvv-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.mvv-icon i {
    font-size: 32px;
    color: var(--white);
}

.mvv-card h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Statistics */
.stats-section {
    background: var(--primary-dark);
    padding: 50px 0;
}

.stat-box {
    text-align: center;
    color: var(--white);
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--white);
}

.stat-label {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* ==============================================
   TEAM - New Modern Design with Full Photo Display
   ============================================== */
.team-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(26, 95, 42, 0.15);
    border-color: var(--primary-color);
}

.team-photo {
    position: relative;
    background: linear-gradient(135deg, var(--light-bg) 0%, #e9ecef 100%);
    padding: 20px 20px 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 220px;
}

/* Photo wrapper - circular or rectangular based on preference */
.team-photo-wrapper {
    position: relative;
    width: 160px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    background: #fff;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* Keep face/top visible */
    transition: transform 0.4s ease;
}

.team-card:hover .team-photo img {
    transform: scale(1.05);
}

/* Placeholder for members without photos */
.team-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.team-placeholder i {
    font-size: 50px;
    color: #adb5bd;
}

/* Team member info section */
.team-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.team-info h5 {
    margin-bottom: 6px;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.5;
}

.team-info .position {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 12px;
    background: rgba(26, 95, 42, 0.08);
    border-radius: 20px;
    display: inline-block;
    margin: 0 auto;
}

.team-contact {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.team-contact a {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--light-bg), #e9ecef);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: all 0.3s ease;
    font-size: 14px;
}

.team-contact a:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(26, 95, 42, 0.3);
}

/* Alternative: Circular photo design */
.team-card.circular .team-photo {
    padding: 25px 20px 15px;
    min-height: auto;
}

.team-card.circular .team-photo-wrapper {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 4px solid var(--white);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* Small variant for committees etc */
.team-card.small .team-photo {
    padding: 15px 15px 0;
    min-height: 160px;
}

.team-card.small .team-photo-wrapper {
    width: 120px;
    height: 150px;
}

.team-card.small .team-info {
    padding: 15px;
}

.team-card.small h6 {
    margin-bottom: 3px;
    font-size: 14px;
}

.team-card.small .position {
    font-size: 12px;
    padding: 3px 10px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .team-photo-wrapper {
        width: 140px;
        height: 175px;
    }
    .team-photo {
        min-height: 200px;
    }
}

@media (max-width: 575px) {
    .team-photo {
        padding: 15px 15px 0;
        min-height: 180px;
    }
    .team-photo-wrapper {
        width: 120px;
        height: 150px;
    }
    .team-info h5 {
        font-size: 1rem;
    }
}

/* ==============================================
   CIRCULAR TEAM CARD DESIGN - Like bandanasigdel.com.np
   ============================================== */
.team-card-circular {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: visible;
    text-align: center;
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 20px 25px;
    border: 1px solid rgba(0,0,0,0.05);
}

.team-card-circular:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(26, 95, 42, 0.18);
}

.team-card-circular.featured {
    border: 2px solid var(--primary-color);
    box-shadow: 0 8px 30px rgba(26, 95, 42, 0.15);
    background: linear-gradient(135deg, #f8fff9 0%, #ffffff 100%);
}

.team-card-circular.featured .team-position-badge {
    background: var(--primary-color);
    color: var(--white);
}

/* Circular Photo with Green Border */
.team-photo-circular {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(145deg, var(--primary-color), var(--primary-light));
    box-shadow: 0 8px 25px rgba(26, 95, 42, 0.25);
    transition: all 0.4s ease;
}

.team-card-circular:hover .team-photo-circular {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(26, 95, 42, 0.35);
}

.team-photo-circular img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--white);
}

/* Placeholder for members without photos */
.team-placeholder-circular {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--off-white), #e8e8e8);
    border-radius: 50%;
    border: 3px solid var(--white);
}

.team-placeholder-circular i {
    font-size: 55px;
    color: var(--border-medium);
}

/* Team Info Section */
.team-info-circular {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.team-info-circular h5 {
    margin: 0 0 5px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.5;
}

.team-info-circular h6 {
    margin: 0 0 5px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
}

.team-info-circular .team-name-en {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.team-position-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-green10), var(--primary-green20));
    color: var(--primary-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    margin-top: 5px;
}

/* Contact Icons */
.team-contact-circular {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.team-contact-circular a {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary-green10), var(--primary-green20));
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 13px;
}

.team-contact-circular a:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(26, 95, 42, 0.3);
}

/* Small variant for staff */
.team-card-circular.small {
    padding: 20px 15px;
}

.team-photo-circular.small {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
    padding: 3px;
}

.team-card-circular.small .team-placeholder-circular i {
    font-size: 38px;
}

.team-info-circular h6 {
    font-size: 0.85rem;
}

.team-position-badge.small {
    font-size: 0.68rem;
    padding: 4px 10px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .team-photo-circular {
        width: 130px;
        height: 130px;
    }
    .team-info-circular h5 {
        font-size: 1rem;
    }
    .team-position-badge {
        font-size: 0.72rem;
        padding: 5px 12px;
    }
}

@media (max-width: 575px) {
    .team-card-circular {
        padding: 20px 12px;
    }
    .team-photo-circular {
        width: 110px;
        height: 110px;
    }
    .team-photo-circular.small {
        width: 80px;
        height: 80px;
    }
    .team-info-circular h5 {
        font-size: 0.95rem;
    }
}

/* ==============================================
   NEW TEAM CARD DESIGN - Circular Photo with Green Border
   ============================================== */
.team-card-new {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: visible;
    text-align: center;
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 20px 25px;
    border: 1px solid rgba(0,0,0,0.05);
}

.team-card-new:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(26, 95, 42, 0.18);
}

.team-card-new.featured {
    border: 2px solid var(--primary-color);
    box-shadow: 0 8px 30px rgba(26, 95, 42, 0.15);
}

.team-card-new.featured .team-position {
    background: var(--primary-color);
    color: var(--white);
}

/* Circular Photo Container with Green Border */
.team-photo-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 20px;
    border-radius: 50%;
    padding: 4px;
    background: var(--primary-color);
    box-shadow: 0 8px 25px rgba(26, 95, 42, 0.25);
    transition: all 0.4s ease;
}

.team-card-new:hover .team-photo-container {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(26, 95, 42, 0.35);
}

.team-member-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    background: var(--white);
}

/* Placeholder for members without photos */
.team-placeholder-new {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--off-white), #e8e8e8);
    border-radius: 50%;
}

.team-placeholder-new i {
    font-size: 60px;
    color: var(--border-medium);
}

/* Team Info Section */
.team-info-new {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.team-info-new h5 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.5;
}

.team-info-new h6 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
}

.team-position {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-green10), var(--primary-green20));
    color: var(--primary-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 5px;
}

/* Contact Icons */
.team-contact-new {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f0f0f0;
}

.team-contact-new a {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--primary-green10), var(--primary-green20));
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 14px;
}

.team-contact-new a:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(26, 95, 42, 0.3);
}

/* Small variant for staff */
.team-card-new.small {
    padding: 20px 15px;
}

.team-card-new.small .team-photo-container {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
    padding: 3px;
}

.team-card-new.small .team-placeholder-new i {
    font-size: 40px;
}

.team-card-new.small .team-info-new h6 {
    font-size: 0.85rem;
}

.team-card-new.small .team-position {
    font-size: 0.7rem;
    padding: 4px 10px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .team-photo-container {
        width: 140px;
        height: 140px;
    }
    .team-card-new .team-info-new h5 {
        font-size: 1rem;
    }
    .team-position {
        font-size: 0.75rem;
        padding: 5px 12px;
    }
}

@media (max-width: 575px) {
    .team-card-new {
        padding: 25px 15px 20px;
    }
    .team-photo-container {
        width: 120px;
        height: 120px;
        margin-bottom: 15px;
    }
    .team-info-new h5 {
        font-size: 0.95rem;
    }
    .team-placeholder-new i {
        font-size: 45px;
    }
}

/* ==============================================
   IMPROVED TABLE STYLES - Public & Admin
   ============================================== */
.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06);
}

.table-modern thead {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.table-modern thead th {
    padding: 16px 20px;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border: none;
    text-align: left;
}

.table-modern tbody tr {
    transition: all 0.2s ease;
}

.table-modern tbody tr:hover {
    background: var(--light-green);
}

.table-modern tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    font-size: 0.95rem;
}

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

/* Striped variant */
.table-modern.table-striped tbody tr:nth-child(even) {
    background: var(--light-card);
}

.table-modern.table-striped tbody tr:nth-child(even):hover {
    background: #f0f8f2;
}

/* Action buttons in tables */
.table-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.table-actions .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-badge.active,
.status-badge.success {
    background: #d4edda;
    color: #155724;
}

.status-badge.pending,
.status-badge.warning {
    background: #fff3cd;
    color: #856404;
}

.status-badge.inactive,
.status-badge.danger {
    background: #f8d7da;
    color: #721c24;
}

.status-badge.info {
    background: #d1ecf1;
    color: #0c5460;
}

/* Responsive table wrapper */
.table-responsive-modern {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06);
}

@media (max-width: 767px) {
    .table-modern thead th,
    .table-modern tbody td {
        padding: 12px 14px;
        font-size: 0.85rem;
    }
}

/* ==============================================
   GALLERY
   ============================================== */
.gallery-filter {
    margin-bottom: 30px;
}

.filter-btn {
    background: var(--light-bg);
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    margin: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.filter-btn:hover, .filter-btn.active {
    background: var(--primary-color);
    color: var(--white);
}

.gallery-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.gallery-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-card:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 95, 42, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay i {
    font-size: 30px;
    color: var(--white);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: var(--white);
    padding: 20px 15px 15px;
    font-size: 14px;
}

/* ==============================================
   CONTACT PAGE
   ============================================== */
.contact-info-box {
    background: var(--primary-color);
    color: var(--white);
    padding: 35px;
    border-radius: 12px;
    height: 100%;
}

.contact-info-box h4 {
    margin-bottom: 15px;
}

.contact-info-box > p {
    opacity: 0.9;
    margin-bottom: 25px;
}

.contact-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.contact-icon {
    width: 45px;
    height: 45px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon i {
    font-size: 18px;
    color: var(--secondary-color);
}

.contact-details h6 {
    margin-bottom: 3px;
    font-size: 14px;
    opacity: 0.8;
}

.contact-details p {
    margin: 0;
}

.contact-social {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.contact-social h6 {
    margin-bottom: 12px;
}

.contact-social a {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white);
    margin-right: 10px;
    transition: all 0.3s;
}

.contact-social a:hover {
    background: var(--secondary-color);
    color: var(--primary-dark);
}

.contact-form-box {
    background: var(--white);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.contact-form-box h4 {
    margin-bottom: 25px;
    color: var(--primary-color);
}

.hours-box {
    background: var(--white);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.hours-box h3 {
    color: var(--primary-color);
}

.hour-item {
    padding: 20px;
    background: var(--light-bg);
    border-radius: 8px;
}

.hour-item h5 {
    margin-bottom: 5px;
    color: var(--text-color);
}

.hour-item p {
    margin: 0;
    color: var(--primary-color);
    font-weight: 600;
}

/* ==============================================
   LEADERSHIP MESSAGES SECTION
   ============================================== */
.leadership-messages-section {
    background: linear-gradient(135deg, var(--light-bg) 0%, #e9ecef 100%);
}

.message-card {
    background: var(--white);
    border-radius: 16px;
    padding: 30px;
    height: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.message-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-color);
}

.message-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.message-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}

.leader-photo {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--primary-light);
    box-shadow: 0 5px 20px rgba(46, 125, 50, 0.2);
}

.leader-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 36px;
}

.leader-info h4 {
    margin: 0 0 5px 0;
    color: var(--text-dark);
    font-size: 1.25rem;
    font-weight: 600;
}

.leader-info .position {
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 500;
}

.message-body {
    position: relative;
}

.quote-icon {
    font-size: 32px;
    color: var(--primary-light);
    opacity: 0.3;
    position: absolute;
    top: -10px;
    left: -5px;
}

.message-text {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 0.95rem;
    padding-left: 25px;
    margin-bottom: 20px;
    min-height: 120px;
}

.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.read-more-link:hover {
    color: var(--primary-dark);
    gap: 12px;
}

.read-more-link i {
    font-size: 12px;
}

/* Chairman card accent */
.chairman-card::before {
    background: linear-gradient(90deg, #1a5928, var(--primary-light));
}

/* CEO card accent */
.ceo-card::before {
    background: linear-gradient(90deg, var(--primary-light), #4caf50);
}

@media (max-width: 991px) {
    .message-card {
        padding: 24px;
    }

    .leader-photo {
        width: 70px;
        height: 70px;
    }

    .photo-placeholder {
        font-size: 28px;
    }

    .message-text {
        min-height: auto;
    }
}

@media (max-width: 576px) {
    .message-header {
        flex-direction: column;
        text-align: center;
    }

    .message-text {
        padding-left: 0;
        text-align: center;
    }

    .quote-icon {
        position: static;
        display: block;
        text-align: center;
        margin-bottom: 10px;
    }

    .read-more-link {
        justify-content: center;
        width: 100%;
    }
}

/* ==============================================
   FOOTER - Enhanced Eye-Catching Design
   ============================================== */
.main-footer {
    background: linear-gradient(180deg, var(--footer-color, var(--primary-color)) 0%, var(--footer-dark, var(--primary-dark)) 100%);
    color: rgba(255,255,255,0.85);
    position: relative;
    overflow: hidden;
}

.main-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-light), var(--secondary-color), var(--primary-light), var(--secondary-color));
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.main-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.footer-top {
    padding: 48px 0 36px;
    position: relative;
    z-index: 1;
}

.footer-widget {
    margin-bottom: 25px;
}

.footer-widget h4 {
    color: var(--text-on-footer, var(--white));
    margin-bottom: 18px;
    font-size: 1.1rem;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.footer-widget h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary-color), transparent);
    border-radius: 2px;
}

.footer-widget p {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
    color: color-mix(in srgb, var(--text-on-footer, #fff) 78%, transparent);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.footer-logo img {
    height: 55px;
    width: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
    transition: transform 0.3s ease;
}

.footer-logo:hover img {
    transform: scale(1.05);
}

.footer-logo span {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-on-footer, var(--white));
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.footer-social a {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--text-on-footer, var(--white));
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255,255,255,0.15);
    position: relative;
    overflow: hidden;
}

.footer-social a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-light));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.footer-social a:hover {
    transform: translateY(-5px) rotate(5deg);
    border-color: transparent;
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
}

.footer-social a:hover::before {
    opacity: 1;
}

.footer-social a:hover i {
    transform: scale(1.2);
}

.footer-social i {
    font-size: 18px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

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

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

.footer-links a {
    color: rgba(255,255,255,0.74);
    color: color-mix(in srgb, var(--text-on-footer, #fff) 74%, transparent);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.footer-links a::before {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    color: var(--text-on-footer, #fff);
    transition: transform 0.3s ease;
}

.footer-links a:hover {
    color: var(--text-on-footer, #fff);
    transform: translateX(5px);
}

.footer-links a:hover::before {
    transform: translateX(3px);
}

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

.footer-notices li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-notices li:last-child {
    border-bottom: none;
}

.footer-notices a {
    color: rgba(255,255,255,0.82);
    color: color-mix(in srgb, var(--text-on-footer, #fff) 82%, transparent);
    font-size: 14px;
    display: flex;
    align-items: start;
    gap: 8px;
}

.footer-notices a:hover {
    color: var(--text-on-footer, #fff);
}

.footer-notices .notice-date {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,0.58);
    color: color-mix(in srgb, var(--text-on-footer, #fff) 58%, transparent);
    margin-top: 5px;
}

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

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
    font-size: 14px;
    color: rgba(255,255,255,0.84);
    color: color-mix(in srgb, var(--text-on-footer, #fff) 84%, transparent);
    transition: all 0.3s ease;
}

.footer-contact li:hover {
    color: var(--text-on-footer, var(--white));
}

.footer-contact i {
    color: var(--text-on-footer, #fff);
    width: 20px;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-top: 2px;
}

.footer-contact span {
    line-height: 1.5;
}

.footer-bottom {
    background: rgba(0,0,0,0.3);
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-bottom .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

.footer-bottom p {
    margin: 0;
    font-size: .74rem;
    color: rgba(255,255,255,0.68);
    color: color-mix(in srgb, var(--text-on-footer, #fff) 68%, transparent);
}

.footer-policy-links,
.footer-policy-links a {
    font-size: .74rem;
}

.footer-policy-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 6px 0;
}

.footer-policy-links a {
    color: rgba(255,255,255,.85);
    color: color-mix(in srgb, var(--text-on-footer, #fff) 85%, transparent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.footer-policy-dot {
    opacity: .4;
}

.footer-developer-supported {
    opacity: .9;
    margin-bottom: 2px;
}

.footer-developer-main {
    opacity: .9;
    margin-bottom: 0;
}

.footer-bottom .copyright {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-bottom .developer a {
    color: var(--primary-light);
    font-weight: 500;
    transition: all 0.3s ease;
}

.footer-bottom .developer a:hover {
    color: var(--white);
    text-decoration: underline;
}

/* Visitor Counter */
.visitor-counter {
    display: flex;
    align-items: center;
    gap: 20px;
}

.visitor-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    padding: 7px 14px;
    border-radius: 25px;
    font-size: .74rem;
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.visitor-item:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--primary-light);
}

.visitor-item i {
    color: var(--primary-light);
    font-size: 14px;
}

.visitor-item.today {
    background: rgba(46, 125, 50, 0.15);
    border-color: rgba(46, 125, 50, 0.3);
}

.visitor-item.today i {
    color: #4caf50;
}

.visitor-item span {
    font-weight: 600;
    color: var(--text-on-footer, #fff);
}

@media (max-width: 768px) {
    .visitor-counter {
        justify-content: center;
        gap: 12px;
    }

    .visitor-item {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .footer-top {
        padding: 30px 0 16px;
    }

    .footer-bottom {
        padding: 8px 0;
    }

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

    .visitor-counter { gap: 10px; }
    .visitor-item { padding: 5px 10px; font-size: 11px; }

    .footer-policy-links { gap: 8px; margin: 3px 0; }

    .footer-widget h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-widget {
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-contact li {
        justify-content: center;
    }

    .footer-links a::before {
        display: none;
    }
}

/* ==============================================
   POPUP NOTICE
   ============================================== */
.notice-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.popup-content {
    background: var(--white);
    max-width: 500px;
    width: 90%;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    animation: slideIn 0.3s;
}

@keyframes slideIn {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--white);
    cursor: pointer;
    z-index: 1;
}

.popup-header {
    background: var(--primary-color);
    color: var(--white);
    padding: 20px;
    text-align: center;
}

.popup-header i {
    font-size: 40px;
    margin-bottom: 10px;
}

.popup-header h3 {
    margin: 0;
}

.popup-body {
    padding: 25px;
}

.popup-body h4 {
    color: var(--text-color);
    margin-bottom: 15px;
}

.popup-body p {
    color: var(--text-light);
}

/* ==============================================
   SCROLL TO TOP
   ============================================== */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s;
    z-index: 999;
}

.scroll-top:hover {
    background: var(--primary-light);
    transform: translateY(-3px);
}

.scroll-top.show {
    display: flex;
}

/* ==============================================
   BUTTONS - Enhanced Eye-Catching Design
   ============================================== */
.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border: none;
    box-shadow: 0 4px 15px rgba(26, 95, 42, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 95, 42, 0.4);
}

.btn-outline-primary {
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 95, 42, 0.3);
}

.btn-lg {
    padding: 14px 35px;
    font-size: 1.05rem;
}

/* ==============================================
   FORM ELEMENTS - Unified consistent height
   ============================================== */
.form-control, .form-select {
    border-radius: 10px;
    padding: 10px 14px;
    min-height: 44px;
    border: 1.5px solid #d1d5db;
    background: var(--light-card, #fff);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.4;
}

.form-control:hover, .form-select:hover {
    border-color: #d0d0d0;
    background: #fff;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(26, 95, 42, 0.1), 0 4px 15px rgba(26, 95, 42, 0.08);
    outline: none;
}

.form-control::placeholder {
    color: #aaa;
    transition: all 0.3s ease;
}

.form-control:focus::placeholder {
    opacity: 0.5;
    transform: translateX(5px);
}

/* Form Label Enhancement */
.form-label {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.form-label .text-danger {
    color: #e53935;
}

/* Input Group Enhancement */
.input-group {
    position: relative;
}

.input-group .form-control {
    border-radius: 10px 0 0 10px;
}

.input-group .btn {
    border-radius: 0 10px 10px 0;
}

/* Textarea Enhancement */
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Checkbox & Radio Enhancement */
.form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid #d0d0d0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.15);
}

.form-check-label {
    cursor: pointer;
    padding-left: 5px;
}

/* Contact Form Box Enhancement */
.contact-form-box {
    background: var(--white);
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

.contact-form-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
}

.contact-form-box h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-form-box h4::before {
    content: '';
    width: 6px;
    height: 25px;
    background: var(--primary-color);
    border-radius: 3px;
}

/* Contact Info Box Enhancement */
.contact-info-box {
    background: linear-gradient(145deg, var(--primary-color), var(--primary-light));
    border-radius: 20px;
    padding: 35px;
    color: var(--white);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.contact-info-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
}

.contact-info-box h4 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
}

.contact-info-box > p {
    opacity: 0.9;
    margin-bottom: 30px;
    position: relative;
}

.contact-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    position: relative;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-item:hover .contact-icon {
    background: rgba(255,255,255,0.25);
    transform: scale(1.1);
}

.contact-details h6 {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.8;
    margin-bottom: 3px;
}

.contact-details p {
    margin: 0;
    font-size: 0.95rem;
}

.contact-social {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.2);
    position: relative;
}

.contact-social h6 {
    font-size: 0.9rem;
    margin-bottom: 15px;
    opacity: 0.9;
}

.contact-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.15);
    color: var(--white);
    border-radius: 10px;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.contact-social a:hover {
    background: var(--white);
    color: var(--primary-color);
    transform: translateY(-3px);
}

/* Application Form Styles */
.application-form-wrapper {
    background: var(--white);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
    position: relative;
}

.application-form-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-light));
    border-radius: 20px 20px 0 0;
}

/* Form Step Indicator */
.form-steps {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    gap: 10px;
}

.form-step {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-step .step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8e8e8;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.form-step.active .step-number {
    background: var(--primary-color);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(26, 95, 42, 0.3);
}

.form-step.completed .step-number {
    background: var(--primary-light);
    color: var(--white);
}

.form-step .step-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.form-step.active .step-label {
    color: var(--primary-color);
    font-weight: 600;
}

.form-step-divider {
    width: 50px;
    height: 2px;
    background: #e8e8e8;
    margin: 0 5px;
}

/* --- Form भित्रका section (खण्ड) हरूको style ---
   प्रत्येक section मा बायाँ तिर हरियो border line छ।
   background हटाउन: background: none; थप्नुहोस्
   border-left को रंग बदल्न var(--primary-color) को ठाउँमा color code लेख्नुहोस् */
/* Form Section Headers */
.form-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section-title i {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(26, 95, 42, 0.15));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* File Upload Enhancement */
.file-upload-wrapper {
    position: relative;
    border: 2px dashed #d0d0d0;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    background: var(--light-card);
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-upload-wrapper:hover {
    border-color: var(--primary-color);
    background: rgba(26, 95, 42, 0.02);
}

.file-upload-wrapper.dragover {
    border-color: var(--primary-color);
    background: rgba(26, 95, 42, 0.05);
}

.file-upload-wrapper input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-wrapper i {
    font-size: 40px;
    color: var(--border-medium);
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.file-upload-wrapper:hover i {
    color: var(--primary-color);
    transform: scale(1.1);
}

.file-upload-wrapper p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9rem;
}

.file-upload-wrapper .file-types {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 8px;
}

/* Form Submit Button Enhancement */
.form-submit-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border: none;
    padding: 16px 40px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    color: var(--white);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(26, 95, 42, 0.3);
}

.form-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(26, 95, 42, 0.4);
}

.form-submit-btn:active {
    transform: translateY(-1px);
}

.form-submit-btn i {
    transition: transform 0.3s ease;
}

.form-submit-btn:hover i {
    transform: translateX(5px);
}

/* Alert Enhancement */
.alert {
    border-radius: 12px;
    padding: 16px 20px;
    border: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.alert i {
    font-size: 20px;
    margin-top: 2px;
}

.alert-success {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd, #ffeeba);
    color: #856404;
}

.alert-info {
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    color: #0c5460;
}

/* ==============================================
   UTILITIES
   ============================================== */
.bg-light {
    background: var(--light-bg) !important;
}

.empty-state i {
    color: var(--border-light);
}

/* ==============================================
   MARQUEE / SCROLLING TEXT
   ============================================== */
.marquee-bar {
    background: var(--secondary-color);
    padding: 8px 0;
    overflow: hidden;
}

.marquee-content {
    display: flex;
    animation: marquee 30s linear infinite;
    white-space: nowrap;
}

.marquee-content span {
    padding: 0 50px;
    color: var(--primary-dark);
    font-weight: 500;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-bar:hover .marquee-content {
    animation-play-state: paused;
}

/* ==============================================
   ENHANCED ANIMATIONS
   ============================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

.service-card:hover .service-icon,
.feature-box:hover .feature-icon {
    animation: pulse 0.5s ease-in-out;
}

/* ==============================================
   COUNTER / ODOMETER STYLES
   ============================================== */
.counter-section {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.counter-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="2"/></svg>') repeat;
    background-size: 100px 100px;
}

.counter-box {
    text-align: center;
    color: var(--white);
    position: relative;
    z-index: 1;
}

.counter-icon {
    width: 70px;
    height: 70px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.counter-icon i {
    font-size: 28px;
    color: var(--secondary-color);
}

.counter-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    margin-bottom: 5px;
}

.counter-label {
    font-size: 1rem;
    opacity: 0.9;
}

/* ==============================================
   QUICK LINKS FLOATING BOX
   ============================================== */
.quick-links-float {
    position: fixed;
    right: -200px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--white);
    border-radius: 10px 0 0 10px;
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    padding: 15px;
    z-index: 999;
    transition: right 0.3s ease;
}

.quick-links-float:hover {
    right: 0;
}

.quick-links-toggle {
    position: absolute;
    left: -45px;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: var(--primary-color);
    border-radius: 10px 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 18px;
    cursor: pointer;
}

.quick-links-float ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-links-float li {
    margin-bottom: 10px;
}

.quick-links-float li:last-child {
    margin-bottom: 0;
}

.quick-links-float a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--light-bg);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 14px;
    transition: all 0.3s;
}

.quick-links-float a:hover {
    background: var(--primary-color);
    color: var(--white);
}

.quick-links-float a i {
    width: 20px;
    text-align: center;
}

/* ==============================================
   ENHANCED CARDS WITH BORDER ANIMATION
   ============================================== */
.service-card,
.feature-box,
.notice-card {
    position: relative;
    overflow: hidden;
}

.service-card::before,
.feature-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before,
.feature-box:hover::before {
    left: 100%;
}

/* ==============================================
   LOADING ANIMATION
   ============================================== */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s, visibility 0.5s;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--light-bg);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==============================================
   NEPALI DATE BADGE
   ============================================== */
.nepali-date-badge {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nepali-date-badge i {
    color: var(--secondary-color);
}

/* ==============================================
   TOOLS SECTION (EMI, Exchange, Date Converter)
   ============================================== */
.tool-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    padding: 35px;
    margin-bottom: 30px;
}

.tool-header {
    text-align: center;
    margin-bottom: 30px;
}

.tool-header .tool-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.tool-header .tool-icon i {
    font-size: 32px;
    color: var(--white);
}

.tool-header h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.tool-header p {
    color: var(--text-light);
}

.tool-form .form-label {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

/* EMI Result */
.emi-result {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 2px solid var(--border-color);
}

.emi-result h4 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.result-box {
    background: var(--light-bg);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    height: 100%;
}

.result-box .result-label {
    display: block;
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.result-box .result-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.emi-breakdown h5 {
    margin-bottom: 15px;
    color: var(--text-color);
}

/* Exchange Rate Table */
.exchange-table {
    margin-top: 20px;
}

.currency-flag {
    width: 24px;
    margin-right: 10px;
    border-radius: 2px;
}

.exchange-table th {
    background: var(--primary-color);
    color: var(--white);
    font-weight: 600;
}

.exchange-table td {
    vertical-align: middle;
}

.rate-note {
    background: var(--light-bg);
    padding: 15px 20px;
    border-radius: 8px;
}

/* Date Converter */
.date-converter-tabs {
    margin-top: 20px;
}

.date-converter-tabs .nav-tabs {
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 25px;
}

.date-converter-tabs .nav-link {
    color: var(--text-color);
    border: none;
    padding: 12px 20px;
    font-weight: 600;
}

.date-converter-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
    background: none;
}

.converter-form h5 {
    margin-bottom: 15px;
    color: var(--text-color);
}

.converter-result {
    margin-top: 25px;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 10px;
    text-align: center;
    color: var(--white);
}

.converter-result h5 {
    color: rgba(255,255,255,0.9);
    margin-bottom: 10px;
}

.converter-result .result-date {
    font-size: 1.8rem;
    font-weight: 700;
}

.today-date-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    padding: 25px;
}

.date-box {
    padding: 20px;
    background: var(--light-bg);
    border-radius: 8px;
}

.date-box h6 {
    color: var(--text-light);
    margin-bottom: 8px;
}

.date-box .date-display {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Tools Widget Section on Homepage */
.tools-widget-section {
    background: var(--light-bg);
    padding: 40px 0;
}

/* Tool Widget Cards - Enhanced Eye-Catching Design */
.tool-widget-card {
    background: var(--white);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
}

.tool-widget-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(26, 95, 42, 0.05), transparent);
    transition: left 0.5s ease;
}

.tool-widget-card:hover::before {
    left: 100%;
}

.tool-widget-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(26, 95, 42, 0.15);
}

.tool-widget-card .widget-icon {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 8px 20px rgba(26, 95, 42, 0.25);
    transition: all 0.4s ease;
    position: relative;
}

.tool-widget-card:hover .widget-icon {
    transform: scale(1.1) rotate(8deg);
    border-radius: 50%;
}

.tool-widget-card .widget-icon i {
    font-size: 26px;
    color: var(--white);
    transition: transform 0.3s ease;
}

.tool-widget-card:hover .widget-icon i {
    transform: scale(1.15);
}

.tool-widget-card h5 {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 10px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.tool-widget-card:hover h5 {
    color: var(--primary-color);
}

.tool-widget-card p {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 15px;
}

.tool-widget-card .btn-sm {
    padding: 8px 20px;
    font-size: 13px;
}

.tools-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 10px 0 12px;
    text-align: left;
    padding-left: 6px;
    border-left: 4px solid var(--primary-color);
}

/* Highlight Widget (KYC & Loan Apply) - Premium Style */
.tool-widget-card.highlight-widget {
    background: linear-gradient(145deg, #ffffff 0%, var(--light-green) 100%);
    border: 2px solid var(--primary-color);
    position: relative;
    overflow: hidden;
}

.tool-widget-card.highlight-widget::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    background: var(--secondary-color);
    transform: rotate(45deg);
    box-shadow: 0 2px 10px rgba(255, 193, 7, 0.4);
}

.tool-widget-card.highlight-widget .widget-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    box-shadow: 0 10px 25px rgba(26, 95, 42, 0.35);
}

.tool-widget-card.highlight-widget .widget-icon i {
    color: #fff;
}

.tool-widget-card.highlight-widget h5 {
    color: var(--primary-color);
    font-weight: 700;
}

.tool-widget-card.highlight-widget:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 50px rgba(26, 95, 42, 0.25);
    border-color: var(--primary-dark);
    background: linear-gradient(145deg, #ffffff 0%, var(--primary-green10) 100%);
}

/* ==============================================
   DOWNLOADS SECTION
   ============================================== */
.category-title {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.download-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    transition: all 0.3s;
}

.download-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.download-card .download-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--danger), #c82333);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.download-card .download-icon i {
    font-size: 28px;
    color: var(--white);
}

.download-card .download-info {
    flex: 1;
    margin-bottom: 15px;
}

.download-card .download-info h5 {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 8px;
}

.download-card .file-type {
    display: inline-block;
    background: var(--light-bg);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    margin-right: 8px;
}

.download-card .download-count {
    font-size: 12px;
    color: var(--text-light);
}

/* ==============================================
   VENDOR ENLISTMENT
   ============================================== */
.vendor-info-card {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
    padding: 25px 30px;
    border-radius: 12px;
}

.vendor-info-card h4 {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vendor-info-card p {
    margin: 0;
    opacity: 0.95;
}

.vendor-form-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    padding: 35px;
}

.vendor-form-card h4 {
    color: var(--primary-color);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
}

.vendor-form .form-label {
    font-weight: 600;
    color: var(--text-color);
}

/* ==============================================
   IMPORTANT LINKS
   ============================================== */
.links-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    padding: 25px;
    height: 100%;
    transition: all 0.3s;
}

.links-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.links-card .link-icon {
    width: 50px;
    height: 50px;
    background: var(--light-bg);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.links-card .link-icon img {
    max-width: 35px;
    max-height: 35px;
}

.links-card h5 {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 8px;
}

.links-card p {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 12px;
}

.links-card a {
    font-size: 13px;
    font-weight: 600;
}

/* ==============================================
   CAREER PAGE
   ============================================== */
.job-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    padding: 25px;
    margin-bottom: 20px;
    transition: all 0.3s;
}

.job-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* Deadline passed job card styling */
.job-card.deadline-passed {
    background: linear-gradient(to right, var(--light-bg), #fff);
    border-left: 4px solid var(--danger);
    opacity: 0.85;
}

.job-card.deadline-passed:hover {
    opacity: 1;
}

.job-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.deadline-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

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

.deadline-badge.expired {
    background: #f8d7da;
    color: #721c24;
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.job-header h4 {
    margin: 0;
    color: var(--primary-color);
}

.job-type {
    background: var(--primary-light);
    color: var(--white);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.job-details ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}

.job-details li {
    font-size: 14px;
    color: var(--text-light);
}

.job-details li i {
    color: var(--primary-color);
    margin-right: 5px;
}

.job-description {
    color: var(--text-color);
    margin-bottom: 20px;
}

.job-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sidebar-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    padding: 25px;
    margin-bottom: 25px;
    text-align: center;
}

.sidebar-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.sidebar-icon i {
    font-size: 28px;
    color: var(--white);
}

.sidebar-card h4 {
    color: var(--text-color);
    margin-bottom: 10px;
}

.sidebar-card p {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 15px;
}

.benefit-list {
    list-style: none;
    padding: 0;
    text-align: left;
}

.benefit-list li {
    padding: 8px 0;
    color: var(--text-color);
    font-size: 14px;
}

.benefit-list li i {
    color: var(--success);
    margin-right: 8px;
}

/* ==============================================
   REPORTS PAGE
   ============================================== */
.year-title {
    background: var(--light-bg);
    padding: 15px 25px;
    border-left: 4px solid var(--primary-color);
    margin-bottom: 25px;
}

.year-title span {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
}

.report-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.report-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--danger), #c82333);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.report-icon i {
    font-size: 28px;
    color: var(--white);
}

.report-info {
    flex: 1;
    margin-bottom: 15px;
}

.report-info h5 {
    font-size: 1rem;
    margin-bottom: 5px;
    color: var(--text-color);
}

.report-type {
    font-size: 13px;
    color: var(--text-light);
}

.report-actions {
    display: flex;
    gap: 10px;
}

/* Report Card Type Variations */
.report-card.monthly .report-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.report-card.quarterly .report-icon {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
}

.report-card.progress .report-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.report-card.annual .report-icon {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
}

.report-card.financial .report-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.report-card.audit .report-icon {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}

.report-card.agm .report-icon {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
}

/* Purple button for AGM */
.btn-purple {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    border: none;
    color: #fff;
}

.btn-purple:hover {
    background: linear-gradient(135deg, #5b4cdb, #918bef);
    color: #fff;
}

.btn-outline-purple {
    border: 1px solid #6c5ce7;
    color: #6c5ce7;
    background: transparent;
}

.btn-outline-purple:hover {
    background: #6c5ce7;
    color: #fff;
}

/* ==============================================
   NEWS PAGE
   ============================================== */
.news-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    height: 100%;
    transition: all 0.3s;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.news-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

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

.news-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-placeholder i {
    font-size: 50px;
    color: rgba(255,255,255,0.5);
}

.news-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-color);
    color: var(--white);
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
}

.news-date .day {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}

.news-date .month {
    font-size: 11px;
    text-transform: uppercase;
}

.news-content {
    padding: 20px;
}

.news-content h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--text-color);
}

.news-content p {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 15px;
}

.news-content .read-more {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
}

.news-content .read-more:hover {
    color: var(--primary-light);
}

/* ==============================================
   SURVEY/GRIEVANCE FORM
   ============================================== */
.form-card {
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    padding: 40px;
}

.form-header .form-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.form-header .form-icon i {
    font-size: 35px;
    color: var(--white);
}

.contact-option-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    padding: 30px;
    text-align: center;
    height: 100%;
}

.option-icon {
    width: 60px;
    height: 60px;
    background: var(--light-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.option-icon i {
    font-size: 24px;
    color: var(--primary-color);
}

.contact-option-card h5 {
    color: var(--text-color);
    margin-bottom: 8px;
}

.contact-option-card p {
    color: var(--text-light);
    margin: 0;
    font-size: 14px;
}

/* ==============================================
   EMPTY STATE
   ============================================== */
.empty-state {
    text-align: center;
    padding: 60px 30px;
    background: var(--light-bg);
    border-radius: 15px;
}

.empty-icon {
    width: 100px;
    height: 100px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.empty-icon i {
    font-size: 40px;
    color: var(--primary-light);
}

.empty-state h4 {
    color: var(--text-color);
    margin-bottom: 10px;
}

.empty-state p {
    color: var(--text-light);
    max-width: 400px;
    margin: 0 auto;
}

/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */
@media (max-width: 991px) {
    .section-padding {
        padding: 40px 0;
    }

    .section-header h2 {
        font-size: 1.7rem;
    }
}

@media (max-width: 767px) {
    .top-bar .top-info {
        justify-content: center;
        text-align: center;
        gap: 10px;
        font-size: 12px;
    }

    .top-bar .top-info li {
        display: none;
    }

    .top-bar .top-info li:first-child,
    .top-bar .top-info li:nth-child(2) {
        display: flex;
    }

    .top-bar .social-links {
        justify-content: center;
        margin-top: 10px;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* v10.3 (Issue #13): Mobile header — internet banking icon वा member login
       icon click गर्दा overlap हुने bug fix। दुवैलाई fixed touch-target +
       स्पष्ट z-index र margin दिएर अलग राख्ने। */
    .internet-banking-btn {
        order: 0;
        width: auto;
        text-align: center;
        margin: 0 8px 0 0 !important;
        position: relative;
        z-index: 2;
        flex-shrink: 0;
    }
    .internet-banking-btn a {
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border-radius: 8px;
    }
    .member-login-btn,
    a[href*="member/login"],
    a[href$="/member/"] {
        position: relative;
        z-index: 3;
        margin-left: 4px !important;
    }

.lang-switch {
  margin-right: 8px;
  }

.logo-text {
  display: flex;
  flex-direction: column;
  max-width: 160px;
  }

    .logo-text {
        display: none;
    }

    .cta-content {
        text-align: center;
    }

    .cta-content h2 {
        font-size: 1.5rem;
    }

    .cta-content .text-lg-end {
        margin-top: 20px;
    }

    .tool-widget-card {
        padding: 15px 10px;
    }

    .tool-widget-card .widget-icon {
        width: 45px;
        height: 45px;
    }

    .tool-widget-card .widget-icon i {
        font-size: 18px;
    }

    .tool-widget-card h5 {
        font-size: 0.85rem;
    }

    .tool-card {
        padding: 20px;
    }

    .result-box .result-value {
        font-size: 1.2rem;
    }

    .converter-result .result-date {
        font-size: 1.3rem;
    }

    .links-card {
        padding: 20px 15px;
    }

    .download-card {
        padding: 20px 15px;
    }

    /* Footer Mobile */
    .footer-widget h4 {
        font-size: 1.1rem;
    }

    .footer-bottom {
        text-align: center;
    }

    .footer-bottom .text-md-end {
        text-align: center !important;
        margin-top: 10px;
    }
}

/* ==============================================
   ONLINE KYC & LOAN FORM STYLES - Enhanced Eye-Catching Design
   ============================================== */

.kyc-form-section,
.loan-form-section {
    background: linear-gradient(135deg, #f0f7f1 0%, var(--primary-green10) 50%, var(--off-white) 100%);
    position: relative;
    overflow: hidden;
}

.kyc-form-section::before,
.loan-form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%231a5f2a' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    pointer-events: none;
}

.kyc-form-box,
.loan-form-box {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    padding: 45px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.kyc-form-box::before,
.loan-form-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color), var(--primary-light), var(--primary-color));
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

.kyc-form-box .form-header,
.loan-form-box .form-header {
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 2px solid #f0f0f0;
    text-align: center;
    position: relative;
}

.kyc-form-box .form-header::after,
.loan-form-box .form-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

.kyc-form-box .form-header i,
.loan-form-box .form-header i {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--white);
    margin: 0 auto 20px;
    box-shadow: 0 10px 30px rgba(26, 95, 42, 0.3);
    transition: all 0.4s ease;
}

.kyc-form-box:hover .form-header i,
.loan-form-box:hover .form-header i {
    transform: scale(1.05) rotate(5deg);
}

.kyc-form-box .form-header h3,
.loan-form-box .form-header h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.6rem;
    font-weight: 700;
}

.kyc-form-box .form-header p,
.loan-form-box .form-header p {
    color: var(--text-light);
    margin: 0;
    font-size: 1rem;
}

.kyc-form .form-section,
.loan-form .form-section {
    background: linear-gradient(145deg, var(--light-card), var(--off-white));
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 25px;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.kyc-form .form-section::before,
.loan-form .form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-color), var(--primary-light));
    border-radius: 5px 0 0 5px;
}

.kyc-form .form-section:hover,
.loan-form .form-section:hover {
    box-shadow: 0 5px 25px rgba(26, 95, 42, 0.1);
    transform: translateX(5px);
}

.kyc-form .form-section h5,
.loan-form .form-section h5 {
    color: var(--primary-color);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 600;
}

.kyc-form .form-section h5 i,
.loan-form .form-section h5 i {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(26, 95, 42, 0.15));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 16px;
}

.kyc-form .form-label,
.loan-form .form-label {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.kyc-form .form-control,
.kyc-form .form-select,
.loan-form .form-control,
.loan-form .form-select {
    border: 2px solid #e8e8e8;
    padding: 14px 18px;
    border-radius: 12px;
    background: #fff;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.kyc-form .form-control:hover,
.kyc-form .form-select:hover,
.loan-form .form-control:hover,
.loan-form .form-select:hover {
    border-color: #d0d0d0;
}

.kyc-form .form-control:focus,
.kyc-form .form-select:focus,
.loan-form .form-control:focus,
.loan-form .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(26, 95, 42, 0.1), 0 4px 15px rgba(26, 95, 42, 0.08);
    background: #fff;
}

.kyc-form .document-upload,
.loan-form .document-upload {
    border: 3px dashed #d0d0d0;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s ease;
    cursor: pointer;
    background: linear-gradient(145deg, var(--light-card), var(--off-white));
    position: relative;
    overflow: hidden;
}

.kyc-form .document-upload::before,
.loan-form .document-upload::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(26, 95, 42, 0.05), transparent);
    transition: left 0.5s ease;
}

.kyc-form .document-upload:hover::before,
.loan-form .document-upload:hover::before {
    left: 100%;
}

.kyc-form .document-upload:hover,
.loan-form .document-upload:hover {
    border-color: var(--primary-color);
    background: linear-gradient(145deg, #f0f8f2, var(--primary-green10));
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 95, 42, 0.15);
}

.kyc-form .document-upload i,
.loan-form .document-upload i {
    font-size: 50px;
    color: #bbb;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.kyc-form .document-upload:hover i,
.loan-form .document-upload:hover i {
    color: var(--primary-color);
    transform: scale(1.1);
}

.kyc-form .document-upload p,
.loan-form .document-upload p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.95rem;
}

.kyc-form .document-upload small,
.loan-form .document-upload small {
    color: var(--text-muted);
    font-size: 0.8rem;
    display: block;
    margin-top: 8px;
}

.form-actions {
    text-align: center;
    padding-top: 30px;
    border-top: 2px solid #f0f0f0;
    margin-top: 30px;
    position: relative;
}

.form-actions::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

.form-actions .btn {
    padding: 16px 50px;
    font-size: 1.1rem;
    border-radius: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border: none;
    box-shadow: 0 10px 30px rgba(26, 95, 42, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.form-actions .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(26, 95, 42, 0.4);
}

.form-actions .btn i {
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.form-actions .btn:hover i {
    transform: translateX(5px);
}

/* Mobile Responsive for KYC/Loan Forms */
@media (max-width: 768px) {
    .kyc-form-box,
    .loan-form-box {
        padding: 20px 15px;
        border-radius: 10px;
    }

    .kyc-form .form-section,
    .loan-form .form-section {
        padding: 15px;
        margin-bottom: 15px;
    }

    .kyc-form-box .form-header i,
    .loan-form-box .form-header i {
        font-size: 40px;
    }

    .kyc-form-box .form-header h3,
    .loan-form-box .form-header h3 {
        font-size: 1.3rem;
    }

    .form-actions .btn {
        width: 100%;
        padding: 15px;
    }

    /* Tool widgets mobile */
    .tool-widget-card.highlight-widget h5 {
        font-size: 0.85rem;
    }
}

/* ==============================================
   ADDITIONAL MOBILE FIXES
   ============================================== */

@media (max-width: 576px) {
    /* Smaller screens */
    .tool-widget-card {
        padding: 15px 10px;
    }

    .tool-widget-card h5 {
        font-size: 0.8rem;
    }

    .widget-icon {
        width: 50px;
        height: 50px;
    }

    .widget-icon i {
        font-size: 1.2rem;
    }

    /* Committee cards mobile */
    .committee-member-card {
        margin-bottom: 15px;
    }

    .committee-member-card .member-photo {
        width: 80px;
        height: 80px;
    }

    /* News cards mobile */
    .news-card .news-content h4 {
        font-size: 1rem;
    }

    /* Reports page mobile */
    .report-card {
        padding: 15px;
    }

    /* Filter buttons mobile */
    .filter-btn {
        padding: 8px 15px;
        font-size: 0.85rem;
        margin: 3px;
    }
}

/* ==============================================
   CHATBOT / FAQ WIDGET STYLES
   ============================================== */

/* When chatbot is open on mobile, prevent background scroll */
body.chatbot-open {
    overflow: hidden;
    touch-action: none;
}

.chatbot-widget {
    position: fixed;
    bottom: 72px;    /* WhatsApp (bottom:18px + 44px + 10px gap) माथि */
    right: 18px;
    z-index: 9990;
}

.chatbot-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
    transition: all 0.3s ease;
    position: relative;
}

.chatbot-toggle:hover {
    transform: scale(1.08);
}

.chatbot-toggle i {
    font-size: 17px;
}

.chatbot-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: #ff4444;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.chatbot-box {
    position: fixed;
    bottom: 160px;   /* chatbot toggle माथि */
    right: 20px;
    width: 350px;
    max-height: 500px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    display: none;
    overflow: hidden;
    z-index: 9991;
}

.chatbot-box.active {
    display: block;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chatbot-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chatbot-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.chatbot-title i {
    font-size: 20px;
}

.chatbot-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
}

.chatbot-body {
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
    overscroll-behavior: contain; /* stop scroll chaining to page */
    -webkit-overflow-scrolling: touch;
}

.chatbot-welcome {
    background: var(--light-bg);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: center;
}

.chatbot-welcome p {
    margin: 0;
    color: #555;
}

.chatbot-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.quick-action-btn {
    flex: 1;
    min-width: calc(50% - 4px);
    padding: 10px 8px;
    background: rgba(26, 95, 42, 0.05);
    border: 1px solid rgba(26, 95, 42, 0.2);
    border-radius: 8px;
    color: var(--primary-color);
    text-decoration: none;
    text-align: center;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.quick-action-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.quick-action-btn i {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.chatbot-faqs h6 {
    color: var(--text-color);
    margin-bottom: 10px;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 5px;
}

.faq-item {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.faq-question {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--light-card);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: #f0f0f0;
}

.faq-question i {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 15px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.5;
}

.faq-item.active .faq-answer {
    padding: 10px 15px;
    max-height: 200px;
}

.chatbot-contact {
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    margin-top: 10px;
}

.chatbot-contact p {
    margin-bottom: 10px;
    color: var(--text-light);
    font-size: 0.85rem;
}

/* Mobile responsive chatbot */
@media (max-width: 576px) {
    .chatbot-widget {
        bottom: 90px;   /* WhatsApp (15px+56px+19px gap) माथि — vertical stack */
        right: 15px;    /* WhatsApp सँग aligned */
    }

    .chatbot-toggle {
        width: 48px;
        height: 48px;
    }

    .chatbot-toggle i {
        font-size: 18px;
    }

    .chatbot-box {
        position: fixed;
        width: calc(100vw - 20px);
        left: 10px;
        right: 10px;
        bottom: 80px;
        max-height: 65vh;
    }
}

/* ==============================================
   AUCTION CARD STYLES
   ============================================== */

.auction-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.auction-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.auction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--light-bg);
    border-bottom: 1px solid var(--border-light);
}

.auction-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.auction-status.status-upcoming {
    background: #e3f2fd;
    color: #1976d2;
}

.auction-status.status-ongoing {
    background: #fff3e0;
    color: #f57c00;
}

.auction-status.status-completed {
    background: var(--primary-green10);
    color: #388e3c;
}

.auction-status.status-cancelled {
    background: #ffebee;
    color: #d32f2f;
}

.auction-date {
    color: var(--text-light);
    font-size: 0.85rem;
}

.auction-image {
    height: 200px;
    overflow: hidden;
}

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

.auction-body {
    padding: 20px;
}

.auction-body h4 {
    margin-bottom: 15px;
    color: var(--dark-color);
}

.auction-details p {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.auction-details .minimum-price {
    font-size: 1.1rem;
    color: var(--primary-dark);
}

.auction-description {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-light);
}

.auction-contact {
    margin-top: 15px;
    padding: 15px;
    background: var(--light-bg);
    border-radius: 8px;
}

.auction-contact p {
    margin: 5px 0;
    font-size: 0.9rem;
}

.auction-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

/* ==============================================
   GRIEVANCE FORM STYLES
   ============================================== */

.grievance-form-box {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    padding: 40px;
}

.grievance-form-box .form-header i {
    font-size: 50px;
    color: var(--danger);
    margin-bottom: 15px;
}

.grievance-form .form-section {
    background: var(--light-bg);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    border-left: 4px solid var(--danger);
}

/* ==============================================
   APPOINTMENT FORM STYLES
   ============================================== */

.appointment-form-box {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    padding: 40px;
}

.appointment-form-box .form-header i {
    font-size: 50px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.appointment-form .form-section {
    background: var(--light-bg);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    border-left: 4px solid var(--primary-color);
}

/* ==============================================
   ACCOUNT FORM STYLES
   ============================================== */

.account-form-box {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    padding: 40px;
}

.account-form-box .form-header {
    text-align: center;
    margin-bottom: 30px;
}

.account-form-box .form-header i {
    font-size: 50px;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: block;
}

.account-form-box .form-header h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.account-form-box .form-header p {
    color: var(--text-light);
}

.account-form .form-section {
    background: var(--light-bg);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    border-left: 4px solid var(--primary-color);
}

.account-form .form-section h5 {
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-form .form-actions {
    text-align: center;
    padding-top: 20px;
}

/* KYC Form Box Styles */
.kyc-form-box {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    padding: 40px;
}

.kyc-form-box .form-header {
    text-align: center;
    margin-bottom: 30px;
}

.kyc-form-box .form-header i {
    font-size: 50px;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: block;
}

.kyc-form-box .form-header h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.kyc-form-box .form-header p {
    color: var(--text-light);
}

.kyc-form .form-section {
    background: var(--light-bg);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    border-left: 4px solid var(--primary-color);
}

.kyc-form .form-section h5 {
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kyc-form .form-actions {
    text-align: center;
    padding-top: 20px;
}

/* Loan Form Box Styles */
.loan-form-box {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    padding: 40px;
}

.loan-form-box .form-header {
    text-align: center;
    margin-bottom: 30px;
}

.loan-form-box .form-header i {
    font-size: 50px;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: block;
}

.loan-form-box .form-header h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.loan-form-box .form-header p {
    color: var(--text-light);
}

.loan-form .form-section {
    background: var(--light-bg);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    border-left: 4px solid var(--primary-color);
}

.loan-form .form-section h5 {
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.loan-form .form-actions {
    text-align: center;
    padding-top: 20px;
}

/* Appointment Form Additional Styles */
.appointment-form-box .form-header {
    text-align: center;
    margin-bottom: 30px;
}

.appointment-form-box .form-header h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.appointment-form-box .form-header p {
    color: var(--text-light);
}

.appointment-form .form-section h5 {
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.appointment-form .form-actions {
    text-align: center;
    padding-top: 20px;
}

  /* Highlight Widget - Same white background as other widgets */
.tool-widget-card.highlight-widget {
  background: var(--white);
  border: 2px solid var(--primary-color);
  }

.tool-widget-card.highlight-widget:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #fff;
}

.tool-widget-card.highlight-widget:hover .widget-icon {
    background: rgba(255,255,255,0.2);
}

.tool-widget-card.highlight-widget:hover .widget-icon i {
    color: #fff;
}

/* ==============================================
   INFORMATION & GRIEVANCE OFFICER CARDS
   ============================================== */

.officers-section {
    background: linear-gradient(135deg, var(--light-bg) 0%, #e9ecef 100%);
}

.officer-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    padding: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.officer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
}

.officer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
}

.officer-card.information-officer::before {
    background: linear-gradient(90deg, #2196f3, #03a9f4);
}

.officer-card.grievance-officer::before {
    background: linear-gradient(90deg, #f44336, #e91e63);
}

.officer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.information-officer .officer-badge {
    background: #e3f2fd;
    color: #1976d2;
}

.grievance-officer .officer-badge {
    background: #ffebee;
    color: #c62828;
}

.officer-badge i {
    font-size: 1rem;
}

.officer-photo {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #f0f0f0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.officer-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.officer-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--border-color), #bdbdbd);
    color: #757575;
    font-size: 50px;
}

.officer-info h4 {
    color: var(--dark-color);
    margin-bottom: 5px;
    font-weight: 600;
}

.officer-info .position {
    display: block;
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.officer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.officer-contact .contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--light-bg);
    border-radius: 8px;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.officer-contact .contact-item:hover {
    background: var(--primary-color);
    color: #fff;
}

.officer-contact .contact-item i {
    width: 20px;
    text-align: center;
}

.officer-description {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--border-light);
}

.officer-description p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 0;
    line-height: 1.6;
}

/* Mobile responsive officers */
@media (max-width: 768px) {
    .officer-card {
        padding: 20px;
    }

    .officer-photo {
        width: 120px;
        height: 120px;
    }

    .officer-placeholder {
        font-size: 40px;
    }

    .officer-info h4 {
        font-size: 1.1rem;
    }
}

/* ==============================================
   FIX: CONSISTENT HOVER COLORS FOR ALL WIDGETS
   Online KYC, EMI Calculator - same hover style
   ============================================== */
.tool-widget-card:hover,
.tool-widget-card.highlight-widget:hover {
    background: var(--primary-color) !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(26, 95, 42, 0.25);
}

.tool-widget-card:hover .widget-icon,
.tool-widget-card.highlight-widget:hover .widget-icon {
    background: var(--white) !important;
}

.tool-widget-card:hover .widget-icon i,
.tool-widget-card.highlight-widget:hover .widget-icon i {
    color: var(--primary-color) !important;
}

.tool-widget-card:hover h5,
.tool-widget-card.highlight-widget:hover h5 {
    color: var(--white) !important;
}

/* FIX: Text overflow on widget hover - ensure text doesn't get cut off */
.tool-widget-card h5 {
    font-size: 0.9rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5px;
}

/* ==============================================
   FIX: FOOTER SPACING - Reduce excessive padding
   ============================================== */
.footer-top {
    padding: 40px 0 25px;
}

.footer-bottom {
    padding: 15px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-widget {
    margin-bottom: 15px;
}

.footer-widget h4 {
    margin-bottom: 18px;
    padding-bottom: 10px;
}

/* ==============================================
   FIX: MOBILE MENU CLICK ISSUE
   Improve touch targets and z-index
   ============================================== */
@media (max-width: 991px) {
    .mobile-menu-toggle {
        display: flex !important;
        z-index: 1001;
        padding: 14px 18px;
        font-size: 24px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
    }

    .main-nav {
        z-index: 10000;
    }

    .menu-overlay {
        z-index: 9999;
    }

    /* Make dropdown items clickable properly */
    .nav-menu .has-dropdown > a {
        pointer-events: auto;
        cursor: pointer;
    }

    .nav-menu .dropdown li a {
        padding: 12px 20px;
        display: block;
        width: 100%;
    }
}

/* ==============================================
   FIX: HEADER NAME - Center when 2 lines
   ============================================== */
.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.5;
    text-align: left;
}

@media (max-width: 576px) {
    .logo-name {
        font-size: 0.95rem;
        text-align: center;
    }

    .logo-text {
        text-align: center;
    }
}

/* ==============================================
   FIX: MOBILE SERVICE CENTER TEXT OVERFLOW
   ============================================== */
@media (max-width: 576px) {
    .tool-widget-card {
        padding: 12px 8px;
    }

    .tool-widget-card h5 {
        font-size: 0.75rem;
        word-break: break-word;
        hyphens: auto;
    }

    .widget-icon {
        width: 40px;
        height: 40px;
    }

    .widget-icon i {
        font-size: 16px;
    }
}

/* ==============================================
   FIX: VISITOR COUNTER DISPLAY
   ============================================== */
.visitor-counter {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 10px 0;
}

.visitor-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
}

.visitor-item i {
    color: var(--primary-light);
}

.visitor-item.today {
    background: rgba(40, 167, 69, 0.2);
}

.visitor-item.today i {
    color: var(--primary-light);
}

/* ==============================================
   FIX: LEADERSHIP MESSAGE SECTION DISPLAY
   ============================================== */
.leadership-messages-section {
    background: var(--light-bg);
    padding: 60px 0;
}

.message-card {
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    padding: 30px;
    height: 100%;
}

.message-card.chairman-card {
    border-top: 4px solid var(--primary-color);
}

.message-card.ceo-card {
    border-top: 4px solid var(--primary-color);
}

.message-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--border-color);
}

.leader-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--primary-color);
}

.leader-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leader-photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
}

.leader-photo-placeholder i {
    font-size: 40px;
    color: rgba(255,255,255,0.8);
}

.leader-info h4 {
    margin-bottom: 5px;
    color: var(--text-color);
}

.leader-info .position {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
}

.message-content {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.8;
}

.message-content p {
    margin-bottom: 15px;
}

/* ==============================================
   FIX: GRIEVANCE TRACKING STYLES
   ============================================== */
.tracking-form {
    background: var(--light-bg);
    padding: 25px;
    border-radius: 12px;
    margin-top: 30px;
}

.tracking-form h5 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.tracking-result {
    background: var(--white);
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid var(--primary-color);
    margin-top: 20px;
}

.tracking-result h5 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.status-badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

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

.status-badge.in_progress {
    background: #cce5ff;
    color: #004085;
}

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

.status-badge.closed {
    background: #e2e3e5;
    color: #383d41;
}

/* ==============================================
   FIX: CONSISTENT HOVER FOR ALL TOOL WIDGETS
   Online KYC, EMI Calculator, etc - same hover
   ============================================== */
.tool-widget-card:hover,
.tool-widget-card.highlight-widget:hover {
    background: var(--primary-color) !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(26, 95, 42, 0.25) !important;
    border-color: var(--primary-color) !important;
}

.tool-widget-card:hover .widget-icon,
.tool-widget-card.highlight-widget:hover .widget-icon {
    background: var(--white) !important;
}

.tool-widget-card:hover .widget-icon i,
.tool-widget-card.highlight-widget:hover .widget-icon i {
    color: var(--primary-color) !important;
}

.tool-widget-card:hover h5,
.tool-widget-card.highlight-widget:hover h5 {
    color: var(--white) !important;
}

/* FIX: Widget text overflow - prevent cutting */
.tool-widget-card h5 {
    font-size: 0.85rem !important;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    min-height: auto;
    padding: 0 5px;
    margin-bottom: 0;
    white-space: normal;
    overflow: visible !important;
}


.tools-category-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 0 14px 14px;
    height: 100%;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease;
}

.tools-category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,.14);
}

.tools-category-card h5 {
    font-size: .95rem;
    color: #fff;
    font-weight: 700;
    margin: 0 -14px 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    background-size: 200% 100%;
    animation: toolsHeaderShimmer 5s ease-in-out infinite;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.tools-category-card:hover h5 {
    animation-play-state: paused;
    filter: brightness(1.05);
}

.tools-category-card h5 i {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .8rem;
}

.tools-category-card h5::after {
    content: "";
    position: absolute;
    top: -60%;
    right: -16%;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
    animation: toolsHeaderFloat 6s ease-in-out infinite;
}

@keyframes toolsHeaderShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes toolsHeaderFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(8px, -6px) scale(1.05); }
}

.tools-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tools-mini-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    background: #fff;
    border: 1.5px solid rgba(var(--primary-rgb, 26, 95, 42), 0.12);
    border-radius: 12px;
    padding: 14px 8px;
    font-size: .82rem;
    color: var(--text-color, #333);
    text-decoration: none;
    font-weight: 600;
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
    min-height: 0;
    position: relative;
    overflow: visible;
}

.tools-mini-link i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--primary-color);
    background: rgba(var(--primary-rgb, 26, 95, 42), 0.10);
    box-shadow: none;
    flex: 0 0 auto;
    transition: background-color .22s ease, color .22s ease, transform .2s ease;
}

.tools-mini-link span {
    display: inline-block;
    line-height: 1.2;
    color: var(--text-color, #333);
    transition: color .2s ease;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
}

.tools-mini-more {
    display: block;
    font-size: 0.70rem;
    font-weight: 500;
    color: var(--text-muted, #9ca3af);
    margin-top: 1px;
    line-height: 1.2;
}

.tools-mini-link::after {
    content: none;
}

.tools-mini-link:hover {
    background: rgba(var(--primary-rgb, 26, 95, 42), 0.06);
    border-color: rgba(var(--primary-rgb, 26, 95, 42), 0.22);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb, 26, 95, 42), 0.12);
    color: var(--primary-color);
}

.tools-mini-link:hover span {
    color: var(--primary-dark);
}

.tools-mini-link:hover .tools-mini-more {
    color: var(--primary-color);
    opacity: 1;
}

.tools-link-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--primary-color);
    color: var(--text-on-primary, #fff);
    font-size: 0.58rem;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.02em;
    z-index: 2;
}

.tools-mini-link:hover i {
    background: var(--primary-color);
    color: var(--text-on-primary, #fff);
    transform: scale(1.06);
}

@keyframes toolsIconSpin {
    0% { transform: rotate(0deg) scale(1); }
    40% { transform: rotate(12deg) scale(1.06); }
    70% { transform: rotate(-8deg) scale(1.06); }
    100% { transform: rotate(0deg) scale(1.06); }
}

.tools-cat-forms .tools-mini-link i,
.tools-cat-tools .tools-mini-link i,
.tools-cat-member .tools-mini-link i {
    background: rgba(var(--primary-rgb, 26, 95, 42), 0.10);
    color: var(--primary-color);
}

.tools-cat-forms .tools-mini-link:hover i,
.tools-cat-tools .tools-mini-link:hover i,
.tools-cat-member .tools-mini-link:hover i {
    background: var(--primary-color);
    color: var(--text-on-primary, #fff);
}

/* Homepage: keep key section titles visually consistent */
.section-header.section-header-unified h2,
.home-heading-unified {
    font-size: clamp(1.55rem, 2.5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

.section-header.section-header-unified p {
    font-size: 1.05rem;
    margin-top: 8px;
    line-height: 1.7;
}

@media (max-width: 575.98px) {
    .tools-links-grid {
        grid-template-columns: 1fr;
    }

    .tools-mini-link {
        min-height: 128px;
        font-size: .94rem;
    }

    .tools-mini-link i {
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
    }
}

/* ==============================================
   FIX: HEADER NAME - Center when 2 lines
   ============================================== */
.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.25;
    text-align: center;
    display: block;
}

.logo-slogan {
    text-align: center;
    display: block;
}

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

@media (max-width: 576px) {
    .logo-name {
        font-size: 0.9rem;
    }
    .logo-text {
        text-align: center;
    }
    .logo a {
        flex-direction: column;
        text-align: center;
    }
}

/* ==============================================
   FIX: FOOTER SPACING - Reduce padding
   ============================================== */
.footer-top {
    padding: 35px 0 20px !important;
}

.footer-bottom {
    padding: 12px 0 !important;
}

.footer-widget {
    margin-bottom: 15px !important;
}

.footer-widget h4 {
    margin-bottom: 15px !important;
    padding-bottom: 8px;
    font-size: 1rem;
}

.footer-widget ul li {
    margin-bottom: 6px;
}

/* ==============================================
   FIX: MOBILE APP SECTION - Add admin photo area
   ============================================== */
.mobile-app-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 50px 0;
    color: var(--white);
}

.mobile-app-section .app-content {
    padding-right: 30px;
}

.mobile-app-section h2 {
    color: var(--white);
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.mobile-app-section h3 {
    color: rgba(255,255,255,0.9);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.mobile-app-section .app-tagline {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.mobile-app-section .app-description {
    color: rgba(255,255,255,0.85);
    margin-bottom: 20px;
}

.app-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.app-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
}

.app-btn.google-play {
    background: #000;
    color: #fff;
}

.app-btn.app-store {
    background: #000;
    color: #fff;
}

.app-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.app-btn i {
    font-size: 28px;
}

.app-btn span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.app-btn span small {
    font-size: 10px;
    opacity: 0.8;
}

.app-image {
    position: relative;
}

.app-image img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.app-mockup {
    display: none;
}

/* Show mockup only if image fails */
.app-image img[style*="display: none"] + .app-mockup,
.app-image:not(:has(img)) .app-mockup {
    display: flex;
    width: 250px;
    height: 450px;
    background: linear-gradient(145deg, var(--text-color), #222);
    border-radius: 35px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.app-mockup i {
    font-size: 80px;
    color: rgba(255,255,255,0.3);
}

/* ==============================================
   FIX: LEADERSHIP MESSAGE CARD BODY
   ============================================== */
.message-body {
    position: relative;
}

.message-body .quote-icon {
    font-size: 24px;
    color: var(--primary-light);
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
}

.message-body .message-text {
    padding-left: 35px;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.message-body .read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.message-body .read-more-link:hover {
    color: var(--primary-dark);
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.photo-placeholder i {
    font-size: 40px;
    color: rgba(255,255,255,0.8);
}

/* ==============================================
   FIX: MOBILE WIDGET TEXT SIZE
   ============================================== */
@media (max-width: 576px) {
    .tool-widget-card {
        padding: 15px 8px !important;
        min-height: 110px;
    }

    .tool-widget-card h5 {
        font-size: 0.7rem !important;
        line-height: 1.3;
    }

    .widget-icon {
        width: 45px !important;
        height: 45px !important;
        margin-bottom: 10px !important;
    }

    .widget-icon i {
        font-size: 18px !important;
    }

    .mobile-app-section {
        padding: 40px 0;
    }

    .mobile-app-section h2 {
        font-size: 1.4rem;
    }

    .mobile-app-section .app-content {
        padding-right: 0;
        text-align: center;
    }

    .app-buttons {
        justify-content: center;
    }
}

/* ==============================================
   FIX: NEPALI DATE PICKER STYLES
   ============================================== */
.nepali-datepicker-wrapper {
    position: relative;
}

.nepali-datepicker-wrapper input,
input.nepali-datepicker,
input[readonly].nepali-datepicker {
    cursor: pointer;
    background-color: #fff !important;
}

/* Readonly datepicker inputs should look clickable */
input[readonly].nepali-datepicker:hover,
.nepali-datepicker-wrapper input:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(26, 95, 42, 0.1);
}

.nepali-datepicker-wrapper .input-group-text {
    cursor: pointer;
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.ndp-container {
    z-index: 9999 !important;
    font-family: inherit;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    border-radius: 8px;
}

/* Nepali Datepicker styling improvements */
.ndp-container .ndp-header {
    background: var(--primary-color) !important;
}

.ndp-container .ndp-day.selected,
.ndp-container .ndp-day:hover {
    background: var(--primary-color) !important;
}

/* ==============================================
   INSTITUTIONAL STATS SECTION - Enhanced Eye-Catching Design
   ============================================== */
.institutional-stats-section {
    padding: 50px 0;
    background: linear-gradient(135deg, #f0f7f1 0%, var(--primary-green10) 50%, #f0f7f1 100%);
    position: relative;
    overflow: hidden;
}

.institutional-stats-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(26, 95, 42, 0.03) 0%, transparent 50%);
    animation: float 15s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(2%, 2%) rotate(5deg); }
}

.institutional-stats-section .section-header h2 {
    font-size: 2rem;
    margin-bottom: 8px;
    color: var(--primary-dark);
}

.fiscal-year-badge-wrap {
    margin-top: 15px;
}

.institutional-stats-section .fiscal-year-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    padding: 10px 28px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(26, 95, 42, 0.3);
    letter-spacing: 0.5px;
}

.institutional-stats-section .fiscal-year-badge i {
    font-size: 14px;
    opacity: 0.9;
}

.ip-profile-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb, 26, 95, 42), 0.08);
}

.ip-card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--text-on-primary, #fff);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.ip-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ip-fy-badge {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.ip-date-info {
    font-size: 0.82rem;
    opacity: 0.9;
}

.ip-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0;
    border-bottom: 1px solid #f0f0f0;
}

.ip-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
    border-right: 1px solid #f2f4f3;
    transition: background 0.2s;
}

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

.ip-stat-item:hover {
    background: color-mix(in srgb, var(--primary-color) 4%, #fff);
}

.ip-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ip-stat-primary .ip-stat-icon {
    background: #e8f5e9;
    color: var(--primary-color);
}

.ip-stat-success .ip-stat-icon {
    background: color-mix(in srgb, var(--secondary-color) 12%, #fff);
    color: var(--secondary-color);
}

.ip-stat-info .ip-stat-icon {
    background: color-mix(in srgb, var(--primary-light) 14%, #fff);
    color: var(--primary-light);
}

.ip-stat-teal .ip-stat-icon {
    background: color-mix(in srgb, var(--primary-color) 10%, #fff);
    color: var(--primary-dark);
}

.ip-stat-warning .ip-stat-icon {
    background: color-mix(in srgb, var(--secondary-color) 14%, #fff);
    color: var(--secondary-dark, var(--secondary-color));
}

.ip-stat-purple .ip-stat-icon {
    background: color-mix(in srgb, var(--primary-dark) 12%, #fff);
    color: var(--primary-dark);
}

.ip-stat-value {
    font-size: 0.96rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ip-stat-label {
    font-size: 0.75rem;
    color: #777;
    margin-top: 3px;
    font-weight: 500;
}

.ip-stat-sub {
    font-size: 0.68rem;
    color: var(--primary-light);
    font-weight: 600;
    margin-top: 2px;
}

.ip-indicators-row {
    display: flex;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--primary-color) 4%, #fff);
    border-top: 1px solid color-mix(in srgb, var(--primary-color) 14%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 14%, #fff);
    padding: 12px 16px;
    gap: 18px;
}

.ip-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 180px;
}

.ip-ind-label {
    font-size: 0.76rem;
    color: #555;
    white-space: nowrap;
    min-width: 98px;
}

.ip-ind-bar-wrap {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    min-width: 80px;
}

.ip-ind-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.bar-good {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
}

.bar-warning {
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
}

.bar-danger {
    background: linear-gradient(90deg, #dc3545, var(--secondary-color));
}

.bar-info {
    background: linear-gradient(90deg, var(--primary-light), var(--secondary-color));
}

.bar-teal {
    background: linear-gradient(90deg, var(--primary-dark), var(--primary-color));
}

.ip-ind-value {
    font-size: 0.88rem;
    font-weight: 700;
    min-width: 42px;
    text-align: right;
}

.ip-reserve-row {
    padding: 12px 16px;
    font-size: 0.84rem;
    color: #444;
    border-bottom: 1px solid #f0f0f0;
    background: color-mix(in srgb, var(--primary-color) 5%, #fff);
}

.ip-reserve-pct {
    background: #e8f5e9;
    color: var(--primary-color);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 6px;
}

.ip-note {
    padding: 12px 16px;
    font-size: 0.82rem;
    color: #666;
    background: #fafafa;
    font-style: italic;
}

/* Homepage institutional card: tighter, cleaner, hover polish */
.institutional-stats-section .ip-stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    background: #fff;
    border-top: 1px solid #edf1f7;
    border-bottom: 1px solid #edf1f7;
}

.institutional-stats-section .ip-stat-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 10px 10px !important;
    border-right: 1px solid #e9edf3 !important;
    min-height: 88px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.institutional-stats-section .ip-stat-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    transition: transform 0.35s ease !important;
}

.institutional-stats-section .ip-stat-item:hover .ip-stat-icon {
    transform: rotate(12deg) scale(1.06);
}

.institutional-stats-section .ip-stat-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.institutional-stats-section .ip-stat-value {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.1px;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.15 !important;
    color: #18212f !important;
}

.institutional-stats-section .ip-stat-label {
    font-size: 0.63rem !important;
    line-height: 1.15 !important;
    color: #6b778c !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.institutional-stats-section .ip-stat-sub {
    font-size: 0.61rem !important;
    line-height: 1.1 !important;
    color: #2f6fa8 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 0.9em;
}

.institutional-stats-section .ip-card-header {
    padding: 7px 12px !important;
    min-height: 36px;
    border-radius: 10px 10px 0 0;
}

.institutional-stats-section .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.institutional-stats-section .ip-profile-card {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    margin-bottom: 0 !important;
}

.institutional-stats-section .ip-fy-badge {
    font-size: 0.84rem !important;
    font-weight: 700;
    line-height: 1.1;
}

.institutional-stats-section .ip-fy-badge i {
    display: none !important;
}

.institutional-stats-section .ip-stat-teal .ip-stat-icon,
.institutional-stats-section .ip-stat-warning .ip-stat-icon {
    display: none !important;
}

.institutional-stats-section .ip-stat-icon,
.institutional-stats-section .ip-indicator i,
.institutional-stats-section .ip-reserve-row i,
.institutional-stats-section .ip-note i,
.institutional-stats-section .home-ip-btn i {
    display: none !important;
}

.institutional-stats-section .ip-date-info {
    font-size: 0.68rem !important;
}

.institutional-stats-section .home-ip-btn.btn-sm {
    padding: 2px 7px !important;
    font-size: 0.68rem !important;
    line-height: 1.2;
}

.institutional-stats-section .ip-ind-label {
    font-size: 0.68rem;
    color: #5f6b7d;
}

.institutional-stats-section .ip-ind-value {
    font-size: 0.78rem;
    font-weight: 700;
}

.home-ip-preview-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(16, 70, 138, 0.12);
    box-shadow: 0 8px 22px rgba(12, 52, 101, 0.08);
    overflow: hidden;
}

.home-ip-preview-head {
    background: linear-gradient(135deg, #0d4e95, #1565c0);
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-ip-preview-title {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-ip-latest {
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 600;
}

.home-ip-btn {
    border: 0;
    color: #0d4e95;
    font-weight: 600;
    white-space: nowrap;
}

.home-ip-preview-meta {
    padding: 10px 16px 0;
    color: #667085;
    font-size: 0.83rem;
}

.home-ip-preview-stats {
    padding: 10px 12px 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.home-ip-stat {
    background: #f8fbff;
    border: 1px solid #e6eef8;
    border-radius: 10px;
    padding: 10px 10px;
}

.home-ip-stat span {
    display: block;
    font-size: 0.74rem;
    color: #5b667a;
    margin-bottom: 4px;
}

.home-ip-stat strong {
    display: block;
    font-size: 0.96rem;
    line-height: 1.2;
    color: #0d2f57;
}

.home-ip-preview-empty {
    padding: 14px 16px 16px;
    color: #6b7280;
    font-size: 0.9rem;
}

.home-ip-rich-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(16, 70, 138, 0.14);
    box-shadow: 0 10px 24px rgba(12, 52, 101, 0.08);
    overflow: hidden;
}

.home-ip-rich-header {
    background: linear-gradient(135deg, #0d4e95, #1565c0);
    color: #fff;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.home-ip-rich-fy {
    font-weight: 700;
    font-size: 1rem;
}

.home-ip-rich-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    background: #f8fbff;
}

.home-ip-rich-stat {
    border: 1px solid #e4ecf8;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-ip-rich-stat i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #eaf2ff;
    color: #0d4e95;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
}

.home-ip-rich-stat strong {
    display: block;
    font-size: 0.95rem;
    color: #0d2f57;
    line-height: 1.2;
}

.home-ip-rich-stat span {
    display: block;
    font-size: 0.76rem;
    color: #5f6f86;
}

.home-ip-rich-indicators {
    border-top: 1px solid #ecf0f5;
    padding: 10px 12px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: 0.84rem;
    color: #29476b;
}

.home-ip-rich-indicators > span {
    background: #f2f7ff;
    border: 1px solid #dce8f8;
    border-radius: 999px;
    padding: 4px 10px;
}

.home-ip-rich-indicators .home-ip-rich-hint {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #67768b;
    padding: 0;
}

@media (max-width: 991px) {
    .home-ip-preview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-ip-rich-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ip-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ip-indicators-row {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 575px) {
    .home-ip-preview-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .home-ip-preview-title {
        font-size: 0.92rem;
    }
    .home-ip-preview-stats {
        grid-template-columns: 1fr;
    }
    .home-ip-rich-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .home-ip-rich-stats {
        grid-template-columns: 1fr;
    }
    .ip-card-header {
        padding: 12px 14px;
    }
    .ip-header-actions {
        width: 100%;
        justify-content: space-between;
    }
    .ip-stats-grid {
        grid-template-columns: 1fr;
    }
    .ip-stat-item {
        border-right: none;
        border-bottom: 1px solid #f2f4f3;
    }
    .institutional-stats-section .ip-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .institutional-stats-section .ip-stat-item {
        border-right: 1px solid #e9edf3;
    }
    .institutional-stats-section .ip-stat-item:nth-child(2n) {
        border-right: none;
    }
}

.stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px 18px;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(26, 95, 42, 0.08);
}

.stat-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(26, 95, 42, 0.18);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card .stat-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 8px 20px rgba(26, 95, 42, 0.25);
    transition: all 0.4s ease;
    position: relative;
}

.stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(10deg);
    border-radius: 50%;
}

.stat-card .stat-icon i {
    color: #fff;
    font-size: 24px;
    transition: transform 0.3s ease;
}

.stat-card:hover .stat-icon i {
    transform: scale(1.15);
}

.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.2;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.stat-card:hover .stat-value {
    color: var(--primary-color);
}

.stat-card .stat-label {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 5px;
    font-weight: 500;
}

/* NPA Card Colors */
.stat-card.npa-card.good .stat-icon {
    background: linear-gradient(135deg, var(--primary-light), #34ce57);
    box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3);
}
.stat-card.npa-card.warning .stat-icon {
    background: linear-gradient(135deg, var(--secondary-color), #ffca2c);
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3);
}
.stat-card.npa-card.bad .stat-icon {
    background: linear-gradient(135deg, var(--danger), #e04a59);
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}

@media (max-width: 767px) {
    .institutional-stats-section {
        padding: 30px 0;
    }
    .stat-card {
        padding: 15px 10px;
    }
    .stat-card .stat-value {
        font-size: 1.1rem;
    }
    .stat-card .stat-icon {
        width: 40px;
        height: 40px;
    }
    .stat-card .stat-icon i {
        font-size: 16px;
    }
}

/* ==============================================
   FIX: BRANCH/SERVICE CENTER SELECT IN FORMS
   ============================================== */
.branch-select-enhanced {
    position: relative;
}

.branch-select-enhanced .form-select {
    padding-right: 35px;
}

.branch-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 10px;
    margin-left: 5px;
}

/* ==============================================
   FIX: MOBILE APP SECTION PHOTO STYLES
   ============================================== */
.app-phone-img {
    max-width: 280px;
    height: auto;
    border-radius: 25px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.app-mockup-default {
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-frame {
    width: 220px;
    height: 420px;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border-radius: 35px;
    padding: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    position: relative;
}

.phone-frame::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 6px;
    background: var(--text-color);
    border-radius: 10px;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.phone-screen i {
    font-size: 60px;
    color: rgba(255,255,255,0.9);
}

.phone-screen span {
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
}

@media (max-width: 768px) {
    .phone-frame {
        width: 180px;
        height: 340px;
    }

    .phone-screen i {
        font-size: 45px;
    }

    .phone-screen span {
        font-size: 14px;
    }

    .app-phone-img {
        max-width: 200px;
    }
}

/* ==============================================
   AWARDS SECTION STYLES
   ============================================== */
.awards-section {
    background: var(--light-bg);
}

.award-card {
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    padding: 25px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.award-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}

.award-image {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--secondary-color);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

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

.award-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #ffd700, #ff9800);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
}

.award-icon i {
    font-size: 40px;
    color: var(--white);
}

.award-content h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.award-by {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.award-by i {
    color: var(--secondary-color);
    margin-right: 5px;
}

.award-date {
    display: inline-block;
    background: var(--light-bg);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

.award-desc {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 10px;
}

/* ==============================================
   MOBILE MENU FIXES - CRITICAL FIX FOR TOUCH/CLICK
   ============================================== */
@media (max-width: 991px) {
    /* Menu Overlay - Must be below nav but cover page content */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        background: rgba(0,0,0,0.6);
        z-index: 100001 !important;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        pointer-events: none;
        /* backdrop-filter removed: it causes blur/click issues on mobile Safari */
    }

    .menu-overlay.active {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    /* Main Navigation Sidebar */
    .main-nav {
        position: fixed;
        top: 0;
        right: -320px;
        width: 290px;
        height: 100vh;
        height: 100dvh;
        max-height: -webkit-fill-available;
        overflow-y: auto !important;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overscroll-behavior: contain;
        background: var(--white);
        box-shadow: -5px 0 30px rgba(0,0,0,0.2);
        z-index: 100002 !important;
        /* off-screen हुँदा touch events capture नगर्ने */
        pointer-events: none;
        display: flex;
        flex-direction: column;
        padding: 70px 0 100px;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        scroll-behavior: smooth;
    }

    .main-nav.active {
        right: 0;
        pointer-events: auto !important;
    }

    /* Close Menu Button - Fixed inside nav */
    .close-menu {
        display: flex !important;
        position: absolute;
        top: 15px;
        right: 15px;
        background: var(--light-bg);
        border: none;
        font-size: 24px;
        cursor: pointer;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        z-index: 1000000;
        color: var(--text-color);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .close-menu:hover,
    .close-menu:active {
        background: var(--border-color);
        transform: scale(0.95);
    }

    /* Nav Menu List */
    .nav-menu {
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .nav-menu > li {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }

    /* Nav Menu Links - Proper touch target */
    .nav-menu > li > a {
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-radius: 0;
        min-height: 52px;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
        touch-action: manipulation;
        text-decoration: none;
        color: var(--text-color);
        font-weight: 500;
        transition: background 0.2s ease, color 0.2s ease;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        white-space: normal;
        font-size: 15px;
    }

    .nav-menu > li > a:hover,
    .nav-menu > li > a:active,
    .nav-menu > li.active > a {
        background: rgba(26, 95, 42, 0.05);
        color: var(--primary-color);
    }

    /* Dropdown Sub-menu */
    .nav-menu .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        max-height: 0;
        overflow: hidden;
        transform: none;
        box-shadow: none;
        background: var(--light-bg);
        padding: 0;
        border-radius: 0;
        transition: max-height 0.3s ease, padding 0.3s ease;
        list-style: none;
        margin: 0;
    }

    .nav-menu .has-dropdown.open .dropdown {
        max-height: 600px;
        padding: 8px 0;
    }

    /* Dropdown Links - Proper touch targets */
    .nav-menu .dropdown li a {
        padding: 14px 20px 14px 40px;
        display: block;
        width: 100%;
        font-size: 0.95rem;
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        text-decoration: none;
        color: var(--text-color);
        transition: background 0.2s ease, color 0.2s ease;
    }

    .nav-menu .dropdown li a:hover,
    .nav-menu .dropdown li a:active {
        background: rgba(26, 95, 42, 0.08);
        color: var(--primary-color);
    }

    /* Dropdown Arrow Icon */
    .nav-menu .has-dropdown > a i {
        transition: transform 0.3s ease;
        font-size: 12px;
    }

    .nav-menu .has-dropdown.open > a i {
        transform: rotate(180deg);
    }

    /* Mobile Menu Toggle Button */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        padding: 14px 18px;
        font-size: 22px;
        cursor: pointer;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
        background: var(--primary-color);
        color: var(--white);
        border-radius: 10px;
        border: none;
        margin-left: auto;
        min-width: 50px;
        min-height: 50px;
        transition: transform 0.2s ease, background 0.2s ease;
    }

    .mobile-menu-toggle:hover {
        background: var(--primary-light);
    }

    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }

    /* Prevent body scroll when menu is open
       position:fixed + top:-scrollYpx is set by JS to prevent iOS scroll-jump */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        /* top value is set dynamically: body.style.top = '-' + scrollY + 'px' */
    }
}

/* ==============================================
   CHATBOT HELP CENTER TEXT OVERFLOW FIX
   ============================================== */
.chatbot-title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

@media (max-width: 400px) {
    .chatbot-title span {
        font-size: 0.9rem;
        max-width: 140px;
    }

    .chatbot-header {
        padding: 12px 15px;
    }
}

/* ==============================================
   LEADERSHIP MESSAGES ON ABOUT PAGE
   ============================================== */
.leadership-messages-about .leadership-message-full {
    background: var(--white);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.leader-photo-large {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    border: 4px solid var(--primary-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.leader-photo-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-placeholder-large {
    width: 100%;
    height: 100%;
    background: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: var(--border-medium);
}

.leader-position {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.95rem;
}

.message-content-full {
    position: relative;
    padding-left: 50px;
}

.quote-icon-large {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 35px;
    color: var(--primary-color);
    opacity: 0.3;
}

.message-text-full {
    line-height: 1.8;
    color: var(--text-color);
}

.message-text-full p {
    margin-bottom: 15px;
}

@media (max-width: 767px) {
    .message-content-full {
        padding-left: 0;
        padding-top: 40px;
    }

    .quote-icon-large {
        left: 50%;
        transform: translateX(-50%);
    }

    .leader-photo-large {
        width: 120px;
        height: 120px;
    }
}

/* ==============================================
   INSTITUTIONAL PROFILE SECTION
   ============================================== */
.institutional-profile-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 15px 0;
}

.institutional-profile-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.profile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 600;
}

.profile-title-link {
    text-decoration: none;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 22px;
    font-size: 0.92rem;
    transition: all 0.28s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.profile-title-link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.profile-title-link i {
    color: #8fd36b;
    font-size: 1rem;
    transition: transform 0.28s ease, color 0.28s ease;
}

.profile-title-link:hover i {
    color: #b4ef8f;
    transform: rotate(-8deg) scale(1.04);
}

.profile-title i {
    font-size: 1.3rem;
    color: var(--secondary-color);
}

.profile-reports {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.report-quick-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 25px;
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    position: relative;
}

.report-quick-link:hover {
    background: var(--white);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.report-quick-link i {
    font-size: 1rem;
}

.report-quick-link .latest-badge {
    position: absolute;
    top: -8px;
    right: -5px;
    background: #ff4757;
    color: var(--white);
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    animation: pulse 2s infinite;
}

.profile-title-link .latest-badge {
    position: absolute;
    top: -8px;
    right: -5px;
    background: #ff4757;
    color: var(--white);
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.report-quick-link.monthly:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.report-quick-link.annual:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

@media (max-width: 767px) {
    .institutional-profile-bar {
        flex-direction: column;
        text-align: center;
    }

    .profile-reports {
        justify-content: center;
    }

    .report-quick-link {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .report-quick-link span {
        display: none;
    }

    .report-quick-link {
        padding: 10px 12px;
        border-radius: 50%;
    }

    .report-quick-link i {
        font-size: 1.1rem;
    }
}

/* ==============================================
   CTA SECTION BUTTONS
   ============================================== */
.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

@media (max-width: 991px) {
    .cta-buttons {
        justify-content: center;
    }
}

.cta-section .btn-outline-light {
    border: 2px solid rgba(255,255,255,0.8);
}

.cta-section .btn-outline-light:hover {
    background: rgba(255,255,255,0.1);
    color: var(--white);
}

/* ==============================================
   LOGO SLOGAN ONLY (No name in header)
   ============================================== */
.logo-text {
    max-width: 250px;
}

.logo-slogan {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 576px) {
    .logo-slogan {
        font-size: 0.75rem;
    }

    .logo-text {
        max-width: 180px;
    }
}

/* ==============================================
   USEFUL LINKS FLOATING BUTTON
   ============================================== */
.useful-links-float {
    position: fixed;
    right: 18px;
    left: auto;
    bottom: 124px;
    z-index: 9985;
}

.useful-links-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 20px rgba(52, 152, 219, 0.4);
    transition: all 0.3s ease;
}

.useful-links-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(52, 152, 219, 0.5);
}

.useful-links-popup-box {
    position: absolute;
    bottom: 50px;
    right: 0;
    left: auto;
    width: 270px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s ease;
    overflow: hidden;
}

.useful-links-popup-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.useful-links-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    color: var(--white);
}

.useful-links-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.useful-links-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: var(--white);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.useful-links-close:hover {
    background: rgba(255,255,255,0.3);
}

.useful-links-body {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 0;
}

.useful-link-row {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

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

.useful-link-row:hover {
    background: var(--light-bg);
    color: var(--primary-color);
}

.useful-link-row i:first-child {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-bg);
    border-radius: 8px;
    font-size: 14px;
    color: var(--primary-color);
    margin-right: 12px;
    flex-shrink: 0;
}

.useful-link-row span {
    flex: 1;
    font-size: 0.9rem;
}

.useful-link-row .link-arrow {
    font-size: 12px;
    color: var(--text-light);
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s ease;
}

.useful-link-row:hover .link-arrow {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 576px) {
    .useful-links-float {
        right: 12px;
        left: auto;
        bottom: 175px;
    }

    .useful-links-toggle {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .useful-links-popup-box {
        width: calc(100vw - 30px);
        max-width: 280px;
        right: 0;
        left: auto;
    }
}

/* ==============================================
   LEADERSHIP PROFILE CARDS - 4 Card Grid
   ============================================== */
.leadership-profile-card {
    background: var(--white);
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
}

.leadership-profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-color);
}

.leadership-profile-card.chairman-card::before {
    background: linear-gradient(90deg, #1a5928, var(--primary-light));
}

.leadership-profile-card.ceo-card::before {
    background: linear-gradient(90deg, var(--primary-light), #4caf50);
}

.leadership-profile-card.info-officer::before {
    background: linear-gradient(90deg, #1976d2, #42a5f5);
}

.leadership-profile-card.grievance-officer::before {
    background: linear-gradient(90deg, #f57c00, #ffb74d);
}

.leadership-profile-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 45px rgba(0,0,0,0.15);
}

.leadership-profile-card .profile-photo {
    width: 110px;
    height: 110px;
    margin: 0 auto 18px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--primary-light);
    box-shadow: 0 5px 20px rgba(26, 95, 42, 0.2);
    flex-shrink: 0;
}

.leadership-profile-card .profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leadership-profile-card .photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 40px;
}

.leadership-profile-card .profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.leadership-profile-card .profile-info h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 8px;
    line-height: 1.3;
}

.leadership-profile-card .profile-position {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-green10), var(--primary-green20));
    color: var(--primary-color);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 12px;
}

.leadership-profile-card.info-officer .profile-position {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: var(--secondary-color, #c0392b);
}

.leadership-profile-card.grievance-officer .profile-position {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    color: #e65100;
}

.leadership-profile-card .profile-message {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.leadership-profile-card .officer-contact-info {
    margin-top: 10px;
}

.leadership-profile-card .officer-contact-info a {
    display: block;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 5px;
    transition: color 0.3s;
}

.leadership-profile-card .officer-contact-info a:hover {
    color: var(--primary-color);
}

.leadership-profile-card .officer-contact-info a i {
    margin-right: 6px;
    color: var(--primary-light);
    width: 16px;
}

.leadership-profile-card .profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.leadership-profile-card .profile-btn:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(26, 95, 42, 0.3);
    color: var(--white);
}

.leadership-profile-card .officer-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #1976d2, #42a5f5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(25, 118, 210, 0.3);
}

.leadership-profile-card .officer-badge.grievance {
    background: linear-gradient(135deg, #f57c00, #ffb74d);
    box-shadow: 0 3px 10px rgba(245, 124, 0, 0.3);
}

@media (max-width: 991px) {
    .leadership-profile-card {
        padding: 20px 15px;
    }
    .leadership-profile-card .profile-photo {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 575px) {
    .leadership-profile-card .profile-info h4 {
        font-size: 0.95rem;
    }
}

/* ==============================================
   SECTION HEADER CONSISTENCY - Uniform Styling
   ============================================== */
.section-header {
    margin-bottom: 50px;
    position: relative;
}

.section-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
    position: relative;
    display: block; /* block — badge सँग overlap नहोस् */
}

.section-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-header h3 i {
    font-size: 1.2rem;
}

.section-badge-wrap {
    margin-bottom: 15px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(40, 167, 69, 0.1));
    color: var(--primary-color);
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(26, 95, 42, 0.15);
}

.section-divider {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
    border-radius: 2px;
    margin: 15px auto 20px;
    position: relative;
}

.section-divider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: var(--secondary-color);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.2);
}

.section-header p {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-top: 10px;
}

/* ==============================================
   INTEREST RATE TABLE - Improved Row Spacing
   ============================================== */
.rate-card .table td {
    padding: 14px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    transition: background 0.2s ease;
}

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

.rate-card .table tr:hover td {
    background: rgba(26, 95, 42, 0.04);
}

.rate-card .table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}

.rate-card .table tbody tr:last-child {
    border-bottom: none;
}

/* ==============================================
   MOBILE APP SECTION - Text Clarity Fix
   ============================================== */
.mobile-app-section .app-tagline {
    font-size: 1.25rem !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    margin-bottom: 15px;
}

.mobile-app-section .app-description {
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.7;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.mobile-app-section h2,
.mobile-app-section h3 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.mobile-app-section p {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ==============================================
   NEWS TICKER ALIGNMENT FIX
   ============================================== */
.notice-ticker {
    background: #fff8e1;
    border-bottom: 2px solid var(--secondary-color);
    padding: 0;
    overflow: hidden;
}

.notice-ticker .container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.ticker-wrapper {
    display: flex;
    align-items: stretch;
    margin-left: -15px;
    margin-right: -15px;
    position: relative;
}

.ticker-label {
    background: var(--primary-color);
    color: var(--white);
    padding: 5px 24px 5px 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    position: relative;
    flex-shrink: 0;
    margin-left: 15px;
}

.ticker-label::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 0;
    border-style: solid;
    border-width: 15px 0 15px 12px;
    border-color: transparent transparent transparent var(--primary-color);
}

.ticker-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 22px;
    margin-left: 0;
}

/* ==============================================
   CAREER PAGE - Grid Layout and Search
   ============================================== */
.career-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

@media (max-width: 991px) {
    .career-grid {
        grid-template-columns: 1fr;
    }
}

.career-search-box {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    margin-bottom: 25px;
}

.career-search-box .search-input-wrapper {
    display: flex;
    gap: 10px;
}

.career-search-box input {
    flex: 1;
    padding: 12px 18px;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.career-search-box input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.1);
}

.career-search-box .btn {
    padding: 12px 25px;
}

.job-card {
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 25px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}

.job-card.deadline-passed {
    opacity: 0.7;
    background: var(--light-card);
}

.job-card .job-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.job-card .job-header h4 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-color);
    line-height: 1.3;
}

.job-card .job-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.job-type {
    display: inline-block;
    padding: 5px 12px;
    background: linear-gradient(135deg, var(--primary-green10), var(--primary-green20));
    color: var(--primary-color);
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 500;
}

.deadline-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: 500;
}

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

.deadline-badge.expired {
    background: #f8d7da;
    color: #721c24;
}

.job-details ul {
    list-style: none;
    padding: 0;
    margin: 0 0 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.job-details li {
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

.job-details li i {
    color: var(--primary-light);
}

.job-description {
    flex: 1;
    margin-bottom: 15px;
}

.job-description p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
}

.job-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.job-actions .btn {
    padding: 10px 18px;
    font-size: 0.85rem;
}

/* ==============================================
   DATE INPUT DROPDOWN STYLES
   ============================================== */
.date-dropdown-group {
    display: flex;
    gap: 10px;
}

.date-dropdown-group .form-select {
    flex: 1;
    padding: 12px 15px;
    font-size: 0.95rem;
}

.date-dropdown-group .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.1);
}

/* ==============================================
   COMMITTEE FILTER FIX - Show All Button Active
   ============================================== */
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-tab {
    padding: 10px 20px;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 25px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    text-decoration: none;
}

.filter-tab:hover,
.filter-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.filter-tab i {
    margin-right: 8px;
}

.empty-committee {
    background: var(--light-bg);
    border-radius: 12px;
    padding: 40px;
}

.empty-committee i {
    color: var(--border-medium);
}

/* ==============================================
   ADMIN TABLE IMPROVEMENTS
   ============================================== */
.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06);
}

.admin-table thead {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.admin-table thead th {
    padding: 16px 18px;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    border: none;
    text-align: left;
}

.admin-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.admin-table tbody tr:hover {
    background: var(--light-green);
}

.admin-table tbody td {
    padding: 14px 18px;
    vertical-align: middle;
    font-size: 0.9rem;
}

.admin-table tbody tr:last-child {
    border-bottom: none;
}

/* Admin Form Card */
.admin-form-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    overflow: hidden;
}

.admin-form-card .card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
    padding: 18px 25px;
    font-weight: 600;
}

.admin-form-card .card-body {
    padding: 25px;
}

/* ==============================================
   EMPTY STATE IMPROVEMENTS
   ============================================== */
.empty-state {
    text-align: center;
    padding: 50px 20px;
    background: var(--light-card);
    border-radius: 16px;
}

.empty-state .empty-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--primary-green10), var(--primary-green20));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.empty-state .empty-icon i {
    font-size: 40px;
    color: var(--primary-color);
}

.empty-state h4 {
    color: var(--text-color);
    margin-bottom: 10px;
}

.empty-state p {
    color: var(--text-light);
    max-width: 400px;
    margin: 0 auto;
}

/* ==============================================
   ENHANCED PUBLIC FORMS - Eye-Catching Design
   ============================================== */
.form-box-enhanced {
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.08);
    overflow: hidden;
    position: relative;
}

.form-box-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
}

.form-box-enhanced .form-header {
    background: linear-gradient(135deg, var(--light-green), #eef7f0);
    padding: 30px;
    border-bottom: 1px solid rgba(26, 95, 42, 0.1);
}

.form-box-enhanced .form-header h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-box-enhanced .form-header h3 i {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 18px;
}

.form-box-enhanced .form-header p {
    margin: 10px 0 0;
    color: var(--text-light);
}

.form-box-enhanced .form-body {
    padding: 30px;
}

/* Enhanced Input Fields */
.input-enhanced {
    position: relative;
    margin-bottom: 25px;
}

.input-enhanced label {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.input-enhanced label .required {
    color: #e53935;
}

.input-enhanced .input-wrapper {
    position: relative;
}

.input-enhanced .input-wrapper i.input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    transition: all 0.3s ease;
    z-index: 1;
}

.input-enhanced .input-wrapper.has-icon input,
.input-enhanced .input-wrapper.has-icon select,
.input-enhanced .input-wrapper.has-icon textarea {
    padding-left: 50px;
}

.input-enhanced input,
.input-enhanced select,
.input-enhanced textarea {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e8e8e8;
    border-radius: 14px;
    font-size: 1rem;
    background: var(--light-card);
    transition: all 0.3s ease;
}

.input-enhanced input:hover,
.input-enhanced select:hover,
.input-enhanced textarea:hover {
    border-color: #d0d0d0;
    background: #fff;
}

.input-enhanced input:focus,
.input-enhanced select:focus,
.input-enhanced textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 5px rgba(26, 95, 42, 0.08), 0 5px 20px rgba(26, 95, 42, 0.1);
}

.input-enhanced .input-wrapper:focus-within i.input-icon {
    color: var(--primary-color);
}

.input-enhanced textarea {
    min-height: 130px;
    resize: vertical;
}

.input-enhanced .help-text {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* File Upload Enhanced */
.file-upload-enhanced {
    border: 3px dashed #d0d0d0;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    background: var(--light-card);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.file-upload-enhanced:hover {
    border-color: var(--primary-color);
    background: rgba(26, 95, 42, 0.02);
}

.file-upload-enhanced.drag-over {
    border-color: var(--primary-color);
    background: rgba(26, 95, 42, 0.05);
    transform: scale(1.02);
}

.file-upload-enhanced input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-enhanced .upload-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(40, 167, 69, 0.15));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.file-upload-enhanced .upload-icon i {
    font-size: 28px;
    color: var(--primary-color);
}

.file-upload-enhanced:hover .upload-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.file-upload-enhanced:hover .upload-icon i {
    color: var(--white);
}

.file-upload-enhanced h5 {
    margin: 0 0 8px;
    color: var(--text-color);
    font-weight: 600;
}

.file-upload-enhanced p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Enhanced Submit Button */
.btn-submit-enhanced {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 25px rgba(26, 95, 42, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-submit-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn-submit-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(26, 95, 42, 0.4);
}

.btn-submit-enhanced:hover::before {
    left: 100%;
}

.btn-submit-enhanced i {
    transition: transform 0.3s ease;
}

.btn-submit-enhanced:hover i {
    transform: translateX(5px);
}

/* Contact Form Box Enhancement */
.contact-form-box {
    background: var(--white);
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.08);
    position: relative;
}

.contact-form-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
    border-radius: 20px 20px 0 0;
}

.contact-form-box h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(26, 95, 42, 0.1);
}

/* Contact Info Box Enhancement */
.contact-info-box {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 20px;
    padding: 35px;
    color: var(--text-on-primary, #ffffff);
    height: 100%;
}

.contact-info-box h4 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.contact-info-box > p {
    opacity: 0.85;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.contact-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(255,255,255,0.15);
    transform: translateX(5px);
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.contact-details h6 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 5px;
    opacity: 0.95;
    color: rgba(255,255,255,0.92);
}

.contact-details p {
    margin: 0;
    font-size: 1rem;
    color: #ffffff;
    font-weight: 600;
    word-break: break-word;
}

.contact-details p a {
    color: #ffffff;
    text-decoration: none;
}
.contact-details p a:hover {
    color: #fef3c7;
    text-decoration: underline;
}

.contact-icon i {
    color: #fde68a;
}

/* Contact box भित्रको value text black नदेखियोस् — force readable white */
.contact-info-box .contact-details p,
.contact-info-box .contact-details p a {
    color: #ffffff !important;
}

.contact-social {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.contact-social h6 {
    font-size: 0.9rem;
    margin-bottom: 15px;
    opacity: 0.9;
}

.contact-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    color: var(--white);
    font-size: 18px;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.contact-social a:hover {
    background: var(--white);
    color: var(--primary-color);
    transform: translateY(-3px);
}

/* Office Hours Box */
.hours-box {
    background: var(--white);
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.08);
}

.hours-box h3 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 10px;
}

.hours-box h3 i {
    margin-right: 10px;
}

.hour-item {
    background: var(--light-bg);
    padding: 25px;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.hour-item:hover {
    background: var(--primary-green10);
    transform: translateY(-3px);
}

.hour-item h5 {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 8px;
}

.hour-item p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-color);
}

/* Alert Boxes Enhanced */
.alert-enhanced {
    padding: 20px 25px;
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    border: none;
}

.alert-enhanced .alert-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.alert-enhanced.alert-success {
    background: linear-gradient(135deg, var(--primary-green10), var(--primary-green20));
    color: var(--primary-light);
}

.alert-enhanced.alert-success .alert-icon {
    background: var(--primary-light);
    color: var(--white);
}

.alert-enhanced.alert-danger {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    color: #c62828;
}

.alert-enhanced.alert-danger .alert-icon {
    background: #c62828;
    color: var(--white);
}

/* Page Banner Enhanced */
.page-banner {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 28px 0 32px;
    position: relative;
    overflow: hidden;
}

.page-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.page-banner h1 {
    color: var(--white);
    font-size: 1.85rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 8px rgba(0,0,0,0.18);
    position: relative;
}

.page-banner .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    position: relative;
}

.page-banner .breadcrumb-item {
    color: rgba(255,255,255,0.7);
}

.page-banner .breadcrumb-item a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.page-banner .breadcrumb-item a:hover {
    color: var(--white);
}

.page-banner .breadcrumb-item.active {
    color: var(--secondary-color);
}

.page-banner .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.5);
}

/* Map Wrapper */
.map-wrapper {
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 -10px 50px rgba(0,0,0,0.1);
}

.map-wrapper iframe {
    display: block;
}

/* Quick Service Cards */
.quick-service-card {
    background: var(--white);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0,0,0,0.06);
    transition: all 0.4s ease;
    border: 2px solid transparent;
    height: 100%;
}

.quick-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 45px rgba(0,0,0,0.12);
    border-color: rgba(26, 95, 42, 0.15);
}

.quick-service-card .service-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(40, 167, 69, 0.15));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.4s ease;
}

.quick-service-card .service-icon i {
    font-size: 28px;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.quick-service-card:hover .service-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    transform: scale(1.1) rotate(5deg);
}

.quick-service-card:hover .service-icon i {
    color: var(--white);
}

.quick-service-card h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 10px;
}

.quick-service-card p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.quick-service-card .btn-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.quick-service-card .btn-link:hover {
    gap: 12px;
}

/* Enhanced Pagination */
.pagination-enhanced {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.pagination-enhanced .page-link {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--white);
    border: 2px solid var(--border-light);
    color: var(--text-color);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination-enhanced .page-link:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pagination-enhanced .page-link.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

/* Tooltip Enhanced */
.tooltip-enhanced {
    position: relative;
}

.tooltip-enhanced::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background: var(--text-color);
    color: var(--white);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
}

.tooltip-enhanced:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Floating Action Button */
.fab-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 24px;
    box-shadow: 0 8px 25px rgba(26, 95, 42, 0.4);
    transition: all 0.4s ease;
    z-index: 1000;
    cursor: pointer;
    text-decoration: none;
}

.fab-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 35px rgba(26, 95, 42, 0.5);
    color: var(--white);
}

/* Animated Underline Links */
.link-animated {
    position: relative;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.link-animated::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.link-animated:hover::after {
    width: 100%;
}

/* ==============================================
   ENHANCED POPUP NOTICE MODAL
   ============================================== */
.notice-popup-enhanced {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.notice-popup-enhanced.show {
    display: flex;
}

.notice-popup-enhanced .popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.notice-popup-enhanced .popup-dialog {
    position: relative;
    background: var(--white);
    border-radius: 24px;
    max-width: 500px;
    width: 100%;
    padding: 40px 35px;
    text-align: center;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.notice-popup-enhanced .popup-glow {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(26, 95, 42, 0.15), transparent 70%);
    pointer-events: none;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.notice-popup-enhanced .popup-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--off-white);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-light);
    transition: all 0.3s ease;
    z-index: 10;
}

.notice-popup-enhanced .popup-close-btn:hover {
    background: var(--border-color);
    transform: rotate(90deg);
}

.notice-popup-enhanced .popup-icon-wrap {
    margin-bottom: 20px;
}

.notice-popup-enhanced .popup-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(26, 95, 42, 0.3);
}

.notice-popup-enhanced .popup-icon.pulse {
    animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(26, 95, 42, 0.3);
    }
    50% {
        box-shadow: 0 10px 40px rgba(26, 95, 42, 0.5), 0 0 0 15px rgba(26, 95, 42, 0.1);
    }
}

.notice-popup-enhanced .popup-icon i {
    font-size: 36px;
    color: var(--white);
}

.notice-popup-enhanced .popup-header-text {
    margin-bottom: 25px;
}

.notice-popup-enhanced .popup-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(26, 95, 42, 0.1), rgba(40, 167, 69, 0.15));
    color: var(--primary-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.notice-popup-enhanced .popup-header-text h3 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-color);
}

.notice-popup-enhanced .popup-content-body {
    margin-bottom: 25px;
}

.notice-popup-enhanced .popup-content-body h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 15px;
    line-height: 1.5;
}

.notice-popup-enhanced .popup-text {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.7;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 10px;
}

.notice-popup-enhanced .popup-date {
    margin-top: 15px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.notice-popup-enhanced .popup-date i {
    margin-right: 5px;
    color: var(--primary-color);
}

.notice-popup-enhanced .popup-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notice-popup-enhanced .popup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 25px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.notice-popup-enhanced .popup-btn.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
    box-shadow: 0 5px 20px rgba(26, 95, 42, 0.3);
}

.notice-popup-enhanced .popup-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 95, 42, 0.4);
}

.notice-popup-enhanced .popup-btn.secondary {
    background: linear-gradient(135deg, var(--secondary-color), #d4a800);
    color: var(--white);
}

/* ==============================================
   POPUP NOTICE V2 - More Eye-Catching
   ============================================== */
.notice-popup-enhanced .popup-dialog.popup-v2 {
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    max-width: 480px;
}

.notice-popup-enhanced .popup-v2 .popup-top-accent {
    height: 8px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color), var(--primary-light), var(--primary-color));
    background-size: 200% 100%;
    animation: accentShimmer 3s linear infinite;
}

@keyframes accentShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.notice-popup-enhanced .popup-v2 .popup-actions-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 15px 0;
    position: relative;
}

.notice-popup-enhanced .popup-v2 .popup-doc-btn {
    width: 42px;
    height: 42px;
    border: none;
    background: linear-gradient(135deg, var(--danger), #c82333);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    text-decoration: none;
}

.notice-popup-enhanced .popup-v2 .popup-doc-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
    color: #fff;
}

.notice-popup-enhanced .popup-v2 .popup-close-btn {
    position: relative;
    top: auto;
    right: auto;
    width: 42px;
    height: 42px;
}

.notice-popup-enhanced .popup-v2 .popup-header-text {
    padding: 15px 30px 10px;
    margin-bottom: 0;
}

.notice-popup-enhanced .popup-v2 .popup-badge.animated {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(26, 95, 42, 0.25);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.notice-popup-enhanced .popup-v2 .popup-content-body {
    padding: 10px 30px 30px;
    margin-bottom: 0;
}

.notice-popup-enhanced .popup-v2 .popup-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 15px;
    line-height: 1.4;
    text-align: center;
}

.notice-popup-enhanced .popup-v2 .popup-text {
    color: #555;
    font-size: 1rem;
    line-height: 1.8;
    max-height: 180px;
    overflow-y: auto;
    text-align: center;
    padding: 0 10px;
}

.notice-popup-enhanced .popup-v2 .popup-date {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
    text-align: center;
    color: #888;
    font-size: 0.95rem;
}

.notice-popup-enhanced .popup-v2 .popup-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 12px 25px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 95, 42, 0.25);
}

.notice-popup-enhanced .popup-v2 .popup-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 95, 42, 0.35);
    color: #fff;
}

.notice-popup-enhanced .popup-v2 .popup-download-btn i {
    font-size: 1rem;
}

@media (max-width: 576px) {
    .notice-popup-enhanced .popup-dialog.popup-v2 {
        max-width: 95%;
        margin: 10px;
    }

    .notice-popup-enhanced .popup-v2 .popup-content-body,
    .notice-popup-enhanced .popup-v2 .popup-header-text {
        padding-left: 20px;
        padding-right: 20px;
    }

    .notice-popup-enhanced .popup-v2 .popup-title {
        font-size: 1.15rem;
    }

    .notice-popup-enhanced .popup-v2 .popup-text {
        font-size: 0.95rem;
    }
}

.notice-popup-enhanced .popup-btn.secondary:hover {
    transform: translateY(-3px);
}

.notice-popup-enhanced .popup-btn.outline {
    background: transparent;
    color: var(--text-light);
    border: 2px solid var(--border-color);
}

.notice-popup-enhanced .popup-btn.outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ==============================================
   POPUP NOTICE V3 - Carousel with Auto-Rotate
   ============================================== */
.notice-popup-enhanced .popup-dialog.popup-v3 {
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    max-width: 520px;
    background: #fff;
    box-shadow: 0 25px 80px rgba(0,0,0,0.25);
}

.notice-popup-enhanced .popup-v3 .popup-top-accent {
    height: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-light), var(--primary-color));
    background-size: 300% 100%;
    animation: accentShimmer 4s linear infinite;
}

.notice-popup-enhanced .popup-v3 .popup-actions-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px 0;
}

.notice-popup-enhanced .popup-v3 .popup-doc-actions {
    display: flex;
    gap: 8px;
}

.notice-popup-enhanced .popup-v3 .popup-doc-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: linear-gradient(135deg, var(--danger), #c82333);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    text-decoration: none;
}

.notice-popup-enhanced .popup-v3 .popup-doc-btn:hover {
    transform: scale(1.1);
    color: #fff;
}

.notice-popup-enhanced .popup-v3 .popup-close-btn {
    position: relative;
    top: auto;
    right: auto;
    width: 40px;
    height: 40px;
    background: var(--off-white);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.notice-popup-enhanced .popup-v3 .popup-close-btn:hover {
    background: var(--border-color);
    color: var(--text-color);
    transform: rotate(90deg);
}

/* Carousel Container */
.notice-popup-enhanced .popup-carousel {
    position: relative;
    min-height: 280px;
    overflow: hidden;
}

.notice-popup-enhanced .popup-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.notice-popup-enhanced .popup-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.notice-popup-enhanced .popup-slide.prev {
    transform: translateX(-30px);
}

.notice-popup-enhanced .popup-v3 .popup-header-text {
    padding: 15px 25px 10px;
    text-align: center;
}

.notice-popup-enhanced .popup-v3 .popup-badge.animated {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(26, 95, 42, 0.2);
}

.notice-popup-enhanced .popup-v3 .popup-content-body {
    padding: 5px 25px 20px;
    text-align: center;
}

.notice-popup-enhanced .popup-v3 .popup-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 12px;
    line-height: 1.4;
}

.notice-popup-enhanced .popup-v3 .popup-text {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.7;
    max-height: 120px;
    overflow-y: auto;
    padding: 0 5px;
}

.notice-popup-enhanced .popup-v3 .popup-date {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px dashed #e5e5e5;
    color: #888;
    font-size: 0.9rem;
}

.notice-popup-enhanced .popup-image-wrap {
    padding: 0 25px 20px;
}

.notice-popup-enhanced .popup-image-preview {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    border-radius: 18px;
    display: block;
    margin: 0 auto;
}

.notice-popup-enhanced .popup-slide.photo-only .popup-header-text,
.notice-popup-enhanced .popup-slide.photo-only .popup-content-body {
    display: none;
}

.notice-popup-enhanced .popup-v3 .popup-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    border-radius: 50%;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 95, 42, 0.25);
}

.notice-popup-enhanced .popup-v3 .popup-download-btn:hover {
    transform: scale(1.1);
    color: #fff;
}

/* Navigation Controls */
.notice-popup-enhanced .popup-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 0 25px 15px;
}

.notice-popup-enhanced .popup-nav-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--off-white);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.notice-popup-enhanced .popup-nav-btn:hover {
    background: var(--primary-color);
    color: #fff;
    transform: scale(1.1);
}

.notice-popup-enhanced .popup-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.notice-popup-enhanced .popup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-light);
    cursor: pointer;
    transition: all 0.3s ease;
}

.notice-popup-enhanced .popup-dot:hover {
    background: #bbb;
}

.notice-popup-enhanced .popup-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

/* Progress Bar */
.notice-popup-enhanced .popup-progress {
    height: 3px;
    background: var(--border-light);
    width: 100%;
}

.notice-popup-enhanced .popup-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    width: 0%;
    transition: width 0.1s linear;
}

/* Pause indicator on hover */
.notice-popup-enhanced .popup-dialog.popup-v3:hover .popup-progress-bar {
    background: #aaa;
}

@media (max-width: 576px) {
    .notice-popup-enhanced .popup-dialog.popup-v3 {
        max-width: 95%;
        margin: 10px;
    }

    .notice-popup-enhanced .popup-v3 .popup-content-body,
    .notice-popup-enhanced .popup-v3 .popup-header-text {
        padding-left: 15px;
        padding-right: 15px;
    }

    .notice-popup-enhanced .popup-v3 .popup-title {
        font-size: 1.1rem;
    }

    .notice-popup-enhanced .popup-carousel {
        min-height: 250px;
    }
}

/* ==============================================
   ENHANCED INTEREST RATES SECTION V2
   ============================================== */
.rates-box-enhanced {
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 15px 60px rgba(26, 95, 42, 0.12);
    overflow: hidden;
    height: 100%;
    border: 1px solid rgba(26, 95, 42, 0.08);
    transition: all 0.4s ease;
}

.rates-box-enhanced:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 80px rgba(26, 95, 42, 0.18);
}

.rates-box-enhanced .rates-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0d5a1c 50%, var(--primary-color) 100%);
    background-size: 200% 100%;
    animation: ratesHeaderShimmer 4s ease-in-out infinite;
    padding: 10px 16px;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

@keyframes ratesHeaderShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.rates-box-enhanced .rates-header::before {
    content: '';
    position: absolute;
    top: -80%;
    right: -20%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
    border-radius: 50%;
    animation: floatCircle 6s ease-in-out infinite;
}

.rates-box-enhanced .rates-header::after {
    content: '';
    position: absolute;
    bottom: -60%;
    left: -15%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
    border-radius: 50%;
    animation: floatCircle 8s ease-in-out infinite reverse;
}

@keyframes floatCircle {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(10px, -10px) scale(1.05); }
}

.rates-box-enhanced .rates-header h3 {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.rates-box-enhanced .rates-header h3 i {
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.rates-box-enhanced .rates-body {
    padding: 25px;
}

.rate-card-enhanced {
    background: linear-gradient(145deg, var(--light-green) 0%, #eef8f0 100%);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 20px;
    border: 1px solid rgba(26, 95, 42, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.rate-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--primary-color));
    background-size: 200% 100%;
    animation: cardTopBorder 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes cardTopBorder {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.rate-card-enhanced:last-child {
    margin-bottom: 0;
}

.rate-card-enhanced:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(26, 95, 42, 0.15);
    border-color: var(--primary-color);
}

.rate-card-enhanced:hover::before {
    opacity: 1;
}

.rate-card-enhanced h5 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(26, 95, 42, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.rate-card-enhanced h5 i {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(26, 95, 42, 0.25);
}

.rate-card-enhanced .rate-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 12px;
    margin: 0 -12px;
    border-bottom: 1px dashed rgba(0,0,0,0.08);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.rate-card-enhanced .rate-item:last-child {
    border-bottom: none;
    padding-bottom: 10px;
}

.rate-card-enhanced .rate-item:hover {
    background: rgba(26, 95, 42, 0.05);
}

.rate-card-enhanced .rate-name {
    font-size: 0.95rem;
    color: var(--text-color);
    font-weight: 500;
}

.rate-card-enhanced .rate-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    padding: 8px 16px;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(26, 95, 42, 0.25);
    min-width: 70px;
    text-align: center;
}

/* Empty state for rates */
.rate-card-enhanced .text-muted {
    color: #888 !important;
    font-style: italic;
}

/* Rates box button styling */
.rates-box-enhanced .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border: none;
    border-radius: 30px;
    padding: 12px 28px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(26, 95, 42, 0.25);
    transition: all 0.4s ease;
}

.rates-box-enhanced .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(26, 95, 42, 0.35);
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
}

.rates-box-enhanced .btn-primary i {
    transition: transform 0.3s ease;
}

.rates-box-enhanced .btn-primary:hover i {
    transform: translateX(5px);
}

/* ==============================================
   Rates & Notices: Compact sizing (homepage)
   ============================================== */
.rates-notices-section .rate-card-enhanced {
    padding: 16px !important;
    border-radius: 16px !important;
}

.rates-notices-section .rate-card-enhanced h5 {
    font-size: 0.88rem !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom-width: 1px !important;
    line-height: 1.15 !important;
}

.rates-notices-section .rate-card-enhanced .rate-item {
    padding: 8px 10px !important;
    margin: 0 -10px !important;
}

.rates-notices-section .rate-card-enhanced .rate-name {
    font-size: 0.80rem !important;
    line-height: 1.12 !important;
}

.rates-notices-section .rate-card-enhanced .rate-value {
    font-size: 0.78rem !important;
    padding: 4px 9px !important;
    border-radius: 20px !important;
    min-width: 54px !important;
    line-height: 1.05 !important;
}

.rates-notices-section .notices-box-enhanced .notices-body {
    padding: 16px !important;
}

.rates-notices-section .notice-item-enhanced {
    padding: 12px !important;
    margin-bottom: 10px !important;
    border-radius: 14px !important;
}

.rates-notices-section .notice-item-enhanced .notice-date-box {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 12px rgba(255, 193, 7, 0.22) !important;
}

.rates-notices-section .notice-item-enhanced .notice-date-box .day {
    font-size: 1.2rem !important;
}

.rates-notices-section .notice-item-enhanced .notice-date-box .month {
    font-size: 0.6rem !important;
}

.rates-notices-section .notice-item-enhanced .notice-content h6 {
    font-size: 0.78rem !important;
    margin: 0 0 5px !important;
    line-height: 1.15 !important;
}

.rates-notices-section .notice-item-enhanced .notice-content .notice-meta {
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
}

/* ==============================================
   ENHANCED NOTICES SECTION V2
   ============================================== */
.notices-box-enhanced {
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 15px 60px rgba(255, 193, 7, 0.15);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 193, 7, 0.15);
    transition: all 0.4s ease;
}

.notices-box-enhanced:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 80px rgba(255, 193, 7, 0.22);
}

.notices-box-enhanced .notices-header {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #e8a800 50%, var(--secondary-color) 100%);
    background-size: 200% 100%;
    animation: noticeHeaderShimmer 4s ease-in-out infinite;
    padding: 10px 16px;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

@keyframes noticeHeaderShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.notices-box-enhanced .notices-header::before {
    content: '';
    position: absolute;
    top: -80%;
    right: -20%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
    border-radius: 50%;
    animation: floatCircle 6s ease-in-out infinite;
}

.notices-box-enhanced .notices-header::after {
    content: '';
    position: absolute;
    bottom: -60%;
    left: -15%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
    border-radius: 50%;
    animation: floatCircle 8s ease-in-out infinite reverse;
}

.notices-box-enhanced .notices-header h3 {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.notices-box-enhanced .notices-header h3 i {
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    animation: iconPulse 2s ease-in-out infinite;
}

.notices-box-enhanced .notices-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.notices-box-enhanced .notices-list {
    flex: 1;
}

.notice-item-enhanced {
    display: flex;
    gap: 15px;
    padding: 16px;
    background: linear-gradient(145deg, #fffef8 0%, #fff9e6 100%);
    border-radius: 16px;
    margin-bottom: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 193, 7, 0.15);
    position: relative;
    overflow: hidden;
}

.notice-item-enhanced::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--secondary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.notice-item-enhanced:last-child {
    margin-bottom: 0;
}

.notice-item-enhanced:hover {
    background: linear-gradient(145deg, #fff8e1 0%, #ffecb3 100%);
    border-color: var(--secondary-color);
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.2);
}

.notice-item-enhanced:hover::before {
    opacity: 1;
}

.notice-item-enhanced .notice-date-box {
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, var(--secondary-color), #e8a800);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--white);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.notice-item-enhanced .notice-date-box .day {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
}

.notice-item-enhanced .notice-date-box .month {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.95;
}

.notice-item-enhanced .notice-content h6 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
}

.notice-item-enhanced .notice-content h6 a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.notice-item-enhanced .notice-content h6 a:hover {
    color: var(--secondary-color);
}

.notice-item-enhanced .notice-content .notice-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Final compact override for homepage notices */
.rates-notices-section .notices-box-enhanced .notice-item-enhanced .notice-content h6 {
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
    margin: 0 0 3px !important;
    font-weight: 500 !important;
}

.rates-notices-section .notices-box-enhanced .notice-item-enhanced .notice-content .notice-meta {
    font-size: 0.64rem !important;
    line-height: 1.05 !important;
}

.rates-notices-section .notices-box-enhanced .notice-item-enhanced .notice-content .notice-meta i {
    font-size: 0.58rem !important;
}

/* Notice rows: make true compact like interest rows */
.rates-notices-section .notices-box-enhanced .notice-item-enhanced {
    padding: 8px 10px !important;
    gap: 10px !important;
    border-radius: 12px !important;
    min-height: 0 !important;
}

.rates-notices-section .notices-box-enhanced .notice-item-enhanced .notice-date-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
}

.rates-notices-section .notices-box-enhanced .notice-item-enhanced .notice-date-box .day {
    font-size: 0.98rem !important;
    line-height: 1 !important;
}

.rates-notices-section .notices-box-enhanced .notice-item-enhanced .notice-date-box .month {
    font-size: 0.52rem !important;
    line-height: 1 !important;
}

.rates-notices-section .notices-box-enhanced .notice-item-enhanced .notice-content h6 a {
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
    display: block !important;
}

.notices-box-enhanced .notices-footer {
    padding: 18px 20px;
    border-top: 1px dashed rgba(255, 193, 7, 0.3);
    text-align: center;
    background: linear-gradient(180deg, transparent, rgba(255, 193, 7, 0.05));
}

.notices-box-enhanced .notices-footer .btn {
    border-radius: 25px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.notices-box-enhanced .notices-footer .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(26, 95, 42, 0.2);
}

/* Empty state styling for notices */
.notices-box-enhanced .text-center.py-4 {
    padding: 30px 20px !important;
}

.notices-box-enhanced .text-center.py-4 i {
    color: rgba(255, 193, 7, 0.4) !important;
    margin-bottom: 15px;
}

.notices-box-enhanced .text-center.py-4 p {
    color: #888;
    font-style: italic;
}

/* ==============================================
   NEW BADGE FOR MENU ITEMS
   ============================================== */
.nav-new-badge,
.tools-link-badge,
.report-quick-link .latest-badge,
.profile-title-link .latest-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--text-on-primary, #fff);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    text-transform: uppercase;
    animation: badgePulse 2s infinite;
    vertical-align: middle;
}

@keyframes badgePulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.dropdown .nav-new-badge {
    font-size: 0.6rem;
    padding: 1px 5px;
}

.tools-link-badge,
.report-quick-link .latest-badge,
.profile-title-link .latest-badge {
    border-radius: 10px;
    top: -8px;
    right: -5px;
    position: absolute;
}

.tools-link-badge {
    top: 6px;
    right: 6px;
    z-index: 2;
}

/* उप-मेनु संख्या चिन्ह — header-v2.css सँग मेल (टप बारको बिज्ञापन ब्याज जस्तै) */
.main-nav .dropdown li > a .pfl-badge.pfl-badge--submenu {
    background: var(--primary-color);
    color: #fff;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1.35;
    margin-left: 6px;
    vertical-align: middle;
}

/* ==============================================
   DATE SELECTION COMPONENT
   ============================================== */
.date-select-group {
    display: flex;
    gap: 10px;
}

.date-select-group select {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.95rem;
    background: var(--light-card);
    transition: all 0.3s ease;
    appearance: none;
    cursor: pointer;
}

.date-select-group select:hover {
    border-color: var(--border-medium);
}

.date-select-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(26, 95, 42, 0.1);
}

.date-select-wrapper {
    position: relative;
    flex: 1;
}

.date-select-wrapper select {
    width: 100%;
    padding-right: 35px;
}

.date-select-wrapper::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 575px) {
    .notice-popup-enhanced .popup-dialog {
        padding: 30px 25px;
    }

    .notice-popup-enhanced .popup-icon {
        width: 70px;
        height: 70px;
    }

    .notice-popup-enhanced .popup-icon i {
        font-size: 28px;
    }

    .rate-card-enhanced .rate-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .date-select-group {
        flex-direction: column;
    }
}

/* ==============================================
   HEADER ACTION BUTTONS (Search & Dark Mode)
   ============================================== */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 15px;
}

.header-action-btn {
    width: 42px;
    height: 42px;
    background: var(--light-bg);
    border: 2px solid transparent;
    border-radius: 12px;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 16px;
}

.header-action-btn:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* Dark Mode Toggle */
.dark-mode-toggle .fa-sun {
    display: none;
}

.dark-mode-toggle .fa-moon {
    display: block;
}

body.dark-mode .dark-mode-toggle .fa-sun {
    display: block;
}

body.dark-mode .dark-mode-toggle .fa-moon {
    display: none;
}

body.dark-mode .dark-mode-toggle {
    background: var(--text-color);
    color: var(--secondary-color);
}

/* ==============================================
   SEARCH MODAL
   ============================================== */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}

.search-modal.active {
    display: flex;
}

.search-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
}

.search-modal-content {
    position: relative;
    width: 100%;
    max-width: 650px;
    padding: 0 20px;
    animation: searchModalIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes searchModalIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.search-modal-close {
    position: absolute;
    top: -60px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.search-modal-close:hover {
    background: rgba(255,255,255,0.2);
    transform: rotate(90deg);
}

/* Search modal body — white card */
.search-modal-body {
    background: #fff;
    border-radius: 20px;
    padding: 32px 28px 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}

.search-modal-body h3,
.smb-title {
    color: var(--primary-color);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 4px;
    text-align: center;
}

/* Input wrapper — overflow visible for dropdown */
.search-input-wrapper {
    display: flex;
    align-items: center;
    background: #f5f7fa;
    border: 2px solid #e0e7ef;
    border-radius: 14px;
    overflow: visible;
    position: relative;
    transition: border-color 0.2s;
}
.search-input-wrapper:focus-within {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26,95,42,0.1);
}

.search-input {
    flex: 1;
    padding: 16px 20px;
    border: none;
    font-size: 1.1rem;
    background: transparent;
    outline: none;
    color: #222;
    min-width: 0;
}

.search-input::placeholder {
    color: #aab;
}

.search-submit {
    padding: 0 22px;
    height: 100%;
    background: var(--primary-color);
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 0 12px 12px 0;
    transition: background 0.2s;
    flex-shrink: 0;
}

.search-submit:hover {
    background: var(--primary-dark);
}

/* Mic slot: no width so flexbox layout stays intact */
#voiceBtnSlot { display: contents; }

/* Quick links (replaces old .search-suggestions inside modal) */
.search-quick-links {
    margin-top: 18px;
    text-align: center;
    font-size: 0.88rem;
    color: #888;
}
.search-quick-links span {
    margin-right: 6px;
}
.search-quick-links a {
    display: inline-block;
    padding: 5px 12px;
    margin: 3px;
    background: #f0f8f2;
    color: var(--primary-color);
    border: 1px solid var(--primary-green20);
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: all 0.2s;
}
.search-quick-links a:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Legacy .search-suggestions kept for pages that still use it */
.search-suggestions {
    margin-top: 18px;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}
.search-suggestions span { margin-right: 8px; }
.search-suggestions a {
    display: inline-block;
    padding: 5px 12px; margin: 4px;
    background: #f0f8f2; color: var(--primary-color);
    border: 1px solid var(--primary-green20); border-radius: 20px;
    text-decoration: none; transition: all 0.2s;
}
.search-suggestions a:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* ==============================================
   NEW BADGE FOR MENU ITEMS AND SERVICES
   ============================================== */
.nav-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    background: var(--secondary-color);
    color: var(--white);
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 6px;
    animation: newBadgePulse 2s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes newBadgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.service-card {
    position: relative;
}

.service-card .new-badge,
.service-item .new-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 12px;
    background: var(--secondary-color);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb,26,95,42), 0.2);
    animation: newBadgePulse 2s ease-in-out infinite;
    z-index: 10;
}

/* View All Services Button */
.view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.view-all-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(26, 95, 42, 0.2);
}

.view-all-btn .service-count {
    background: rgba(26, 95, 42, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
}

.btn-outline-primary:hover .service-count {
    background: rgba(255, 255, 255, 0.2);
}

/* ==============================================
   DARK MODE BASIC STYLES
   ============================================== */
body.dark-mode {
    --bg-color: var(--dark-bg-deep);
    --text-color: var(--border-color);
    --card-bg: var(--dark-bg);
    background-color: var(--bg-color);
    color: var(--text-color);
}

body.dark-mode .main-header {
    background: var(--dark-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

body.dark-mode .nav-menu > li > a {
    color: var(--border-color);
}

body.dark-mode .nav-menu > li > a:hover,
body.dark-mode .nav-menu > li.active > a {
    background: var(--primary-color);
    color: white;
}

body.dark-mode .top-bar {
    background: linear-gradient(135deg, var(--dark-bg-deep) 0%, var(--dark-bg) 100%);
}

body.dark-mode .card,
body.dark-mode .service-card,
body.dark-mode .rate-card-enhanced {
    background: var(--dark-bg);
    border-color: rgba(255,255,255,.08);
}

body.dark-mode .main-footer {
    background: linear-gradient(180deg, var(--dark-bg-deep) 0%, var(--dark-bg) 100%);
}

body.dark-mode .section-padding {
    background-color: var(--dark-bg-deep);
}

body.dark-mode .bg-light {
    background-color: var(--dark-bg) !important;
}

body.dark-mode .notice-ticker {
    background: var(--dark-bg);
}

/* Dark Mode — Form inputs, tables, modals */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="date"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: #252545;
    border-color: #3a3a6a;
    color: var(--border-color);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode textarea:focus {
    background-color: #2a2a50;
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(26, 95, 42, 0.25);
}

body.dark-mode .form-control::placeholder,
body.dark-mode textarea::placeholder {
    color: #8888aa;
}

body.dark-mode table,
body.dark-mode .table {
    color: var(--border-color);
}

body.dark-mode .table td,
body.dark-mode .table th {
    border-color: #2a2a4a;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.04);
}

body.dark-mode .dropdown-menu,
body.dark-mode .nav-menu .dropdown {
    background: var(--dark-bg);
    border-color: rgba(255,255,255,.08);
}

body.dark-mode .nav-menu .dropdown li a {
    color: var(--border-color);
}

body.dark-mode .nav-menu .dropdown li a:hover {
    background: var(--primary-color);
    color: #fff;
}

body.dark-mode .modal-content,
body.dark-mode .chatbot-box,
body.dark-mode .useful-links-popup-box {
    background: var(--dark-bg);
    color: var(--border-color);
}

body.dark-mode .modal-header,
body.dark-mode .chatbot-header {
    background: #0f0f1a;
    border-bottom-color: #2a2a4a;
}

body.dark-mode .chatbot-body {
    background: var(--dark-bg-deep);
}

body.dark-mode .faq-question {
    background: #252545;
    color: var(--border-color);
}

body.dark-mode .page-banner {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a2e1a 100%);
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #e8e8e8;
}

body.dark-mode p, body.dark-mode .text-muted {
    color: #aaaacc !important;
}

body.dark-mode .alert-info {
    background-color: #1a2a3a;
    border-color: #2a4a6a;
    color: #8ab8d8;
}

body.dark-mode .tool-card,
body.dark-mode .form-card,
body.dark-mode .result-box,
body.dark-mode .success-card {
    background: var(--dark-bg);
    border-color: rgba(255,255,255,.08);
    color: var(--border-color);
}

/* Mobile responsive for header actions */
@media (max-width: 991px) {
    .header-actions {
        display: none !important;
    }
}

@media (max-width: 575px) {
    .search-modal-content {
        padding: 0 12px;
    }
    .search-modal {
        padding-top: 8vh;
        align-items: flex-start;
    }
    .search-modal-close {
        top: -48px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .search-modal-body {
        padding: 24px 16px 18px;
        border-radius: 16px;
    }
    .search-input {
        padding: 14px 16px;
        font-size: 1rem;
    }
    .search-submit {
        padding: 0 16px;
        font-size: 1rem;
    }
}

/* ==============================================
   MOBILE MENU FIX - ENHANCED TOUCH SUPPORT
   ============================================== */
@media (max-width: 991px) {
    .mobile-menu-toggle {
        display: flex !important;
        z-index: 100000 !important;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        cursor: pointer;
    }

    .main-nav {
        z-index: 100002 !important;
    }

    .menu-overlay {
        z-index: 100001 !important;
        /* backdrop-filter REMOVE गरियो: iOS/Safari मा blur र click issue गर्छ */
    }

    .menu-overlay.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Ensure dropdown items are clickable — nav भन्दा माथि राख्नु पर्दैन,
       nav नै 100002 मा छ, dropdown त्यसकै child हो */
    .nav-menu .dropdown {
        z-index: auto;
    }

    .has-dropdown > a {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        cursor: pointer;
    }

    /* Dropdown chevron icon styling */
    .has-dropdown > a i.fa-chevron-down {
        pointer-events: none;
        margin-left: auto;
        transition: transform 0.3s ease;
    }

    /* Menu open: body scroll बन्द — तर position:fixed र touch-action:none
       REMOVE गरियो: यिनीहरूले menu भित्रको scroll र touch event kill गर्थे */
    body.menu-open {
        overflow: hidden !important;
    }

    /* Overlay click गर्न मिल्ने cursor */
    body.menu-open .menu-overlay {
        cursor: pointer;
    }
}

/* ==============================================
   MENU IMPROVEMENTS - SPACING AND HOVER FIXES
   ============================================== */

/* Better menu item spacing on desktop */
@media (min-width: 992px) {
    .nav-menu {
        gap: 2px;
    }

    .nav-menu > li {
        margin: 0 1px;
    }

    .nav-menu > li > a {
        padding: 10px 14px;
        margin: 0 2px;
        border-radius: 6px;
        font-size: 14px;
        transition: all 0.25s ease;
    }

    /* Hover effect with smooth transition - no color bleeding */
    .nav-menu > li > a:hover,
    .nav-menu > li.active > a {
        background: var(--primary-color);
        color: #fff;
        box-shadow: 0 2px 8px rgba(26, 95, 42, 0.3);
    }

    /* Dropdown menu styling */
    .nav-menu .dropdown {
        min-width: 220px;
        border-radius: 10px;
        padding: 8px 0;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* Dropdown item styling */
    .nav-menu .dropdown li a {
        padding: 10px 18px;
        font-size: 13px;
        font-weight: 400;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.2s ease;
        border-radius: 0;
        margin: 0;
    }

    /* Smaller dropdown icons */
    .nav-menu .dropdown li a i {
        font-size: 11px;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.6;
        flex-shrink: 0;
    }

    .nav-menu .dropdown li a:hover {
        background: var(--light-bg);
        color: var(--primary-color);
        padding-left: 22px;
    }

    .nav-menu .dropdown li a:hover i {
        opacity: 1;
        color: var(--primary-color);
    }
}

/* Quick status form styling for admin */
.quick-status-form {
    background: var(--light-bg);
    border: 1px solid #e9ecef;
}

.quick-status-form .form-label {
    margin-bottom: 4px;
    color: #495057;
}

.quick-status-form .form-select-sm,
.quick-status-form .form-control-sm {
    font-size: 13px;
}

/* ==============================================
   INTEREST RATES & NOTICES - COMPACT STYLING
   ============================================== */

/* Reduce section header spacing */
.rates-notices-section .section-header {
    margin-bottom: 30px;
}

.rates-notices-section .section-header h2 {
    font-size: 1.75rem;
}

.rates-notices-section .section-header p {
    font-size: 0.95rem;
    margin-top: 8px;
}

/* Compact rates box */
.rates-box, .notices-box {
    padding: 20px;
}

/* Compact rate card enhanced */
.rate-card-enhanced {
    padding: 16px;
    margin-bottom: 14px;
    border-radius: 14px;
}

.rate-card-enhanced h5 {
    font-size: 0.95rem;
    margin-bottom: 12px;
    padding-bottom: 10px;
    gap: 8px;
}

.rate-card-enhanced h5 i {
    width: 32px;
    height: 32px;
    font-size: 14px;
    border-radius: 8px;
}

.rate-card-enhanced .rate-item {
    padding: 10px 8px;
    margin: 0 -8px;
}

.rate-card-enhanced .rate-name {
    font-size: 0.85rem;
}

.rate-card-enhanced .rate-value {
    font-size: 0.95rem;
    padding: 5px 12px;
    border-radius: 15px;
    min-width: 60px;
}

/* Compact notices */
.notices-box h3 {
    font-size: 1rem;
}

.notices-list {
    max-height: 300px;
}

.notice-item {
    padding: 12px 15px;
}

.notice-item h6 {
    font-size: 0.9rem;
}

.notice-item .notice-date {
    font-size: 0.75rem;
}

.notice-item .notice-meta span {
    font-size: 0.75rem;
}

/* Section badge smaller */
.section-badge {
    font-size: 0.8rem;
    padding: 6px 14px;
}

html {
    font-size: 16px;
}

body, button, input, select, textarea {
    font-size: 1rem;
    line-height: 1.65;
}

.main-nav a,
.dropdown-menu a,
.dropdown-menu .dropdown-item,
.navbar-nav .nav-link {
    font-size: 0.98rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
}

.dropdown-menu {
    min-width: 250px;
}

.dropdown-menu a,
.dropdown-item {
    padding: 10px 16px;
    white-space: normal;
}

.btn {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.digital-service-section {
    background: linear-gradient(180deg, #f4fbf6 0%, #ffffff 100%);
}

.digital-info-card,
.digital-form-card,
.success-card {
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 18px 45px rgba(26, 95, 42, 0.12);
    border: 1px solid rgba(26, 95, 42, 0.08);
}

.sticky-top-card {
    top: 95px;
    z-index: 2;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    background: rgba(26, 95, 42, 0.1);
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 700;
    margin-bottom: 16px;
}

.digital-service-list {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.digital-service-pill {
    border: 1px solid rgba(26, 95, 42, 0.14);
    background: #f8fff9;
    border-radius: 14px;
    padding: 13px 14px;
    text-align: left;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.25s ease;
}

.digital-service-pill:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateX(4px);
    box-shadow: 0 10px 24px rgba(26, 95, 42, 0.2);
}

.digital-service-pill i {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 95, 42, 0.12);
    color: var(--primary-color);
}

.digital-service-pill:hover i {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

.form-icon,
.success-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    font-size: 32px;
    margin-bottom: 18px;
    box-shadow: 0 14px 28px rgba(26, 95, 42, 0.22);
}

.conditional-fields {
    display: none;
    padding: 16px;
    border-radius: 14px;
    background: #f8faf9;
    border: 1px dashed rgba(26, 95, 42, 0.25);
    margin-bottom: 15px;
}

.tracking-info {
    background: #f4fbf6;
    border: 1px dashed var(--primary-color);
    border-radius: 16px;
    padding: 18px;
    margin: 22px 0;
}

.tracking-id {
    color: var(--primary-color);
    letter-spacing: 0.04em;
}

.verification-box {
    background: #f8fff9;
    border: 1px solid rgba(26, 95, 42, 0.18);
    border-radius: 16px;
    padding: 18px;
}

@media (max-width: 767px) {
    html {
        font-size: 15px;
    }

    .digital-info-card,
    .digital-form-card,
    .success-card {
        padding: 20px;
    }
}

/* ==============================================
   सबै Public Forms को Eye-Catching डिजाइन
   ==============================================
   यो section ले website को सबै user-facing forms
   (KYC, Loan, Account, Appointment, Contact आदि) को
   look control गर्छ।

   यहाँ एकैठाउँ बदल्दा सबै forms मा एकसाथ असर पर्छ।
   ============================================== */

/* --- Form को बाहिरी box (container) को style ---
   यो list मा website का सबै form pages छन्।
   नयाँ form थप्न यहाँ class name थप्नुहोस्। */
.grievance-form-box,
.appointment-form-box,
.account-form-box,
.digital-form-card,
.kyc-form-box,
.loan-form-box,
.claim-form-card,
.vendor-form-card,
.contact-form-box {
    background: #fff;                                   /* form को background रंग */
    border: 0 !important;
    border-radius: 20px;                                /* कुना कति गोलो: 0 = सिधा, 20 = गोलो */
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);          /* form को छाया: हटाउन 'none' लेख्नुहोस् */
    padding: 40px;                                      /* form भित्रको spacing: बढाउन 50px, घटाउन 24px */
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

/* --- Form को माथि चल्ने रंगीन पट्टी (shimmer line) ---
   height बदलेर मोटो/पातलो बनाउन सकिन्छ
   रंग बदल्न --primary-color र --secondary-color variables हेर्नुहोस् */
.grievance-form-box::before,
.appointment-form-box::before,
.account-form-box::before,
.digital-form-card::before,
.kyc-form-box::before,
.loan-form-box::before,
.claim-form-card::before,
.vendor-form-card::before,
.contact-form-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;                                        /* पट्टीको मोटाई: 5px = पातलो, 8px = मोटो */
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-color));
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;              /* चल्ने speed: 3s = सामान्य, 1s = छिटो */
}

/* --- Form header मा देखिने icon box को style ---
   icon को size: width/height बदल्नुहोस् (80px = ठूलो, 60px = सानो)
   icon को रंग: background मा gradient color बदल्नुहोस्
   icon को shape: border-radius 50% = गोलो circle, 20px = गोलिएको वर्ग */
.grievance-form-box .form-header i,
.grievance-form-box .form-header .form-icon,
.appointment-form-box .form-header i,
.appointment-form-box .form-header .form-icon,
.account-form-box .form-header i,
.account-form-box .form-header .form-icon,
.digital-form-card .form-header .form-icon,
.kyc-form-box .form-header .form-icon,
.loan-form-box .form-header .form-icon,
.claim-form-card .form-header .form-icon,
.vendor-form-card .form-header .form-icon,
.contact-form-box .form-header .form-icon {
    width: 80px;                                        /* icon box को चौडाई */
    height: 80px;                                       /* icon box को उचाई */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light, #27ae60));
    border-radius: 20px;                                /* 50% = circle, 20px = rounded square */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    margin: 0 auto 20px;                                /* icon box तल कति space */
    box-shadow: 0 10px 30px rgba(26, 95, 42, 0.3);
    transition: all 0.4s ease;
}

/* --- Icon को size (icon box भित्रको symbol) --- */
.grievance-form-box .form-header .form-icon i,
.appointment-form-box .form-header .form-icon i,
.account-form-box .form-header .form-icon i,
.digital-form-card .form-header .form-icon i,
.kyc-form-box .form-header .form-icon i,
.loan-form-box .form-header .form-icon i,
.claim-form-card .form-header .form-icon i,
.vendor-form-card .form-header .form-icon i,
.contact-form-box .form-header .form-icon i {
    font-size: 34px;
    color: #fff;
}
/* --- Form मा mouse राख्दा icon हल्लिने effect ---
   हटाउन यो पूरो block delete गर्नुहोस् */
.grievance-form-box:hover .form-header i,
.grievance-form-box:hover .form-header .form-icon,
.appointment-form-box:hover .form-header i,
.appointment-form-box:hover .form-header .form-icon,
.account-form-box:hover .form-header i,
.account-form-box:hover .form-header .form-icon,
.digital-form-card:hover .form-header .form-icon,
.kyc-form-box:hover .form-header .form-icon,
.loan-form-box:hover .form-header .form-icon,
.claim-form-card:hover .form-header .form-icon,
.vendor-form-card:hover .form-header .form-icon,
.contact-form-box:hover .form-header .form-icon {
    transform: scale(1.06) rotate(5deg);                /* hover मा कति घुम्ने: 5deg = थोडा, 0deg = नघुम्ने */
    box-shadow: 0 15px 40px rgba(26, 95, 42, 0.4);
}

/* --- Form को title (शीर्षक h3) को style --- */
.grievance-form-box .form-header h3,
.appointment-form-box .form-header h3,
.account-form-box .form-header h3,
.kyc-form-box .form-header h3,
.loan-form-box .form-header h3,
.digital-form-card .form-header h3,
.claim-form-card .form-header h3,
.vendor-form-card .form-header h3,
.contact-form-box .form-header h3 {
    color: var(--primary-color);                        /* title को रंग — primary color */
    font-size: 1.5rem;                                  /* size: 1.5rem = सामान्य, 2rem = ठूलो */
    font-weight: 700;                                   /* 700 = मोटो, 400 = सामान्य */
    margin-bottom: 8px;
}

/* --- Form को description (शीर्षक तलको सानो text) --- */
.grievance-form-box .form-header p,
.appointment-form-box .form-header p,
.account-form-box .form-header p,
.kyc-form-box .form-header p,
.loan-form-box .form-header p,
.digital-form-card .form-header p,
.claim-form-card .form-header p,
.vendor-form-card .form-header p,
.contact-form-box .form-header p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Form Section — সবै forms मा एकै premium section look */
.grievance-form .form-section,
.appointment-form .form-section,
.account-form .form-section,
.digital-service-form .form-section,
.kyc-form .form-section,
.loan-form .form-section,
.claim-form .form-section,
.vendor-form .form-section,
.contact-form .form-section,
.digital-form-card .row {
    background: linear-gradient(145deg, #fafffe, #f5faf6); /* section को background: हटाउन 'none' लेख्नुहोस् */
    border-radius: 14px;                                    /* section को गोलो कुना */
    padding: 26px 28px;                                     /* section भित्रको spacing */
    margin-bottom: 22px;                                    /* sections बीचको दुरी */
    border: 1px solid rgba(26, 95, 42, 0.07);
    border-left: 4px solid var(--primary-color);            /* बायाँ हरियो रेखा: 4px = मोटाई */
    position: relative;
    transition: all 0.3s ease;
}
.digital-form-card .row { border: none; background: none; padding: 0; }

/* --- Section मा mouse राख्दा थोडा दायाँ सर्ने effect ---
   हटाउन यो block delete गर्नुहोस् */
.grievance-form .form-section:hover,
.appointment-form .form-section:hover,
.account-form .form-section:hover,
.digital-service-form .form-section:hover {
    box-shadow: 0 5px 20px rgba(26, 95, 42, 0.08);
    transform: translateX(4px);
    border-left-color: var(--secondary-color, var(--primary-light));
}

/* Section h5 header */
.grievance-form .form-section h5,
.appointment-form .form-section h5,
.account-form .form-section h5,
.digital-service-form .form-section h5 {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px dashed rgba(26, 95, 42, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
}
.grievance-form .form-section h5 i,
.appointment-form .form-section h5 i,
.account-form .form-section h5 i,
.digital-service-form .form-section h5 i {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, rgba(26,95,42,0.1), rgba(26,95,42,0.16));
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 15px;
    flex-shrink: 0;
}

/* Form Labels */
.grievance-form .form-label,
.appointment-form .form-label,
.account-form .form-label,
.digital-form-card .form-label,
.loan-form .form-label {
    font-weight: 600;
    color: #2d2d2d;
    font-size: 0.88rem;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Form Controls */
.grievance-form .form-control,
.grievance-form .form-select,
.appointment-form .form-control,
.appointment-form .form-select,
.account-form .form-control,
.account-form .form-select,
.digital-form-card .form-control,
.digital-form-card .form-select {
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 0.94rem;
    background: #fff;
    transition: all 0.3s ease;
}
.grievance-form .form-control:focus,
.grievance-form .form-select:focus,
.appointment-form .form-control:focus,
.appointment-form .form-select:focus,
.account-form .form-control:focus,
.account-form .form-select:focus,
.digital-form-card .form-control:focus,
.digital-form-card .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.1);
    background: #fff;
    outline: none;
}

/* Submit Button */
.grievance-form .btn-submit,
.appointment-form .btn-submit,
.account-form .btn-submit,
.digital-form-card .btn-submit,
.kyc-form .btn-submit,
.loan-form .btn-submit {
    padding: 14px 50px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color, var(--primary-light)));
    border: none;
    color: #fff;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 25px rgba(26, 95, 42, 0.3);
    transition: all 0.3s ease;
}
.grievance-form .btn-submit:hover,
.appointment-form .btn-submit:hover,
.account-form .btn-submit:hover,
.digital-form-card .btn-submit:hover,
.kyc-form .btn-submit:hover,
.loan-form .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(26, 95, 42, 0.4);
}

/* Dark Mode support for enhanced forms */
body.dark-mode .grievance-form .form-section,
body.dark-mode .appointment-form .form-section,
body.dark-mode .account-form .form-section,
body.dark-mode .digital-service-form .form-section {
    background: linear-gradient(145deg, #1e2a20, #1a2418);
    border-color: rgba(40, 167, 69, 0.2);
    border-left-color: var(--secondary-color, var(--primary-light));
}
body.dark-mode .grievance-form .form-label,
body.dark-mode .appointment-form .form-label,
body.dark-mode .account-form .form-label,
body.dark-mode .digital-form-card .form-label {
    color: #c8d8cb;
}
body.dark-mode .grievance-form .form-control,
body.dark-mode .grievance-form .form-select,
body.dark-mode .appointment-form .form-control,
body.dark-mode .appointment-form .form-select,
body.dark-mode .account-form .form-control,
body.dark-mode .account-form .form-select,
body.dark-mode .digital-form-card .form-control,
body.dark-mode .digital-form-card .form-select {
    background: #1e2a20;
    border-color: #2d4030;
    color: #dde8de;
}

@media (max-width: 768px) {
    .grievance-form-box,
    .appointment-form-box,
    .account-form-box,
    .digital-form-card,
    .loan-form-box,
    .claim-form-card,
    .vendor-form-card,
    .contact-form-box { padding: 22px; }
    .grievance-form .form-section,
    .appointment-form .form-section,
    .account-form .form-section,
    .claim-form .form-section,
    .vendor-form .form-section,
    .contact-form .form-section { padding: 18px; }
}

/* ==============================================
   GLOBAL SCROLL REVEAL ANIMATIONS
   footer.php को IntersectionObserver ले use गर्छ।

   Animation speed बदल्न: transition duration बदल्नुहोस्
   Animation type थप्न: .sr-fade-* pattern follow गर्नुहोस्
   ============================================== */

/* --- Hidden state (scroll गर्नु अघि) --- */
.sr-hidden {
    transition-property: opacity, transform !important;
    transition-duration: 0.65s !important;           /* animation को speed: 0.65s = सामान्य */
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important; /* smooth easing */
    will-change: opacity, transform;
}

/* --- Visible state (scroll गरेपछि) --- */
.sr-hidden.sr-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* --- Animation type: fade-up (तलबाट माथि) --- */
.sr-hidden.sr-fade-up {
    opacity: 0;
    transform: translateY(32px);                     /* कति तलबाट: 32px = सामान्य, 60px = धेरै तल */
}

/* --- Animation type: zoom-in (सानोबाट ठूलो) --- */
.sr-hidden.sr-zoom-in {
    opacity: 0;
    transform: scale(0.92);                          /* 0.92 = थोडा सानो, 0.8 = धेरै सानो */
}

/* --- Animation type: fade-left (दायाँबाट) --- */
.sr-hidden.sr-fade-left {
    opacity: 0;
    transform: translateX(28px);                     /* कति दायाँबाट: 28px = सामान्य */
}

/* --- Animation type: fade-right (बायाँबाट) --- */
.sr-hidden.sr-fade-right {
    opacity: 0;
    transform: translateX(-28px);
}

/* --- Reduced motion: animation-sensitive users का लागि ---
   (OS settings मा "Reduce motion" on भएकाहरूको लागि) */
@media (prefers-reduced-motion: reduce) {
    .sr-hidden {
        transition-duration: 0.01s !important;
    }
}

/* ==============================================
   DARK MODE FIXES — Dark mode को color सुधार
   यहाँ थप्नुभए dark mode मा सही रंग देखिन्छ।
   ============================================== */

/* Footer bottom bar — dark mode मा readable text */
body.dark-mode .footer-bottom {
    background: #0a0a16 !important;
    color: rgba(220, 220, 240, 0.85) !important;
    border-top: 1px solid rgba(255,255,255,0.08);
}
body.dark-mode .footer-bottom p,
body.dark-mode .footer-bottom .copyright,
body.dark-mode .footer-bottom .developer {
    color: rgba(200, 200, 220, 0.8) !important;
}
body.dark-mode .footer-bottom a {
    color: #6dcf8a !important;
}
body.dark-mode .footer-bottom a:hover {
    color: #a8e6b8 !important;
}

/* Footer links — dark mode मा visible */
body.dark-mode .footer-widget p,
body.dark-mode .footer-widget li a,
body.dark-mode .footer-links li a {
    color: rgba(200, 220, 210, 0.82) !important;
}
body.dark-mode .footer-widget li a:hover,
body.dark-mode .footer-links li a:hover {
    color: #ffffff !important;
}

/* Notice ticker — dark mode मा border र text */
body.dark-mode .notice-ticker {
    border-color: rgba(255,255,255,0.08);
    color: var(--border-color);
}
body.dark-mode .notice-ticker .ticker-label {
    background: var(--primary-light);
    color: #fff;
}

/* Section backgrounds — dark mode मा proper dark bg */
body.dark-mode .section-padding,
body.dark-mode .bg-light,
body.dark-mode section.bg-light {
    background-color: var(--dark-bg-deep) !important;
}

/* Cards in dark mode — better contrast */
body.dark-mode .card,
body.dark-mode .service-card {
    background: var(--dark-bg) !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #e0e0e8;
}
body.dark-mode .card .card-header {
    background: var(--dark-bg-deep) !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
    color: #e0e0e8;
}
body.dark-mode .card .card-title,
body.dark-mode .card h5,
body.dark-mode .card h4 {
    color: #c8e6d0 !important;
}

/* Badges — dark mode मा readable */
body.dark-mode .badge.bg-light {
    background: var(--dark-bg) !important;
    color: #c8d8e8 !important;
}

/* Buttons — outline buttons dark mode */
body.dark-mode .btn-outline-primary {
    color: #6dcf8a;
    border-color: #6dcf8a;
}
body.dark-mode .btn-outline-primary:hover {
    background: var(--primary-light);
    color: #fff;
    border-color: var(--primary-light);
}
body.dark-mode .btn-outline-secondary {
    color: #aab8cc;
    border-color: #4a5a72;
}

/* Tables — dark mode मा clear rows */
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(40,100,70,0.08) !important;
}
body.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(40,100,70,0.14) !important;
}

/* Breadcrumb */
body.dark-mode .breadcrumb-item a {
    color: #6dcf8a;
}
body.dark-mode .breadcrumb-item.active,
body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #aab8cc;
}

/* Alert boxes in dark mode */
body.dark-mode .alert-success {
    background: rgba(40,167,69,0.15);
    border-color: rgba(40,167,69,0.35);
    color: #88d4a0;
}
body.dark-mode .alert-warning {
    background: rgba(255,193,7,0.12);
    border-color: rgba(255,193,7,0.3);
    color: #ffe08a;
}
body.dark-mode .alert-danger {
    background: rgba(220,53,69,0.14);
    border-color: rgba(220,53,69,0.3);
    color: #f4a4ac;
}

/* Rate cards / stat boxes */
body.dark-mode .rate-card-enhanced,
body.dark-mode .stat-card-public {
    background: var(--dark-bg) !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* Form labels in dark mode */
body.dark-mode .form-label,
body.dark-mode label {
    color: #c8d8e8 !important;
}

/* Input focus ring — visible in dark mode */
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    border-color: var(--primary-light) !important;
    box-shadow: 0 0 0 3px rgba(40,167,69,0.22) !important;
}

/* Nepali datepicker in dark mode */
body.dark-mode .nepali-datepicker-popup,
body.dark-mode .ndp-calendar {
    background: var(--dark-bg) !important;
    color: var(--border-color) !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* EMI calculator dark mode */
body.dark-mode .emi-result-box,
body.dark-mode .schedule-table th {
    background: #16243a !important;
    color: var(--border-color) !important;
}
body.dark-mode .schedule-table td {
    border-color: rgba(255,255,255,.08) !important;
    color: #c8d8e8 !important;
}

/* Mobile menu in dark mode */
body.dark-mode .mobile-nav {
    background: var(--dark-bg) !important;
}
body.dark-mode .mobile-nav-link {
    color: var(--border-color) !important;
    border-bottom-color: rgba(255,255,255,0.07) !important;
}
body.dark-mode .mobile-nav-link:hover,
body.dark-mode .mobile-nav-link.active {
    background: rgba(40,167,69,0.15) !important;
    color: #6dcf8a !important;
}

/* Scroll button in dark mode */
body.dark-mode .scroll-btn.up {
    background: linear-gradient(145deg, var(--primary-color), var(--primary-light)) !important;
}
body.dark-mode .scroll-btn.down {
    background: #252545 !important;
    color: var(--border-color) !important;
}

/* ==============================================
   FONT COMBINATION — Mukta (Nepali text) सुधार
   Mobile मा पनि राम्रो पढिन्छ।
   ============================================== */

/* (font-smoothing → merged into main body{} above) */

/* Headings — slightly tighter on mobile */
@media (max-width: 576px) {
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.35rem !important; }
    h3 { font-size: 1.15rem !important; }
    .page-banner h1 { font-size: 1.5rem !important; }
}

/* ==============================================
   MOBILE LAYOUT IMPROVEMENTS
   ============================================== */

/* Ensure buttons are tappable on mobile */
@media (max-width: 576px) {
    .btn { min-height: 44px; min-width: 44px; }
    /* Table — allow scroll on small screens */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    /* Footer columns stack properly */
    .main-footer .footer-widget { margin-bottom: 30px; }
    /* Floating buttons don't overlap each other */
    .scroll-nav { right: 12px; bottom: 22px; }
    /* WhatsApp लाई right side मा राख्ने — left मा accessibility panel छ
       scroll-nav bottom(22)+height(84)=106px भन्दा माथि → bottom: 120px */
    .whatsapp-float { right: 12px !important; left: auto !important; bottom: 120px !important; }
}

/* ==============================================
   MOBILE VIEW IMPROVEMENTS — सबै पृष्ठमा लागू
   Interest Rates, Services, Notices, Gallery etc.
   ============================================== */

/* ── Page Banner: Mobile मा compact ── */
@media (max-width: 767px) {
    .page-banner {
        padding: 28px 0 22px;
    }
    .page-banner h1 {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }
    .page-banner .breadcrumb {
        font-size: 0.82rem;
    }
}

/* ── Section Header: Mobile मा compact ── */
@media (max-width: 767px) {
    .section-header {
        margin-bottom: 24px !important;
    }
    .section-header h2 {
        font-size: 1.4rem;
    }
    .section-padding {
        padding: 36px 0;
    }
}

/* ── Interest Rates Page — Mobile Card Grid ── */
@media (max-width: 575px) {

    /* Card header: tighter */
    .rates-header-modern {
        padding: 14px 16px;
        gap: 12px;
    }
    .rates-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
        border-radius: 10px;
        flex-shrink: 0;
    }
    .rates-header-modern h3 {
        font-size: 1rem;
        margin-bottom: 1px;
    }
    .rates-header-modern p {
        font-size: 0.75rem;
    }

    /* Rate items → 2-column mini-card grid */
    .rates-body-modern {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px;
    }

    .rate-item {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        padding: 10px 8px;
        border-bottom: none !important;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        background: #f9fdf9;
        gap: 6px;
        min-height: 80px;
    }

    .rate-item:hover {
        background: #f0faf0;
        border-color: var(--primary-green20);
    }

    .rate-info {
        width: 100%;
        text-align: center;
    }

    .rate-info strong {
        font-size: 0.76rem;
        line-height: 1.25;
        color: #444;
    }

    .rate-info small {
        font-size: 0.68rem;
    }

    /* Rate value badge: compact */
    .rate-value {
        font-size: 0.88rem;
        font-weight: 700;
        padding: 5px 10px;
        border-radius: 20px;
        min-width: auto;
        width: 100%;
        text-align: center;
    }

    .rate-value span {
        font-size: 0.8rem;
        font-weight: 600;
    }

    /* Empty state */
    .rate-empty {
        grid-column: 1 / -1;
        padding: 24px 12px;
    }

    /* Rates note: compact */
    .rates-note {
        padding: 14px 16px;
        font-size: 0.88rem;
    }
    .rates-note h5 {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }
    .rates-note ul {
        padding-left: 16px;
    }
    .rates-note li {
        margin-bottom: 4px;
    }

    /* Loan rates items */
    .loan-rates .rate-item {
        background: #f0f7ff;
        border-color: #bbdefb;
    }
    .loan-rates .rate-item:hover {
        background: #e3f2fd;
        border-color: #90caf9;
    }
}

/* ── Services Page Cards — Mobile ── */
@media (max-width: 575px) {
    .service-card {
        padding: 20px 16px;
    }
    .service-icon {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }
}

/* ── Notice/Gallery Cards — Mobile ── */
@media (max-width: 575px) {
    .notice-item {
        padding: 12px 0;
    }
    .notice-date {
        font-size: 11px;
    }
}

/* ── CTA Section — Mobile ── */
@media (max-width: 767px) {
    .cta-section .cta-content {
        padding: 24px 16px;
        text-align: center;
    }
    .cta-section h2 {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }
    .cta-section .col-lg-4 {
        margin-top: 16px;
        text-align: center !important;
    }
}

/* ================================================================
   ✨ EYE-CATCHING MOBILE UI/UX — Complete Mobile Overhaul
   सबै public pages का लागि modern, vibrant mobile experience
   ================================================================ */

/* ── 1. Top Bar — Mobile मा hide (screen space बचाउने) ── */
@media (max-width: 991px) {
    .top-bar { display: none !important; }
}

/* ── 2. Main Header — Sticky green-accented mobile header ── */
@media (max-width: 991px) {
    .main-header {
        padding: 6px 0 !important;
        border-bottom: 2px solid var(--primary-color) !important;
        box-shadow: 0 4px 24px rgba(26, 95, 42, 0.18) !important;
        background: #fff !important;
    }
    .logo-banner-img {
        height: 38px !important;
    }
    /* Hamburger button — prominent */
    .mobile-menu-toggle {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        font-size: 20px !important;
        box-shadow: 0 3px 12px rgba(26, 95, 42, 0.35) !important;
    }
}

/* ── 2b. Logo — Phone मा झन् सानो ── */
@media (max-width: 767px) {
    .logo-banner-img { height: 32px !important; }
    .mobile-menu-toggle {
        padding: 8px 12px !important;
        font-size: 18px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }
}

/* ── 3. Hero Slider — Full-impact mobile experience ── */
@media (max-width: 767px) {
    .slider-bg {
        height: 420px !important;
        align-items: center;
    }
    .slider-overlay {
        background: linear-gradient(160deg,
            rgba(10, 60, 25, 0.80) 0%,
            rgba(26, 95, 42, 0.60) 50%,
            rgba(0, 0, 0, 0.45) 100%) !important;
    }
    /* Center the hero content on mobile */
    .slider-content {
        text-align: center !important;
        max-width: 100% !important;
        padding: 0 16px !important;
    }
    .slider-content h1 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
        text-shadow: 2px 3px 12px rgba(0,0,0,0.55) !important;
        letter-spacing: -0.3px;
    }
    /* Center the underline accent */
    .slider-content h1::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 80px !important;
    }
    .slider-content p {
        font-size: 0.95rem !important;
        margin-top: 20px !important;
        margin-bottom: 22px !important;
        opacity: 0.95;
        line-height: 1.6;
    }
    /* Hero CTA Button — pill shape, eye-catching */
    .slider-content .btn {
        border-radius: 50px !important;
        padding: 13px 32px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px;
        box-shadow: 0 6px 24px rgba(0,0,0,0.3) !important;
        min-height: 48px;
    }
    .slider-content .btn-primary,
    .slider-content .btn-warning {
        background: linear-gradient(135deg, #f6d155, #f0a500) !important;
        color: #1a1a1a !important;
        border: none !important;
    }
    /* Carousel controls — mobile */
    .hero-slider .carousel-control-prev,
    .hero-slider .carousel-control-next {
        width: 38px !important;
        height: 38px !important;
        background: rgba(255,255,255,0.2) !important;
        border-radius: 50% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        backdrop-filter: blur(4px);
    }
}
@media (max-width: 480px) {
    .slider-bg { height: 360px !important; }
    .slider-content h1 { font-size: 1.5rem !important; }
}

/* ── 4. Notice Ticker — More vibrant on mobile ── */
@media (max-width: 767px) {
    .notice-ticker {
        background: linear-gradient(90deg, #fffde7, #fff8e1) !important;
        border-bottom-width: 3px !important;
    }
    .ticker-label {
        padding: 8px 14px !important;
        font-size: 11px !important;
        border-radius: 0 !important;
    }
    .ticker-content { font-size: 0.82rem !important; }
    .ticker-item { gap: 10px; }
}

/* ── 5. Section Header — Compact & styled ── */
@media (max-width: 767px) {
    .section-header {
        margin-bottom: 20px !important;
    }
    .section-badge {
        font-size: 0.75rem !important;
        padding: 5px 14px !important;
        letter-spacing: 0.5px;
        font-weight: 700;
    }
    .section-header h2 {
        font-size: 1.45rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
    }
    .section-header .section-divider {
        margin: 12px auto !important;
    }
    .section-header p {
        font-size: 0.88rem !important;
    }
}

/* ── 6. Service Cards — Compact 2-column mobile grid ── */
@media (max-width: 767px) {
    .service-card {
        padding: 22px 14px !important;
        border-radius: 18px !important;
        box-shadow: 0 6px 24px rgba(26, 95, 42, 0.1) !important;
        /* Always show the top accent line on mobile */
        border-top: 3px solid var(--primary-color) !important;
    }
    .service-card::before {
        transform: scaleX(1) !important; /* always visible on mobile */
    }
    .service-icon {
        width: 68px !important;
        height: 68px !important;
        margin: 0 auto 14px !important;
        border-radius: 18px !important;
        box-shadow: 0 6px 18px rgba(26, 95, 42, 0.28) !important;
    }
    .service-icon i { font-size: 28px !important; }
    .service-card h4 {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
    }
    .service-card p {
        font-size: 0.78rem !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
    .service-card .btn, .service-card a.btn {
        font-size: 0.78rem !important;
        padding: 7px 16px !important;
        border-radius: 20px !important;
    }
}

/* ── 7. Counter Section — Eye-catching 2x2 grid ── */
@media (max-width: 767px) {
    .counter-section { padding: 36px 0 !important; }
}
@media (max-width: 575px) {
    /* 2×2 grid layout */
    .counter-section .row.g-4,
    .counter-section .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
    }
    .counter-section .col-6,
    .counter-section [class*="col-"] {
        padding: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        width: 100% !important;
    }
    .counter-box {
        padding: 22px 10px !important;
        border-right: 1px solid rgba(255,255,255,0.12);
        border-bottom: 1px solid rgba(255,255,255,0.12);
        position: relative;
    }
    .counter-box::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,0.03);
        pointer-events: none;
    }
    .counter-icon {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 10px !important;
        background: rgba(255,255,255,0.18) !important;
    }
    .counter-icon i { font-size: 20px !important; }
    .counter-number {
        font-size: 2rem !important;
        font-weight: 800 !important;
        letter-spacing: -1px;
    }
    .counter-label {
        font-size: 0.78rem !important;
        opacity: 0.88;
    }
}

/* ── 8. Feature Boxes — Mobile ── */
@media (max-width: 575px) {
    .feature-box {
        padding: 20px 14px !important;
        border-radius: 16px !important;
        border-top: 3px solid var(--primary-color) !important;
    }
    .feature-icon {
        width: 54px !important;
        height: 54px !important;
        margin-bottom: 10px !important;
        border-radius: 14px !important;
    }
    .feature-icon i { font-size: 22px !important; }
    .feature-box h5 { font-size: 0.88rem !important; font-weight: 700 !important; }
    .feature-box p { font-size: 0.78rem !important; }
}

/* ── 9. CTA Section — Bold & impactful on mobile ── */
@media (max-width: 767px) {
    .cta-section { padding: 28px 0 !important; }
    .cta-content {
        border-radius: 20px !important;
        padding: 26px 18px !important;
        text-align: center;
        background: linear-gradient(135deg, #0d3015, var(--primary-color)) !important;
        box-shadow: 0 12px 40px rgba(26, 95, 42, 0.35) !important;
        position: relative;
        overflow: hidden;
    }
    .cta-content::before {
        content: '';
        position: absolute;
        top: -40px; right: -40px;
        width: 130px; height: 130px;
        background: rgba(255,255,255,0.05);
        border-radius: 50%;
        pointer-events: none;
    }
    .cta-content h2 {
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        color: #fff !important;
        margin-bottom: 8px !important;
    }
    .cta-content p {
        font-size: 0.88rem !important;
        color: rgba(255,255,255,0.85) !important;
        margin-bottom: 18px !important;
    }
    .cta-content .btn {
        border-radius: 50px !important;
        padding: 12px 30px !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        box-shadow: 0 4px 18px rgba(0,0,0,0.2) !important;
    }
    .cta-content .btn-light {
        background: linear-gradient(135deg, #f6d155, #f5c518) !important;
        color: #1a1a1a !important;
        border: none !important;
    }
}

/* ── 10. General Cards — Consistent & elevated ── */
@media (max-width: 767px) {
    .card {
        border-radius: 16px !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
        box-shadow: 0 4px 18px rgba(0,0,0,0.08) !important;
        overflow: hidden;
    }
    .card-body { padding: 16px !important; }
    .card-title { font-size: 1rem !important; font-weight: 700 !important; }
}

/* ── 11. Buttons — Touch-friendly & vibrant ── */
@media (max-width: 767px) {
    .btn {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation;
    }
    .btn-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
        border: none !important;
        box-shadow: 0 4px 16px rgba(26, 95, 42, 0.35) !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
    }
    .btn-outline-primary {
        border-color: var(--primary-color) !important;
        color: var(--primary-color) !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
    }
    .btn-lg {
        padding: 14px 32px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }
    .btn-sm {
        min-height: 36px !important;
        padding: 5px 14px !important;
        font-size: 0.8rem !important;
    }
}

/* ── 12. WhatsApp & Scroll Nav — Better positioned ── */
@media (max-width: 767px) {
    .whatsapp-float {
        right: 12px !important;
        left: auto !important;
        bottom: 120px !important;  /* scroll-nav buttons भन्दा माथि (22+84+14=120) */
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
    }
    .scroll-top {
        width: 42px !important;
        height: 42px !important;
        font-size: 14px !important;
        right: 14px !important;
        bottom: 80px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
        border-radius: 12px !important;
    }
    .scroll-nav {
        right: 12px !important;
        bottom: 22px !important;
        gap: 8px !important;
    }
    .scroll-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
}

/* ── 13. Forms — Comfortable mobile inputs ── */
@media (max-width: 767px) {
    .form-control, .form-select {
        min-height: 48px !important;
        border-radius: 10px !important;
        font-size: 0.95rem !important;
        border: 1.5px solid var(--border-light) !important;
        padding: 10px 14px !important;
    }
    .form-control:focus, .form-select:focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.15) !important;
    }
    .form-label {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        margin-bottom: 5px !important;
        color: var(--text-color) !important;
    }
    textarea.form-control {
        min-height: 110px !important;
    }
}

/* ── 14. Gallery Cards ── */
@media (max-width: 575px) {
    .gallery-card {
        border-radius: 14px !important;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    }
}

/* ── 15. Page Footer — Tight mobile ── */
@media (max-width: 767px) {
    .main-footer { padding-top: 36px !important; }
    .footer-widget h5 {
        font-size: 0.95rem !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
    }
    .footer-bottom {
        padding: 14px 0 !important;
        font-size: 0.8rem !important;
    }
}

/* ── 16. Typography — Better mobile readability ── */
@media (max-width: 767px) {
    body { font-size: 15px; }
    h1 { font-size: 1.7rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.15rem !important; }
    h4 { font-size: 1rem !important; }
    p { font-size: 0.9rem; line-height: 1.65; }
}

/* ── 17. Scroll progress — thinner on mobile ── */
@media (max-width: 767px) {
    .scroll-progress-container { height: 3px !important; }
}

/* ── 18. Satisfaction widget — mobile side tab position ── */
@media (max-width: 767px) {
    .satisfaction-widget,
    .feedback-widget {
        /* Mobile मा पनि right side tab नै — position सर्दैन */
        right: 0 !important;
    }
}

/* ── 19. Mobile Nav Sidebar — Polished ── */
@media (max-width: 991px) {
    .main-nav {
        background: linear-gradient(180deg, #fff 0%, #f9fdf9 100%) !important;
    }
    .nav-menu > li > a {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        letter-spacing: 0.1px;
    }
    .nav-menu > li.active > a {
        color: var(--primary-color) !important;
        background: rgba(26, 95, 42, 0.06) !important;
        border-left: 3px solid var(--primary-color);
    }
    .nav-menu .dropdown li a {
        font-size: 0.88rem !important;
        color: #444 !important;
    }
    .nav-menu .dropdown li a:hover,
    .nav-menu .dropdown li a:active {
        background: rgba(26, 95, 42, 0.08) !important;
        color: var(--primary-color) !important;
        border-radius: 8px !important;
    }
    /* Close button polish */
    .close-menu {
        background: linear-gradient(135deg, var(--off-white), #ebebeb) !important;
        color: var(--text-color) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
}

/* ── 20. Quick Service Cards ── */
@media (max-width: 575px) {
    .quick-service-card {
        padding: 16px 10px !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    }
    .quick-service-card .service-icon {
        width: 52px !important;
        height: 52px !important;
    }
}

/* ── Mobile floating widget safe zone ── */
@media (max-width: 480px) {
    .useful-links-widget {
        bottom: 80px !important;
        left: 10px !important;
    }
    .whatsapp-float {
        bottom: 20px !important;
        right: 10px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
    }
    .chatbot-widget {
        bottom: 80px !important;
        right: 10px !important;
    }
    #scrollAccessibilityPanel.sa-panel {
        bottom: 38px !important;
        left: 6px !important;
    }
}

/* Result card details toggle */
.rcp-details-toggle { text-align:right; margin-top:6px; }
.rcp-toggle-btn { font-size:.8rem; padding:4px 14px; border-radius:8px; font-weight:600; transition:all .2s; }
.rcp-toggle-btn i { transition:transform .2s; display:inline-block; }
.rcp-toggle-btn[aria-expanded="true"] i { transform:rotate(180deg); }
.rcp-timeline-wrap { border-top:1px solid #f1f5f9; padding:14px 4px 4px; margin-top:10px; }

/* ========== header-v2.css ========== */
/* ============================================================
   HEADER v2 — Pokhara Finance Style
   आकाश सहकारी — Himal Background + Utility Top Bar
   FIX v2: clip-path removed, banner logo properly shown
   ============================================================ */

/* ── Top Utility Bar ── */
.pfl-top-bar {
    background: var(--header-color, var(--topbar-bg, var(--secondary-color)));
    color: #fff;
    font-family: 'Mukta', 'Noto Sans Devanagari', sans-serif;
    font-size: 12.5px;
    line-height: 1;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    position: relative;
    z-index: 1200;
    overflow: visible;
}
.pfl-top-bar .container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    min-height: 36px;
}

/* Quick utility links — left */
.pfl-quick-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 0;
}
.pfl-quick-links > li {
    position: relative;
}
.pfl-quick-links > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,0.92);
    text-decoration: none;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Mukta', 'Noto Sans Devanagari', sans-serif;
    transition: background .18s, color .18s;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.12);
}
.pfl-quick-links > li > a:hover {
    background: rgba(0,0,0,0.2);
    color: #fff;
}
.pfl-quick-links > li > a .pfl-badge {
    background: var(--accent-color, #f39c12);
    color: #fff;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1.4;
}

/* उप-मेनु (.dropdown) — टप बारको बिज्ञापन ब्याज जस्तै संख्या */
.main-nav .dropdown li > a .pfl-badge.pfl-badge--submenu {
    background: var(--accent-color, #f39c12);
    color: #fff;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1.35;
    margin-left: 6px;
    vertical-align: middle;
}

/* Dropdown in top bar */
.pfl-quick-links > li.has-drop .pfl-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 175px;
    background: var(--header-dark, var(--secondary-dark, var(--secondary-color)));
    border-top: 2px solid var(--accent-color, #f39c12);
    box-shadow: 0 4px 15px rgba(0,0,0,.25);
    z-index: 9999;
    padding: 4px 0;
    border-radius: 0 0 6px 6px;
}
.pfl-quick-links > li.has-drop:hover .pfl-drop {
    display: block;
}
.pfl-drop a {
    display: block;
    padding: 7px 14px;
    color: rgba(255,255,255,.88);
    text-decoration: none;
    font-size: 12px;
    transition: background .15s;
}
.pfl-drop a:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Right controls */
.pfl-top-right {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0 0 0 8px;
}
.pfl-top-right > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.9);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    transition: background .2s;
    white-space: nowrap;
}
.pfl-top-right > li > a:hover { background: rgba(0,0,0,.2); color: #fff; }
/* ── Login Dropdown Trigger ── */
.pfl-login-drop-wrap { position: relative; }
.pfl-login-toggle {
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.32) !important;
    font-weight: 600 !important;
    padding: 5px 13px !important;
    border-radius: 6px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    min-height: 30px;
    gap: 6px;
    white-space: nowrap;
    font-family: 'Mukta', 'Noto Sans Devanagari', sans-serif;
    font-size: 12.5px;
    transition: background .18s, border-color .18s !important;
}
.pfl-login-toggle:hover { background: rgba(255,255,255,.32) !important; }
.pfl-login-caret {
    font-size: 10px;
    opacity: .85;
    transition: transform .22s;
}
.pfl-login-drop-wrap.open .pfl-login-caret { transform: rotate(180deg); }

/* ── Dropdown Menu (compact — not wider than trigger feel) ── */
.pfl-login-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(236px, calc(100vw - 24px));
    max-height: min(72vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 1300; /* above top-bar + main header */
    border: 1px solid rgba(0,0,0,0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s, visibility .2s;
    pointer-events: none;
}
.pfl-login-drop-wrap.open .pfl-login-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.pfl-login-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    color: #2c3e50;
    text-decoration: none;
    transition: background .15s;
    background: none !important;
    border: none !important;
    font-weight: 400 !important;
    font-family: 'Mukta', 'Noto Sans Devanagari', sans-serif;
    min-height: 42px;
}
.pfl-login-menu li a:hover { background: #f4faf5 !important; }

/* ── Icon badge ── */
.pfl-lm-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}
.pfl-lm-web    { background: #e8f5e9; color: #1a5f2a; }
.pfl-lm-android{ background: #e8f5e9; color: #2e7d32; }
.pfl-lm-ios    { background: #f3e5f5; color: #6a1b9a; }
.pfl-lm-admin  { background: #fef2f2; color: var(--secondary-color, #c0392b); }
.pfl-lm-member { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--text-on-primary, #fff); }
.pfl-lm-verify { background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark, var(--secondary-color))); color: var(--text-on-secondary, #fff); }

/* ── Text block ── */
.pfl-lm-text {
    display: flex;
    flex-direction: column;
    line-height: 1.28;
    flex: 1;
    min-width: 0;
}
.pfl-lm-text strong {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: .01em;
    line-height: 1.25;
}
.pfl-lm-text small {
    font-size: .6875rem;
    color: #64748b;
    margin-top: 0;
    font-weight: 500;
    line-height: 1.2;
}
.pfl-lm-badge {
    background: #f59e0b;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1.25;
}
/* ── Divider ── */
.pfl-lm-divider {
    border-top: 1px solid #eef2f0;
    margin: 2px 0;
    pointer-events: none;
}
.pfl-lang-wrap {
    display: flex; align-items: center; gap: 2px;
    border-left: 1px solid rgba(255,255,255,.2);
    padding-left: 8px; margin-left: 4px;
}
.pfl-lang-wrap a {
    color: rgba(255,255,255,.8); font-size: 11px; font-weight: 600;
    padding: 3px 6px; border-radius: 3px; text-decoration: none;
    transition: background .2s;
}
.pfl-lang-wrap a.active,
.pfl-lang-wrap a:hover { background: rgba(255,255,255,.2); color: #fff; }
.pfl-lang-wrap span { color: rgba(255,255,255,.4); font-size: 10px; }

/* ═══════════════════════════════════════════
   MAIN HEADER — Brand (Himal BG) + Nav
   ═══════════════════════════════════════════ */
.pfl-main-header {
    background: #fff;
    display: flex;
    align-items: center;
    overflow: visible;
    min-height: 84px;
    position: relative;
    z-index: 1100;
    isolation: isolate;
    border-bottom: 1px solid rgba(0,0,0,.04);
}

/*
 * हिमाल фोटो — पूरा हेडर पङ्क्तिमा (Pokhara Finance जस्तो), नेभ क्षेत्र मात्र होइन।
 * Desktop मात्र; मोबाइलमा v9 ले हटाउँछ / साँघो पट्टी देखिँदैन।
 */
@media (min-width: 992px) {
    .pfl-main-header::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-color: #fff;
        background-image:
            linear-gradient(to right,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 0.995) clamp(170px, 26vw, 390px),
                rgba(255, 255, 255, 0.94) 52%,
                rgba(255, 255, 255, 0.72) 72%,
                rgba(255, 255, 255, 0.36) 88%,
                rgba(255, 255, 255, 0.12) 100%
            ),
            var(--himal-bg, none);
        background-repeat: no-repeat, no-repeat;
        background-size: 100% 100%, cover;
        background-position: 0 0, 82% 40%;
    }

    body.dark-mode .pfl-main-header::after {
        background-color: #1c1c2e;
        background-image:
            linear-gradient(to right,
                #1c1c2e 0%,
                rgba(28, 28, 46, 0.99) clamp(160px, 26vw, 360px),
                rgba(28, 28, 46, 0.92) 54%,
                rgba(28, 28, 46, 0.68) 74%,
                rgba(28, 28, 46, 0.3) 90%,
                rgba(28, 28, 46, 0.08) 100%
            ),
            var(--himal-bg, none);
        background-repeat: no-repeat, no-repeat;
        background-size: 100% 100%, cover;
        background-position: 0 0, 82% 40%;
        filter: brightness(0.48);
    }
}

@media (max-width: 991px) {
    .pfl-main-header::after {
        display: none !important;
        content: none !important;
    }
}

/* ════════════════════════════════════════════════════
   LEFT: Logo / Brand area — 100% solid white, NO himal
   isolation: isolate ensures z-stacking context
════════════════════════════════════════════════════ */
.pfl-brand-area {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: min(520px, 46vw);
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 18px;
    overflow: visible;
    background: #fff !important;
    border-right: none;               /* no hard line */
}

/* Double-guarantee: ::before is also solid white */
.pfl-brand-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff !important;
    z-index: -1;
    pointer-events: none;
}

/* Right-edge: wide white fade — seamless blend into nav himal area */
.pfl-brand-area::after {
    content: '';
    position: absolute;
    top: 0; right: -32px;
    width: 40px; height: 100%;
    background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0.7) 60%, transparent 100%);
    z-index: 11;
    pointer-events: none;
}

/* Himal silhouette div — not used in this design */
.pfl-himal-silhouette { display: none; }

/* ── Banner logo ─ */
.pfl-brand-content {
    position: relative;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
}

.pfl-brand-content.no-logo {
    flex: 1 1 auto;
    width: 100%;
}

.pfl-brand-content.has-logo {
    padding-right: 12px; /* badge सँग सानो breathing space */
}

.pfl-brand-logo {
    width: auto;
    max-width: min(400px, 100%);
    height: auto;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 1;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.10));
}

/* Text labels — hide if logo is banner type */
.pfl-brand-text { display: none !important; }

/* "Since XXXX" badge — flow मा राख्दा wide banner logo माथि overlap हुँदैन */
.pfl-since-badge {
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translate(50%, -50%);
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 55%, var(--primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255,255,255,.9);
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--primary-dark) 40%, rgba(0,0,0,.35)),
        0 0 0 4px rgba(255,255,255,0.55);
    z-index: 13;
    flex-shrink: 0;
    margin-left: 0;
}

/* Soft halo pulse for eye-catching badge */
.pfl-since-badge::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.55);
    opacity: 0.7;
    animation: sincePulse 2.4s ease-out infinite;
}

@keyframes sincePulse {
    0%   { transform: scale(0.9); opacity: 0.7; }
    70%  { transform: scale(1.08); opacity: 0.15; }
    100% { transform: scale(1.12); opacity: 0; }
}
.pfl-since-badge .since-text {
    font-size: 7px; color: #fff; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; line-height: 1;
}
.pfl-since-badge .since-year {
    font-size: 13px; color: #fff; font-weight: 800; line-height: 1.2;
}

/* ════════════════════════════════════════════════════
   RIGHT: Navigation area — himal fades in from RIGHT
   Gradient starts strongly white on LEFT, himal only on right 60%
════════════════════════════════════════════════════ */
.pfl-nav-area {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 14px 0 12px;
    position: relative;
    z-index: 2;
    background: transparent;
    overflow: visible;               /* MUST be visible for dropdowns to show */
}

/* पहिले हिमाल यही pseudo मा थियो — अब पूरा पङ्क्ति .pfl-main-header::after मा */
.pfl-nav-area::before {
    display: none !important;
}

.pfl-nav-area .main-nav {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
}

/* Desktop readability on himal background */
@media (min-width: 992px) {
    .pfl-nav-area .main-nav {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }
}

/* ════════════════════════════════════════════════════
   NAV MENU — Eye-catching colors (override style.css)
   Deep green text + gold/green hover with gradient pill
════════════════════════════════════════════════════ */
body.header-v2 .pfl-nav-area .nav-menu > li > a {
    font-family: 'Mukta', 'Noto Sans Devanagari', sans-serif;
    color: #0b3b1a;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 11px;
    border-radius: 7px;
    position: relative;
    transition: background .22s, color .22s, box-shadow .2s;
    white-space: nowrap;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    background: transparent;
    border: none;
    box-shadow: none;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}

/* Colored underline bar on each item */
body.header-v2 .pfl-nav-area .nav-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%; right: 50%;
    height: 2px;
    background: var(--accent-color, #d4a017);
    border-radius: 2px;
    transition: left .22s, right .22s;
}
body.header-v2 .pfl-nav-area .nav-menu > li > a:hover::after,
body.header-v2 .pfl-nav-area .nav-menu > li.active > a::after {
    left: 10px; right: 10px;
}

/* Hover state — green gradient pill */
body.header-v2 .pfl-nav-area .nav-menu > li > a:hover {
    background: var(--primary-color);
    color: var(--text-on-primary, #fff) !important;
    box-shadow: var(--shadow-primary, 0 3px 9px rgba(26,107,50,0.28));
    transform: translateY(-0.5px);
}
body.header-v2 .pfl-nav-area .nav-menu > li > a:hover::after {
    background: transparent;
}

/* Active page — strong green gradient */
body.header-v2 .pfl-nav-area .nav-menu > li.active > a {
    background: var(--primary-dark);
    color: var(--text-on-primary, #fff) !important;
    box-shadow: var(--shadow-primary, 0 2px 7px rgba(20,82,38,0.32));
}
body.header-v2 .pfl-nav-area .nav-menu > li.active > a::after {
    background: var(--accent-color, #f5c518);
    left: 10px; right: 10px;
}

/* Dropdown chevron icon styling */
body.header-v2 .pfl-nav-area .nav-menu > li > a .fa-chevron-down {
    font-size: 9px;
    opacity: 0.75;
    margin-top: 1px;
}

/* Dropdown menu styling — high z-index to ensure it appears above all */
body.header-v2 .pfl-nav-area .nav-menu .dropdown {
    border-top: 3px solid var(--primary-color);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
    z-index: 9999 !important;
    min-width: 210px;
}
body.header-v2 .pfl-nav-area .nav-menu .dropdown li a {
    font-family: 'Mukta', 'Noto Sans Devanagari', sans-serif;
    color: #1a3a25;
    font-size: 13px;
    font-weight: 500;
    padding-top: 9px;
    padding-bottom: 9px;
    min-height: 38px;
    transition: background .15s, color .15s, padding-left .15s;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
body.header-v2 .pfl-nav-area .nav-menu .dropdown li:last-child a {
    border-bottom: none;
}
body.header-v2 .pfl-nav-area .nav-menu .dropdown li a:hover {
    background: #edf7f0;
    color: var(--primary-dark);
    padding-left: 26px;
}
body.header-v2 .pfl-nav-area .nav-menu .dropdown li a i {
    color: var(--primary-color);
    width: 16px;
    text-align: center;
}

.pfl-mobile-toggle {
    display: none;
    margin-left: auto;
    padding: 8px 12px;
    background: none;
    border: 1.5px solid rgba(var(--primary-rgb,26,95,42), .22);
    border-radius: 8px;
    color: var(--primary-dark, #144a21);
    font-size: 18px;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    transition: background .18s, border-color .18s;
}
.pfl-mobile-toggle:hover {
    background: rgba(var(--primary-rgb,26,95,42), .06);
    border-color: var(--primary-color);
}

/* ═══════════════════════════════════════════
   STICKY WRAPPER
   ═══════════════════════════════════════════ */
.pfl-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 8px rgba(0,0,0,.08);
    transition: box-shadow .25s ease;
}
.pfl-main-header { position: relative !important; }
.pfl-top-bar     { position: relative !important; }

/* Scroll shadow — more prominent when scrolled */
.pfl-header-wrapper.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,.15), 0 1px 4px rgba(0,0,0,.06);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1280px) {
    .pfl-brand-area { max-width: min(480px, 48vw); }
    .pfl-brand-logo { max-width: min(360px, 100%); max-height: 56px; }
    body.header-v2 .pfl-nav-area .nav-menu > li > a { font-size: 12.5px; padding: 7px 9px; }
}
@media (max-width: 1100px) {
    .pfl-brand-area { max-width: min(420px, 50vw); }
    .pfl-brand-logo { max-width: min(320px, 100%); max-height: 52px; }
    .pfl-since-badge {
        width: 44px;
        height: 44px;
        right: -12px;
        transform: translate(42%, -50%);
    }
    .pfl-since-badge .since-year { font-size: 11px; }
    body.header-v2 .pfl-nav-area .nav-menu > li > a { font-size: 12px; padding: 6px 8px; }
}
@media (max-width: 991px) {
    /* एउटै पङ्क्ति: लोगो + ह्याम्बर्गर (v9-mobile-fix सँग मेल) */
    .pfl-main-header {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }
    .pfl-brand-area {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        max-width: none;
        padding: 8px 10px 8px 14px;
        border-right: none;
        border-bottom: none;
        box-shadow: none;
    }
    .pfl-brand-area::after { display: none; }
    .pfl-nav-area {
        flex: 0 0 auto;
        width: auto !important;
        padding: 0 10px 0 6px;
    }
    .pfl-nav-area::before { display: none; }
    .pfl-mobile-toggle { display: flex; align-items: center; }
    .pfl-since-badge { display: none; }
    .pfl-brand-logo { max-height: 48px; }
}
@media (max-width: 767px) {
    .pfl-quick-links { display: none; }
    .pfl-top-bar .container { justify-content: flex-end; }
    .pfl-top-right { padding: 0; }
    .pfl-brand-area { padding: 6px 8px 6px 12px; }
    .pfl-brand-logo { max-height: 42px; }
    /* Keep login menu compact on mobile too (do not supersize rows) */
    .pfl-login-menu {
        width: min(268px, calc(100vw - 20px));
        right: 0;
        max-height: min(70vh, 480px);
    }
    .pfl-login-menu li a {
        padding: 7px 10px;
        min-height: 0;
    }
    .pfl-lm-icon {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    .pfl-lm-text strong { font-size: 0.84rem; }
    .pfl-lm-text small { font-size: 0.7rem; }
}

@media (max-width: 480px) {
    .pfl-brand-area { padding: 5px 6px 5px 10px; }
    .pfl-brand-logo { max-height: 40px; }
}

/* ═══════════════════════════════════════════
   HIDE OLD HEADER WHEN v2 ACTIVE
   ═══════════════════════════════════════════ */
body.header-v2 .top-bar    { display: none !important; }
body.header-v2 .main-header { display: none !important; }

/* ── Dark mode ── */
body.dark-mode .pfl-brand-area {
    background: #1c1c2e !important;
    border-right-color: #333;
    box-shadow: 4px 0 12px rgba(28,28,46,1);
}
body.dark-mode .pfl-brand-area::before { background: #1c1c2e !important; }
/* Dark mode: white blend-strip लाई dark navy मा बदल्ने (नत्र brand र nav बीचमा सेतो stripe देखिन्छ) */
body.dark-mode .pfl-brand-area::after {
    background: linear-gradient(to right, #1c1c2e 0%, rgba(28,28,46,0.7) 60%, transparent 100%) !important;
}
body.dark-mode .pfl-nav-area {
    background: transparent;
}
body.dark-mode.header-v2 .pfl-nav-area .nav-menu > li > a { color: #c8e6c9; }
body.dark-mode.header-v2 .pfl-nav-area .nav-menu > li > a:hover,
body.dark-mode.header-v2 .pfl-nav-area .nav-menu > li.active > a {
    background: #2d5a3d;
    color: #fff !important;
}

/* ── Notice ticker z-index ── */
.notice-ticker { position: relative; z-index: 998; }

/* ════════════════════════════════════════════
   BELL NOTIFICATION DROPDOWN
   ════════════════════════════════════════════ */
.pfl-bell-wrap {
    position: relative;
}
.pfl-bell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255,255,255,.9);
    font-size: 16px;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background .2s, color .2s;
    line-height: 1;
}
.pfl-bell-btn:hover { background: rgba(0,0,0,.2); color: #fff; }
.pfl-bell-badge {
    position: absolute;
    top: 1px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: #e74c3c;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    border: 1.5px solid rgba(192,57,43,.7);
    animation: bellPulse 2s infinite;
}
@keyframes bellPulse {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}
.pfl-bell-drop {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: -10px;
    width: 340px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
    border: 1px solid #e8e8e8;
    z-index: 10000;
    overflow: hidden;
}
.pfl-bell-drop::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 18px;
    width: 14px;
    height: 14px;
    background: var(--primary-color);
    transform: rotate(45deg);
    border-radius: 2px;
}
.pfl-bell-drop.open { display: block; }
.pfl-bell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.pfl-bell-new-chip {
    background: var(--accent-color, #f39c12);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.pfl-bell-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
}
.pfl-bell-list::-webkit-scrollbar { width: 4px; }
.pfl-bell-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.pfl-bell-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    color: #aaa;
    font-size: 13px;
    text-align: center;
}
.pfl-bell-empty i { font-size: 28px; color: #ddd; }
.pfl-bell-item a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f2f2f2;
    transition: background .15s;
}
.pfl-bell-item:last-child a { border-bottom: none; }
.pfl-bell-item a:hover { background: #f8fdf9; }
.pfl-bell-item--new a { border-left: 3px solid var(--primary-color); padding-left: 11px; }
.pfl-bell-item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #e8f5e9;
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-top: 1px;
}
.pfl-bell-item--new .pfl-bell-item-icon { background: var(--primary-color); color: var(--text-on-primary, #fff); }
.pfl-bell-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pfl-bell-item-title {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pfl-bell-item-date { font-size: 11px; color: #999; }
.pfl-bell-new-dot {
    flex-shrink: 0;
    background: #e74c3c;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    align-self: flex-start;
    margin-top: 2px;
    letter-spacing: .5px;
}
.pfl-bell-footer {
    padding: 10px 14px;
    border-top: 1px solid #eee;
    background: #fafafa;
    text-align: center;
}
.pfl-bell-footer a {
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .2s;
}
.pfl-bell-footer a:hover { color: var(--primary-light); text-decoration: underline; }
@media (max-width: 480px) {
    .pfl-bell-drop { width: calc(100vw - 20px); right: -40px; }
}

/* ── Rollback instructions (for developer reference) ──
   To disable v2 header: Remove "header-v2" from <body> class in includes/header.php
   हिमाल फोटो: Admin → Site Settings → हिमाल पृष्ठभूमि (वा `assets/images/himal-bg.jpg`)
   सिफारिस: चौडाइ 1400–1800px, उचाइ 500–800px, ल्यान्डस्केप (पोखरा फाइनान्स जस्तो दायाँ ब्लेन्ड)
─────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════
   DARK MODE — COMPLETE SUPPLEMENT
   (loaded after style.css, so cascade wins at same spec)
   ══════════════════════════════════════════════════════ */

/* ── Main header background ── */
body.dark-mode .pfl-main-header {
    background: #1c1c2e !important;
}
body.dark-mode .pfl-brand-area,
body.dark-mode .pfl-brand-area::before {
    background: #1c1c2e !important;
    border-color: #2a2a4a !important;
}
body.dark-mode .pfl-brand-area::after {
    background: linear-gradient(to right, #1c1c2e 0%, rgba(28,28,46,0.7) 60%, transparent 100%) !important;
}
body.dark-mode .pfl-nav-area {
    background: transparent !important;
}
body.dark-mode .pfl-header-wrapper {
    box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
}

/* ── TOP BAR ── */
body.dark-mode .pfl-top-bar {
    background: linear-gradient(135deg, #0d0d1a 0%, #111125 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
body.dark-mode .pfl-quick-links > li > a { color: rgba(200,230,201,.85) !important; }
body.dark-mode .pfl-top-right > li > a  { color: rgba(200,230,201,.85) !important; }

/* ── QUICK-LINKS (top bar) dropdown ── */
body.dark-mode .pfl-quick-links > li.has-drop .pfl-drop {
    background: #1e2740 !important;
    border-top-color: var(--primary-color) !important;
    border-color: #2a3a55 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
body.dark-mode .pfl-drop a {
    color: rgba(200,230,201,.88) !important;
}
body.dark-mode .pfl-drop a:hover {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
}

/* ── NAV MENU ITEMS ── */
body.dark-mode.header-v2 .pfl-nav-area .nav-menu > li > a {
    color: #c8e6c9 !important;
}
body.dark-mode.header-v2 .pfl-nav-area .nav-menu > li > a:hover {
    background: #2d5a3d !important;
    color: #fff !important;
}
body.dark-mode.header-v2 .pfl-nav-area .nav-menu > li.active > a {
    background: #1a4a2e !important;
    color: #fff !important;
}

/* ── NAV DROPDOWN MENU (desktop) ── */
body.dark-mode.header-v2 .pfl-nav-area .nav-menu .dropdown,
body.dark-mode .nav-menu .dropdown {
    background: #1a2535 !important;
    border-top-color: var(--primary-color, #1a8754) !important;
    border-color: #2a3a50 !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3) !important;
}
body.dark-mode.header-v2 .pfl-nav-area .nav-menu .dropdown li a,
body.dark-mode .nav-menu .dropdown li a {
    color: #c8e6c9 !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
    background: transparent !important;
}
body.dark-mode.header-v2 .pfl-nav-area .nav-menu .dropdown li a:hover,
body.dark-mode .nav-menu .dropdown li a:hover {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
    padding-left: 26px !important;
}
body.dark-mode.header-v2 .pfl-nav-area .nav-menu .dropdown li a i,
body.dark-mode .nav-menu .dropdown li a i {
    color: var(--accent-color, #f5c518) !important;
}

/* ── LOGIN DROPDOWN MENU ── */
body.dark-mode .pfl-login-menu {
    background: #1a2535 !important;
    border-color: #2a3a50 !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.55) !important;
}
body.dark-mode .pfl-login-menu li a {
    color: #c8e6c9 !important;
}
body.dark-mode .pfl-login-menu li a:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
body.dark-mode .pfl-lm-text strong { color: #e0e8e2 !important; }
body.dark-mode .pfl-lm-text small  { color: #8a9a8d !important; }
body.dark-mode .pfl-lm-divider     { border-color: rgba(255,255,255,.1) !important; }
body.dark-mode .pfl-lm-web         { background: #1a3a25 !important; color: #7ecf9d !important; }
body.dark-mode .pfl-lm-android     { background: #1a3a25 !important; color: #7ecf9d !important; }
body.dark-mode .pfl-lm-ios         { background: #2a1a3a !important; color: #c49edd !important; }
body.dark-mode .pfl-lm-admin       { background: #1a2a3a !important; color: #7ab0e0 !important; }
body.dark-mode .pfl-lm-badge       { background: #c07000 !important; }

/* ── BELL NOTIFICATION DROPDOWN ── */
body.dark-mode .pfl-bell-drop {
    background: #1a2535 !important;
    border-color: #2a3a50 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.55) !important;
}
body.dark-mode .pfl-bell-drop::before {
    background: var(--primary-color, #1a8754) !important;
}
body.dark-mode .pfl-bell-item a {
    color: #c8d8cc !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
}
body.dark-mode .pfl-bell-item a:hover { background: rgba(255,255,255,.07) !important; }
body.dark-mode .pfl-bell-item-icon    { background: #1e3525 !important; }
body.dark-mode .pfl-bell-empty        { color: #667766 !important; }
body.dark-mode .pfl-bell-empty i      { color: #334433 !important; }
body.dark-mode .pfl-bell-footer       { border-top-color: rgba(255,255,255,.1) !important; }
body.dark-mode .pfl-bell-list::-webkit-scrollbar-thumb { background: #2a3a4a !important; }

/* ── LOGIN TOGGLE BUTTON ── */
body.dark-mode .pfl-login-toggle {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.25) !important;
    color: #c8e6c9 !important;
}

/* ══════════════════════════════════════════════════════
   DARK MODE — PAGE CONTENT CARDS / SECTIONS
   ══════════════════════════════════════════════════════ */

/* Notice cards */
body.dark-mode .notice-card,
body.dark-mode .notice-detail-card {
    background: #1a2535 !important;
    border-color: #2a3a50 !important;
    box-shadow: 0 5px 20px rgba(0,0,0,.4) !important;
    color: #c8d8cc !important;
}
body.dark-mode .notice-card h5 a { color: #c8e6c9 !important; }
body.dark-mode .notice-card h5 a:hover { color: var(--primary-light, #3dba6a) !important; }
body.dark-mode .notice-card p { color: #8a9a8d !important; }
body.dark-mode .notice-detail-card h2 { color: #e0f0e4 !important; }
body.dark-mode .notice-detail-card .notice-content { color: #c0d0c4 !important; }
body.dark-mode .notice-detail-card .notice-header { border-bottom-color: var(--primary-color, #1a8754) !important; }
body.dark-mode .notice-detail-card .notice-attachment { background: #1e2e3a !important; }
body.dark-mode .notice-detail-card .notice-footer { border-top-color: rgba(255,255,255,.1) !important; }
body.dark-mode .notice-date { color: #7a9a7d !important; }

/* Notices section background */
body.dark-mode .notices-section,
body.dark-mode .notices-section.section-padding {
    background-color: #121826 !important;
}

/* General white cards/sections not covered by style.css */
body.dark-mode .feature-box,
body.dark-mode .service-card,
body.dark-mode .stat-card,
body.dark-mode .team-card,
body.dark-mode .gallery-item,
body.dark-mode .loan-card,
body.dark-mode .product-card,
body.dark-mode .branch-card,
body.dark-mode .download-item,
body.dark-mode .faq-answer {
    background: #1a2535 !important;
    border-color: #2a3a50 !important;
    color: #c0d0c4 !important;
}

/* Breadcrumb */
body.dark-mode .breadcrumb-item a   { color: #7ecf9d !important; }
body.dark-mode .breadcrumb-item.active { color: #8a9a8d !important; }
body.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: #4a6a4d !important; }

/* Section header text */
body.dark-mode .section-header h2,
body.dark-mode .section-header h3 { color: #c8e6c9 !important; }
body.dark-mode .section-header p   { color: #7a9a7d !important; }
body.dark-mode .section-divider    { background: var(--primary-color, #1a8754) !important; }

/* Contact / info boxes */
body.dark-mode .contact-card,
body.dark-mode .info-card,
body.dark-mode .contact-info-box {
    background: #1a2535 !important;
    border-color: #2a3a50 !important;
    color: #c0d0c4 !important;
}

/* Mobile nav area in dark */
body.dark-mode .pfl-mobile-toggle {
    border-color: rgba(255,255,255,.2) !important;
    color: #c8e6c9 !important;
}
body.dark-mode.header-v2 .pfl-brand-area {
    border-bottom-color: rgba(255,255,255,.12) !important;
}

/* ========== public-modern.css ========== */
/**
 * public-modern.css — Unified Design System v2.0
 * ====================================================
 * Global polish: fonts, spacing, colors, forms, cards,
 * icons, section headers, footer — sabai uniform.
 * Logic touch gardaina — CSS override layer matra.
 * ────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════
   1. BASE — Smooth, box-sizing, font rendering
   ═══════════════════════════════════════════════════ */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Mukta', 'Noto Sans Devanagari', 'Segoe UI', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: #1f2937 !important;
    background: #f8faf9 !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

/* Heading scale — uniform */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Mukta', 'Noto Sans Devanagari', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #111827 !important;
    letter-spacing: -0.01em !important;
}
h1 { font-size: clamp(1.6rem, 4vw, 2.25rem) !important; }
h2 { font-size: clamp(1.35rem, 3vw, 1.8rem) !important; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem) !important; }
h4 { font-size: clamp(1rem, 2vw, 1.15rem) !important; }
h5 { font-size: 1rem !important; }
h6 { font-size: .9rem !important; }

p { line-height: 1.8 !important; color: #374151 !important; }
a { color: var(--primary-color, #1a5f2a); transition: color .18s; }
a:hover { color: var(--primary-dark, #144a21); }

/* ═══════════════════════════════════════════════════
   2. SCROLLBAR — Subtle brand-colored
   ═══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f1; }
::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb,26,95,42), .35);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-rgb,26,95,42), .6);
}

/* ═══════════════════════════════════════════════════
   3. SECTION HEADERS — Uniform across all pages
   ═══════════════════════════════════════════════════ */
.section-header,
.section-header-unified {
    margin-bottom: 2.25rem !important;
    text-align: center !important;
}
.section-header h2,
.section-header h3,
.section-header-unified h2 {
    font-weight: 800 !important;
    color: #111827 !important;
    margin-bottom: .4rem !important;
}
.section-header p,
.section-header-unified p {
    color: #6b7280 !important;
    font-size: .97rem !important;
    max-width: 560px !important;
    margin: 0 auto !important;
}

/* Section badge pill */
.section-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(var(--primary-rgb,26,95,42), .09) !important;
    color: var(--primary-color, #1a5f2a) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    margin-bottom: .6rem !important;
}
.section-badge-wrap { margin-bottom: .35rem !important; }

/* Section divider line */
.section-divider {
    width: 48px !important;
    height: 3px !important;
    background: var(--primary-color, #1a5f2a) !important;
    border-radius: 2px !important;
    margin: .65rem auto 1rem !important;
}

/* Section padding uniform */
.section-padding,
.section-py {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

/* ═══════════════════════════════════════════════════
   4. CARDS — Clean, consistent shadow & hover
   ═══════════════════════════════════════════════════ */
.card {
    border-radius: 14px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
    overflow: hidden !important;
    background: #fff !important;
}
.card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(var(--primary-rgb,26,95,42),.11) !important;
    border-color: rgba(var(--primary-rgb,26,95,42),.2) !important;
}
.card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #111827 !important;
}
.card-header {
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-weight: 600 !important;
    padding: .85rem 1.25rem !important;
}
.card-body { padding: 1.4rem !important; }
.card-footer {
    background: #f9fafb !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* Service cards */
.service-card,
.service-card-modern {
    border-radius: 14px !important;
    transition: transform .22s, box-shadow .22s !important;
}
.service-card:hover,
.service-card-modern:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb,26,95,42),.14) !important;
}

/* Form cards */
.form-card {
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
    border: 1px solid #e5e7eb !important;
    padding: 1.75rem !important;
}
.form-card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--primary-dark, #144a21) !important;
    border-bottom: 2px solid #f0f8f2 !important;
    padding-bottom: .65rem !important;
    margin-bottom: 1.25rem !important;
}

/* ═══════════════════════════════════════════════════
   5. BUTTONS — Professional, consistent
   ═══════════════════════════════════════════════════ */
.btn {
    font-family: 'Mukta', 'Noto Sans Devanagari', sans-serif !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    letter-spacing: .01em !important;
    transition: all .2s ease !important;
}
.btn-lg { padding: .65rem 1.75rem !important; font-size: 1rem !important; }
.btn-sm { padding: .28rem .8rem !important; font-size: .82rem !important; }

.btn-primary {
    background: var(--primary-color, #1a5f2a) !important;
    border-color: var(--primary-color, #1a5f2a) !important;
    color: var(--text-on-primary, #fff) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--primary-dark, #144a21) !important;
    border-color: var(--primary-dark, #144a21) !important;
    color: var(--text-on-primary, #fff) !important;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb,26,95,42),.28) !important;
    transform: translateY(-1px) !important;
}
.btn-outline-primary {
    color: var(--primary-color, #1a5f2a) !important;
    border-color: var(--primary-color, #1a5f2a) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--primary-color, #1a5f2a) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb,26,95,42),.22) !important;
}

/* Home page specific btn overrides */
.home-btn-primary {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary, #fff) !important;
}
.home-btn-primary:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: var(--text-on-primary, #fff) !important;
    transform: translateY(-1px) !important;
}

/* View-all buttons */
.view-all-btn {
    border-radius: 10px !important;
    padding: .6rem 1.6rem !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════
   6. FORMS — Clean, accessible, consistent
   ═══════════════════════════════════════════════════ */
.form-label {
    font-weight: 600 !important;
    font-size: .88rem !important;
    color: #374151 !important;
    margin-bottom: .35rem !important;
    letter-spacing: .01em !important;
}
.form-control,
.form-select {
    font-family: 'Mukta', 'Noto Sans Devanagari', sans-serif !important;
    font-size: .96rem !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
    color: #1f2937 !important;
    background: #fff !important;
    transition: border-color .18s, box-shadow .18s !important;
    line-height: 1.5 !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color, #1a5f2a) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.12) !important;
    outline: none !important;
    background: #fff !important;
}
.form-control::placeholder { color: #9ca3af !important; font-size: .9rem !important; }
textarea.form-control { min-height: 110px !important; resize: vertical !important; }

.input-group-text {
    background: #f5f7fa !important;
    border: 1.5px solid #d1d5db !important;
    color: #6b7280 !important;
    font-size: .88rem !important;
    border-radius: 10px 0 0 10px !important;
    min-height: 44px !important;
}

/* Required asterisk */
.req, .text-danger.req { color: #dc3545 !important; font-size: .72em !important; }

/* Form section heading */
.form-section-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--primary-dark, #144a21) !important;
    border-left: 3px solid var(--primary-color) !important;
    padding-left: .75rem !important;
    margin-bottom: 1rem !important;
    margin-top: 1.5rem !important;
}

/* ═══════════════════════════════════════════════════
   7. TABLES — Clean professional
   ═══════════════════════════════════════════════════ */
.table {
    font-size: .91rem !important;
    color: #374151 !important;
}
.table thead th {
    background: rgba(var(--primary-rgb,26,95,42),.06) !important;
    color: #1a2e1f !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid rgba(var(--primary-rgb,26,95,42),.15) !important;
    padding: .7rem .9rem !important;
    white-space: nowrap !important;
}
.table td {
    padding: .65rem .9rem !important;
    vertical-align: middle !important;
    border-color: #f3f4f6 !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(var(--primary-rgb,26,95,42),.025) !important;
}
.table-hover > tbody > tr:hover > * {
    background: rgba(var(--primary-rgb,26,95,42),.055) !important;
}
.table-responsive { border-radius: 12px !important; overflow: hidden !important; }

/* ═══════════════════════════════════════════════════
   8. ALERTS & BADGES — Soft pill style
   ═══════════════════════════════════════════════════ */
.alert {
    border-radius: 10px !important;
    border-left-width: 4px !important;
    font-size: .92rem !important;
    padding: .85rem 1.1rem !important;
}
.alert i { margin-right: 6px !important; }

.badge {
    font-family: 'Mukta', sans-serif !important;
    font-weight: 600 !important;
    font-size: .73em !important;
    border-radius: 6px !important;
    padding: .28em .65em !important;
    letter-spacing: .02em !important;
}

/* New/latest badge on cards */
.new-badge, .new-badge-modern {
    background: var(--primary-color) !important;
    color: #fff !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 5px !important;
    letter-spacing: .03em !important;
}
.latest-badge {
    background: rgba(var(--primary-rgb,26,95,42),.12) !important;
    color: var(--primary-color) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 5px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
}

/* ═══════════════════════════════════════════════════
   9. ICONS — Consistent size & alignment
   ═══════════════════════════════════════════════════ */
/* Section icon circles */
.service-icon,
.service-icon-modern {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    background: rgba(var(--primary-rgb,26,95,42),.09) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1rem !important;
    transition: background .2s, color .2s !important;
}
.service-icon i,
.service-icon-modern i {
    font-size: 1.5rem !important;
    color: var(--primary-color) !important;
    transition: color .2s !important;
}
.service-card:hover .service-icon,
.service-card-modern:hover .service-icon-modern {
    background: var(--primary-color) !important;
}
.service-card:hover .service-icon i,
.service-card-modern:hover .service-icon-modern i {
    color: #fff !important;
}

/* Tools widget icons */
.tools-mini-link {
    border-radius: 12px !important;
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s !important;
    min-height: 0 !important;
    border: 1.5px solid rgba(var(--primary-rgb,26,95,42), .10) !important;
}
.tools-mini-link:hover {
    transform: translateY(-2px) !important;
}
.tools-mini-link i {
    width: 44px !important; height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 1.15rem !important;
    color: var(--primary-color) !important;
    background: rgba(var(--primary-rgb,26,95,42), .09) !important;
    transition: background .2s, color .2s, transform .18s !important;
    flex-shrink: 0 !important; margin-bottom: 0 !important; box-shadow: none !important;
}
.tools-mini-link:hover i {
    background: var(--primary-color) !important;
    color: var(--text-on-primary, #fff) !important;
    transform: scale(1.06) !important;
}

/* Footer contact icons */
.footer-contact li i {
    color: rgba(255,255,255,.75) !important;
    width: 18px !important;
    text-align: center !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    margin-top: 3px !important;
}

/* Inline text icons */
.btn i, a i {
    vertical-align: -1px !important;
}

/* ═══════════════════════════════════════════════════
   10. PAGE BANNER — Clean, consistent across pages
   ═══════════════════════════════════════════════════ */
.page-banner {
    padding: 26px 0 30px !important;
}
.page-banner h1 {
    font-size: clamp(1.15rem, 3vw, 1.6rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
}
.page-banner p {
    color: rgba(255,255,255,.82) !important;
    font-size: .95rem !important;
}

/* ═══════════════════════════════════════════════════
   11. INTEREST RATES TABLE — Special styling
   ═══════════════════════════════════════════════════ */
.interest-rate-value {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    font-variant-numeric: tabular-nums !important;
}
.rate-row:hover { background: rgba(var(--primary-rgb,26,95,42),.04) !important; }

/* ═══════════════════════════════════════════════════
   12. NOTICES / NEWS — Card list style
   ═══════════════════════════════════════════════════ */
.notice-item, .news-item {
    border-left: 3px solid transparent !important;
    transition: border-color .18s, background .18s !important;
    border-radius: 0 8px 8px 0 !important;
}
.notice-item:hover, .news-item:hover {
    border-left-color: var(--primary-color) !important;
    background: rgba(var(--primary-rgb,26,95,42),.04) !important;
}

/* ═══════════════════════════════════════════════════
   13. FOOTER — Professional, clean
   ═══════════════════════════════════════════════════ */
.main-footer {
    font-size: .91rem !important;
    line-height: 1.75 !important;
}
.footer-top {
    padding: 52px 0 36px !important;
}
.footer-widget h4 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    margin-bottom: 1.1rem !important;
    text-transform: uppercase !important;
}
.footer-links { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.footer-links li { margin-bottom: .45rem !important; }
.footer-links a {
    font-size: .9rem !important;
    opacity: .82 !important;
    transition: opacity .15s, padding-left .15s !important;
    text-decoration: none !important;
}
.footer-links a:hover {
    opacity: 1 !important;
    padding-left: 4px !important;
}
.footer-contact { list-style: none !important; padding: 0 !important; }
.footer-contact li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin-bottom: .6rem !important;
    font-size: .9rem !important;
    opacity: .88 !important;
    line-height: 1.5 !important;
}
.footer-social {
    display: flex !important;
    gap: 8px !important;
    margin-top: 1rem !important;
}
.footer-social a {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.14) !important;
    transition: background .18s, transform .18s !important;
    text-decoration: none !important;
}
.footer-social a:hover {
    background: rgba(255,255,255,.28) !important;
    transform: translateY(-2px) !important;
}
.footer-bottom {
    padding: 14px 0 !important;
    font-size: .8rem !important;
}
.footer-bottom .container {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: space-between !important;
}
.footer-policy-links {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    font-size: .78rem !important;
}
.footer-policy-links a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    opacity: .75 !important;
    text-decoration: none !important;
    transition: opacity .15s !important;
}
.footer-policy-links a:hover { opacity: 1 !important; }
.visitor-counter {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    font-size: .78rem !important;
    opacity: .72 !important;
}
.visitor-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.developer {
    font-size: .78rem !important;
    opacity: .72 !important;
    margin: 0 !important;
}
.developer a { opacity: 1 !important; text-decoration: underline !important; }

/* ═══════════════════════════════════════════════════
   14. FLOATING ELEMENTS — WhatsApp, Useful Links
   ═══════════════════════════════════════════════════ */
.whatsapp-float {
    right: 18px !important;
    bottom: 80px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
}

/* ═══════════════════════════════════════════════════
   15. EMPTY STATE — Uniform across all pages
   ═══════════════════════════════════════════════════ */
.empty-state {
    text-align: center !important;
    padding: 3.5rem 1.5rem !important;
    color: #9ca3af !important;
}
.empty-state i {
    font-size: 2.75rem !important;
    opacity: .3 !important;
    display: block !important;
    margin-bottom: .85rem !important;
}

/* ═══════════════════════════════════════════════════
   16. ACCESSIBILITY — Focus visible
   ═══════════════════════════════════════════════════ */
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible {
    outline: 2px solid var(--primary-color, #1a5f2a);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════
   17. MOBILE — Touch-friendly, readable
   ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .btn { min-height: 44px; padding: 10px 18px !important; }
    .form-control, .form-select { font-size: 16px !important; }
    .section-padding, .section-py { padding-top: 48px !important; padding-bottom: 48px !important; }
    .card-body { padding: 1.1rem !important; }
    .form-card { padding: 1.1rem !important; }
    .footer-top { padding: 36px 0 24px !important; }
    .footer-bottom .container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    h1 { font-size: 1.45rem !important; }
    h2 { font-size: 1.25rem !important; }
}

@media (max-width: 480px) {
    .section-badge { font-size: .72rem !important; }
    .footer-policy-links { gap: 4px !important; font-size: .74rem !important; }
}

/* ═══════════════════════════════════════════════════
   18. HOME BUTTON/LINK UTILITIES (previously inline)
   ═══════════════════════════════════════════════════ */
.home-btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-on-primary, #fff);
}
.home-btn-primary:hover,
.home-btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--text-on-primary, #fff);
}
.home-link-primary { color: var(--primary-color) !important; }
.home-link-primary:hover { color: var(--primary-dark) !important; }
.home-btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}
.home-btn-outline-primary:hover {
    background: var(--primary-color);
    color: var(--text-on-primary, #fff);
}
.home-btn-outline-secondary {
    border-color: var(--text-muted, #9ca3af);
    color: var(--text-secondary, #6b7280);
    background: transparent;
}
.home-btn-outline-secondary:hover {
    background: var(--text-muted, #9ca3af);
    color: #fff;
}
.home-muted-icon { color: var(--text-muted, #9ca3af) !important; }

/* ═══════════════════════════════════════════════════
   19. HERO SLIDER — index.php inline styles moved here
   ═══════════════════════════════════════════════════ */
.hero-carousel-modern {
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(var(--primary-rgb,26,95,42), .15);
}
.hero-inner-modern,
.hero-slide-modern { height: 500px; }
.hero-slide-modern { position: relative; overflow: hidden; }

.hero-bg-modern {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute; inset: 0;
}
.hero-bg-modern::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,.32), rgba(0,0,0,.10));
    z-index: 1;
}
.hero-overlay-modern {
    background: linear-gradient(135deg,
        rgba(var(--primary-rgb,26,95,42), .68),
        rgba(var(--primary-rgb,26,95,42), .28));
    z-index: 2;
}
.hero-content-modern {
    z-index: 3; position: relative; height: 100%;
    display: flex; align-items: center; justify-content: flex-start;
    text-align: left; padding: 2rem;
}
.hero-text-wrapper {
    max-width: 600px;
    display: flex; flex-direction: column; align-items: flex-start;
    animation: heroTextSlide .9s ease-out both;
}
@keyframes heroTextSlide {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-title-modern {
    font-size: clamp(1.6rem, 4vw, 2.5rem) !important;
    font-weight: 900 !important;
    color: #fff !important;
    margin-bottom: .9rem;
    text-shadow: 0 3px 10px rgba(0,0,0,.28);
    line-height: 1.4 !important;
}
.hero-subtitle-modern {
    font-size: clamp(.95rem, 2vw, 1.2rem) !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.9) !important;
    margin-bottom: 1.8rem;
    text-shadow: 0 2px 6px rgba(0,0,0,.24);
    line-height: 1.7 !important;
}
.hero-actions-modern {
    animation: heroTextSlide .9s ease-out .25s both;
}
.hero-btn-modern {
    background: var(--primary-color);
    color: var(--text-on-primary, #fff);
    padding: .85rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: .5rem;
    position: relative; overflow: hidden;
    transition: all .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb,26,95,42), .32);
    border: none;
}
.hero-btn-modern::before {
    content: '';
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transition: left .45s ease;
}
.hero-btn-modern:hover::before { left: 100%; }
.hero-btn-modern:hover {
    background: var(--primary-dark);
    color: var(--text-on-primary, #fff);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--primary-rgb,26,95,42), .4);
    text-decoration: none;
}
.hero-btn-modern .btn-icon { transition: transform .28s ease; }
.hero-btn-modern:hover .btn-icon { transform: translateX(4px); }
.btn-shine {
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    transition: left .45s ease;
}
.hero-btn-modern:hover .btn-shine { left: 100%; }

/* Carousel indicators */
.hero-indicators-modern { bottom: 28px; z-index: 10; }
.hero-indicator-btn {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.3);
    border: 2px solid rgba(255,255,255,.5);
    margin: 0 5px;
    transition: all .25s ease; position: relative; overflow: hidden;
}
.hero-indicator-btn:hover { background: rgba(255,255,255,.6); transform: scale(1.2); }
.hero-indicator-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.25);
}
.indicator-dot {
    display: block; width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.8); transition: all .25s ease;
}
.hero-indicator-btn.active .indicator-dot { background: #fff; }

@media (max-width: 768px) {
    .hero-inner-modern, .hero-slide-modern { height: 380px; }
    .hero-content-modern { padding: 1.5rem; }
    .hero-indicators-modern { bottom: 14px; }
}
@media (max-width: 480px) {
    .hero-inner-modern, .hero-slide-modern { height: 320px; }
    .hero-content-modern { padding: 1rem; }
}

/* ═══════════════════════════════════════════════════
   19. INSTITUTIONAL PROFILE BAR
   ═══════════════════════════════════════════════════ */
.institutional-profile-section { padding: 0; }
.institutional-profile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--bg-card, #fff);
    border-radius: 14px;
    padding: 16px 24px;
    margin: 20px 0;
    box-shadow: 0 2px 12px rgba(var(--primary-rgb,26,95,42), .08);
    border: 1px solid rgba(var(--primary-rgb,26,95,42), .1);
}
.profile-title {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 1rem;
    color: var(--primary-dark, #144a21);
    text-decoration: none;
    transition: color .18s;
}
.profile-title:hover { color: var(--primary-color); }
.profile-title i { font-size: 1.2rem; color: var(--primary-color); }
.profile-reports {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.report-quick-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: .85rem; font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
    border: 1.5px solid var(--border-color, #e5e7eb);
    color: var(--text-secondary, #4a5568);
    background: #fff;
}
.report-quick-link:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(var(--primary-rgb,26,95,42), .05);
}
.report-quick-link i { font-size: .9rem; }
@media (max-width: 575px) {
    .institutional-profile-bar { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════
   20. SERVICE CARDS — homepage
   ═══════════════════════════════════════════════════ */
.service-card-modern {
    background: #fff;
    border: 1.5px solid rgba(var(--primary-rgb,26,95,42), .1);
    border-radius: 16px;
    padding: 2rem;
    transition: all .28s cubic-bezier(.4,0,.2,1);
    position: relative; overflow: hidden;
    box-shadow: 0 2px 12px rgba(var(--primary-rgb,26,95,42), .07);
    height: 100%;
}
.service-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(var(--primary-rgb,26,95,42), .14);
    border-color: rgba(var(--primary-rgb,26,95,42), .25);
}
.service-title-modern {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: .6rem;
}
.service-description-modern {
    font-size: .92rem !important;
    color: #6b7280 !important;
    line-height: 1.7 !important;
    margin-bottom: 1.25rem;
}
.service-link-modern {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .88rem; font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: gap .2s ease, color .2s ease;
}
.service-link-modern:hover {
    color: var(--primary-dark);
    gap: 10px;
}
.service-link-modern .link-icon { font-size: .8rem; transition: transform .2s; }
.service-link-modern:hover .link-icon { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════
   21. TOOLS WIDGET — Digital services section
   ═══════════════════════════════════════════════════ */
.tools-widget-section { padding: 60px 0; background: var(--bg-soft, #f5faf6); }

.tools-category-card {
    background: var(--white, #fff);
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1.5rem;
    box-shadow: 0 2px 12px rgba(var(--primary-rgb,26,95,42), .07);
    border: 1px solid rgba(var(--primary-rgb,26,95,42), .1);
    height: 100%;
}
.tools-category-card h5 {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: var(--primary-dark, #144a21) !important;
    margin: 0 0 .9rem !important;
    padding: 8px 10px !important;
    background: rgba(var(--primary-rgb,26,95,42), .07) !important;
    border-radius: 8px !important;
    border-bottom: none !important;
    animation: none !important;
}
.tools-category-card h5 i {
    background: var(--primary-color) !important;
    color: var(--text-on-primary, #fff) !important;
    border-radius: 6px !important;
    width: 22px !important; height: 22px !important;
    font-size: .75rem !important;
}
.tools-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.tools-mini-link {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 7px;
    padding: 14px 8px;
    border-radius: 12px;
    background: var(--white, #fff);
    text-decoration: none;
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
    border: 1.5px solid rgba(var(--primary-rgb,26,95,42), .10);
    text-align: center; position: relative;
    min-height: 0;
}
.tools-mini-link:hover {
    background: rgba(var(--primary-rgb,26,95,42), .05);
    border-color: rgba(var(--primary-rgb,26,95,42), .2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb,26,95,42), .1);
}
.tools-mini-link i {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    color: var(--primary-color);
    background: rgba(var(--primary-rgb,26,95,42), .09);
    transition: background .2s, color .2s, transform .18s;
    flex-shrink: 0;
    margin-bottom: 0;
}
.tools-mini-link:hover i {
    background: var(--primary-color);
    color: var(--text-on-primary, #fff);
    transform: scale(1.06);
}
.tools-mini-link span {
    font-size: .8rem; font-weight: 700;
    color: var(--text-color, #333); line-height: 1.25;
}
.tools-mini-link:hover span { color: var(--primary-dark); }
.tools-mini-link .tools-mini-more {
    font-size: .68rem; color: var(--text-muted, #9ca3af); display: block; line-height: 1.2;
}
.tools-mini-link:hover .tools-mini-more { color: var(--primary-color); }
.tools-link-badge {
    position: absolute; top: 5px; right: 5px;
    background: var(--primary-color);
    color: var(--text-on-primary, #fff);
    font-size: .56rem; font-weight: 700;
    padding: 2px 5px; border-radius: 4px;
    letter-spacing: .03em; z-index: 2;
}

/* ═══════════════════════════════════════════════════
   22. INTEREST RATES + NOTICES BOX
   ═══════════════════════════════════════════════════ */
.rates-notices-section { background: #f8faf9; }

.rates-box-enhanced,
.notices-box-enhanced {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
}
.rates-header,
.notices-header {
    background: linear-gradient(135deg,
        var(--primary-dark, #144a21),
        var(--primary-color, #1a5f2a));
    padding: 14px 20px;
    color: #fff;
}
.rates-header h3,
.notices-header h3 {
    margin: 0;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    display: flex; align-items: center; gap: 8px;
}
.rates-header h3 i,
.notices-header h3 i { font-size: .95rem; }

.rates-body, .notices-body { padding: 1.25rem; flex: 1; }
.notices-footer { padding: 12px 20px; border-top: 1px solid #f0f0f0; }

.rate-card-enhanced {
    background: var(--bg-soft, #f5faf6);
    border-radius: 10px;
    padding: 1rem;
    height: 100%;
}
.rate-card-enhanced h5 {
    font-size: .88rem !important;
    font-weight: 700 !important;
    color: var(--primary-dark, #144a21) !important;
    margin-bottom: .75rem;
    display: flex; align-items: center; gap: 6px;
}
.rate-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(var(--primary-rgb,26,95,42), .07);
    font-size: .88rem;
}
.rate-item:last-child { border-bottom: none; }
.rate-name { color: #374151; flex: 1; }
.rate-value {
    font-weight: 800; font-size: 1rem;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Notices list */
.notice-item-enhanced {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    transition: background .18s;
}
.notice-item-enhanced:last-child { border-bottom: none; }
.notice-date-box {
    flex-shrink: 0;
    width: 42px; height: 48px;
    background: rgba(var(--primary-rgb,26,95,42), .08);
    border-radius: 8px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
}
.notice-date-box .day {
    font-size: 1.1rem; font-weight: 800;
    color: var(--primary-color); line-height: 1;
}
.notice-date-box .month {
    font-size: .65rem; font-weight: 600;
    color: var(--text-muted, #6b7280); text-transform: uppercase;
}
.notice-content { flex: 1; min-width: 0; }
.notice-content h6 {
    font-size: .88rem !important; font-weight: 600 !important;
    margin-bottom: 2px; line-height: 1.4 !important;
    color: #111827 !important;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.notice-content h6 a { color: inherit; text-decoration: none; }
.notice-content h6 a:hover { color: var(--primary-color); }
.notice-meta { font-size: .72rem; color: #9ca3af; display: flex; align-items: center; gap: 4px; }

/* ═══════════════════════════════════════════════════
   23. WHY CHOOSE US — feature boxes
   ═══════════════════════════════════════════════════ */
.why-us-section { background: #fff; }
.feature-box {
    background: #fff;
    border-radius: 14px;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: all .25s ease;
    height: 100%;
}
.feature-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(var(--primary-rgb,26,95,42), .12);
    border-color: rgba(var(--primary-rgb,26,95,42), .2);
}
.feature-icon {
    width: 60px; height: 60px;
    background: rgba(var(--primary-rgb,26,95,42), .09);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.1rem;
    transition: background .25s;
}
.feature-icon i {
    font-size: 1.6rem;
    color: var(--primary-color);
    transition: color .25s;
}
.feature-box:hover .feature-icon { background: var(--primary-color); }
.feature-box:hover .feature-icon i { color: #fff; }
.feature-box h5 {
    font-size: 1rem !important; font-weight: 700 !important;
    color: #111827 !important; margin-bottom: .5rem;
}
.feature-box p { font-size: .9rem !important; color: #6b7280 !important; margin: 0; }

/* ═══════════════════════════════════════════════════
   24. LEADERSHIP PROFILE CARDS
   ═══════════════════════════════════════════════════ */
.leadership-messages-section { background: var(--bg-soft, #f5faf6); }
.leadership-profile-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .25s, box-shadow .25s;
    height: 100%;
}
.leadership-profile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(var(--primary-rgb,26,95,42), .12);
}
.profile-photo {
    width: 100%; height: 200px; overflow: hidden;
    background: rgba(var(--primary-rgb,26,95,42), .07);
    position: relative;
}
.profile-photo img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: top;
}
.photo-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.photo-placeholder i { font-size: 3.5rem; color: rgba(var(--primary-rgb,26,95,42), .25); }
.profile-info { padding: 1.1rem 1.1rem .5rem; flex: 1; }
.profile-info h4 {
    font-size: .97rem !important; font-weight: 700 !important;
    color: #111827 !important; margin-bottom: .2rem;
}
.profile-position {
    display: inline-block;
    font-size: .75rem; font-weight: 600;
    background: rgba(var(--primary-rgb,26,95,42), .09);
    color: var(--primary-color);
    padding: 2px 10px; border-radius: 20px;
    margin-bottom: .6rem;
}
.profile-message {
    font-size: .86rem !important; color: #6b7280 !important;
    line-height: 1.65 !important; margin: 0;
}
.profile-btn {
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 1.1rem;
    font-size: .82rem; font-weight: 600;
    color: var(--primary-color);
    border-top: 1px solid #f0f0f0;
    text-decoration: none;
    transition: background .18s, color .18s;
}
.profile-btn:hover {
    background: rgba(var(--primary-rgb,26,95,42), .05);
    color: var(--primary-dark);
}
.officer-badge {
    position: absolute;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.officer-badge i { font-size: .75rem; color: #fff; }
.officer-badge.grievance { background: var(--secondary-color, #c0392b); }
.officer-contact-info { margin-top: .5rem; display: flex; flex-direction: column; gap: 4px; }
.officer-contact-info a {
    font-size: .78rem; color: #6b7280; text-decoration: none;
    display: flex; align-items: center; gap: 5px;
    transition: color .18s;
}
.officer-contact-info a:hover { color: var(--primary-color); }

/* ═══════════════════════════════════════════════════
   25. MOBILE APP SECTION
   ═══════════════════════════════════════════════════ */
.mobile-app-section {
    padding: 72px 0;
    background: linear-gradient(135deg,
        var(--primary-dark, #144a21) 0%,
        var(--primary-color, #1a5f2a) 100%);
    position: relative; overflow: hidden;
}
.mobile-app-section::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.app-content { position: relative; z-index: 1; }
.home-heading-unified {
    color: #fff !important;
    font-size: clamp(1.4rem, 3vw, 2rem) !important;
    font-weight: 800 !important;
    margin-bottom: .4rem;
}
.app-content h3 { color: rgba(255,255,255,.85) !important; font-size: 1.1rem !important; font-weight: 500 !important; }
.app-tagline { color: rgba(255,255,255,.9) !important; font-weight: 600; margin-bottom: .35rem; }
.app-description { color: rgba(255,255,255,.75) !important; font-size: .95rem !important; }
.app-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.5rem; }
.app-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 12px;
    padding: .7rem 1.3rem;
    color: #fff; text-decoration: none;
    transition: all .22s ease;
    backdrop-filter: blur(4px);
}
.app-btn:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.5);
    color: #fff;
    transform: translateY(-2px);
}
.app-btn i { font-size: 1.5rem; }
.app-btn span { display: flex; flex-direction: column; }
.app-btn span small { font-size: .68rem; opacity: .8; text-transform: uppercase; letter-spacing: .04em; }
.app-btn span { font-size: .95rem; font-weight: 700; }
.app-phone-img { max-width: 280px; filter: drop-shadow(0 16px 32px rgba(0,0,0,.28)); position: relative; z-index: 1; }
.app-mockup-default {
    display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;
}
.phone-frame {
    width: 180px; height: 320px;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.25);
    border-radius: 28px;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
}
.phone-screen {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: rgba(255,255,255,.7);
}
.phone-screen i { font-size: 3rem; }
.phone-screen span { font-size: .85rem; font-weight: 600; }
@media (max-width: 767px) {
    .mobile-app-section { padding: 48px 0; }
    .app-image { margin-top: 2rem; }
}

/* ═══════════════════════════════════════════════════
   27. PAGE BANNER MODERN (about.php + shared inner pages)
   ═══════════════════════════════════════════════════ */
.page-banner-modern {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: 3.5rem 0;
    position: relative;
    overflow: hidden;
}
.page-banner-modern::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    animation: bannerShimmer 4s infinite;
}
@keyframes bannerShimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}
.banner-content-modern {
    position: relative;
    z-index: 2;
    text-align: center;
}
.page-title-modern {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .9rem;
    text-shadow: 0 3px 12px rgba(0,0,0,.25);
}
.breadcrumb-modern {
    background: rgba(255,255,255,.12);
    border-radius: 25px;
    padding: .45rem .9rem;
    display: inline-flex;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.breadcrumb-modern .breadcrumb-item { color: rgba(255,255,255,.82); font-weight: 600; }
.breadcrumb-modern .breadcrumb-item a {
    color: #fff;
    text-decoration: none;
    padding: .2rem .45rem;
    border-radius: 10px;
    transition: background .18s;
}
.breadcrumb-modern .breadcrumb-item a:hover { background: rgba(255,255,255,.2); }
.breadcrumb-modern .breadcrumb-item.active { color: #fff; font-weight: 700; }
.breadcrumb-link-modern { color: rgba(255,255,255,.9); transition: color .18s; }
.breadcrumb-link-modern:hover { color: #fff; }

/* ── About content box ── */
.about-content-box {
    background: var(--bg-card, #fff);
    border: 1.5px solid rgba(var(--primary-rgb,26,95,42), .1);
    border-radius: 16px;
    padding: 2.25rem;
    box-shadow: 0 6px 28px rgba(var(--primary-rgb,26,95,42), .1);
    transition: transform .28s, box-shadow .28s;
    position: relative;
    overflow: hidden;
}
.about-content-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(var(--primary-rgb,26,95,42), .16);
    border-color: rgba(var(--primary-rgb,26,95,42), .22);
}
.about-content-box .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--text-on-primary, #fff);
    padding: 7px 18px;
    border-radius: 25px;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 14px;
}
.about-content-box h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
}
.about-divider, .history-divider {
    width: 72px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
    margin-bottom: 22px;
}
.intro-text { color: var(--text-color, #333); line-height: 1.85; font-size: 1rem; }
.intro-text p { margin-bottom: 14px; }
.history-empty-photo { text-align: center; color: var(--text-muted, #999); padding: 20px; }
.history-empty-photo-icon { opacity: .4; }
.history-empty-photo-note { opacity: .5; font-size: .8rem; }
.history-photo-cover { width: 100%; height: 350px; object-fit: cover; border-radius: 12px; }

/* ── About image side box ── */
.about-image-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(var(--primary-rgb,26,95,42), .13);
}
.about-image-box-side {
    min-height: 100%;
    background: rgba(var(--primary-rgb,26,95,42), .05);
}
.about-side-badge {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-on-primary, #fff);
    background: rgba(var(--primary-rgb,26,95,42), .88);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.about-image-box img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    transition: transform .45s ease;
}
.about-image-box:hover img { transform: scale(1.03); }
.about-year-badge {
    position: absolute;
    bottom: 18px; right: 18px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--text-on-primary, #fff);
    padding: 12px 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb,26,95,42), .28);
}
.about-year-badge .year { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.about-year-badge .text { font-size: .78rem; opacity: .9; }

/* ── Section tag (shared) ── */
.section-tag {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    color: var(--text-on-primary, #fff);
    padding: .45rem .9rem;
    border-radius: 25px;
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* ── Notices inline utilities (notices.php) ── */
.nts-btn-primary { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary, #fff); }
.nts-btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-on-primary, #fff); }
.nts-empty-icon { color: var(--text-muted, #999); }
.nts-muted { color: var(--text-muted, #999) !important; }

/* ── History section v2 ── */
.history-section-v2 {
    background: linear-gradient(135deg, rgba(var(--primary-rgb,26,95,42),.06) 0%, rgba(var(--primary-rgb,26,95,42),.12) 100%);
    position: relative;
    overflow: hidden;
}
.history-section-v2::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(var(--primary-rgb,26,95,42),.07), transparent 70%);
    border-radius: 50%;
}
.history-image-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(var(--primary-rgb,26,95,42),.18);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    min-height: 320px;
}
.history-image-box img { width: 100%; height: 100%; object-fit: cover; }
.history-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
}
.history-icon-float {
    width: 72px; height: 72px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.history-icon-float i { font-size: 30px; color: var(--text-on-primary, #fff); }
.history-image-box.history-icon-only { display: flex; align-items: center; justify-content: center; min-height: 360px; }
.history-icon-center {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100px; height: 100px;
    animation: floatIcon 3s ease-in-out infinite;
}
.history-icon-center i {
    font-size: 46px;
    color: rgba(255,255,255,.9);
    position: relative; z-index: 2;
}
.history-icon-ring {
    position: absolute;
    width: 140px; height: 140px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.22);
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    animation: pulseRing 2.5s ease-in-out infinite;
}
@keyframes pulseRing {
    0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: .5; }
    50%       { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
}
.history-badge {
    position: absolute;
    top: 14px; left: 14px;
    width: 40px; height: 40px;
    background: var(--secondary-color);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-on-primary, #fff);
    font-size: 15px; z-index: 2;
    box-shadow: 0 5px 16px rgba(var(--primary-rgb,26,95,42),.25);
}
.history-year-badge {
    position: absolute;
    bottom: 18px; right: 18px;
    background: #fff;
    color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 28px;
    font-size: 1.1rem; font-weight: 700; z-index: 2;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.history-content-v2 .section-tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--text-on-primary, #fff);
    padding: 7px 18px; border-radius: 25px;
    font-size: .875rem; font-weight: 600; margin-bottom: 18px;
}
.history-content-v2 h2 { font-size: 2.2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 12px; }
.history-text { color: var(--text-light, #666); line-height: 1.9; font-size: 1rem; }

/* ── Vision & Mission cards v2 ── */
.vision-card-v2 {
    background: #fff;
    border-radius: 20px;
    padding: 36px 30px;
    position: relative; overflow: hidden;
    box-shadow: 0 12px 48px rgba(var(--primary-rgb,26,95,42),.1);
    transition: transform .35s, box-shadow .35s;
    height: 100%;
}
.vision-card-v2:hover { transform: translateY(-8px); box-shadow: 0 24px 64px rgba(var(--primary-rgb,26,95,42),.16); }
.vision-card-v2::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
}
.vision-card-v2.mission::before { background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); }
.vision-card-glow {
    position: absolute; top: -90px; right: -90px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(var(--primary-rgb,26,95,42),.08), transparent 70%);
    border-radius: 50%;
}
.vision-card-v2.mission .vision-card-glow { background: radial-gradient(circle, rgba(var(--primary-rgb,26,95,42),.06), transparent 70%); }
.vision-icon-v2 {
    width: 72px; height: 72px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 12px 32px rgba(var(--primary-rgb,26,95,42),.22);
    position: relative; z-index: 1;
}
.vision-card-v2.mission .vision-icon-v2 { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); }
.vision-icon-v2 i { font-size: 28px; color: var(--text-on-primary, #fff); }
.vision-card-content { position: relative; z-index: 1; }
.vision-card-content h4 { font-size: 1.4rem; font-weight: 700; color: var(--primary-color); margin-bottom: 12px; }
.vision-card-v2.mission .vision-card-content h4 { color: var(--secondary-color); }
.vision-card-content p { color: var(--text-light, #666); line-height: 1.8; font-size: 1rem; margin: 0; }
.vision-card-content.coop-prose p { margin-bottom: .85em; }
.vision-card-content.coop-prose p:last-child { margin-bottom: 0; }
.vision-card-decoration {
    position: absolute; bottom: -28px; left: -28px;
    width: 90px; height: 90px;
    border: 3px solid rgba(var(--primary-rgb,26,95,42),.12);
    border-radius: 50%;
}
.vision-card-v2.mission .vision-card-decoration { border-color: rgba(var(--primary-rgb,26,95,42),.1); }

/* ── Value cards ── */
.value-card {
    background: var(--white, #fff);
    padding: 28px 18px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb,26,95,42),.1);
    transition: transform .28s, box-shadow .28s;
}
.value-card:hover { transform: translateY(-5px); box-shadow: 0 8px 36px rgba(var(--primary-rgb,26,95,42),.16); }
.value-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.value-icon i { font-size: 22px; color: var(--text-on-primary, #fff); }
.value-card h5 { margin: 0; font-weight: 600; color: var(--text-color, #333); }

/* ── Responsive ── */
@media (max-width: 991px) {
    .about-content-box h2, .history-content-v2 h2 { font-size: 1.7rem; }
    .history-image-box { min-height: 260px; }
}
@media (max-width: 768px) {
    .page-banner-modern { padding: 2.5rem 0; }
    .page-title-modern { font-size: 1.75rem; }
    .about-content-box { padding: 1.6rem; }
    .history-content-v2 h2 { font-size: 1.6rem; }
    .vision-card-v2 { padding: 28px 22px; }
}
@media (max-width: 480px) {
    .page-banner-modern { padding: 1.75rem 0; }
    .page-title-modern { font-size: 1.5rem; }
    .about-content-box { padding: 1.2rem; }
}

/* ═══════════════════════════════════════════════════
   28. NEWS DETAIL PAGE (news-detail.php)
   ═══════════════════════════════════════════════════ */
.news-detail-article {
    background: var(--white, #fff);
    padding: 28px;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
}
.news-detail-header { margin-bottom: 22px; }
.news-detail-header h1 { font-size: 1.75rem; color: var(--text-color, #333); margin-bottom: 14px; line-height: 1.4; }
.news-meta { display: flex; gap: 18px; color: var(--text-light, #777); font-size: .875rem; flex-wrap: wrap; }
.news-meta i { margin-right: 4px; color: var(--primary-color); }
.news-detail-image { margin-bottom: 22px; border-radius: 10px; overflow: hidden; }
.news-detail-image img { width: 100%; height: auto; }
.news-detail-content { color: var(--text-color, #333); margin-bottom: 28px; }
.news-share {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 0;
    border-top: 1px solid var(--border-color, #eee);
    border-bottom: 1px solid var(--border-color, #eee);
    margin-bottom: 18px;
}
.share-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--white, #fff);
    transition: transform .2s;
}
.share-btn.facebook  { background: #3b5998; }
.share-btn.twitter   { background: #1da1f2; }
.share-btn.whatsapp  { background: #25d366; }
.share-btn:hover     { transform: scale(1.12); color: var(--white, #fff); }
.news-navigation     { text-align: center; }
.sidebar-widget {
    background: var(--white, #fff);
    padding: 22px;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
    margin-bottom: 22px;
}
.widget-title {
    font-size: 1.1rem; color: var(--primary-color);
    margin-bottom: 18px; padding-bottom: 9px;
    border-bottom: 2px solid var(--primary-color);
}
.related-news-item { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border-color, #eee); }
.related-news-item:last-child { border-bottom: none; }
.related-news-image { width: 68px; height: 68px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.related-news-image img { width: 100%; height: 100%; object-fit: cover; }
.related-placeholder {
    width: 100%; height: 100%;
    background: var(--bg-muted, #f0f0f0);
    display: flex; align-items: center; justify-content: center;
    color: var(--border-color, #ccc);
}
.related-news-info h5 { font-size: .875rem; margin-bottom: 4px; line-height: 1.4; }
.related-news-info h5 a { color: var(--text-color, #333); }
.related-news-info h5 a:hover { color: var(--primary-color); }
.related-news-info .date { font-size: .78rem; color: var(--text-light, #777); }
.quick-links { list-style: none; padding: 0; margin: 0; }
.quick-links li { padding: 9px 0; border-bottom: 1px solid var(--border-color, #eee); }
.quick-links li:last-child { border-bottom: none; }
.quick-links a { color: var(--text-color, #333); display: flex; align-items: center; gap: 10px; }
.quick-links a:hover { color: var(--primary-color); }
.quick-links a i { color: var(--primary-color); width: 20px; }
@media (max-width: 767px) {
    .news-detail-article { padding: 18px; }
    .news-detail-header h1 { font-size: 1.35rem; }
}

/* ═══════════════════════════════════════════════════
   29. CONTACT PAGE (contact.php)
   ═══════════════════════════════════════════════════ */
.ct-success-wrap { background: linear-gradient(135deg, rgba(var(--primary-rgb,26,95,42),.1), rgba(var(--primary-rgb,26,95,42),.05)); }
.ct-success-icon  { font-size: 3.5rem; color: var(--primary-light); }
.ct-success-title { color: var(--primary-dark); }
.ct-muted         { color: var(--text-muted, #999) !important; }
.ct-link-dark     { color: var(--text-color, #333); text-decoration: none; }
.ct-btn-primary, .ct-btn-success {
    background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary, #fff);
}
.ct-btn-primary:hover, .ct-btn-success:hover {
    background: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-on-primary, #fff);
}
.ct-icon-lg       { font-size: 2.4rem; color: var(--primary-color); }
.ct-modal-head    { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); color: var(--text-on-primary, #fff); }
.ct-success-block { display: none; }
.ct-success-bigicon { font-size: 4rem; color: var(--primary-color); }
.ct-map-frame     { border: 0; }
.ct-office-bg     { background: var(--bg-soft, #f5faf6); }
.ct-btn-light     { background: rgba(var(--primary-rgb,26,95,42),.07); border: 1px solid rgba(var(--primary-rgb,26,95,42),.14); color: var(--primary-dark); }
.contact-form-modern {
    background: var(--bg-soft, #f5faf6);
    border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.1);
    border-radius: 18px;
    padding: 2.25rem;
    box-shadow: 0 6px 28px rgba(var(--primary-rgb,26,95,42),.1);
    transition: transform .28s, box-shadow .28s;
    position: relative; overflow: hidden;
}
.contact-form-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(var(--primary-rgb,26,95,42),.15);
    border-color: rgba(var(--primary-rgb,26,95,42),.2);
}
.contact-input-modern,
.contact-textarea-modern {
    background: var(--white, #fff);
    border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.1);
    border-radius: 10px;
    padding: .75rem .9rem;
    font-size: 1rem;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}
.contact-input-modern:focus,
.contact-textarea-modern:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.1);
    outline: none;
}
.contact-textarea-modern { min-height: 120px; resize: vertical; }
.contact-btn-modern {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-on-primary, #fff);
    padding: .75rem 2rem;
    border-radius: 24px;
    font-size: 1.05rem; font-weight: 700;
    border: none;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 5px 18px rgba(var(--primary-rgb,26,95,42),.28);
}
.contact-btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--primary-rgb,26,95,42),.36);
}
@media (max-width: 768px) {
    .contact-form-modern { padding: 1.6rem; }
    .contact-input-modern, .contact-textarea-modern { font-size: .95rem; }
    .contact-btn-modern { padding: .65rem 1.4rem; font-size: .95rem; }
}

/* ═══════════════════════════════════════════════════
   30. LOAN APPLY WIZARD (loan-apply.php)
   ═══════════════════════════════════════════════════ */
.loan-wizard-bar { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 2rem; flex-wrap: wrap; }
.loan-wiz-step  { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 80px; position: relative; }
.loan-wiz-circle {
    width: 48px; height: 48px; border-radius: 50%;
    border: 2.5px solid rgba(var(--primary-rgb,26,95,42),.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: var(--text-muted, #aaa);
    background: #fff; transition: all .3s;
}
.loan-wiz-label { font-size: .75rem; color: var(--text-muted, #aaa); font-weight: 500; text-align: center; transition: color .3s; }
.loan-wiz-step.active .loan-wiz-circle { border-color: var(--primary-color); background: var(--primary-color); color: #fff; box-shadow: 0 4px 12px rgba(var(--primary-rgb,26,95,42),.25); }
.loan-wiz-step.active .loan-wiz-label  { color: var(--primary-color); font-weight: 700; }
.loan-wiz-step.done .loan-wiz-circle   { border-color: var(--primary-color); background: rgba(var(--primary-rgb,26,95,42),.12); color: var(--primary-color); }
.loan-wiz-step.done .loan-wiz-label    { color: var(--primary-color); }
.loan-wiz-connector { flex: 1; min-width: 28px; max-width: 60px; height: 2px; background: rgba(var(--primary-rgb,26,95,42),.14); margin-top: -24px; transition: background .3s; }
.loan-wiz-connector.done { background: var(--primary-color); }
.form-section-card {
    background: #fff;
    border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.12);
    border-radius: 14px; padding: 20px 22px; margin-bottom: 0;
    transition: box-shadow .2s, border-color .2s;
}
.form-section-card:hover { border-color: rgba(var(--primary-rgb,26,95,42),.22); box-shadow: 0 4px 16px rgba(var(--primary-rgb,26,95,42),.1); }
.form-section-card-hdr { display: flex; align-items: center; gap: 10px; }
.form-section-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.bg-primary-soft   { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--primary-color); }
.bg-success-soft   { background: rgba(40,167,69,.1); color: #28a745; }
.bg-warning-soft   { background: rgba(255,193,7,.14); color: #856404; }
.bg-info-soft      { background: rgba(13,202,240,.1); color: #0dcaf0; }
.bg-secondary-soft { background: rgba(108,117,125,.1); color: #6c757d; }
.form-success-card--token { border: 2px solid rgba(var(--primary-rgb,26,95,42),.2); }
.loan-wiz-nav { flex-wrap: wrap; }
@media (max-width: 576px) {
    .loan-wizard-bar { gap: 0 2px; }
    .loan-wiz-connector { min-width: 10px; }
    .loan-wiz-label { font-size: .65rem; }
    .loan-wiz-circle { width: 38px; height: 38px; font-size: .82rem; }
    .form-section-card { padding: 14px 12px; }
    #loanSubmitBtn, #loanNextBtn, #loanPrevBtn { width: 100%; }
    .loan-wiz-nav { gap: 8px; }
}

/* ═══════════════════════════════════════════════════
   31. DIGITAL SERVICES PAGE (digital-services.php)
   ═══════════════════════════════════════════════════ */
.ds-service-card {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 17px;
    background: #fff;
    border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.12);
    border-radius: 13px; cursor: pointer;
    transition: all .22s ease;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb,26,95,42),.07);
}
.ds-service-card:hover, .ds-service-card:focus {
    border-color: var(--primary-color);
    box-shadow: 0 5px 18px rgba(var(--primary-rgb,26,95,42),.13);
    transform: translateY(-2px); outline: none;
}
.ds-icon {
    width: 46px; height: 46px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    background: rgba(var(--primary-rgb,26,95,42),.1);
    color: var(--primary-color); flex-shrink: 0;
}
.ds-label { flex: 1; display: flex; flex-direction: column; text-align: left; }
.ds-label strong { font-size: .92rem; color: var(--text-color, #333); line-height: 1.3; }
.ds-label small  { font-size: .76rem; color: var(--text-light, #777); margin-top: 2px; }
.ds-arrow { color: var(--text-muted, #aaa); font-size: .82rem; flex-shrink: 0; }
.ds-service-card:hover .ds-arrow { color: var(--primary-color); }
.ds-conditional-box {
    background: rgba(var(--primary-rgb,26,95,42),.06);
    border: 1px solid rgba(var(--primary-rgb,26,95,42),.18);
    border-radius: 10px; padding: 15px; margin-bottom: 15px;
}
.ds-conditional-label { font-weight: 600; color: var(--primary-color); margin-bottom: 11px; font-size: .875rem; }
.req          { color: var(--secondary-color); margin-left: 2px; }
.form-card-title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: .92rem; color: var(--primary-color);
    padding-bottom: 7px;
    border-bottom: 2px solid rgba(var(--primary-rgb,26,95,42),.12);
}
.font-monospace          { font-family: 'Courier New', monospace; letter-spacing: .08em; }
.ds-muted                { color: var(--text-muted, #999) !important; }
.ds-title-ok             { color: var(--primary-dark); }
.ds-btn-primary, .ds-btn-success {
    background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary, #fff);
}
.ds-btn-primary:hover, .ds-btn-success:hover {
    background: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-on-primary, #fff);
}
.ds-track-copy           { font-size: 11px; line-height: 1.8; }
.ds-track-help-link      { color: var(--primary-color); text-decoration: none; font-weight: 700; }
.ds-step-icon            { font-size: 2rem; }
.ds-step-icon-primary    { color: var(--primary-color); }
.ds-step-icon-secondary  { color: var(--secondary-color); }
.ds-step-icon-light      { color: var(--primary-light); }
.ds-form-card-shell      { border-radius: 13px; overflow: hidden; }
.ds-form-card-head       { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); }
.ds-form-card-sub        { font-size: .83rem; }
.ds-soft-bg              { background: rgba(var(--primary-rgb,26,95,42),.06); }
.ds-req-mark             { color: var(--secondary-color); }
.ds-mid-req              { display: none; }
.conditional-fields      { display: none; }

/* ═══════════════════════════════════════════════════
   32. INTEREST RATES PAGE (interest-rates.php)
   ═══════════════════════════════════════════════════ */
.ir-cta-btn { background: var(--bg-soft,#f5faf6); border: 1px solid rgba(var(--primary-rgb,26,95,42),.16); color: var(--primary-dark); }
.ir-cta-btn:hover { background: rgba(var(--primary-rgb,26,95,42),.08); border-color: rgba(var(--primary-rgb,26,95,42),.22); color: var(--primary-dark); }

/* ═══════════════════════════════════════════════════
   33. INSTITUTIONAL PROFILE PAGE (institutional-profile.php)
   ═══════════════════════════════════════════════════ */
.ip-profile-card {
    background: #fff; border-radius: 14px;
    box-shadow: 0 6px 22px rgba(var(--primary-rgb,26,95,42),.09);
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb,26,95,42),.07);
}
.ip-card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--text-on-primary,#fff);
    padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
}
.ip-fy-badge { font-size: 1rem; font-weight: 700; letter-spacing: .3px; }
.ip-date-info { font-size: .8rem; opacity: .88; }
.ip-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    gap: 0;
    border-bottom: 1px solid rgba(var(--primary-rgb,26,95,42),.08);
}
.ip-stat-item {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 12px;
    border-right: 1px solid rgba(var(--primary-rgb,26,95,42),.07);
    transition: background .18s;
}
.ip-stat-item:last-child { border-right: none; }
.ip-stat-item:hover { background: rgba(var(--primary-rgb,26,95,42),.03); }
.ip-stat-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.ip-stat-primary .ip-stat-icon { background: rgba(var(--primary-rgb,26,95,42),.13); color: var(--primary-color); }
.ip-stat-success .ip-stat-icon { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--primary-light); }
.ip-stat-info    .ip-stat-icon { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--primary-light); }
.ip-stat-teal    .ip-stat-icon { background: rgba(var(--primary-rgb,26,95,42),.08); color: var(--primary-dark); }
.ip-stat-warning .ip-stat-icon { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--secondary-color); }
.ip-stat-purple  .ip-stat-icon { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--primary-dark); }
.ip-stat-value { font-size: .93rem; font-weight: 800; color: var(--text-color,#1a1a1a); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-stat-label { font-size: .72rem; color: var(--text-light,#777); margin-top: 2px; font-weight: 500; }
.ip-stat-sub   { font-size: .66rem; color: var(--primary-light); font-weight: 600; margin-top: 2px; }
.ip-indicators-row {
    display: flex; flex-wrap: wrap; gap: 16px;
    background: rgba(var(--primary-rgb,26,95,42),.03);
    border-top: 1px solid rgba(var(--primary-rgb,26,95,42),.1);
    border-bottom: 1px solid rgba(var(--primary-rgb,26,95,42),.1);
    padding: 11px 14px;
}
.ip-indicator     { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 170px; }
.ip-ind-label     { font-size: .74rem; color: var(--text-light,#555); white-space: nowrap; min-width: 94px; }
.ip-ind-bar-wrap  { flex: 1; height: 7px; background: rgba(var(--primary-rgb,26,95,42),.12); border-radius: 4px; overflow: hidden; min-width: 70px; }
.ip-ind-bar       { height: 100%; border-radius: 4px; transition: width .55s ease; }
.bar-good    { background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); }
.bar-warning { background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); }
.bar-danger  { background: linear-gradient(90deg, var(--secondary-color), var(--primary-dark)); }
.bar-info    { background: linear-gradient(90deg, var(--primary-light), var(--secondary-color)); }
.bar-teal    { background: linear-gradient(90deg, var(--primary-dark), var(--primary-color)); }
.ip-ind-value       { font-size: .85rem; font-weight: 700; min-width: 40px; text-align: right; }
.bar-good ~ .ip-ind-value, .ip-ind-value.bar-good { color: var(--primary-dark); }
.bar-danger ~ .ip-ind-value { color: var(--secondary-color); }
.ip-ind-value-info  { color: var(--primary-color); }
.ip-ind-value-teal  { color: var(--primary-dark); }
.ip-reserve-row {
    padding: 11px 14px; font-size: .82rem; color: var(--text-color,#444);
    border-bottom: 1px solid rgba(var(--primary-rgb,26,95,42),.08);
    background: rgba(var(--primary-rgb,26,95,42),.04);
}
.ip-reserve-pct { background: rgba(var(--primary-rgb,26,95,42),.12); color: var(--primary-color); padding: 2px 7px; border-radius: 7px; font-size: .78rem; font-weight: 600; margin-left: 5px; }
.ip-note { padding: 11px 14px; font-size: .8rem; color: var(--text-light,#666); background: rgba(var(--primary-rgb,26,95,42),.04); }
.ip-empty-icon-wrap { width: 72px; height: 72px; background: rgba(var(--primary-rgb,26,95,42),.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
@media (max-width: 768px) {
    .ip-stats-grid { grid-template-columns: repeat(2,1fr); }
    .ip-stat-item:nth-child(2n) { border-right: none; }
    .ip-indicators-row { flex-direction: column; gap: 10px; }
    .ip-card-header { padding: 10px 12px; }
}
@media (max-width: 480px) {
    .ip-stats-grid { grid-template-columns: 1fr; }
    .ip-stat-item { border-right: none; border-bottom: 1px solid rgba(var(--primary-rgb,26,95,42),.07); }
}

/* ═══════════════════════════════════════════════════
   34. PARTNER FACILITIES PAGE (partner-facilities.php)
   ═══════════════════════════════════════════════════ */
.pf-filter-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pf-filter-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 18px;
    background: rgba(var(--primary-rgb,26,95,42),.08);
    color: var(--text-color,#374151);
    text-decoration: none; font-size: .82rem; font-weight: 600;
    border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.16);
    transition: all .15s;
}
.pf-filter-pill:hover, .pf-filter-pill.active { background: var(--primary-color); color: var(--text-on-primary,#fff); border-color: var(--primary-color); }
.pf-pill-count { background: rgba(255,255,255,.25); border-radius: 9px; padding: 1px 6px; font-size: .73rem; }
.pf-filter-pill.active .pf-pill-count { background: rgba(255,255,255,.28); }
.pf-filter-pill:not(.active) .pf-pill-count { background: rgba(var(--primary-rgb,26,95,42),.12); color: var(--text-light,#6b7280); }
.pf-table-wrap { border-radius: 11px; overflow: hidden; border: 1px solid rgba(var(--primary-rgb,26,95,42),.12); box-shadow: 0 2px 10px rgba(var(--primary-rgb,26,95,42),.07); margin-bottom: 18px; }
.pf-table { width: 100%; border-collapse: collapse; background: #fff; }
.pf-table thead tr { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--text-on-primary,#fff); }
.pf-table th { padding: 11px 14px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.pf-table tbody tr { border-bottom: 1px solid rgba(var(--primary-rgb,26,95,42),.07); transition: background .12s; }
.pf-table tbody tr:last-child { border-bottom: none; }
.pf-table tbody tr:hover { background: rgba(var(--primary-rgb,26,95,42),.04); }
.pf-table td { padding: 11px 14px; vertical-align: middle; font-size: .86rem; }
.pf-org-name    { font-weight: 700; color: var(--primary-color); font-size: .9rem; }
.pf-location    { color: var(--text-light,#6b7280); font-size: .82rem; }
.pf-location i  { color: var(--primary-color); margin-right: 4px; font-size: .76rem; }
.pf-type-badge  { background: rgba(var(--primary-rgb,26,95,42),.08); color: var(--primary-color); border: 1px solid rgba(var(--primary-rgb,26,95,42),.18); border-radius: 18px; padding: 2px 9px; font-size: .76rem; font-weight: 700; }
.pf-discount-badge { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); color: var(--text-on-primary,#fff); border-radius: 18px; padding: 3px 11px; font-size: .83rem; font-weight: 800; display: inline-block; }
.pf-discount-badge small { font-size: .7rem; font-weight: 600; opacity: .9; }
.pf-note { background: rgba(var(--primary-rgb,26,95,42),.06); border: 1px solid rgba(var(--primary-rgb,26,95,42),.16); border-radius: 9px; padding: 11px 16px; font-size: .83rem; color: var(--primary-dark); display: flex; align-items: flex-start; gap: 9px; }
.pf-note i { margin-top: 2px; flex-shrink: 0; }
.pf-hero-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg,var(--primary-color),var(--primary-light)); margin-bottom: 14px; }
.pf-hero-icon  { font-size: 1.5rem; color: var(--text-on-primary,#fff); }
.pf-hero-title { font-size: 1.6rem; font-weight: 700; color: var(--primary-color); margin-bottom: 7px; }
.pf-empty-icon { font-size: 3.5rem; color: var(--text-muted,#e9ecef); margin-bottom: 14px; }
.pf-empty-title { color: var(--text-light,#6c757d); }
.pf-search-wrap { position: relative; max-width: 300px; width: 100%; }
.pf-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted,#9ca3af); font-size: .83rem; }
.pf-search-input { width: 100%; padding: 8px 11px 8px 32px; border: 1px solid rgba(var(--primary-rgb,26,95,42),.18); border-radius: 22px; font-size: .86rem; outline: none; background: rgba(var(--primary-rgb,26,95,42),.07); }
.pf-count        { font-size: .83rem; }
.pf-th-sn        { width: 46px; }
.pf-th-center    { text-align: center; }
.pf-td-sn        { color: var(--text-light,#6b7280); font-weight: 600; }
.pf-muted-dash   { color: var(--text-muted,#9ca3af); }
.pf-muted-dash-sm{ color: var(--text-muted,#9ca3af); font-size: .8rem; }
.pf-td-desc      { color: var(--text-color,#374151); font-size: .86rem; }
.pf-no-result    { text-align: center; padding: 36px; color: var(--text-light,#6b7280); }
.pf-no-result-icon { font-size: 1.9rem; opacity: .28; display: block; margin-bottom: 7px; }
@media (max-width: 768px) { .pf-table-wrap { overflow-x: auto; } .pf-table { min-width: 600px; } }

/* ═══════════════════════════════════════════════════
   35. CAREER PAGE (career.php)
   ═══════════════════════════════════════════════════ */
.cr-hero { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); padding: 2.5rem 0 2rem; color: var(--text-on-primary,#fff); }
.cr-hero-inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.cr-hero-text { flex: 1; min-width: 190px; }
.cr-hero-text h2 { font-size: 1.65rem; font-weight: 800; margin-bottom: .35rem; color: var(--text-on-primary,#fff); }
.cr-hero-text p  { color: rgba(255,255,255,.68); margin: 0; font-size: .93rem; }
.cr-stats        { display: flex; gap: 1rem; flex-wrap: wrap; }
.cr-stat-box { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 13px; padding: .8rem 1.2rem; text-align: center; min-width: 86px; }
.cr-stat-num { font-size: 1.55rem; font-weight: 800; line-height: 1; color: var(--text-on-primary,#fff); }
.cr-stat-lbl { font-size: .68rem; color: rgba(255,255,255,.62); text-transform: uppercase; letter-spacing: .4px; margin-top: .2rem; }
.cr-layout   { padding: 2.5rem 0 3rem; }
.cr-filterbar { background: var(--bg-soft,#f5faf6); border-radius: 14px; box-shadow: 0 3px 16px rgba(var(--primary-rgb,26,95,42),.09); padding: 1.1rem 1.3rem; margin-bottom: 1.4rem; border: 1px solid rgba(var(--primary-rgb,26,95,42),.1); }
.cr-search-row { display: flex; gap: .7rem; align-items: center; margin-bottom: .9rem; }
.cr-search-field { flex: 1; position: relative; }
.cr-search-field i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted,#aaa); font-size: .88rem; }
.cr-search-field input { width: 100%; padding: .65rem 1rem .65rem 2.4rem; border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.14); border-radius: 9px; font-size: .9rem; transition: border-color .2s, box-shadow .2s; outline: none; }
.cr-search-field input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.12); }
.cr-filter-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.cr-chip { padding: .35rem .9rem; border-radius: 18px; font-size: .78rem; font-weight: 600; cursor: pointer; border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.14); background: rgba(var(--primary-rgb,26,95,42),.05); color: var(--text-light,#6b7280); transition: all .18s; display: flex; align-items: center; gap: .4rem; user-select: none; }
.cr-chip:hover  { border-color: var(--primary-color); color: var(--primary-color); background: rgba(var(--primary-rgb,26,95,42),.1); }
.cr-chip.active { background: var(--primary-color); color: var(--text-on-primary,#fff); border-color: var(--primary-color); }
.cr-chip.active.grey { background: var(--text-muted,#aaa); border-color: var(--text-muted,#aaa); color: #fff; }
.cr-chip-count { background: rgba(255,255,255,.25); color: inherit; border-radius: 9px; padding: 0 .42rem; font-size: .7rem; min-width: 17px; text-align: center; }
.cr-chip:not(.active) .cr-chip-count { background: rgba(var(--primary-rgb,26,95,42),.12); }
.cr-result-count { font-size: .8rem; color: var(--text-light,#6b7280); margin-bottom: .9rem; display: flex; align-items: center; gap: .4rem; }
.cr-job-card { background: var(--bg-soft,#f5faf6); border-radius: 14px; box-shadow: 0 3px 16px rgba(var(--primary-rgb,26,95,42),.1); border: 2px solid rgba(var(--primary-rgb,26,95,42),.12); border-left: 5px solid var(--primary-color); margin-bottom: 1.4rem; overflow: hidden; transition: all .28s; position: relative; }
.cr-job-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(var(--primary-rgb,26,95,42),.18); border-color: rgba(var(--primary-rgb,26,95,42),.2); }
.cr-job-card.cr-closed { border-left-color: var(--text-muted,#ccc); opacity: .8; }
.cr-job-card.cr-closed:hover { transform: none; box-shadow: 0 3px 16px rgba(var(--primary-rgb,26,95,42),.1); }
.cr-job-card.cr-urgent { border-left-color: var(--secondary-color); border-color: rgba(var(--primary-rgb,26,95,42),.14); }
.cr-job-card.cr-urgent:hover { border-color: var(--secondary-color); box-shadow: 0 10px 32px rgba(var(--primary-rgb,26,95,42),.2); }
.cr-urgent-tag { position: absolute; top: 0; right: 0; background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); color: var(--text-on-primary,#fff); font-size: .7rem; font-weight: 800; padding: .28rem .8rem; border-radius: 0 0 0 11px; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: .4rem; animation: pulse-urgent 2s infinite; }
@keyframes pulse-urgent { 0%,100%{opacity:1;} 50%{opacity:.84;} }
.cr-card-inner { padding: 1.4rem 1.5rem; }
.cr-card-top { display: flex; align-items: flex-start; gap: 1.1rem; margin-bottom: .9rem; }
.cr-dept-avatar { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: rgba(var(--primary-rgb,26,95,42),.1); display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 1.3rem; box-shadow: 0 3px 10px rgba(var(--primary-rgb,26,95,42),.14); transition: all .28s; }
.cr-job-card:hover .cr-dept-avatar { transform: scale(1.04) rotate(4deg); }
.cr-job-card.cr-closed .cr-dept-avatar { background: rgba(var(--text-muted-rgb,.5),.1); color: var(--text-muted,#ccc); }
.cr-job-card.cr-urgent .cr-dept-avatar { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--secondary-color); }
.cr-card-heading { flex: 1; }
.cr-job-title { font-size: 1.1rem; font-weight: 800; color: var(--primary-dark); margin-bottom: .35rem; line-height: 1.3; transition: color .25s; }
.cr-job-card:hover .cr-job-title { color: var(--primary-color); }
.cr-job-card.cr-closed .cr-job-title { text-decoration: line-through; color: var(--text-muted,#ccc); opacity: .7; }
.cr-badge-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.cr-tag { font-size: .7rem; font-weight: 800; padding: .2em .7em; border-radius: 20px; text-transform: uppercase; letter-spacing: .4px; border: 1px solid transparent; transition: all .25s; cursor: default; }
.cr-tag.type     { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--primary-dark); border-color: rgba(var(--primary-rgb,26,95,42),.18); }
.cr-tag.dept     { background: rgba(var(--primary-rgb,26,95,42),.08); color: var(--primary-color); border-color: rgba(var(--primary-rgb,26,95,42),.14); }
.cr-tag.open     { background: rgba(var(--primary-rgb,26,95,42),.12); color: var(--primary-dark); border-color: rgba(var(--primary-rgb,26,95,42),.2); }
.cr-tag.closed-tag  { background: rgba(128,128,128,.1); color: var(--text-muted,#999); border-color: rgba(128,128,128,.18); }
.cr-tag.urgent-tag  { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--secondary-color); border-color: rgba(var(--primary-rgb,26,95,42),.14); animation: pulse-urgent 2s infinite; }
.cr-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-bottom: .9rem; }
.cr-meta-item { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--text-color,#444); background: rgba(var(--primary-rgb,26,95,42),.05); padding: .28rem .65rem; border-radius: 18px; border: 1px solid rgba(var(--primary-rgb,26,95,42),.1); transition: all .25s; }
.cr-meta-item:hover { background: rgba(var(--primary-rgb,26,95,42),.1); border-color: rgba(var(--primary-rgb,26,95,42),.18); }
.cr-meta-item i { width: 13px; text-align: center; color: var(--primary-color); font-size: .8rem; flex-shrink: 0; }
.cr-meta-item.deadline-near { color: var(--secondary-color); font-weight: 600; background: rgba(var(--primary-rgb,26,95,42),.08); border-color: rgba(var(--primary-rgb,26,95,42),.16); }
.cr-meta-item.deadline-gone { color: var(--text-muted,#aaa); background: rgba(128,128,128,.07); border-color: rgba(128,128,128,.12); }
.cr-meta-deadline-strong { margin-left: .3rem; }
.cr-desc { font-size: .83rem; color: var(--text-light,#6b7280); line-height: 1.6; margin-bottom: .9rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cr-actions { display: flex; gap: .7rem; flex-wrap: wrap; padding-top: .9rem; border-top: 1.5px solid rgba(var(--primary-rgb,26,95,42),.1); align-items: center; }
.cr-btn-detail { padding: .55rem 1.2rem; border-radius: 9px; font-size: .84rem; font-weight: 600; border: 2px solid var(--primary-color); color: var(--primary-color); background: transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; transition: all .25s; }
.cr-btn-detail:hover { background: var(--primary-color); color: var(--text-on-primary,#fff); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--primary-rgb,26,95,42),.28); }
.cr-btn-apply { padding: .6rem 1.3rem; border-radius: 9px; font-size: .84rem; font-weight: 800; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--text-on-primary,#fff); border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; transition: all .25s; box-shadow: 0 4px 14px rgba(var(--primary-rgb,26,95,42),.32); }
.cr-btn-apply:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 7px 20px rgba(var(--primary-rgb,26,95,42),.42); color: var(--text-on-primary,#fff); }
.cr-btn-dl { padding: .55rem .95rem; border-radius: 9px; font-size: .84rem; font-weight: 600; border: 2px solid rgba(var(--primary-rgb,26,95,42),.16); color: var(--text-light,#666); background: rgba(var(--primary-rgb,26,95,42),.06); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; transition: all .25s; }
.cr-btn-dl:hover { background: rgba(var(--primary-rgb,26,95,42),.14); color: var(--text-color,#333); transform: translateY(-2px); }
.cr-deadline-bar { height: 3px; background: rgba(var(--primary-rgb,26,95,42),.1); border-radius: 2px; margin-bottom: .65rem; overflow: hidden; }
.cr-deadline-fill { height: 100%; border-radius: 2px; transition: width .45s; }
.cr-deadline-fill.ok   { background: var(--primary-color); }
.cr-deadline-fill.near { background: var(--secondary-color); }
.cr-deadline-fill.gone { background: var(--text-muted,#ccc); }
.cr-empty { text-align: center; padding: 2.5rem 1.5rem; background: var(--bg-soft,#f5faf6); border-radius: 13px; box-shadow: 0 2px 10px rgba(var(--primary-rgb,26,95,42),.07); }
.cr-empty-icon { width: 68px; height: 68px; border-radius: 50%; background: rgba(var(--primary-rgb,26,95,42),.07); display: flex; align-items: center; justify-content: center; margin: 0 auto .9rem; font-size: 1.7rem; color: var(--text-muted,#ccc); }
.cr-sb-card { border-radius: 13px; margin-bottom: 1.1rem; overflow: hidden; box-shadow: 0 2px 12px rgba(var(--primary-rgb,26,95,42),.09); }
.cr-sb-card .cr-sb-head { padding: 1.1rem 1.3rem .9rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.cr-sb-card .cr-sb-body { padding: 1.1rem 1.3rem; background: var(--bg-soft,#f5faf6); }
.cr-dept-chips { display: flex; gap: .4rem; flex-wrap: wrap; padding-top: .7rem; border-top: 1px solid rgba(var(--primary-rgb,26,95,42),.08); margin-top: .7rem; }
.cr-dept-chip { padding: .26rem .75rem; border-radius: 18px; font-size: .74rem; font-weight: 600; cursor: pointer; border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.14); background: rgba(var(--primary-rgb,26,95,42),.05); color: var(--text-light,#6b7280); transition: all .16s; display: inline-flex; align-items: center; gap: .3rem; }
.cr-dept-chip:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(var(--primary-rgb,26,95,42),.1); }
.cr-dept-chip.active { background: var(--primary-color); color: var(--text-on-primary,#fff); border-color: var(--primary-color); }
.cr-dept-label { font-size: .7rem; font-weight: 700; color: var(--text-muted,#999); text-transform: uppercase; letter-spacing: .3px; display: flex; align-items: center; gap: .3rem; margin-right: .3rem; }
.cr-sidebar-toggle { display: none; width: 100%; background: var(--bg-soft,#f5faf6); border: 2px solid rgba(var(--primary-rgb,26,95,42),.13); border-radius: 13px; padding: .8rem 1.1rem; font-size: .9rem; font-weight: 700; color: var(--primary-dark); cursor: pointer; margin-bottom: .9rem; text-align: left; align-items: center; gap: .6rem; transition: all .25s; }
.cr-sidebar-toggle:hover { border-color: var(--primary-color); }
.cr-track-card { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); }
.cr-track-card .cr-sb-head h4 { color: var(--text-on-primary,#fff); margin: 0 0 .3rem; font-size: .97rem; font-weight: 700; }
.cr-track-card .cr-sb-head p  { color: rgba(255,255,255,.66); font-size: .82rem; margin: 0; }
.cr-track-card .cr-sb-body { background: var(--primary-color); border-top: 1px solid rgba(255,255,255,.12); }
.cr-btn-track { display: flex; align-items: center; gap: .5rem; background: #fff; color: var(--primary-color); padding: .62rem 1.1rem; border-radius: 9px; font-weight: 700; font-size: .86rem; text-decoration: none; transition: all .2s; width: 100%; justify-content: center; }
.cr-btn-track:hover { background: rgba(255,255,255,.88); color: var(--primary-color); }
.cr-cv-card { background: var(--bg-soft,#f5faf6); border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.1); }
.cr-cv-icon { width: 46px; height: 46px; border-radius: 11px; background: rgba(var(--primary-rgb,26,95,42),.1); display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 1.2rem; margin-bottom: .8rem; }
.cr-cv-card h4 { font-size: .97rem; font-weight: 700; color: var(--primary-dark); margin-bottom: .38rem; }
.cr-cv-card p  { font-size: .82rem; color: var(--text-light,#6b7280); margin-bottom: .9rem; }
.cr-btn-cv { display: flex; align-items: center; gap: .5rem; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--text-on-primary,#fff); padding: .62rem 1.1rem; border-radius: 9px; font-weight: 700; font-size: .86rem; text-decoration: none; transition: opacity .2s; width: 100%; justify-content: center; }
.cr-btn-cv:hover { opacity: .9; color: var(--text-on-primary,#fff); }
.cr-muted       { color: var(--text-muted,#999) !important; }
.cr-btn-primary { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary,#fff); }
.cr-btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-on-primary,#fff); }
.cr-why-card { background: var(--bg-soft,#f5faf6); border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.1); }
.cr-why-card .cr-sb-body { padding: 1.3rem; }
.cr-why-card h4 { font-size: .97rem; font-weight: 700; color: var(--primary-dark); margin-bottom: .9rem; }
.cr-benefits { display: flex; flex-direction: column; gap: .6rem; }
.cr-benefit-item { display: flex; align-items: center; gap: .7rem; font-size: .85rem; color: var(--text-color,#444); }
.cr-benefit-icon { width: 30px; height: 30px; border-radius: 7px; background: rgba(var(--primary-rgb,26,95,42),.1); display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: .78rem; flex-shrink: 0; }
.cr-novacancy { background: var(--bg-soft,#f5faf6); border-radius: 13px; padding: 2.5rem 1.5rem; text-align: center; box-shadow: 0 2px 12px rgba(var(--primary-rgb,26,95,42),.08); border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.1); }
.cr-novacancy-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(var(--primary-rgb,26,95,42),.07); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; font-size: 2rem; color: var(--text-muted,#ccc); }
.cr-inline-dot { font-size: .52em; }
.cr-no-results { display: none; }
@media (max-width: 991px) {
    .cr-sidebar-toggle { display: flex; }
    .cr-sidebar-content { display: none; }
    .cr-sidebar-content.open { display: block; }
    .cr-actions { flex-direction: column; align-items: stretch; }
    .cr-btn-detail, .cr-btn-apply, .cr-btn-dl { width: 100%; justify-content: center; }
    .cr-job-card { margin-bottom: 1.1rem; }
    .cr-card-inner { padding: 1.1rem 1.2rem; }
}
@media (min-width: 992px) { .cr-sidebar-content { display: block !important; } }

/* ═══════════════════════════════════════════════════
   36. CAREER DETAIL PAGE (career-detail.php)
   ═══════════════════════════════════════════════════ */
.job-detail-card { background: var(--white,#fff); border-radius: 12px; box-shadow: 0 2px 14px rgba(var(--primary-rgb,26,95,42),.11); overflow: hidden; margin-bottom: 28px; }
.job-detail-header { padding: 22px 28px; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--text-on-primary,#fff); display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px; }
.job-detail-header h2 { margin: 0 0 9px; font-size: 1.45rem; color: var(--text-on-primary,#fff); }
.job-meta { display: flex; flex-wrap: wrap; gap: 13px; font-size: 14px; opacity: .9; }
.job-meta span { display: flex; align-items: center; gap: 6px; }
.job-type-badge { background: rgba(255,255,255,.18); padding: 3px 11px; border-radius: 18px; font-size: 12px; }
.deadline-badge { background: rgba(255,255,255,.18); padding: 7px 13px; border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.deadline-badge.expired { background: rgba(var(--primary-rgb,26,95,42),.22); }
.job-detail-body { padding: 28px; }
.job-info-row { display: flex; padding: 11px 0; border-bottom: 1px solid rgba(var(--primary-rgb,26,95,42),.1); }
.job-info-row .label { font-weight: 600; min-width: 170px; color: var(--text-color,#333); }
.job-info-row .value { color: var(--text-light,#666); }
.job-section { margin-top: 22px; }
.job-section h4 { color: var(--primary-color); font-size: 1.05rem; margin-bottom: 13px; padding-bottom: 9px; border-bottom: 2px solid var(--primary-light); }
.job-content { color: var(--text-light,#666); line-height: 1.8; }
.job-detail-footer { padding: 18px 28px; background: rgba(var(--primary-rgb,26,95,42),.04); display: flex; gap: 13px; flex-wrap: wrap; }
.application-form-section { background: var(--white,#fff); border-radius: 12px; box-shadow: 0 2px 14px rgba(var(--primary-rgb,26,95,42),.11); padding: 28px; margin-top: 28px; animation: slideDown .4s ease-out; }
.application-form-section h3 { color: var(--primary-color); margin-bottom: 9px; display: flex; align-items: center; gap: 9px; }
.form-subtitle { color: var(--text-light,#666); margin-bottom: 22px; }
.form-section { background: rgba(var(--primary-rgb,26,95,42),.05); padding: 18px; border-radius: 10px; margin-bottom: 18px; }
.form-section h5 { color: var(--text-color,#333); margin-bottom: 18px; padding-bottom: 9px; border-bottom: 1px solid rgba(var(--primary-rgb,26,95,42),.14); }
.job-summary .summary-list { list-style: none; padding: 0; margin: 0; }
.job-summary .summary-list li { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid rgba(var(--primary-rgb,26,95,42),.1); }
.job-summary .summary-list li:last-child { border-bottom: none; }
.job-summary .summary-list i { color: var(--primary-color); width: 20px; margin-top: 3px; }
.job-summary .summary-list .label { display: block; font-size: 12px; color: var(--text-light,#777); margin-bottom: 2px; }
.job-summary .summary-list .value { font-weight: 600; color: var(--text-color,#333); }
.share-buttons { display: flex; gap: 9px; }
.share-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .25s; }
.share-btn:hover { transform: scale(1.1); color: #fff; }
.share-btn.facebook { background: #1877f2; }
.share-btn.twitter  { background: #1da1f2; }
.share-btn.linkedin { background: var(--primary-dark); }
.share-btn.whatsapp { background: var(--primary-color); }
.cd-success-wrap { background: linear-gradient(135deg, rgba(var(--primary-rgb,26,95,42),.1), rgba(var(--primary-rgb,26,95,42),.06)); border: 2px solid rgba(var(--primary-rgb,26,95,42),.22); }
.cd-success-icon { font-size: 2.8rem; color: var(--primary-light); }
.cd-success-track-wrap { background: rgba(var(--primary-rgb,26,95,42),.06); border: 2px dashed var(--primary-light); }
.cd-copy-btn { font-size: 11px; line-height: 1.8; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 768px) {
    .job-detail-header { flex-direction: column; }
    .job-info-row { flex-direction: column; gap: 4px; }
    .job-info-row .label { min-width: auto; }
}

/* ═══════════════════════════════════════════════════
   37. MEMBER WELFARE PAGE (member-welfare.php)
   ═══════════════════════════════════════════════════ */
.claim-types-sidebar { background: var(--white,#fff); border-radius: 14px; padding: 18px; box-shadow: 0 4px 18px rgba(var(--primary-rgb,26,95,42),.08); position: sticky; top: 100px; }
.claim-types-sidebar h5 { font-weight: 600; margin-bottom: 13px; color: var(--primary-color); }
.claim-type-item { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 10px; margin-bottom: 7px; cursor: pointer; transition: all .25s; border: 2px solid transparent; }
.claim-type-item:hover, .claim-type-item.active { background: var(--bg-soft,#f5faf6); border-color: var(--primary-color); }
.type-icon { width: 42px; height: 42px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; }
.type-icon i { font-size: 17px; }
.type-info h6 { margin: 0; font-size: 13px; font-weight: 600; }
.type-info small { color: var(--text-muted,#888); font-size: 11px; }
.track-claim-box { background: var(--bg-soft,#f8f9fa); border-radius: 10px; padding: 14px; }
.tracking-result { background: var(--white,#fff); border-radius: 8px; padding: 11px; }
.tracking-result .table { margin-bottom: 0; font-size: 13px; }
.claim-form .form-section h5 { font-weight: 600; margin-bottom: 13px; color: var(--text-color,#333); }
.claim-type-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 11px; }
.type-option input { display: none; }
.type-box { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 9px; border: 2px solid rgba(var(--primary-rgb,26,95,42),.14); border-radius: 10px; cursor: pointer; transition: all .25s; text-align: center; }
.type-box i { font-size: 22px; color: var(--type-color,var(--primary-color)); }
.type-box span { font-size: 12px; font-weight: 500; }
.type-option input:checked + .type-box { border-color: var(--primary-color); background: rgba(var(--primary-rgb,26,95,42),.05); box-shadow: 0 3px 10px rgba(var(--primary-rgb,26,95,42),.1); }
.form-actions { text-align: center; padding-top: 18px; position: relative; z-index: 3; }
.form-actions .btn { min-width: 210px; pointer-events: auto; }
.form-submit-hint { margin-top: 9px; color: var(--text-muted,#6c757d); font-size: 13px; }
.success-card { background: var(--white,#fff); border-radius: 18px; padding: 46px; box-shadow: 0 8px 36px rgba(var(--primary-rgb,26,95,42),.1); }
.success-icon { font-size: 72px; color: var(--primary-light); margin-bottom: 18px; }
.tracking-info { background: var(--bg-soft,#f8f9fa); padding: 18px; border-radius: 10px; margin: 18px 0; }
.tracking-id { color: var(--primary-color); font-family: monospace; letter-spacing: 2px; }
.action-buttons { display: flex; gap: 13px; justify-content: center; margin-top: 22px; }
@media (max-width: 767px) {
    .claim-type-selector { grid-template-columns: repeat(2,1fr); }
    .claim-types-sidebar { position: static; margin-bottom: 28px; }
    .action-buttons { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════
   38. PAGE (page.php — generic content pages)
   ═══════════════════════════════════════════════════ */
.page-content-box { background: var(--white,#fff); border-radius: 18px; padding: 38px; box-shadow: 0 8px 44px rgba(var(--primary-rgb,26,95,42),.07); }
.page-featured-image img { width: 100%; max-height: 400px; object-fit: cover; }
.page-tags .badge { padding: 7px 11px; font-size: .83rem; border: 1px solid rgba(var(--primary-rgb,26,95,42),.18); }
.error-box { background: var(--white,#fff); border-radius: 18px; padding: 56px 38px; box-shadow: 0 8px 44px rgba(var(--primary-rgb,26,95,42),.07); }
@media (max-width: 767px) { .page-content-box { padding: 22px; } }

/* ═══════════════════════════════════════════════════
   39. COOPERATIVE PROGRAMS PAGE (cooperative-programs.php)
   ═══════════════════════════════════════════════════ */
.cp-hero { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 60%); padding: 2.5rem 0 2rem; color: #fff; }
.cp-hero-inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.cp-hero-icon { width: 68px; height: 68px; border-radius: 16px; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; flex-shrink: 0; border: 1px solid rgba(255,255,255,.18); }
.cp-hero-text { flex: 1; min-width: 170px; }
.cp-hero-text h2 { font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: .28rem; }
.cp-hero-text p  { color: rgba(255,255,255,.72); margin: 0; font-size: .9rem; }
.cp-hero-stats { display: flex; gap: .72rem; flex-wrap: wrap; }
.cp-stat-box { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border-radius: 11px; padding: .68rem 1.05rem; text-align: center; min-width: 78px; }
.cp-stat-num { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; }
.cp-stat-num.accent { background: linear-gradient(135deg, var(--primary-light), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.cp-stat-lbl { font-size: .65rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .4px; margin-top: .18rem; }
.cp-shell { background: var(--bg-soft,#f2f7f3); padding: 2.5rem 0 3.5rem; }
.cp-section-sub { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; gap: .72rem; flex-wrap: wrap; }
.cp-section-sub h3 { font-size: 1.02rem; font-weight: 700; color: var(--primary-dark); margin: 0; display: flex; align-items: center; gap: .5rem; }
.cp-section-sub h3 i { color: var(--primary-color); }
.cp-card { background: var(--white,#fff); border-radius: 15px; box-shadow: 0 3px 18px rgba(var(--primary-rgb,26,95,42),.07); border: 1px solid rgba(var(--primary-rgb,26,95,42),.12); overflow: hidden; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; height: 100%; }
.cp-card:hover { transform: translateY(-4px); box-shadow: 0 9px 32px rgba(var(--primary-rgb,26,95,42),.13); }
.cp-card-head { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); padding: .85rem 1.2rem; display: flex; align-items: flex-start; gap: .85rem; }
.cp-date-box { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); border-radius: 9px; padding: .32rem .58rem; text-align: center; min-width: 42px; flex-shrink: 0; }
.cp-date-box .dd { font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1; }
.cp-date-box .mm { font-size: .56rem; font-weight: 700; color: rgba(255,255,255,.78); text-transform: uppercase; letter-spacing: .3px; }
.cp-head-right { flex: 1; }
.cp-head-right h5 { color: #fff; font-weight: 700; margin: 0 0 .38rem; font-size: .94rem; line-height: 1.35; }
.cp-open-badge { background: var(--white,#fff); color: var(--primary-dark); font-size: .63rem; font-weight: 800; padding: .18em .68em; border-radius: 18px; display: inline-flex; align-items: center; gap: .22rem; box-shadow: 0 2px 7px rgba(var(--primary-rgb,26,95,42),.15); animation: cp-blink 2s infinite; }
.cp-closed-badge { background: rgba(255,255,255,.16); color: rgba(255,255,255,.74); font-size: .63rem; font-weight: 700; padding: .18em .68em; border-radius: 18px; display: inline-flex; align-items: center; gap: .22rem; }
@keyframes cp-blink { 0%,100% { box-shadow: 0 2px 7px rgba(var(--primary-rgb,26,95,42),.15), 0 0 0 0 rgba(var(--primary-rgb,26,95,42),.22); } 50% { box-shadow: 0 2px 7px rgba(var(--primary-rgb,26,95,42),.15), 0 0 0 5px rgba(var(--primary-rgb,26,95,42),0); } }
.cp-card-body { padding: 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.cp-meta-row { display: flex; flex-wrap: wrap; gap: .38rem; margin-bottom: .85rem; }
.cp-pill { display: inline-flex; align-items: center; gap: .28rem; border-radius: 18px; padding: .24rem .68rem; font-size: .75rem; font-weight: 500; }
.cp-pill i { font-size: .66rem; }
.cp-pill-date { background: rgba(var(--primary-rgb,26,95,42),.08); color: var(--primary-dark); }
.cp-pill-time { background: rgba(var(--primary-rgb,26,95,42),.06); color: var(--primary-color); }
.cp-pill-loc  { background: rgba(var(--primary-rgb,26,95,42),.06); color: var(--primary-dark); }
.cp-pill-tba  { background: rgba(var(--primary-rgb,26,95,42),.05); color: var(--text-muted,#64748b); }
.cp-desc-text { color: var(--text-light,#4b5563); font-size: .86rem; line-height: 1.6; flex: 1; margin-bottom: .85rem; }
.cp-prereg-wrap { margin-top: .28rem; }
.cp-prereg-inner { background: rgba(var(--primary-rgb,26,95,42),.06); border-radius: 11px; border: 1px solid rgba(var(--primary-rgb,26,95,42),.16); padding: .9rem 1.05rem; margin-top: .38rem; }
.cp-prereg-title { font-size: .79rem; font-weight: 700; color: var(--primary-dark); margin-bottom: .65rem; display: flex; align-items: center; gap: .32rem; }
.cp-btn-prereg { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: #fff; border: none; border-radius: 8px; padding: .45rem 1.05rem; font-size: .8rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .38rem; transition: all .2s; box-shadow: 0 3px 9px rgba(var(--primary-rgb,26,95,42),.26); }
.cp-btn-prereg:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(var(--primary-rgb,26,95,42),.38); color: #fff; }
.cp-card-footer { border-top: 1px solid rgba(var(--primary-rgb,26,95,42),.1); padding: .58rem 1.2rem; background: rgba(var(--primary-rgb,26,95,42),.03); display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.cp-att-btn { font-size: .73rem; font-weight: 600; color: var(--primary-color); background: rgba(var(--primary-rgb,26,95,42),.07); border: 1px solid rgba(var(--primary-rgb,26,95,42),.2); border-radius: 7px; padding: .26rem .72rem; text-decoration: none; display: inline-flex; align-items: center; gap: .28rem; transition: all .2s; }
.cp-att-btn:hover { background: rgba(var(--primary-rgb,26,95,42),.14); }
.cp-empty { background: var(--white,#fff); border-radius: 15px; text-align: center; padding: 3.5rem 2rem; box-shadow: 0 2px 12px rgba(var(--primary-rgb,26,95,42),.06); border: 1.5px dashed rgba(var(--primary-rgb,26,95,42),.2); }
.cp-empty-icon { width: 76px; height: 76px; border-radius: 50%; background: rgba(var(--primary-rgb,26,95,42),.08); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; font-size: 2.1rem; color: var(--primary-color); }
@media (max-width: 575px) {
    .cp-hero { padding: 1.6rem 0 1.3rem; }
    .cp-hero-icon { display: none; }
    .cp-hero-text h2 { font-size: 1.3rem; }
    .cp-card-head { flex-direction: column; gap: .45rem; }
    .cp-card-body, .cp-card-footer { padding-left: .95rem; padding-right: .95rem; }
    .cp-stat-box { min-width: 68px; padding: .5rem .75rem; }
}

/* ═══════════════════════════════════════════════════
   40. AUCTION PAGE (auction.php)
   ═══════════════════════════════════════════════════ */
.auc2-wrap { margin-bottom: 2.5rem; }
.auc2-card { background: var(--bg-soft,#f5faf6); border-radius: 18px; overflow: hidden; box-shadow: 0 7px 28px rgba(var(--primary-rgb,26,95,42),.13); border: 2px solid rgba(var(--primary-rgb,26,95,42),.14); transition: all .35s cubic-bezier(.4,0,.2,1); }
.auc2-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 14px 44px rgba(var(--primary-rgb,26,95,42),.22); border-color: var(--primary-color); }
.auc2-hero { display: flex; flex-wrap: wrap; }
.auc2-gallery-pane { flex: 0 0 100%; max-width: 100%; background: var(--dark-bg,#1a1a2e); position: relative; }
@media (min-width:768px) { .auc2-gallery-pane { flex: 0 0 48%; max-width: 48%; } }
.auc2-main-img { width: 100%; height: 290px; object-fit: cover; display: block; cursor: zoom-in; transition: transform .28s; }
@media (min-width:768px) { .auc2-main-img { height: 330px; } }
@media (min-width:992px) { .auc2-main-img { height: 370px; } }
.auc2-main-img:hover { transform: scale(1.02); }
.auc2-thumbs { display: flex; gap: 5px; padding: 7px 9px; background: #111; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #444 #111; }
.auc2-thumbs img { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: .58; transition: opacity .18s, outline .18s; flex-shrink: 0; }
.auc2-thumbs img.active, .auc2-thumbs img:hover { opacity: 1; outline: 2px solid var(--secondary-color); }
.auc2-no-img { width: 100%; height: 270px; background: rgba(var(--primary-rgb,26,95,42),.07); display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--primary-color); position: relative; overflow: hidden; }
.auc2-no-img::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg,transparent,rgba(var(--primary-rgb,26,95,42),.04),transparent); animation: shimmer 3s infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } }
.auc2-no-img i { font-size: 3.2rem; margin-bottom: .9rem; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.auc2-no-img span { font-size: .92rem; font-weight: 600; background: rgba(var(--primary-rgb,26,95,42),.1); padding: .45rem .9rem; border-radius: 18px; border: 1px solid rgba(var(--primary-rgb,26,95,42),.2); }
.auc2-summary-pane { flex: 1; padding: 1.8rem 2rem; display: flex; flex-direction: column; border-left: 2px solid rgba(var(--primary-rgb,26,95,42),.12); background: linear-gradient(135deg, var(--bg-soft,#f5faf6), rgba(var(--primary-rgb,26,95,42),.04)); }
.auc2-status-row { display: flex; align-items: center; gap: .58rem; margin-bottom: .9rem; flex-wrap: wrap; }
.auc2-badge-status { font-size: .76rem; font-weight: 800; letter-spacing: .5px; padding: .38em .9em; border-radius: 22px; text-transform: uppercase; border: 2px solid transparent; transition: all .25s; }
.auc2-badge-status.s-upcoming  { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--primary-dark); border-color: rgba(var(--primary-rgb,26,95,42),.2); }
.auc2-badge-status.s-ongoing   { background: rgba(var(--primary-rgb,26,95,42),.14); color: var(--primary-dark); border-color: rgba(var(--primary-rgb,26,95,42),.25); animation: auc2-pulse 1.6s infinite; }
.auc2-badge-status.s-completed { background: rgba(128,128,128,.1); color: var(--text-muted,#6c757d); border-color: rgba(128,128,128,.18); }
.auc2-badge-status.s-cancelled { background: rgba(var(--primary-rgb,26,95,42),.08); color: var(--secondary-color); border-color: rgba(var(--primary-rgb,26,95,42),.14); }
@keyframes auc2-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb,26,95,42),.3); } 50% { box-shadow: 0 0 0 5px rgba(var(--primary-rgb,26,95,42),0); } }
.auc2-serial { font-size: .76rem; color: var(--text-muted,#6c757d); }
.auc2-title { font-size: 1.35rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 1.1rem; line-height: 1.3; transition: color .25s; }
.auc2-card:hover .auc2-title { color: var(--primary-color); }
.auc2-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.4rem; }
.auc2-info-item { background: rgba(var(--primary-rgb,26,95,42),.07); border-radius: 13px; padding: .75rem .95rem; border-left: 4px solid var(--primary-color); transition: all .25s; position: relative; overflow: hidden; }
.auc2-info-item:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(var(--primary-rgb,26,95,42),.13); }
.auc2-info-item.highlight { background: rgba(var(--primary-rgb,26,95,42),.1); border-left-color: var(--primary-light); }
.auc2-info-item.price-item { background: rgba(var(--primary-rgb,26,95,42),.08); border-left-color: var(--secondary-color); }
.auc2-info-label { font-size: .7rem; color: var(--text-muted,#6c757d); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .18rem; display: flex; align-items: center; gap: .38rem; font-weight: 700; }
.auc2-info-value { font-size: .92rem; font-weight: 800; color: var(--primary-dark); transition: color .25s; }
.auc2-info-item:hover .auc2-info-value { color: var(--primary-color); }
.auc2-price-value { font-size: 1.25rem; color: var(--secondary-color); font-weight: 900; }
.auc2-countdown { display: flex; gap: .55rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.auc2-cd-box { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); color: var(--text-on-primary,#fff); border-radius: 11px; padding: .48rem .75rem; text-align: center; min-width: 52px; box-shadow: 0 4px 10px rgba(var(--primary-rgb,26,95,42),.28); transition: all .25s; }
.auc2-cd-box:hover { transform: translateY(-2px) scale(1.04); }
.auc2-cd-num { font-size: 1.15rem; font-weight: 900; line-height: 1; }
.auc2-cd-lbl { font-size: .62rem; opacity: .9; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.auc2-cta { margin-top: auto; padding-top: 1.4rem; }
.auc2-bid-btn { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); color: var(--text-on-primary,#fff); border: none; border-radius: 13px; padding: .8rem 1.6rem; font-weight: 800; font-size: .97rem; width: 100%; cursor: pointer; transition: all .28s; box-shadow: 0 5px 18px rgba(var(--primary-rgb,26,95,42),.35); text-transform: uppercase; letter-spacing: .4px; }
.auc2-bid-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 9px 26px rgba(var(--primary-rgb,26,95,42),.45); color: var(--text-on-primary,#fff); }
.auc2-tabs-wrap { border-top: 1px solid rgba(var(--primary-rgb,26,95,42),.1); }
.auc2-nav { display: flex; background: var(--bg-soft,#f8f9fa); border-bottom: 2px solid rgba(var(--primary-rgb,26,95,42),.1); padding: 0 1.1rem; }
.auc2-tab-btn { padding: .8rem 1.3rem; font-size: .86rem; font-weight: 600; color: var(--text-muted,#6c757d); background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color .18s, border-color .18s; display: flex; align-items: center; gap: .38rem; }
.auc2-tab-btn:hover { color: var(--text-color,#212529); }
.auc2-tab-btn.active { color: var(--secondary-color); border-bottom-color: var(--secondary-color); }
.auc2-tab-pane { display: none; padding: 1.4rem 1.7rem; }
.auc2-tab-pane.active { display: block; }
.auc2-desc-block { color: var(--text-color,#495057); line-height: 1.75; margin-bottom: 1.1rem; }
.auc2-contact-row { display: flex; gap: .9rem; flex-wrap: wrap; background: rgba(var(--primary-rgb,26,95,42),.06); border-radius: 9px; padding: .9rem 1.1rem; align-items: center; }
.auc2-contact-item { display: flex; align-items: center; gap: .48rem; font-size: .88rem; color: var(--text-color,#212529); }
.auc2-contact-item i { color: var(--primary-color); width: 15px; text-align: center; }
.auc2-contact-item a { color: var(--primary-color); text-decoration: none; font-weight: 600; }
.auc2-contact-item a:hover { text-decoration: underline; }
.auc2-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 9px; }
.auc2-photo-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 7px; cursor: zoom-in; transition: transform .18s, box-shadow .18s; }
.auc2-photo-grid img:hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(var(--primary-rgb,26,95,42),.18); }
.auc2-doc-list { display: flex; flex-direction: column; gap: .7rem; }
.auc2-doc-item { display: flex; align-items: center; gap: .9rem; background: rgba(var(--primary-rgb,26,95,42),.05); border: 1px solid rgba(var(--primary-rgb,26,95,42),.12); border-radius: 9px; padding: .9rem 1.1rem; }
.auc2-doc-icon { font-size: 1.9rem; color: var(--secondary-color); flex-shrink: 0; }
.auc2-doc-info { flex: 1; }
.auc2-doc-name { font-weight: 600; color: var(--text-color,#212529); font-size: .9rem; }
.auc2-doc-desc { font-size: .78rem; color: var(--text-muted,#6c757d); margin-top: .08rem; }
.auc2-map-container { border-radius: 9px; overflow: hidden; }
.auc2-map-container iframe { width: 100%; height: 340px; border: 0; display: block; }
.auc2-map-link-wrap { margin-top: .9rem; }
.auc2-empty-tab { text-align: center; padding: 2.2rem 1rem; color: var(--text-muted,#adb5bd); }
.auc2-empty-tab i { font-size: 2.3rem; margin-bottom: .7rem; display: block; }
#auc2-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; align-items: center; justify-content: center; padding: 1rem; }
#auc2-lightbox.open { display: flex; }
#auc2-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 7px; box-shadow: 0 8px 36px rgba(0,0,0,.6); object-fit: contain; }
#auc2-lightbox-close { position: fixed; top: 1rem; right: 1.2rem; color: #fff; font-size: 1.9rem; cursor: pointer; background: none; border: none; line-height: 1; z-index: 10000; }
.auc2-bid-modal-head { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); color: var(--text-on-primary,#fff); }
.auc2-bid-modal-title { font-weight: 700; letter-spacing: .2px; }
.auc2-bid-form { padding: .14rem 0; }
.auc2-bid-note { background: rgba(var(--primary-rgb,26,95,42),.08); border: 1px solid rgba(var(--primary-rgb,26,95,42),.18); color: var(--primary-dark); border-radius: 9px; font-weight: 600; }
.auc2-bid-min-amt { color: var(--secondary-color); font-weight: 800; }
.auc2-bid-label { font-size: .86rem; font-weight: 700; color: var(--primary-dark); margin-bottom: .38rem; }
.auc2-req { color: var(--secondary-color); }
.auc2-bid-input, .auc2-bid-textarea { border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.16); border-radius: 9px; min-height: 42px; font-size: .9rem; }
.auc2-bid-input:focus, .auc2-bid-textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.12); }
.auc2-bid-addon { background: rgba(var(--primary-rgb,26,95,42),.07); border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.16); border-right: none; color: var(--primary-dark); font-weight: 700; }
.auc2-bid-help { font-size: .76rem; color: var(--text-muted,#6c757d); }
.auc2-bid-help-warn { font-size: .76rem; color: var(--secondary-color); font-weight: 600; }
.auc2-bid-footer { padding-top: .38rem; }
.auc2-bid-cancel { border-color: rgba(var(--primary-rgb,26,95,42),.18); color: var(--text-color,#333); }
.auc2-bid-cancel:hover { background: rgba(var(--primary-rgb,26,95,42),.07); border-color: var(--primary-color); color: var(--primary-dark); }
.auc2-bid-submit { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); border-color: var(--secondary-color); color: var(--text-on-primary,#fff); font-weight: 700; }
.auc2-bid-submit:hover { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-color: var(--primary-color); color: var(--text-on-primary,#fff); }
/* Auction filter bar */
.auc2-page-hero { background: linear-gradient(135deg, var(--dark-bg-deep,#1a1a2e) 0%, var(--dark-bg,#16213e) 60%, var(--primary-dark) 100%); padding: 1.9rem 0 1.7rem; color: #fff; }
.auc2-page-hero-inner { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.auc2-page-icon { width: 60px; height: 60px; border-radius: 14px; background: rgba(var(--primary-rgb,26,95,42),.18); border: 1px solid rgba(var(--primary-rgb,26,95,42),.3); display: flex; align-items: center; justify-content: center; font-size: 1.9rem; color: var(--secondary-color); flex-shrink: 0; }
.auc2-page-text { flex: 1; min-width: 155px; }
.auc2-page-text h2 { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: .22rem; }
.auc2-page-text p  { color: rgba(255,255,255,.58); margin: 0; font-size: .88rem; }
.auc2-hero-stats { display: flex; gap: .62rem; flex-wrap: wrap; }
.auc2-hstat { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: 9px; padding: .58rem .95rem; text-align: center; min-width: 68px; }
.auc2-hstat-num { font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1; }
.auc2-hstat-num.green  { color: var(--primary-light); }
.auc2-hstat-num.yellow { color: var(--secondary-color); }
.auc2-hstat-lbl { font-size: .6rem; color: rgba(255,255,255,.58); text-transform: uppercase; letter-spacing: .3px; margin-top: .16rem; }
.auc2-filterbar { background: var(--bg-soft,#f5faf6); border-bottom: 3px solid rgba(var(--primary-rgb,26,95,42),.14); padding: .95rem 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 18px rgba(var(--primary-rgb,26,95,42),.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.auc2-filterbar .container { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.auc2-fbar-label { font-size: .8rem; font-weight: 800; color: var(--primary-dark); display: flex; align-items: center; gap: .38rem; text-transform: uppercase; letter-spacing: .4px; }
.auc2-fchips { display: flex; gap: .55rem; flex-wrap: wrap; }
.auc2-fchip { padding: .42rem 1.05rem; border-radius: 22px; font-size: .83rem; font-weight: 700; cursor: pointer; border: 2px solid rgba(var(--primary-rgb,26,95,42),.16); background: rgba(var(--primary-rgb,26,95,42),.07); color: var(--primary-dark); transition: all .25s; display: inline-flex; align-items: center; gap: .38rem; }
.auc2-fchip:hover { border-color: var(--primary-color); color: var(--text-on-primary,#fff); background: var(--primary-color); transform: translateY(-1px); }
.auc2-fchip.active { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--text-on-primary,#fff); border-color: var(--primary-color); box-shadow: 0 3px 12px rgba(var(--primary-rgb,26,95,42),.35); }
.auc2-fchip.active.green  { background: linear-gradient(135deg, var(--primary-light), var(--primary-color)); border-color: var(--primary-light); }
.auc2-fchip.active.yellow { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); border-color: var(--secondary-color); }
.auc2-fchip.active.grey   { background: linear-gradient(135deg, var(--text-muted,#aaa), #888); border-color: var(--text-muted,#aaa); }
.auc2-fcount { background: rgba(255,255,255,.22); color: inherit; border-radius: 11px; padding: 0 .42rem; font-size: .7rem; min-width: 17px; text-align: center; font-weight: 800; }
.auc2-fchip:not(.active) .auc2-fcount { background: rgba(var(--primary-rgb,26,95,42),.18); color: var(--primary-dark); }
.auc2-no-filter { text-align: center; padding: 2.8rem 1.5rem; background: var(--white,#fff); border-radius: 13px; box-shadow: 0 2px 10px rgba(var(--primary-rgb,26,95,42),.06); display: none; }
@media (max-width: 767px) {
    .auc2-card { border-radius: 14px; margin-bottom: 1.8rem; }
    .auc2-summary-pane { padding: 1.4rem 1.6rem; border-left: none; border-top: 2px solid rgba(var(--primary-rgb,26,95,42),.12); }
    .auc2-title { font-size: 1.15rem; margin-bottom: .9rem; }
    .auc2-info-grid { grid-template-columns: 1fr; gap: .55rem; }
    .auc2-cd-box { min-width: 45px; padding: .38rem .55rem; }
    .auc2-cd-num { font-size: .95rem; }
    .auc2-cd-lbl { font-size: .58rem; }
    .auc2-bid-btn { padding: .7rem 1.4rem; font-size: .88rem; }
    .auc2-filterbar { padding: .75rem 0; }
    .auc2-fchip { padding: .32rem .85rem; font-size: .78rem; }
    .auc2-page-icon { width: 52px; height: 52px; font-size: 1.7rem; }
    .auc2-page-text h2 { font-size: 1.3rem; }
    .auc2-hstat { padding: .46rem .75rem; min-width: 60px; }
    .auc2-hstat-num { font-size: 1.15rem; }
    .auc2-hstat-lbl { font-size: .56rem; }
}

/* ═══════════════════════════════════════════════════
   41. VERIFY PAGE (verify.php)
   ═══════════════════════════════════════════════════ */
.vp-outer { max-width: 560px; margin: 0 auto; }
.page-back { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-color); text-decoration: none; font-weight: 700; font-size: .8rem; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; background: rgba(var(--primary-rgb,26,95,42),.04); border: 1px solid rgba(var(--primary-rgb,26,95,42),.14); box-shadow: 0 1px 4px rgba(var(--primary-rgb,26,95,42),.08); transition: all .15s; }
.page-back:hover { background: rgba(var(--primary-rgb,26,95,42),.08); transform: translateX(-2px); }
.vp-page-header { text-align: center; margin-bottom: 18px; }
.vp-page-logo { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0; }
.vp-page-logo img { height: auto; width: auto; max-height: 64px; max-width: 190px; object-fit: contain; border-radius: 8px; }
.vp-page-logo-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--primary-color); color: var(--text-on-primary,#fff); display: grid; place-items: center; font-size: 1.15rem; margin: 0 auto 8px; box-shadow: 0 3px 12px rgba(var(--primary-rgb,26,95,42),.2); }
body.auth-portal-page.verify-auth-page .vp-card { background: transparent !important; border-radius: 0 !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
.vp-icon { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: var(--primary-color); color: var(--text-on-primary,#fff); display: grid; place-items: center; font-size: 26px; box-shadow: 0 4px 14px rgba(var(--primary-rgb,26,95,42),.22); }
.vp-sub { text-align: center; color: var(--text-muted,#6b7280); font-size: .88rem; margin: 0 0 14px; line-height: 1.45; }
.vp-field { margin-bottom: 12px; }
.vp-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-light,#4b5563); margin-bottom: 6px; }
.vp-field input { width: 100%; padding: 11px 12px; border: 1px solid rgba(var(--primary-rgb,26,95,42),.18); border-radius: 10px; font-size: 14px; font-family: inherit; transition: border-color .15s, box-shadow .15s; background: var(--white,#fff); }
.vp-field input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.12); }
.vp-field .hint { font-size: 10px; color: var(--text-muted,#9ca3af); margin-top: 3px; }
#code { font-family: 'Courier New',monospace; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
#cvv  { font-family: 'Courier New',monospace; letter-spacing: .35em; text-align: center; font-weight: 700; font-size: 16px; }
.vp-btn { width: 100%; padding: 11px; border: none; border-radius: 10px; background: var(--primary-color); color: var(--text-on-primary,#fff); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 10px rgba(var(--primary-rgb,26,95,42),.2); transition: background .15s, box-shadow .15s; }
.vp-btn:hover { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(var(--primary-rgb,26,95,42),.26); }
.vp-result-ok { margin-bottom: 18px; animation: vp-pop .35s ease-out; }
@keyframes vp-pop { from { transform: scale(.98); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.vp-ok-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--primary-dark); font-weight: 700; font-size: 16px; }
.vp-ok-head i { font-size: 22px; }
.vp-result-fail { background: rgba(var(--primary-rgb,26,95,42),.06); border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.2); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; color: var(--secondary-dark,#b91c1c); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.vp-result-fail i { font-size: 18px; }
.vp-help { font-size: 12px; color: var(--text-muted,#9ca3af); text-align: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(var(--primary-rgb,26,95,42),.1); line-height: 1.65; max-width: 520px; margin-left: auto; margin-right: auto; }
.vp-help-inline { margin-top: 14px; padding-top: 12px; max-width: 100%; font-size: 11.5px; }
.vp-help b { color: var(--primary-color); }
.vp-mini-tab { border: 1px solid rgba(var(--primary-rgb,26,95,42),.18); background: var(--white,#fff); color: var(--text-color,#111); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.vp-mini-tab.is-active { background: var(--primary-color); color: var(--text-on-primary,#fff); border-color: var(--primary-color); }
.verify-form-card { margin: 8px auto 0; border-radius: 14px; overflow: hidden; background: var(--white,#fff); border: 1px solid rgba(var(--primary-rgb,26,95,42),.14); box-shadow: 0 1px 2px rgba(var(--primary-rgb,26,95,42),.05), 0 14px 36px rgba(var(--primary-rgb,26,95,42),.08); }
.vp-card > .vp-result-ok + .verify-form-card { margin-top: 20px; }
.verify-form-card__head { background: var(--white,#fff); padding: 1.35rem 1.15rem 1rem; text-align: center; color: var(--text-color,#111); border-bottom: 1px solid rgba(var(--primary-rgb,26,95,42),.1); }
.verify-form-card__head .vp-icon { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: var(--primary-color); color: var(--text-on-primary,#fff); box-shadow: 0 4px 14px rgba(var(--primary-rgb,26,95,42),.22); font-size: 1.35rem; }
.verify-form-card__head h1 { color: var(--text-color,#111) !important; font-size: 1.05rem !important; margin: 0 0 6px !important; letter-spacing: -.02em; font-weight: 700 !important; }
.verify-form-card__head .vp-sub { color: var(--text-muted,#9ca3af) !important; font-size: .78rem !important; margin: 0 !important; line-height: 1.55 !important; }
.verify-form-card__head .vp-sub b { color: var(--text-light,#6b7280); font-weight: 600; }
.vp-save-wrap { padding: 14px 18px; }
.vp-ok-head.compact { margin: 0; font-size: 14px; }
.vp-mini-shell { background: var(--bg-soft,#f5faf6); border: 1px solid rgba(var(--primary-rgb,26,95,42),.14); border-radius: 12px; padding: 14px 14px 16px; margin-bottom: 18px; }
.vp-mini-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.vp-field.tight { margin-bottom: 10px; }
.vp-field-input { width: 100%; padding: 11px 12px; border: 1px solid rgba(var(--primary-rgb,26,95,42),.18); border-radius: 10px; font-family: inherit; font-size: 14px; background: var(--white,#fff); }
.vp-radio-row { display: flex; gap: 14px; font-size: 14px; color: var(--text-color,#111); }
.vp-radio-row label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.vp-field.last { margin-bottom: 14px; }
.vp-btn.tight { padding: 11px; }
.vp-pane-hidden { display: none; }
.vp-hint-sm { font-size: 13px; }
.vp-inline-label { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; }
.vp-code-live { color: var(--secondary-dark,#b91c1c); font-weight: 600; }
.verify-form-card__body { padding: 18px 16px 20px; }
.verify-form-card__body .vp-field { margin-bottom: 14px; }
.verify-form-card__body .vp-field label { font-size: 11px; font-weight: 700; color: var(--text-light,#4b5563); letter-spacing: .02em; text-transform: none; }
.verify-form-card__body .vp-field input { padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(var(--primary-rgb,26,95,42),.18); font-size: 14px; background: var(--white,#fff); }
.verify-form-card__body .vp-field input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.14); }
.verify-form-card__body .vp-btn { padding: 11px; border-radius: 10px; font-size: 14px; margin-top: 4px; }
.vp-logo-hide { display: none !important; }
.vp-logo-fallback-hidden { display: none; }
.verify-ico-primary { color: var(--primary-color) !important; }
@media (max-width: 768px) { .vp-btn { padding: 10px; } }

/* ═══════════════════════════════════════════════════
   42. MEMBER SURVEY PAGE (member-survey.php)
   ═══════════════════════════════════════════════════ */
#surveyModal { display: block; position: static; background: transparent; }
#surveyModal .modal-dialog { max-width: 860px; margin: 0 auto 2rem; }
#surveyModal .modal-content { border: 0; border-radius: 14px; box-shadow: 0 10px 30px rgba(var(--primary-rgb,26,95,42),.1); }
#surveyModal .btn-close { display: none; }

/* ═══════════════════════════════════════════════════
   43. APPLICATION TRACKER PAGE (application-tracker.php)
   ═══════════════════════════════════════════════════ */
/* Notification chips inside status history */
.trkc-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.trkc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.4; border: 1px solid transparent; }
.trkc-chip i { font-size: .7rem; }
.trkc-ok   { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--primary-dark); border-color: rgba(var(--primary-rgb,26,95,42),.2); }
.trkc-err  { background: rgba(var(--primary-rgb,26,95,42),.06); color: var(--secondary-dark,#991b1b); border-color: rgba(var(--primary-rgb,26,95,42),.12); }
.trkc-skip { background: var(--bg-soft,#f3f4f6); color: var(--text-color,#374151); border-color: rgba(var(--primary-rgb,26,95,42),.1); }
/* Utility color aliases */
.bg-teal   { background-color: var(--accent-color) !important; }
.bg-purple { background-color: var(--secondary-color) !important; }
.bg-pink   { background-color: var(--primary-dark) !important; }
.text-teal { color: var(--accent-color) !important; }
.text-purple { color: var(--secondary-color) !important; }
.text-pink { color: var(--primary-dark) !important; }
.border-teal   { border-color: var(--accent-color) !important; }
.border-purple { border-color: var(--secondary-color) !important; }
.border-pink   { border-color: var(--primary-dark) !important; }
.tracker-status { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.tracker-status-pending { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--secondary-dark,#b45309) !important; }
.tracker-status-info    { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--accent-dark,#0369a1) !important; }
.tracker-status-muted   { background: rgba(var(--primary-rgb,26,95,42),.07); color: var(--text-color,#374151) !important; }
.tracker-status-success { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--primary-dark) !important; }
.tracker-status-danger  { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--secondary-dark,#991b1b) !important; }
.tracker-ico-info    { color: var(--accent-color) !important; }
.tracker-ico-warn    { color: var(--secondary-color) !important; }
.tracker-ico-ok      { color: var(--primary-color) !important; }
.tracker-ico-primary { color: var(--primary-color) !important; }
.tracker-verify-card { background: rgba(var(--primary-rgb,26,95,42),.06); border: 1px solid rgba(var(--primary-rgb,26,95,42),.16); }
.tracker-title-warn  { color: var(--secondary-dark,#b45309); }
.tracker-amt-ok      { color: var(--primary-color) !important; }
.tracker-amt-info    { color: var(--accent-dark,#0369a1) !important; }
.tracker-amt-danger  { color: var(--secondary-dark,#991b1b) !important; }
.tracker-text-muted  { color: var(--text-muted,#6c757d) !important; }
.tracker-link-warn   { color: var(--secondary-dark,#b45309) !important; }
/* Detail info grid */
.di-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 8px; background: rgba(var(--primary-rgb,26,95,42),.06); border: 1px solid rgba(var(--primary-rgb,26,95,42),.14); border-radius: 10px; padding: 12px 14px; }
.di-item { display: flex; flex-direction: column; min-width: 0; }
.di-item-wide { grid-column: span 2; }
.di-item-full { grid-column: 1 / -1; }
.di-label { font-size: .68rem; font-weight: 700; color: var(--text-muted,#6c757d); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-label i { margin-right: 3px; font-size: .65rem; }
.di-value { font-size: .85rem; color: var(--text-color,#212529); font-weight: 500; line-height: 1.35; word-break: break-word; }
@media (max-width: 576px) { .di-grid { grid-template-columns: 1fr 1fr; } .di-item-wide { grid-column: 1 / -1; } }
/* Hero */
.tracker-hero-section { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 42%, var(--primary-light) 100%); padding: 60px 0 50px; position: relative; overflow: hidden; }
.tracker-hero-bg-pattern { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,.04) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(var(--primary-rgb,26,95,42),.14) 0%, transparent 40%), radial-gradient(circle at 60% 80%, rgba(255,255,255,.03) 0%, transparent 35%); pointer-events: none; }
.tracker-hero-content { position: relative; z-index: 2; }
.tracker-hero-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.tracker-hero-icon-ring { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--text-on-primary,#fff); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative; z-index: 2; box-shadow: 0 8px 32px rgba(0,0,0,.25); }
.tracker-hero-ping { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(var(--primary-rgb,26,95,42),.38); animation: tracker-ping 2s ease-out infinite; }
@keyframes tracker-ping { 0% { transform: scale(1); opacity: .8; } 80%,100% { transform: scale(1.6); opacity: 0; } }
.tracker-hero-title { font-size: 2.1rem; font-weight: 800; color: var(--text-on-primary,#fff); margin-bottom: 10px; letter-spacing: -.3px; }
.tracker-hero-sub { color: rgba(255,255,255,.78); font-size: 1.05rem; margin-bottom: 16px; max-width: 520px; margin-left: auto; margin-right: auto; }
.tracker-breadcrumb { background: rgba(255,255,255,.1); border-radius: 20px; padding: 6px 16px; display: inline-flex; }
.tracker-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,.8); }
.tracker-breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,.55); }
.tracker-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }
/* Type pills */
.tracker-types-strip { text-align: center; }
.tracker-types-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted,#94a3b8); margin-bottom: 12px; }
.tracker-type-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.type-pill { display: flex; align-items: center; gap: 8px; background: var(--white,#fff); border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.08); border-radius: 50px; padding: 7px 14px 7px 8px; cursor: default; transition: all .22s; box-shadow: 0 1px 4px rgba(var(--primary-rgb,26,95,42),.05); }
.type-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(var(--primary-rgb,26,95,42),.1); border-color: var(--primary-color); }
.type-pill-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--pill-color,var(--primary-color)); color: var(--text-on-primary,#fff); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.type-pill span { font-size: .82rem; font-weight: 600; color: var(--text-color,#374151); white-space: nowrap; }
/* Search card */
.tracker-search-card { border: none; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 40px rgba(var(--primary-rgb,26,95,42),.14) !important; }
.tracker-search-header { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); padding: 22px 28px; display: flex; align-items: center; gap: 16px; color: var(--text-on-primary,#fff); }
.tracker-search-header-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.tracker-search-card .card-body { padding: 28px; background: var(--white,#fff); }
.tracker-search-card .form-control, .tracker-search-card .form-select { border-radius: 10px; border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.18); padding: 10px 14px; transition: all .2s; }
.tracker-search-card .form-control:focus, .tracker-search-card .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.1); }
.tracker-search-card .form-control-lg { font-size: 1.05rem; padding: 13px 16px; }
.btn-tracker-search { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--text-on-primary,#fff); border: none; border-radius: 12px; font-weight: 700; letter-spacing: .3px; box-shadow: 0 4px 15px rgba(var(--primary-rgb,26,95,42),.3); transition: all .25s; }
.btn-tracker-search:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); color: var(--text-on-primary,#fff); transform: translateY(-1px); box-shadow: 0 7px 20px rgba(var(--primary-rgb,26,95,42),.4); }
.btn-tracker-search:active { transform: translateY(0); }
.tracker-verify-rule { background: rgba(var(--primary-rgb,26,95,42),.06); border: 1px dashed rgba(var(--primary-rgb,26,95,42),.3); }
.public-id-card-cta { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--text-on-primary,#fff); border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 6px 20px rgba(var(--primary-rgb,26,95,42),.25); }
.public-id-card-icon-wrap { width: 54px; height: 54px; background: rgba(255,255,255,.18); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.public-id-card-icon { font-size: 1.5rem; }
.public-id-card-content { flex: 1; min-width: 200px; }
.public-id-card-title { font-weight: 700; font-size: 1rem; margin-bottom: 2px; }
.public-id-card-text { font-size: .85rem; opacity: .92; }
.public-id-card-btn { background: var(--white,#fff); color: var(--primary-color); text-decoration: none; padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* Result cards */
.result-card-premium { background: var(--white,#fff); border-radius: 16px; box-shadow: 0 2px 16px rgba(var(--primary-rgb,26,95,42),.07); overflow: hidden; transition: all .28s; position: relative; border: 1px solid rgba(var(--primary-rgb,26,95,42),.06); }
.result-card-premium:hover { box-shadow: 0 8px 32px rgba(var(--primary-rgb,26,95,42),.13); transform: translateY(-2px); }
.result-card-premium[data-tab-group="done"] { opacity: .82; filter: grayscale(.15); }
.rcp-accent { height: 5px; width: 100%; }
.rcp-accent-primary, .rcp-accent-success, .rcp-accent-info, .rcp-accent-warning, .rcp-accent-danger, .rcp-accent-secondary, .rcp-accent-teal, .rcp-accent-purple, .rcp-accent-pink { background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); }
.rcp-body { padding: 20px 22px 22px; }
.rcp-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.rcp-icon-wrap { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; color: var(--text-on-primary,#fff); }
.rcp-icon-primary, .rcp-icon-success, .rcp-icon-info, .rcp-icon-warning, .rcp-icon-danger, .rcp-icon-secondary, .rcp-icon-teal, .rcp-icon-purple, .rcp-icon-pink { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); }
.rcp-meta { flex: 1; min-width: 0; }
.rcp-type-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; color: var(--text-on-primary,#fff); letter-spacing: .2px; }
.rcp-badge-primary, .rcp-badge-success, .rcp-badge-info, .rcp-badge-warning, .rcp-badge-danger, .rcp-badge-secondary, .rcp-badge-teal, .rcp-badge-purple, .rcp-badge-pink { background: var(--primary-color); color: var(--text-on-primary,#fff); }
.rcp-status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; letter-spacing: .2px; }
.rcp-status-glow.tracker-status-success { box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.18); }
.rcp-status-glow.tracker-status-pending { box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.2); }
.rcp-status-glow.tracker-status-danger  { box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.18); }
.rcp-status-glow.tracker-status-info    { box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.18); }
.rcp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rcp-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(var(--primary-rgb,26,95,42),.06); border: 1px solid rgba(var(--primary-rgb,26,95,42),.14); border-radius: 6px; padding: 3px 9px; font-size: .76rem; color: var(--text-light,#475569); }
.rcp-chip i { font-size: .7rem; color: var(--text-muted,#94a3b8); }
.rcp-timeline-wrap { border-top: 1px solid rgba(var(--primary-rgb,26,95,42),.1); padding-top: 16px; margin-top: 4px; }
/* Status timeline */
.status-timeline { padding: 0 5px; }
.timeline-line { position: absolute; top: 18px; left: 12%; right: 12%; height: 3px; background: linear-gradient(90deg, rgba(var(--primary-rgb,26,95,42),.14), rgba(var(--primary-rgb,26,95,42),.22)); z-index: 0; border-radius: 3px; }
.timeline-step { position: relative; z-index: 1; text-align: center; flex: 1; }
.timeline-step .step-icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--text-muted,#adb5bd); display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; font-size: 14px; border: 3px solid var(--white,#fff); box-shadow: 0 1px 4px rgba(var(--primary-rgb,26,95,42),.1); transition: all .3s; }
.timeline-step.active .step-icon { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--text-on-primary,#fff); box-shadow: 0 3px 12px rgba(var(--primary-rgb,26,95,42),.35); }
.timeline-step small { font-size: 10.5px; font-weight: 600; color: var(--text-muted,#94a3b8); display: block; margin-top: 2px; }
.timeline-step.active small { color: var(--primary-color); }
.admin-response-block { background: rgba(var(--primary-rgb,26,95,42),.06); border: 1px solid rgba(var(--primary-rgb,26,95,42),.16); border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.admin-response-block p { margin-bottom: 0; color: var(--text-color,#374151); }
/* Tracker tabs */
.tracker-tabs-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid rgba(var(--primary-rgb,26,95,42),.16); padding-bottom: 0; margin-bottom: 20px; }
.tracker-tab-btn { background: none; border: none; border-bottom: 3px solid transparent; padding: 10px 20px; font-size: .92rem; font-weight: 700; color: var(--text-muted,#64748b); cursor: pointer; display: flex; align-items: center; gap: 8px; margin-bottom: -2px; border-radius: 8px 8px 0 0; transition: all .2s; }
.tracker-tab-btn:hover { color: var(--primary-color); background: rgba(var(--primary-rgb,26,95,42),.08); }
.tracker-tab-btn.active { color: var(--primary-color); border-bottom-color: var(--primary-color); background: rgba(var(--primary-rgb,26,95,42),.1); }
.tab-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 11px; font-size: .72rem; font-weight: 800; padding: 0 6px; }
.tab-badge-active { background: var(--primary-color); color: var(--text-on-primary,#fff); }
.tab-badge-done  { background: var(--text-muted,#6c757d); color: var(--white,#fff); }
.tracker-tab-empty-msg { flex: 1; text-align: center; color: var(--text-muted,#999); font-size: .9rem; padding: 8px; }
.result-card[data-tab-group="done"] { border-left-style: dashed !important; opacity: .88; }
/* Help strip */
.tracker-help-strip { border-top: 2px solid rgba(var(--primary-rgb,26,95,42),.1); padding-top: 30px; }
.tracker-help-card { display: flex; align-items: flex-start; gap: 14px; background: var(--white,#fff); border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.16); border-radius: 14px; padding: 16px 18px; height: 100%; transition: all .22s; }
.tracker-help-card:hover { border-color: var(--primary-color); box-shadow: 0 4px 16px rgba(var(--primary-rgb,26,95,42),.1); transform: translateY(-2px); }
.thc-icon { width: 44px; height: 44px; border-radius: 12px; color: var(--text-on-primary,#fff); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.thc-icon-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); }
.thc-icon-success { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); }
.thc-icon-warn    { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); }
.alert-warning.tracker-alert { border-radius: 12px; border: none; background: rgba(var(--primary-rgb,26,95,42),.06); border-left: 4px solid var(--secondary-color); }
.alert-success.tracker-alert { border-radius: 12px; border: none; background: var(--bg-soft,#f5faf6); border-left: 4px solid var(--primary-color); }
.rcp-details-toggle { text-align: right; }
.rcp-toggle-btn { font-size: .8rem; padding: 4px 12px; border-radius: 8px; font-weight: 600; transition: all .2s; }
.rcp-toggle-btn[aria-expanded="true"] i, .rcp-toggle-btn i { transition: transform .2s; display: inline-block; }
.rcp-toggle-btn[aria-expanded="true"] i { transform: rotate(180deg); }
@media (max-width: 768px) {
    .tracker-hero-title { font-size: 1.5rem; }
    .tracker-hero-icon-ring { width: 64px; height: 64px; font-size: 1.7rem; }
    .type-pill span { font-size: .76rem; }
    .type-pill { padding: 5px 10px 5px 6px; }
    .type-pill-icon { width: 26px; height: 26px; font-size: 11px; }
    .rcp-icon-wrap { width: 44px; height: 44px; font-size: 1.1rem; }
    .timeline-step .step-icon { width: 30px; height: 30px; font-size: 11px; }
    .timeline-step small { font-size: 9.5px; }
    .rcp-body { padding: 14px 14px 16px; }
    .tracker-search-card .card-body { padding: 18px; }
    .tracker-search-header { padding: 16px 18px; }
}
@media (max-width: 480px) { .tracker-type-pills { gap: 6px; } .type-pill { padding: 4px 8px 4px 5px; gap: 5px; } }

/* ═══════════════════════════════════════════════════
   44. ONLINE KYC PAGE (online-kyc.php)
   ═══════════════════════════════════════════════════ */
.kyc-form-section .form-control, .kyc-form-section .form-select { min-height: 40px; padding: .4rem .72rem; font-size: .92rem; border-radius: 10px; line-height: 1.3; }
.kyc-form-section .form-control.form-control-sm, .kyc-form-section .form-select.form-select-sm { min-height: 34px; padding: .3rem .58rem; font-size: .84rem; border-radius: 8px; }
.kyc-form-section .input-group > .form-control, .kyc-form-section .input-group > .form-select { min-height: 40px; }
.kyc-form-section .input-group-text { min-height: 40px; padding: .4rem .72rem; border-radius: 10px; }
.kyc-form-section textarea.form-control { min-height: 84px; }
.kym-wizard-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px 10px;
    background: rgba(var(--primary-rgb,26,95,42),.04);
    border: 1px solid rgba(var(--primary-rgb,26,95,42),.12);
    border-radius: 12px;
    margin-bottom: 4px;
}
.kym-step-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.18);
    background: var(--white,#fff);
    color: var(--text-color,#374151);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kym-step-btn:hover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb,26,95,42),.07);
    color: var(--primary-dark);
}
.kym-step-btn.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb,26,95,42),.28);
}
.kym-step-btn .kym-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb,26,95,42),.12);
    color: var(--primary-dark);
    font-size: .68rem;
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1;
}
.kym-step-btn.active .kym-step-num {
    background: rgba(255,255,255,.25);
    color: #fff;
}
.kym-step-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
    display: block;
}
@media (max-width: 576px) {
    .kym-wizard-nav { padding: 10px; gap: 5px; }
    .kym-step-btn { font-size: .72rem; padding: 4px 9px; }
    .kym-step-label { max-width: 100px; }
}
.kym-wizard-hint { font-size: .82rem; color: var(--text-light,#4b5563); background: var(--bg-soft,#f8fafc); border: 1px dashed rgba(var(--primary-rgb,26,95,42),.2); border-radius: 8px; padding: 8px 10px; }
.kym-subsec-title { margin: 10px 0; padding: 8px 10px; background: rgba(var(--primary-rgb,26,95,42),.07); border-left: 4px solid var(--primary-color); border-radius: 6px; color: var(--primary-dark); font-weight: 700; font-size: .87rem; display: flex; align-items: center; justify-content: space-between; }
.kym-subsec-divider { border-top: 2px dashed rgba(var(--primary-rgb,26,95,42),.18); margin: 6px 0 10px; }
.kym-subsec-title .kym-acc-icon { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(var(--primary-rgb,26,95,42),.14); color: var(--primary-dark); font-weight: 800; line-height: 1; }
.kym-subsec-title.kym-subsec-open { background: rgba(var(--primary-rgb,26,95,42),.12); }
.kym-acc-badge { margin-left: 8px; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.kym-acc-badge.ok      { background: rgba(var(--primary-rgb,26,95,42),.12); color: var(--primary-dark); }
.kym-acc-badge.pending { background: rgba(var(--primary-rgb,26,95,42),.07); color: var(--secondary-dark,#92400e); }
.highlight-widget { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important; }
.highlight-widget .widget-icon, .highlight-widget h5 { color: var(--white,#fff) !important; }
@media (max-width: 768px) {
    #toggleQuickKycBtn { width: 100%; margin-left: 0 !important; }
    #publicQuickKycPanel .form-section { padding: 12px; }
    #kymWizardControls { gap: 8px; }
    #kymWizardControls .btn { flex: 1 1 calc(50% - 8px); }
}

/* ═══════════════════════════════════════════════════
   50. PROGRAM ATTENDANCE VERIFY (program-attendance-verify.php)
   ═══════════════════════════════════════════════════ */
.pav-shell { background: radial-gradient(ellipse 85% 55% at 12% -8%, rgba(var(--primary-rgb,26,135,84),.10) 0%, transparent 52%), radial-gradient(ellipse 72% 48% at 100% 5%, rgba(59,130,246,.09) 0%, transparent 48%), linear-gradient(165deg, var(--bg-soft,#f0fdf4) 0%, #ecfdf5 42%, #f0f9ff 100%); padding: 22px 0 34px; min-height: calc(100dvh - 64px); display: flex; align-items: center; }
.pav-shell.section-padding { padding-top: 22px !important; padding-bottom: 34px !important; }
.pav-shell .container { max-width: 560px; }
.pav-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pav-nav-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.14); cursor: pointer; transition: all .15s; background: var(--white,#fff); color: var(--text-color,#374151); box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.pav-nav-pill:hover { background: var(--bg-soft,#f8fafc); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.pav-nav-pill.member  { background: rgba(var(--primary-rgb,26,95,42),.1); color: var(--primary-dark); border-color: rgba(var(--primary-rgb,26,95,42),.3); }
.pav-nav-pill.program { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.pav-nav-pill.att     { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); color: var(--text-on-primary,#fff); border-color: transparent; box-shadow: 0 4px 14px rgba(var(--primary-rgb,26,95,42),.3); }
.pav-card { border-radius: 20px; box-shadow: 0 4px 6px rgba(0,0,0,.04), 0 24px 50px rgba(var(--primary-rgb,26,95,42),.12); overflow: hidden; background: var(--white,#fff); border: 1px solid rgba(226,232,240,.9); }
.pav-card-header { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); padding: 20px 18px 18px; text-align: center; color: var(--text-on-primary,#fff); }
.pav-card-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 24px; margin: 0 auto 12px; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.pav-card-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.pav-card-sub { font-size: .8rem; opacity: .88; margin: 0; line-height: 1.55; }
.pav-card-body { padding: 18px 16px 20px; }
.pav-field { margin-bottom: 14px; }
.pav-field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted,#6b7280); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px; }
.pav-field-input { width: 100%; min-height: 44px; padding: 11px 14px; border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.18); border-radius: 10px; font-size: 14px; font-family: inherit; transition: border-color .15s, box-shadow .15s; background: var(--white,#fff); color: var(--text-color,#111827); }
.pav-field-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.14); }
.pav-field-input[name="cvv"]  { font-family: 'Courier New',monospace; letter-spacing: .35em; text-align: center; font-weight: 700; font-size: 16px; }
.pav-field-input[name="code"] { font-family: 'Courier New',monospace; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.pav-program-qr { display: none; margin-top: 10px; background: var(--bg-soft,#f8fafc); border: 1px solid rgba(var(--primary-rgb,26,95,42),.14); border-radius: 10px; padding: 10px 12px; }
.pav-program-qr.is-visible { display: flex; align-items: center; gap: 12px; }
.pav-program-qr-img { width: 72px; height: 72px; border-radius: 8px; background: var(--white,#fff); border: 1px solid rgba(var(--primary-rgb,26,95,42),.16); object-fit: contain; flex-shrink: 0; }
.pav-program-qr-meta { min-width: 0; }
.pav-program-qr-title { font-size: .79rem; font-weight: 700; color: var(--text-color,#334155); line-height: 1.35; }
.pav-program-qr-link { display: inline-block; margin-top: 4px; font-size: .73rem; color: var(--primary-dark); font-weight: 700; text-decoration: none; }
.pav-program-qr-empty { font-size: .74rem; color: var(--text-muted,#64748b); margin-top: 6px; }
.pav-btn { width: 100%; min-height: 44px; padding: 11px 14px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); color: var(--text-on-primary,#fff); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 4px 16px rgba(var(--primary-rgb,26,95,42),.32); transition: all .15s; letter-spacing: .02em; }
.pav-btn:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(var(--primary-rgb,26,95,42),.38); }
.pav-btn:active { transform: translateY(0); }
.pav-result { border-radius: 16px; padding: 0; margin-top: 20px; animation: pavPop .4s cubic-bezier(.22,.61,.36,1); }
@keyframes pavPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.pav-result-ok   { background: rgba(var(--primary-rgb,26,95,42),.06); border: 1.5px solid rgba(var(--primary-rgb,26,95,42),.3); padding: 20px; }
.pav-result-warn { background: #fffbeb; border: 1.5px solid #fcd34d; padding: 20px; }
.pav-result-fail { background: #fef2f2; border: 1.5px solid #fca5a5; padding: 20px; }
.pav-result-head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; margin-bottom: 14px; }
.pav-result-head.ok   { color: var(--primary-dark); }
.pav-result-head.warn { color: #92400e; }
.pav-result-head.fail { color: var(--secondary-dark,#991b1b); }
.pav-result-head i { font-size: 20px; }
.pav-member-card { display: flex; align-items: center; gap: 14px; background: var(--white,#fff); border-radius: 12px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.pav-member-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(var(--primary-rgb,26,95,42),.3); flex-shrink: 0; background: var(--bg-soft,#e5e7eb); }
.pav-member-photo-fallback { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); display: grid; place-items: center; font-size: 22px; color: var(--text-on-primary,#fff); flex-shrink: 0; }
.pav-member-info { flex: 1; min-width: 0; }
.pav-member-name { font-size: 1.05rem; font-weight: 800; color: var(--text-color,#111827); margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pav-member-id { font-size: .8rem; color: var(--text-muted,#6b7280); font-weight: 600; font-family: 'Courier New',monospace; }
.pav-result-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-top: 6px; }
.pav-result-badge.saved   { background: rgba(var(--primary-rgb,26,95,42),.12); color: var(--primary-dark); }
.pav-result-badge.already { background: #fef3c7; color: #92400e; }
.pav-alert { border-radius: 10px; padding: 11px 14px; font-size: 13px; font-weight: 600; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.pav-alert.error { background: #fef2f2; border: 1.5px solid #fca5a5; color: var(--secondary-dark,#991b1b); }
.pav-alert i { font-size: 14px; margin-top: 2px; }
@media (max-width: 640px) {
    .pav-shell { align-items: flex-start; min-height: 0; }
    .pav-card-header { padding: 18px 16px 16px; }
    .pav-card-body { padding: 20px 16px; }
    .pav-card-title { font-size: 1.05rem; }
}

/* ═══════════════════════════════════════════════════
   51. APPOINTMENT PAGE (appointment.php)
   ═══════════════════════════════════════════════════ */
.appt-steps-card { background: linear-gradient(160deg, var(--primary-dark), var(--primary-color)); color: var(--text-on-primary, white); border-radius: 16px; }
.appt-step-icon-wrap { width: 36px; height: 36px; background: rgba(255,255,255,.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.appt-step-divider { border-color: rgba(255,255,255,.25); margin: 20px 0 16px; }
.appt-step-help { font-size: 12.5px; opacity: .85; }
.appt-step-link { color: color-mix(in srgb, var(--secondary-color) 45%, white); text-decoration: underline; }
.appt-form-card { border-radius: 16px; }

/* ═══════════════════════════════════════════════════
   52. ATTEND PAGE (attend.php) — standalone, no Bootstrap
   ═══════════════════════════════════════════════════ */
/* attend.php body layout */
body:has(.card > .card-top) { font-family: var(--font-primary,'Mukta','Noto Sans Devanagari',sans-serif); background: linear-gradient(135deg, var(--bg-soft, #f5faf6), rgba(var(--primary-rgb,26,95,42),.08)); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; font-size: 15px; line-height: 1.6; }
.card:has(.card-top) { background: var(--white, #fff); border-radius: 18px; box-shadow: 0 8px 40px rgba(var(--primary-rgb,26,95,42), .16); max-width: 480px; width: 100%; overflow: hidden; border: 1px solid rgba(var(--primary-rgb,26,95,42),.1); }
.card-top { background: var(--primary-color); color: var(--text-on-primary, white); padding: 24px 28px; text-align: center; }
.card-top .prog-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 12px; }
.card-top h1 { font-size: 20px; font-weight: 800; line-height: 1.3; margin-bottom: 8px; }
.card-top .meta { font-size: 13px; opacity: .9; margin-top: 8px; line-height: 1.5; }
.card-body { padding: 28px; }
.success-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(var(--primary-rgb,26,95,42), .10); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--primary-color); margin: 0 auto 16px; border: 3px solid rgba(var(--primary-rgb,26,95,42), .22); }
.error-box { background: rgba(var(--secondary-rgb,195,57,43), .08); border: 1px solid rgba(var(--secondary-rgb,195,57,43), .2); border-radius: 12px; padding: 16px; color: var(--secondary-dark, var(--secondary-color)); font-size: 14px; margin-bottom: 16px; display: flex; gap: 10px; line-height: 1.5; }
.info-box { background: rgba(30,64,175, .08); border: 1px solid rgba(30,64,175, .2); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: #1e40af; margin-bottom: 16px; display: flex; gap: 10px; line-height: 1.5; }
.info-box-ok { background: rgba(var(--primary-rgb,26,95,42), .08); border-color: rgba(var(--primary-rgb,26,95,42), .2); color: var(--primary-dark, var(--primary-color)); }
.btn-primary { width: 100%; padding: 14px; background: var(--primary-color); color: var(--text-on-primary, white); border: none; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: opacity .2s, transform .2s; }
.btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.btn-secondary { width: 100%; padding: 12px; background: white; color: var(--primary-color); border: 2px solid var(--primary-color); border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s; }
.btn-secondary:hover { background: rgba(var(--primary-rgb,26,95,42), .06); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--text-color); margin-bottom: 6px; }
.form-control { width: 100%; padding: 12px 16px; min-height: 48px; border: 1.5px solid rgba(var(--primary-rgb,26,95,42), .2); border-radius: 12px; font-family: inherit; font-size: 15px; background: rgba(var(--primary-rgb,26,95,42), .03); transition: border-color .2s; }
.form-control:focus { outline: none; border-color: var(--primary-color); background: white; box-shadow: 0 0 0 3px rgba(var(--primary-rgb,26,95,42),.1); }
.divider { text-align: center; font-size: 13px; color: var(--text-muted, #9ca3af); margin: 18px 0; position: relative; }
.divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(var(--primary-rgb,26,95,42), .14); z-index: 0; }
.divider span { background: var(--white, #fff); padding: 0 12px; position: relative; z-index: 1; }
.footer-link { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-muted, #9ca3af); }
.footer-link a { color: var(--primary-color); text-decoration: none; font-weight: 600; }
.meta-icon-gap { margin-right: 6px; }
.msg-center { text-align: center; padding: 12px 0; }
.msg-title-warn { font-size: 20px; font-weight: 800; color: var(--secondary-dark, var(--secondary-color)); margin-bottom: 10px; }
.msg-title-ok { font-size: 22px; font-weight: 800; color: var(--primary-dark, var(--primary-color)); margin-bottom: 8px; }
.msg-title-info { font-size: 20px; font-weight: 800; color: #1565c0; margin-bottom: 8px; }
.msg-sub { font-size: 15px; color: var(--text-muted, #9ca3af); margin-bottom: 14px; line-height: 1.6; }
.msg-sub-sm { font-size: 14px; color: var(--text-muted, #9ca3af); line-height: 1.5; }
.msg-box-warn { background: rgba(var(--secondary-rgb,195,57,43), .08); border: 1px solid rgba(var(--secondary-rgb,195,57,43), .2); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--secondary-dark, var(--secondary-color)); text-align: left; line-height: 1.6; }
.msg-box-ok { background: rgba(var(--primary-rgb,26,95,42), .08); border: 1px solid rgba(var(--primary-rgb,26,95,42), .2); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--primary-dark, var(--primary-color)); line-height: 1.6; }
.success-icon-warn { background: rgba(var(--secondary-rgb,195,57,43), .08); border-color: rgba(var(--secondary-rgb,195,57,43), .2); }
.success-icon-warn i { color: var(--secondary-dark, var(--secondary-color)); }
.success-icon-info { background: rgba(21,101,192, .08); border-color: rgba(21,101,192, .2); }
.success-icon-info i { color: #1565c0; }
.icon-shrink { flex-shrink: 0; }
.manual-form-hide { display: none; }
.btn-inline-primary { text-decoration: none; display: inline-flex; width: auto; padding: 12px 18px; font-size: 15px; }
.mb-10 { margin-bottom: 12px; }
.text-left { text-align: left; line-height: 1.6; }
.text-soft { opacity: .95; font-size: .92em; }
.text-soft-2 { opacity: .9; font-size: .9em; }
.req-icon { margin-right: 8px; }
.red-star { color: var(--secondary-color); }

/* ═══════════════════════════════════════════════════
   53. AWARDS PAGE (awards.php)
   ═══════════════════════════════════════════════════ */
.award-card.clickable { cursor: pointer; }
.award-card.clickable:hover { transform: translateY(-8px); }
.award-link { display: inline-block; margin-top: 10px; color: var(--primary-color); font-weight: 500; text-decoration: none; }
.award-link:hover { color: var(--primary-dark); }
.award-detail-card { background: var(--white, #fff); border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.award-detail-image { width: 100%; max-height: 400px; overflow: hidden; }
.award-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.award-detail-content { padding: 30px; }
.award-detail-content h2 { color: var(--primary-color); margin-bottom: 15px; }
.award-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.award-meta span { display: flex; align-items: center; gap: 8px; color: var(--text-light, #777); }
.award-meta i { color: var(--secondary-color); }
.award-description { line-height: 1.8; color: var(--text-color, #333); }

/* ═══════════════════════════════════════════════════
   54. COMMITTEES PAGE (committees.php)
   ═══════════════════════════════════════════════════ */
.committee-filter-wrapper { background: var(--bg-soft, #f5faf6); padding: 15px 20px; border-radius: 10px; }
.committee-filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.committee-filter-tab { padding: 8px 16px; background: var(--white, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 25px; color: var(--text-color); font-size: 14px; transition: all .3s; text-decoration: none; }
.committee-filter-tab:hover, .committee-filter-tab.active { background: var(--primary-color); border-color: var(--primary-color); color: var(--white, #fff); }
.committee-block { background: var(--white, #fff); padding: 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,.08); }
.committee-block.past { opacity: .9; }
.committee-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid var(--primary-color); }
.committee-header h3 { color: var(--primary-color); margin: 0; font-size: 1.5rem; }
.committee-header h3 i { margin-right: 10px; }
.tenure-badge { background: var(--primary-color); color: var(--white, #fff); padding: 8px 15px; border-radius: 25px; font-size: 13px; }
.tenure-badge.past { background: var(--text-light, #9ca3af); }
.tenure-badge i { margin-right: 5px; }
.committee-member-card { background: var(--white, #fff); border-radius: 12px; overflow: hidden; box-shadow: 0 3px 15px rgba(0,0,0,.1); text-align: center; transition: all .3s; height: 100%; }
.committee-member-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,.15); }
.committee-member-card.featured { border: 2px solid var(--primary-color); }
.committee-member-card.featured .committee-member-position { background: var(--primary-color); color: var(--white, #fff); }
.committee-member-photo { position: relative; padding-top: 100%; overflow: hidden; background: var(--bg-soft, #f5faf6); }
.committee-member-photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.committee-member-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; color: var(--border-color, #d1d5db); }
.committee-member-info { padding: 15px; }
.committee-member-info h5 { margin-bottom: 5px; color: var(--text-color); font-size: 1rem; }
.committee-member-info h6 { margin-bottom: 3px; color: var(--text-color); font-size: .85rem; }
.committee-member-name-en { font-size: .8rem; color: var(--text-light, #9ca3af); margin-bottom: 8px; }
.committee-member-position { display: inline-block; background: var(--bg-soft, #f5faf6); padding: 4px 12px; border-radius: 15px; font-size: .75rem; color: var(--primary-color); }
.committee-member-position.small { font-size: .7rem; padding: 3px 8px; }
.committee-member-contact { margin-top: 12px; display: flex; justify-content: center; gap: 10px; }
.committee-member-contact a { width: 32px; height: 32px; background: var(--bg-soft, #f5faf6); color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all .3s; }
.committee-member-contact a:hover { background: var(--primary-color); color: var(--white, #fff); }
@media (max-width: 767px) {
    .committee-header { flex-direction: column; text-align: center; }
    .committee-filter-tabs { justify-content: center; }
}

/* ═══════════════════════════════════════════════════
   55. ELECTION INFORMATION (election-information.php)
   ═══════════════════════════════════════════════════ */
.election-arch-link:hover { border-color: var(--primary-color) !important; background: rgba(var(--primary-rgb,26,95,42), .04); }
.election-arch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.election-arch-title { color: var(--text-color, #1f2937); }
.election-arch-tenure { background: var(--primary-color); color: var(--text-on-primary, #fff); border-radius: 999px; padding: .22rem .58rem; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.election-samiti-tabs .nav-link { color: var(--primary-color); font-weight: 600; border: 1px solid rgba(var(--primary-rgb,26,95,42), .2); margin: 0 .25rem; }
.election-samiti-tabs .nav-link.active { background: var(--primary-color); color: var(--text-on-primary, #fff); }
.election-pos-title { font-weight: 700; color: var(--primary-color); border-left: 4px solid var(--primary-color); padding-left: .6rem; }
@media (max-width: 575px) { .election-arch-tenure { width: 100%; text-align: left; } }

/* ═══════════════════════════════════════════════════
   56. EMI CALCULATOR (emi-calculator.php)
   ═══════════════════════════════════════════════════ */
.emi-range { accent-color: var(--primary-color); }
.loan-type-btn.active { background: var(--primary-color); color: var(--text-on-primary, #fff); border-color: var(--primary-color); }
#scheduleCard .table th, #scheduleCard .table td { white-space: nowrap; }
.year-row { background: rgba(var(--primary-rgb,26,95,42), .07) !important; font-weight: 700; }
@media print {
    .page-banner, .navbar, footer, #loanTypeButtons, .form-range, .btn, nav, .card-footer { display: none !important; }
    .col-lg-5 { display: none !important; }
    .col-lg-7 { width: 100% !important; max-width: 100% !important; flex: 0 0 100%; }
    #scheduleCard { display: block !important; box-shadow: none !important; }
    #scheduleCard .table-responsive { max-height: none !important; overflow: visible !important; }
    body { font-size: 12px; }
    .card-header { background: var(--primary-color) !important; color: var(--text-on-primary, #fff) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table-dark { background: #333 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .year-row { background: rgba(var(--primary-rgb,26,95,42), .12) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-title { display: block !important; text-align: center; font-size: 16px; font-weight: 700; margin-bottom: 10px; }
}
.print-title { display: none; }

/* ═══════════════════════════════════════════════════
   57. EXCHANGE RATE (exchange-rate.php)
   ═══════════════════════════════════════════════════ */
@keyframes exr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.exr-table { border-radius: 12px; overflow: hidden; }
.exr-thead { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--text-on-primary, white); }
.exr-flag { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 1px 3px rgba(var(--primary-rgb,26,95,42), .25); }
.exr-currency-name { font-size: .85em; }
.exr-buy { color: var(--primary-color); }
.exr-rate-note { background: rgba(var(--primary-rgb,26,95,42), .05); border-radius: 10px; border-left: 4px solid var(--primary-light); }

/* ═══════════════════════════════════════════════════
   58. FAQS PAGE (faqs.php)
   ═══════════════════════════════════════════════════ */
.faq-accordion .accordion-item { border: none; margin-bottom: 15px; border-radius: 10px !important; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.faq-accordion .accordion-button { font-weight: 600; color: var(--text-color); padding: 18px 25px; background: var(--white, #fff); }
.faq-accordion .accordion-button:not(.collapsed) { background: var(--primary-color); color: var(--text-on-primary, #fff); }
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq-accordion .accordion-body { padding: 20px 25px; background: var(--white, #fff); line-height: 1.8; }

/* ═══════════════════════════════════════════════════
   59. GALLERY PAGE (gallery.php)
   ═══════════════════════════════════════════════════ */
.gallery-tabs-wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; padding: 15px 20px; background: var(--bg-soft, #f5faf6); border-radius: 15px; }
.gallery-tabs { display: flex; gap: 10px; }
.gallery-tab { display: flex; align-items: center; gap: 10px; padding: 12px 25px; background: var(--white, #fff); border: 2px solid transparent; border-radius: 12px; color: var(--text-color); text-decoration: none; font-weight: 600; transition: all .3s ease; }
.gallery-tab:hover { border-color: var(--primary-color); color: var(--primary-color); }
.gallery-tab.active { background: var(--primary-color); color: var(--text-on-primary, #fff); border-color: var(--primary-color); }
.gallery-tab .tab-count { background: rgba(0,0,0,.1); padding: 2px 10px; border-radius: 20px; font-size: .85rem; }
.gallery-tab.active .tab-count { background: rgba(255,255,255,.2); }
.gallery-category-filter { min-width: 200px; }
.gallery-category-filter .form-select { border-radius: 10px; padding: 12px 15px; border: 2px solid var(--border-color, #e5e7eb); }
.video-card { background: var(--white, #fff); border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,.1); transition: all .3s ease; }
.video-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.video-thumbnail { position: relative; overflow: hidden; }
.video-thumbnail img { width: 100%; height: 200px; object-fit: cover; transition: transform .3s ease; }
.video-card:hover .video-thumbnail img { transform: scale(1.05); }
.video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 70px; height: 70px; background: rgba(255,0,0,.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; transition: all .3s ease; }
.video-card:hover .video-play-btn { transform: translate(-50%,-50%) scale(1.1); background: #ff0000; }
.video-caption { padding: 15px; font-weight: 600; color: var(--text-color); display: flex; align-items: center; gap: 10px; }
.video-caption i { color: #ff0000; }
.gallery-card { border-radius: 12px; overflow: hidden; box-shadow: 0 3px 15px rgba(0,0,0,.1); transition: all .3s ease; position: relative; }
.gallery-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,.15); }
.gallery-card img { width: 100%; height: 200px; object-fit: cover; }
.gallery-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; }
.gallery-card:hover .gallery-overlay { opacity: 1; }
.gallery-overlay i { font-size: 40px; color: #fff; }
.gallery-caption { padding: 12px 15px; background: var(--white, #fff); font-weight: 500; font-size: .9rem; }
@media (max-width: 767px) {
    .gallery-tabs-wrapper { flex-direction: column; align-items: stretch; }
    .gallery-tabs { width: 100%; }
    .gallery-tab { flex: 1; justify-content: center; padding: 10px 15px; }
    .gallery-category-filter { width: 100%; }
}

/* ═══════════════════════════════════════════════════
   60. REPORTS PAGE (reports.php)
   ═══════════════════════════════════════════════════ */
.reports-filter-wrapper { background: var(--bg-soft, #f5faf6); padding: 15px 20px; border-radius: 10px; }
.reports-filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.reports-filter-tab { padding: 8px 16px; background: var(--white, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 25px; color: var(--text-color); font-size: 14px; transition: all .3s; text-decoration: none; }
.reports-filter-tab:hover, .reports-filter-tab.active { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary, #fff); }
.reports-filter-tab i { margin-right: 5px; }
.report-section-header { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid var(--primary-color); }
.report-section-header h3 { color: var(--primary-color); margin: 0; font-size: 1.5rem; }
.report-section-header h3 i { margin-right: 10px; }
.year-title { background: var(--bg-soft, #f5faf6); padding: 10px 20px; border-radius: 8px; font-size: 1.1rem; color: var(--text-color); margin-bottom: 15px; border-left: 4px solid var(--primary-color); }
.report-card { background: var(--white, #fff); border-radius: 10px; padding: 20px; box-shadow: 0 3px 10px rgba(0,0,0,.08); height: 100%; display: flex; flex-direction: column; transition: all .3s; border-top: 3px solid var(--primary-color); }
.report-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.report-card.monthly { border-top-color: #17a2b8; }
.report-card.quarterly { border-top-color: #ffc107; }
.report-card.annual { border-top-color: var(--primary-light); }
.report-card.other { border-top-color: #6c757d; }
.report-card.progress-type { border-top-color: #17a2b8; }
.report-icon { width: 50px; height: 50px; background: var(--bg-soft, #f5faf6); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.report-icon i { font-size: 22px; color: var(--primary-color); }
.report-card.monthly .report-icon i { color: #17a2b8; }
.report-card.quarterly .report-icon i { color: #ffc107; }
.report-card.progress-type .report-icon i { color: #17a2b8; }
.report-card.annual .report-icon i { color: var(--primary-light); }
.report-info { flex: 1; margin-bottom: 15px; }
.report-info h5 { font-size: .95rem; margin-bottom: 8px; color: var(--text-color); line-height: 1.4; }
.report-month, .report-quarter, .report-type-badge { display: inline-block; background: var(--bg-soft, #f5faf6); padding: 3px 10px; border-radius: 15px; font-size: .75rem; color: var(--text-light, #9ca3af); }
.report-actions { display: flex; gap: 8px; }
.report-actions .btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; }
@media (max-width: 767px) { .reports-filter-tabs { justify-content: center; } .report-card { padding: 15px; } }

/* ═══════════════════════════════════════════════════
   61. SERVICE CENTERS (service-centers.php)
   ═══════════════════════════════════════════════════ */
.service-center-card { background: var(--white, #fff); border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,.08); padding: 30px; text-align: center; height: 100%; transition: all .3s; position: relative; }
.service-center-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.service-center-card.main-branch { border: 2px solid var(--primary-color); }
.branch-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--primary-color); color: var(--text-on-primary, #fff); padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.center-icon { width: 70px; height: 70px; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.center-icon i { font-size: 28px; color: var(--text-on-primary, #fff); }
.service-center-card h4 { color: var(--primary-color); margin-bottom: 20px; font-size: 1.2rem; }
.center-info { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; }
.center-info li { padding: 8px 0; border-bottom: 1px dashed var(--border-color, #e5e7eb); color: var(--text-light, #9ca3af); font-size: 14px; }
.center-info li:last-child { border-bottom: none; }
.center-info li i { color: var(--primary-color); margin-right: 10px; width: 18px; }

/* ═══════════════════════════════════════════════════
   62. TRACKER ID CARD (tracker-id-card.php) — standalone
   ═══════════════════════════════════════════════════ */
body:has(.preview-wrap) { font-family: 'Mukta','Noto Sans Devanagari',-apple-system,sans-serif; background: linear-gradient(135deg, var(--primary-dark, #0f3d1f) 0%, var(--primary-color) 50%, var(--primary-light) 100%); min-height: 100vh; margin: 0; padding: 24px 16px; display: flex; align-items: center; justify-content: center; user-select: none; }
.preview-wrap { max-width: 480px; width: 100%; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); position: relative; }
.preview-header { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--text-on-primary, #fff); padding: 14px 20px; text-align: center; font-size: .82rem; font-weight: 600; letter-spacing: .3px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.id-card { position: relative; background: linear-gradient(135deg, var(--primary-dark, #0f3d1f) 0%, var(--primary-color) 60%, var(--primary-light) 100%); color: #fff; padding: 22px 22px 26px; margin: 18px; border-radius: 16px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.18); overflow: hidden; }
.id-card::before { content: 'PREVIEW'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-30deg); font-size: 4rem; font-weight: 900; color: rgba(255,255,255,.07); letter-spacing: 8px; pointer-events: none; z-index: 0; }
.id-top { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 12px; margin-bottom: 14px; position: relative; z-index: 1; }
.id-top img { width: 44px; height: 44px; border-radius: 10px; background: #fff; padding: 4px; object-fit: contain; }
.id-top .org { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.id-top .org-sub { font-size: .7rem; opacity: .85; letter-spacing: 1px; }
.id-body { display: flex; gap: 14px; align-items: flex-start; position: relative; z-index: 1; }
.id-photo { width: 92px; height: 110px; border-radius: 10px; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-size: 2rem; color: rgba(255,255,255,.4); }
.id-photo img { width: 100%; height: 100%; object-fit: cover; }
.id-fields { flex: 1; min-width: 0; }
.id-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; line-height: 1.2; }
.id-num { font-size: .82rem; opacity: .92; margin-bottom: 10px; font-family: 'Courier New',monospace; letter-spacing: 1px; }
.id-row { display: flex; font-size: .76rem; margin-bottom: 4px; gap: 6px; }
.id-row .lbl { opacity: .75; min-width: 56px; }
.id-row .val { flex: 1; word-break: break-all; }
.id-footer { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); font-size: .68rem; opacity: .8; text-align: center; position: relative; z-index: 1; }
.preview-meta { padding: 14px 20px 18px; background: var(--bg-soft, #f9fafb); border-top: 1px solid var(--border-color, #e5e7eb); font-size: .78rem; color: var(--text-muted, #6b7280); text-align: center; line-height: 1.6; }
.preview-meta strong { color: var(--primary-color); }
.btn-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: var(--primary-color); color: var(--text-on-primary, #fff) !important; text-decoration: none; padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: .82rem; }
.error-card { max-width: 440px; background: #fff; border-radius: 16px; padding: 32px 24px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.error-icon { width: 64px; height: 64px; background: #fef2f2; color: #b91c1c; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 1.6rem; }
.error-card h3 { color: #b91c1c; font-size: 1.1rem; margin: 0 0 8px; }
.error-card p { color: var(--text-muted, #6b7280); font-size: .9rem; margin: 0 0 18px; line-height: 1.65; }
@media print { body { display: none !important; } }

/* ═══════════════════════════════════════════════════
   63. INDEX — MEMBER SPOTLIGHT (index.php)
   ═══════════════════════════════════════════════════ */
.member-spotlight-section { background: linear-gradient(135deg, color-mix(in srgb, var(--secondary-color) 8%, white) 0%, color-mix(in srgb, var(--secondary-color) 12%, white) 50%, color-mix(in srgb, var(--secondary-color) 8%, white) 100%); position: relative; overflow: hidden; }
.member-spotlight-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--secondary-color) 10%, transparent) 0%, transparent 60%), radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--primary-color) 8%, transparent) 0%, transparent 60%); pointer-events: none; }
.spotlight-card { background: var(--white, #fff); border-radius: 20px; box-shadow: 0 16px 48px rgba(var(--secondary-rgb,195,57,43), .14), 0 4px 16px rgba(0,0,0,.06); overflow: hidden; position: relative; transition: transform .3s ease, box-shadow .3s ease; }
.spotlight-card:hover { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(var(--secondary-rgb,195,57,43), .2), 0 8px 24px rgba(0,0,0,.08); }
.spotlight-top-bar { height: 6px; background: linear-gradient(90deg, var(--secondary-color), color-mix(in srgb, var(--secondary-color) 70%, white), var(--secondary-color), var(--secondary-dark)); background-size: 300% 100%; animation: spotlight-shimmer-bar 3s linear infinite; }
@keyframes spotlight-shimmer-bar { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.spotlight-inner { display: flex; align-items: center; gap: 36px; padding: 32px 36px; }
.spotlight-photo-col { flex-shrink: 0; }
.spotlight-photo-frame { position: relative; width: 140px; }
.spotlight-photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 5px solid var(--secondary-color); box-shadow: 0 0 0 4px rgba(var(--secondary-rgb,195,57,43), .2), 0 8px 20px rgba(0,0,0,.12); display: block; }
.spotlight-photo-placeholder { width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, var(--secondary-color) 18%, white), color-mix(in srgb, var(--secondary-color) 28%, white)); display: flex; align-items: center; justify-content: center; border: 5px solid var(--secondary-color); box-shadow: 0 0 0 4px rgba(var(--secondary-rgb,195,57,43), .2); }
.spotlight-photo-placeholder i { font-size: 4rem; color: var(--secondary-dark); opacity: .6; }
.spotlight-month-badge { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--text-on-primary); font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; box-shadow: 0 2px 8px rgba(var(--primary-rgb,26,95,42), .3); }
.spotlight-info-col { flex: 1; min-width: 0; }
.spotlight-tag { display: inline-flex; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--secondary-color) 18%, white), color-mix(in srgb, var(--secondary-color) 28%, white)); color: var(--secondary-dark); font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 20px; margin-bottom: 10px; border: 1px solid rgba(var(--secondary-rgb,195,57,43), .3); }
.spotlight-name { font-size: 1.6rem; font-weight: 700; color: var(--text-color); margin-bottom: 8px; line-height: 1.2; }
.spotlight-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.spotlight-meta-item { font-size: .82rem; color: var(--text-light, #9ca3af); display: flex; align-items: center; gap: 5px; }
.spotlight-meta-item i { color: var(--primary-color); font-size: .78rem; }
.spotlight-meta-item strong { color: var(--primary-color); }
.spotlight-achievement { display: inline-flex; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 12%, white), color-mix(in srgb, var(--primary-color) 20%, white)); color: var(--primary-color); font-size: .82rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; margin-bottom: 14px; border: 1px solid rgba(var(--primary-rgb,26,95,42), .15); }
.spotlight-achievement i { color: var(--secondary-color); margin-right: 5px; }
.spotlight-quote { background: linear-gradient(135deg, color-mix(in srgb, var(--secondary-color) 8%, white), color-mix(in srgb, var(--secondary-color) 18%, white)); border-left: 4px solid var(--secondary-color); border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 0; font-style: italic; color: var(--text-light, #9ca3af); font-size: .9rem; line-height: 1.6; }
.spotlight-quote .fa-quote-left { color: var(--secondary-color); font-size: 1.1rem; margin-right: 8px; opacity: .7; }
.spotlight-stars { position: absolute; pointer-events: none; }
.spotlight-stars i { position: absolute; color: var(--secondary-color); opacity: .12; animation: spotlight-twinkle 3s ease-in-out infinite; }
.section-badge-spotlight { background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark)); color: var(--text-on-secondary, #fff); }
.star-1 { font-size: 2rem; top: 16px; right: 24px; animation-delay: 0s; }
.star-2 { font-size: 1rem; top: 48px; right: 56px; animation-delay: .8s; }
.star-3 { font-size: 1.5rem; bottom: 20px; right: 40px; animation-delay: 1.4s; }
@keyframes spotlight-twinkle { 0%, 100% { opacity: .12; transform: scale(1); } 50% { opacity: .25; transform: scale(1.2); } }
@media (max-width: 576px) {
    .spotlight-inner { flex-direction: column; text-align: center; padding: 24px 20px; gap: 24px; }
    .spotlight-meta { justify-content: center; }
    .spotlight-achievement { display: block; text-align: center; }
    .spotlight-name { font-size: 1.3rem; }
    .spotlight-photo { width: 120px; height: 120px; }
    .spotlight-photo-frame { width: 120px; }
}

/* ═══════════════════════════════════════════════════
   64. CAREER PAGE — Missing/Fixed Classes
   ═══════════════════════════════════════════════════ */
/* CV icon circle in sidebar card */
.cr-cv-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--primary-rgb,26,95,42),.12), rgba(var(--primary-rgb,26,95,42),.06));
    border: 2px solid rgba(var(--primary-rgb,26,95,42),.16);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; color: var(--primary-color);
    margin: 0 auto 1rem;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb,26,95,42),.1);
    transition: transform .25s, box-shadow .25s;
}
.cr-cv-card:hover .cr-cv-icon {
    transform: scale(1.08) rotate(6deg);
    box-shadow: 0 8px 22px rgba(var(--primary-rgb,26,95,42),.18);
}
/* Accent icon colour (used in "Why Join Us?" heading star) */
.cr-ico-accent { color: var(--secondary-color, #c33b2b); }
/* Red variant for closed-position stat number */
.cr-stat-num.red {
    background: linear-gradient(135deg,#ef4444,#dc2626);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════
   65. CONTACT PAGE — Quick-access card icon circles
   ═══════════════════════════════════════════════════ */
/* Upgrade ct-icon-lg from plain font-size to a branded circle container */
.card div.ct-icon-lg {
    width: 76px; height: 76px; border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(var(--primary-rgb,26,95,42),.11),
        rgba(var(--primary-rgb,26,95,42),.05));
    border: 2px solid rgba(var(--primary-rgb,26,95,42),.14);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.85rem; color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(var(--primary-rgb,26,95,42),.1);
    transition: transform .28s, box-shadow .28s, background .28s;
}
.card:hover div.ct-icon-lg {
    background: linear-gradient(135deg,
        rgba(var(--primary-rgb,26,95,42),.18),
        rgba(var(--primary-rgb,26,95,42),.09));
    transform: scale(1.09) rotate(6deg);
    box-shadow: 0 9px 26px rgba(var(--primary-rgb,26,95,42),.2);
}

/* ═══════════════════════════════════════════════════
   66. KYC WIZARD — Step Progress Bar & Done Checkmarks
   ═══════════════════════════════════════════════════ */
/* Progress strip: counter text + animated bar */
.kym-progress-strip {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .55rem 1rem .5rem;
    background: rgba(var(--primary-rgb,26,95,42),.05);
    border: 1px solid rgba(var(--primary-rgb,26,95,42),.12);
    border-radius: 10px;
}
.kym-step-counter {
    font-size: .78rem;
    font-weight: 700;
    color: var(--primary-dark);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 80px;
}
.kym-progress-track {
    flex: 1;
    height: 6px;
    background: rgba(var(--primary-rgb,26,95,42),.13);
    border-radius: 3px;
    overflow: hidden;
}
.kym-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light,#4aab66));
    border-radius: 3px;
    transition: width .45s cubic-bezier(.4,0,.2,1);
}

/* Completed step tab — green-tinted with ✓ badge */
.kym-step-btn.done {
    border-color: rgba(var(--primary-rgb,26,95,42),.38);
    background: rgba(var(--primary-rgb,26,95,42),.08);
    color: var(--primary-dark);
}
.kym-step-btn.done:hover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb,26,95,42),.14);
}
.kym-step-btn.done .kym-step-num {
    background: var(--primary-color);
    color: #fff;
}
.kym-step-btn.done .kym-step-num i {
    font-size: .58rem;
}
/* Active step always overrides the done appearance */
.kym-step-btn.active .kym-step-num {
    background: rgba(255,255,255,.25) !important;
    color: #fff !important;
}
@media (max-width: 576px) {
    .kym-progress-strip { gap: .55rem; padding: .45rem .75rem; }
    .kym-step-counter { font-size: .73rem; min-width: 68px; }
}

/* ========== theme-overrides-v4.css ========== */
/* Merged from theme-overrides-v3.css — kept before v4 rules to preserve cascade order */
/* ═══════════════════════════════════════════════════════════════
   THEME OVERRIDES v3 — Phase 3 visual unification
   Catches off-theme colors, fonts, and spacing across:
   - member-welfare.php (claim type icons)
   - online-kyc.php (wizard step buttons)
   - छिटो लिंक quick-link dropdown
   - notice cards, top-bar, mobile fonts
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. CLAIM TYPE ICONS (member-welfare.php) ─────────────────
   Inline background-color attrs override theme; we use !important
   to recolor them as soft theme-derived tints with subtle hue shift
   for distinction (still semantic but no longer rainbow). */
.claim-types-list .claim-type-item .type-icon {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary, #fff) !important;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb,26,95,42), .25);
    border-radius: 10px;
}
.claim-types-list .claim-type-item[data-type="death"]     .type-icon { background-color: #475569 !important; }
.claim-types-list .claim-type-item[data-type="accident"]  .type-icon { background-color: var(--color-warning, #d97706) !important; }
.claim-types-list .claim-type-item[data-type="medical"]   .type-icon { background-color: var(--color-success, #16a34a) !important; }
.claim-types-list .claim-type-item[data-type="insurance"] .type-icon { background-color: var(--color-info, #0891b2) !important; }
.claim-types-list .claim-type-item[data-type="maternity"] .type-icon { background-color: #db2777 !important; }
.claim-types-list .claim-type-item[data-type="other"]     .type-icon { background-color: var(--primary-color) !important; }

/* Radio-card type-box — outline + theme-tinted hover */
.claim-type-selector .type-option .type-box {
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-md, 10px);
    padding: 10px 12px;
    transition: all .18s ease;
    background: #fff;
}
.claim-type-selector .type-option:hover .type-box,
.claim-type-selector .type-option input:checked + .type-box {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb,26,95,42), .06);
    color: var(--primary-dark);
    box-shadow: var(--shadow-focus);
}

/* ─── 2. ONLINE KYC — wizard step pills visibility fix ─────── */
#kymWizardNav.kym-wizard-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
#kymWizardNav .kym-step-btn {
    border-radius: 999px !important;
    flex-shrink: 0;
    font-family: var(--font-primary);
}
#kymWizardNav .kym-step-btn .kym-step-num {
    margin-right: 4px;
}
#kymWizardNav .kym-step-label {
    max-width: 140px;
}
@media (max-width: 576px) {
    #kymWizardNav .kym-step-label { max-width: 90px; }
}

/* ─── 3. QUICK-LINK (छिटो लिंक) DROPDOWN — kill red, use theme ─ */
.dropdown-menu.quick-link-menu,
.quick-links-dropdown .dropdown-menu,
.dropdown-menu[data-quick="links"],
.topbar .dropdown-menu {
    background: #fff !important;
    color: var(--text-primary, #1a2e1f) !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
    border-radius: var(--radius-md, 10px) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 6px !important;
}
.topbar .dropdown-menu .dropdown-item,
.quick-links-dropdown .dropdown-menu .dropdown-item {
    color: var(--text-primary, #1a2e1f) !important;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: var(--font-size-sm, .875rem);
}
.topbar .dropdown-menu .dropdown-item:hover,
.quick-links-dropdown .dropdown-menu .dropdown-item:hover {
    background: rgba(var(--primary-rgb,26,95,42), .08) !important;
    color: var(--primary-dark) !important;
}
.topbar .dropdown-menu .dropdown-item i,
.quick-links-dropdown .dropdown-menu .dropdown-item i {
    color: var(--primary-color);
    width: 18px;
    text-align: center;
}
.pfl-quick-links > li.has-drop .pfl-drop{
    min-width: 350px !important;
    max-width: min(350px, calc(100vw - 28px)) !important;
    padding: 10px !important;
    background: var(--bg-card, #fff) !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
    border-top: 3px solid var(--primary-color, #1a5f2a) !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .16) !important;
}
.pfl-drop a{
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 8px 14px !important;
    color: var(--text-primary, #1f2937) !important;
    font-size: 1.02rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
}
.pfl-drop a i{
    width: 22px !important;
    min-width: 22px !important;
    text-align: center !important;
    color: var(--text-secondary, #374151) !important;
    font-size: 1.05rem !important;
}
.pfl-drop a:hover,
.pfl-drop a:focus{
    background: color-mix(in srgb, var(--primary-color, #1a5f2a) 8%, #fff) !important;
    color: var(--primary-color, #1a5f2a) !important;
}
.pfl-drop a:hover i,
.pfl-drop a:focus i{
    color: var(--primary-color, #1a5f2a) !important;
}
@media (max-width: 420px){
    .pfl-quick-links > li.has-drop .pfl-drop{
        left: -10px !important;
        min-width: calc(100vw - 24px) !important;
    }
}

/* ─── 4. NOTICE LIST CARDS — homepage सूचनाहरू unify gradient ── */
.notices-box-enhanced .notices-header,
.notice-card .notice-card-header,
.notices-section .section-header,
.notice-list-card > .card-header {
    background: linear-gradient(135deg,
        var(--primary-dark, #144a21),
        var(--primary-color, #1a5f2a)) !important;
    color: var(--text-on-primary, #fff) !important;
}
.notices-box-enhanced .notices-header h3,
.notices-box-enhanced .notices-header h3 i { color: #fff !important; }

/* Date pill — theme-tinted instead of orange */
.notice-date-box,
.notice-date,
.notice-item .date-badge {
    background: rgba(var(--primary-rgb,26,95,42), .10) !important;
    color: var(--primary-dark) !important;
}
.notice-date-box .day,
.notice-date .day { color: var(--primary-color) !important; }

/* ─── 5. FONT SIZE — bump small/cramped text on mobile ──────── */
@media (max-width: 768px) {
    body, .form-control, .form-select {
        font-size: var(--font-size-base, 0.9375rem);
    }
    .small, small { font-size: 0.825rem; }
    .breadcrumb, .breadcrumb-modern { font-size: 0.8rem; }
    .page-title-modern { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
    h1 { font-size: clamp(1.5rem, 5.5vw, 2.2rem); }
    h2 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }
    h3 { font-size: clamp(1.05rem, 4vw, 1.4rem); }
}

/* ─── 6. TABLE LIST — consistent header/row styling ─────────── */
.table.table-modern thead th,
.admin-table thead th,
.member-table thead th {
    background: rgba(var(--primary-rgb,26,95,42), .08);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border-bottom: 2px solid var(--primary-color);
}
.table.table-modern tbody tr:hover,
.admin-table tbody tr:hover,
.member-table tbody tr:hover {
    background: rgba(var(--primary-rgb,26,95,42), .04);
}

/* ─── 7. TABS — unified theme look ──────────────────────────── */
.nav-tabs .nav-link {
    color: var(--text-secondary);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: var(--font-size-sm);
}
.nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-color: var(--border-color) var(--border-color) #fff;
    border-bottom: 2px solid var(--primary-color);
    background: #fff;
}
.nav-pills .nav-link.active {
    background: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

/* ─── 8. ICONS in cards — match brand ───────────────────────── */
.feature-card .icon, .service-card .icon, .stat-card .icon,
.info-card i:first-child, .quick-action i {
    color: var(--primary-color);
}

/* ─── 9. FORM controls — consistent on every panel ──────────── */
.form-control, .form-select, .input-group-text {
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
}
.form-label { font-weight: 600; color: var(--text-primary); font-size: var(--font-size-sm); }

/* ─── 10. BUTTONS — kill stray bootstrap red/yellow on brand ── */
.btn-warning.btn-brand-override,
.btn-danger.btn-brand-override {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

/* ════════════════════════════════════════════════════════════
 * Theme Overrides v4 — gradient/token unification (2026-05-13)
 * Targets remaining hardcoded amber/yellow & gradient mixes
 * in assets/css/style.css. Token-only — zero brand colors.
 * ════════════════════════════════════════════════════════════ */
:root{
  --primary-soft-bg: color-mix(in oklab, var(--primary-color, #1a5f2a) 8%, #fff);
  --primary-soft-bd: color-mix(in oklab, var(--primary-color, #1a5f2a) 18%, #fff);
  --secondary-soft-bg: color-mix(in oklab, var(--secondary-color, #dc2626) 8%, #fff);
  --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-light, var(--primary-color)));
  --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--secondary-light, var(--secondary-color)));
  --shadow-elev-1: 0 4px 12px rgba(15,23,42,.08);
  --shadow-elev-2: 0 10px 24px rgba(15,23,42,.12);
}

/* Remove stray hard-coded amber/yellow tones from style.css gradients */
[style*="#ffd54f"], [style*="#ffca2c"]{ background-image: var(--gradient-secondary) !important; }

/* Buttons — use brand tokens consistently */
.btn-primary{
  background: var(--gradient-primary);
  border-color: var(--primary-color);
  box-shadow: 0 2px 6px color-mix(in oklab, var(--primary-color) 25%, transparent);
}
.btn-primary:hover, .btn-primary:focus{
  filter: brightness(1.05);
  background: var(--gradient-primary);
  border-color: var(--primary-color);
}
.btn-warning, .btn-secondary-brand{
  background: var(--gradient-secondary);
  border-color: var(--secondary-color);
  color:#fff;
}

/* Cards / sections that previously used random yellow accents */
.card-accent-yellow, .badge-yellow, .pill-yellow{
  background: var(--secondary-soft-bg);
  color: var(--secondary-color);
  border:1px solid color-mix(in oklab, var(--secondary-color) 22%, #fff);
}

/* Tables — soften header to brand tint */
.table > thead{ background: var(--primary-soft-bg); }
.table > thead th{ color: var(--primary-color); border-color: var(--primary-soft-bd); font-weight:700; }

/* Admin KPI stat cards — remove nested text box/background artifacts */
.stat-card.stat-card-flat,
.stat-card.stat-card-compact{
  background: var(--bg-card, #fff) !important;
  background-image: none !important;
  border: 1px solid var(--border-soft, #edf2ef) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
  overflow: hidden !important;
}
.stat-card .stat-card-body,
.stat-card .stat-card-value,
.stat-card .stat-card-label,
.stat-card .stat-card-trend{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
.stat-card .stat-card-body{
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
}
.stat-card .stat-card-value{
  color: var(--sc-accent, var(--primary-color, #1a5f2a)) !important;
  line-height: 1.05 !important;
}
.stat-card .stat-card-label,
.stat-card .stat-card-trend{
  color: var(--text-secondary, #647067) !important;
  line-height: 1.25 !important;
}
.stat-card .stat-card-label::before,
.stat-card .stat-card-label::after,
.stat-card .stat-card-body::before,
.stat-card .stat-card-body::after{
  display: none !important;
  content: none !important;
}

/* Form controls — consistent focus ring */
.form-control:focus, .form-select:focus{
  border-color: var(--primary-color);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--primary-color) 22%, transparent);
}

/* Floating helpers (admin / public) */
.admin-fab-msg, .public-fab-help{ box-shadow: var(--shadow-elev-2); }

/* Bottom-nav active item — token instead of hardcoded green tint */
.admin-bottom-nav .admin-nav-item.active,
.admin-bottom-nav .admin-nav-item:hover,
.mob-bn-item.active{
  color: var(--primary-color) !important;
  background: var(--primary-soft-bg) !important;
}

/* Mobile typography baseline */
@media (max-width:640px){
  body{ font-size: .9375rem; line-height:1.55; }
  h1{ font-size: clamp(1.35rem, 4.5vw, 1.75rem); }
  h2{ font-size: clamp(1.2rem, 4vw, 1.5rem); }
  h3{ font-size: clamp(1.05rem, 3.5vw, 1.25rem); }
}

/* ════════════════════════════════════════════════════════════
 * v11.2 — Flat single-box stat-card (kills "double box" bug)
 * ════════════════════════════════════════════════════════════ */
:root{
  --color-success: var(--color-success, #16a34a);
  --color-danger:  var(--color-danger,  #dc2626);
  --color-warning: var(--color-warning, #f59e0b);
  --color-info:    var(--color-info,    #0ea5e9);
}
.stat-card-row .stat-card.stat-card-flat{
  background: #fff !important;
  border: 1px solid color-mix(in oklab, var(--sc-accent) 18%, #e5e7eb) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card-row .stat-card.stat-card-flat:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15,23,42,.08) !important;
}
.stat-card-row .stat-card-icon{
  width:44px; height:44px; border-radius:12px; font-size:1.05rem;
  box-shadow: 0 4px 10px color-mix(in oklab, var(--sc-accent) 35%, transparent);
}
.stat-card-row .stat-card-value{
  font-weight:800; line-height:1; font-size:1.5rem;
  color: var(--sc-accent);
  margin-bottom:2px;
}
.stat-card-row .stat-card-label{
  font-size:.75rem; font-weight:600; color:#6b7280;
  text-transform:uppercase; letter-spacing:.03em;
}
.stat-card-row .stat-card-trend{
  font-size:.7rem; font-weight:600; color:var(--sc-accent); margin-top:2px;
}
.stat-card-row .stat-card-chev{ color:var(--sc-accent); opacity:.45; font-size:.75rem; }
.stat-card-row .stat-card-badge{
  font-size:.6rem; background: color-mix(in oklab, var(--sc-accent) 15%, #fff);
  color: var(--sc-accent); border:1px solid color-mix(in oklab, var(--sc-accent) 25%, #fff);
}
@media (max-width:480px){
  .stat-card-row .stat-card-value{ font-size:1.25rem; }
  .stat-card-row .stat-card-icon{ width:38px; height:38px; font-size:.95rem; }
}

/* Public-side floating chat button (v11.2) */
.public-fab-help[data-chat="1"]{ right:18px; }
#publicChatPanel{
  position:fixed; right:18px; bottom:160px; z-index:65;
  width:340px; max-width:calc(100vw - 24px);
  background:#fff; border:1px solid #e6e9ef; border-radius:16px;
  box-shadow:0 16px 40px rgba(15,23,42,.18);
  display:none; flex-direction:column; overflow:hidden; font-family:inherit;
}
#publicChatPanel.open{ display:flex; }
#publicChatPanel .pcp-h{
  background:var(--primary-color,#1a5f2a); color:#fff;
  padding:12px 14px; display:flex; align-items:center; gap:10px;
}
#publicChatPanel .pcp-h .pcp-title{ font-weight:700; font-size:14px; }
#publicChatPanel .pcp-h .pcp-sub{ font-size:11px; opacity:.85; }
#publicChatPanel .pcp-x{ margin-left:auto; background:transparent; color:#fff; border:0; font-size:18px; cursor:pointer; }
#publicChatPanel .pcp-body{ padding:14px; max-height:420px; overflow:auto; }
#publicChatPanel .pcp-body label{ font-size:12px; font-weight:600; color:#374151; display:block; margin-bottom:4px; }
#publicChatPanel .pcp-body input,
#publicChatPanel .pcp-body textarea{
  width:100%; border:1px solid #e6e9ef; border-radius:10px;
  padding:9px 11px; font-size:14px; margin-bottom:10px;
  font-family:inherit;
}
#publicChatPanel .pcp-body textarea{ min-height:90px; resize:vertical; }
#publicChatPanel .pcp-body button{
  width:100%; border:0; border-radius:10px; padding:10px 14px;
  background:var(--primary-color,#1a5f2a); color:#fff;
  font-weight:700; font-size:14px; cursor:pointer;
}
#publicChatPanel .pcp-msg{ font-size:12.5px; padding:8px 10px; border-radius:8px; margin-top:6px; }
#publicChatPanel .pcp-msg.ok{ background:#ecfdf5; color:#065f46; border:1px solid #6ee7b7; }
#publicChatPanel .pcp-msg.err{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* ════════════════════════════════════════════════════════════
 * v11.3 — Final live/cPanel visibility fixes
 * These overrides load last in public/admin/member headers.
 * ════════════════════════════════════════════════════════════ */
html, body{
  font-family: var(--font-primary, 'Mukta', 'Noto Sans Devanagari', system-ui, sans-serif) !important;
  color: var(--text-color, #1f2937);
}
body{ background: var(--bg-soft, #f6faf7); }

/* Public header: avoid random blue utility bar from stale secondary color */
.pfl-top-bar,
.top-bar{
  background: var(--primary-color, #1a5f2a) !important;
  color: var(--text-on-primary, #fff) !important;
}
.pfl-top-bar a,
.top-bar a{ color: var(--text-on-primary, #fff) !important; }
.pfl-drop,
.main-nav .dropdown,
.nav-menu .dropdown{
  background: var(--bg-card, #fff) !important;
  border: 1px solid var(--border-color, #e5e7eb) !important;
  box-shadow: 0 16px 34px rgba(15,23,42,.12) !important;
}
.pfl-drop a,
.main-nav .dropdown a,
.nav-menu .dropdown a{
  color: var(--text-color, #1f2937) !important;
  background: transparent !important;
}
.pfl-drop a:hover,
.main-nav .dropdown a:hover,
.nav-menu .dropdown a:hover{
  color: var(--primary-color, #1a5f2a) !important;
  background: color-mix(in srgb, var(--primary-color, #1a5f2a) 9%, #fff) !important;
}

/* Online KYC stepper: screenshot issue — no giant outlined buttons */
#kymWizardNav.kym-wizard-nav,
.kym-wizard-nav{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 10px 12px !important;
  background: color-mix(in srgb, var(--primary-color, #1a5f2a) 6%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 16%, #e5e7eb) !important;
  border-radius: 14px !important;
  scrollbar-width: thin;
}
#kymWizardNav .kym-step-btn,
.kym-step-btn{
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  max-width: 176px !important;
  min-height: 34px !important;
  padding: 6px 12px !important;
  border: 1px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 22%, #d7dde5) !important;
  border-radius: 999px !important;
  background: var(--bg-card, #fff) !important;
  color: var(--text-color, #1f2937) !important;
  box-shadow: none !important;
  font: 700 .78rem/1.15 var(--font-primary, 'Mukta', sans-serif) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-decoration: none !important;
}
#kymWizardNav .kym-step-btn.active,
.kym-step-btn.active{
  background: var(--primary-color, #1a5f2a) !important;
  color: var(--text-on-primary, #fff) !important;
  border-color: var(--primary-color, #1a5f2a) !important;
}
#kymWizardNav .kym-step-btn.done,
.kym-step-btn.done{
  background: color-mix(in srgb, var(--primary-color, #1a5f2a) 11%, #fff) !important;
  color: var(--primary-dark, var(--primary-color, #1a5f2a)) !important;
}
#kymWizardNav .kym-step-num,
.kym-step-btn .kym-step-num{
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, var(--primary-color, #1a5f2a) 12%, #fff) !important;
  color: inherit !important;
  font-size: .72rem !important;
}
#kymWizardNav .kym-step-btn.active .kym-step-num,
.kym-step-btn.active .kym-step-num{
  background: color-mix(in srgb, #fff 24%, transparent) !important;
  color: var(--text-on-primary, #fff) !important;
}
#kymWizardNav .kym-step-label,
.kym-step-label{
  display: block !important;
  max-width: 124px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.kym-wizard-hint{
  font-size: .92rem !important;
  color: var(--text-light, #4b5563) !important;
}
@media (max-width: 576px){
  #kymWizardNav .kym-step-btn,
  .kym-step-btn{ max-width: 136px !important; padding: 6px 10px !important; font-size: .74rem !important; }
  #kymWizardNav .kym-step-label,
  .kym-step-label{ max-width: 92px !important; }
}

/* Cooperative programs: make cards styled even when older pages missed public-modern.css */
.cp-hero{ background: linear-gradient(135deg, var(--primary-dark, var(--primary-color)), var(--primary-color)) !important; color: var(--text-on-primary, #fff) !important; padding: 2rem 0 1.7rem !important; }
.cp-hero-inner{ display:flex !important; align-items:center !important; gap:1.25rem !important; flex-wrap:wrap !important; }
.cp-hero-icon{ width:64px !important; height:64px !important; border-radius:14px !important; background:rgba(255,255,255,.14) !important; display:grid !important; place-items:center !important; font-size:1.8rem !important; color:#fff !important; }
.cp-hero-text{ flex:1 1 260px !important; }
.cp-hero-text h2{ color:#fff !important; font-size:1.55rem !important; font-weight:800 !important; margin:0 0 .25rem !important; }
.cp-hero-text p{ color:rgba(255,255,255,.82) !important; margin:0 !important; }
.cp-hero-stats{ display:flex !important; gap:.7rem !important; flex-wrap:wrap !important; }
.cp-stat-box{ min-width:78px !important; padding:.65rem .95rem !important; border-radius:10px !important; background:rgba(255,255,255,.13) !important; border:1px solid rgba(255,255,255,.22) !important; text-align:center !important; }
.cp-stat-num{ color:#fff !important; font-size:1.35rem !important; font-weight:800 !important; line-height:1 !important; }
.cp-stat-lbl{ color:rgba(255,255,255,.72) !important; font-size:.7rem !important; }
.cp-shell{ background: var(--bg-soft, #f6faf7) !important; padding:2rem 0 3rem !important; }
.cp-section-sub h3{ color:var(--primary-dark, var(--primary-color)) !important; font-weight:800 !important; display:flex !important; align-items:center !important; gap:.5rem !important; }
.cp-card{ height:100% !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; border-radius:14px !important; background:var(--bg-card,#fff) !important; border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 14%, #e5e7eb) !important; box-shadow:0 6px 18px rgba(15,23,42,.07) !important; }
.cp-card-head{ display:flex !important; gap:.85rem !important; align-items:flex-start !important; padding:.95rem 1.1rem !important; background:linear-gradient(135deg, var(--primary-color), var(--primary-dark,var(--primary-color))) !important; color:#fff !important; }
.cp-date-box{ min-width:46px !important; padding:.34rem .55rem !important; text-align:center !important; border-radius:9px !important; background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.25) !important; }
.cp-date-box .dd{ color:#fff !important; font-size:1.22rem !important; font-weight:800 !important; line-height:1 !important; }
.cp-date-box .mm{ color:rgba(255,255,255,.78) !important; font-size:.62rem !important; font-weight:700 !important; }
.cp-head-right h5{ color:#fff !important; font-size:1rem !important; line-height:1.35 !important; font-weight:800 !important; margin:0 0 .35rem !important; }
.cp-open-badge,.cp-closed-badge{ display:inline-flex !important; align-items:center !important; gap:.28rem !important; border-radius:999px !important; padding:.2rem .62rem !important; font-size:.72rem !important; font-weight:800 !important; }
.cp-open-badge{ background:#fff !important; color:var(--primary-color,#1a5f2a) !important; }
.cp-closed-badge{ background:rgba(255,255,255,.16) !important; color:rgba(255,255,255,.78) !important; }
.cp-card-body{ padding:1rem 1.1rem !important; flex:1 !important; }
.cp-meta-row{ display:flex !important; flex-wrap:wrap !important; gap:.42rem !important; margin-bottom:.8rem !important; }
.cp-pill{ display:inline-flex !important; align-items:center !important; gap:.28rem !important; border-radius:999px !important; padding:.28rem .65rem !important; font-size:.8rem !important; font-weight:700 !important; background:color-mix(in srgb, var(--primary-color,#1a5f2a) 8%, #fff) !important; color:var(--primary-dark,var(--primary-color)) !important; }
.cp-desc-text{ color:var(--text-light,#4b5563) !important; font-size:.92rem !important; line-height:1.55 !important; margin-bottom:.9rem !important; }
.cp-btn-prereg,.cp-att-btn{ border:0 !important; border-radius:9px !important; display:inline-flex !important; align-items:center !important; gap:.38rem !important; text-decoration:none !important; font-weight:800 !important; }
.cp-btn-prereg{ background:var(--primary-color,#1a5f2a) !important; color:#fff !important; padding:.46rem .95rem !important; }
.cp-card-footer{ padding:.7rem 1.1rem !important; border-top:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #e5e7eb) !important; background:color-mix(in srgb, var(--primary-color,#1a5f2a) 4%, #fff) !important; text-align:right !important; }
.cp-att-btn{ color:var(--primary-color,#1a5f2a) !important; background:color-mix(in srgb, var(--primary-color,#1a5f2a) 9%, #fff) !important; border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 20%, #e5e7eb) !important; padding:.34rem .72rem !important; }
@media (max-width:575px){ .cp-hero-icon{display:none!important;} .cp-hero-text h2{font-size:1.25rem!important;} .cp-card-head{padding:.85rem .95rem!important;} }

/* Member header/nav: compact desktop, quick-application links do not dominate header */
.mem-nav{
  display:flex !important;
  gap:8px !important;
  overflow-x:auto !important;
  padding:10px !important;
  margin:12px 0 18px !important;
  border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #e5e7eb) !important;
  border-radius:14px !important;
  background:var(--bg-card,#fff) !important;
  box-shadow:0 4px 14px rgba(15,23,42,.06) !important;
}
.mem-nav-item{
  flex:0 0 auto !important;
  min-width:72px !important;
  max-width:118px !important;
  min-height:58px !important;
  padding:8px 10px !important;
  border-radius:12px !important;
  color:var(--text-muted,#6b7280) !important;
  background:transparent !important;
  text-align:center !important;
  font-size:.78rem !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  text-decoration:none !important;
}
.mem-nav-item i{ display:block !important; margin:0 auto 5px !important; font-size:1.05rem !important; color:currentColor !important; }
.mem-nav-item.active,.mem-nav-item:hover{ background:var(--primary-color,#1a5f2a) !important; color:#fff !important; }
@media (min-width: 992px){
  .mem-nav .mem-nav-item[href*="loan-apply"],
  .mem-nav .mem-nav-item[href*="account-apply"],
  .mem-nav .mem-nav-item[href*="digital-service"],
  .mem-nav .mem-nav-item[href*="service-request"],
  .mem-nav .mem-nav-item[href*="appointment"]{ display:none !important; }
}

/* Admin header: keep it CLEAN + readable (light header, token-driven) */
.admin-header{
  min-height:64px !important;
  background: var(--bg-card, #fff) !important;
  color: var(--text-primary, #0f172a) !important;
}
.admin-header .page-title{
  color: var(--text-primary, #0f172a) !important;
  font-size:1.1rem !important;
}
.admin-header .header-date-pill,
.admin-header .version-badge{
  background: color-mix(in srgb, var(--primary-color,#1a5f2a) 10%, #fff) !important;
  color: var(--primary-color,#1a5f2a) !important;
  border-color: color-mix(in srgb, var(--primary-color,#1a5f2a) 20%, #e5e7eb) !important;
}
.admin-header .admin-name-inline{ color: var(--primary-color,#1a5f2a) !important; }
.admin-avatar-sm{ width:32px !important; height:32px !important; border-radius:50% !important; object-fit:cover !important; }
.stat-card-row{ row-gap:14px !important; }
.stat-card-row .stat-card,
.mem-stat,
.ds-card{ border-radius:12px !important; box-shadow:0 4px 14px rgba(15,23,42,.06) !important; border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #e5e7eb) !important; background:var(--bg-card,#fff) !important; }

/* Footer / mobile bottom nav: no overlap with chat buttons */
.mob-bottomnav,
.mp-bottom-nav{ box-shadow:0 -8px 24px rgba(15,23,42,.10) !important; border-top:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #e5e7eb) !important; }
.mob-bn-item,
.mp-bottom-nav a{ color:var(--text-muted,#6b7280) !important; }
.mob-bn-item.active,
.mob-bn-item:hover,
.mp-bottom-nav a.active,
.mp-bottom-nav a:hover{ color:var(--primary-color,#1a5f2a) !important; background:color-mix(in srgb, var(--primary-color,#1a5f2a) 9%, #fff) !important; }
.public-fab-help,.admin-fab-msg{ bottom:92px !important; }
@media (min-width:900px){ .public-fab-help,.admin-fab-msg{ bottom:24px !important; } }

/* ════════════════════════════════════════════════════════════
 * v11.4 — Deep polish (2026-05-13 PM)
 * - Admin top bar: cleaner Super Admin pill, no red box
 * - Stat-card values: kill any inherited box/highlight
 * - Welfare claims tiles: tighter, unified
 * - Modal forms: force white inputs + readable text
 * - Single quick-help launcher (collapses WhatsApp/Help/Chat)
 * ════════════════════════════════════════════════════════════ */

/* ── Admin top bar refinement (light header) ── */
.admin-header .admin-info{
  background: color-mix(in srgb, var(--primary-color,#1a5f2a) 8%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 20%, #e5e7eb) !important;
  border-radius:999px !important;
  padding:4px 10px 4px 4px !important;
  display:inline-flex !important; align-items:center !important; gap:8px !important;
}
.admin-header .admin-info .role-badge,
.admin-header .admin-info .badge,
.admin-header .role-pill{
  background:rgba(255,255,255,.92) !important;
  color:var(--primary-color,#1a5f2a) !important;
  border:0 !important;
  font-weight:700 !important;
  border-radius:999px !important;
  padding:2px 10px !important;
  font-size:.72rem !important;
}
.admin-header .header-date-pill,
.admin-header .version-badge{
  border-radius:999px !important;
  padding:4px 10px !important;
  font-size:.78rem !important;
  font-weight:600 !important;
}

/* ── Stat-card value: no white-box / outline shadow ── */
.stat-card .stat-card-value,
.stat-card-flat .stat-card-value{
  background:transparent !important;
  box-shadow:none !important;
  text-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  font-weight:800 !important;
  font-size:1.6rem !important;
  line-height:1.1 !important;
  color:var(--primary-color,#1a5f2a) !important;
}
.stat-card .stat-card-label,
.stat-card-flat .stat-card-label{
  color:var(--text-muted,#6b7280) !important;
  font-weight:600 !important;
  font-size:.86rem !important;
}
.stat-card-icon{
  width:46px !important; height:46px !important;
  border-radius:12px !important;
  font-size:1.15rem !important;
  box-shadow:none !important;
}

/* ── Welfare claims summary tiles ── */
.welfare-summary,
.kalyan-summary{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:14px !important; }
.welfare-summary .ws-tile,
.kalyan-summary .ws-tile{
  background:var(--bg-card,#fff) !important;
  border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #e5e7eb) !important;
  border-radius:14px !important;
  padding:14px 16px !important;
  display:flex !important; align-items:center !important; gap:12px !important;
  box-shadow:0 4px 14px rgba(15,23,42,.05) !important;
}
.welfare-summary .ws-icon,
.kalyan-summary .ws-icon{
  width:42px !important; height:42px !important; border-radius:12px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #fff) !important;
  color:var(--primary-color,#1a5f2a) !important;
}
.welfare-summary .ws-num,
.kalyan-summary .ws-num{ font-size:1.45rem !important; font-weight:800 !important; line-height:1 !important; }
@media (max-width:640px){
  .welfare-summary,.kalyan-summary{ grid-template-columns:1fr !important; }
}

/* ── Modal forms: prevent green/dark theme bleeding into inputs ── */
.stf-modal-card .form-control,
.stf-modal-card .form-select,
.stf-modal-card input[type="text"],
.stf-modal-card input[type="email"],
.stf-modal-card input[type="tel"],
.stf-modal-card input[type="date"],
.stf-modal-card input[type="number"],
.stf-modal-card textarea,
.stf-modal-card select,
.modal .form-control,
.modal .form-select,
.modal input,
.modal textarea,
.modal select{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #d1d5db !important;
  border-radius:8px !important;
  padding:.5rem .65rem !important;
  font-size:.92rem !important;
  -webkit-text-fill-color:#0f172a !important;
}
.stf-modal-card .form-control::placeholder,
.modal .form-control::placeholder,
.stf-modal-card textarea::placeholder{ color:#9ca3af !important; opacity:1 !important; }
.stf-modal-card label,
.modal label{ color:#1f2937 !important; font-weight:600 !important; font-size:.86rem !important; }
.stf-modal-card .form-control:focus,
.stf-modal-card .form-select:focus,
.modal .form-control:focus,
.modal .form-select:focus{
  border-color:var(--primary-color,#1a5f2a) !important;
  box-shadow:0 0 0 .15rem color-mix(in srgb, var(--primary-color,#1a5f2a) 22%, transparent) !important;
}

/* ── Unified Quick-Help Launcher ── */
/* Hide the legacy individual triggers; we re-expose them inside one menu */
.whatsapp-float,
.useful-links-toggle,
.chatbot-toggle,
.public-fab-help{ display:none !important; }

.qh-launcher{
  position:fixed; right:18px; bottom:96px; z-index:80;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
@media (min-width:900px){ .qh-launcher{ bottom:24px; } }
.qh-fab{
  width:56px; height:56px; border-radius:50%;
  background:var(--primary-color,#1a5f2a); color:#fff; border:0;
  box-shadow:0 12px 28px rgba(15,23,42,.22);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .15s ease;
}
.qh-fab:hover{ transform:translateY(-2px); }
.qh-fab i{ font-size:22px; }
.qh-menu{
  display:none; flex-direction:column; gap:8px;
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:8px; min-width:220px;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
}
.qh-launcher.open .qh-menu{ display:flex; }
.qh-launcher.open .qh-fab i.qh-i-open{ display:none; }
.qh-fab i.qh-i-close{ display:none; }
.qh-launcher.open .qh-fab i.qh-i-close{ display:inline-block; }
.qh-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:10px; text-decoration:none;
  color:#1f2937; font-weight:600; font-size:.92rem; background:transparent;
  border:0; text-align:left; cursor:pointer; width:100%;
}
.qh-item:hover{ background:color-mix(in srgb, var(--primary-color,#1a5f2a) 10%, #fff); color:var(--primary-color,#1a5f2a); }
.qh-item .qh-ic{
  width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; flex-shrink:0;
}
.qh-ic.wa{ background:#25D366; }
.qh-ic.help{ background:var(--primary-color,#1a5f2a); }
.qh-ic.chat{ background:#0ea5e9; }
.qh-ic.links{ background:#6366f1; }


/* ════════════════════════════════════════════════════════════
 * v11.5 — Targeted UI fixes (2026-05-14)
 * - Hide all legacy floating triggers on EVERY breakpoint
 * - Hide admin sidebar-close on desktop
 * - Hide mobile bottomnav above 768px (defensive)
 * - Compact public footer-bottom; readable text contrast
 * - Admin header: collapse to single user pill, icon-first
 * - License-expired page: ensure tokens defined
 * - HRM employee modal -> inline admin panel
 * ════════════════════════════════════════════════════════════ */

/* 1. Force-hide legacy floating buttons (covered by Quick-Help launcher) */
html body .whatsapp-float,
html body .useful-links-float .useful-links-toggle,
html body .chatbot-widget .chatbot-toggle,
html body .chatbot-widget > .chatbot-toggle,
html body .public-fab-help{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* keep popup boxes operable when opened via qh-launcher (but don't block clicks when hidden) */
html body .chatbot-widget .chatbot-box{
  visibility: visible;
  opacity: 1;
}

/* Useful links popup — hidden unless .active; close button always clickable */
html body .useful-links-float .useful-links-popup-box{
  z-index: 9995;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(0.96) !important;
}
html body .useful-links-float .useful-links-popup-box.active{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}
html body .useful-links-float .useful-links-header{ position: relative; }
html body .useful-links-float .useful-links-close{
  position: relative;
  z-index: 3;
  pointer-events: auto !important;
  cursor: pointer;
}

/* 2. Admin sidebar close button: only mobile */
@media (min-width:992px){
  .sidebar #sidebarClose,
  .sidebar .sidebar-close{ display:none !important; }
}

/* 3. Mobile bottom nav: hide on ≥769px (defensive against page-level overrides) */
@media (min-width:769px){
  .mob-bottomnav{ display:none !important; }
  body.has-bottomnav{ padding-bottom:0 !important; }
  body.has-bottomnav .main-footer{ padding-bottom:0 !important; }
}

/* 4. Public footer-bottom — compact like .pfl-top-bar (~36px), theme-aware text */
.main-footer .footer-bottom{
  padding:0 !important;
  background:color-mix(in srgb, var(--footer-dark, var(--footer-color)) 55%, #000) !important;
  font-size:.74rem !important;
  line-height:1.2 !important;
  min-height:36px;
}
.main-footer .footer-bottom .container{
  display:flex !important; flex-wrap:wrap !important;
  align-items:center !important; justify-content:center !important;
  gap:.2rem .75rem !important;
  text-align:center !important;
  min-height:36px !important;
  padding-top:6px !important;
  padding-bottom:6px !important;
}
.main-footer .footer-bottom p,
.main-footer .footer-bottom .copyright,
.main-footer .footer-bottom .developer,
.main-footer .footer-bottom .footer-policy-links a,
.main-footer .footer-bottom .visitor-item{
  margin:0 !important;
  color:color-mix(in srgb, var(--text-on-footer, #fff) 92%, transparent) !important;
  font-weight:500 !important;
  line-height:1.2 !important;
}
.main-footer .footer-bottom .footer-policy-links a{ opacity:.95; }
.main-footer .footer-bottom .footer-policy-links a:hover{
  color:var(--text-on-footer, #fff) !important; opacity:1; text-decoration:underline;
}
.main-footer .footer-bottom .footer-policy-dot{
  color:color-mix(in srgb, var(--text-on-footer, #fff) 45%, transparent) !important;
}
.main-footer .footer-bottom .developer a{
  color:color-mix(in srgb, var(--secondary-color, var(--text-on-footer)) 70%, var(--text-on-footer, #fff)) !important;
  font-weight:700 !important; text-decoration:none !important;
}
.main-footer .footer-bottom .developer a:hover{ text-decoration:underline !important; }
.main-footer .footer-bottom .visitor-counter{ display:inline-flex !important; gap:.5rem !important; align-items:center !important; }
.main-footer .footer-bottom .visitor-item i{
  color:color-mix(in srgb, var(--text-on-footer, #fff) 65%, transparent) !important;
  margin-right:.2rem;
}

/* 5. Admin header user widget — single-line pill, no doubled name */
.admin-header .header-right{ gap:8px !important; align-items:center !important; }
.admin-header .admin-info{ position:relative; }
.admin-header .admin-info .admin-name-inline{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  padding:0 !important; margin:0 !important;
  font-size:.82rem !important; font-weight:600 !important;
  white-space:nowrap !important; max-width:180px !important;
  overflow:hidden !important; text-overflow:ellipsis !important;
}
.admin-header .admin-info .superadmin-pill{
  background:rgba(255,255,255,.92) !important;
  color:var(--primary-color,#1a5f2a) !important;
  font-size:.62rem !important; padding:2px 7px !important;
  border-radius:999px !important; font-weight:800 !important;
  letter-spacing:.04em !important;
}
@media (max-width:768px){
  .admin-header .admin-info .admin-name-inline > :not(img):not(.superadmin-pill){
    display:none !important;
  }
  .admin-header .admin-info{ padding:3px !important; }
}

/* notif bell + lang/version pills — uniform height */
.admin-header .notification-bell{
  width:36px !important; height:36px !important; border-radius:50% !important;
  background: color-mix(in srgb, var(--primary-color,#1a5f2a) 8%, #fff) !important;
  color: var(--primary-color,#1a5f2a) !important;
  border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 20%, #e5e7eb) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
.admin-header .notif-count{ background:#dc2626 !important; color:#fff !important; }

/* 6. License-expired page — token fallbacks, theme alignment */
:root{
  --primary-rgb: var(--primary-rgb, 26,95,42);
  --bg-soft: var(--bg-soft, #f6faf7);
  --bg-card: var(--bg-card, #ffffff);
  --bg-page: var(--bg-page, #f8faf9);
  --text-primary: var(--text-primary, #0f172a);
  --text-secondary: var(--text-secondary, #475569);
  --text-muted: var(--text-muted, #6b7280);
  --border-color: var(--border-color, #e5e7eb);
  --border-soft: var(--border-soft, #f1f5f9);
  --color-warning: var(--color-warning, #d97706);
  --radius-md: var(--radius-md, 10px);
  --radius-lg: var(--radius-lg, 16px);
  --radius-xl: var(--radius-xl, 24px);
}
.svc-expired-pill{
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 8%, #fff), color-mix(in srgb, var(--primary-color) 14%, #fff)) !important;
  color:var(--primary-color) !important;
  border-color: color-mix(in srgb, var(--primary-color) 28%, #fff) !important;
}

/* 7. HRM Employee modal -> inline admin panel (no popup overlay) */
#empModal.stf-modal-backdrop{
  position:static !important;
  background:transparent !important;
  inset:auto !important;
  padding:0 !important; margin:0 0 1.25rem 0 !important;
  z-index:auto !important;
  display:none;
}
#empModal.stf-modal-backdrop[style*="display:flex"],
#empModal.stf-modal-backdrop[style*="display: flex"]{
  display:block !important;
}
#empModal .stf-modal-card,
#empModal .card-coop.stf-modal-card{
  max-width:100% !important; width:100% !important;
  margin:0 !important;
  box-shadow:0 4px 14px rgba(15,23,42,.06) !important;
  border:1px solid #e5e7eb !important; border-radius:14px !important;
  background:#fff !important;
}

/* ════════════════════════════════════════════════════════════
 * v11.6 — Footer/CTA auto contrast (2026-05-15)
 * body { color: --text-primary } was bleeding into green footer/CTA
 * ════════════════════════════════════════════════════════════ */
.main-footer{
  line-height:1.55 !important;
  color:var(--text-on-footer, #fff) !important;
}
.main-footer .footer-top,
.main-footer .footer-widget,
.main-footer .footer-widget p,
.main-footer .footer-widget h4,
.main-footer .footer-contact li,
.main-footer .footer-contact span,
.main-footer .footer-sahakari-name{
  color:var(--text-on-footer, #fff) !important;
}
.main-footer .footer-widget p,
.main-footer .footer-contact li,
.main-footer .footer-notices .notice-date{
  color:color-mix(in srgb, var(--text-on-footer, #fff) 84%, transparent) !important;
}
.main-footer .footer-links a,
.main-footer .footer-notices a{
  color:color-mix(in srgb, var(--text-on-footer, #fff) 88%, transparent) !important;
}
.main-footer .footer-links a:hover,
.main-footer .footer-notices a:hover{
  color:var(--text-on-footer, #fff) !important;
}
.main-footer .footer-contact i,
.main-footer .footer-social a,
.main-footer .footer-social a i{
  color:var(--text-on-footer, #fff) !important;
}

/* CTA band (आज नै सदस्य बन्नुहोस्) — above footer */
.cta-section,
.cta-section .cta-content,
.cta-section .cta-content h2,
.cta-section .home-heading-unified{
  color:var(--text-on-primary, #fff) !important;
}
.cta-section .cta-content p{
  color:color-mix(in srgb, var(--text-on-primary, #fff) 90%, transparent) !important;
  opacity:1 !important;
}

/* ════════════════════════════════════════════════════════════
 * v11.7 — Admin compact header + uniform stat cards (2026-05-15)
 * ════════════════════════════════════════════════════════════ */

/* Header: clean white bar, icon toolbar (no overlay clutter) */
.admin-header.admin-header--compact,
.admin-header.admin-header--compact.admin-header{
  min-height:52px !important;
  height:auto !important;
  padding:6px 14px !important;
  background:var(--bg-card,#fff) !important;
  color:var(--text-primary,#0f172a) !important;
  border-bottom:1px solid var(--border-color,#e5e7eb) !important;
  box-shadow:0 1px 0 rgba(15,23,42,.04) !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
}
.admin-header--compact .header-left{ gap:10px !important; min-width:0 !important; flex:1 1 auto !important; }
.admin-header--compact .page-title-wrap{ gap:8px !important; min-width:0 !important; }
.admin-header--compact .page-title{
  font-size:1rem !important;
  font-weight:700 !important;
  color:var(--text-primary,#0f172a) !important;
  margin:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:min(220px,42vw) !important;
}
.admin-header--compact .header-date-pill{
  font-size:.72rem !important;
  padding:3px 8px !important;
  white-space:nowrap !important;
}
@media (max-width:991px){
  .admin-header--compact .header-date-pill{ display:none !important; }
  .admin-header--compact .admin-topbar-brand.has-logo img{ max-height:34px !important; max-width:120px !important; }
}

/* Icon-only action buttons (lang, version, bell, user) */
.admin-header-actions{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-shrink:0 !important;
}
.admin-header-icon,
.admin-header--compact .notification-bell{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  padding:0 !important;
  border-radius:10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  background:color-mix(in srgb, var(--primary-color,#1a5f2a) 8%, #fff) !important;
  color:var(--primary-color,#1a5f2a) !important;
  border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 18%, #e5e7eb) !important;
  text-decoration:none !important;
  font-size:.85rem !important;
  line-height:1 !important;
  box-shadow:none !important;
}
.admin-header-icon:hover,
.admin-header--compact .notification-bell:hover{
  background:color-mix(in srgb, var(--primary-color,#1a5f2a) 14%, #fff) !important;
}
.admin-header-icon-label{ font-size:.7rem; font-weight:700; }

/* User menu — avatar only; no duplicate ::before icon */
.admin-header--compact .admin-info{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  padding:0 !important;
  border-radius:10px !important;
  border:1px solid color-mix(in srgb, var(--primary-color,#1a5f2a) 18%, #e5e7eb) !important;
  background:color-mix(in srgb, var(--primary-color,#1a5f2a) 8%, #fff) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  position:relative !important;
}
.admin-header--compact .admin-info::before{ display:none !important; }
.admin-header--compact .admin-name::after{ display:none !important; }
.admin-header--compact .admin-info-chevron{ display:none !important; }
.admin-header--compact .admin-avatar-sm,
.admin-header--compact .admin-avatar-fallback{
  width:28px !important;
  height:28px !important;
  margin:0 !important;
  border-radius:8px !important;
  object-fit:cover !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:.8rem !important;
  color:var(--primary-color,#1a5f2a) !important;
  background:color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #fff) !important;
  border:0 !important;
}
.admin-header--compact .admin-last-login-badge{ display:none !important; }
.admin-header--compact .admin-menu-head{
  padding:8px 10px 10px !important;
  border-bottom:1px solid var(--border-soft,#f1f5f9) !important;
  margin-bottom:4px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}
.admin-header--compact .admin-menu-head strong{
  font-size:.88rem !important;
  color:var(--text-primary,#111827) !important;
}
.admin-header--compact .admin-menu-meta{
  font-size:.72rem !important;
  color:var(--text-muted,#6b7280) !important;
}
.admin-header--compact .superadmin-pill{
  align-self:flex-start !important;
  font-size:.62rem !important;
  padding:2px 8px !important;
  background:color-mix(in srgb, var(--primary-color,#1a5f2a) 12%, #fff) !important;
  color:var(--primary-color,#1a5f2a) !important;
}

/* Stat cards — single flat box (no inner bordered box), member-portal scale */
.stat-card-row{ --bs-gutter-x:.75rem; row-gap:.75rem !important; margin-bottom:1rem !important; }
.stat-card-row .stat-card.stat-card-flat,
.stat-card-row .stat-card.stat-card-compact,
.stat-card-row a.stat-card.stat-card-flat{
  padding:10px 12px !important;
  min-height:0 !important;
  gap:10px !important;
  border-radius:10px !important;
  background:#fff !important;
  border:1px solid color-mix(in oklab, var(--sc-accent, var(--primary-color)) 16%, #e5e7eb) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
}
.stat-card-row .stat-card.stat-card-flat:hover{
  transform:none !important;
  box-shadow:0 3px 10px rgba(15,23,42,.07) !important;
}
.stat-card-row .stat-card-body,
.stat-card-row .stat-card-flat .stat-card-body{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  min-width:0 !important;
}
.stat-card-row .stat-card-icon{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border-radius:9px !important;
  font-size:.95rem !important;
  box-shadow:none !important;
}
.stat-card-row .stat-card-value,
.stat-card-row .stat-card-flat .stat-card-value{
  font-size:1.28rem !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  color:var(--sc-accent, var(--primary-color,#1a5f2a)) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 0 2px !important;
}
.stat-card-row .stat-card-label,
.stat-card-row .stat-card-flat .stat-card-label{
  font-size:.68rem !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  color:var(--text-muted,#6b7280) !important;
  white-space:normal !important;
}
.stat-card-row .stat-card-trend{
  font-size:.65rem !important;
  margin-top:2px !important;
  color:var(--text-muted,#9ca3af) !important;
}
.stat-card-row .stat-card-chev{ font-size:.65rem !important; opacity:.35 !important; }

/* Legacy admin-stat-card / ds-card on list pages — same compact look */
.admin-stat-grid{ gap:.75rem !important; }
.admin-stat-card,
.main-content .ds-card{
  padding:10px 12px !important;
  min-height:0 !important;
  border-radius:10px !important;
}
.admin-stat-card .stat-value,
.ds-card .ds-val{
  font-size:1.25rem !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
@media (max-width:575px){
  .stat-card-row .stat-card-value{ font-size:1.15rem !important; }
  .stat-card-row .stat-card-icon{ width:34px !important; height:34px !important; }
}

/* Corporate banking unification pass — minimal, calm, mobile-first */
:root{
  --corp-bg:#f7faf8;
  --corp-surface:#ffffff;
  --corp-surface-soft:#f3f7f4;
  --corp-border:#dfe7e2;
  --corp-border-soft:#edf2ef;
  --corp-text:#102015;
  --corp-muted:#647067;
  --corp-shadow:0 1px 3px rgba(15,23,42,.05);
  --corp-shadow-hover:0 8px 20px rgba(15,23,42,.08);
  --corp-radius:12px;
  --corp-radius-sm:9px;
}
html{
  background:var(--corp-bg) !important;
  -webkit-text-size-adjust:100%;
}
body{
  background:var(--bg-page,var(--corp-bg)) !important;
  color:var(--text-primary,var(--corp-text)) !important;
  overflow-x:hidden;
}
body,
button,
input,
select,
textarea{
  font-family:var(--font-primary,'Mukta','Noto Sans Devanagari',system-ui,sans-serif) !important;
}
.container,
.container-fluid,
.container-coop{
  max-width:min(var(--container-max,1280px),100%) !important;
}
.card,
.card-coop,
.panel,
.admin-card,
.mem-card,
.dashboard-card,
.settings-card,
.content-card,
.table-card,
.tracker-card,
.rates-card-modern,
.cr-card,
.cr-sidebar,
.vp-card,
.auth-card,
.sr-inner{
  background:var(--bg-card,var(--corp-surface)) !important;
  border:1px solid var(--border-soft,var(--corp-border-soft)) !important;
  border-radius:var(--radius-lg,var(--corp-radius)) !important;
  box-shadow:var(--corp-shadow) !important;
}
.card:hover,
.card-coop:hover,
.admin-card:hover,
.mem-card:hover,
.dashboard-card:hover,
.content-card:hover{
  box-shadow:var(--corp-shadow-hover) !important;
  transform:none !important;
}
.card-header,
.card-footer,
.modal-header,
.modal-footer,
.data-table-header,
.data-table-footer{
  background:var(--bg-soft,var(--corp-surface-soft)) !important;
  border-color:var(--border-soft,var(--corp-border-soft)) !important;
}
.btn,
.btn-coop,
.cr-apply-btn,
.vp-submit,
.submit-btn,
.cp-btn-prereg,
.qh-fab{
  border-radius:var(--radius-md,var(--corp-radius-sm)) !important;
  box-shadow:none !important;
  min-height:38px;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease !important;
}
.btn:hover,
.btn-coop:hover,
.cr-apply-btn:hover,
.vp-submit:hover,
.submit-btn:hover,
.cp-btn-prereg:hover{
  transform:none !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color,#1a5f2a) 14%,transparent) !important;
}
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-secondary-brand,
.vp-submit,
.submit-btn,
.cr-apply-btn,
.cp-btn-prereg,
.qh-fab{
  background-image:none !important;
  background-color:var(--primary-color,#1a5f2a) !important;
  border-color:var(--primary-color,#1a5f2a) !important;
  color:var(--text-on-primary,#fff) !important;
}
.btn-danger{
  background-image:none !important;
  background-color:var(--color-danger,#b91c1c) !important;
  border-color:var(--color-danger,#b91c1c) !important;
}
.form-control,
.form-select,
.form-check-input,
.field-coop,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
textarea,
select{
  background:var(--bg-card,#fff) !important;
  color:var(--text-primary,var(--corp-text)) !important;
  border:1px solid var(--border-color,var(--corp-border)) !important;
  border-radius:var(--radius-md,var(--corp-radius-sm)) !important;
  box-shadow:none !important;
  min-height:40px;
}
.form-control:focus,
.form-select:focus,
.field-coop:focus,
input:focus,
textarea:focus,
select:focus{
  border-color:var(--primary-color,#1a5f2a) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color,#1a5f2a) 16%,transparent) !important;
  outline:0 !important;
}
.table,
.data-table{
  --bs-table-bg:var(--bg-card,#fff);
  --bs-table-color:var(--text-primary,var(--corp-text));
  border-color:var(--border-soft,var(--corp-border-soft)) !important;
}
.table > :not(caption) > * > *{
  border-color:var(--border-soft,var(--corp-border-soft)) !important;
  vertical-align:middle;
}
.table > thead th,
.data-table thead th{
  background:var(--bg-soft,var(--corp-surface-soft)) !important;
  color:var(--text-secondary,var(--corp-muted)) !important;
  font-size:.78rem !important;
  letter-spacing:.02em;
  text-transform:none;
}
.badge,
.type-pill,
.cp-pill,
.track-badge,
.status-badge,
.badge-status{
  border-radius:999px !important;
  box-shadow:none !important;
}
.page-hero,
.tracker-hero-section,
.cr-hero,
.cp-hero,
.rates-header-modern,
.dash-stat-icon,
.vp-icon,
.cr-sidebar-header,
.cp-card-head{
  background-image:none !important;
  background-color:var(--primary-color,#1a5f2a) !important;
}
.section-divider{
  background:var(--primary-color,#1a5f2a) !important;
}
@media (max-width:768px){
  :root{ --container-pad:12px; }
  body{ font-size:.96rem !important; line-height:1.62 !important; }
  .container,
  .container-fluid,
  .container-coop{ padding-left:12px !important; padding-right:12px !important; }
  .card-body,
  .card-header,
  .card-footer,
  .modal-body,
  .data-table-header,
  .data-table-footer{ padding:.85rem !important; }
  .btn,
  .btn-coop,
  .form-control,
  .form-select,
  input,
  select,
  textarea{ font-size:16px !important; }
  .btn,
  .btn-coop{ width:auto; min-height:42px; justify-content:center; }
  .table-responsive,
  .table-overflow-x{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .qh-launcher{ right:14px !important; bottom:86px !important; }
  .qh-fab{ width:52px !important; height:52px !important; }
}
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

.stat-card-row,
.stat-mini-row,
.admin-stat-grid,
.ds-stats-grid{
  align-items: stretch !important;
  gap: .75rem !important;
}
.stat-card-row > [class*="col-"],
.row > [class*="col-"] > .stat-uniform-card{
  display: flex !important;
}
.stat-card,
.stat-card.stat-card-flat,
.stat-card.stat-card-compact,
.stat-uniform-card,
.stat-mini,
.admin-stat-card,
.ds-card,
.mem-stat,
.mem-stat-card,
.dashboard-card.stat-card,
.dashboard-stat-card{
  min-height: 78px !important;
  height: 100% !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: var(--bg-card, #fff) !important;
  background-image: none !important;
  border: 1px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 12%, #e5e7eb) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
  transform: none !important;
  overflow: hidden !important;
}
.stat-card:hover,
.stat-uniform-card:hover,
.stat-mini:hover,
.admin-stat-card:hover,
.ds-card:hover,
.mem-stat:hover,
.mem-stat-card:hover,
.dashboard-stat-card:hover{
  transform: none !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.08) !important;
}
.stat-card,
.stat-mini,
.admin-stat-card,
.ds-card,
.mem-stat,
.mem-stat-card{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.stat-uniform-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.stat-card-icon,
.stat-mini .sm-icon,
.admin-stat-card .stat-icon,
.ds-card .ds-icon,
.mem-stat-icon,
.mem-stat-card .stat-icon,
.stat-uniform-card > i:first-child{
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.stat-uniform-card > i:first-child{
  margin: 0 !important;
  background: color-mix(in srgb, var(--primary-color, #1a5f2a) 10%, #fff) !important;
}
.stat-card-body,
.stat-mini > div:not(.sm-icon),
.admin-stat-card > div:not(.stat-icon),
.ds-card > div:not(.ds-icon),
.mem-stat-card > div:not(.stat-icon){
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.stat-card-value,
.stat-value,
.sm-val,
.ds-val,
.mem-stat-value,
.mem-stat-card .stat-value{
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--sc-accent, var(--primary-color, #1a5f2a)) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em !important;
}
.stat-card-label,
.stat-label,
.sm-lbl,
.ds-label,
.mem-stat-label,
.mem-stat-card .stat-label{
  margin: 2px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text-secondary, #647067) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}
.stat-card-trend,
.ds-sub,
.stat-mini small{
  margin-top: 2px !important;
  color: var(--text-muted, #8a948c) !important;
  font-size: .66rem !important;
  line-height: 1.2 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.stat-card::before,
.stat-card::after,
.stat-card-body::before,
.stat-card-body::after,
.stat-uniform-card::before,
.stat-uniform-card::after,
.stat-mini::before,
.stat-mini::after,
.admin-stat-card::before,
.admin-stat-card::after,
.ds-card::before,
.ds-card::after,
.mem-stat-card::before,
.mem-stat-card::after{
  display: none !important;
  content: none !important;
}
.active-filter.stat-mini,
.stat-mini.active,
.stat-card.active,
.admin-stat-card.active,
.ds-card.active{
  border-color: var(--primary-color, #1a5f2a) !important;
  box-shadow: inset 0 0 0 1px var(--primary-color, #1a5f2a), 0 2px 8px rgba(15,23,42,.07) !important;
}
@media (max-width: 575px){
  .stat-card,
  .stat-card.stat-card-flat,
  .stat-card.stat-card-compact,
  .stat-uniform-card,
  .stat-mini,
  .admin-stat-card,
  .ds-card,
  .mem-stat,
  .mem-stat-card,
  .dashboard-stat-card{
    min-height: 72px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  .stat-card-icon,
  .stat-mini .sm-icon,
  .admin-stat-card .stat-icon,
  .ds-card .ds-icon,
  .mem-stat-icon,
  .mem-stat-card .stat-icon,
  .stat-uniform-card > i:first-child{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
  .stat-card-value,
  .stat-value,
  .sm-val,
  .ds-val,
  .mem-stat-value,
  .mem-stat-card .stat-value{
    font-size: 1.12rem !important;
  }
}

@media (max-width: 899px){
  :root{
    --mobile-bottom-nav-h: 64px;
    --mobile-bottom-gap: 12px;
    --mobile-floating-bottom: calc(var(--mobile-bottom-nav-h) + var(--mobile-bottom-gap) + env(safe-area-inset-bottom, 0px));
  }
  body.has-bottomnav,
  body.admin-shell{
    padding-bottom: calc(var(--mobile-bottom-nav-h) + 18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.has-bottomnav .main-footer,
  body.has-bottomnav footer.main-footer,
  body.has-bottomnav .site-footer,
  body.has-bottomnav .footer,
  body.admin-shell .admin-page,
  body.admin-shell .page-content,
  .mem-container{
    padding-bottom: calc(var(--mobile-bottom-nav-h) + 22px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mob-bottomnav,
  .admin-bottom-nav,
  .mp-bottom-nav,
  .mem-nav{
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: var(--mobile-bottom-nav-h) !important;
    height: auto !important;
    padding-top: 6px !important;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 16px 16px 0 0 !important;
    background: var(--bg-card, #fff) !important;
    border-top: 1px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 14%, #e5e7eb) !important;
    box-shadow: 0 -8px 24px rgba(15,23,42,.12) !important;
    z-index: 900 !important;
  }
  .mob-bn-item,
  .admin-bottom-nav .admin-nav-item,
  .mp-bottom-nav a,
  .mp-bn-more,
  .mem-nav-item{
    min-height: 48px !important;
    line-height: 1.1 !important;
  }
  .qh-launcher,
  .public-fab-help,
  .admin-fab-msg,
  .whatsapp-float,
  .useful-links-float,
  .chatbot-widget{
    bottom: var(--mobile-floating-bottom) !important;
    z-index: 850 !important;
  }
  #publicChatPanel,
  .chatbot-widget .chatbot-box,
  .useful-links-float .useful-links-popup-box{
    bottom: calc(var(--mobile-bottom-nav-h) + 82px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100vh - 170px) !important;
  }
  #scrollAccessibilityPanel.sa-panel{
    bottom: var(--mobile-floating-bottom) !important;
    left: 10px !important;
    z-index: 840 !important;
  }
}
@media (max-width: 420px){
  .mob-bn-item,
  .admin-bottom-nav .admin-nav-item,
  .mp-bottom-nav a,
  .mp-bn-more,
  .mem-nav-item{
    font-size: .62rem !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .mob-bn-item i,
  .admin-bottom-nav .admin-nav-item i,
  .mp-bottom-nav a i,
  .mp-bn-more i,
  .mem-nav-item i{
    font-size: 1rem !important;
  }
}

.main-content .row.g-3.mb-3 > [class*="col-"] > .card.admin-table-card,
.main-content .row.g-3.mb-4 > [class*="col-"] > .card.admin-table-card,
.main-content .row.g-3.mb-4 > [class*="col-"] > .card-coop,
.main-content .row.g-3.mb-4 > [class*="col-"] > .stat-uniform-card,
.main-content .stat-mini,
.main-content .stat-uniform-card,
.main-content .admin-stat-card,
.main-content .ds-card,
.admin-content .row.g-3.mb-4 > [class*="col-"] > .card-coop,
.admin-content .row.g-3.mb-3 > [class*="col-"] > .card-coop,
.admin-content .stat-mini,
.admin-content .stat-uniform-card,
.admin-content .admin-stat-card,
.admin-content .ds-card{
  min-height: 76px !important;
  height: 100% !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: var(--bg-card, #fff) !important;
  background-image: none !important;
  border: 1px solid color-mix(in srgb, var(--primary-color, #1a5f2a) 12%, #e5e7eb) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
  transform: none !important;
  overflow: hidden !important;
}
.main-content .row.g-3.mb-3 > [class*="col-"] > .card.admin-table-card > .card-body,
.main-content .row.g-3.mb-4 > [class*="col-"] > .card.admin-table-card > .card-body,
.main-content .row.g-3.mb-4 > [class*="col-"] > .card-coop,
.admin-content .row.g-3.mb-4 > [class*="col-"] > .card-coop,
.admin-content .row.g-3.mb-3 > [class*="col-"] > .card-coop{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
}
.main-content .stat-uniform-card:hover,
.main-content .ds-card:hover,
.main-content .stat-mini:hover,
.main-content .admin-stat-card:hover,
.main-content .card.admin-table-card:hover,
.admin-content .stat-uniform-card:hover,
.admin-content .ds-card:hover,
.admin-content .stat-mini:hover,
.admin-content .admin-stat-card:hover,
.admin-content .card-coop:hover{
  transform: none !important;
  box-shadow: 0 3px 10px rgba(15,23,42,.08) !important;
}
.main-content .stat-uniform-card::before,
.main-content .ds-card::before,
.main-content .stat-mini::before,
.main-content .admin-stat-card::before,
.admin-content .stat-uniform-card::before,
.admin-content .ds-card::before,
.admin-content .stat-mini::before,
.admin-content .admin-stat-card::before{
  display: none !important;
  content: none !important;
}
.main-content .stat-uniform-card i,
.main-content .ds-icon,
.main-content .stat-mini .sm-icon,
.main-content .admin-stat-card .stat-icon,
.admin-content .stat-uniform-card i,
.admin-content .ds-icon,
.admin-content .stat-mini .sm-icon,
.admin-content .admin-stat-card .stat-icon{
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  margin: 0 auto 4px !important;
  border-radius: 10px !important;
  font-size: .95rem !important;
  transform: none !important;
  box-shadow: none !important;
}
.main-content .stat-value,
.main-content .sm-val,
.main-content .ds-val,
.main-content .h3.mb-0,
.main-content .h4.mb-0,
.main-content .h5.mb-0,
.admin-content .stat-value,
.admin-content .sm-val,
.admin-content .ds-val,
.admin-content .h3.mb-0,
.admin-content .h4.mb-0,
.admin-content .h5.mb-0{
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.main-content .stat-label,
.main-content .sm-lbl,
.main-content .ds-lbl,
.main-content .small.text-muted,
.admin-content .stat-label,
.admin-content .sm-lbl,
.admin-content .ds-lbl,
.admin-content .small.text-muted{
  font-size: .72rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.admin-page-header [style*="display:inline-flex"],
.admin-page-header a.text-decoration-none,
.admin-stat-badge,
.ntc-stat-pill,
.appfeat-stat-pill{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: .76rem !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}
.pfl-quick-links > li.has-drop .pfl-drop,
.pfl-quick-links .pfl-drop{
  min-width: 190px !important;
  max-width: min(230px, calc(100vw - 28px)) !important;
  padding: 6px !important;
}
.pfl-quick-links > li.has-drop .pfl-drop a,
.pfl-quick-links .pfl-drop a{
  min-height: 34px !important;
  padding: 7px 10px !important;
  font-size: .84rem !important;
}
.verify-shell,
.verify-card,
.verify-panel,
.verify-result-card,
.vp-card{
  text-align: start !important;
  line-height: 1.6 !important;
}
.verify-shell p,
.verify-card p,
.verify-panel p,
.verify-result-card p,
.vp-card p{
  text-align: start !important;
  text-wrap: pretty;
}
.pfl-top-bar,
.pfl-top-bar a,
.pfl-top-bar span,
.pfl-quick-links > li > a,
.main-header,
.main-header a,
.site-header,
.site-header a{
  color: var(--text-on-header, #fff) !important;
}
.main-footer,
.main-footer a,
.main-footer p,
.main-footer li,
.main-footer .footer-sahakari-name{
  color: var(--text-on-footer, #fff) !important;
}
.sr-hidden,
[data-aos]{
  transition-duration: .55s !important;
  animation-duration: .55s !important;
  transition-timing-function: ease-out !important;
}
.form-check-input,
input[type="checkbox"],
input[type="radio"]{
  width: 1.05em !important;
  height: 1.05em !important;
  min-width: 1.05em !important;
  vertical-align: -0.15em !important;
}
.form-switch .form-check-input{
  width: 2.2em !important;
  height: 1.15em !important;
}
@media (max-width: 575px){
  .main-content .row.g-3.mb-3 > [class*="col-"] > .card.admin-table-card,
  .main-content .row.g-3.mb-4 > [class*="col-"] > .card.admin-table-card,
  .main-content .row.g-3.mb-4 > [class*="col-"] > .card-coop,
  .main-content .row.g-3.mb-4 > [class*="col-"] > .stat-uniform-card,
  .main-content .stat-mini,
  .main-content .stat-uniform-card,
  .main-content .admin-stat-card,
  .main-content .ds-card,
  .admin-content .row.g-3.mb-4 > [class*="col-"] > .card-coop,
  .admin-content .row.g-3.mb-3 > [class*="col-"] > .card-coop,
  .admin-content .stat-mini,
  .admin-content .stat-uniform-card,
  .admin-content .admin-stat-card,
  .admin-content .ds-card{
    min-height: 70px !important;
    padding: 10px 12px !important;
  }
  .main-content .stat-value,
  .main-content .sm-val,
  .main-content .ds-val,
  .main-content .h3.mb-0,
  .main-content .h4.mb-0,
  .main-content .h5.mb-0,
  .admin-content .stat-value,
  .admin-content .sm-val,
  .admin-content .ds-val,
  .admin-content .h3.mb-0,
  .admin-content .h4.mb-0,
  .admin-content .h5.mb-0{
    font-size: 1.08rem !important;
  }
}

body.has-bottomnav .main-footer,
body.has-bottomnav footer.main-footer,
.main-footer,
footer.main-footer,
.site-footer{
  color: rgba(255,255,255,.92) !important;
}
.main-footer .footer-widget h4,
.main-footer .footer-widget h5,
.main-footer .footer-widget h6,
.main-footer .footer-title,
.main-footer .footer-sahakari-name,
.main-footer .copyright,
.main-footer .developer,
.main-footer p,
.main-footer li,
.main-footer span,
.main-footer small,
.main-footer i,
.main-footer a:not(.btn),
.main-footer .footer-links a,
.main-footer .footer-contact li,
.main-footer .footer-contact span,
.main-footer .footer-policy-links a,
.main-footer .visitor-counter,
.main-footer .visitor-item{
  color: rgba(255,255,255,.88) !important;
}
.main-footer .footer-widget h4,
.main-footer .footer-widget h5,
.main-footer .footer-widget h6,
.main-footer .footer-title{
  color: #fff !important;
}
.main-footer .footer-widget h4::after,
.main-footer .footer-title::after{
  background: rgba(255,255,255,.72) !important;
}
.main-footer .footer-links a:hover,
.main-footer .footer-policy-links a:hover,
.main-footer .developer a{
  color: #fff !important;
}
.main-footer .footer-top{
  background: color-mix(in srgb, var(--footer-color, var(--primary-color, #15803d)) 88%, #000) !important;
}
.main-footer .footer-bottom{
  background: color-mix(in srgb, var(--footer-color, var(--primary-color, #15803d)) 72%, #000) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}
.main-footer .visitor-item,
.main-footer .footer-social a{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
@media (max-width: 899px){
  body.has-bottomnav{
    padding-bottom: calc(var(--mobile-bottom-nav-h, 64px) + 28px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.has-bottomnav .main-footer,
  body.has-bottomnav footer.main-footer,
  body.has-bottomnav .site-footer,
  body.has-bottomnav .footer{
    margin-bottom: 0 !important;
    padding-bottom: calc(var(--mobile-bottom-nav-h, 64px) + 34px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .main-footer .footer-top{
    padding-top: 34px !important;
    padding-bottom: 24px !important;
  }
  .main-footer .footer-bottom{
    padding-bottom: 16px !important;
  }
  .main-footer .footer-bottom .container{
    gap: 8px 12px !important;
    padding-bottom: 12px !important;
  }
  .main-footer .footer-policy-links,
  .main-footer .visitor-counter{
    justify-content: center !important;
  }
  .mob-bottomnav{
    z-index: 1200 !important;
    border-radius: 14px 14px 0 0 !important;
  }
  .qh-launcher,
  .public-fab-help,
  .whatsapp-float,
  .useful-links-float,
  .chatbot-widget,
  #scrollAccessibilityPanel.sa-panel{
    bottom: calc(var(--mobile-bottom-nav-h, 64px) + 18px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1050 !important;
  }
}

@media (max-width: 991px){
  body.header-v2.mobile-nav-open{
    overflow: hidden !important;
  }
  body.header-v2 #mainNavV2,
  body.header-v2 #mainNavV2.main-nav,
  body.header-v2 .pfl-nav-area #mainNavV2{
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(86vw, 336px) !important;
    max-width: 336px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 76px 10px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: linear-gradient(180deg, var(--primary-dark, #064e1f) 0%, var(--primary-color, #15803d) 100%) !important;
    box-shadow: 12px 0 34px rgba(0,0,0,.32) !important;
    transform: translate3d(-110%, 0, 0) !important;
    z-index: 200050 !important;
    display: block !important;
  }
  body.header-v2 #mainNavV2.nav-open,
  body.header-v2 #mainNavV2.open,
  body.header-v2 #mainNavV2.active{
    transform: translate3d(0, 0, 0) !important;
  }
  body.header-v2 #mainNavV2::before{
    content: none !important;
    display: none !important;
  }
  body.header-v2 #mainNavV2 .close-menu{
    position: absolute !important;
    top: 18px !important;
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    z-index: 2 !important;
  }
  body.header-v2 #mainNavV2 .nav-menu{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
  }
  body.header-v2 #mainNavV2 .nav-menu > li{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  body.header-v2 #mainNavV2 .nav-menu > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    color: rgba(255,255,255,.94) !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }
  body.header-v2 #mainNavV2 .nav-menu > li.active > a,
  body.header-v2 #mainNavV2 .nav-menu > li.open > a{
    color: #fff !important;
    background: rgba(255,255,255,.15) !important;
    border-color: rgba(255,255,255,.18) !important;
  }
  body.header-v2 #mainNavV2 .nav-menu > li > a > i.fa-chevron-down{
    color: rgba(255,255,255,.86) !important;
    font-size: .72rem !important;
    margin-left: auto !important;
    transition: transform .18s ease !important;
  }
  body.header-v2 #mainNavV2 .nav-menu > li.open > a > i.fa-chevron-down{
    transform: rotate(180deg) !important;
  }
  body.header-v2 #mainNavV2 .nav-menu .dropdown,
  body.header-v2 #mainNavV2 .nav-menu .sub-menu{
    position: static !important;
    inset: auto !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 6px 0 0 !important;
    padding: 6px !important;
    list-style: none !important;
    background: rgba(0,0,0,.18) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  body.header-v2 #mainNavV2 .nav-menu .has-dropdown.open > .dropdown,
  body.header-v2 #mainNavV2 .nav-menu .has-sub.open > .sub-menu{
    display: block !important;
  }
  html body .header-v2 .main-nav > ul > li.has-dropdown.open > .dropdown,
  html body .header-v2 .main-nav > ul > li.has-dropdown.active > .dropdown{
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    border: 0 !important;
  }
  body.header-v2 #mainNavV2 .nav-menu .dropdown li,
  body.header-v2 #mainNavV2 .nav-menu .sub-menu li{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body.header-v2 #mainNavV2 .nav-menu .dropdown li a,
  body.header-v2 #mainNavV2 .nav-menu .sub-menu li a{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    padding: 8px 10px 8px 12px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    color: rgba(255,255,255,.88) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: .84rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  body.header-v2 #mainNavV2 .nav-menu .dropdown li a i,
  body.header-v2 #mainNavV2 .nav-menu .sub-menu li a i{
    width: 16px !important;
    min-width: 16px !important;
    text-align: center !important;
    color: rgba(255,255,255,.72) !important;
    font-size: .78rem !important;
  }
  body.header-v2 #mainNavV2 .nav-menu .dropdown li a:hover,
  body.header-v2 #mainNavV2 .nav-menu .sub-menu li a:hover{
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
  }
  body.header-v2 .menu-overlay.active,
  body.header-v2 .mobile-nav-backdrop.active,
  body.header-v2 #pflMobileBackdrop.active{
    z-index: 200040 !important;
    background: rgba(15,23,42,.58) !important;
  }
}

/* Final compact stat/count card normalization — admin member, dashboard programs, welfare */
.main-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card,
.admin-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card{
  min-height: 98px !important;
  height: 98px !important;
  padding: 12px 10px !important;
  justify-content: center !important;
  gap: 5px !important;
}
.main-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card > i,
.admin-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card > i{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  font-size: 1rem !important;
  margin-bottom: 2px !important;
  border-radius: 9px !important;
}
.main-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card .stat-value,
.admin-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card .stat-value{
  font-size: 1.08rem !important;
  line-height: 1 !important;
}
.main-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card .stat-label,
.admin-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card .stat-label{
  min-height: 0 !important;
  font-size: .68rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#pane-programs .stat-card-row,
#pane-programs .row:has(.stat-card){
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-bottom: 16px !important;
}
#pane-programs .stat-card-row > [class*="col-"],
#pane-programs .row:has(.stat-card) > [class*="col-"]{
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}
#pane-programs .stat-card,
#pane-programs .stat-card.stat-card-flat,
#pane-programs .stat-card.stat-card-compact{
  min-height: 72px !important;
  height: 72px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}
#pane-programs .stat-card-icon{
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  font-size: .95rem !important;
}
#pane-programs .stat-card-value{ font-size: 1.12rem !important; line-height: 1 !important; }
#pane-programs .stat-card-label{ font-size: .7rem !important; line-height: 1.2 !important; }
#pane-welfare .dash-section-title{ font-size: .98rem !important; }
#pane-welfare .wf-summary-bar{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
#pane-welfare .wf-stat-chip{
  min-height: 66px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.05) !important;
  align-items: center !important;
}
#pane-welfare .wf-stat-chip:hover{
  transform: none !important;
  box-shadow: 0 5px 16px rgba(15,23,42,.08) !important;
}
#pane-welfare .wf-stat-icon{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  font-size: .92rem !important;
}
#pane-welfare .wf-stat-chip .val{ font-size: 1.15rem !important; line-height: 1 !important; }
#pane-welfare .wf-stat-chip .lbl{ font-size: .72rem !important; line-height: 1.2 !important; }
@media (max-width: 768px){
  #pane-programs .stat-card-row,
  #pane-programs .row:has(.stat-card),
  #pane-welfare .wf-summary-bar{ grid-template-columns: 1fr !important; }
  .main-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card,
  .admin-content .row.g-3.mb-4 > .col-6.col-md-3 > .stat-uniform-card{
    height: 86px !important;
    min-height: 86px !important;
  }
}

/* v12.1 — Public service/auth polish and icon sizing */
#publicChatPanel .pcp-h{
  position: relative !important;
  padding-right: 48px !important;
}
#publicChatPanel .pcp-x{
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  font-size: 18px !important;
}
#publicChatPanel .pcp-x:hover{
  background: rgba(255,255,255,.16) !important;
}
.form-check-input,
.grievance-form .form-check-input,
.kyc-form .form-check-input,
.needs-validation .form-check-input{
  width: 1.05em !important;
  height: 1.05em !important;
  min-width: 1.05em !important;
  min-height: 1.05em !important;
  margin-top: .22em !important;
  background-size: .68em .68em !important;
}
.form-check{
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
.form-check .form-check-input{
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}
.form-check .form-check-label{
  line-height: 1.35 !important;
}
select.form-control,
select.form-select,
select.field-coop{
  background-size: 12px 10px !important;
}
body.auth-page,
.auth-wrapper,
.login-page,
.verify-page{
  color: #0f172a !important;
}
.auth-card,
.login-card,
.verify-form-card,
.vp-card{
  background: rgba(255,255,255,.96) !important;
  color: #0f172a !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.16) !important;
}
.auth-card label,
.login-card label,
.verify-form-card label,
.vp-field label{
  color: #111827 !important;
  font-weight: 700 !important;
}
.auth-card input,
.login-card input,
.verify-form-card input,
.vp-field input{
  color: #111827 !important;
  background: #fff !important;
  border-color: #cbd5e1 !important;
}
.verify-form-card,
.verify-form-card p,
.verify-form-card .hint,
.vp-help{
  text-align: left !important;
}
[lang="ne"] .verify-form-card,
[lang="ne"] .verify-form-card p,
[lang="ne"] .verify-form-card .hint,
[lang="ne"] .vp-help{
  text-align: justify !important;
}
.employee-id-card,
.hrm-id-card,
.member-id-card,
.id-card-preview{
  color-scheme: light !important;
  background: #fff !important;
}