﻿@charset "UTF-8";
/* Consolidated from inline <style> blocks in Home/Index.cshtml.
   Moved out so markup is W3C-valid (style only allowed in <head>) and CSP-clean.
   Order preserved; blocks target distinct components so cascade is unchanged. */

    .hero-section {
    position: relative;
    width: 100%;
    min-height: 70vh;
    overflow: hidden;
}

.hero-img,
.hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
     background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.custom-link {
    display: inline;     /* NOT flex */
    text-decoration: none;
    color: inherit;
}

.new-blink-indicator {
    color: red;
    font-weight: 600;
}

/* Tablet */
@media (max-width: 991px) {
    .hero-section {
        min-height: 55vh;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .hero-section {
        min-height: 45vh;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    .hero-section {
        min-height: auto;
        aspect-ratio: 16 / 9; /* ✅ perfect for all mobiles */
    }
}

/* Extra Small Devices */
@media (max-width: 400px) {
    .hero-section {
        aspect-ratio: 4 / 3;
    }
}

  
/* Tablet */
@media (max-width: 768px) {
    .hero-section {
        height: 50vh;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .hero-section {
        height: 150vh;
    }
}

/* Small mobile */
@media (max-width: 400px) {
    .hero-section {
        height: 203vh;
    }
}

    .hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    .read {
    }

    .small-close-btn {
        position: absolute;
        transform: scale(0.7);
        top: -15px !important;
        right: -13px !important;
    }

    .new-blink-indicator {
        background-color: #a80000; /* WCAG AAA: white text ≈ 8.5:1 (was #cc0000 = 5.9, AA only) */
        color: white;
        font-size: 12px; /* GIGW: minimum readable size (was 10px) */
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 12px;
        animation: blinkAnimation 1s infinite; /* Apply blinking animation */
        margin-left: 8px; /* Space from the link text */
        white-space: nowrap; /* Prevent "NEW" from wrapping */
        min-width: auto;

        
    }



    .date{
        font-size:12px;
    }

    @keyframes blinkAnimation {
        0%, 49.99%   { visibility: visible; }
        50%, 99.99%  { visibility: hidden; }
        100%         { visibility: visible; }
    }

    #pills-tab {
        padding: 0;
        margin: 0;
        gap: 3px;
    }

    #pills-tab .nav-link {
        /* color: var(--text-color); */
        font-weight: 500;
    }

    #pills-tab #whats-new-heading {
        flex: 1 1 0;
        text-align: center;
        /* Match the Map button's corner design */
        border-radius: 6px;
        padding: 6px 16px;
    }

    #pills-tab .nav-link.active {
        background-color: var(--primary-color) !important;
        color: var(--nav-text) !important;
    }

    /* Separate Map button */
    #pills-tab .map-toggle-btn {
        flex: 1 1 0;
        background-color: var(--primary-color);
        color: var(--nav-text);
        border: none;
        border-radius: 6px;
        padding: 6px 16px;
        cursor: pointer;
        white-space: nowrap;
        position: relative;
        transition: background-color 0.2s ease, transform 0.15s ease;
    }

    #pills-tab .map-toggle-btn:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

    /* Blinking red "NEW" badge on the Map button (same style as Citizen Corner) */
    #pills-tab .map-toggle-btn {
        overflow: visible;
    }

    #pills-tab .map-toggle-btn .map-new-badge {
        position: absolute;
        top: 3px;
        right: 28px;
        margin-left: 0;
        z-index: 2;
    }


    /* Restore focus visibility for accessibility */
    #pills-tab .nav-link:focus-visible {
        outline: 3px solid #000 !important;
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1) !important;
    }

    #pills-tab .nav-link:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }

        * {
            box-sizing: border-box;
        }

        html {
            font-size: 14px;
        }


        /* h2 {
                        margin: 5%;
                        text-align: center;
                        font-size: 2rem;

                        font-weight: 100;
                        } */

        .timeline {
            display: flex;
            flex-direction: column;
            margin: 20px auto;
            position: relative;
        }

        .timeline__event {
            margin-bottom: 20px;
            position: relative;
            display: flex;
            margin: 20px 0;
            border-radius: 6px;
            align-self: center;
            width: 80vw;
        }

            .timeline__event:nth-child(2n+1) {
                flex-direction: row-reverse;
            }

                .timeline__event:nth-child(2n+1) .timeline__event__date {
                    border-radius: 0 6px 6px 0;
                }

                .timeline__event:nth-child(2n+1) .timeline__event__content {
                    border-radius: 6px 0 0 6px;
                }

                .timeline__event:nth-child(2n+1) .timeline__event__icon:before {
                    content: "";
                    width: 2px;
                    height: 165%;
                    background: #f6a4ec;
                    position: absolute;
                    top: 0%;
                    left: 50%;
                    right: auto;
                    z-index: -1;
                    transform: translateX(-50%);
                    -webkit-animation: fillTop 1s forwards 2s ease-in-out;
                    animation: fillTop 1s forwards 2s ease-in-out;
                }

                .timeline__event:nth-child(2n+1) .timeline__event__icon:after {
                    content: "";
                    width: 100%;
                    height: 2px;
                    background: #f6a4ec;
                    position: absolute;
                    right: 0;
                    z-index: -1;
                    top: 50%;
                    left: auto;
                    transform: translateY(-50%);
                    -webkit-animation: fillLeft 1s forwards 2s ease-in-out;
                    animation: fillLeft 1s forwards 2s ease-in-out;
                }

        .timeline__event__title {
            font-size: 1.2rem;
            line-height: 1.4;
            text-transform: uppercase;
            font-weight: 600;
            color: #9251ac;
            letter-spacing: 1.5px;
        }

        .timeline__event__content {
            padding: 13px;
            box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
            background: #fff;
            width: calc(75vw - 84px);
            border-radius: 0 6px 6px 0;
        }

        .timeline__event__date {
            color: #f6a4ec;
            font-size: 1.5rem;
            font-weight: 600;
            background: #9251ac;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            padding: 0 20px;
            border-radius: 6px 0 0 6px;
        }

        .timeline__event__icon {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9251ac;
            padding: 20px;
            align-self: center;
            margin: 0 20px;
            background: #f6a4ec;
            border-radius: 100%;
            width: 40px;
            box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
            padding: 40px;
            height: 40px;
            position: relative;
        }

            .timeline__event__icon i {
                font-size: 32px;
            }


            .timeline__event__icon:after {
                height: 250%;
                top: -150%;
            }

            .timeline__event__icon:before {
                content: "";
                width: 2px;
                height: 160px; /* Adjust until the lines visually connect */
                background: #f6a4ec;
                position: absolute;
                top: 60px; /* Pull it upward so the line overlaps both icons */
                z-index: -1;
                left: 50%;
                transform: translateX(-50%);
            }

            .timeline__event__icon:after {
                content: "";
                width: 100%;
                height: 2px;
                background: #f6a4ec;
                position: absolute;
                left: 0%;
                z-index: -1;
                top: 50%;
                transform: translateY(-50%);
                -webkit-animation: fillLeftOdd 1s forwards 2s ease-in-out;
                animation: fillLeftOdd 1s forwards 2s ease-in-out;
            }



        .timeline__event__description {
            flex-basis: 60%;
        }

        .timeline__event--type2:after {
            background: #555ac0;
        }

        .timeline__event--type2 .timeline__event__date {
            color: #87bbfe;
            background: #555ac0;
        }

        .timeline__event--type2:nth-child(2n+1) .timeline__event__icon:before,
        .timeline__event--type2:nth-child(2n+1) .timeline__event__icon:after {
            background: #87bbfe;
        }

        .timeline__event--type2 .timeline__event__icon {
            background: #87bbfe;
            color: #555ac0;
        }

            .timeline__event--type2 .timeline__event__icon:before,
            .timeline__event--type2 .timeline__event__icon:after {
                background: #87bbfe;
            }

        .timeline__event--type2 .timeline__event__title {
            color: #555ac0;
        }

        .timeline__event--type3:after {
            background: #24b47e;
        }

        .timeline__event--type3 .timeline__event__date {
            color: #aff1b6;
            background-color: #24b47e;
        }

        .timeline__event--type3:nth-child(2n+1) .timeline__event__icon:before,
        .timeline__event--type3:nth-child(2n+1) .timeline__event__icon:after {
            background: #aff1b6;
        }

        .timeline__event--type3 .timeline__event__icon {
            background: #aff1b6;
            color: #24b47e;
        }

            .timeline__event--type3 .timeline__event__icon:before,
            .timeline__event--type3 .timeline__event__icon:after {
                background: #aff1b6;
            }

        .timeline__event--type3 .timeline__event__title {
            color: #24b47e;
        }

        .timeline__event:last-child .timeline__event__icon:before {
            content: none;
        }

        @media (max-width: 786px) {
            .timeline__event {
                flex-direction: column;
                align-self: center;
            }

            .timeline__event__content {
                width: 100%;
            }

            .timeline__event__icon {
                border-radius: 6px 6px 0 0;
                width: 100%;
                margin: 0;
                box-shadow: none;
            }

                .timeline__event__icon:before,
                .timeline__event__icon:after {
                    display: none;
                }

            .timeline__event__date {
                border-radius: 0;
                padding: 20px;
            }

            .timeline__event:nth-child(2n+1) {
                flex-direction: column;
                align-self: center;
            }

                .timeline__event:nth-child(2n+1) .timeline__event__date {
                    border-radius: 0;
                    padding: 20px;
                }

                .timeline__event:nth-child(2n+1) .timeline__event__icon {
                    border-radius: 6px 6px 0 0;
                    margin: 0;
                }
        }

        @-webkit-keyframes fillLeft {
            100% {
                right: 100%;
            }
        }

        @keyframes fillLeft {
            100% {
                right: 100%;
            }
        }

        @-webkit-keyframes fillTop {
            100% {
                top: 100%;
            }
        }

        @keyframes fillTop {
            100% {
                top: 100%;
            }
        }

        @-webkit-keyframes fillLeftOdd {
            100% {
                left: 100%;
            }
        }

        @keyframes fillLeftOdd {
            100% {
                left: 100%;
            }
        }

        /*modal styles*/
        /* Modal background */
        .modal {
            display: none;
            position: fixed;
            z-index: 1001;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            width: 100% !important;
        }
        /* Modal content box */
        .modal-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 10px;
            border-radius: 8px;
            width: 100%;
            /* max-width: 500px; */
            position: relative;
        }

        /* Modal header styling */
        .modal-header {
            background-color: #ffeaa7;
            padding: 15px 20px;
            border-radius: 8px 8px 0 0;
            margin: -20px -20px 20px -20px;
        }

            .modal-header h2 {
                margin: 0;
            }

        /* Close button */
        .close {
            position: absolute;
            top: 10px;
            right: 20px;
            color: #888;
            font-size: 28px;
            cursor: pointer;
        }

            .close:hover {
                color: #000;
            }

        .header-content {
            background-color: #555ac0;
            padding: 10px;
            border-radius: 8px;
        }

        .read-more {
            /* color: #b5269f; */
            font-size: 17px;
            padding-left: 10%;
            text-decoration: underline;
            cursor: pointer;
        }
        /* --- */

        /*****24-11-2025******/
        /* Prevent horizontal scroll on mobile */
        /* html, body {
                        overflow-x: hidden;
                        } */

        /* Accordion content */
        .accordion-body {
            overflow-x: hidden;
            word-wrap: break-word;
            padding: 1rem;
        }

        /* Ensure d-flex sections wrap properly */
        .d-flex {
            /* flex-wrap: wrap; */
            /* align-items: flex-start; */
        }

        /* Make text and images stack vertically on mobile */
        @media (max-width: 768px) {
            .d-flex {
                flex-direction: column !important;
                align-items: center !important;
                text-align: center;
            }

            .accordion-body {
                padding: 0.75rem;
            }

            .about-img {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                margin: 10px 0;
            }
        }

        /* Always make images responsive */
        .about-img {
            display: block;
            width: 100%;
            max-width: 300px;
            height: auto;
            border-radius: 8px;
        }

        /* Optional: better spacing for readability */
        .accordion-body h3 {
            margin-top: 1rem;
            color: #222;
        }


        .vm-section-container {
            max-width: 750px !important; /* Your required width */
            margin: 0 auto; /* Center */
            padding: 2rem; /* Inner spacing */
            background: #ffffff; /* White bg */
            border: 2px solid #e0e0e0; /* Light border */
            border-radius: 10px; /* Rounded corners */
            box-shadow: 0px 4px 20px rgba(0,0,0,0.08); /* Soft shadow */
            max-height: 450px; /* ज्या उंचीपर्यंत हवा आहे तेवढे value दे */
            overflow-y: auto; /* scroll only vertically */
            overflow-x: hidden; /* horizontal scroll नको असल्यास */
        }

        .leadership-cards {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-bottom: 32px;
        }
        /* Visual focus indicator for about cards */
        .about-card:focus {
            outline: 3px solid #2980b9;
            outline-offset: 4px;
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(41, 128, 185, 0.4);
            z-index: 10;
        }

        #servicesGrid1 {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 12px;
        }

            #servicesGrid1 .service-btn {
                width: 100%;
            }

        /* Mobile: allow 1 column only on small screens */
        @media (max-width: 768px) {
            #servicesGrid1 {
                grid-template-columns: 1fr !important;
            }
        }

        #freeserviceVideoContainer {
            position: relative !important;
            overflow: hidden;
        }

        #serviceWidgetIconBtn {
            z-index: 5;
        }

        #serviceWidget {
            position: relative;
        }

        /****24-11-2025: service btn***/
        .service-btn-css {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            /* ✅ Responsive width control */
            width: auto;
            max-width: 320px;
            min-width: 200px;
            margin: 0 auto; /* center horizontally */

            padding: 10px 26px;
            border-radius: 32px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            font-size: 16px;
            color: #ffffff;
            background: linear-gradient(180deg, #f2a41c 0%, #d98a0f 100%);
            box-shadow: 0 10px 22px rgba(217, 138, 15, 0.55), inset 0 2px 0 rgba(255,255,255,0.35);
            transition: all 0.25s ease;
        }

            /* Hover */
            .service-btn-css:hover {
                transform: translateY(-1px);
            }

            /* Active */
            .service-btn-css:active {
                transform: scale(0.97);
            }




        /* Glow animation */
        @keyframes glowPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(242,164,28,0.6);
            }

            70% {
                box-shadow: 0 0 0 16px rgba(242,164,28,0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(242,164,28,0);
            }
        }

        .service-btn-css.attention {
            animation: glowPulse 2s infinite;
        }

        .btn-center-wrapper {
            display: flex;
            justify-content: center; /* horizontal center */
            align-items: center; /* vertical center */

            margin-top: 34px; /* ✅ vertical gap from text above */
        }
        /****24-11-2025: service btn***/

        /*****28-11-2025****/

        .sevices-list1 {
            display: flex !important;
            align-items: stretch !important;
            flex-wrap: nowrap;
            gap: 24px;
            align-items: stretch;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

            .sevices-list1 > .col-md-7,
            .sevices-list1 > .col-md-5 {
                width: auto !important;
                max-width: none !important;
                float: none !important;
                display: block;
                min-width: 0;
                box-sizing: border-box;
            }

            .sevices-list1 > .col-md-7 {
                flex: 0 0 65%;
            }

            .sevices-list1 > .col-md-5 {
                flex: 0 0 35%;
            }

            .sevices-list1 > .col-md-7,
            .sevices-list1 > .col-md-5 {
                display: flex !important;
                flex-direction: column;
            }

        #servicesGrid1 {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 12px;
            flex: 1 1 auto;
            min-height: 0;
            min-width: 0;
            overflow-y: auto;
            box-sizing: border-box;
        }

        #serviceWidget {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
            box-sizing: border-box;
        }

            #serviceWidget .card-body {
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                min-height: 0;
            }

        #freeserviceVideoContainer {
            flex: 0 0 auto;
        }

        @media (max-width: 767.98px) {
            .sevices-list1 {
                flex-direction: column;
            }

                .sevices-list1 > .col-md-7,
                .sevices-list1 > .col-md-5 {
                    width: 100% !important;
                    flex: 1 1 auto !important;
                    max-width: 100% !important;
                }
            /* Make grid a single column on mobile */
            #servicesGrid1 {
                grid-template-columns: 1fr !important;
                overflow-y: visible; /* let page scroll naturally */
            }
        }

        /* FULLSCREEN MODAL BACKDROP */
        .video-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 999999; /* higher than header */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
        }

            .video-modal.active {
                opacity: 1;
                visibility: visible;
            }

        /* Popup Box */
        .video-modal-content {
            background: #fff;
            border-radius: 18px;
            padding: 15px;
            width: 90%;
            max-width: 850px;
            transform: scale(0.85);
            transition: transform 0.35s ease;
            position: relative;
        }

        .video-modal.active .video-modal-content {
            transform: scale(1);
        }

        .video-modal video {
            width: 100%;
            border-radius: 12px;
        }

        /* Close Button */
        .video-close-btn {
            position: absolute;
            top: -14px;
            right: -14px;
            background: #fff;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            font-size: 22px;
            border: none;
            cursor: pointer;
            box-shadow: 0 6px 15px rgba(0,0,0,0.35);
        }

        /******/
        /* MAIN CARD WRAPPER */
        .relative.rounded-lg {
            padding: 20px;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        /* CONTENT AREA */
        #serviceContent {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: -15px !important;
        }

        /* SHORT DESCRIPTION */
        #serviceDesc {
            font-size: 14px;
            line-height: 1.6;
            color: #ffffff;
            white-space: normal !important;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* Show 2 lines on desktop */
            -webkit-box-orient: vertical;
        }

        /* FULL DESCRIPTION */
        #fullserviceDesc {
            font-size: 14px;
            line-height: 1.6;
            color: #ffdda0;
        }

        /* VIEW MORE LINK */
        /* View More - Professional Standard */
        #viewMoreBtn {
            font-size: 11px !important; /* Smaller, standard size */
            font-weight: 500; /* Not bold-heavy */
            color: #ffffff; /* WCAG AAA: white on the teal panel = ~7.5:1 (was #dbefff = 6.58) */
            text-transform: none;
            letter-spacing: .2px;
            text-decoration: none;
            position: relative;
        }




        /* BUTTON SECTION */
        .btn-center-wrapper {
            text-align: center;
            margin-top: auto;
            padding: 0.5rem;
        }

        /* BUTTON STYLE */
        .service-btn-css {
            padding: 12px 28px;
            border-radius: 35px !important;
        }

        /* ---------------- RESPONSIVE ---------------- */

        /* Tablet */
        @media (max-width: 768px) {
            #serviceDesc {
                -webkit-line-clamp: 3;
                font-size: 14px;
            }

            .service-btn-css {
                width: 100%;
            }
        }

        /* Mobile */
        @media (max-width: 480px) {
            #serviceDesc {
                -webkit-line-clamp: 4;
                font-size: 13px;
            }

            #viewMoreBtn {
                font-size: 12px;
            }

            .service-btn-css {
                padding: 14px 0;
                width: 100%;
            }
        }

        /******** SERVICE DESCRIPTION CONTAINER ********/
        #serviceContent {
            position: relative;
            padding: 0 12px 6px 0;
        }

        /******** TEXT ********/
        #serviceDesc {
            font-size: 15px !important;
            line-height: 1.4;
            color: #e9f6fb;
            padding-right: 95px; /* space for VIEW MORE */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /******** VIEW MORE BUTTON ********/
        #viewMoreBtn {
            position: absolute;
            right: 10px;
            bottom: 6px;
            font-size: 13px !important;
            font-weight: 600;
            letter-spacing: 0.3px;
            /* removed invalid `color: #fffff` (5-digit hex) — it was ignored by browsers
               anyway, so the rendered colour (inherited) is unchanged. */
            background: transparent;
            border: none;
            cursor: pointer;
            white-space: nowrap;
        }

            /******** HOVER FEEL ********/
            #viewMoreBtn:hover {
                color: #ffffff;
                text-decoration: underline;
            }

        /******** MOBILE OPTIMIZATION ********/
        @media (max-width: 576px) {
            #serviceDesc {
                font-size: 12px;
                padding-right: 85px;
            }

            #viewMoreBtn {
                font-size: 10px;
                right: 6px;
                bottom: 5px;
            }
        }

        #viewMoreBtn {
            text-transform: uppercase;
        }

        .services-font {
            font-size: 26px !important;
        }

        /* Photo Gallery Modal Slider Styles - Scoped to #galleryModalContent */
        #galleryModalContent .custom-slider {
            position: relative;
            width: 100%;
            margin: auto;
            overflow: hidden;
        }

        #galleryModalContent .slides {
            display: flex;
            transition: transform 0.4s ease-in-out;
        }

        #galleryModalContent .slide-card {
            min-width: 100%;
            height: 400px;
            background: #fff;
            border-radius: 14px;
            padding: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

            #galleryModalContent .slide-card img {
                max-width: 100%;
                max-height: 300px;
                object-fit: contain;
                border-radius: 12px;
            }

        #galleryModalContent .photo-modal-navigation {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, .5);
            color: #fff;
            border: none;
            font-size: 26px;
            width: 50px; /* Equal width */
            height: 50px; /* Equal height */
            border-radius: 50%; /* Makes it a circle */
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }


            #galleryModalContent .photo-modal-navigation.prev {
                left: 0px;
            }

            #galleryModalContent .photo-modal-navigation.next {
                right: 0px;
            }

        /****30-11-2025***/
        /* Photo Gallery Image Styles - Scoped to #photoGallery */
        #photoGallery .gallery-img {
            height: 250px; /* fixed uniform height */
            width: 100%;
            object-fit: cover; /* crop nicely */
            border-radius: 12px 12px 0 0;
        }

        #photoGallery .gallery-photo {
            border-radius: 12px;
        }

        @media (max-width: 768px) {
            #photoGallery .gallery-img {
                height: 200px;
            }
        }

        @media (max-width: 576px) {
            #photoGallery .gallery-img {
                height: 180px;
            }
        }
        /****30-11-2025***/

        /* Photo Gallery Specific Styles - Scoped to #photoGallery */
        #photoGallery .photo-scroll-container {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            white-space: nowrap;
            padding-bottom: 10px;
            scroll-behavior: smooth;
        }

            #photoGallery .photo-scroll-container::-webkit-scrollbar {
                height: 8px;
            }

            #photoGallery .photo-scroll-container::-webkit-scrollbar-thumb {
                background: #158081;
                border-radius: 10px;
            }

            #photoGallery .photo-scroll-container::-webkit-scrollbar-track {
                background: #e0e0e0;
            }

        #photoGallery .photo-item {
            flex: 0 0 auto; /* Prevent shrinking */
            width: 250px; /* Fixed width for cards */
        }

        #photoGallery .photo-gallery-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 45px;
            height: 45px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 10;
            font-size: 22px;
            color: #fff;
            transition: all 0.3s ease;
        }

            #photoGallery .photo-gallery-nav-btn:hover {
                background: #f0f0f0;
            }

        #photoGallery .photo-left-btn {
            left: -20px; /* adjust as per layout */
        }

        #photoGallery .photo-right-btn {
            right: -20px; /* adjust as per layout */
        }

        #photoGallery {
            position: relative;
        }
        
        /* EXAMPLE: New photo gallery card hover effect (only affects photo gallery) */
        #photoGallery .gallery-photo {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        #photoGallery .gallery-photo:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
        }
        
        /* EXAMPLE: Custom photo item spacing */
        #photoGallery .photo-item {
            /* Your custom styles - won't affect video gallery */
            /* width: 280px; */ /* Uncomment and modify as needed */
        }
        
        /* Photo Gallery Image Overlay (Fullscreen Popup) */
        #imageOverlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            display: none;                 /* hidden by default */
            justify-content: center;       /* horizontal center */
            align-items: center;           /* vertical center */
            z-index: 9999 !important;     /* higher z-index to stay on top */
        }

        /* Visible state */
        #imageOverlay.show {
            display: flex !important;      /* force display when visible */
        }

        /* Card - Shrink wraps image */
        #imageOverlay .image-card {
            position: relative;
            display: inline-block;     /* CRITICAL */
            line-height: 0;            /* removes inline gap */
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.25);
        }

        /* Image defines everything */
        #imageOverlay .image-card img {
            display: block;            /* removes baseline gap */
            width: auto;
            height: auto;
            max-width: 95vw;           /* viewport safety only */
            max-height: 80vh;
            object-fit: contain;
            border-radius: 8px;
        }

        /* Navigation buttons */
          #imageOverlay .nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            border: none;
            font-size: 24px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            display: flex; /* Default visible */
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }
/***********24-12-2025**********/

        #imageOverlay .nav:hover {
            background: rgba(0, 0, 0, 0.8);
        }
        
        /* Disabled navigation buttons */
        #imageOverlay .nav:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        #imageOverlay .nav.prev {
            left: 10px;
        }

        #imageOverlay .nav.next {
            right: 10px;
        }

        /* Image title */
