/* =========================================================================
   DOWO Government-Portal Theme
   Loaded last (see front/layouts/css.blade.php) so it wins the cascade over
   bootstrap.css / style.css for same-specificity rules. This file only adds
   overrides/new component styles - it does not replace the base template.
   ========================================================================= */

:root{
    --gov-navy:#0b3358;
    --gov-navy-dark:#072544;
    --gov-charcoal:#2b2f33;
    --gov-text:#33383d;
    --gov-muted:#6b7280;
    --gov-link-blue:#1a4d8f;
    --gov-border:#d9dee3;
    --gov-bg-light:#f5f7fa;
    --gov-saffron:#c96a1a;
    --gov-green:#1f7a3d;
    --gov-white:#ffffff;
}

/* ---------------------------------------------------------------------
   1. Typography hierarchy
   --------------------------------------------------------------------- */
body{
    color:var(--gov-text);
}
h1,h2,h3,h4,h5,h6{
    color:var(--gov-navy);
}
h1, .bd-section-title, .sec-color{
    color:var(--gov-navy);
}
p{
    color:var(--gov-text);
    line-height:1.7;
}
.readable-copy{
    max-width:75ch;
}
.text-muted-meta{
    color:var(--gov-muted);
    font-size:.85em;
}
label,.gov-label{
    color:var(--gov-muted);
}

/* Link colours: accessible gov-blue by default ... */
a{
    color:var(--gov-link-blue);
}
a:hover,a:focus{
    color:var(--gov-navy-dark);
}
/* ...but whole-card / dead-placeholder links should read as normal text,
   not blue - the card border/box already signals clickability.
   Explicit colours with !important rather than color:inherit - inherit
   depends on every intermediate element in the DOM chain having no color
   of its own, which proved unreliable in testing (see Demand Survey
   cards), so text nodes several levels below the wrapping <a> get their
   own explicit rule too rather than relying on cascade-through-inherit. */
.causes a,
.causes-details a,
.causes-details .title,
.causes-details .allot,
.event-content a,
.event-title a,
.demand-survey-cards a,
.activity-content a,
.latest-blog-card a,
.latest-update-item a.item-block,
.gov-card a.item-block{
    color:var(--gov-charcoal) !important;
    text-decoration:none;
}
/* Real call-to-action links inside those same cards must stay visibly links */
.read-button,
.gov-read-more,
.gov-view-all{
    color:var(--gov-link-blue) !important;
    text-decoration:none;
    font-weight:600;
}
.read-button:hover,
.gov-read-more:hover,
.gov-view-all:hover{
    color:var(--gov-navy-dark) !important;
    text-decoration:underline;
}

/* ---------------------------------------------------------------------
   2. Equal-height card grids (flexbox, scoped to avoid fighting the
      page-local inline height overrides that exist on a few other pages)
   --------------------------------------------------------------------- */
.demand-survey-cards{display:flex;flex-wrap:wrap;}
/* front/assets/css/style.css (a third stylesheet, separate from the two
   already accounted for elsewhere in this file) has the ORIGINAL intended
   design for this component: .activity-bg is a full-card absolutely-
   positioned background image, hidden (opacity:0) until hover, with a
   dark overlay for legibility - icon+title stay visible always and turn
   white on hover. Implementing that properly instead of fighting it. */
.demand-survey-cards .activity-content{
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
    background:var(--gov-white) !important;
    border:1px solid var(--gov-border) !important;
    border-radius:6px !important;
    padding:32px 22px 24px !important;
    margin-bottom:0 !important;
    text-align:center;
    position:relative !important;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(11,51,88,.06);
    transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.demand-survey-cards a:hover .activity-content{
    border-color:var(--gov-navy) !important;
    box-shadow:0 10px 22px rgba(11,51,88,.28);
    transform:translateY(-2px);
}
.demand-survey-cards .activity-shape-1,
.demand-survey-cards .activity-shape-2{display:none;}

.demand-survey-cards .activity-bg{
    position:absolute;
    inset:0;
    z-index:0;
    opacity:0;
    transition:opacity .35s ease;
}
.demand-survey-cards .activity-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.demand-survey-cards .activity-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--gov-navy);
    opacity:.8;
}
.demand-survey-cards a:hover .activity-bg{opacity:1;}

.demand-survey-cards .activity-content-icon{
    position:relative;
    z-index:1;
    font-size:34px !important;
    color:var(--gov-navy);
    margin-bottom:14px;
    transition:color .2s ease;
}
.demand-survey-cards .activity-content-icon:empty{display:none;}
.demand-survey-cards a:hover .activity-content-icon{color:#fff;}
.demand-survey-cards .activity-title{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}
/* front/assets/css/style.css sets .activity-content .activity-title h3
   {margin-top:22px} - applies to both .demand-bold and .demand-h3 (both
   <h3> tags), adding unwanted extra gap under the icon. Remove it. */
.demand-survey-cards .activity-title h3{
    margin-top:0 !important;
}
.demand-survey-cards a:hover .demand-bold,
.demand-survey-cards a:hover .demand-h3{
    color:#fff !important;
}
/* Explicit colour on both the link and every text node inside it - do not
   rely on inherit alone, since .demand-bold/.demand-h3 are several levels
   below the wrapping <a> and a base a{color:...} rule was still leaking
   through in testing. */
.demand-survey-cards a,
.demand-survey-cards .demand-bold,
.demand-survey-cards .demand-h3{
    color:var(--gov-charcoal) !important;
}
.demand-survey-cards .demand-bold{
    font-family:'Raleway', sans-serif;
    font-size:17px !important;
    font-weight:700 !important;
    text-transform:uppercase;
    letter-spacing:.02em;
    line-height:1.3;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:12px !important;
}
.demand-survey-cards .demand-h3{
    font-family:'Poppins', sans-serif;
    font-size:13.5px !important;
    font-weight:400 !important;
    line-height:1.7 !important;
    text-align:left !important;
    color:var(--gov-text) !important;
    flex:1 1 auto;
}

/* .locations-row is added to the card grid wrapper on any page using this
   .causes/.causes-details pattern (home, ongoing-projects, upcoming-projects)
   - no conflicting inline height override exists for .causes anywhere,
   confirmed before adding this. */
.locations-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    row-gap:24px;
}
.locations-row > [class*="col-"]{margin-bottom:0;}
/* Fit all 5 location cards in a single row on wide screens instead of the
   4-per-row (col-lg-3) wrapping a 5th/6th card to its own line. Scoped to
   .gov-locations-5up (added only on the home page's Locations section) -
   ongoing-projects/upcoming-projects also reuse the plain .locations-row
   class for their own (2-column, col-lg-6) grids and must keep their own
   column widths instead of being forced to 20%. */
