/* ==========================================================================
   New UI theme for NewDefault1.aspx — matches the supplied reference design.
   Loaded last in <head>, after Bootstrap and the site's other stylesheets,
   so these rules win on equal specificity without needing !important
   everywhere. A handful of !important flags remain where the legacy
   stylesheets (newStyle.css / style2.css / styleold.css — not visible from
   here) are likely to carry more specific selectors than a plain class.
   ========================================================================== */

:root {
    --bg-page: #eaf2fb;
    --card-bg: #ffffff;
    --card-radius: 18px;
    --card-shadow: 0 8px 28px rgba(20, 33, 61, 0.08);
    --brand-navy: #2c3a8f;
    --tile-navy: #333f7a;
    --tile-navy-dark: #2a3567;
    --accent-green: #1f8a5b;
    --accent-green-dark: #176e49;
    --link-blue: #1b5fc4;
    --text-body: #33384a;
    --text-muted: #6b7280;
    --ribbon-red: #d92b2b;
    --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background: var(--bg-page);
    font-family: var(--font-body);
    color: var(--text-body);
}

/* ---------- Header / nav ---------- */

/* Bug fix: the promo card was rendering underneath the header, and the three
   hero cards weren't aligned at the top. Root cause: header.sticky-header's
   actual `position` rule lives in a legacy stylesheet not visible from here,
   and it behaves like `position: fixed` (removed from normal document flow),
   while the hero section's spacing below it assumed a fixed one-line header
   height. Any time the header grows taller than that assumption (e.g. the
   nav wrapping to two lines), the header overlaps the content below it.
   Forcing a genuine `position: sticky` here is the robust fix: sticky
   elements still occupy their normal-flow space, so nothing below can ever
   be overlapped regardless of how tall the header gets. */
header.sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
}

    header.sticky-header nav.navbar {
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(20, 33, 61, 0.06);
        padding-top: 10px;
        padding-bottom: 10px;
    }

        /* Bug fix: nav items were being clipped at the right edge (e.g. "Contact us")
   instead of wrapping, because the navbar's flex containers had no wrap
   allowance and no gap gave the browser room to break the line cleanly. */
        header.sticky-header nav.navbar > .container-fluid {
            flex-wrap: wrap !important;
            row-gap: 6px;
        }

.navbar-collapse {
    flex-wrap: wrap !important;
}

.navbar-nav {
    flex-wrap: wrap !important;
    row-gap: 4px;
    justify-content: flex-end;
}

