@import url('https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@100..800&family=Bakbak+One&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

    ::-moz-selection {
        /* Code for Firefox */
        color: white;
        background: #f28669;
    }

    ::selection {
        color: white;
        background: #f28669;
    }



    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Google Sans", sans-serif;
    }

    body {
        min-height: 200vh;
        background-color: #e8e1d8;
        background-image:
            radial-gradient(circle at 12% 12%, rgba(249, 115, 22, 0.16), transparent 14%),
            radial-gradient(circle at 88% 11%, rgba(73, 53, 40, 0.14), transparent 13%),
            radial-gradient(circle at 20% 76%, rgba(255, 255, 255, 0.12), transparent 12%),
            radial-gradient(circle at 80% 82%, rgba(184, 95, 26, 0.12), transparent 14%),
            linear-gradient(145deg, #f8f1e6 0%, #e8e1d8 100%),
            repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 1px, transparent 1px, transparent 20px);
        background-size: auto, auto, auto, auto, cover, 40px 40px;
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
        background-attachment: fixed;
        overflow-x: hidden;
    }

    html {
        overflow-x: hidden;
        scroll-padding-top: var(--site-header-offset, 72px);
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }

    :root {
        --site-header-offset: 72px;
    }

    body {
        padding-top: var(--site-header-offset, 72px);
    }

    /* GLOBAL HERO COMPONENT */
    .hero-title-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.2rem;
        margin-bottom: 0.8rem;
    }

    .hero-logo {
        height: 55px;
        width: auto;
    }

    .hero-divider {
        width: 1.5px;
        height: 45px;
        background: #b95f1a;
        opacity: 0.3;
    }

    /* Standard Hero Description */
    .hero-desc-single {
        font-size: 1.1rem;
        color: #5f4a36;
        max-width: 100%;
        margin: 0 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.6;
    }

    @media (max-width: 768px) {
        .hero-desc-single {
            white-space: normal !important;
            font-size: 1rem;
        }
        .hero-logo {
            height: 45px;
        }
        .hero-divider {
            height: 35px;
        }
    }

    .main-navbar a {
        text-decoration: none;
    }

    /* modern animated gradient background (orange → brown) */
    .gradient-nav-wrapper {
        /* background: linear-gradient(135deg, #4a3728, #2e1503); */
        background: linear-gradient(135deg, #343330, #343330);

        background-size: 200% 200%;
        /* animation: gradientShift 8s ease infinite; */
        box-shadow: 0 8px 20px rgba(120, 60, 30, 0.25);
        /* Make navbar fixed so it stays on top after scrolling */
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 10050;
    }

    /* ... existing animation ... */

    /* ... (skipping unchanged lines for brevity if in actua file, but here I'm replacing chunks) ... */
    /* Actually, I should use multi_replace or separate calls as these are far apart. 
   Wait, .gradient-nav-wrapper is at top (line 19), .navLogo is at bottom (line 960).
   I will use multi_replace_file_content.
*/

    @keyframes gradientShift {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    /* thin top navbar */
    .top-thin-bar {
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: #fff6e5;
        font-size: 0.85rem;
        padding: 0.4rem 2rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.25s;
        position: relative;
        z-index: 1001;
    }

    .top-thin-bar.hide-thin {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
    }

    .thin-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        transition: color 0.2s;
        padding: 0.2rem 0;
    }

    .thin-item i {
        font-size: 0.9rem;
        color: #f28669;
    }

    .thin-item:hover i {
        color: white;
    }

    .thin-divider {
        width: 1px;
        height: 1.2rem;
        background: rgba(255, 255, 255, 0.3);
    }

    /* notification badge */
    .notif-badge {
        background: #f28669;
        color: #fff6e5;
        font-size: 0.7rem;
        /* font-weight: 800; */
        min-width: 1.4rem;
        height: 1.4rem;
        padding: 0 0.25rem;
        border-radius: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
        box-shadow: 0 2px 6px #b95b1c;
        border: 1px solid #ffc299;
    }

    /* language popup */
    .lang-popup {
        position: absolute;
        top: 2rem;
        right: 0;
        background: rgba(40, 38, 36, 0.96);
        backdrop-filter: blur(24px) saturate(1.4);
        -webkit-backdrop-filter: blur(24px) saturate(1.4);
        border-radius: 20px;
        padding: 0.6rem;
        min-width: 160px;
        box-shadow: 0 16px 36px -8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,160,80,0.12);
        border: 1px solid rgba(242, 134, 105, 0.3);
        display: none;
        z-index: 1200;
    }

    .lang-popup.show {
        display: block;
    }

    .lang-option {
        padding: 0.65rem 1.1rem;
        border-radius: 12px;
        color: #f5dfc0;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: background 0.18s, color 0.18s;
        cursor: pointer;
    }

    .lang-option i {
        font-size: 1.15rem;
        width: 1.6rem;
        color: #f28669;
        transition: color 0.18s;
    }

    .lang-option:hover {
        background: rgba(249, 115, 22, 0.18);
        color: #ffcfa0;
    }

    .lang-option:hover i {
        color: #f97316;
    }

    .lang-option.active {
        background: rgba(242, 134, 105, 0.2);
        color: #ffd8a8;
        font-weight: 600;
        border-left: 3px solid #f28669;
        padding-left: calc(1.1rem - 3px);
    }

    /* share popup */
    .share-popup {
        position: absolute;
        top: 2rem;
        left: 0;
        background: rgba(40, 38, 36, 0.96);
        backdrop-filter: blur(24px) saturate(1.4);
        -webkit-backdrop-filter: blur(24px) saturate(1.4);
        border-radius: 16px;
        padding: 0.6rem;
        min-width: 200px;
        box-shadow: 0 16px 36px -8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,160,80,0.12);
        border: 1px solid rgba(242, 134, 105, 0.3);
        display: none;
        z-index: 1200;
    }

    .share-popup.show {
        display: block;
    }

    .share-item {
        padding: 0.65rem 1rem;
        border-radius: 12px;
        color: #f5dfc0;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: background 0.18s, color 0.18s;
        cursor: pointer;
    }

    .share-item i {
        font-size: 1.2rem;
        width: 1.8rem;
        color: #f28669;
        transition: color 0.18s;
    }

    .share-item:hover {
        background: rgba(249, 115, 22, 0.18);
        color: #ffcfa0;
    }

    .share-item:hover i {
        color: #f97316;
    }

    .copy-confirm {
        font-size: 0.7rem;
        margin-left: auto;
        color: #a5d6a5;
        opacity: 0;
    }

    .share-item.copied .copy-confirm {
        opacity: 1;
    }

    /* notifications panel */
    .notif-popup {
        position: absolute;
        top: 2rem;
        right: 0;
        background: rgba(40, 38, 36, 0.96);
        backdrop-filter: blur(24px) saturate(1.4);
        -webkit-backdrop-filter: blur(24px) saturate(1.4);
        width: 300px;
        max-height: 360px;
        overflow-y: auto;
        border-radius: 16px;
        padding: 0.6rem;
        box-shadow: 0 16px 36px -8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,160,80,0.12);
        border: 1px solid rgba(242, 134, 105, 0.3);
        display: none;
        z-index: 1200;
    }

    .notif-popup.show {
        display: block;
    }

    .notif-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 0.75rem 0.85rem;
        border-radius: 10px;
        color: #f5dfc0;
        transition: background 0.15s;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

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

    .notif-item i {
        font-size: 1.2rem;
        color: #f28669;
        min-width: 1.8rem;
        text-align: center;
        margin-top: 1px;
    }

    .notif-item strong {
        color: #ffe8cc;
        font-weight: 600;
        display: block;
        margin-bottom: 3px;
        font-size: 0.88rem;
    }

    .notif-item span {
        font-size: 0.76rem;
        color: #a88060;
    }

    .notif-item:hover {
        background: rgba(249, 115, 22, 0.1);
    }

    /* main navbar */
    .main-navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 2rem;
        color: white;
        flex-wrap: nowrap;
        gap: 1rem;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font-size: 1.6rem;
        font-weight: 600;
        letter-spacing: -0.5px;
    }

    .brand i {
        font-size: 2.2rem;
        filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
    }

    .company-name {
        background: linear-gradient(to right, #fff7e6, #ffe6c9);
        -webkit-background-clip: text;
        background-clip: text;
        color: white;
        text-shadow: 2px 2px 4px rgba(140, 70, 20, 0.3);
        font-family: "Bakbak One", sans-serif;
        font-weight: 400;


    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 1.8rem;
        margin-left: auto; /* push links to the right of the navbar */
        justify-content: flex-end;
        list-style: none;
    }

    .nav-links li {
        position: relative;
        padding: 0.4rem 0;
    }

    .nav-links a {
        color: white;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.9rem;
        padding: 0.4rem 0;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s;
        border-bottom: 2px solid transparent;
    }

    .nav-links a i {
        font-size: 1.5rem;
        transition: transform 0.2s;
    }

    .nav-links a:hover {
        color: #f28669;
        border-bottom-color: rgba(255, 255, 255, 0.6);
    }

    .nav-links a:hover i {
        transform: translateX(4px);
    }

    /* DROP DOWN - increased distance from link (top: 2.2rem vs previous 2rem) */
    .dropdown-content {
        position: absolute;
        top: 2.6rem;
        /* increased from 2rem → more gap between link and box */
        left: -1rem;
        background: rgba(255, 245, 235, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        min-width: 240px;
        border-radius: 24px 8px 24px 8px;
        padding: 0.8rem 0;
        box-shadow: 0 28px 40px -12px #4d1e0b;
        opacity: 0;
        transform: translateY(15px) scale(0.98);
        visibility: hidden;
        transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.2s;
        z-index: 100;
        border: 1px solid rgba(255, 255, 240, 0.5);
    }

    .nav-links li:hover .dropdown-content {
        opacity: 1;
        transform: translateY(0) scale(1);
        visibility: visible;
    }

    .dropdown-content a {
        color: #4a2512;
        padding: 0.7rem 1.8rem;
        font-size: 0.98rem;
        border-bottom: none;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .dropdown-content a i {
        color: #b45f2a;
        width: 1.4rem;
        font-size: 1rem;
    }

    .dropdown-content a:hover {
        background: rgba(249, 115, 22, 0.15);
        color: #7c2d12;
        border-bottom: none;
    }

    .register-btn {
        background: rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1.5px solid rgba(255, 235, 200, 0.7);
        color: white;
        font-weight: 600;
        font-size: 1rem;
        padding: 0.65rem 1.8rem;
        border-radius: 40px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 6px 14px rgba(120, 50, 0, 0.3);
    }

    .register-btn i {
        font-size: 1.1rem;
        transition: transform 0.2s;
    }

    .register-btn:hover {
        background: #f97316;
        border-color: white;
        transform: scale(1.03);
        box-shadow: 0 10px 20px rgba(200, 80, 0, 0.4);
    }

    .register-btn:hover i {
        transform: rotate(10deg);
    }

    /* responsive */
    @media (max-width: 850px) {
        .top-thin-bar {
            padding: 0.4rem 1rem;
            gap: 0.8rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        .main-navbar {
            flex-direction: column;
            align-items: stretch;
            padding: 1rem;
        }

        .brand {
            justify-content: center;
        }

        .nav-links {
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem 1.2rem;
        }

        .register-btn {
            justify-content: center;
            width: fit-content;
            margin: 0 auto;
        }

        .dropdown-content {
            left: -0.5rem;
        }
    }

    @media (max-width: 500px) {
        .top-thin-bar .thin-item span:not(.icon-only) {
            display: none;
        }

        .thin-item i {
            font-size: 1.2rem;
        }

        .notif-popup {
            width: 280px;
            right: -20px;
        }
    }

    .content-placeholder {
        max-width: 1100px;
        margin: 3rem auto;
        background: rgba(255, 250, 240, 0.5);
        backdrop-filter: blur(4px);
        padding: 3rem;
        border-radius: 40px;
        box-shadow: 0 15px 30px rgba(100, 50, 10, 0.1);
        color: #3d2b1a;
    }




















    /* FONTS */
    .bakbak-one-regular {
        font-family: "Bakbak One", sans-serif;
        font-weight: 400;
        font-style: normal;
    }



    .google-sans-a1 {
        font-family: "Google Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings:
            "GRAD" 0;
    }



    /* font-family: "Anek Devanagari", sans-serif; */








    /* From Uiverse.io by Nawsome */
    .continue-application {
        --color: #fff;
        --background: #64625f;
        --background-hover: #f28669;
        --background-left: #eeeae3;
        --folder: #F3E9CB;
        --folder-inner: #BEB393;
        --paper: #FFFFFF;
        --paper-lines: #BBC1E1;
        --paper-behind: #E1E6F9;
        --pencil-cap: #fff;
        --pencil-top: #275EFE;
        --pencil-middle: #fff;
        --pencil-bottom: #5C86FF;
        --shadow: rgba(13, 15, 25, .2);
        border: none;
        outline: none;
        cursor: pointer;
        position: relative;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 500;
        line-height: 19px;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        padding: 17px 29px 17px 69px;
        transition: background 0.3s;
        color: var(--color);
        background: var(--bg, var(--background));
    }

    .continue-application>div {
        top: 0;
        left: 0;
        bottom: 0;
        width: 53px;
        position: absolute;
        overflow: hidden;
        border-radius: 5px 0 0 5px;
        background: var(--background-left);
    }

    .continue-application>div .folder {
        width: 23px;
        height: 27px;
        position: absolute;
        left: 15px;
        top: 13px;
    }

    .continue-application>div .folder .top {
        left: 0;
        top: 0;
        z-index: 2;
        position: absolute;
        transform: translateX(var(--fx, 0));
        transition: transform 0.4s ease var(--fd, 0.3s);
    }

    .continue-application>div .folder .top svg {
        width: 24px;
        height: 27px;
        display: block;
        fill: var(--folder);
        transform-origin: 0 50%;
        transition: transform 0.3s ease var(--fds, 0.45s);
        transform: perspective(120px) rotateY(var(--fr, 0deg));
    }

    .continue-application>div .folder:before,
    .continue-application>div .folder:after,
    .continue-application>div .folder .paper {
        content: "";
        position: absolute;
        left: var(--l, 0);
        top: var(--t, 0);
        width: var(--w, 100%);
        height: var(--h, 100%);
        border-radius: 1px;
        background: var(--b, var(--folder-inner));
    }

    .continue-application>div .folder:before {
        box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);
        transform: translateX(var(--fx, 0));
        transition: transform 0.4s ease var(--fd, 0.3s);
    }

    .continue-application>div .folder:after,
    .continue-application>div .folder .paper {
        --l: 1px;
        --t: 1px;
        --w: 21px;
        --h: 25px;
        --b: var(--paper-behind);
    }

    .continue-application>div .folder:after {
        transform: translate(var(--pbx, 0), var(--pby, 0));
        transition: transform 0.4s ease var(--pbd, 0s);
    }

    .continue-application>div .folder .paper {
        z-index: 1;
        --b: var(--paper);
    }

    .continue-application>div .folder .paper:before,
    .continue-application>div .folder .paper:after {
        content: "";
        width: var(--wp, 14px);
        height: 2px;
        border-radius: 1px;
        transform: scaleY(0.5);
        left: 3px;
        top: var(--tp, 3px);
        position: absolute;
        background: var(--paper-lines);
        box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);
    }

    .continue-application>div .folder .paper:after {
        --tp: 6px;
        --wp: 10px;
    }

    .continue-application>div .pencil {
        height: 2px;
        width: 3px;
        border-radius: 1px 1px 0 0;
        top: 8px;
        left: 105%;
        position: absolute;
        z-index: 3;
        transform-origin: 50% 19px;
        background: var(--pencil-cap);
        transform: translateX(var(--pex, 0)) rotate(35deg);
        transition: transform 0.4s ease var(--pbd, 0s);
    }

    .continue-application>div .pencil:before,
    .continue-application>div .pencil:after {
        content: "";
        position: absolute;
        display: block;
        background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));
        width: var(--w, 5px);
        height: var(--h, 20px);
        border-radius: var(--br, 2px 2px 0 0);
        top: var(--t, 2px);
        left: var(--l, -1px);
    }

    .continue-application>div .pencil:before {
        -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
        clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
    }

    .continue-application>div .pencil:after {
        --b: none;
        --w: 3px;
        --h: 6px;
        --br: 0 2px 1px 0;
        --t: 3px;
        --l: 3px;
        border-top: 1px solid var(--pencil-top);
        border-right: 1px solid var(--pencil-top);
    }

    .continue-application:before,
    .continue-application:after {
        content: "";
        position: absolute;
        width: 10px;
        height: 2px;
        border-radius: 1px;
        background: var(--color);
        transform-origin: 9px 1px;
        transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg));
        top: 26px;
        right: 16px;
        transition: transform 0.3s;
    }

    .continue-application:after {
        --r: 45deg;
    }

    .continue-application:hover {
        --cx: 2px;
        --bg: var(--background-hover);
        --fx: -40px;
        --fr: -60deg;
        --fd: .15s;
        --fds: 0s;
        --pbx: 3px;
        --pby: -3px;
        --pbd: .15s;
        --pex: -24px;
    }


















    .notice-bar {
        position: relative;
        overflow: hidden;
        background: white;
        /* dark modern background */
        color: #343330;
        padding: 10px 0;
        /* font-family: system-ui, sans-serif; */
    }

    /* Accent line */
    .notice-bar::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: #f28669;
        /* accent color */
    }

    .notice-track {
        display: inline-block;
        white-space: nowrap;
        padding-left: 100%;
        animation: marquee 14s linear infinite;
        font-weight: 500;
    }

    /* Pause on hover */
    .notice-bar:hover .notice-track {
        animation-play-state: paused;
    }

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

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

    .marq-Accent-Line {
        color: #f28669
    }









    /* ==========================================================================
       MODERN COMPREHENSIVE FOOTER
       ========================================================================== */
    .main-footer {
        /* background: radial-gradient(circle at top right, #1a233a, #0b1121); */
        background: radial-gradient(circle at top right, #181818, #343330);

        color: rgba(255, 255, 255, 0.85);
        padding: 5rem 2rem 2rem;
        margin-top: 4rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        /* font-family: 'Inter', sans-serif; */
    }

    .footer-container {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    /* Branding Section */
    .footer-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Push logo and text apart */
        flex-wrap: wrap;
        gap: 2.5rem;
        padding-bottom: 3rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .footer-logo {
        height: auto;
        width: 100%;
        max-width: 380px;
        opacity: 0.2;
        /* Default faded opacity */
        filter: brightness(0) invert(1);
        /* Pure white base */
        transition: opacity 0.3s ease;
        cursor: pointer;
    }

    .footer-logo:hover {
        opacity: 1;
        /* Full intensity on hover */
    }

    .brand-marathi {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        /* Right align phrases */
        gap: 0.2rem;
    }

    .brand-marathi p {
        font-family: "Bakbak One", sans-serif;
        font-size: clamp(2.2rem, 7vw, 4rem);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1.2;
        text-align: right;
        opacity: 0.2;
        /* Default faded opacity */
        transition: opacity 0.25s ease;
        cursor: pointer;
    }

    .brand-marathi p:hover {
        opacity: 1;
        /* Full intensity on hover */
    }

    /* Link Grid (Now Flext Row) */
    .footer-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 1.5rem;
        /* Balanced spacing between columns */
    }

    .footer-col {
        flex: 1;
        position: relative;
    }

    .contact-col-wide {
        flex: 1.8 !important;
        /* Give more space to contact as it contains dual columns */
    }

    /* Modern Vertical Dividers between Columns */
    .footer-col:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -0.75rem;
        /* Half the gap */
        top: 15%;
        height: 70%;
        width: 1px;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }

    .footer-col h3 {
        color: #ffffff;
        font-size: 1.1rem;
        /* Slightly smaller h3 for one-row layout */
        font-weight: 600;
        margin-bottom: 1.8rem;
        position: relative;
        padding-bottom: 0.8rem;
    }

    .footer-col h3::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 2px;
        background: #f28669;
        border-radius: 2px;
    }

    .footer-col ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .footer-col ul li a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 0.95rem;
        transition: all 0.25s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .footer-col ul li a i {
        color: #f28669;
        font-size: 1.1rem;
        opacity: 0.8;
    }

    .footer-col ul li a:hover {
        color: #ffffff;
        transform: translateX(5px);
    }

    .footer-col ul li a:hover i {
        opacity: 1;
    }

    /* Contact specific */
    .contact-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.6);
    }

    .contact-list li i {
        color: #f28669;
        font-size: 1.2rem;
        margin-top: 2px;
    }

    .contact-list a {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Dual Contact Section specific */
    .contact-col-wide {
        grid-column: span 2;
        /* Allow the contact section to take more space */
    }

    .contact-dual-grid {
        display: flex;
        align-items: flex-start;
        gap: 2rem;
        position: relative;
    }

    .contact-section {
        flex: 1;
    }

    .links-part {
        margin-top: -1.2rem;
        /* Shift digital section slightly above address baseline */
    }

    .address-part p {
        font-size: 0.95rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.6);
        margin: 0;
    }

    .address-part i {
        color: #f28669;
        font-size: 1.2rem;
        margin-right: 8px;
    }

    .contact-divider {
        width: 1px;
        height: 60px;
        /* Approx half height of the container */
        background: rgba(255, 255, 255, 0.1);
        align-self: center;
    }

    /* Footer Bottom */
    .footer-bottom {
        margin-top: 5rem;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .footer-bottom-content {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
    }

    .legal-links {
        display: flex;
        gap: 2rem;
    }

    .legal-links a {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.4);
        text-decoration: none;
        transition: color 0.2s;
    }

    .legal-links a:hover {
        color: #ffffff;
    }

    .copyright {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.3);
        margin: 0;
    }

    /* Share Button */
    .share-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #ffffff;
        padding: 0.6rem 1.4rem;
        border-radius: 50px;
        font-size: 0.9rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
    }

    .share-btn:hover {
        background: #ffffff;
        color: #1a233a;
        transform: translateY(-2px);
    }

    /* Responsive adjustments */
    @media (max-width: 992px) {
        .contact-col-wide {
            grid-column: span 1;
        }

        .contact-dual-grid {
            flex-direction: column;
            gap: 1.5rem;
        }

        .contact-divider {
            width: 100%;
            height: 1px;
            margin: 0.5rem 0;
        }
    }

    @media (max-width: 768px) {
        .main-footer {
            padding: 4rem 1.5rem 8rem;
            /* extra bottom padding for mobile nav */
        }

        .footer-grid {
            display: none; /* Hide link columns as requested */
        }

        .footer-brand {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 2rem;
            border-bottom: none;
        }

        .brand-marathi {
            align-items: center;
        }

        .brand-marathi p {
            font-size: 1.6rem;
            text-align: center;
        }

        .footer-bottom-content {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .legal-links {
            display: none; /* Keep it minimalist */
        }
    }

    @keyframes fadeInUp {
        0% {
            opacity: 0.2;
            transform: translateY(60px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* fallback for older browsers (no animation-timeline support) – still fine */
    @supports not (animation-timeline: view()) {
        .main-div {
            animation: none;
            opacity: 1;
        }
    }




    .navLogo {
        width: 100px;
        margin-top: -30px;
        margin-bottom: -30px;
        position: relative;
        z-index: 2000;
        filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
        /* buttery smooth ease-out */
        transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
        will-change: width, margin, transform;
    }

    .navLogo:hover {
        transform: scale(1.15);
    }

    /* Scrolled state: logo shrinks back to fit inside navbar */
    .scrolled-nav .navLogo {
        width: 50px;
        margin-top: 0;
        margin-bottom: 0;
        filter: none;
    }


    .footerLogo1 {
        width: 100%;
        max-width: 400px;
        height: auto;
    }







    /* ---------- PERFECT ROUND FILL ARROW (fixed bottom right) ---------- */
    .round-fill-arrow {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 50%;
        /* perfect circle */
        background: white;
        box-shadow: 0 18px 35px -10px rgba(0, 40, 80, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
        cursor: pointer;
        z-index: 1000;

        /* center content (arrow) with flex, always on top */
        display: flex;
        align-items: center;
        justify-content: center;

        /* hide by default – appear on scroll */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0s 0.3s, box-shadow 0.2s;

        /* important: any overflow would cut the fill, but we want fill perfectly round inside.
               we keep overflow: hidden to contain fill within the circle */
        overflow: hidden;

        /* extra modern touch: subtle backdrop (optional) */
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    /* visible state */
    .round-fill-arrow.visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.3s ease, visibility 0s 0s, box-shadow 0.2s;
    }

    /* FILL LAYER – perfectly round & rises from bottom */
    .fill-layer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0%;
        /* set by JS (0–100%) */
        background: #3b82f6;
        /* solid modern blue */
        transition: height 0.1s linear;
        z-index: 1;

        /* --- critical: perfect roundness for the fill top edge --- */
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        /* this makes the top edge of the fill follow a circular arc.
               combined with parent overflow:hidden, it creates a perfect circular fill inside the circle */

        /* optional inner glow */
        box-shadow: inset 0 8px 12px -6px rgba(255, 255, 255, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    }

    /* the ARROW itself – placed above fill with higher z-index */
    .arrow-above {
        width: 1.9rem;
        height: 1.9rem;
        border: solid #ffffff;
        /* white arrow stands on blue */
        border-width: 0 5px 5px 0;
        transform: rotate(-135deg);
        /* point up */
        margin-top: 8px;
        /* optical adjustment */
        border-radius: 3px;
        filter: drop-shadow(0 3px 5px rgba(0, 30, 50, 0.3));
        z-index: 3;
        /* above fill (z-index works on positioned but we also use stacking via order) */
        position: relative;
        /* ensures it's above the absolute fill */
        transition: border-color 0.2s, transform 0.2s;
    }

    /* Hover effect: subtle scale & brighter fill */
    .round-fill-arrow:hover {
        transform: scale(1.07);
        box-shadow: 0 22px 40px -8px #1e4f9e;
    }

    .round-fill-arrow:hover .arrow-above {
        border-color: #f0f9ff;
        /* even brighter white */
        filter: drop-shadow(0 4px 7px #0a2b4e);
    }

    /* focus style */
    .round-fill-arrow:focus-visible {
        outline: 4px solid #3b82f6;
        outline-offset: 5px;
    }

    /* small extra label (positioned not to interfere) */
    .info-badge {
        position: fixed;
        bottom: 7rem;
        right: 2.3rem;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        padding: 0.5rem 1.2rem;
        border-radius: 40px;
        font-size: 0.9rem;
        font-weight: 500;
        color: #1f4a8a;
        box-shadow: 0 6px 16px rgba(0, 40, 70, 0.15);
        border: 1px solid white;
        z-index: 990;
        pointer-events: none;
    }

    @media (max-width: 600px) {
        .round-fill-arrow {
            width: 4rem;
            height: 4rem;
            bottom: 1.2rem;
            right: 1.2rem;
        }

        .arrow-above {
            width: 1.5rem;
            height: 1.5rem;
            border-width: 0 4px 4px 0;
            margin-top: 6px;
        }

        .info-badge {
            bottom: 6rem;
            right: 1.5rem;
            font-size: 0.8rem;
        }
    }





















    /* ---------- BUTTON WITH PERFECT ROUND FIX ---------- */
    .perfect-round-arrow {
        position: fixed;
        bottom: 1.8rem;
        right: 1.8rem;
        width: 3.2rem;
        /* small size */
        height: 3.2rem;
        border-radius: 50%;
        /* base circle */
        background: white;
        /* background behind fill (visible when fill < 100%) */
        box-shadow: 0 12px 24px -8px rgba(0, 45, 90, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
        cursor: pointer;
        z-index: 1000;

        /* center arrow */
        display: flex;
        align-items: center;
        justify-content: center;

        /* hidden by default, appear on scroll */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0s 0.25s, box-shadow 0.2s, transform 0.2s;

        /* CRITICAL: clip the fill to the circle perfectly */
        overflow: hidden;

        /* extra smoothness */
        backdrop-filter: blur(1.5px);
        -webkit-backdrop-filter: blur(1.5px);
    }

    .perfect-round-arrow.visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.25s ease, visibility 0s 0s, box-shadow 0.2s, transform 0.2s;
    }

    /* ===== PERFECTLY ROUND FIX ===== 
           Instead of a rectangular fill, we use a circular mask approach.
           We want the fill to always be a perfect circle segment rising from bottom.
           The solution: a square inner container that is bigger than parent,
           with border-radius: 50%, and we translate it vertically based on percentage.
           This guarantees the visible part is always a perfect circle. */
    .fill-circle-container {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        /* relative to parent */
        height: 100%;
        /* full parent height */
        overflow: hidden;
        /* clips the inner circle */
        border-radius: 50%;
        /* ensures clipping follows parent circle */
        z-index: 1;
        pointer-events: none;
        /* allow clicks to pass to button */
    }

    /* the actual circular fill – a perfect circle that moves up/down */
    .fill-circle {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        /* of container, same as parent width */
        height: 0;
        /* dynamic height set via JS (percentage of parent) */
        background: #f28669;
        /* blue fill */
        transition: height 0.08s linear;
        /* smooth fill transition */
        /* shape: a perfect circle that will be clipped by container */
        border-radius: 50%;
        /* makes it a circle */
        /* the circle is as wide as container, height equals width for perfect circle,
               but we adjust height via JS. However to maintain perfect roundness, we need
               the circle to be a square (height = width) and positioned at bottom.
               But we can't have height=width if we want fill to rise gradually.
               Solution: use a square that is wider than container, but scale transform? 
               Better: we make it a perfect circle by using width = 100%, height = width (but width is fixed to parent width).
               Since parent width = 3.2rem, we can set height to same as parent width.
               BUT we want fill height to represent scroll % – we can use clip-path or mask.
               The most reliable: use a square circle and translateY.
               Let's implement a perfect circle that rises using transform: translateY.
               */

        /* we need width = height to maintain a perfect circle.
               But container width is 3.2rem, so we set height to 3.2rem (same as width).
               Then we use bottom:0 and translateY to move it up/down based on percent.
               However the parent .fill-circle-container has overflow:hidden, so only part shows.
               This guarantees the visible part is always a perfect circle segment. */
        width: 100%;
        height: auto;
        /* will be overridden by aspect-ratio */
        aspect-ratio: 1 / 1;
        /* ensures perfect square/circle */
        background: #f28669;
        border-radius: 50%;
        bottom: 0;
        transform: translateY(0);
        /* js will control this: translateY(100%) moves it fully down (hidden), 0% fully up (visible) */
        transition: transform 0.08s linear;
    }

    /* new simpler approach – using transform: translateY on a perfect square circle */
    .fill-circle-perfect {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        aspect-ratio: 1 / 1;
        /* makes it a perfect square, thus circle via border-radius */
        background: #f28669;
        border-radius: 50%;
        transform: translateY(100%);
        /* start fully below container (hidden) */
        transition: transform 0.08s linear;
        z-index: 1;
        /* add subtle inner glow */
        box-shadow: inset 0 8px 12px -6px rgba(255, 255, 255, 0.9), inset 0 -4px 8px rgba(0, 0, 0, 0.1);
    }

    /* ARROW itself – above fill */
    .arrow-above-fix {
        width: 1.3rem;
        height: 1.3rem;
        border: solid #ffffff;
        border-width: 0 4px 4px 0;
        transform: rotate(-135deg);
        margin-top: 5px;
        border-radius: 2px;
        filter: drop-shadow(0 2px 4px rgba(0, 30, 50, 0.3));
        z-index: 3;
        position: relative;
        transition: border-color 0.2s, filter 0.2s;
        pointer-events: none;
        /* so clicks go through to button */
    }

    /* hover effect */
    .perfect-round-arrow:hover {
        transform: scale(1.08);
        box-shadow: 0 18px 30px -8px #f28669;
    }

    .perfect-round-arrow:hover .arrow-above-fix {
        border-color: #f4fbff;
        filter: drop-shadow(0 3px 6px #f28669);
    }

    /* focus ring */
    .perfect-round-arrow:focus-visible {
        outline: 3px solid #f28669;
        outline-offset: 4px;
    }

    /* info badge */
    .info-chip-fix {
        position: fixed;
        bottom: 5.5rem;
        right: 1.9rem;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        padding: 0.35rem 1rem;
        border-radius: 40px;
        font-size: 0.8rem;
        font-weight: 550;
        color: #1e4a7a;
        box-shadow: 0 4px 12px rgba(0, 45, 80, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.9);
        z-index: 990;
        pointer-events: none;
    }

    @media (max-width: 600px) {
        .perfect-round-arrow {
            width: 2.8rem;
            height: 2.8rem;
            bottom: 1.2rem;
            right: 1.2rem;
        }

        .arrow-above-fix {
            width: 1.1rem;
            height: 1.1rem;
            border-width: 0 3.5px 3.5px 0;
            margin-top: 4px;
        }

        .info-chip-fix {
            bottom: 5rem;
            right: 1.4rem;
            font-size: 0.7rem;
        }
    }

















    /* === slideshow container – height reduced by ~40% (from 16/9 ≈ 56.25% to ~34% aspect) === */
    .slideshow {
        position: relative;
        width: 100%;
        border-radius: 0rem;
        overflow: hidden;
        box-shadow: none;
        background: #1e2630;
        /* original 16/9 ~56.25% → reduce by 40% → new aspect ~33.75% (approx 2.96:1) */
        aspect-ratio: 2.96 / 1;
        /* visually ~ 33.8% height relative to width */
        margin-bottom: 3rem;
    }

    .slides-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* base slide — modern clean layer */
    .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
        /* allow navigation through overlay */
        will-change: transform, opacity, filter;
        opacity: 0;
        transform: scale(1.02) translateX(8px);
        /* subtle starting offset */
        filter: blur(2px) brightness(0.9);
        transition: none;
        /* controlled by JS for perfect smoothness */
    }

    /* visible slide – class toggled by js */
    .slide.active {
        opacity: 1;
        transform: scale(1) translateX(0);
        filter: blur(0) brightness(1);
        z-index: 10;
    }

    /* navigation arrows — modern glassmorphism */
    .nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 30;
        background: rgba(20, 28, 36, 0.6);
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: white;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 2rem;
        font-weight: 300;
        transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        line-height: 1;
        user-select: none;
    }

    .nav-btn:hover {
        background: rgba(40, 50, 65, 0.8);
        border-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-50%) scale(1.07);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.6);
    }

    .nav-btn:active {
        transform: translateY(-50%) scale(0.98);
        background: rgba(15, 20, 28, 0.9);
    }

    .prev {
        left: 1.5rem;
    }

    .next {
        right: 1.5rem;
    }

    /* === indicators === */
    .indicators {
        position: absolute;
        bottom: 1.5rem;
        /* slightly reduced to match compact height */
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 0.7rem;
        z-index: 30;
        flex-wrap: wrap;
        padding: 0 1rem;
    }

    .dot {
        width: 2.6rem;
        height: 0.4rem;
        border-radius: 0.4rem;
        background: rgba(210, 220, 240, 0.3);
        backdrop-filter: blur(2px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    .dot.active {
        background: white;
        width: 4rem;
        border-color: rgba(255, 255, 255, 0.7);
        box-shadow: 0 0 18px rgba(255, 255, 255, 0.5);
    }

    .dot:hover {
        background: rgba(255, 255, 255, 0.7);
        transform: translateY(-2px);
    }


    @media (max-width: 640px) {
        .showcase {
            padding: 0.8rem;
        }

        .slideshow {
            border-radius: 0rem;
            aspect-ratio: 16 / 9; /* Standard widescreen */
        }
        
        .slide {
            object-fit: contain !important; /* Ensure full image is visible */
            background: #1e2630; /* Match container background */
        }

        .nav-btn {
            width: 2.5rem;
            height: 2.5rem;
            font-size: 1.5rem;
        }

        .prev {
            left: 0.8rem;
        }

        .next {
            right: 0.8rem;
        }


        .dot {
            width: 1.8rem;
        }

        .dot.active {
            width: 2.8rem;
        }
    }
















    /* ===== MOBILE‑ONLY NAVBAR ===== */
    .mobile-navbar {
        /* hidden on screens wider than 768px (tablet/desktop) */
        display: flex;
        /* visible by default (mobile first) */
        background: #343330;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.05);
        padding: 0.1rem 1rem;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e9edf4;
        height: 70px;

        /* Fixed positioning */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1100;

        /* safe area for notched phones */
        padding-top: env(safe-area-inset-top, 0.75rem);
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    /* LEFT BLOCK: logo + vertical line + tagline */
    .nav-left {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        /* breathing space between items */
        flex-wrap: nowrap;
        overflow: hidden;
        /* prevents tagline overflow on very tiny screens */
    }

    /* simple logo placeholder – pure CSS, but feels like a real logo */
    .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        /* background: #1a2b4c; */
        /* deep navy — typical logo background */
        color: white;
        font-weight: 600;
        font-size: 1.25rem;
        width: 50px;
        height: 50px;
        border-radius: 10px;
        /* modern soft square */
        box-shadow: 0 3px 8px rgba(0, 20, 40, 0.15);
        flex-shrink: 0;
        /* never shrink the logo */
    }

    /* vertical divider – clean line */
    .vertical-line {
        width: 2px;
        height: 28px;
        background: linear-gradient(180deg, white 0%, #f28669 80%);
        border-radius: 2px;
        flex-shrink: 0;
    }

    /* company tagline – hidden only if absolutely no space, but we protect it */
    .tagline {
        font-size: 1rem;
        font-weight: 500;
        color: white;
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
        /* prevents collision with button on 320px screens */
    }

    /* RIGHT SIDE: button */
    .nav-right {
        flex-shrink: 0;
        /* button never shrinks */
        margin-left: 0.5rem;
        /* safe distance from tagline */
    }

    .action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #1e3a5f;
        /* deep trustworthy blue */
        color: white;
        font-size: 0.95rem;
        font-weight: 600;
        padding: 0.6rem 1.2rem;
        border: none;
        border-radius: 40px;
        /* pill shape – modern mobile */
        box-shadow: 0 4px 8px rgba(0, 40, 80, 0.12);
        letter-spacing: 0.3px;
        text-decoration: none;
        transition: background 0.2s, transform 0.1s;
        white-space: nowrap;
        cursor: pointer;
        /* even if it's a div, feels clickable */
        line-height: 1.2;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .action-btn:hover {
        background: #143048;
        /* subtle darken (but hover is rare on mobile) */
    }

    .action-btn:active {
        transform: scale(0.96);
        /* mobile tap feedback */
        background: #0f293f;
    }

    /* ===== DESKTOP: main gradient navbar only ===== */
    @media screen and (min-width: 769px) {
        .mobile-navbar {
            display: none !important;
        }

        :root {
            --site-header-offset: 80px;
        }
    }

    /* extra smoothness for extremely small phones (<=360px) */
    @media screen and (max-width: 360px) {
        .tagline {
            max-width: 110px;
            /* keep tagline readable, avoid overflow */
            font-size: 0.9rem;
        }

        .logo {
            width: 34px;
            height: 34px;
            font-size: 1.1rem;
        }

        .vertical-line {
            height: 24px;
        }

        .action-btn {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
        }
    }

    /* ===== MOBILE: compact top bar only (bottom nav handles links) ===== */
    @media screen and (max-width: 768px) {
        .gradient-nav-wrapper {
            display: none !important;
        }

        :root {
            --site-header-offset: 70px;
        }

        .top-thin-bar {
            display: none;
        }
    }

    #MobileNavlogo {
        width: 49px;
    }

















    /* From Uiverse.io by Nawsome */
    .continue-application2 {
        --color: #fff;
        --background: #64625f;
        --background-hover: #f28669;
        --background-left: #eeeae3;
        --folder: #F3E9CB;
        --folder-inner: #BEB393;
        --paper: #FFFFFF;
        --paper-lines: #BBC1E1;
        --paper-behind: #E1E6F9;
        --pencil-cap: #fff;
        --pencil-top: #275EFE;
        --pencil-middle: #fff;
        --pencil-bottom: #5C86FF;
        --shadow: rgba(13, 15, 25, .2);
        border: none;
        outline: none;
        cursor: pointer;
        position: relative;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 400;
        line-height: 9px;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        padding: 17px 25px 17px 65px;
        transition: background 0.3s;
        color: var(--color);
        background: var(--bg, var(--background));
    }

    .continue-application2>div {
        top: 0;
        left: 0;
        bottom: 0;
        width: 45px;
        position: absolute;
        overflow: hidden;
        border-radius: 5px 0 0 5px;
        background: var(--background-left);
    }

    .continue-application2>div .folder {
        width: 23px;
        height: 27px;
        position: absolute;
        left: 11px;
        top: 9px;
    }

    .continue-application2>div .folder .top {
        left: 0;
        top: 0;
        z-index: 2;
        position: absolute;
        transform: translateX(var(--fx, 0));
        transition: transform 0.4s ease var(--fd, 0.3s);
    }

    .continue-application2>div .folder .top svg {
        width: 24px;
        height: 27px;
        display: block;
        fill: var(--folder);
        transform-origin: 0 50%;
        transition: transform 0.3s ease var(--fds, 0.45s);
        transform: perspective(120px) rotateY(var(--fr, 0deg));
    }

    .continue-application2>div .folder:before,
    .continue-application2>div .folder:after,
    .continue-application2>div .folder .paper {
        content: "";
        position: absolute;
        left: var(--l, 0);
        top: var(--t, 0);
        width: var(--w, 100%);
        height: var(--h, 100%);
        border-radius: 1px;
        background: var(--b, var(--folder-inner));
    }

    .continue-application2>div .folder:before {
        box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);
        transform: translateX(var(--fx, 0));
        transition: transform 0.4s ease var(--fd, 0.3s);
    }

    .continue-application2>div .folder:after,
    .continue-application2>div .folder .paper {
        --l: 1px;
        --t: 1px;
        --w: 21px;
        --h: 25px;
        --b: var(--paper-behind);
    }

    .continue-application2>div .folder:after {
        transform: translate(var(--pbx, 0), var(--pby, 0));
        transition: transform 0.4s ease var(--pbd, 0s);
    }

    .continue-application2>div .folder .paper {
        z-index: 1;
        --b: var(--paper);
    }

    .continue-application2>div .folder .paper:before,
    .continue-application2>div .folder .paper:after {
        content: "";
        width: var(--wp, 14px);
        height: 2px;
        border-radius: 1px;
        transform: scaleY(0.5);
        left: 3px;
        top: var(--tp, 3px);
        position: absolute;
        background: var(--paper-lines);
        box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);
    }

    .continue-application2>div .folder .paper:after {
        --tp: 6px;
        --wp: 10px;
    }

    .continue-application2>div .pencil {
        height: 2px;
        width: 3px;
        border-radius: 1px 1px 0 0;
        top: 8px;
        left: 105%;
        position: absolute;
        z-index: 3;
        transform-origin: 50% 19px;
        background: var(--pencil-cap);
        transform: translateX(var(--pex, 0)) rotate(35deg);
        transition: transform 0.4s ease var(--pbd, 0s);
    }

    .continue-application2>div .pencil:before,
    .continue-application2>div .pencil:after {
        content: "";
        position: absolute;
        display: block;
        background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));
        width: var(--w, 5px);
        height: var(--h, 20px);
        border-radius: var(--br, 2px 2px 0 0);
        top: var(--t, 2px);
        left: var(--l, -1px);
    }

    .continue-application2>div .pencil:before {
        -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
        clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
    }

    .continue-application2>div .pencil:after {
        --b: none;
        --w: 3px;
        --h: 6px;
        --br: 0 2px 1px 0;
        --t: 3px;
        --l: 3px;
        border-top: 1px solid var(--pencil-top);
        border-right: 1px solid var(--pencil-top);
    }

    /* .continue-application2:before,
    .continue-application2:after {
        content: "";
        position: absolute;
        width: 10px;
        height: 2px;
        border-radius: 1px;
        background: var(--color);
        transform-origin: 9px 1px; */
    /* transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg)); */
    /* top: 26px;
        right: 16px;
        transition: transform 0.3s;
    } */

    /* .continue-application2:after {
        --r: 45deg;
    } */

    .continue-application2:hover {
        --cx: 2px;
        --bg: var(--background-hover);
        --fx: -40px;
        --fr: -60deg;
        --fd: .15s;
        --fds: 0s;
        --pbx: 3px;
        --pby: -3px;
        --pbd: .15s;
        --pex: -24px;
    }


















    /* From Uiverse.io by Gaurang7717 */
    .WABtn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 45px;
        height: 45px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        position: fixed;
        overflow: hidden;
        transition-duration: 0.3s;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
        background-color: #fdfcfc;
        z-index: 9000;
        bottom: 30px;
        left: 30px;
    }

    .sign {
        width: 100%;
        transition-duration: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sign svg {
        width: 25px;
    }

    .sign svg path {
        fill: #8ed55a;
    }

    .text {
        position: absolute;
        right: 0%;
        width: 0%;
        opacity: 0;
        color: #8ed55a;
        font-size: 1.2em;
        font-weight: 600;
        transition-duration: 0.3s;
    }

    .WABtn:hover {
        width: 150px;
        border-radius: 40px;
        transition-duration: 0.3s;
    }

    .WABtn:hover .sign {
        width: 30%;
        transition-duration: 0.3s;
        padding-left: 10px;
    }

    .WABtn:hover .text {
        opacity: 1;
        width: 70%;
        transition-duration: 0.3s;
        padding-right: 10px;
    }

    .WABtn:active {
        transform: translate(2px, 2px);
    }



















    /* 🌙 bottom navbar – hidden on desktop, visible only on mobile */
    .bottom-nav {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        padding: 0.5rem 0.5rem 0.7rem;
        z-index: 9999;
        box-sizing: border-box;
        padding-bottom: env(safe-area-inset-bottom, 0.7rem);
    }

    /* nav row – flex grid */
    .nav-items {
        display: flex;
        justify-content: space-around;
        align-items: center;
        max-width: 500px;
        margin: 0 auto;
    }

    /* each icon + label */
    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #6b6b8b;
        font-size: 0.7rem;
        font-weight: 500;
        transition: color 0.15s ease;
        gap: 4px;
        padding: 0.1rem 0.2rem;
        flex: 1;
        max-width: 70px;
    }

    .nav-item i {
        font-size: 1.9rem;
        /* phosphor icons scale nicely */
        line-height: 1;
        transition: transform 0.1s;
    }

    /* active state (just for demo, you can toggle with js if needed) */
    .nav-item.active {
        color: #1e2b4f;
        font-weight: 600;
    }

    .nav-item.active i {
        color: #29448b;
    }

    /* subtle tap feedback */
    .nav-item:active {
        opacity: 0.7;
    }

    /* desktop breakpoint: navbar disappears above 640px (typical mobile threshold) */
    @media (min-width: 641px) {
        .bottom-nav {
            display: none !important;
        }
    }

    @media (max-width: 640px) {
        .bottom-nav {
            display: block !important;
            bottom: 0 !important;
            /* ensure it never hides or shifts */
        }

        /* optional: add a little extra spacing to content so navbar doesn't overlap */
        body {
            padding-bottom: 85px;
            /* room for fixed navbar + safe area */
        }

        /* Reposition and resize buttons above bottom navbar */
        .perfect-round-arrow {
            width: 2.2rem;
            height: 2.2rem;
            bottom: 100px;
            right: 1.2rem;
        }

        .arrow-above-fix {
            width: 0.9rem;
            height: 0.9rem;
            border-width: 0 3px 3px 0;
            margin-top: 3px;
        }

        .WABtn {
            width: 35px;
            height: 35px;
            bottom: 100px;
            left: 1.2rem;
        }

        .WABtn .sign svg {
            width: 20px;
        }

        .WABtn:hover {
            width: 120px;
        }

        .info-chip-fix {
            bottom: 150px;
            right: 1.2rem;
        }

    /* UPI App Style Tiles - High Density Grid */
    @media (max-width: 640px) {
        .card-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px 8px;
            padding: 1.5rem 1rem;
            margin: 0;
            max-width: 100%;
            background: white;
            border-radius: 24px 24px 0 0;
            box-shadow: 0 -10px 25px rgba(0,0,0,0.03);
        }

        .card-grid .card {
            background: none;
            box-shadow: none;
            padding: 0;
            border: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            width: 100%;
            height: auto;
        }

        .card-grid .card i {
            width: 54px;
            height: 54px;
            background: #fdf2e9;
            color: #b95f1a;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            margin: 0;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(185, 95, 26, 0.08);
        }

        .card-grid .card span {
            font-size: 0.72rem;
            font-weight: 500;
            color: #4a3728;
            text-align: center;
            line-height: 1.2;
            word-break: break-word;
            max-width: 100%;
        }

        .card-grid .card:active i {
            transform: scale(0.9);
            background: #fce8d5;
        }
    }

        .card {
            width: 65px;
            height: 65px;
            /* border-radius: 5px; */
            /* slightly more rounded for an app look */
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.04);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: transform 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        /* App-like tap feedback */
        .card:active {
            transform: scale(0.92);
            background-color: #f8f9fa;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
        }

        .card i {
            font-size: 1.5rem;
            margin-bottom: 0.15rem;
            color: #2c3e50;
            /* slight darkening for better contrast */
        }

        .card span {
            font-size: 0.5rem;
            font-weight: 500;
            padding: 0;
            margin-top: 1px;
            color: #5d6d7e;
            text-align: center;
            max-width: 90%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    /* very small devices (optional) */
    @media (max-width: 360px) {
        .nav-item i {
            font-size: 1.7rem;
        }

        .nav-item span {
            font-size: 0.65rem;
        }
    }

    /* ============================================================
       MODERN ANIMATED LOGO LOADER
       ============================================================ */
    #logo-loader {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    #logo-loader.active {
        opacity: 1;
        visibility: visible;
    }

    .loader-content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .loader-logo-wrapper {
        position: relative;
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loader-logo {
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 2;
        animation: logoPulse 2s ease-in-out infinite;
    }

    /* Spinning outer ring */
    .loader-ring {
        position: absolute;
        inset: -10px;
        border: 4px solid transparent;
        border-top-color: #f28669;
        border-right-color: #343330;
        border-radius: 50%;
        animation: ringSpin 1.5s linear infinite;
        z-index: 1;
    }

    .loader-text {
        font-family: "Bakbak One", sans-serif;
        font-size: 1.2rem;
        color: #343330;
        letter-spacing: 1px;
        text-transform: uppercase;
        animation: fadeText 1.5s ease-in-out infinite alternate;
    }

    @keyframes logoPulse {

        0%,
        100% {
            transform: scale(1);
            filter: drop-shadow(0 0 0px rgba(242, 134, 105, 0));
        }

        50% {
            transform: scale(1.1);
            filter: drop-shadow(0 0 15px rgba(242, 134, 105, 0.5));
        }
    }

    @keyframes ringSpin {
        0% {
            transform: rotate(0deg);
        }

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

    @keyframes fadeText {
        from {
            opacity: 0.5;
            transform: translateY(0);
        }

        to {
            opacity: 1;
            transform: translateY(-5px);
        }
    }




























    /* modern card grid */
    .card-grid {
        display: flex;
        flex-wrap: nowrap;
        /* Force single row */
        gap: 1.5rem;
        /* slightly reduced gap to fit better on mid-size screens */
        justify-content: center;
        align-items: center;
        max-width: 1400px;
        /* increased to fit 7 cards + gaps */
        margin: 1rem auto;
        /* slightly reduced margin to account for increased padding */
        padding: 2.5rem 1rem;
        /* Increased vertical padding to prevent top/bottom clipping on hover */
        overflow: visible;
        /* Ensure hover effects are never clipped */
        position: relative;
    }

    /* each card is a semantic <a> (ref link) with built-in hover animation */
    .card-link {
        text-decoration: none;
        color: inherit;
        display: block;
        /* Remove redundant transitions and will-change from link wrapper */
    }

    /* main card div – modern minimal glass shape */
    .card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 150px;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 16px;
        box-shadow: 0 10px 20px -5px rgba(0, 10, 30, 0.1);
        /* Lighter initial shadow for smoother performance */
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            box-shadow 0.3s ease,
            background 0.3s ease,
            border-color 0.3s ease;
        cursor: pointer;
        will-change: transform, box-shadow;
        /* Pre-inform browser of upcoming changes for GPU acceleration */
    }

    /* icon style */
    .card i {
        font-size: 3.4rem;
        margin-bottom: 0.65rem;
        color: #1e2b4f;
        transition: transform 0.25s ease, color 0.25s;
        filter: drop-shadow(0 6px 8px rgba(0, 20, 40, 0.1));
    }

    /* name style */
    .card span {
        font-weight: 550;
        font-size: 0.8rem;
        letter-spacing: 0.02em;
        color: #17212f;
        background: rgba(255, 255, 255, 0.35);
        padding: 0.35rem 1rem;
        border-radius: 60px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    /* ---- MODERN HOVER EFFECT (lift + glow + micro morph) ---- */
    .card-link:hover .card {
        transform: translateY(-8px) scale(1.02);
        /* Reduced lift for better balance and no clipping */
        background: rgba(255, 255, 255, 0.85);
        border-color: #f28669;
        box-shadow: 0 20px 40px -10px rgba(28, 52, 84, 0.3);
        /* Refined shadow for better performance */
    }

    .card-link:hover .card i {
        transform: scale(1.15) translateY(-4px);
        color: #182848;
        /* deeper navy */
    }

    .card-link:hover .card span {
        background: #ffffffcc;
        border-color: #ffffff;
        color: #0b1b2f;
        backdrop-filter: blur(8px);
        font-weight: 600;
    }

    /* active / click feedback */
    .card-link:active .card {
        transform: scale(0.97) translateY(-2px);
        transition: all 0.08s;
    }

    /* optional focus ring for accessibility */
    .card-link:focus-visible {
        outline: 2px solid #305f8a;
        outline-offset: 8px;
        border-radius: 40px;
    }

    /* make it responsive & small-screen friendly */
    @media (max-width: 500px) {
        .card-grid {
            gap: 1.3rem;
        }

        .card {
            width: 140px;
            height: 160px;
            border-radius: 28px;
        }

        .card i {
            font-size: 2.8rem;
        }

        .card span {
            font-size: 1rem;
            padding: 0.25rem 0.75rem;
        }
    }

    /* --- Modern Info Section --- */
    .info-section {
        max-width: 1300px;
        margin: 3rem auto;
        padding: 2.5rem;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
        box-shadow: 0 20px 40px -15px rgba(120, 60, 30, 0.15);
        border: 1px solid rgba(255, 225, 195, 0.7);
    }

    .info-content {
        flex: 1;
    }

    .info-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: #4a2a14;
        margin-bottom: 1.2rem;
        background: linear-gradient(135deg, #b95f1a, #7b3f00);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .info-text {
        font-size: 1.15rem;
        line-height: 1.8;
        color: #5f4a36;
        font-weight: 500;
    }

    .info-image-wrapper {
        flex-shrink: 0;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        padding: 10px;
        background: linear-gradient(135deg, #fceadd, #f7ceb2);
        box-shadow: 0 15px 35px rgba(180, 100, 40, 0.2);
        transition: transform 0.3s ease;
    }

    .info-image-wrapper:hover {
        transform: translateY(-5px);
    }

    .info-round-image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid white;
    }

    @media (max-width: 900px) {
        .info-section {
            flex-direction: column;
            text-align: center;
            padding: 2rem;
            gap: 2rem;
            margin: 2rem 1rem;
        }

        .info-title {
            font-size: 1.8rem;
        }

        .info-image-wrapper {
            width: 250px;
            height: 250px;
        }
    }

    /* --- Calendar Banner --- */
    .calendar-banner {
        max-width: 1300px;
        margin: 2rem auto 4rem;
        background: linear-gradient(135deg, #4a2a14, #7b4317);
        border-radius: 24px;
        padding: 1.5rem 2rem;
        display: flex;
        align-items: center;
        gap: 1.5rem;
        color: white;
        box-shadow: 0 15px 35px -10px rgba(74, 42, 20, 0.4);
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .calendar-banner::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 250px;
        height: 250px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        filter: blur(40px);
    }

    .calendar-banner:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px -10px rgba(74, 42, 20, 0.5);
    }

    .calendar-icon-box {
        width: 60px;
        height: 60px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.2rem;
        backdrop-filter: blur(8px);
    }

    .calendar-text h3 {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 0.2rem;
    }

    .calendar-text p {
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.8);
    }

    .corner-arrow {
        margin-left: auto;
        font-size: 1.8rem;
        color: rgba(255, 255, 255, 0.6);
        transition: transform 0.3s ease;
    }

    .calendar-banner:hover .corner-arrow {
        transform: translateX(5px);
        color: white;
    }

    @media(max-width: 600px) {
        .calendar-banner {
            flex-direction: column;
            text-align: center;
            padding: 1.5rem;
            margin: 1.5rem 1rem 3rem;
        }

        .corner-arrow {
            display: none;
        }
    }

    /* --- Calendar Modal --- */
    .calendar-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .calendar-modal-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

    .calendar-modal {
        width: 90%;
        max-width: 1000px;
        height: 85vh;
        background: #fff8f0;
        border-radius: 28px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
        transform: scale(0.95) translateY(20px);
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .calendar-modal-overlay.show .calendar-modal {
        transform: scale(1) translateY(0);
    }

    .c-modal-header {
        padding: 1rem 1.5rem;
        background: white;
        border-bottom: 1px solid rgba(200, 150, 100, 0.3);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .c-modal-header h3 {
        font-size: 1.2rem;
        color: #4a2a14;
        font-weight: 700;
    }

    .c-header-actions {
        display: flex;
        gap: 12px;
    }

    .c-header-actions button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: #faeede;
        color: #a45a27;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .c-header-actions button:hover {
        background: #f28669;
        color: white;
    }

    .c-header-actions .c-close {
        background: #ffdbdb;
        color: #c92a2a;
    }

    .c-header-actions .c-close:hover {
        background: #fc3c3c;
        color: white;
    }

    .c-modal-body {
        flex: 1;
        background: #e8e8e8;
        padding: 0;
        position: relative;
    }

    /* --- MODERN SCHEME MARQUEE --- */
    .scheme-marquee-section {
        padding: 5rem 0;
        background: #fdfaf5;
        overflow: hidden;
        border-top: 1px solid rgba(120, 60, 30, 0.05);
        border-bottom: 1px solid rgba(120, 60, 30, 0.05);
    }

    .marquee-title {
        text-align: center;
        font-family: "Bakbak One", sans-serif;
        font-size: 2.5rem;
        color: #343330;
        margin-bottom: 3.5rem;
        position: relative;
    }

    .marquee-title::after {
        content: "";
        position: absolute;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 4px;
        background: #f28669;
        border-radius: 10px;
    }

    .scheme-marquee {
        display: flex;
        gap: 2.5rem;
        padding: 1rem 0;
    }

    .scheme-track {
        display: flex;
        gap: 2.5rem;
        animation: scroll-schemes 45s linear infinite;
        will-change: transform;
    }

    .scheme-track:hover {
        animation-play-state: paused;
    }

    @keyframes scroll-schemes {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-50% - 1.25rem)); }
    }

    .scheme-card {
        width: 380px;
        height: 160px;
        background: white;
        border-radius: 24px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(100, 50, 10, 0.07);
        transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
        border: 1px solid rgba(200, 150, 100, 0.12);
        display: flex;
        align-items: center;
        gap: 0;
        text-decoration: none;
        color: inherit;
        flex-shrink: 0;
    }

    .scheme-card:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 20px 40px rgba(100, 50, 10, 0.13);
        border-color: rgba(242, 134, 105, 0.35);
    }

    .scheme-icon-wrap {
        width: 100px;
        min-width: 100px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px 0 0 24px;
        font-size: 2.6rem;
        transition: transform 0.3s ease;
    }

    .scheme-card:hover .scheme-icon-wrap {
        transform: scale(1.08);
    }

    .scheme-card-body {
        flex: 1;
        padding: 1rem 0.8rem;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        overflow: hidden;
    }

    .scheme-card-body h4 {
        font-size: 1.05rem;
        font-weight: 700;
        color: #2a1f14;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .scheme-card-body p {
        font-size: 0.82rem;
        color: #6b5040;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .scheme-arrow {
        font-size: 1.4rem;
        color: #c07a50;
        margin-right: 1.2rem;
        margin-left: 0.4rem;
        flex-shrink: 0;
        transition: transform 0.3s ease, color 0.3s ease;
    }

    .scheme-card:hover .scheme-arrow {
        transform: translateX(4px);
        color: #f28669;
    }


    @media (max-width: 768px) {
        .marquee-title {
            font-size: 1.8rem;
            margin-bottom: 2.5rem;
        }
        .scheme-card {
            width: 300px;
            height: 120px;
            border-radius: 18px;
        }
        .scheme-icon-wrap {
            width: 80px;
            min-width: 80px;
            font-size: 2rem;
        }
        .scheme-card-body h4 {
            font-size: 0.95rem;
        }
        .scheme-card-body p {
            font-size: 0.75rem;
        }
        .scheme-arrow {
            font-size: 1.2rem;
            margin-right: 0.8rem;
        }
    }

    /* ========== DONATION BANNER SECTION ========== */
    .donation-banner-section {
        background: linear-gradient(135deg, #fff8f0 0%, #ffe8d6 100%);
        padding: 2rem 2rem;
        position: relative;
        overflow: hidden;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .donation-banner-section::before {
        content: '';
        position: absolute;
        top: 0;
        right: -100px;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(242, 134, 105, 0.1) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

    .donation-banner-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        z-index: 10;
        opacity: 1 !important;
    }

    .donation-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: #2a1f15;
        text-align: center;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
        letter-spacing: -0.02em;
        opacity: 1 !important;
    }

    .donation-title i {
        font-size: 2rem;
        color: #b95f1a;
    }

    .donation-content {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 1.5rem;
        margin-bottom: 1rem;
        opacity: 1 !important;
        visibility: visible !important;
    }

    @media (max-width: 768px) {
        .donation-content {
            grid-template-columns: 1fr;
            gap: 1rem;
        }
    }

    .donation-card {
        background: #fffbf6;
        border-radius: 20px;
        padding: 1.4rem;
        border: 2px solid #f5d4c1;
        box-shadow: 0 10px 30px rgba(185, 95, 26, 0.15);
        transition: all 0.3s ease;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .donation-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 40px rgba(185, 95, 26, 0.15);
        border-color: rgba(255, 180, 120, 0.8);
    }

    .card-header {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 1.2rem;
        padding-bottom: 0.8rem;
        border-bottom: 2px solid rgba(242, 134, 105, 0.2);
        justify-content: space-between;
    }

    .card-header i {
        font-size: 1.6rem;
        color: #b95f1a;
    }

    .card-header span {
        font-size: 1.15rem;
        font-weight: 600;
        color: #3e2c1c;
        flex: 1;
    }

    .copy-all-btn {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* UPI Details */
    .upi-details {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* QR Code Area */
    .qr-code-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
        padding: 1rem;
        background: #fef5ed;
        border-radius: 14px;
        border: 2px solid #f5d4c1;
        transition: all 0.3s ease;
    }

    .qr-code-area:hover {
        border-color: #f28669;
        background: #fef0e8;
    }

    .qr-code-image {
        width: 220px;
        height: 220px;
        border-radius: 10px;
        object-fit: cover;
        border: 2px solid rgba(255, 200, 150, 0.5);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .qr-upload-input {
        display: none;
    }

    .detail-item {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.8rem;
        background: #fef5ed;
        border-radius: 12px;
        border: 1px solid #f5d4c1;
        opacity: 1 !important;
    }

    .detail-item .label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #6b5240;
        white-space: nowrap;
        opacity: 1 !important;
    }

    .detail-item .value {
        font-size: 0.9rem;
        font-weight: 700;
        color: #2a1f15;
        flex: 1;
        word-break: break-all;
        opacity: 1 !important;
    }
    .copy-mini-btn {
        background: white;
        border: 1.5px solid #f28669;
        border-radius: 8px;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1rem;
        color: #b95f1a;
        transition: all 0.2s ease;
        flex-shrink: 0;
        padding: 0;
        line-height: 1;
        min-width: 38px;
    }

    .copy-mini-btn i {
        font-size: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1em;
        height: 1em;
    }

    .copy-mini-btn:hover {
        background: #f28669;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(242, 134, 105, 0.3);
    }

    .copy-mini-btn:active {
        transform: translateY(0);
    }

    /* Toast Notification Styles */
    .toast-notification {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        background: linear-gradient(135deg, #343330 0%, #343330 100%);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(52, 51, 48, 0.4);
        display: flex;
        align-items: center;
        gap: 1rem;
        font-weight: 500;
        font-size: 0.95rem;
        z-index: 9999;
        animation: slideInToast 0.3s ease-out;
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .toast-notification.success {
        background: linear-gradient(135deg, #343330 0%, #343330 100%);
        box-shadow: 0 8px 24px rgba(52, 51, 48, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .toast-notification i {
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    @keyframes slideInToast {
        from {
            opacity: 0;
            transform: translateX(400px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes slideOutToast {
        from {
            opacity: 1;
            transform: translateX(0);
        }
        to {
            opacity: 0;
            transform: translateX(400px);
        }
    }

    .toast-notification.hide {
        animation: slideOutToast 0.3s ease-out forwards;
    }

    @media (max-width: 768px) {
        .toast-notification {
            bottom: 100px;
            right: 1rem;
            left: 1rem;
            padding: 0.9rem 1.2rem;
            font-size: 0.9rem;
            z-index: 100000000;
        }
    }

    /* Bank Details */
    .bank-details {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
    }

    .detail-row {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.8rem;
        background: #fef5ed;
        border-radius: 12px;
        border: 1px solid #f5d4c1;
        font-size: 0.9rem;
        opacity: 1 !important;
    }

    .detail-row .label {
        font-weight: 700;
        color: #6b5240;
        min-width: 90px;
        opacity: 1 !important;
    }

    .detail-row .value {
        flex: 1;
        color: #2a1f15;
        font-weight: 700;
        word-break: break-word;
        opacity: 1 !important;
    }

    .notice-content {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 0.95rem;
        color: #3e2c1c;
        font-weight: 500;
        line-height: 1.5;
    }

    .notice-content i {
        font-size: 1.4rem;
        color: #1f8b4c;
        flex-shrink: 0;
    }

    @media (max-width: 768px) {
        .donation-banner-section {
            padding: 1.5rem 1rem;
        }

        .donation-title {
            font-size: 1.4rem;
            margin-bottom: 1.2rem;
        }

        .donation-card {
            padding: 1.2rem;
        }

        .detail-item,
        .detail-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.6rem;
            padding: 0.6rem;
        }

        .qr-code-image {
            width: 100%;
            max-width: 220px;
            height: auto;
            aspect-ratio: 1 / 1;
            object-fit: contain;
        }

        .qr-code-area {
            padding: 0.8rem;
        }

        .copy-mini-btn {
            align-self: flex-end;
            width: 28px;
            height: 28px;
            font-size: 0.75rem;
        }

        .notice-content {
            font-size: 0.85rem;
            gap: 0.8rem;
        }

        .card-header span {
            font-size: 1rem;
        }
    }

/* ========================================= */
/* NOTICES SECTION STYLES                    */
/* ========================================= */
.notices-section {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 2rem;
}

/* ============================================================
   HIDE TOP THIN BAR (global)
   ============================================================ */
/* Remove the thin top bar visually on all pages without editing HTML */
#thinTopBar,
.top-thin-bar {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

.notices-section h2 {
  font-size: 1.6rem;
  color: #b95f1a;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 2px solid #ffe0c8;
  padding-bottom: 0.5rem;
}
.notices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.notice-card {
  background: white;
  border-left: 4px solid #b95f1a;
  padding: 1.5rem;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  margin-bottom: 1.5rem;
  transition: transform 0.2s ease;
}
.notice-card:hover {
  transform: translateX(5px);
}
.notice-date {
  font-size: 0.85rem;
  color: #b95f1a;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: inline-block;
  background: #fff3e9;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
}
.notice-title {
  font-size: 1.1rem;
  color: #3d2b1a;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}
.notice-desc {
  font-size: 0.95rem;
  color: #5f4a36;
  margin: 0;
  line-height: 1.5;
}
.notice-important {
  border-left-color: #dc2626;
}
.notice-important .notice-date {
  color: #dc2626;
  background: #fee2e2;
}

/* ========================================= */
/* PDF MODAL STYLES                          */
/* ========================================= */
.pdf-modal-overlay {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.85);
  backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
}
.pdf-modal-container {
  position: relative;
  width: 95%;
  max-width: 1000px;
  height: 90vh;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  animation: modalSlideUp 0.3s ease;
}
@keyframes modalSlideUp {
  from {transform: translateY(30px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
.pdf-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #fcf9f6;
  border-bottom: 1px solid #eee;
}
.pdf-modal-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #3d2b1a;
  margin: 0;
}
.pdf-modal-actions {
  display: flex;
  gap: 1rem;
}
.pdf-modal-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #5f4a36;
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdf-modal-btn:hover {
  color: #b95f1a;
}
.pdf-modal-body {
  flex: 1;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
}

/* ==========================================
   ULTIMATE MOBILE OPTIMIZATION OVERRIDES
   ========================================== */
@media (max-width: 768px) {
    /* Global Overflow Fix */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }

    /* UPI Style Tiles for Card Grid */
    .card-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px 8px !important;
        padding: 1.5rem 0.8rem !important;
        margin: 1.5rem 0 !important;
        background: white !important;
        border-radius: 24px 24px 0 0 !important;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.05) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: wrap !important; /* Fallback if display:grid fails */
    }

    .card-link {
        width: 100% !important;
    }

    .card-grid .card {
        width: 100% !important;
        height: auto !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        padding: 0 !important;
    }

    .card-grid .card i {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
        background: #fdf2e9 !important;
        color: #b95f1a !important;
        border-radius: 14px !important;
        margin-bottom: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 10px rgba(185, 95, 26, 0.1) !important;
    }

    .card-grid .card span {
        font-size: 0.7rem !important;
        background: none !important;
        padding: 0 !important;
        border: none !important;
        color: #4a3728 !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        backdrop-filter: none !important;
    }

    /* Marquee Fixes */
    .scheme-marquee-section {
        padding: 3rem 0 !important;
    }
    .scheme-marquee {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    .marquee-title {
        font-size: 1.6rem !important;
        margin-bottom: 2rem !important;
    }
    .scheme-card {
        width: 260px !important;
        height: 100px !important;
    }
    .scheme-icon-wrap {
        width: 70px !important;
        min-width: 70px !important;
        font-size: 1.8rem !important;
    }

    /* Footer minimalist fix */
    .footer-grid {
        display: none !important;
    }
    .footer-brand {
        flex-direction: column !important;
        align-items: flex-end !important; /* Align to right side as requested */
        text-align: right !important;
        padding-bottom: 2rem !important;
    }
    .brand-marathi {
        align-items: flex-end !important;
        gap: 0.8rem !important; /* Spacing between lines */
    }
    .brand-marathi p {
        font-size: 2.8rem !important; /* Further increased font size */
        text-align: right !important;
        opacity: 1 !important; /* Fully visible */
        line-height: 1.1 !important;
    }
    .footer-logo {
        opacity: 0.2 !important; /* Back to original opacity */
        pointer-events: none !important; /* Remove hover interaction */
    }
    .footer-logo:hover {
        opacity: 0.2 !important; /* Prevent change on hover */
    }
    .footer-bottom-content {
        justify-content: center !important;
        text-align: center !important;
    }
    .legal-links {
        display: none !important;
    }

    /* Slideshow Fix - No Zoom, No Black Bars, No Shadow */
    .slideshow {
        aspect-ratio: 16 / 10 !important; /* Slightly taller for better content display */
        height: auto !important;
        box-shadow: none !important; /* Remove shadow as requested */
        background: transparent !important;
    }
    .slide {
        object-fit: cover !important; /* Fill space without black bars */
        object-position: center 20% !important; /* Focus slightly higher (good for team/faces) */
        background: transparent !important;
    }

    /* Modern Square Shape Bottom Nav - WHITE */
    .bottom-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 75px !important;
        background: #ffffff !important; 
        z-index: 99999999 !important;
        box-shadow: 0 -8px 30px rgba(0,0,0,0.08) !important;
        border-top: 1px solid #e0e0e0 !important;
        padding: 0 10px !important;
        border-radius: 0 !important; /* Square shape */
    }

    .bottom-nav .nav-items {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: space-around !important;
        gap: 0 !important;
    }

    .bottom-nav .nav-item {
        color: #555555 !important;
        border-radius: 0 !important;
        padding: 10px 5px !important;
        transition: background 0.2s !important;
    }

    .bottom-nav .nav-item i {
        font-size: 1.6rem !important;
        color: #b95f1a !important; /* Branding color */
    }

    .bottom-nav .nav-item span {
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-top: 4px !important;
    }

    .bottom-nav .nav-item.active {
        background: #fdf2e9 !important; /* Subtle highlight */
    }

    .bottom-nav .nav-item.active i, 
    .bottom-nav .nav-item.active span {
        color: #b95f1a !important;
    }

    /* toast sits above the bottom nav: ensure body bottom padding accommodates both */
    body {
        padding-bottom: 110px !important;
    }
}