@media (min-width:1200px){
    .gov-locations-5up > [class*="col-"]{
        flex:0 0 20% !important;
        max-width:20% !important;
    }
}
.causes{
    display:flex;
    flex-direction:column;
    height:100%;
    width:100%;
    border:1px solid var(--gov-border);
    border-radius:6px;
    overflow:hidden;
    background:var(--gov-white);
    box-shadow:0 1px 3px rgba(11,51,88,.06);
    transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.causes:hover{
    box-shadow:0 6px 16px rgba(11,51,88,.12);
    border-color:var(--gov-navy);
    transform:translateY(-2px);
}
.causes .thumb{
    height:150px;
    overflow:hidden;
}
.causes .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
/* ongoing-projects/upcoming-projects use wider (2-column) .causes cards
   than the home page's 5-up Locations grid - taller image scoped here
   so it doesn't stretch those narrower cards out of proportion. */
.gov-projects-grid .causes .thumb{height:280px;}
@media (max-width:767px){
    .gov-projects-grid .causes .thumb{height:200px;}
}
.causes-details{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    flex:1 1 auto;
    padding:20px 16px;
    text-align:center;
}
.causes-details .title{
    font-size:17px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:.01em;
    margin:0 0 6px !important;
}
.causes-details .allot{
    display:inline-block;
    font-size:11.5px !important;
    font-weight:600;
    color:var(--gov-green) !important;
    background:rgba(31,122,61,.09);
    border:1px solid rgba(31,122,61,.25);
    border-radius:12px;
    padding:3px 12px !important;
    margin:0 !important;
    line-height:1.4 !important;
    text-transform:uppercase;
    letter-spacing:.03em;
}
/* Project cards (ongoing-projects/upcoming-projects) reuse .causes but add
   a .sub-title block of plain <h5> tags - unstyled, these fall back to the
   browser's large bold heading default. Bring them in line with the rest
   of the card's typography scale. */
.causes-details .sub-title{
    width:100%;
    text-align:left;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--gov-border);
}
.causes-details .sub-title h5{
    font-size:13px !important;
    font-weight:500 !important;
    color:var(--gov-text);
    line-height:1.6 !important;
    margin:0 0 4px !important;
}
.causes-details .sub-title h5:last-child{margin-bottom:0 !important;}

.latest-blog-cards{display:flex;flex-wrap:wrap;}
.latest-blog-card{
    display:flex;
    flex-direction:column;
    height:100%;
    border:1px solid var(--gov-border);
    border-radius:6px;
    overflow:hidden;
    background:var(--gov-white);
    box-shadow:0 1px 3px rgba(11,51,88,.06);
    transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.latest-blog-card:hover{
    box-shadow:0 6px 16px rgba(11,51,88,.12);
    border-color:var(--gov-navy);
    transform:translateY(-2px);
}
.latest-blog-card .blog-img{
    height:170px;
    overflow:hidden;
}
.latest-blog-card .blog-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease;
}
.latest-blog-card:hover .blog-img img{transform:scale(1.05);}
.latest-blog-card .blog-text{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    padding:18px 16px;
}
.latest-blog-card .gov-blog-date{
    font-size:11.5px;
    color:var(--gov-muted);
    text-transform:uppercase;
    letter-spacing:.03em;
    margin-bottom:8px;
}
.latest-blog-card .blog-text h3{
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.35;
    margin-bottom:14px !important;
    flex:1 1 auto;
}
.latest-blog-card .blog-text h3 a{
    color:#000 !important;
}
.latest-blog-card .read-button{
    color:var(--gov-saffron) !important;
}
.latest-blog-card .read-button:hover{
    color:#a85a16 !important;
}

.gov-cards-row{display:flex;flex-wrap:wrap;}
.gov-cards-row .gov-card{display:flex;flex-direction:column;height:100%;}

/* /blogs listing page - same equal-height treatment as the homepage's
   Latest Blogs cards (no conflicting inline height override found on
   this page, confirmed before adding this). */
.blog-list-wrapp .row{display:flex;flex-wrap:wrap;}
.blog-list-wrapp .bi-blog-feed-item-2{display:flex;flex-direction:column;height:100%;}
.blog-list-wrapp .blog-text{display:flex;flex-direction:column;flex:1 1 auto;}
.blog-list-wrapp .blog-text p{flex:1 1 auto;}

/* ---------------------------------------------------------------------
   3. Buttons - flat, restrained, official-service style
   --------------------------------------------------------------------- */
.thm-btn,
.gov-btn,
#neonShadow{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    position:relative !important;
    overflow:hidden !important;
    height:44px !important;
    line-height:1;
    padding:0 24px !important;
    font-size:14px;
    font-weight:600;
    border-radius:8px !important;
    border:1px solid #a85a16 !important;
    background:linear-gradient(270deg, #e2882f, #c96a1a, #e2882f) !important;
    background-size:200% 200% !important;
    color:var(--gov-white) !important;
    box-shadow:0 2px 6px rgba(201,106,26,.25) !important;
    text-transform:none;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    animation:gov-cta-sheen 3.5s ease-in-out infinite !important;
    cursor:pointer;
}
.thm-btn::before,
.gov-btn::before,
#neonShadow::before{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    width:45%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
    transform:skewX(-20deg);
    animation:gov-cta-shine 2.8s ease-in-out infinite;
    pointer-events:none;
}
.thm-btn:hover,
.gov-btn:hover,
#neonShadow:hover{
    background:linear-gradient(270deg, #f0954a, #d97b28, #f0954a) !important;
    background-size:200% 200% !important;
    border-color:#a85a16 !important;
    color:var(--gov-white) !important;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(201,106,26,.35) !important;
}
.thm-btn:active,
.gov-btn:active,
#neonShadow:active{
    transform:translateY(0);
    box-shadow:0 2px 6px rgba(201,106,26,.25) !important;
}
@media (prefers-reduced-motion: reduce){
    .thm-btn,
    .gov-btn,
    #neonShadow{
        animation:none !important;
        background-position:50% 50% !important;
    }
    .thm-btn::before,
    .gov-btn::before,
    #neonShadow::before{
        display:none;
    }
}
.gov-btn-outline{
    background:var(--gov-white);
    color:var(--gov-navy) !important;
    box-shadow:none !important;
}
.gov-btn-outline:hover{
    background:var(--gov-bg-light);
    color:var(--gov-navy-dark) !important;
    border-color:var(--gov-navy);
    box-shadow:0 4px 12px rgba(11,51,88,.12) !important;
}
.gov-announce-btn{
    height:36px !important;
    padding:0 14px !important;
    font-size:12px !important;
    white-space:nowrap;
    border-radius:6px !important;
}

.gov-header-announce-btns{
    display:flex;
    align-items:center;
    gap:10px;
}

/* Primary-CTA variant: warm saffron gradient with a slow animated sheen,
   for the highest-intent actions (enquiry/contact form submits) so they
   stand out from the general navy buttons used everywhere else. Combine
   with .thm-btn (e.g. class="thm-btn gov-btn-cta") to inherit sizing. */