/* Title at TOP */
#imageOverlay .image-desc {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
    color: #fff;
    padding: 16px 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    z-index: 2;
}

/* Bottom overlay panel (event name + description) drawn OVER the image.
   Absolutely positioned, so showing/expanding it never changes the card size
   or position. On Read more it grows upward and overlaps the image. */
#imageOverlay .image-footer-desc {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 45%;
    padding: 14px 18px;
    background: #fff;
    color: #1a1a1a;
    text-align: left;
    line-height: 1.5;
    border-radius: 0 0 8px 8px;
    box-sizing: border-box;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.18);
    z-index: 6;
}

/* Event name shown as the heading of the bottom overlay */
#imageOverlay .image-footer-desc .image-title {
    position: static;
    background: none;
    color: #0b6b3a;
    padding: 0 0 4px 0;
    margin: 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0;
    z-index: auto;
}

/* Description text: show at most 3 lines, hide the rest behind Read more */
#imageOverlay .image-footer-desc .ifd-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Expanded: grow upward over the image and scroll the full text */
#imageOverlay .image-footer-desc.expanded {
    max-height: 90%;
    background: #fff;
    z-index: 11;            /* above the prev/next arrows while reading */
}

    #imageOverlay .image-footer-desc.expanded .ifd-text {
        display: block;
        -webkit-line-clamp: unset;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

