/* 
.a11y-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(15, 87, 87, 0.16);
    border: 1px solid #A6D9D9;
    z-index: 1000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

.a11y-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #D9F2F2;
}

.a11y-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.a11y-title-wrap h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0F5757;
}

.a11y-close-btn {
    background: none;
    border: none;
    color: #0F5757;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
}

.a11y-close-btn:hover {
    background: #D9F2F2;
}

.a11y-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 14px 16px;
}

.a11y-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 6px;
    background: #fff;
    border: 1.5px solid #A6D9D9;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 82px;
}

.a11y-btn:hover {
    border-color: #2D8686;
    background: #D9F2F2;
}

.a11y-btn.active {
    border-color: #0F5757;
    background: #D9F2F2;
    box-shadow: inset 0 0 0 1px #0F5757;
}

.a11y-btn span {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #0F5757;
    text-align: center;
    line-height: 1.2;
}

.a11y-text-icon {
    font-size: 1.25rem !important;
    font-weight: 700;
    color: #2D8686;
}
header.top-header.lightning-effect{
	overflow: visible;
}


<!---->

html {
    --a11y-font-scale: 100%;
}

body {
    font-size: var(--a11y-font-scale);
}

Dark contrast
html.a11y-dark-contrast body {
    background: #000 !important;
    color: #fff !important;
}

html.a11y-dark-contrast body * {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

Preserve the accessibility popup's teal theme
html.a11y-dark-contrast #accessibility-popup,
html.a11y-dark-contrast #accessibility-popup * {
    background-color: #fff !important;
    color: #0F5757 !important;
    border-color: #A6D9D9 !important;
}

Invert colors
html.a11y-invert body {
    filter: invert(1) hue-rotate(180deg);
}

Keep images visually normal when colors are inverted
html.a11y-invert img,
html.a11y-invert video {
    filter: invert(1) hue-rotate(180deg);
}

Low saturation
html.a11y-low-saturation body {
    filter: saturate(0.25);
}

Highlight links
html.a11y-highlight-links a {
    background: #D9F2F2 !important;
    color: #0F5757 !important;
    outline: 2px solid #2D8686 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

Hide images
html.a11y-hide-images img,
html.a11y-hide-images picture,
html.a11y-hide-images video,
html.a11y-hide-images canvas {
    visibility: hidden !important;
}

Default cursor
html.a11y-default-cursor,
html.a11y-default-cursor * {
    cursor: default !important;
}

Active accessibility button
.a11y-btn.active {
    border-color: #0F5757 !important;
    background: #D9F2F2 !important;
}

.a11y-btn.active span {
    color: #0F5757 !important;
} */


/* ==============================
   ACCESSIBILITY POPUP
   ============================== */
.a11y-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(15, 87, 87, 0.16);
    border: 1px solid #A6D9D9;
    z-index: 1000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

.a11y-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #D9F2F2;
}

.a11y-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.a11y-title-wrap h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0F5757;
}

.a11y-close-btn {
    background: none;
    border: none;
    color: #0F5757;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
}

.a11y-close-btn:hover {
    background: #D9F2F2;
}

.a11y-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 14px 16px;
}

.a11y-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 6px;
    background: #fff;
    border: 1.5px solid #A6D9D9;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 82px;
}

.a11y-btn:hover {
    border-color: #2D8686;
    background: #D9F2F2;
}

.a11y-btn.active {
    border-color: #0F5757;
    background: #D9F2F2;
    box-shadow: inset 0 0 0 1px #0F5757;
}

.a11y-btn span {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #0F5757;
    text-align: center;
    line-height: 1.2;
}

.a11y-text-icon {
    font-size: 1.25rem !important;
    font-weight: 700;
    color: #2D8686;
}

header.top-header.lightning-effect {
    overflow: visible;
}

/* ==============================
   FONT SCALE
   ============================== */
html {
    --a11y-font-scale: 100%;
    font-size: var(--a11y-font-scale);
}

body {
    font-size: var(--a11y-font-scale);
}

/* ==============================
   DARK CONTRAST
   ============================== */
html.a11y-dark-contrast,
html.a11y-dark-contrast body {
    background: #000 !important;
    color: #fff !important;
}

html.a11y-dark-contrast body * {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* Navbar / header पूरी चौड़ाई में काले */
html.a11y-dark-contrast .nav2,
html.a11y-dark-contrast .gov-header,
html.a11y-dark-contrast .top-header {
    background-color: #000 !important;
}

/* Banner image भी हटानी हो तो अगली line से comment हटाएँ */
/* html.a11y-dark-contrast .top-header { background-image: none !important; } */

/* Popup का अपना teal/सफ़ेद theme बना रहे */
html.a11y-dark-contrast #accessibility-popup,
html.a11y-dark-contrast #accessibility-popup * {
    background-color: #fff !important;
    color: #0F5757 !important;
    border-color: #A6D9D9 !important;
}