.thm-btn.gov-btn-cta,
.gov-btn.gov-btn-cta{
    position:relative !important;
    overflow:hidden !important;
    background:linear-gradient(270deg, #e2882f, #c96a1a, #e2882f) !important;
    background-size:200% 200% !important;
    border-color:#a85a16 !important;
    animation:gov-cta-sheen 3.5s ease-in-out infinite !important;
}
.thm-btn.gov-btn-cta:hover,
.gov-btn.gov-btn-cta:hover{
    background:linear-gradient(270deg, #f0954a, #d97b28, #f0954a) !important;
    background-size:200% 200% !important;
    border-color:#a85a16 !important;
    box-shadow:0 8px 20px rgba(201,106,26,.35) !important;
}
@keyframes gov-cta-sheen{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}
/* Light streak that sweeps left-to-right across the button and pauses,
   layered on top of the gradient - the 'moving highlight' effect. */
.thm-btn.gov-btn-cta::before,
.gov-btn.gov-btn-cta::before{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    width:45%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
    transform:skewX(-20deg);
    animation:gov-cta-shine 2.8s ease-in-out infinite;
    pointer-events:none;
}
@keyframes gov-cta-shine{
    0%{left:-75%;}
    45%{left:125%;}
    100%{left:125%;}
}
@media (prefers-reduced-motion: reduce){
    .thm-btn.gov-btn-cta,
    .gov-btn.gov-btn-cta{
        animation:none !important;
        background-position:50% 50% !important;
    }
    .thm-btn.gov-btn-cta::before,
    .gov-btn.gov-btn-cta::before{
        display:none;
    }
}

/* Disabled state */
.thm-btn:disabled,
.thm-btn.is-disabled,
.gov-btn:disabled,
.gov-btn.is-disabled{
    opacity:.55;
    cursor:not-allowed;
    pointer-events:none;
    transform:none !important;
    box-shadow:none !important;
}

/* Loading state - CSS-only spinner, no new asset */
.thm-btn.is-loading,
.gov-btn.is-loading{
    color:transparent !important;
    pointer-events:none;
    cursor:wait;
}
.thm-btn.is-loading::after,
.gov-btn.is-loading::after{
    content:"";
    position:absolute;
    width:16px;
    height:16px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    animation:gov-btn-spin .7s linear infinite;
}
@keyframes gov-btn-spin{
    to{transform:rotate(360deg);}
}

/* ---------------------------------------------------------------------
   4. Utility bar + header + nav
   --------------------------------------------------------------------- */
.gov-utility-bar{
    background:var(--gov-navy-dark);
    color:#e7edf3;
    font-size:12.5px;
    padding:6px 0;
}
.gov-utility-bar a{color:#e7edf3;}
.gov-utility-bar .gov-utility-left i{margin-right:6px;color:var(--gov-saffron);}
.gov-skip-link{text-decoration:underline;}
.gov-skip-link:hover{color:#fff;}
.gov-utility-sep{margin:0 12px;opacity:.4;}
.gov-utility-bar .gov-fs-controls{margin-left:10px;}
.gov-utility-bar .gov-fs-controls button{
    background:transparent;
    border:1px solid rgba(255,255,255,.4);
    color:#e7edf3;
    border-radius:3px;
    width:24px;
    height:24px;
    line-height:22px;
    padding:0;
    margin-left:4px;
    font-size:9px;
    cursor:pointer;
}
.gov-utility-bar .gov-fs-controls button:hover{background:rgba(255,255,255,.12);}
.gov-utility-bar .gov-accessibility-icon{color:#e7edf3;margin-right:2px;}
.gov-utility-social{display:flex;align-items:center;gap:8px;}
.gov-utility-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#e7edf3;
    font-size:9px;
    transition:background .2s ease, color .2s ease;
}
.gov-utility-social a:hover{background:var(--gov-saffron);color:var(--gov-white);}

.gov-accent-stripe{display:flex;height:4px;}
.gov-accent-stripe span{flex:1;}
.gov-accent-saffron{background:var(--gov-saffron);}
.gov-accent-green{background:var(--gov-green);}

.header{padding:14px 0;}
/* 3-column header: logo (left) | helpline (center) | announce buttons
   (right) - CSS Grid rather than flex, since flex-wrap kept fighting
   itself when the row ran out of horizontal space (content would wrap
   and lose its left/center/right positions). Grid keeps each piece in
   its own track regardless of content width. */
.header .container-fluid.gov-header-grid{
    display:grid !important;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    column-gap:24px;
    row-gap:12px;
}
.gov-header-grid .logo{justify-self:start;grid-column:1;float:none !important;min-width:0;}
/* The uploaded header_logo image has no intrinsic size constraint of its
   own - under the old float layout that went unnoticed, but a CSS Grid
   "auto" column sizes itself to its content's natural size, so without
   this the logo rendered at full native pixel dimensions (seen as a
   huge logo breaking the whole header). Explicit, fixed size regardless
   of the uploaded file's actual dimensions. */
.header .logo img{
    width:108px !important;
    height:108px !important;
    max-width:108px !important;
    object-fit:contain !important;
    flex-shrink:0;
}
.gov-header-grid .gov-helpline-box{justify-self:center;grid-column:2;}
.gov-header-grid .gov-header-announce-btns{
    justify-self:end;
    grid-column:3;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
}
.gov-header-grid .gov-header-announce-btns .gov-announce-btn{
    height:34px !important;
    padding:0 16px !important;
    font-size:12.5px !important;
    text-align:center;
    justify-content:center;
}
@media (min-width:768px) and (max-width:991px){
    .header .container-fluid.gov-header-grid{grid-template-columns:1fr;justify-items:center;text-align:center;}
    .gov-header-grid .logo,
    .gov-header-grid .gov-helpline-box,
    .gov-header-grid .gov-header-announce-btns{grid-column:1;justify-self:center;}
}

/* ===========================================================================
   MOBILE HEADER (<768px)
   The old template shipped two parallel header blocks toggled by
   .hide-mobile/.hide-desktop (a full desktop header, plus a separate
   float-based fallback for small screens). Two problems: (1) several
   component rules for the desktop header (.gov-header-announce-btns'
   display:flex, .thm-btn's display:inline-flex !important) had higher
   specificity/importance than the plain .hide-mobile{display:none} rule,
   so the "hidden" desktop header never actually disappeared on phones -
   both blocks rendered at once; (2) the fallback block's buttons used
   fixed 40%/60% column widths with full-length button text, which
   overflowed a 375px viewport outright. Rather than patch two competing
   header implementations, the fallback is retired below 768px and the
   primary header is made responsive directly.
   =========================================================================== */
/* Sticky nav shows a small brand mark once the page is scrolled and the
   full header (with the real logo/DOWO text) has scrolled out of view -
   only .mainmenu-area itself goes position:fixed on scroll (see
   .mainmenu-area.stricky-fixed in the vendor stylesheet), not the
   <header> above it, so without this the sticky bar had no branding at
   all on mobile once scrolled. display:none by default (own rule, not
   relying on the vendor's .hide-desktop toggle) so it never shows on
   desktop, which already keeps its full logo visible in the header. */
.gov-sticky-brand{display:none;}
@media (max-width:767px){
    .gov-utility-bar{display:none !important;}

    .header .header-right-info.hide-desktop,
    .header .logo.pull-left.hide-desktop{
        display:none !important;
    }

    .header{padding:16px 0 14px !important;}
    .header .container-fluid.gov-header-grid{
        display:flex !important;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding:0 16px 16px;
        border-bottom:1px solid var(--gov-border);
    }
    /* flex-basis:auto here (the default) sizes each box to its content's
       preferred (single-line) width first and only falls back to
       wrapping once that exceeds the available space - for a string
       this long that produced unstable, ugly wraps (1 line if it just
       barely fit the preferred width, 3 ragged lines the moment it
       didn't). flex-basis:0 + width:100% forces every box in the chain
       to size from available space instead, so the text wraps at a
       consistent, predictable width - a clean 2 lines. */
    .header .logo.hide-mobile{
        display:flex !important;
        align-items:center;
        flex:1 1 0% !important;
        width:100%;
        min-width:0;
        gap:12px;
    }
    .header .logo.hide-mobile > a{
        gap:12px;
        flex:1 1 0% !important;
        width:100%;
        min-width:0;
    }
    .header .logo.hide-mobile img{
        width:68px !important;
        height:68px !important;
        max-width:68px !important;
        margin-right:0 !important;
        flex-shrink:0;
    }
    /* .gov-brand-block is display:flex;flex-direction:column unconditionally
       (see base rule) so its child can stretch to fill the header logo on
       desktop - as a nested flex-in-flex-in-flex chain here on mobile it
       was refusing to actually grow to the width flex-grow should have
       given it (children kept shrink-to-fit sizing despite flex-basis:0
       on every level), leaving ~125px of dead white space unused before
       wrapping. display:block sidesteps the ambiguity entirely: a plain
       block box just fills 100% of its containing block's width, no
       flex-item negotiation involved. */
    .gov-brand-block{
        display:block !important;
        border-left:3px solid var(--gov-saffron);
        padding-left:10px;
        flex:1 1 auto;
        width:100%;
        min-width:0;
    }
    .gov-brand-name{
        display:block;
        width:100%;
        font-size:19px !important;
        font-weight:700;
        line-height:1.25 !important;
        letter-spacing:-.01em;
        color:var(--gov-green) !important;
        max-width:none !important;
    }
    .gov-brand-tagline{display:none;}

    /* Helpline + the Demand Survey/Vrindavan CTA buttons stay visible on
       mobile (kept per feedback, not hidden) - they wrap to their own
       full-width rows below the logo instead of squeezing into the grid's
       3-column desktop layout. */
    .gov-helpline-box.hide-mobile{
        display:block !important;
        flex:1 1 100%;
        text-align:left;
    }
    .gov-header-announce-btns.hide-mobile{
        display:flex !important;
        flex:1 1 100%;
        flex-direction:column;
        gap:8px;
    }
    .gov-header-grid .gov-header-announce-btns .gov-announce-btn{
        width:100%;
        white-space:normal;
        text-align:center;
    }

    .gov-nav-cta.hide-mobile{
        display:inline-flex !important;
        flex:0 0 auto;
        height:38px !important;
        padding:0 12px !important;
        font-size:11.5px !important;
        margin-left:0;
        margin-right:5px;
        white-space:nowrap;
        order:1;
    }
    .gov-nav-cta.hide-mobile span,
    .gov-nav-cta.hide-mobile i{font-size:9px;}
    /* Hamburger toggle moved to the right of Enquire Now (was left of it) */
    .mainmenu-area .navigation.pull-left{order:2;}
    .gov-sticky-brand{
        display:flex !important;
        align-items:center;
        gap:6px;
        order:0;
        margin-right:auto;
        color:var(--gov-white) !important;
        font-weight:700;
        font-size:13px;
        letter-spacing:.02em;
        text-decoration:none;
    }
    .gov-sticky-brand img{
        width:26px !important;
        height:26px !important;
        max-width:26px !important;
        border-radius:50%;
    }

    /* Hamburger button + slide-down menu panel - recolored from the
       vendor's orange (#f14b05) / dark-gray (#262F36) defaults to match
       the site's navy/saffron palette. Open/close behaviour (jQuery
       slideToggle on click) is untouched. */
    .navigation .nav-footer button{
        background:var(--gov-saffron);
        border-radius:4px;
        width:38px !important;
        height:38px !important;
        margin:0 !important;
    }
    /* Moving .navigation to the right of the nav row (order:2, above)
       shifts its own box there too - and the vendor's dropdown panel is
       position:absolute;left:0, which by default is relative to THAT
       shifted box, not the nav bar. Make the whole nav row (.mainmenu-area
       .container, spanning the full width) the positioned ancestor
       instead of .navigation, so the panel opens flush below the nav bar
       and against its true left edge regardless of where the hamburger
       sits within it - a dropdown under the toggle, not a full-height
       off-canvas drawer from the top of the screen. */
    .mainmenu-area .container{position:relative;}
    .navigation{position:static !important;}
    .navigation .nav-header{
        position:absolute !important;
        top:100% !important;
        left:0 !important;
        background:var(--gov-navy-dark) !important;
        width:88% !important;
        max-width:340px !important;
        height:auto !important;
        max-height:calc(100vh - 120px);
        overflow-y:auto;
        overflow-x:hidden;
        box-shadow:0 12px 24px rgba(0,0,0,.3);
    }
    .navigation .nav-header>ul>li>a,
    .navigation .nav-header>ul>li:first-child>a{
        background:transparent !important;
        border-bottom:1px solid rgba(255,255,255,.1) !important;
        color:var(--gov-white) !important;
    }
    .navigation .nav-header>ul>li.active>a,
    .navigation .nav-header>ul>li>a:active{
        background:rgba(255,255,255,.08) !important;
    }
    .navigation .nav-header .dropdown a button{
        background:var(--gov-white) !important;
        color:var(--gov-saffron) !important;
    }
    .navigation .nav-header .submenu{background:var(--gov-navy) !important;}
    .navigation .nav-header .submenu li a{
        color:#d7dee6 !important;
        background:transparent !important;
    }
    /* This page's own nav row already flexes hamburger + CTA apart;
       give it breathing room so neither is cramped on narrow phones. */
    .mainmenu-area .container{padding:8px 15px;}
}
.header .logo{float:none !important;}
.header .logo span{color:var(--gov-navy);}
.header .header-right-info{float:none !important;margin:0 !important;padding-left:0 !important;}
.gov-brand-block{display:flex;flex-direction:column;}
.gov-brand-name{
    font-size:22px;
    font-weight:700;
    color:var(--gov-navy);
    word-wrap:break-word;
    max-width:420px;
    line-height:1.25;
}
.gov-brand-tagline{
    font-size:12px;
    font-weight:400;
    color:var(--gov-muted);
    max-width:460px;
    line-height:1.4;
    margin-top:3px;
}
.gov-helpline-box{
    border:1px solid var(--gov-border);
    border-left:3px solid var(--gov-saffron);
    border-radius:4px;
    padding:8px 16px;
    text-align:right;
}
.gov-helpline-box .gov-helpline-label{
    display:block;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--gov-muted);
    margin-bottom:2px;
}
.gov-helpline-box a{
    font-size:17px;
    font-weight:700;
    color:var(--gov-navy);
}
.gov-helpline-box a:hover{color:var(--gov-saffron);}

.gov-nav-cta{
    height:38px !important;
    padding:0 20px !important;
    font-size:13px !important;
    margin-left:16px;
    white-space:nowrap;
}

.mainmenu-area{background:var(--gov-navy);}
/* Direct-child combinator (.nav-header>ul, not the descendant "ul") so
   these top-level-only rules don't also match links inside the nested
   .submenu dropdown - they used to, and forcing white hover text there
   against the submenu's own white popup background made whichever
   dropdown item was hovered turn invisible (white-on-white). */
.mainmenu-area .nav-header>ul>li>a{
    position:relative;
    color:#eef2f6;
    font-size:14px;
    font-weight:500;
    padding:14px 16px !important;
    border-radius:6px;
}
/* Vendor style.css's .nav-header>ul>li:first-child>a{padding-left:0}
   has higher specificity than a plain custom.css rule and was winning,
   pulling "Home" flush left while the ::after underline below stayed
   anchored at left:16px - the two no longer lined up. Force it back. */
.mainmenu-area .nav-header>ul>li:first-child>a{padding-left:16px !important;}
.mainmenu-area .nav-header>ul>li>a:hover,
.mainmenu-area .nav-header>ul>li.active>a{
    color:var(--gov-white) !important;
    background:rgba(255,255,255,.12) !important;
}
.mainmenu-area .nav-header>ul>li>a::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:6px;
    height:2px;
    border-radius:2px;
    background:var(--gov-saffron);
    opacity:0;
    transform:scaleX(0);
    transition:opacity .2s ease, transform .2s ease;
}
.mainmenu-area .nav-header>ul>li:hover>a::after,
.mainmenu-area .nav-header>ul>li.active>a::after{
    opacity:1;
    transform:scaleX(1);
}
.mainmenu-area .submenu{background:var(--gov-white) !important;box-shadow:0 8px 20px rgba(0,0,0,.15);}
.mainmenu-area .submenu li a{color:var(--gov-navy-dark) !important;font-size:13.5px;background:none !important;}
.mainmenu-area .submenu li a:hover,
.mainmenu-area .submenu li.active>a{background:var(--gov-bg-light) !important;color:var(--gov-saffron) !important;}

/* Latest Updates ticker (replaces the old hardcoded 2-link marquee) -
   badge + scrolling strip of real LatestUpdate records. */
.gov-ticker-wrapper{
    display:flex;
    align-items:stretch;
    background:var(--gov-bg-light);
    border-top:1px solid var(--gov-border);
    border-bottom:1px solid var(--gov-border);
}
.gov-ticker-badge{
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
    background:var(--gov-saffron);
    color:#fff !important;
    font-size:12.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    padding:0 26px 0 18px;
    white-space:nowrap;
    clip-path:polygon(0 0, 100% 0, 85% 100%, 0 100%);
}
.gov-ticker-badge:hover{background:#b25e17;}
.gov-ticker-wrapper .marquee-container{flex:1 1 auto;padding:9px 0;}
.marquee-text{color:var(--gov-navy);}
.gov-ticker-item{
    display:inline-flex !important;
    align-items:center;
    gap:6px;
    font-size:13px !important;
    font-weight:500 !important;
    color:var(--gov-charcoal) !important;
}
.gov-ticker-item i{color:var(--gov-saffron);}
.gov-ticker-item:hover{color:var(--gov-navy) !important;}

/* ---------------------------------------------------------------------
   5. Hero banner
   --------------------------------------------------------------------- */
.gov-hero-overlay{
    position:absolute;
    left:0;right:0;bottom:0;
    height:70px;
    background:linear-gradient(to top, rgba(7,37,68,.35), rgba(7,37,68,0));
    pointer-events:none;
    z-index:5;
}
#jssor_1{max-height:460px;}
/* Applied to a wrapper div around the slider include, not #jssor_1 itself -
   Jssor's own JS toggles visibility:hidden->visible on #jssor_1 once it
   finishes initializing, which would race against a CSS animation placed
   directly on that element (the fade could finish while still hidden,
   then pop fully-visible when Jssor reveals it). A separate wrapper with
   no JS touching it avoids that entirely. */
.gov-hero-fade-wrap{
    animation:gov-hero-fade .6s ease-out both;
}
@keyframes gov-hero-fade{
    from{opacity:0;transform:scale(.98);}
    to{opacity:1;transform:scale(1);}
}
.jssora051{opacity:.85;}
.jssora051:hover{opacity:1;}

/* ---------------------------------------------------------------------
   6. Announcement / important-links strip (existing marquee banners)
   --------------------------------------------------------------------- */
.gov-announce-strip{padding:7px 0 !important;}
.gov-announce-strip h3{
    font-size:13px !important;
    line-height:1.4 !important;
    margin:0 !important;
    color:var(--gov-white) !important;
}
.gov-announce-strip marquee{display:block;line-height:1.4;}
.gov-announce-strip.gov-announce-saffron{background-color:var(--gov-saffron) !important;}
.gov-announce-strip.gov-announce-green{background-color:var(--gov-green) !important;}

/* ---------------------------------------------------------------------
   7. WHY DOWO + Latest Updates panel
   --------------------------------------------------------------------- */
.why-dowo-col{padding-right:28px;}
.why-dowo-col p{max-width:75ch;}

.latest-updates-panel{
    background:var(--gov-bg-light);
    border:1px solid var(--gov-border);
    border-radius:4px;
    padding:18px;
    height:100%;
}
.latest-updates-panel h4{
    font-size:16px;
    color:var(--gov-navy);
    border-bottom:2px solid var(--gov-navy);
    padding-bottom:8px;
    margin-bottom:14px;
}
.latest-update-item{
    display:flex;
    flex-direction:column;
    padding:10px 12px;
    margin:0 -12px;
    border-bottom:1px solid var(--gov-border);
    border-radius:4px;
    transition:background-color .2s ease;
}
.latest-update-item:hover{background:rgba(11,51,88,.04);}
.latest-update-item:last-of-type{border-bottom:none;}
.latest-update-item .lu-date{
    font-size:11.5px;
    color:var(--gov-muted);
    text-transform:uppercase;
    letter-spacing:.03em;
}
.latest-update-item .lu-title{
    font-size:14px;
    font-weight:600;
    color:var(--gov-charcoal);
    margin:4px 0;
}
.latest-update-item .lu-desc{
    font-size:12.5px;
    color:var(--gov-text);
    margin-bottom:6px;
}
.lu-new-badge{
    display:inline-block;
    background:var(--gov-saffron);
    color:var(--gov-white);
    font-size:9px;
    font-weight:700;
    letter-spacing:.03em;
    padding:1px 6px;
    border-radius:3px;
    margin-left:6px;
    vertical-align:middle;
}
.lu-pdf-icon{color:var(--gov-navy);margin-right:4px;}
.lu-actions a{font-size:12.5px;margin-right:12px;}

@media (max-width:991px){
    .why-dowo-col{padding-right:0;margin-bottom:20px;}
    .latest-updates-panel{margin-top:0;}
}

/* ---------------------------------------------------------------------
   8. Associated / government logos

   Pre-existing bug (in front/css/style.css, not introduced by this
   redesign): .fact-counter-wrapper:before is a position:absolute,
   95%-opacity white overlay covering the entire section with no z-index.
   Since unpositioned content paints below positioned content regardless
   of DOM order, that overlay sits on top of the logos, making the whole
   section render as blank white space - the logos and their <img> tags
   are present and loading (verified both fields' HTML/HTTP status), they
   are just visually hidden underneath the overlay. Fix: give this content
   its own stacking context above the overlay.
   --------------------------------------------------------------------- */
.gov-logos-section{
    background:var(--gov-white) !important;
    padding:36px 0 30px !important;
    border-bottom:3px solid var(--gov-navy);
}
.gov-logos-row{
    position:relative;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:56px;
}
.gov-logos-row img{
    max-height:88px;
    width:auto;
    object-fit:contain;
    filter:grayscale(0);
}

/* ---------------------------------------------------------------------
   9. Footer
   --------------------------------------------------------------------- */
.footer{background:var(--gov-navy-dark);padding-top:44px !important;}
.footer .title{color:var(--gov-white);font-size:15px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:10px;margin-bottom:16px;position:relative;}
.footer .title::after{content:"";position:absolute;left:0;bottom:-1px;width:36px;height:2px;background:var(--gov-saffron);}
.footer .footer-widget ul li{margin-bottom:8px;}
.footer .footer-widget ul li a{color:#d7dee6;font-size:13px;transition:color .2s ease, padding-left .2s ease;}
.footer .footer-widget ul li a:hover{color:var(--gov-white);padding-left:3px;}

/* Footer brand block - mirrors the header's logo + name/tagline lockup
   (var(--gov-white) text) instead of the old baked-in-raster footer_logo
   image, whose embedded green text was unreadable on the navy background. */
.gov-footer-brand-block{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    margin-bottom:22px;
}
.gov-footer-brand-block img{
    width:96px !important;
    height:96px !important;
    max-width:96px !important;
    object-fit:contain !important;
    flex-shrink:0;
    margin:0 !important;
}
.gov-footer-brand-text{display:flex;flex-direction:column;}
.gov-footer-brand-name{
    color:var(--gov-white);
    font-size:16px;
    font-weight:700;
    line-height:1.3;
}
.gov-footer-brand-tagline{
    color:#a9b7c6;
    font-size:11.5px;
    line-height:1.4;
    margin-top:4px;
}

.footer .footer-widget.about-widget ul.contact{margin-top:4px;}
.footer .footer-widget.about-widget ul.contact li{
    display:flex;
    align-items:center;
    gap:12px;
    color:#d7dee6;
    font-size:13px;
    margin-bottom:14px;
}
.footer .footer-widget.about-widget ul.contact li i{
    width:32px;
    height:32px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    color:var(--gov-saffron);
    font-size:14px;
    margin-top:0;
    padding-right:0 !important;
}
.footer .footer-widget.about-widget ul.contact li a{color:#d7dee6;display:flex;align-items:center;gap:12px;width:100%;}
.footer .footer-widget.about-widget ul.contact li a:hover{color:var(--gov-white);}
.footer .footer-widget.about-widget ul.contact li:last-child{align-items:flex-start;}
.footer .footer-widget.about-widget ul.contact li:last-child i{margin-top:2px;}
.footer .footer-widget .social{margin-top:18px;display:flex;gap:10px;}
.footer .footer-widget .social li a{
    border-color:rgba(255,255,255,.25);
    color:#d7dee6;
    margin-right:0;
    transition:all .2s ease;
}
.footer .footer-widget .social li a:hover{
    background:var(--gov-saffron) !important;
    border-color:var(--gov-saffron) !important;
    color:var(--gov-white) !important;
    transform:translateY(-2px);
}

/* Enquiry form fields - the vendor style.css gives these flat, sharp-
   cornered dark-gray boxes; round them and add a saffron focus ring to
   match the rest of the site's premium/gov aesthetic. */
.footer .contact-widget input,
.footer .contact-widget textarea{
    background:rgba(255,255,255,.07) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:6px !important;
    color:var(--gov-white) !important;
    transition:border-color .2s ease, background .2s ease;
}
.footer .contact-widget input::placeholder,
.footer .contact-widget textarea::placeholder{color:#9fb0c0;}
.footer .contact-widget input:focus,
.footer .contact-widget textarea:focus{
    background:rgba(255,255,255,.1) !important;
    border-color:var(--gov-saffron) !important;
    outline:none;
}
.footer .contact-widget .form-group label{color:#c3ccd6 !important;}
.footer .contact-widget .form-group input[type="checkbox"]{accent-color:var(--gov-saffron);}
.footer .contact-widget .form-group a{color:var(--gov-saffron) !important;}

.footer-bottom{background:var(--gov-navy-dark);border-top:1px solid rgba(255,255,255,.12);padding:16px 0;}
.footer-bottom p,.footer-bottom *{color:#c3ccd6;font-size:12.5px;}

/* ---------------------------------------------------------------------
   10. Font-size accessibility control
   --------------------------------------------------------------------- */
html{font-size:100%;}
html.fs-sm{font-size:87.5%;}
html.fs-lg{font-size:112%;}
html.fs-xl{font-size:125%;}

@media (max-width:767px){
    .gov-utility-bar{font-size:9px;}
}

/* ---------------------------------------------------------------------
   11. Scroll animations (WOW.js + animate.css, both already shipped with
   the template but never wired up until now - see js.blade.php for the
   guarded init). Keep durations short/subtle per the "no excessive
   motion" requirement, and fully disable for prefers-reduced-motion.
   --------------------------------------------------------------------- */
.animated{animation-duration:.5s !important;}

@media (prefers-reduced-motion: reduce){
    .wow{opacity:1 !important;animation:none !important;}
    #jssor_1,
    .gov-hero-fade-wrap{animation:none !important;opacity:1 !important;transform:none !important;}
    *{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;}
}

/* ---------------------------------------------------------------------
   12. FAQ accordion - had no CSS at all (base style.css has zero rules
   for .faq-title/.faq-content/details), relying entirely on unstyled
   browser defaults for the <details>/<summary> markup.
   --------------------------------------------------------------------- */
.faq-container details{
    background:var(--gov-white);
    border:1px solid var(--gov-border);
    border-radius:6px;
    margin-bottom:12px;
    overflow:hidden;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-container details:hover{
    border-color:var(--gov-navy);
    box-shadow:0 2px 8px rgba(11,51,88,.08);
}
.faq-container details[open]{
    border-color:var(--gov-navy);
}
.faq-container summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 20px;
    cursor:pointer;
    list-style:none;
}
.faq-container summary::-webkit-details-marker{display:none;}
.faq-container .faq-title{
    font-size:15px;
    font-weight:600;
    color:var(--gov-charcoal);
}
.faq-container .expand-icon{
    flex-shrink:0;
    color:var(--gov-navy);
}
.faq-container .faq-content{
    padding:0 20px 18px;
    font-size:14px;
    color:var(--gov-text);
    line-height:1.7;
}

/* ---------------------------------------------------------------------
   13. Project details page - amenities grid
   --------------------------------------------------------------------- */
.gov-amenity-item{
    padding:16px 8px;
    border-radius:6px;
    transition:background-color .2s ease, transform .2s ease;
}
.gov-amenity-item:hover{
    background:var(--gov-bg-light);
    transform:translateY(-2px);
}
.gov-amenity-item img{transition:transform .2s ease;}
.gov-amenity-item:hover img{transform:scale(1.08);}
.gov-amenity-item p{
    margin-top:8px;
    font-size:13px;
    color:var(--gov-text);
}

/* front/assets/css/style.css sets .bd-section-title to 54px at this
   breakpoint - reduced per request, kept as an override here rather
   than editing the vendor stylesheet directly. */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .bd-section-title{
        font-size:46px !important;
    }
}

/* ---------------------------------------------------------------------
   14. Coming Soon page (front/static/coming-soon.blade.php)
   --------------------------------------------------------------------- */
.gov-coming-soon-section{background:var(--gov-bg-light);}
.gov-coming-soon{
    background:var(--gov-white);
    border:1px solid var(--gov-border);
    border-top:4px solid var(--gov-saffron);
    border-radius:12px;
    box-shadow:0 10px 30px rgba(11,51,88,.08);
    padding:56px 40px;
    text-align:center;
}
.gov-coming-soon-icon{
    width:96px;
    height:96px;
    margin:0 auto 22px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, var(--gov-navy) 0%, var(--gov-navy-dark) 100%);
    color:var(--gov-white);
    font-size:38px;
    box-shadow:0 8px 20px rgba(11,51,88,.25);
    animation:gov-coming-soon-pulse 2.4s ease-in-out infinite;
}
@keyframes gov-coming-soon-pulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.06);}
}
.gov-coming-soon-badge{
    display:inline-block;
    background:rgba(201,106,26,.12);
    color:var(--gov-saffron);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:6px 16px;
    border-radius:20px;
    margin-bottom:16px;
}
.gov-coming-soon-title{
    color:var(--gov-navy);
    font-size:30px;
    font-weight:700;
    margin-bottom:14px;
}
.gov-coming-soon-text{
    color:var(--gov-muted);
    font-size:15px;
    line-height:1.7;
    max-width:560px;
    margin:0 auto 30px;
}
.gov-coming-soon-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}
@media (prefers-reduced-motion: reduce){
    .gov-coming-soon-icon{animation:none !important;}
}
@media (max-width:575px){
    .gov-coming-soon{padding:40px 20px;}
    .gov-coming-soon-title{font-size:24px;}
}

/* ---------------------------------------------------------------------
   15. Contact page (front/static/contact.blade.php)
   --------------------------------------------------------------------- */
.gov-contact-section{background:var(--gov-bg-light);}
.gov-map-card{
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--gov-border);
    box-shadow:0 10px 30px rgba(11,51,88,.08);
    margin-bottom:40px;
}
.gov-map-card iframe{display:block;}
.gov-contact-grid{align-items:stretch;}
.gov-contact-card{
    background:var(--gov-white);
    border-radius:12px;
    border-top:4px solid var(--gov-saffron);
    box-shadow:0 10px 30px rgba(11,51,88,.08);
    padding:36px;
    height:100%;
}
.gov-contact-title{
    font-size:22px;
    font-weight:700;
    color:var(--gov-navy);
    margin-bottom:26px !important;
    padding-bottom:12px;
    position:relative;
}
.gov-contact-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:44px;
    height:3px;
    border-radius:2px;
    background:var(--gov-saffron);
}

