/* ---- Footer logo visibility fix: white rounded box behind the logo so
   it's visible against the footer's dark background. Previously this
   only existed as an inline <style> on index.html, so every other page
   showed the logo without it - centralized here since this file is
   already linked on every page. ---- */
.footer-logo figure{
    background: #ffffff;
    display: inline-block;
    padding: 10px 16px;
    border-radius: 6px;
}
.footer-logo img{
    max-height: 55px;
    width: auto;
}

/* ==========================================================================
   Header Restructure v5 — Centered nav, search only in the nav row,
   Get a Quotes moved up to header-upper (replacing the old email slot,
   with email moved into the old Head Office slot, and Head Office removed
   entirely).

   Why this is more robust than the previous version: the nav row no
   longer needs to fit 11 items + a button + a search box all in one line.
   With only the nav + a small search icon sharing the row, there's a much
   bigger safety margin against the Windows scaling / browser zoom / font
   rendering differences between machines that caused the earlier
   one-line layout to work on some PCs and not others.
   ========================================================================== */

/* Topbar (logo / email / call-WhatsApp row) stays edge-to-edge full width -
   only the nav menu row below it is switched to match the page-content
   container's edges. */
.header-upper .container{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}

/* Header-lower (nav menu) container now matches the same .container used
   by every section below it (Bootstrap's centered, max-width column), so
   the nav row's left/right edges line up with the page content (e.g. the
   card grid's outer border) instead of running edge-to-edge. */

/* ---- Fix: dropdown menu turns see-through, letting page content behind
   it bleed through, when it's opened after the header has gone sticky
   (position: fixed) on scroll. Root cause: the dropdown <ul> and the
   sticky header both use "transition: all", which also animates the
   position/background jump instead of applying it instantly - Chrome
   promotes the element to a temporary compositing layer for that
   cross-fade, and it can render partially transparent while scrolled.
   Scoping the transitions to only the properties that actually change
   (box-shadow) stops that jump from being animated at all. Solid
   background-color + opaque background-image:none is a second layer of
   defence against any bleed-through. ---- */
.main-menu .navigation > li > ul{
    transition: box-shadow 300ms ease !important;
    background-color: #00bffe;
    background-image: none;
}
.main-menu .navigation > li > ul > li > a{
    background-image: none;
}
.main-header.fixed-header .header-lower{
    transition: none !important;
}

