.ux4g-carousel-slide:has(img)::after {
    opacity: 0;
}
.ux4g-carousel-slide {
    min-height: 41.4rem;
}
/* BUGFIX: this file isn't wrapped in a CSS @layer, so this unconditional
   rule overrode carousel.css's OWN responsive min-height step-down at
   <=768px (which is correctly layered) regardless of viewport — unlayered
   CSS always wins over layered CSS no matter the media query or
   specificity on either side. The hero carousel was stuck at a fixed
   41.4rem (~662px) tall crop-fill box on every phone/tablet, cropping much
   more of each slide image's width out of view than on desktop (same
   object-fit:cover box, far narrower viewport) and making it look
   disproportionate rather than responsive. Mirrors the same breakpoint
   carousel.css already uses, just enforced here too so our own override
   doesn't block it. Added a further step for small phones. */
@media (max-width: 768px) {
    .ux4g-carousel-slide {
        min-height: 31.25rem;
    }
}
@media (max-width: 480px) {
    .ux4g-carousel-slide {
        min-height: 20rem;
    }
}
#about{
    background: url('../images/bg_ab.png');
    background-size: cover;
}
.cm{
       background: linear-gradient(180deg, #FDE6D5 0%, #FFFFFF 55%);
}
.minister{
    background: linear-gradient(180deg, #D2F2EA 0%, #FFFFFF 55%);
}
.aboutC{
       
    color: #fff;
    background: radial-gradient(90% 150% at 100% 0%, rgba(162, 89, 255, 0.45) 0%, rgba(162, 89, 255, 0) 60%), linear-gradient(120deg, #241760 0%, #4a2997 55%, #613af5 100%);
}
.ux4g-footer {
    position: relative; /* 1. Necessary anchor for absolute ::before */
    background-image: url('../images/footer_bg.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    overflow: hidden;
}

.ux4g-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(242 239 255 / 11%);
    z-index: 0; /* 2. Keeps the dark overlay behind the text */
}

/* 3. Keeps your container content above the dark overlay */
.ux4g-footer > .ux4g-container {
    position: relative;
    z-index: 1;
}
    
.innerPage {
    background-image: url('../images/innerPage.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
    width: 100%;
}

.ux4g-gsd-quiz-banner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--ux4g-bg-primary);
/*    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-primary-default);*/
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-xl) var(--ux4g-padding-2xl);
    gap: var(--ux4g-gap-column-l);
}

.ux4g-accordion-bordered .ux4g-accordion__button {
    background-color: #ffffff;
}

.ux4g-accordion-bordered .ux4g-accordion__button[aria-expanded="true"] {
    background-color: #f2efff  
}
.ux4g-accordion-bordered .ux4g-accordion__item:first-of-type .ux4g-accordion__button {
   background-color: #f2efff
}

/* Device Registration: only the gaps UX4G doesn't cover */
#main-content [hidden] {
    display: none !important;
}
.ux4g-input-error .ux4g-form-select,
.ux4g-input-error .dr-choice {
    border-color: var(--ux4g-border-color-error-strong);
}
.dr-choice:has(:checked) {
    border-color: var(--ux4g-border-color-primary-strong);
    background-color: var(--ux4g-bg-primary-soft);
}

/* Home: department logo carousel. UX4G slides are full-height hero banners with
   background images; here they hold a row of logo cards. */