/* Form fields */
.gov-contact-form-card .contact-form input,
.gov-contact-form-card .contact-form textarea{
    border:1px solid var(--gov-border) !important;
    border-radius:8px !important;
    height:52px !important;
    padding-left:16px !important;
    font-size:14px;
    line-height:normal !important;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.gov-contact-form-card .contact-form textarea{
    height:100% !important;
    min-height:190px;
    padding-top:14px !important;
    resize:vertical;
}
.gov-contact-form-card .contact-form input:focus,
.gov-contact-form-card .contact-form textarea:focus{
    border-color:var(--gov-saffron) !important;
    box-shadow:0 0 0 3px rgba(201,106,26,.12);
    outline:none;
}

/* Location checkboxes -> pill/chip toggle group */
.gov-location-chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:2px 0 20px;
}
.gov-location-chips .formcheck{margin-bottom:0;}
.gov-location-chips .formcheck label{
    margin:0;
    padding:9px 18px;
    border:1.5px solid var(--gov-border);
    border-radius:20px;
    font-size:13px;
    font-weight:500;
    color:var(--gov-navy);
    transition:all .2s ease;
}
.gov-location-chips .formcheck label:before{display:none !important;}
.gov-location-chips .formcheck input:checked + label:after{display:none !important;}
.gov-location-chips .formcheck input:checked + label{
    background:var(--gov-saffron);
    border-color:var(--gov-saffron);
    color:var(--gov-white);
}
.gov-location-chips .formcheck label:hover{border-color:var(--gov-saffron);}