/* ---- Footer: fix invisible phone number links on hover ---- */
.newsletter-widget .text a,
.newsletter-widget .text a:hover,
.newsletter-widget .text a:focus,
.newsletter-widget .text a:visited{
    color: #4bd2fe !important;
}
.newsletter-widget .text a:hover{
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* ---- Header-upper: Get a Quotes button in the old email slot ---- */
.upper-right{
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.upper-quote-btn{
    display: inline-block;
    background: #17a4e9;
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    padding: 12px 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(23,164,233,.28);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.upper-quote-btn:hover{
    background: #0f7fbf;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(23,164,233,.38);
}

/* ---- Header-lower: nav spans the full container width, "Home" flush on
   the left and "Terms and Conditions" flush on the right, so the nav
   TEXT itself is what matches the card grid's left/right border below -
   the search icon is intentionally excluded from that alignment and just
   sits at the far right of the header bar (see .nav-right-utility). ---- */
.header-lower .nav-outer{
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 60px;
}

.nav-outer .main-menu{
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.nav-outer .main-menu .navbar-collapse{
    width: 100%;
}

.nav-outer .navigation{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Tightened spacing so all 12 items still fit on one line now that the
   header container matches the narrower page-content container instead
   of running edge-to-edge. */
.nav-outer .navigation > li{
    float: none !important;
    white-space: nowrap;
    margin-right: 12px !important;
}
.nav-outer .navigation > li:last-child{
    margin-right: 0 !important;
}
.nav-outer .navigation > li > a{
    font-size: 13px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* Search sits on its own at the far right of the header BAR itself (like
   the topbar's edge padding), not the narrower content container - it's
   deliberately excluded from the card-border alignment above, so it's
   positioned against .header-lower (full width, position:relative from
   style.css) rather than .container (bootstrap.css gives EVERY .container
   position:relative, which would otherwise catch the search icon's
   absolute positioning first and pull it in to the container's edge). */
.header-lower{
    overflow: visible;
}
.header-lower .container{
    position: static;
}
.nav-right-utility{
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

/* Collapsible search: starts as an icon-only circle, expands into an
   input when clicked (toggled via .search-open class added by JS) */
.nav-search-box{
    display: flex;
    align-items: center;
}
.nav-search-box form{
    display: flex;
}
.nav-search-box fieldset{
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
}
.nav-search-box input[type="search"]{
    width: 0;
    opacity: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 8px 0;
    font-size: 13px;
    color: #333;
    transition: width .25s ease, opacity .2s ease, padding .25s ease, border-color .25s ease;
    pointer-events: none;
}
.nav-search-box.search-open input[type="search"]{
    width: 160px;
    opacity: 1;
    padding: 8px 34px 8px 14px;
    pointer-events: auto;
}
.nav-search-box.search-open input[type="search"]:focus{
    outline: none;
    border-color: #17a4e9;
}
.nav-search-box input[type="search"]::placeholder{
    color: #999;
}
.nav-search-box button{
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1eb1f5, #0f7fbf);
    border: none;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(23, 164, 233, .4);
    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav-search-box.search-open button{
    position: absolute;
    right: 3px;
    width: 30px;
    height: 30px;
    box-shadow: none;
}
.nav-search-box button:hover{
    background: linear-gradient(135deg, #0f9be9, #0b6ba3);
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 5px 14px rgba(23, 164, 233, .55);
}

/* ---- Live search results dropdown (see service-search.js). Anchored to
   the search fieldset (already position:relative above) rather than the
   input itself, so it's unaffected by the input's own width animation. ---- */
.search-results-dropdown{
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    max-height: 320px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    z-index: 50;
}
.search-results-dropdown.is-open{
    display: block;
}
.search-results-dropdown .search-result-item{
    display: block;
    padding: 11px 16px;
    font-size: 13px;
    color: #333333;
    border-bottom: 1px solid #f0f3f6;
    transition: background-color .15s ease, color .15s ease;
}
.search-results-dropdown .search-result-item:last-child{
    border-bottom: none;
}
.search-results-dropdown .search-result-item:hover,
.search-results-dropdown .search-result-item.is-active{
    background: #eaf6fd;
    color: #17a4e9;
}
.search-results-dropdown .search-result-item mark{
    background: none;
    color: #17a4e9;
    font-weight: 700;
}
.search-results-dropdown .search-results-empty{
    padding: 14px 16px;
    font-size: 13px;
    color: #888888;
}

/* ---- Responsive ---- */
@media (max-width: 991px){
    .nav-outer{
        flex-direction: column;
        min-height: 0;
        padding: 10px 0;
    }
    .nav-right-utility{
        position: static;
        transform: none;
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        border-top: 1px solid #eef1f4;
    }
    .nav-search-box{
        justify-content: center;
    }
    /* The dropdown was right-anchored to the fieldset for the desktop
       layout, where the search box sits at the far right of the bar. On
       mobile the search box is centered instead, so right:0 could push a
       300px-wide dropdown off the left edge of narrow phones. Center it
       under the fieldset (which is itself centered on the page) instead,
       capped so it never exceeds the viewport width. */
    .search-results-dropdown{
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: min(300px, 88vw);
    }
    .upper-right{
        flex-wrap: wrap;
        gap: 12px;
    }
}
@media (max-width: 480px){
    .nav-search-box.search-open input[type="search"]{
        width: 130px;
    }
}

/* ==========================================================================
   v8 additions
   ========================================================================== */

.footer-about .text p{
    text-align: justify;
}

/* ---- Fix long dropdown item text overflowing past its box edge ----
   e.g. "Gumasta License / Trade License" under Other. Forces wrapping to
   a second line within the fixed-width box instead of spilling past it.
   Applies to both 2nd-level and 3rd-level submenu items. */
.main-menu .navigation > li > ul > li > a,
.main-menu .navigation > li > ul > li > ul > li > a{
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 22px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* ---- 1. WhatsApp icon: real circular badge instead of a plain colored
   glyph, and now an actual clickable WhatsApp chat link (wa.me), not just
   decorative text sitting next to a phone-call link ---- */
.whatsapp-icon-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #25D366;
    margin-right: 6px;
    box-shadow: 0 3px 8px rgba(37,211,102,.45);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    vertical-align: middle;
    flex-shrink: 0;
}
.whatsapp-icon-link i{
    color: #ffffff !important;
    font-size: 14px;
}
.whatsapp-icon-link:hover{
    background: #1ebe5a;
    transform: scale(1.15);
    box-shadow: 0 5px 14px rgba(37,211,102,.6);
}

/* ---- Matching badge for the phone icon, same size/shape as the
   WhatsApp badge so both icons look like a deliberate pair ---- */
.phone-icon-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #17a4e9;
    margin-right: 6px;
    box-shadow: 0 3px 8px rgba(23,164,233,.45);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    vertical-align: middle;
    flex-shrink: 0;
}
.phone-icon-link i{
    color: #ffffff !important;
    font-size: 14px;
}
.phone-icon-link:hover{
    background: #0f7fbf;
    transform: scale(1.15);
    box-shadow: 0 5px 14px rgba(23,164,233,.6);
}

/* ---- Topbar contact row: Email / WhatsApp / Toll Free arranged
   horizontally in one row. Reuses the theme's existing .info-box /
   .icon-box / h6+span pattern (the same one the email box already used)
   so WhatsApp and Toll Free automatically pick up identical typography
   and icon-circle sizing/position instead of introducing a second visual
   language. The row's own flex+gap replaces the base theme's
   float+margin-left spacing between .info-box columns, which is what
   lets the email box sit closer to the logo while all three items stay
   evenly spaced and fit on one line. ---- */
.header-upper .upper-right .topbar-contact-row{
    display: flex;
    align-items: center;
    gap: 32px;
}
.header-upper .upper-right .topbar-contact-row .info-box{
    float: none;
    margin-left: 0;
}
/* Fix: base theme rule ".header-upper .info-box:last-child{ padding-left:0 }"
   (style.css) was written for the old 2-column topbar, where the last
   column didn't need icon spacing. Toll Free is now the last column in
   this 3-item row, so that rule was zeroing out its 64px icon gutter -
   collapsing the number/label text back under the icon instead of beside
   it. Restore the gutter here so Toll Free lines up exactly like Email
   and WhatsApp. */
.header-upper .upper-right .topbar-contact-row .info-box:last-child{
    padding-left: 64px !important;
    padding-right: 0 !important;
}

/* Email icon: white circle badge with a red/yellow/green/blue "M"
   envelope glyph - the familiar multi-color mail-icon look the user
   referenced (Gmail's classic icon uses this same 4-color scheme), drawn
   as an original geometric "M" rather than tracing Google's exact
   trademarked artwork. Replaces the earlier coral-gradient circle +
   plain white envelope. Scoped to .topbar-email-icon only, so the base
   .header-upper .info-box .icon-box circle style (still relied on for
   this icon's 42px size/position) and the unrelated
   .flaticon-open-email-message icon used elsewhere on some pages (e.g.
   the services icon grid) are unaffected. */
.header-upper .upper-right .topbar-contact-row .topbar-email-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #eef0f3;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .14);
    transition: transform .2s ease, box-shadow .2s ease;
}
.header-upper .upper-right .topbar-contact-row .topbar-email-icon:hover{
    transform: scale(1.08);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .2);
}
.header-upper .upper-right .topbar-contact-row .topbar-email-icon svg{
    display: block;
    width: 40px;
    height: 40px;
}
.header-upper .upper-right .topbar-contact-row .info-box h6 a{
    color: #333333;
    font-weight: 600;
}
.header-upper .upper-right .topbar-contact-row .info-box h6 a:hover{
    color: #00bffe;
}

/* WhatsApp / Toll Free icon circles: resized/repositioned to match the
   email icon's circle (.header-upper .info-box .icon-box is 42px,
   absolutely positioned at the left of the column). Scoped to
   .topbar-contact-item so the footer's plain (26px, inline)
   .whatsapp-icon-link / .phone-icon-link badges are untouched.

   Fix: the base theme rule .header-upper .info-box .icon-box (3 classes)
   and .header-upper .info-box .icon-box i:before (3 classes + pseudo)
   in style.css are MORE specific than the plain .whatsapp-icon-link /
   .phone-icon-link / "...i" brand-color rules above, so without
   !important here those base rules silently won the cascade - repainting
   both circles the same grey (#f6f6f6) and both glyphs the same pale
   blue (#40cffe), which is why WhatsApp only "sort of" read as green and
   Toll Free effectively disappeared. Forcing brand background + white
   glyph with !important, scoped tightly to .topbar-contact-item, is what
   actually wins. */
.header-upper .info-box.topbar-contact-item .icon-box{
    position: absolute;
    left: 0;
    top: 5px;
    width: 42px;
    height: 42px;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    z-index: 2;
    visibility: visible;
}
.header-upper .info-box.topbar-contact-item .icon-box i{
    font-size: 18px;
    display: inline-block;
    visibility: visible;
}
.header-upper .info-box.topbar-contact-item .icon-box.whatsapp-icon-link{
    background-color: #25D366 !important;
}
.header-upper .info-box.topbar-contact-item .icon-box.phone-icon-link{
    background-color: #17a4e9 !important;
}
.header-upper .info-box.topbar-contact-item .icon-box i,
.header-upper .info-box.topbar-contact-item .icon-box i:before{
    color: #ffffff !important;
}

@media only screen and (max-width: 1200px){
    .header-upper .upper-right .topbar-contact-row{
        gap: 20px;
    }
}
@media only screen and (max-width: 991px){
    .header-upper .upper-right .topbar-contact-row{
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 24px;
    }
}
@media only screen and (max-width: 480px){
    .header-upper .upper-right .topbar-contact-row{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ---- 2. Footer social icons: real brand colors instead of plain black
   circles, so each one is instantly recognizable ---- */
.socials-link-one li a{
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.socials-link-one li:nth-child(1) a{ background: #1877F2; } /* Facebook */
.socials-link-one li:nth-child(2) a{ background: #000000; } /* X / Twitter */
.socials-link-one li:nth-child(3) a{ background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); } /* Instagram */
.socials-link-one li:nth-child(4) a{ background: #FF0000; } /* YouTube */
.socials-link-one li:nth-child(5) a{ background: #0A66C2; } /* LinkedIn */
.socials-link-one li a:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,.35);
    filter: brightness(1.08);
}

/* ---- 3. Nav hover + persistent "current page" indicator - strengthened
   with both a background highlight AND an underline, so it's unmistakably
   visible, not just a subtle color change. Same treatment for hover and
   current so the active page always looks "hovered". ---- */
.main-menu .navigation > li > a{
    position: relative;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.main-menu .navigation > li > a:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #00bffe;
    transition: width .3s ease;
}
.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a{
    color: #00bffe !important;
    transform: translateY(-3px) scale(1.08);
}
.main-menu .navigation > li:hover > a:before,
.main-menu .navigation > li.current > a:before{
    width: 100%;
}

/* ==========================================================================
   v9 addition — Mobile header bar

   Desktop keeps the existing two-row header untouched (topbar with logo +
   contact info, then the nav row below it). Below 991px (the same
   breakpoint the theme already switches the nav to its collapsed/burger
   mode at) that two-row layout is replaced by a single clean row: logo on
   the left, burger on the right, nothing else competing for space. The
   original topbar and the theme's own burger button (previously floating
   inside the nav row, disconnected from the logo) are hidden on mobile
   since this bar now covers both jobs.

   The burger re-uses the exact same data-toggle="collapse"
   data-target=".navbar-collapse" attributes as the theme's original
   button, so it opens/closes the same nav menu via the already-loaded
   bootstrap.js collapse plugin — no new JS needed.
   ========================================================================== */
.mobile-header-bar{
    display: none;
}

@media only screen and (max-width: 991px){
    .header-upper{
        display: none;
    }
    .main-menu .navbar-header{
        display: none;
    }

    .mobile-header-bar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 20px;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
        position: relative;
        z-index: 20;
    }
    .mobile-header-bar .mobile-logo-box{
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
    .mobile-header-bar .mobile-logo-box img{
        max-height: 44px;
        width: auto;
    }
    .mobile-header-bar .mobile-nav-toggle{
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        background: #17a4e9;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color .2s ease, transform .2s ease;
    }
    .mobile-header-bar .mobile-nav-toggle:hover,
    .mobile-header-bar .mobile-nav-toggle:focus{
        background: #0f7fbf;
        outline: none;
    }
    .mobile-header-bar .mobile-nav-toggle .bar{
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: #ffffff;
    }

    /* Nav menu now opens directly under the mobile bar instead of under
       the (now hidden) desktop topbar/nav-header spacing. */
    .main-header .header-lower{
        margin-top: 0;
    }
    .main-menu .navbar-collapse{
        margin-top: 0;
        background: #ffffff;
        overflow-x: hidden;
    }

    /* ---- Stop the mobile dropdown flashing to full height then snapping
       down to its scroll cap, and stop the page picking up a horizontal
       scrollbar while it opens.

       Root cause: bootstrap.js's collapse plugin opens the menu by
       swapping the "collapse" class for "collapsing" and animating an
       inline height up to the menu's full natural (scrollHeight) height -
       only once that finishes does it swap back to "collapse show", which
       is the only state responsive.css's max-height:300px/overflow:auto
       cap actually applies to (it targets ".collapse", a class that isn't
       present mid-animation). So for the whole animation the box is
       uncapped, grows to show every item, then snaps down to 300px the
       instant the animation ends. Capping ".collapsing" the same way
       removes that gap, and splitting overflow:auto into overflow-x:hidden
       / overflow-y:auto (instead of auto on both axes) stops a horizontal
       scrollbar from ever appearing inside the box itself. ---- */
    .main-menu .navbar-collapse.collapsing{
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .main-menu .collapse{
        overflow-x: hidden;
    }
    body{
        overflow-x: hidden;
    }

    /* The opened mobile dropdown itself still used the template's original
       dark-brown / mustard-orange scheme (#3e3c38 rows, #fdb821 submenus),
       which clashed once the bar above it went clean white/blue. Recolor
       it to the same blue-on-white palette as the rest of the site. */
    .main-menu .navbar-collapse > .navigation > li{
        border-top-color: #eef1f4;
    }
    .main-menu .navbar-collapse > .navigation > li > a{
        color: #2b2d31;
        background: #ffffff;
        font-weight: 600;
    }
    .main-menu .navbar-collapse > .navigation > li > ul,
    .main-menu .navbar-collapse > .navigation > li > ul > li > ul{
        background: #f7f9fb;
    }
    .main-menu .navbar-collapse > .navigation > li > ul > li,
    .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li{
        border-top-color: #e5e9ed;
    }
    .main-menu .navbar-collapse > .navigation > li > ul > li > a,
    .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > a{
        color: #444444;
        background: #f7f9fb;
        font-weight: 400;
    }
    .main-menu .navbar-collapse > .navigation > li > a:hover,
    .main-menu .navbar-collapse > .navigation > li > a:active,
    .main-menu .navbar-collapse > .navigation > li > a:focus,
    .main-menu .navbar-collapse > .navigation > li > ul > li > a:hover,
    .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > a:hover{
        background: #eaf6fd;
    }
    .main-menu .navbar-collapse > .navigation > li:hover > a,
    .main-menu .navbar-collapse > .navigation > li > ul > li:hover > a,
    .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li:hover > a,
    .main-menu .navbar-collapse > .navigation > li.current > a,
    .main-menu .navbar-collapse > .navigation > li.current-menu-item > a{
        color: #17a4e9 !important;
        background: #eaf6fd;
        /* Cancel the desktop hover lift (transform: translateY(-3px)
           scale(1.08) - see the "v8 additions" nav-hover rule above). That
           scale is fine floating in the open desktop bar, but in this
           tightly stacked mobile list it visually grows the active row's
           text past its own row edge, poking it under the neighboring row
           (or under .mobile-header-bar for the first item) and making it
           look cropped. The light background + blue text above is already
           a clear enough "active" indicator on mobile. */
        transform: none !important;
    }
    .main-menu .navbar-collapse > .navigation li.dropdown .dropdown-btn{
        border-color: #c9dce7 !important;
        color: #17a4e9 !important;
        background: #ffffff;
    }
}

@media only screen and (max-width: 480px){
    .mobile-header-bar{
        padding: 12px 16px;
    }
    .mobile-header-bar .mobile-logo-box img{
        max-height: 36px;
    }
}
/* ==========================================================================
   v10 addition — Floating "Book a Free Consultation" button, fixed to the
   bottom-left corner, mirroring the WhatsApp/Call buttons on the right.
   ========================================================================== */
.floating-consultation-btn{
    position: fixed;
    left: 18px;
    bottom: 100px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #17a4e9;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 10px 16px;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    z-index: 999;
}
.floating-consultation-btn i{
    font-size: 13px;
}
.floating-consultation-btn:hover{
    background: #0f7fbf;
    color: #ffffff !important;
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(23, 164, 233, .5);
}

@media only screen and (max-width: 767px){
    .floating-consultation-btn{
        left: 12px;
        bottom: 85px;
        padding: 8px 12px;
        font-size: 11px;
    }
}

/* ==========================================================================
   v10 addition — Floating WhatsApp + Call Now buttons, fixed to the right
   edge of the viewport, vertically centered. Reuses the same brand colors
   as the header's whatsapp-icon-link/phone-icon-link badges, but bigger
   and fixed-position since these float over the page instead of sitting
   inline in the topbar.
   ========================================================================== */
.floating-contact-buttons{
    position: fixed;
    right: 18px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 999;
}
.floating-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.floating-btn i{
    color: #ffffff !important;
    font-size: 24px;
}
.floating-btn:hover{
    transform: scale(1.1);
}
.floating-whatsapp-btn{
    background: #25D366;
}
.floating-whatsapp-btn:hover{
    background: #1ebe5a;
    box-shadow: 0 6px 18px rgba(37, 211, 102, .5);
}
.floating-call-btn{
    background: #17a4e9;
}
.floating-call-btn:hover{
    background: #0f7fbf;
    box-shadow: 0 6px 18px rgba(23, 164, 233, .5);
}

@media only screen and (max-width: 767px){
    .floating-contact-buttons{
        right: 12px;
        bottom: 85px;
        gap: 10px;
    }
    .floating-btn{
        width: 46px;
        height: 46px;
    }
    .floating-btn i{
        font-size: 20px;
    }
}

/* ==========================================================================
   Multi-column mega-menu dropdown (desktop only), matching TOI's
   side-by-side layout. Uses CSS Grid so rows stay aligned across columns
   even when text wraps to two lines. Nested 3rd-level flyouts (NGO and
   Others / Compliance) are forced out of the grid's flow and hidden until
   their own item is hovered — without this second part, their background
   shows as stray tan blocks inside the grid.
   ========================================================================== */
@media only screen and (min-width: 992px){
    /* --- 2nd-level menu (Proprietorship Firm, Company Formation, etc.) --- */
    .main-menu .navigation > li.dropdown > ul{
        display: none !important;
        grid-auto-flow: row !important;
        grid-template-columns: repeat(auto-fill, 220px) !important;
        width: fit-content !important;
        min-width: 220px;
        max-width: min(calc(4 * 220px), calc(100vw - 40px)) !important;
        left: 0;
        right: auto;
    }

    /* Menus with 3 or fewer items — plain single-column list */
    .main-menu .navigation > li.dropdown > ul:not(:has(li:nth-child(4))){
        grid-template-columns: 220px !important;
    }

    .main-menu .navigation > li.dropdown:hover > ul{
        display: grid !important;
    }
    .main-menu .navigation > li.dropdown > ul > li{
        position: relative !important;
        float: none !important;
        width: 220px !important;
        border-top: none !important;
        display: flex !important;
    }
    .main-menu .navigation > li.dropdown > ul > li > a{
        border-bottom: none !important;
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    /* --- 3rd-level nested flyout --- */
    .main-menu .navigation > li.dropdown > ul > li > ul{
        display: none !important;
        position: absolute !important;
        top: 0 !important;
        left: 100% !important;
        min-width: 220px;
        background-color: #17a4e9 !important;
        z-index: 10;
    }
    .main-menu .navigation > li.dropdown > ul > li:hover > ul{
        display: block !important;
    }
}