.dept-carousel .ux4g-carousel-slide {
    min-height: auto;
    padding: 0.5rem 4.5rem 3.5rem;
}
.dept-carousel .ux4g-carousel-slide img {
    position: static;
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.drs-captcha {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: center;
        gap: .75rem;
        width: 100%;
    }

    .drs-captcha-tools {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-width: 0;
    }

    .drs-captcha img {
        width: 150px;
        height: 50px;
        object-fit: contain;
        border: 1px solid var(--ux4g-border-neutral-subtle, #d8dce3);
        border-radius: .5rem;
        background: #fff;
    }

    .drs-captcha .ux4g-input { width: 100%; min-width: 0; }
    .drs-captcha .ux4g-input-input { min-width: 0; }
    .drs-captcha-field { flex: 1.5 1 300px; min-width: min(100%, 280px); }
    #result:empty { display: none; }
    .drs-table th, .drs-table td { vertical-align: middle; }
    .drs-alert[hidden], [hidden] { display: none !important; }

    /* Keep the OTP modal on UX4G components and utilities; only widen the stock modal. */
    #search .drs-otp-dialog { width: min(40rem, calc(100vw - 2rem)); max-width: 60vw; }

    @media (max-width: 767.98px) {
        .drs-captcha img { width: 132px; }
    }

    @media (max-width: 575.98px) {
        .drs-captcha { grid-template-columns: minmax(0, 1fr); }
        .drs-captcha-tools { justify-content: flex-start; }
    }

.ux4g-input-container:has(.is-invalid) + .invalid-feedback,
.ux4g-form-select.is-invalid ~ .invalid-feedback,
.invalid-feedback.is-visible {
    display: block;
    color: var(--ux4g-border-color-error-strong);
    margin-top: 0.25rem;
}

.invalid-feedback {
    display: none;
}

.dr-captcha-img {
    display: block;
    width: 150px;
    height: 48px;
    max-width: 100%;
    object-fit: contain;
    flex: 0 0 auto;
    background: var(--ux4g-bg-neutral-elevated, #fff);
}

#resultModal .ux4g-modal-box.dr-modal-wide {
    width: 68rem;
    max-width: 95vw;
}

    #resultModal .ux4g-modal-box.dr-modal-wide .ux4g-modal-body {
        max-height: 65vh;
        overflow: auto;
    }

#globalLoader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--ux4g-bg-overlay);
    align-items: center;
    justify-content: center;
}

    #globalLoader:not(.ux4g-d-none) {
        display: flex;
    }

.dr-section-heading {
    border-radius: 1rem 1rem 0 0;
    overflow: hidden
}
    /* .dr-section-heading h2{font-size:20px} */
    .dr-section-heading > div {
        min-width: 0;
    }

.dr-step {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    color: var(--ux4g-text-neutral-inverse, #fff);
}

.dr-captcha-answer {
    flex: 1 1 14rem;
    min-width: min(100%, 14rem);
}

/* Shorter than the final-submit captcha's answer box — this one now shares
   its row with both Get Details and Reset, which needs the extra space. */
.dr-sso-captcha-answer {
    flex: 0 1 8rem;
    min-width: min(100%, 6rem);
}

.dr-submit-row {
    border-top: 1px solid var(--ux4g-border-color-neutral-subtle);
    padding-top: 1.5rem;
}

[data-field].ux4g-input-error .ux4g-input-helper {
    display: flex;
}

[data-field] .ux4g-input-helper[hidden] {
    display: none;
}

@media (min-width: 992px) {
    .dr-help-stack {
        position: sticky;
        top: 1.5rem;
    }
}

@media (max-width: 767px) {
    .regisrationNew .ux4g-shadow-l2 {
        padding: 1rem;
    }

    .dr-section-heading {
        min-height: auto;
        padding: 1rem;
    }

    .dr-submit-row {
        align-items: stretch;
    }

        .dr-submit-row #verifyOtpBtn {
            flex: 1 0 100%;
        }

        .dr-submit-row #submitDr {
            width: 100%;
        }
}

@media (max-width: 768px) {
    .dept-carousel .ux4g-carousel-slide {
        padding: 0.5rem 0.25rem 5rem;
    }
}

/* BUGFIX: a collapsed FAQ accordion panel (e.g. Home/FAQ.cshtml) could show
   a thin empty bar under its question instead of staying fully hidden —
   ux4g.js's Collapse.show()/hide() animate height via an inline style, and
   if that transition is ever interrupted (component re-init, a stray click
   mid-animation, etc.) the inline height can get stuck at a small non-zero
   value instead of resolving back to the CSS-driven collapsed state. Forces
   any .ux4g-accordion__collapse that isn't actively open/animating back to
   a hard, fully clipped zero regardless of what inline style it was left
   with. */
.ux4g-accordion__collapse:not(.show):not(.collapsing) {
    height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* BUGFIX: the accessibility widget's Dark Mode forces readable text to
   white almost everywhere (accessibility-widget.css's blanket
   "body.ux4g-accessibility-dark-mode * { color: white !important }" rule),
   but .ux4g-footer has no dark-mode background override of its own, so it
   kept its normal light background — leaving white-on-light, barely
   readable footer text. Gives it the same dark background the rest of the
   page gets in Dark Mode. */
body.ux4g-accessibility-dark-mode .ux4g-footer {
    background-color: var(--color-black3, #161519);
}