/* Address / info card */
.gov-contact-info-card{
    background:linear-gradient(160deg, var(--gov-navy) 0%, var(--gov-navy-dark) 100%);
    color:var(--gov-white);
}
.gov-contact-info-card .gov-contact-title{color:var(--gov-white);}
.gov-contact-info-card .contact-info li{
    transition:transform .2s ease;
}
.gov-contact-info-card .contact-info li:hover{transform:translateX(4px);}
.gov-contact-info-card .icon-box .inner{
    background:var(--gov-saffron) !important;
    width:56px !important;
    height:56px !important;
    line-height:56px !important;
    font-size:22px !important;
}
.gov-contact-info-card .content-box h4{color:var(--gov-white) !important;}
.gov-contact-info-card .content-box p{color:rgba(255,255,255,.72) !important;}

/* ---------------------------------------------------------------------
   16. Legal document pages (front/static/common.blade.php - Privacy
   Policy, Terms of Service)
   --------------------------------------------------------------------- */
.gov-legal-section{background:var(--gov-bg-light);}
.gov-legal-card{
    position:relative;
    background:var(--gov-white);
    border:1px solid var(--gov-border);
    border-top:4px solid var(--gov-saffron);
    border-radius:12px;
    box-shadow:0 10px 30px rgba(11,51,88,.08);
    padding:48px 56px;
}
.gov-legal-icon{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg, var(--gov-navy) 0%, var(--gov-navy-dark) 100%);
    color:var(--gov-white);
    font-size:24px;
    margin-bottom:24px;
    box-shadow:0 6px 16px rgba(11,51,88,.2);
}
.gov-legal-card .full-sec-content h1,
.gov-legal-card .full-sec-content h2,
.gov-legal-card .full-sec-content h3,
.gov-legal-card .full-sec-content h4{
    color:var(--gov-navy);
    font-weight:700;
    margin-top:28px;
    margin-bottom:12px;
    padding-bottom:8px;
    border-bottom:1px solid var(--gov-border);
}
.gov-legal-card .full-sec-content h1:first-child,
.gov-legal-card .full-sec-content h2:first-child,
.gov-legal-card .full-sec-content h3:first-child,
.gov-legal-card .full-sec-content h4:first-child{margin-top:0;}
.gov-legal-card .full-sec-content p{
    color:var(--gov-text);
    line-height:1.8;
    margin-bottom:14px;
}
.gov-legal-card .full-sec-content ul,
.gov-legal-card .full-sec-content ol{
    margin-bottom:16px;
    padding-left:22px;
}
.gov-legal-card .full-sec-content li{
    color:var(--gov-text);
    line-height:1.8;
    margin-bottom:6px;
}
/* This content is CKEditor output using <strong> section labels on their
   own line (via <br>) rather than real heading tags - style them to read
   as section headings without touching the stored HTML. */