.navbar-brand span.fw-bold {
    color: var(--brand-navy) !important;
    font-size: 1.3rem;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

/* Bug fix: the "NEW" ribbon and its nav link text are separate inline
   elements inside the same <li>. When the navbar wrapped, the browser could
   break the line *between* the ribbon and its label instead of moving the
   whole item down together — the ribbon stayed on row 1 while "Circulars" /
   "Download & Manuals" dropped to row 2 on their own. Making each nav-item
   an atomic inline-flex unit means it wraps as a whole, never mid-item. */
.navbar-nav .nav-item {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap;
}

.navbar-nav .nav-link {
    color: #4b5164 !important;
    font-weight: 500;
    padding: 0.5rem 0.6rem !important;
    white-space: nowrap;
}

    .navbar-nav .nav-link:hover {
        color: var(--brand-navy) !important;
    }

.new-ribbon {
    display: inline-block;
    background: var(--ribbon-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 9px;
    border-radius: 3px;
    position: relative;
    top: -2px;
    margin-right: 2px;
}

    .new-ribbon::after {
        content: "";
        position: absolute;
        left: 3px;
        bottom: -4px;
        border-width: 4px 3px 0 3px;
        border-style: solid;
        border-color: #8f1414 transparent transparent transparent;
    }

/* legacy flashing-star badges, if any markup still references them, are
   retired visually rather than deleted from the stylesheet outright */
.flash-star {
    display: none;
}

/* ---------- Hero: three-column layout ---------- */

.hero {
    background: #F0F8FF;
    padding-top: 2.25rem !important;
    padding-bottom: 1rem !important;
}

    .hero > .container {
        background: #F0F8FF;
        max-width: 1760px !important;
        width: 100% !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

.gba-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
}

    .gba-hero-grid > .gba-hero-col {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        top: auto !important;
    }

@media (max-width: 991px) {
    .gba-hero-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- Left card: Nambike Nakshe promo + notification ---------- */

.gba-promo-card {
    background: var(--card-bg) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    padding: 26px 22px 18px !important;
    margin: 0 0 20px 0 !important;
    max-width: none !important;
    width: 100% !important;
    min-width: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

.hero .heading p {
    color: var(--link-blue);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 14px;
}

.hero .carousel-item p {
    color: var(--text-body);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.hero #carouselContent,
.hero .carousel.slide {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.hero .carousel-inner {
    width: 100% !important;
    max-width: none !important;
}

.hero .carousel-indicators {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    transform: translateX(0%) !important;
}

    .hero .carousel-indicators [data-bs-target],
    .hero .carousel-indicators li {
        background-color: #c7d3ea;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        opacity: 1;
    }

    .hero .carousel-indicators .active {
        background-color: var(--accent-green);
    }

.gba-notification-card {
    background: var(--card-bg) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    padding: 20px 22px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-left: 4px solid var(--link-blue);
    position: static !important;
    top: auto !important;
    left: auto !important;
}

.hero .notification h6 {
    color: #1f2937;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.hero .notification .badge {
    background: #ffc107 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
    vertical-align: middle;
}

.hero .notification a {
    color: var(--link-blue);
    text-decoration: none;
}

    .hero .notification a:hover {
        text-decoration: underline;
    }

/* ---------- Center card: Bengaluru map ---------- */

.gba-hero-col.col.mb-6 {
    display: flex !important;
    align-items: stretch !important;
    align-self: stretch !important;
}

    .gba-hero-col.col.mb-6 .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: stretch !important;
    }

.gba-map-card {
    background: var(--card-bg) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    padding: 26px 30px 22px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    text-align: center;
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bengaluru-card img {
    max-width: 78%;
    height: auto;
    margin: 0 auto 10px;
    display: block;
}

.bengaluru-title {
    font-weight: 700;
    color: #1f2937;
    letter-spacing: 0.02em;
    margin: 10px 0 6px;
}

.bengaluru-card ul.list-unstyled {
    margin: 0;
    padding: 0;
    text-align: left;
}

    .bengaluru-card ul.list-unstyled li {
        font-size: 0.88rem;
        color: #141415;
    }

/* ---------- Right card: sign in ---------- */

.gba-hero-col.login-form-wrapper {
    display: flex !important;
}

.gba-signin-card {
    background: var(--card-bg) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    padding: 28px 28px 24px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

.login-box h5 {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1f2937;
    margin-bottom: 20px;
    font-size: 1.15rem;
}

.login-box .form-label {
    font-size: 0.95rem;
    color: #4b5164;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}

.login-box .login-input,
.login-box .captcha-input {
    width: 100%;
    border: 1.5px solid var(--accent-green);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 0.92rem;
    color: #1f2937;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .login-box .login-input:focus,
    .login-box .captcha-input:focus {
        outline: none;
        border-color: var(--accent-green-dark);
        box-shadow: 0 0 0 3px rgba(31, 138, 91, 0.12);
    }

.login-box .captcha-input {
    border-radius: 10px !important;
    padding: 8px 14px !important;
    width: 170px !important;
    height: 40px;
    flex: 0 0 auto !important;
    min-width: 0;
    box-sizing: border-box;
}

.login-box .d-flex.align-items-center {
    gap: 12px;
}

.login-box .d-flex.justify-content-between.mb-3 {
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

    .login-box .d-flex.justify-content-between.mb-3 a {
        color: var(--link-blue);
        text-decoration: none;
    }

        .login-box .d-flex.justify-content-between.mb-3 a:hover {
            text-decoration: underline;
        }

.login-box .captcha-image {
    height: 40px;
    border-radius: 6px;
    border: 1px solid #e3e7ee;
    flex: 0 0 auto;
}

.login-box .captcha-refresh-icon {
    opacity: 0.75;
    width: 30px;
    height: 24px;
    flex: 0 0 auto;
    cursor: pointer;
}

    .login-box .captcha-refresh-icon:hover {
        opacity: 1;
    }

.login-box .btn-login-size {
    width: 100% !important;
    border: none !important;
    border-radius: 999px !important;
    background: var(--accent-green) !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 11px 0 !important;
    transition: background-color 0.15s;
}

    .login-box .btn-login-size:hover {
        background: var(--accent-green-dark) !important;
    }

.login-box .login-btn-wrapper {
    width: 100% !important;
    max-width: none !important;
}

.login-box .validation-msg {
    display: block;
    min-height: 1.1em;
}

/* ---------- Dashboard tile grid ---------- */

.gba-tile {
    background: var(--tile-navy) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(30, 40, 90, 0.18) !important;
    padding: 20px 22px !important;
    margin: 0 !important;
    height: 200px;
    width: 100% !important;
    max-width: none !important;
    position: static !important;
}

.container-fluid.my-4 .service-card h5 {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

    .container-fluid.my-4 .service-card h5 .icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.12);
    }

        .container-fluid.my-4 .service-card h5 .icon i {
            color: #ffffff;
            font-size: 1.0rem;
            line-height: 1;
        }

.container-fluid.my-4 .service-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .container-fluid.my-4 .service-card ul li {
        margin-bottom: 9px;
    }

        .container-fluid.my-4 .service-card ul li a {
            color: #dbe2f5;
            text-decoration: none;
            font-size: 1.1rem;
        }

            .container-fluid.my-4 .service-card ul li a:hover {
                color: #ffffff;
                text-decoration: underline;
            }

.dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e3e7ee !important;
    box-shadow: var(--card-shadow) !important;
    border-radius: 10px !important;
    padding: 8px 0 !important;
}

    .dropdown-menu .dropdown-item,
    .dropdown-menu li {
        background-color: transparent !important;
    }

        .dropdown-menu a,
        .dropdown-menu .dropdown-item a {
            color: #1f2937 !important;
            font-weight: 500;
            padding: 8px 18px;
            display: block;
        }

            .dropdown-menu a:hover {
                color: var(--brand-navy) !important;
                background-color: #f2f5fb !important;
                text-decoration: none !important;
            }


/* ---------- Fix: neutralize leftover Bootstrap grid-column classes ----------
   The markup still carries Bootstrap column classes (col-lg-4, col-lg-6,
   col-md-6) on elements that now live inside the new CSS-grid hero layout
   instead of a real Bootstrap .row. Those classes set literal width
   percentages (e.g. col-lg-4 = 33.33%) regardless of their actual parent,
   which was shrinking the sign-in card to a sliver of its grid column and
   the promo card to half the width of the notification card below it. */

.gba-hero-col.login-form-wrapper {
    display: flex !important;
    align-items: stretch !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
}

.login-form-wrapper .col-lg-4 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: stretch !important;
}

.hero .col.mb-1 .main-slider.col-lg-6.col-md-6 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
}

/* ---------- Final defensive layer: ID-scoped overrides ----------
   The sign-in card kept drifting down relative to the map card even after
   the wrapper-margin fixes above. .login-box is the page's own original
   class name (not one I added), so it's very likely the legacy stylesheets
   already have their own rule for it — possibly ID-scoped (e.g. an ancestor
   ID selector), which would out-specificity a plain class selector
   regardless of stylesheet load order. #Form1 is the page's real, unique
   form ID; prefixing with it raises these rules' specificity above any
   plausible single-class or two-class legacy rule without needing to see
   what that rule actually is. */
#Form1 .gba-promo-card {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    top: 0 !important;
    transform: none !important;
    position: static !important;
    align-self: stretch !important;
}

#Form1 .gba-notification-card,
#Form1 .gba-map-card,
#Form1 .gba-signin-card {
    margin: 0 !important;
    margin-top: 0 !important;
    top: 0 !important;
    transform: none !important;
    position: static !important;
    align-self: stretch !important;
}

#Form1 .login-form-wrapper,
#Form1 .login-form-wrapper .col-lg-4 {
    margin: 0 !important;
    margin-top: 0 !important;
    top: 0 !important;
    transform: none !important;
    position: static !important;
    align-self: stretch !important;
}