/* ==============================
   INVERT
   ============================== */
html.a11y-invert body {
    filter: invert(1) hue-rotate(180deg);
}

/* Images और video वापस सामान्य */
html.a11y-invert img,
html.a11y-invert video {
    filter: invert(1);
}

/* Slider/banner को वापस original रंग में दिखाएँ */
html.a11y-invert .hero-slider,
html.a11y-invert #homeCarousel,
html.a11y-invert .carousel,
html.a11y-invert .slick-slider,
html.a11y-invert .swiper,
html.a11y-invert .owl-carousel {
    filter: invert(1) hue-rotate(180deg);
}

/* Slider के अंदर की images पर दोबारा filter न लगे (वरना 3 बार हो जाएगा) */
html.a11y-invert .hero-slider img,
html.a11y-invert #homeCarousel img,
html.a11y-invert .carousel img,
html.a11y-invert .slick-slider img,
html.a11y-invert .swiper img,
html.a11y-invert .owl-carousel img {
    filter: none;
}

/* Popup भी वापस सामान्य */
html.a11y-invert #accessibility-popup {
    filter: invert(1) hue-rotate(180deg);
}

/* Slider/banner को वापस original रंग में दिखाएँ */
html.a11y-invert .hero-slider,
html.a11y-invert #homeCarousel,
html.a11y-invert .carousel,
html.a11y-invert .slick-slider,
html.a11y-invert .swiper,
html.a11y-invert .owl-carousel {
    filter: invert(1) hue-rotate(180deg);
}

/* Slider के अंदर की images पर दोबारा filter न लगे (वरना 3 बार हो जाएगा) */
html.a11y-invert .hero-slider img,
html.a11y-invert #homeCarousel img,
html.a11y-invert .carousel img,
html.a11y-invert .slick-slider img,
html.a11y-invert .swiper img,
html.a11y-invert .owl-carousel img {
    filter: none;
}

/* ==============================
   LOW SATURATION
   ============================== */
html.a11y-low-saturation body {
    filter: saturate(0.25);
}

/* Invert + Saturation साथ चालू हों तो दोनों लगें */
html.a11y-invert.a11y-low-saturation body {
    filter: invert(1) hue-rotate(180deg) saturate(0.25);
}

/* ==============================
   HIGHLIGHT LINKS
   ============================== */
html.a11y-highlight-links a {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    outline: 2px solid var(--secondary) !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

/* ==============================
   HIDE IMAGES
   ============================== */
html.a11y-hide-images img,
html.a11y-hide-images picture,
html.a11y-hide-images video,
html.a11y-hide-images canvas {
    visibility: hidden !important;
}

/* ==============================
   DEFAULT CURSOR
   ============================== */

/* Default Cursor (Arrow) */
html.a11y-default-cursor,
html.a11y-default-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 173.312 173.312'%3E%3Cpolygon fill='%237a7a7a' points='137.078,102.745 36.234,0 36.238,143.965 65.559,118.501 87.965,173.312 120.72,159.922 98.315,105.112'/%3E%3C/svg%3E") 6 0, auto !important;
}

/* Hand Cursor on Hover (for clickable elements) */
html.a11y-default-cursor a:hover,
html.a11y-default-cursor button:hover,
html.a11y-default-cursor [role="button"]:hover,
html.a11y-default-cursor input[type="submit"]:hover,
html.a11y-default-cursor input[type="button"]:hover,
html.a11y-default-cursor input[type="reset"]:hover,
html.a11y-default-cursor select:hover,
html.a11y-default-cursor label:hover,
html.a11y-default-cursor .cursor-pointer:hover,
html.a11y-default-cursor [onclick]:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%237a7a7a' stroke='%237a7a7a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.5 22C4.7 22 3 16.333 3 13.5V10c0-.333.2-1 1-1s1 .667 1 1v2c0 .5.3 1.5 1.5 1.5S8 12.5 8 12V3c0-.333.2-1 1-1s1 .667 1 1v7c.5.5.8 1.2 2 0V8c0-.333.2-1 1-1s1 .667 1 1v1h1c0-.333.2-1 1-1s1 .667 1 1v1h1c0-.333.2-1 1-1s1 .667 1 1v3.5c0 2.833-1.7 8.5-8.5 8.5z'/%3E%3C/svg%3E") 8 2, pointer !important;
}


/* ==============================
   ACTIVE BUTTON STATE
   (dark contrast में भी सही दिखे)
   ============================== */
.a11y-btn.active {
    border-color: #0F5757 !important;
    background: #D9F2F2 !important;
}

.a11y-btn.active span {
    color: #0F5757 !important;
}