.gov-legal-card .full-sec-content strong{
    display:inline-block;
    color:var(--gov-navy);
    font-size:17px !important;
    font-weight:700;
    margin-top:26px;
    margin-bottom:6px;
    padding-bottom:6px;
    border-bottom:1px solid var(--gov-border);
}
.gov-legal-card .full-sec-content p:first-of-type strong:first-child{margin-top:0;}
@media (max-width:575px){
    .gov-legal-card{padding:28px 22px;}
}

/* ---------------------------------------------------------------------
   17. Blogs list + blog detail (front/static/blogs.blade.php,
   front/group/single.blade.php - both reuse the vendor .bi-blog-feed-item-2
   / .bi-sidebar-widget components)
   --------------------------------------------------------------------- */
.blog-list-wrapp{background:var(--gov-bg-light);}
.bi-blog-feed-item-2{
    border:1px solid var(--gov-border) !important;
    border-radius:10px !important;
    box-shadow:0 4px 14px rgba(11,51,88,.06);
    transition:box-shadow .2s ease, transform .2s ease;
    background:var(--gov-white);
}
.blog-list-wrapp .col-lg-4 .bi-blog-feed-item-2:hover{
    box-shadow:0 10px 26px rgba(11,51,88,.14);
    transform:translateY(-4px);
}
.bi-blog-feed-item-2 .blog-meta{
    background-color:var(--gov-navy) !important;
    border-color:var(--gov-white) !important;
}
.bi-blog-feed-item-2 .blog-meta i{margin-right:6px;color:var(--gov-saffron);}
.bi-blog-feed-item-2 .blog-text h3{color:var(--gov-navy);font-size:18px;}
.bi-blog-feed-item-2 .blog-text h3 a{color:var(--gov-navy) !important;transition:color .2s ease;}
.bi-blog-feed-item-2 .blog-text h3 a:hover{color:var(--gov-saffron) !important;}
.bi-blog-feed-item-2 .blog-text p{color:var(--gov-text) !important;line-height:1.7;}