/* Read more / Read less link, aligned to the right */
#imageOverlay .image-footer-desc .ifd-toggle {
    align-self: flex-end;
    margin-top: 6px;
    padding: 0;
    background: none;
    border: none;
    color: #0b6b3a;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.2;
    text-decoration: underline;
    cursor: pointer;
}

    #imageOverlay .image-footer-desc .ifd-toggle:hover {
        text-decoration: underline;
    }



        /* Close button */
        #imageOverlay .close-btn {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 50%;
            background: rgba(0,0,0,0.8);
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            transition: all 0.3s ease;
            pointer-events: all; /* ensure button is clickable */
        }

        #imageOverlay .close-btn:hover {
            background: rgba(0,0,0,1);
            transform: scale(1.1);
        }
        

            /* Video Gallery Specific Styles - Scoped to #videoGallery */
            #videoGallery .gallery-video {
                flex: 2 0 313px;
            }
            /* Wrapper */
            #videoGallery .video-scroll-wrapper {
                position: relative;
                padding: 10px 0;
            }

            /* Horizontal Scroll */
            #videoGallery .video-scroll-container {
                display: flex;
                gap: 10px;
                overflow-x: auto;
                scroll-behavior: smooth;
                scroll-snap-type: x mandatory;
                padding: 10px 5px;
            }

                /* Scrollbar Styling */
                #videoGallery .video-scroll-container::-webkit-scrollbar {
                    height: 8px;
                }

                #videoGallery .video-scroll-container::-webkit-scrollbar-track {
                    background: #e5e5e5;
                    border-radius: 10px;
                }

                #videoGallery .video-scroll-container::-webkit-scrollbar-thumb {
                    background: #999;
                    border-radius: 10px;
                }

            /* Card snapping */
            #videoGallery .gallery-video {
                flex: 0 0 313px;
                scroll-snap-align: start;
            }

            /* Navigation Buttons - Scoped to video gallery */
            #videoGallery .video-scroll-btn {
                position: absolute;
                top: 50%;
                z-index: 10;
                transform: translateY(-50%);
                background: var(--button-primary) !important; /* Govt blue */
                color: white;
                border: none;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                box-shadow: 0 2px 6px rgba(0,0,0,0.28);
            }

                #videoGallery .video-scroll-btn:hover {
                    background: #003d66;
                }

                #videoGallery .video-scroll-btn.left {
                    left: -18px;
                }

                #videoGallery .video-scroll-btn.right {
                    right: -18px;
                }

            /* Play button overlay - Scoped to video gallery */
            #videoGallery .video-play-overlay {
                position: absolute;
                inset: 0;
                background: rgba(0,0,0,0.3);
                opacity: 0;
                font-size: 32px;
                color: #fff;
                transition: 0.2s;
            }

            #videoGallery .gallery-video:hover .video-play-overlay {
                opacity: 1;
            }


            /* Fix image height inside modal slider */
            #galleryModalContent .carousel-item {
                height: 75vh; /* container height */
                overflow: hidden; /* hide extra */
            }

            #galleryModalContent img {
                width: 100%;
                height: 100%;
                object-fit: cover !important; /* fill both width & height */
                border-radius: 14px;
            }



            /* Smooth backdrop */
            .modal-backdrop.show {
                opacity: 0.6;
            }

            /* Modal container */
            .modal-content {
                border-radius: 10px;
                border: none;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
                background: #ffffff;
                overflow: hidden;
            }

            /* Header look */
            .modal-header {
                background: linear-gradient(135deg, #f9ca24, #f6e58d);
                border-bottom: none;
                padding: 18px 24px !important;
            }

            /* Title */
            .modal-title {
                font-weight: 600;
                font-size: 1.25rem;
                color: #2d3436;
            }

            /* Body spacing */
            .modal-body {
                padding: 24px;
                background: #fafafa;
            }

            /* Close button modern look */
            .btn-close {
                background-color: #ffffff;
                border-radius: 50%;
                padding: 10px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.2);
                opacity: 1;
                transition: transform 0.2s ease, background 0.2s ease;
            }

            .btn-close {
                border-radius: 50%;
                padding: 10px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            }

            /* Smooth animation */
            .modal.fade .modal-dialog {
                transform: scale(0.9);
                transition: transform 0.3s ease-out;
            }

            .modal.show .modal-dialog {
                transform: scale(1);
            }
            /* Force true center of modal */
            .modal.show .modal-dialog {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
                margin: 0 auto;
            }

            #galleryModalContent img {
                width: 100%;
                height: auto;
                max-height: 100vh;
                object-fit: contain;
                border-radius: 14px;
            }

            .modal-dialog {
                max-width: 900px; /* larger modal */
            }

            /* Mobile optimization */
            @media (max-width: 768px) {

                .modal-dialog {
                    max-width: 95% !important;
                    margin: 10px auto;
                }

                .modal-body {
                    padding: 15px;
                }

                #galleryModalContent img {
                    max-height: 60vh;
                }

                .modal-header {
                    padding: 12px 16px;
                }

                .modal-title {
                    font-size: 1rem;
                }
            }

            @media (max-width: 576px) {
                #galleryModal .modal-dialog {
                    margin: 0;
                    height: 100%;
                }

                #galleryModal .modal-content {
                    height: 100%;
                    border-radius: 0;
                }

                #galleryModal .modal-body {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            /********30-11-2025**********/
            #galleryModal {
                z-index: 2000 !important;
            }

            /* .modal .modal-dialog .modal-content .modal-body {
                padding: 0px !important;
            } */
            /********30-11-2025**********/

            /********02-12-2025**********/
            /* Center modal title */
            #galleryModal .modal-header {
                position: relative;
            }

            #galleryModal .modal-title {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                text-align: center;
                padding-right: 40px; /* ensures title doesn’t slide under close button */
            }

            #galleryModal .modal-title {
                pointer-events: none;
            }

            /********02-12-2025**********/

        /* Wrapper card */
        .faq-wrapper {
            background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(12px);
            padding: 15px;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        }

        /* Section Titles */
        .faq-section-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin: 0px !important;
        }

        /* GRID auto-row layout */
        .faq-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            grid-gap: 14px;
        }

        /* Force exactly 5 columns for categories */ /****25-11-2025****/
        .cat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
        }



        /* Subcategory auto-width layout */
        .subcat-flex {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
        }

           .subcat-flex .faq-card-item {
                flex: 1 1 0; /* grow, shrink, base width 0 */
                width: auto;
                padding: 12px 20px;
                white-space: nowrap; /* Card grows based on text */
                flex-shrink: 0;
                text-align: center; /* center text */
                cursor: pointer;
 
                }



        /* Card item */
        .faq-card-item {
            padding: 14px 20px;
            background: #eef5ff;
            border-radius: 12px;
            border: 2px solid transparent;
            font-weight: 600;
            cursor: pointer;
            transition: 0.25s;
            text-align: center;
        }

            .faq-card-item:hover {
                transform: translateY(-3px);
                border-color: #4d99ff;
            }

        /* Questions block */
        .faq-question-block {
            border: 1px solid #ddd;
            border-radius: 12px;
            padding: 5px;
            margin-bottom: 12px;
            background: #fff;
        }

        .faq-question-title {
            font-weight: 700;
            cursor: pointer;
        }

        .faq-answer {
            margin-top: 12px;
            padding: 12px;
            background: #eaf3ff;
            border-radius: 10px;
            display: none;
        }

            /* Animation */
            .faq-answer.show {
                display: block;
                animation: fadeIn 0.3s ease-out;
            }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-4px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Selected Category */
        .faq-card-item.selected {
            border-color: #ffd800;
            background: #dbeaff;
            color: #003f8a;
            border-width:3px;
        }

        /* Selected Subcategory */
        .subcat-flex .faq-card-item.selected {
            background: #cfe5ff;
            border-color: #0066dd;
        }

        /* Selected Question */
        .faq-question-title.selected {
            color: #007bff;
            text-decoration: underline;
        }

        /*********/
        /* Make sub-category & questions appear as part of the category (Tree look) */
        .faq-sub-wrapper {
            margin-left: 25px; /* Indent under category */
            padding-left: 20px;
            border-left: 3px solid #d0e2ff; /* Soft vertical connector line */
        }

        /* Subcategory heading inside tree */
        .faq-tree-subtitle {
            font-size: 1.15rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: #0056c7;
        }

        /* Questions tree indentation */
        .faq-tree-questions {
            margin-left: 15px;
        }

        /*********/

        /****19-11-2025****/
        .pagination-wrapper {
            margin-top: 15px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center; /* Makes it responsive */
            align-items: center;
        }

        /* Circular Buttons */
        .page-btn {
            width: 32px; /* Fixed circle shape */
            height: 32px;
            border: 1px solid #ccc;
            border-radius: 50%; /* Circle */
            cursor: pointer;
            background: #f8f9ff;
            transition: 0.25s;
            display: flex; /* Center number */
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: 600;
        }

            /* Hover */
            .page-btn:hover {
                background: #e4edff;
                border-color: #4d99ff;
            }

            /* Active Page */
            .page-btn.active {
                /* Darker blue so white text meets WCAG AA (#007bff gave only ~3.98:1;
                   #0056b3 with white is ~7:1). */
                background: #0056b3;
                color: #fff;
                border-color: #0056b3;
            }

            /* Disabled buttons */
            .page-btn.disabled {
                pointer-events: none;
                /* Use a solid muted colour + lighter surface to show "disabled"
                   instead of opacity:0.4 — opacity dropped the text contrast to
                   ~2.5:1 (fails WCAG AA). #565d64 on this light surface is ~5.9:1. */
                color: #565d64;
                background: #f1f3f5;
                border-color: #d4d7da;
            }

            /* Prev/Next pills */
            .page-btn.nav-btn {
                width: auto;
                padding: 0 18px;
                border-radius: 20px;
            }
        /****19-19-2025****/





                    /* Category cards - BOLD */
                .cat-grid .faq-card-item {
                    font-weight: 700;   /* bold */
                     border: 1px solid #00000070;
                }

                /* Subcategory cards - NORMAL */
                .subcat-flex .faq-card-item {
                    font-weight: 400;   /* normal */
                }

                .faq-title {
                    font-size: 2rem; /* adjust size */
                    font-weight: 700;
                }

                .sub-category {
                    display: none;
                    margin-top: 15px;
                    border: 1px solid #000;
                    border-radius: 0.5rem;
                    padding: 0.5rem
                }

    .responsive-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}


        .custom-close-btn1 {
            width: 56px !important;
            height: 27px !important;
            font-size: 13px !important;
            text-align: center !important;
            padding: 0 !important;
            background-color: var(--button-primary) !important;
            border: none; /* remove default border */
            color: var(--button-secondary) !important;
            cursor: pointer;
        }

        /* Compact instruction popup — sized for landscape images */
        #imagePopup .modal-dialog {
            max-width: 720px;          /* down from modal-xl (~1140px) */
        }

        #imagePopup .modal-content {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        #imagePopup .instruction-popup-figure {
            margin: 0;
            background: #f3f6f7;
            display: flex;
            align-items: center;
            justify-content: center;
            max-height: 420px;
            overflow: hidden;
        }

        #imagePopup .instruction-popup-figure img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 420px;
            object-fit: contain;
        }

        #imagePopup .instruction-popup-caption {
            font-size: 1rem;
            line-height: 1.4;
        }

        #imagePopup .btn-close {
            background-color: rgba(255, 255, 255, 0.85);
            border-radius: 50%;
            opacity: 1;
            top: 10px;
            right: 10px;
        }

        #imagePopup .instruction-popup-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 16px;
            background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%);
            color: #ffffff !important;
            font-weight: 600;
            font-size: 12pt;
            text-decoration: none;
            border-top: 1px solid #eef2f4;
            transition: filter 0.15s ease;
        }

        #imagePopup .instruction-popup-cta:hover,
        #imagePopup .instruction-popup-cta:focus-visible {
            filter: brightness(1.05);
            text-decoration: none;
            color: #ffffff !important;
            outline: none;
        }

        #imagePopup .instruction-popup-cta i {
            font-size: 16px;
        }

        /* Pinned popup card in News (बातमी / सूचना) section */
        .pinned-popup-card {
            position: relative;
            border-left: 4px solid #dc3545 !important;
            box-shadow: 0 6px 18px rgba(220, 53, 69, 0.15) !important;
        }

        .pinned-popup-card .badge {
            font-size: 0.75rem;
            padding: 4px 10px;
        }

        .pinned-popup-card .badge i {
            margin-right: 4px;
        }

        @media (max-width: 768px) {
            #imagePopup .modal-dialog { max-width: 92vw; }
            #imagePopup .instruction-popup-figure,
            #imagePopup .instruction-popup-figure img { max-height: 300px; }
        }

        @media (max-width: 480px) {
            #imagePopup .instruction-popup-figure,
            #imagePopup .instruction-popup-figure img { max-height: 220px; }
        }

    /* Visibility helpers used by your JS */
    .hidden {
        display: none !important;
    }

    .flex {
        display: flex !important;
    }

    /* Basic layout & positioning helpers your markup uses */
    .fixed {
        position: fixed !important;
    }

    .absolute {
        position: absolute !important;
    }

    .inset-0 {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
    }

    /* Centering helpers */
    .items-center {
        align-items: center !important;
    }

    .justify-center {
        justify-content: center !important;
    }

    /* z-index helper (simple numeric replacement for z-[2000]) */
    .z-\[2000\], .z-2000 {
        z-index: 2000 !important;
    }

    /* Background / overlay helpers */
    .bg-black {
        background-color: #000 !important;
    }
    /* opacity helper — emulate Tailwind bg-opacity-50 */
    .bg-opacity-50 {
        --bg-opacity: 0.5 !important;
        opacity: 1 !important;
    }

    #descModal.bg-black.bg-opacity-50 {
        background: rgba(0,0,0,0.55) !important; /* explicit overlay color */
    }

    /* Box / modal sizing helpers used in your markup */
    .w-3\/4 {
        width: 75% !important;
    }

    .max-w-2xl {
        max-width: 720px !important;
    }
    /* approx 2xl */
    .rounded-xl {
        border-radius: 12px !important;
    }

    .p-6 {
        padding: 24px !important;
    }
    /* p-6 -> 24px */

    /* Shadow helper (lightweight) */
    .shadow-lg {
        box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
    }

    /* Text & spacing helpers used in the HTML */
    .text-2xl {
        font-size: 1.5rem !important;
        line-height: 1.1 !important;
    }

    .font-bold {
        font-weight: 700 !important;
    }

    .text-lg {
        font-size: 1.125rem !important;
    }

    .mb-4 {
        margin-bottom: 1rem !important;
    }

    /* Colors used */
    .text-gray-500 {
        color: #6b7280 !important;
    }
    /* moderate gray */
    .text-gray-700 {
        color: #374151 !important;
    }

    /* Hover color helper (only for pointer devices) */
    @media (pointer: fine) {
        .hover\:text-red-600:hover {
            color: #dc2626 !important;
        }
    }

    /* text leading helper */
    .leading-relaxed {
        line-height: 1.6 !important;
    }

    /* Small layout polish to ensure modal content doesn't overflow on small screens */
    #descModal > div {
        box-sizing: border-box !important;
        max-height: calc(100vh - 48px) !important; /* leave small vertical gap */
        overflow: auto !important; /* scroll inside modal if content large */
    }

    /* Ensure the overlay actually centers the modal when .flex is added */
    #descModal.flex.items-center.justify-center {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px; /* small viewport padding on mobile */
    }

    /* Make sure button shows pointer and no default outline (keeps accessible focus) */
    #descModal button {
        cursor: pointer !important;
        background: transparent !important;
        border: none !important;
    }

        /* Small accessibility: visible focus (but minimal) */
        #descModal button:focus {
            outline: 2px solid rgba(59,130,246,0.6) !important;
            outline-offset: 2px !important;
        }