/* Compact button variant, used for card-level "Read More" CTAs */
.gov-btn-sm.thm-btn,
.gov-btn-sm.gov-btn{
    height:38px !important;
    padding:0 20px !important;
    font-size:13px !important;
    border-radius:6px !important;
}

/* Blog detail: feature-image meta row + article typography */
.blog-detail-wrapp .bi-blog-feed-item-2 .blog-img ul{
    border-color:var(--gov-navy) !important;
}
.blog-detail-wrapp .bi-blog-feed-item-2 .blog-img ul li a{color:var(--gov-navy);font-weight:600;}
.blog-detail-wrapp .blog-detail-text h1{
    color:var(--gov-navy);
    font-size:28px;
    font-weight:700;
    margin:20px 0 16px;
}
.blog-detail-wrapp .blog-detail-text{color:var(--gov-text);line-height:1.8;}
.blog-detail-wrapp .blog-detail-text p{margin-bottom:14px;}
.blog-detail-wrapp .blog-detail-text img{border-radius:10px;margin:16px 0;max-width:100%;height:auto;}

/* Sidebar widgets (Blog Category, Recent Post) */
.bi-sidebar-widget .widget-title{color:var(--gov-navy);font-size:19px;}
.bi-sidebar-widget .widget-title:before{background-color:var(--gov-saffron);}
.bi-sidebar-widget .widget-area{border-color:var(--gov-border) !important;box-shadow:0 2px 8px rgba(11,51,88,.05);}
.bi-sidebar-widget .service-widget li a{background-color:var(--gov-bg-light);color:var(--gov-navy);}
.bi-sidebar-widget .service-widget li a:hover,
.bi-sidebar-widget .tag-widget a:hover{background-color:var(--gov-saffron) !important;color:var(--gov-white) !important;}
.bi-sidebar-widget .service-widget li a:after{background-color:rgba(201,106,26,.3);}
.bi-sidebar-widget .service-widget li a:hover:after{background-color:var(--gov-navy-dark);}
.bi-sidebar-widget .recent-post-widget .bi-recent-blog-item{
    background:var(--gov-bg-light);
    transition:background .2s ease;
}
.bi-sidebar-widget .recent-post-widget .bi-recent-blog-item:hover{background:#eef2f6;}
.bi-sidebar-widget .recent-post-widget .bi-recent-blog-item .bi-recent-blog-text span{color:var(--gov-saffron);}
.bi-sidebar-widget .recent-post-widget .bi-recent-blog-item .bi-recent-blog-text h3 a{color:var(--gov-navy) !important;}
.bi-sidebar-widget .recent-post-widget .bi-recent-blog-item .bi-recent-blog-text h3 a:hover{color:var(--gov-saffron) !important;}

/* ---------------------------------------------------------------------
   18. Mobile/tablet responsive pass (<=991px) - see individual comments
   for what each block addresses. Desktop (>=992px) is untouched.
   --------------------------------------------------------------------- */

/* WHY DOWO's bxSlider carousel (.bx-event-carousel) positions its .event
   slides with JS-injected inline absolute positioning so only one shows
   at a time; the plugin's own required CSS was never included in this
   build, so at narrow widths the slides render stacked on top of each
   other instead of cycling - all their text overlapping illegibly.
   Force normal block flow at mobile/tablet widths, turning it into a
   plain stacked list instead (a common, sensible pattern for carousels
   on small screens anyway). !important needed to beat the inline styles. */
@media (max-width:991px){
    .bx-event-carousel,
    .bx-event-carousel ul,
    .bx-event-carousel .event{
        position:static !important;
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        left:auto !important;
        top:auto !important;
        float:none !important;
        transform:none !important;
        margin-bottom:18px !important;
    }
    .bx-event-carousel .bx-viewport{height:auto !important;}
}

/* Every inner page (About, Contact, Blogs, Blog Detail, Coming Soon,
   legal pages, project pages) shares this .inner-header banner with a
   40px/58px-line-height <h1> - fine on desktop, but a multi-word blog
   title wraps to 3-4 huge lines on a phone, pushing the breadcrumb
   uncomfortably tight against it. */
@media (max-width:767px){
    .inner-header .sec-title h1{font-size:24px !important;line-height:1.3 !important;}
    .inner-header{padding-top:20px !important;padding-bottom:16px !important;}
    .breadcumb{margin-top:10px !important;}
}
@media (min-width:768px) and (max-width:991px){
    .inner-header .sec-title h1{font-size:32px !important;line-height:1.35 !important;}
}

/* Blog detail's Admin/date meta pill is width:75% with a 50px pill
   border-radius, sized for desktop - too narrow on a phone, so its two
   items wrapped inside the rounded box instead of sitting on one line. */
@media (max-width:575px){
    .blog-detail-wrapp .bi-blog-feed-item-2 .blog-img ul{
        width:100% !important;
        flex-wrap:wrap;
        border-radius:10px !important;
        gap:6px 0;
    }
}

/* Contact page (mobile only): put the Message box right after Phone
   Number instead of after the location chips + checkboxes, per request.
   The form is two Bootstrap columns (name/email/phone/chips/checkboxes
   on the left, message textarea on the right) that Bootstrap simply
   stacks column-by-column on narrow screens - not the field order
   wanted here. display:contents on both column wrappers flattens their
   children into direct flex items of the .row itself so each field can
   be given an explicit order, without touching desktop's two-column
   layout at all (only active below 768px). */
@media (max-width:767px){
    .contact-form.row{
        display:flex !important;
        flex-direction:column;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    .contact-form.row > .col-md-6{display:contents;}
    .contact-form input[name="name"]{order:1;}
    .contact-form input[name="email"]{order:2;}
    .contact-form input[name="mobile"]{order:3;}
    .contact-form textarea[name="message"]{order:4;width:100%;}
    .contact-form .gov-location-chips{order:5;}
    .contact-form .form-group{order:6;}
    .contact-form input[type="hidden"]{order:7;}
    .contact-form > .col-md-12{order:8;}
}