/* =========================================================
   RESPONSIVE CSS — load this file AFTER all your other CSS
   files so these rules win. Covers: header/navbar, hero,
   property cards, property-detail page, EMI/floor-plan,
   footer. Breakpoints: 1200 / 992 / 768 / 576 / 480 / 360
   ========================================================= */

/* -----------------------------------------------------------
   1. HEADER / TOP BAR / NAVBAR
   ----------------------------------------------------------- */
@media (max-width: 1200px) {
    .container { max-width: 100%; padding: 0 20px; }
    .header_mid_right { gap: 20px; }
    .top_right { gap: 16px; }
}

@media (max-width: 992px) {
    .topmain_section { flex-wrap: wrap; row-gap: 8px; }
    .top_right { gap: 14px; }
    .header_mid_section { padding: 12px 0; flex-wrap: wrap; row-gap: 10px; }
    .header_mid_right { gap: 16px; flex-wrap: wrap; row-gap: 10px; }
    .main_header .navbar-brand img { max-width: 130px; }

    /* stellarnav collapses to mobile menu below 1080px already;
       make sure the toggle is visible and desktop ul is hidden */
    .stellarnav.desktop { display: none !important; }
    .stellarnav .menu-toggle,
    .stellarnav .dd-toggle,
    .stellarnav .close-menu { display: inline-block !important; }

    /* bootstrap navbar-custom collapse menu width shouldn't
       force horizontal scroll on tablets */
    .navbar-custom .navbar-nav { min-width: 100% !important; }
}

@media (max-width: 767px) {
    .navbar-custom { display: block; }
    .menu-container { display: none !important; }
    .header_mid_right { justify-content: flex-end; gap: 12px; }
    .sign_main a p { display: none; }
    .mid_cart_section { gap: 12px; }
    .hero-section { margin-top: 8rem; }
    .top_menu p { display: none; }
}

@media (max-width: 480px) {
    .topmain_section { display: block; }
    .top_left { justify-content: space-between; padding: 8px; }
    .top_right { display: none; }
    .top_menu p { display: none; }
    .sign_main a p { display: none; }
    .header_mid_right { gap: 12px; }
    .fixed-top { left: 2%; padding: 0; }
    .navbar-custom .navbar-nav { min-width: 100%; margin-top: 18px; }
    .dropdown-toggle { padding: 8px 10px 8px 14px; font-size: 12px; }
    
   .ava .row {
    gap: 20px;
}

   .group-deals .row {
    gap: 20px;
}

.trending-deals .row {
    gap: 20px;
}

.position-absolute.top-0.start-0.m-3.group-buyimg {
    gap: 10px;
    /* margin: 10px; */
    display: flex;
    flex-wrap: wrap;
}

.right-side-buttons{
            margin-top: 9px !important;
}

.sidebar-container-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 69%;
}

}

@media (max-width: 360px) {
    .navbar-custom .navbar-nav { min-width: 100%; }
    .main_header .navbar-brand img { max-width: 110px; }
}

/* -----------------------------------------------------------
   2. HERO SECTION
   ----------------------------------------------------------- */
@media (max-width: 992px) {
    .hero_banner { height: 55vh; border-radius: 20px; }
    .hero-section .hero-content h1 { font-size: 34px; }
    .hero-section .hero-content p { font-size: 15px; }
    .hero-section .search-card { width: 90%; bottom: -90px; padding: 15px; }
    .hero-section .search-box { flex-wrap: wrap; }
    .hero-section .search-box select { width: 100%; }
    .hero-section .search-box button { padding: 12px 20px; width: 100%; justify-content: center; display: flex; }
    .main-title { font-size: 2.2rem; }
    .button-group_hero { flex-wrap: wrap; }
}

@media (max-width: 576px) {
    .hero_banner { height: revert-rule; padding: 12px; border-radius: 14px; }
    .hero-section .hero-content h1 { font-size: 26px; }
    .hero-section .tabs { flex-wrap: wrap; }
    .hero-section .tabs span { margin-right: 12px; font-size: 13px; }
    .hero-section .post-property { margin-left: 0; margin-top: 10px; }
    .hero-section .search-card { width: 92%; bottom: -120px; }
    .ava { padding: 170px 0 25px 0; }
    .ava h3 { font-size: 26px; padding-bottom: 25px; }
}

/* -----------------------------------------------------------
   3. GROUP DEALS / TRENDING / RECOMMENDED / PROPERTY CARDS
   ----------------------------------------------------------- */
@media (max-width: 992px) {
    .header { flex-wrap: wrap; gap: 12px; }
    .trending-deals .top-contains h2,
    .newly-launched-projects .top-contains h2,
    .ready-homes .top-contains h2,
    .nearing-completion .top-contains h2 { font-size: 26px; flex-wrap: wrap; }
    .top-badges { width: auto; max-width: 90%; }
    .recommended .top-badges,
    .recommended-2 .top-badges { width: auto; max-width: 90%; }
    .footer-btn { flex-wrap: wrap; gap: 10px; }
    .view-btn, .join-btn { padding: 10px 20px !important; flex: 1; text-align: center; }
}

@media (max-width: 768px) {
    .card .image a img { height: 220px; }
    .content { padding: 18px 14px; }
    .title-row h3 { font-size: 17px; }
    .new-price { font-size: 17px; }
    .old-price { font-size: 13px; }
    .actions { flex-wrap: wrap; gap: 10px; }
    .actions .outline,
    .actions .dealsbtn { padding: 8px 16px; }
    .properties-section .btns,
    .properties-section-2 .btns { flex-direction: column; }
    .properties-like .property-card,
    .card-possession-timeline { flex-direction: column; }
    .property-img,
    .card-possession-timeline .property-img { width: 100%; height: 180px; }
    .right-side { margin-left: 0; margin-top: 12px; }
}

@media (max-width: 576px) {
    .trending-deals .top-contains h2 button,
    .newly-launched-projects .top-contains h2 button,
    .ready-homes .top-contains h2 button { font-size: 13px; padding: 6px; }
    .join-btn, .view-btn { padding: 8px 18px !important; font-size: 12px; }
    .bottom-chip, .nearing-completion .bottom-chip { width: 60%; }
}

/* -----------------------------------------------------------
   4. GROUP BUYING / BUILDERS / REVIEWS / FAQ
   ----------------------------------------------------------- */
@media (max-width: 992px) {
    .group-buying h2, .top-rev h2, .faq-title h3 { font-size: 26px; }
    .builder-card { margin-bottom: 20px; }
    .stats { flex-wrap: wrap; gap: 8px; }
    .stats div { flex: 1 1 30%; }
    .reviews .tabs {         width: 100%;
        flex-wrap: wrap;
        border-radius: 14px !important;
        padding: 8px !important;
        gap: 6px;
        display: flex;
    }
    .reviews .card-body { flex-direction: column; }
    .reviews .card-body img { width: 100%; height: 180px; }
    .faq .tabs-btn { flex-wrap: wrap;
            margin-top: 10px;}
            .faq-btn-ft .btn-primary{
               margin-bottom: 10px;
            }
}

@media (max-width: 576px) {
    .custom-card-btn { flex-wrap: wrap; }
    .reviews .rating h1 { font-size: 32px; }
    .card-box .top-badges { width: 100%; }
    .faq .search-box { padding: 0 12px; }
}

/* -----------------------------------------------------------
   5. PROPERTY DETAIL PAGE
   ----------------------------------------------------------- */
@media (max-width: 992px) {
    .property-detail-main { margin-top: 140px; }
    .property-detail-main .right-side-content h4 { font-size: 22px; }
    .property-detail-main .right-side-buttons .btn-join,
    .property-detail-main .right-side-buttons .btn-outline-secondary,
    .property-detail-main .right-side-buttons-2 .btn-outline-secondary {
        padding: 10px 24px !important;
        width: 100%;
    }
    .property-detail-main .right-side-buttons,
    .property-detail-main .right-side-buttons-2 { flex-direction: column; gap: 10px; }
    .keyfacts-card .grid { grid-template-columns: repeat(2, 1fr); }
    .construction-card .footer { flex-wrap: wrap; gap: 15px; }
    #mainImage, #zoomResult { height: 380px; }
    #zoomResult { display: none !important; } /* zoom pane doesn't fit mobile */
    .right-panel { padding: 20px 0 0; }
    .right-details-box { border-left: 0; border-top: 1px solid #0000001A; margin-top: 20px; }
}

@media (max-width: 768px) {
    .property-detail-main .bottom-info { bottom: 90px; }
    .property-detail-main .price-box .price-row { flex-wrap: wrap; }
    .property-detail-main .table-box { flex-wrap: wrap; gap: 10px; }
    .amenities-card { flex-direction: column; }
    .developer-section .stats { flex-wrap: wrap; }
    .map-iframe { height: 350px; }
}

@media (max-width: 576px) {
    .keyfacts-card .grid { grid-template-columns: 1fr; }
    .property-detail-main .right-side-content h4 { font-size: 20px; }
    .property-detail-main .new-price,
    .property-detail-main .price-box .new-price { font-size: 22px; }
    #mainImage, #zoomResult { height: 260px; }
    .thumbnail-strip .thumb { width: 80px !important; height: 65px; }
    .project-details h3,
    .floor-plan-section .title { font-size: 24px; }
}

/* -----------------------------------------------------------
   6. FLOOR PLAN
   ----------------------------------------------------------- */
@media (max-width: 992px) {
    .floor-plan-section .details-box { padding-left: 0; padding-top: 20px; }
    .floor-plan-section .info-grid { grid-template-columns: 1fr 1fr; }
    .floor-plan-section .plan-box { margin: 20px 0; }
    .top-bar { padding: 20px; }
}

@media (max-width: 576px) {
    .floor-plan-section .btns { flex-direction: column; }
    .floor-plan-section .pill { margin: 4px; }
    .floor-plan-section .price-box h3 { font-size: 17px; }
    .floor-plan-section .table th,
    .floor-plan-section .table td { font-size: 12px; }
}

/* -----------------------------------------------------------
   7. EMI CALCULATOR
   ----------------------------------------------------------- */
@media (max-width: 768px) {
    .emi-card .bank { flex-wrap: wrap; gap: 10px; }
    .emi-card .btn { margin-top: 24px; }
}

/* -----------------------------------------------------------
   8. FOOTER
   ----------------------------------------------------------- */
@media (max-width: 992px) {
    .footer_mainsection { padding: 30px 0; }
    .boder_lefq { border-left: 0; padding-left: 0; margin-top: 20px; }
    .footer_about, .footer_quicklink, .footer_soluction, .footer_community { margin-bottom: 24px; }
}

@media (max-width: 576px) {
    .copy_mainse { flex-direction: column; gap: 10px; text-align: center; }
    .copy_left, .copy_right { justify-content: center; flex-wrap: wrap; }
    .lang_but { margin-bottom: 25px; }
}

/* -----------------------------------------------------------
   9. GENERIC SAFETY NET (prevents horizontal scroll / overflow)
   ----------------------------------------------------------- */
@media (max-width: 480px) {
    html, body { overflow-x: hidden; }
    .container { padding: 0 15px; }
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
}








/* =========================================================
   AVA PROPERTY — MOBILE FIX (iPhone 12 Pro / <=767px)
   Load this AFTER responsive.css so it wins.
   Fixes based on the actual page markup:
   1) stray stellarnav "Menu" bar + big gap before hero
   2) leftover debug <p>menu</p> text
   3) navbar-custom's broken .fixed-top (left:10%) floating toggle
   4) hero search-card / tabs / search-box breaking on narrow screens
   ========================================================= */

@media (max-width: 767px) {
    
    
        .navbar-custom .navbar-nav .nav-link {
        padding: 0.7rem 1rem;
        margin: 5px 0;
        display: flex;
        justify-content: space-between;
        border-bottom: solid 1px #ddd;
        align-items: center;
        background: #F2F3F7;
    }
    

    /* -----------------------------------------------------------
       1) stellarnav auto-injects its own "Menu" toggle bar for
          .menu_mainsection. It sits in normal flow right under the
          fixed header, which — combined with hero's margin-top:12rem
          (tuned only for the header) — creates the floating
          "Visit/Menu ☰" row AND the big empty gap before the hero
          banner that you see in the screenshot.
          navbar-custom already covers mobile navigation, so hide
          this second menu bar on mobile instead of leaving it broken.
       ----------------------------------------------------------- */
    /*.menu_mainsection { display: none !important; }*/

    /* Now that the stray bar is gone, the header itself is much
       shorter on mobile — bring hero's top margin back down so
       there's no leftover gap. */
    .hero-section { margin-top: 6rem !important; }

    /* -----------------------------------------------------------
       2) leftover debug text right after the mobile nav — not meant
          to be visible to users.
       ----------------------------------------------------------- */
    /*.top_menu > p { display: none !important; }*/

    /* -----------------------------------------------------------
       3) .navbar-custom has class "fixed-top" AND a custom override
          (position:fixed; left:10%) which detaches it from the
          header row and makes its hamburger float at a random
          position instead of sitting inline in the header.
          Pin it back into the header row.
       ----------------------------------------------------------- */
    .navbar-custom.fixed-top {
        /*position: static !important;*/
        left: auto !important;
        /*top: auto !important;*/
        /*width: auto !important;*/
    }

    .top_left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /*.top_menu {*/
    /*    flex-direction: row;*/
    /*    align-items: center;*/
    /*}*/

    .navbar-custom .navbar-toggler {
        padding: 0;
        border: none;
        box-shadow: none;
    }

    /* keep just the hamburger icon in the compact header, hide the
       "Menu" text label so it doesn't wrap/overflow next to the logo */
    .navbar-custom .menu-icon.mobl p { display: none; }
    .navbar-custom .menu-icon.mobl span { background: #fff; }

    /* when opened, the dropdown should cover the screen properly
       instead of squeezing into the header row */
    .navbar-custom .navbar-collapse.show {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow-y: auto;
        background: #fff;
        z-index: 10000;
        padding: 70px 15px 30px;
    }

    .navbar-custom .navbar-nav {
        min-width: 100% !important;
        margin-top: 0 !important;
        box-shadow: none !important;
    }
}

/* -----------------------------------------------------------
   4) Hero search card — tabs, search box and post-property link
      need to wrap and stack cleanly on narrow screens instead of
      being squeezed into the desktop's single-row layout.
   ----------------------------------------------------------- */
@media (max-width: 767px) {
    .hero_banner {
        height: auto;
        min-height: 46vh;
        padding: 20px 15px 100px;
    }

    .hero-section .hero-content h1 { font-size: 26px; line-height: 1.25; }
    .hero-section .hero-content p { font-size: 13px; padding: 0 10px; }

    .hero-section .search-card {
        position: relative;   /* was: absolute; bottom:-70px; width:75% */
        bottom: 0;
        width: 92%;
        margin: -70px auto 0;
        padding: 14px;
    }

    .hero-section .tabs {
        flex-wrap: wrap;
        row-gap: 8px;
        border-bottom: none;
    }
    .hero-section .tabs span {
        margin-right: 8px;
        font-size: 12px;
    }
    .hero-section .tabs .active { padding: 10px 12px; }

    .hero-section .post-property {
        margin-left: 0;
        flex-basis: 100%;
        margin-top: 10px;
        justify-content: flex-start;
    }

    .hero-section .search-box {
        flex-wrap: wrap;
        gap: 8px;
    }
    .hero-section .search-box select,
    .hero-section .search-box input {
        width: 100%;
    }
    .hero-section .search-box button {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 12px;
    }

    /* section right after the hero card needs room for the card's
       negative top margin */
    .ava { padding-top: 40px; }
}

/* =========================================================
   HOME PAGE — MOBILE FIX v2 (based on actual live markup)
   Load this AFTER everything else (already true — this file
   is last). Fixes real bugs found in the rendered HTML that
   were not covered before.
   ========================================================= */

/* -----------------------------------------------------------
   0) GLOBAL — applies at every screen size, not just mobile.
      <p>menu</p> is leftover debug markup sitting as a direct
      child of .top_menu, and meg-menu.css forces .top_menu into
      a *column* flex layout by default. Together this stacks
      the hamburger icon on top of a stray "menu" word at every
      width except the ones already patched below 767px.
   ----------------------------------------------------------- */
/*.top_menu > p { display: none !important; }*/
/*.top_menu {*/
/*    flex-direction: row !important;*/
    /*align-items: center !important;*/
/*    gap: 10px !important;*/
/*}*/

/* -----------------------------------------------------------
   1) SEARCH OVERLAY / SEARCH DROPDOWN (hero search box)
      These are defined in an inline <style> tag inside the page
      body itself, which loads AFTER responsive.css — so a normal
      rule here would lose. Using !important + a specific selector
      to win. Fixed 600px width blows out any phone screen.
   ----------------------------------------------------------- */
@media (max-width: 767px) {
    .hero-section .search-card .search-overlay,
    .search-overlay {
        width: calc(100% - 20px) !important;
        max-width: 420px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 55px !important;
    }
    .search-dropdown {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* -----------------------------------------------------------
   2) DEAL OF THE WEEK CARD — right-side content
      None of these had any wrap rule anywhere in the codebase,
      so on a real phone width (320–420px) they overflow the
      card and either get cut off or force horizontal scroll.
   ----------------------------------------------------------- */
@media (max-width: 767px) {
    .skylark { flex-wrap: wrap; row-gap: 8px; }
    .right-side-top { width: 100%; }
    .right-side-badge-btn { flex-wrap: wrap; row-gap: 8px; }
    .badge-chip { flex-wrap: wrap; row-gap: 6px; }
    .table-box { flex-wrap: wrap; row-gap: 10px; }
    .table-box .col { flex: 1 1 45%; }
    .price-box .price-row { flex-wrap: wrap; row-gap: 8px; }
    .right-side-buttons { flex-wrap: wrap; row-gap: 8px; }
    .right-side-buttons .btn { flex: 1 1 auto; }
    .thumbnail-strip { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .table-box .col { flex: 1 1 100%; }
    .right-side-buttons .btn { flex: 1 1 100%; }
}

/* -----------------------------------------------------------
   3) TOP BUILDERS section — header (title + city tabs) has no
      wrap rule at all, so "DLF / K Raheja / Godrej" city filter
      tabs push off-screen on mobile.
   ----------------------------------------------------------- */
@media (max-width: 767px) {
    .top-builders .d-flex.justify-content-between {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .top-builders .tabs { flex-wrap: wrap; row-gap: 8px; }
}

/* -----------------------------------------------------------
   4) REVIEWS section — card header (avatar/name + star rating)
      has justify-content:space-between with no wrap.
   ----------------------------------------------------------- */
@media (max-width: 576px) {
    .reviews .card-header { flex-wrap: wrap; row-gap: 8px; }
}

/* -----------------------------------------------------------
   5) FAQ section — search box + Expand-all/Collapse-all buttons
      sit in one flex row with no wrap.
   ----------------------------------------------------------- */
@media (max-width: 767px) {
    .faq > .container > .d-flex.justify-content-between {
        flex-wrap: wrap;
        row-gap: 12px;
    }
}

/* -----------------------------------------------------------
   6) SAFETY NET — several elements above use fixed pixel widths
      (search-overlay, dropdowns) that can force the whole page
      to scroll sideways on a phone if anything is missed. Keep
      this net active across the full mobile/tablet range.
   ----------------------------------------------------------- */
@media (max-width: 991px) {
    html, body { overflow-x: hidden; }
}



































/* =========================================================
   FINAL GUARANTEED OVERRIDE — v3
   Added after reviewing an actual iPhone 12 Pro (390px)
   screenshot of the live page. This block sits at the very
   end of the file and uses !important so it wins no matter
   what conflicting rule exists earlier (including the
   .stellarnav.menu-toggle{display:inline-block!important}
   rule near the top of this same file, which was fighting
   the fix below it).

   ⚠ If these still don't show on your phone after uploading:
   it's a CACHE issue, not a CSS issue — see notes below.
   ========================================================= */

@media (max-width: 991px) {

    /* 1) STRAY "Menu ☰" BAR under the header ------------------ */
    /* Belt AND suspenders: hide the wrapper completely, and also
       force every possible descendant stellarnav generates to be
       hidden directly, in case JS ever moves it out of the wrapper. */
       
       
    /*.menu_mainsection,*/
    /*.menu_mainsection .stellarnav,*/
    /*.stellarnav .menu-toggle,*/
    /*.stellarnav .dd-toggle,*/
    /*.stellarnav .close-menu {*/
    /*    display: none !important;*/
    /*    visibility: hidden !important;*/
    /*    height: 0 !important;*/
    /*    overflow: hidden !important;*/
    /*    margin: 0 !important;*/
    /*    padding: 0 !important;*/
    /*}*/
}

@media (max-width: 767px) {

    /* 2) BIG GAP before "Why buy with AVA" --------------------- */
    .hero-section { margin-top: 14rem !important; }
    .hero_banner {
        height: auto !important;
        min-height: 44vh !important;
        padding: 20px 15px 90px !important;
    }
    .hero-section .search-card {
        position: relative !important;
        bottom: 0 !important;
        width: 92% !important;
        margin: -60px auto 0 !important;
    }
    .ava {
        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }

    /* 3) Hero tabs — force wrap so labels never get clipped
          ("Flats/Vi…" instead of "Flats/Villas") ---------------- */
    .hero-section .tabs {
        flex-wrap: wrap !important;
        white-space: normal !important;
    }
    .hero-section .tabs span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 12px !important;
    }

    /* 4) Section headers ("Top Group Deals Near You",
          "Hot & Trending Near You") — stack title above the
          action buttons instead of squeezing them side by side,
          which is what forces the heading text into 3 cramped
          lines and pushes the "GROUP DEAL" badge mid-sentence. */
    .header {
        flex-direction: column !important;
        align-items: flex-start !important;
        row-gap: 10px !important;
    }
    .header .actions {
        width: 100%;
        justify-content: flex-start !important;
        margin-top: 0 !important;
        flex-wrap: wrap;
    }
    .top-contains h2 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        font-size: 22px;
    }
}

/* =========================================================
   MOBILE NAV PANEL — polish pass v4
   Fixes the actual open-menu screenshot: stray grid icons on
   every row, huge empty white space below the 5 items (from
   forcing height:100vh on short content), and no visible way
   to close the menu once it's open.
   ========================================================= */
@media (max-width: 991px) {

    /* 1) Remove the small grid icon next to every menu label —
          it doesn't mean anything to users, just visual clutter. */
    .navbar-custom .nav-link .fa-th,
    .navbar-custom .nav-link i.fa-th {
        display: none !important;
    }

    /* 2) Stop forcing the panel to fill the full screen height —
          let it size to its content instead, so there's no dead
          empty space below the last item. Scrolls internally if
          the list ever gets long. */
    .navbar-custom .navbar-collapse.show {
        height: auto !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        box-shadow: 0 12px 30px rgba(0,0,0,0.18) !important;
    }

    /* 3) Keep the hamburger button clickable ABOVE the open panel
          (it's already in the header, this just raises it) and
          turn it into a clean "✕" when the menu is open, so
          there's an obvious way to close it again. */
    .navbar-custom .navbar-toggler {
        position: relative !important;
        z-index: 10001 !important;
    }
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background: #242424;
    }
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(2) {
        opacity: 0;
    }
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background: #242424;
    }

    /* 4) Sub-menu links (e.g. "AVA Property", "AVA Space"...)
          under each dropdown — indent + shrink so they read
          clearly as children of the row above, once opened. */
    .navbar-custom .dropdown-menu {
        padding-left: 14px !important;
    }
    .navbar-custom .dropdown-item {
        font-size: 14px !important;
        padding: 0.65rem 1rem !important;
        border-bottom: solid 1px #eee !important;
    }
}

/* =========================================================
   GLOBAL HORIZONTAL-OVERFLOW SAFETY NET
   If any element anywhere (a fixed-width box, an image, a
   flex row without wrap) ever pokes past the right edge of
   the screen, this stops it from creating a dark/blank strip
   or letting the whole page scroll sideways — on ANY screen
   size, not just mobile.
   ========================================================= */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* =========================================================
   ROOT-CAUSE FIX — content actually overflowing (not just a
   dark strip). Text/buttons were getting cut off on the right
   edge of cards ("₹3.75 Gr", "Join with no dep…", price rows,
   button pairs). Root cause: flex children refuse to shrink
   below their own content width by default (min-width:auto),
   so a row of text+badges+buttons pushes past the card edge
   instead of wrapping — even where flex-wrap:wrap was already
   set. This forces every flex child to be allowed to shrink,
   and makes sure long text wraps instead of overflowing.
   ========================================================= */
@media (max-width: 767px) {

    .price-row,
    .footer-btn,
    .right-side-buttons,
    .table-box,
    .tags,
    .top-badges,
    .top-badges-2,
    .actions,
    .header,
    .skylark,
    .badge-chip,
    .right-side-badge-btn,
    .title-row {
        flex-wrap: wrap !important;
    }

    .price-row > *,
    .footer-btn > *,
    .right-side-buttons > *,
    .table-box > *,
    .header > *,
    .skylark > * {
        min-width: 0 !important;
    }

    .card,
    .price-box,
    .deal_of_the_week,
    .right-side-content,
    .col-lg-4, .col-lg-3, .col-md-6, .col-md-4 {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .right-side-list li,
    .card p,
    .card h2,
    .card h3,
    .location,
    .new-price,
    .old-price {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    .footer-btn a,
    .footer-btn button,
    .right-side-buttons .btn {
        white-space: normal !important;
    }
}

/* =========================================================
   "Properties you may like" section — image + text row
   overflows the card and gets its price/location text cut off
   on the right edge (confirmed on real device via screen
   recording). Same root cause as before: flex row + no wrap +
   no min-width:0 on the text column.
   ========================================================= */
@media (max-width: 767px) {
    .properties-box {
        flex-wrap: wrap;
    }
    .right-side {
        margin-left: 12px;
        min-width: 0;
        flex: 1 1 auto;
    }
    .top-text {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .properties-box .location,
    .properties-box .new-price {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Generic safety net: any other section using the same
       Bootstrap "title + button" header pattern (d-flex +
       justify-content-between) that isn't already covered by
       the .header fix above — stack them too. */
    .site_main .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        row-gap: 10px;
    }
}

/* =========================================================
   PROPERTY / DEAL CARDS — no gap between stacked cards on
   mobile (Serene Heights / Urban Oasis sitting flush against
   each other). .card never had a margin-bottom anywhere in
   the codebase — only worked on desktop because 3 cards sat
   side-by-side in one row with column gutters between them.
   On mobile they stack into a single column with zero vertical
   space. Same fix applies to every card grid on the page.
   ========================================================= */
@media (max-width: 991px) {
    .row > [class*="col-"] {
        margin-bottom: 20px;
    }
    .card,
    .property-card,
    .builder-card {
        margin-bottom: 0; /* spacing now comes from the column, not doubled up */
    }
}




/* =========================================================
   3-BUTTON FOOTER ROW ("Enquire / Schedule Visit / Call" in
   Recommended Properties cards) — "Schedule Visit" text was
   wrapping into 3 ugly lines inside its own pill button
   because an earlier rule forced white-space:normal on all
   .footer-btn buttons with no room to fit. Fix: keep each
   button's own label on ONE line, and let the row itself wrap
   (2 buttons on top, 1 drops to its own row) instead of
   wrapping text inside a button.
   ========================================================= */
@media (max-width: 767px) {
    .footer-btn {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .footer-btn > a,
    .footer-btn > button {
        flex: 1 1 calc(50% - 5px) !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 10px 8px !important;
        text-align: center !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 360px) {
    .footer-btn > a,
    .footer-btn > button {
        font-size: 12px !important;
        padding: 9px 6px !important;
    }
}



/* =========================================================
   TOP BUILDERS — city filter tabs (All/Mumbai/Pune/...)
   When these wrap to 2 lines on mobile, the outer pill
   container still uses the desktop's very rounded 40px
   corners (meant for a single-row pill), which looks
   stretched/odd on a taller 2-row box. Also tightens the
   spacing between individual tab buttons.
   ========================================================= */
@media (max-width: 767px) {
    .top-builders .tabs {
        border-radius: 14px !important;
        padding: 8px !important;
        gap: 6px;
        display: flex;
    }
    .top-builders .tabs button {
        border-radius: 20px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        margin: 0 !important;
    }
    
    .imgae-ato {
    position: absolute;
    top: 156px;
    left: 4px;
    border-radius: 20px;
    font-size: 13px;
    display: flex;
    width: 70px;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

    
}

/* =========================================================
   REVIEWS CARD — huge blank gap + stretched quote icon.
   Root cause: the earlier rule ".reviews .card-body img"
   (a descendant selector) was matching BOTH the room photo
   AND the tiny 23x13px quote-mark icon nested two levels
   deeper inside the same card-body — forcing the small icon
   to also become height:180px, which is why it looked like a
   giant blank box with the icon glyph squashed at the bottom.
   Fix: only target the room photo (direct child), and pin the
   icon's real size back with a selector strong enough to win.
   ========================================================= */
@media (max-width: 992px) {
    .reviews .card-body { flex-direction: column; }
    .reviews .card-body > img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }
    .reviews .card-body .reviews-iconimg {
        width: 23px !important;
        height: 13px !important;
        margin-bottom: 10px !important;
    }

}
/* =========================================================
   FAQ TABS — "Trust" (and any lone button in the last row)
   was stretching into a full-width bar. Root cause: an earlier
   rule "(.view-btn, .join-btn { flex: 1; })" was written for
   the Group Deals card buttons but has no section scope, so it
   was also grabbing the FAQ's category tab buttons (which share
   the same .view-btn/.join-btn classes) and force-growing
   whichever one is alone on its wrapped row to fill all the
   leftover space. FAQ tabs should stay their natural pill size.
   ========================================================= */
@media (max-width: 992px) {
    .faq .tabs-btn .view-btn,
    .faq .tabs-btn .join-btn {
        flex: 0 1 auto !important;
        width: auto !important;
    }
}


/* =========================================================
   MOBILE MENU — "opens wrong first, then snaps correct".
   Root cause: the full-screen fixed-overlay styling was only
   applied to ".navbar-collapse.show" (the FINAL open state).
   While Bootstrap is still animating the menu open, it carries
   the class ".collapsing" instead of ".show" — during that
   split-second the panel was still sitting in its old in-flow
   header position, then it visibly SNAPPED to the fixed
   full-screen overlay the instant the animation finished and
   ".show" was applied. Also gives it a solid background all
   the way down so page content (like the "Trust" FAQ chip)
   can't peek through underneath the panel.
   ========================================================= */
@media (max-width: 991px) {
    .navbar-custom .navbar-collapse.collapsing,
    .navbar-custom .navbar-collapse.show {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-height: 100vh !important;
        background: #fff !important;
        z-index: 10000 !important;
        padding: 70px 15px 30px !important;
        overflow-y: auto !important;
    }
    .navbar-custom .navbar-collapse.show {
        height: auto !important;
        max-height: 100vh !important;
    }
}



























/* =========================================================
   HERO SEARCH CARD swallowing the title text on mobile.
   Root cause: .search-card was switched from position:absolute
   to position:relative (needed to fix earlier layout bugs), but
   it kept the OLD negative margin-top (-60px/-70px) that was
   only meaningful for absolute positioning. Once the card is
   back in normal document flow, that same negative margin pulls
   it UP over its previous sibling — the hero title/subtitle —
   hiding "Find Your Perfect Space" behind the search card
   instead of showing it above the card like the reference design.
   ========================================================= */
@media (max-width: 767px) {
    .hero_banner {
        justify-content: flex-start !important;
        padding-top: 30px !important;
    }
    .hero-section .hero-content {
        margin-bottom: 24px !important;
        position: relative;
        z-index: 2;
    }
    .hero-section .search-card {
        margin: 0 auto !important;   /* was a large negative margin */
        position: relative !important;
        z-index: 3;
    }
}












































































/**/









/* ==========================================================================
   AVA PROPERTY LISTING PAGE — RESPONSIVE CSS
   Isse apni listing.css file ke SABSE END mein paste karein
   (taake ye existing rules ko override kar sake)
   ========================================================================== */

/* ---------- LARGE DESKTOP / LAPTOP (<=1200px) ---------- */
@media (max-width: 1200px) {
    .gap-60 {
        gap: 40px;
    }

    .card-main .left {
        flex: 0 0 260px;
        max-width: 260px;
    }

    .listing-page {
        margin-top: 8rem;
    }
}

/* ---------- TABLET / SMALL LAPTOP (<=992px) ---------- */
@media (max-width: 992px) {
    .listing-page {
        margin-top: 6rem;
    }

    /* Sidebar + content stack instead of sitting side by side.
       IMPORTANT: align-items must NOT be stretch on mobile, otherwise the
       sidebar inherits the huge height of the card list and its
       overflow-y:auto creates a hidden internal scrollbar — that is what
       causes sections to look duplicated / out of order in full-page
       screenshot tools. */
    .listing-page .d-flex.gap-1 {
        flex-direction: column;
        align-items: stretch;
        display: block; /* fully kill flex behaviour on mobile */
    }

    /*.sidebar.col-md-3,*/
    /*.filter-content.col-md-9 {*/
    /*    width: 100% !important;*/
    /*    max-width: 100% !important;*/
    /*    flex: 0 0 100% !important;*/
    /*    display: block;*/
    /*}*/

    .sidebar {
        border-right: none;
        border-bottom: 1px solid #ddd;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    /* Sticky "Apply filters" footer inside sidebar only makes sense when
       the sidebar itself scrolls independently (desktop). On mobile it
       must behave like a normal block, else it leaves a large blank gap
       above the property list. */
    .sidebar .footer {
        position: static !important;
        padding-top: 15px;
    }

    /* Property card: image on top, content below */
    .card-main {
        flex-direction: column;
    }

    .card-main .left,
    .card-main .left img {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100% !important;
        height: 260px;
    }

    .card-main .left img {
        border-radius: 10px 10px 0 0;
    }

    .card-main .right {
        padding: 20px;
    }

    .title-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .invite {
        width: 100% !important;
    }

    .table-box {
        flex-wrap: wrap;
        gap: 16px;
    }

    .gap-60 {
        gap: 20px !important;
    }

    .bottom-filters {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Recommended cards: 2 per row */
    .newly-launched-projects .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ---------- MOBILE / SMALL TABLET (<=768px) ---------- */
@media (max-width: 768px) {
    .listing-page {
        margin-top: 5rem;
        padding-bottom: 20px;
    }

    .sidebar,
    .filter-content {
        padding: 15px;
    }

    .top-btn {
        flex-wrap: wrap;
    }

    .top-btn button,
    .footer button {
        flex: 1 1 auto;
        white-space: nowrap;
    }

    /* Location + budget rows stack */
    .section-body .d-flex.gap-3.align-items-center {
        flex-direction: column;
        align-items: stretch !important;
    }

    .form-select {
        width: 100% !important;
    }

    .configuration.d-flex.gap-2 {
        flex-direction: column;
    }

    .configuration .form-select {
        width: 100% !important;
    }

    .amenities.d-flex.gap-3,
    .d-flex.gap-3 > .amenities {
        flex-direction: column;
    }

    /* Header / breadcrumb / sort row */
    .top-header .heading {
        font-size: 18px;
    }

    .bottom-filters {
        justify-content: flex-start !important;
    }

    .bottom-filters .d-flex.align-items-center {
        flex-wrap: wrap;
        /*gap: 10px;*/
    }

    .bottom-filters .btn-sort-map span {
        display: none;
    }

    /* Property card */
    .card-main .left,
    .card-main .left img {
        height: 220px;
    }

    .card-main .right {
        padding: 16px;
    }

    .title {
        font-size: 20px;
    }

    .title-row > div:last-child {
        text-align: left;
    }

    .right-side-badge-btn {
        flex-wrap: wrap;
    }

    .price-box {
        padding: 14px;
    }

    .price-box .price-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .new-price {
        font-size: 20px;
    }

    .old-price {
        font-size: 15px;
    }

    .table-box {
        gap: 12px;
        justify-content: space-between;
    }

    /* Action buttons: 2 per row, full width feel */
    .actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .actions form,
    .actions .btn-join,
    .actions .btn-join1,
    .actions .btn-outline-secondary {
        flex: 1 1 calc(50% - 8px);
    }

    .actions .btn-join {
        width: 100%;
        padding: 8px 10px;
    }

    .actions .btn-join1,
    .actions .btn-outline-secondary {
        width: 100%;
        padding: 8px 10px;
        text-align: center;
        justify-content: center;
    }

    /* Recommended section: 1 card per row */
    .newly-launched-projects .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .newly-launched-projects .header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .footer-btn {
        flex-direction: column;
        gap: 10px;
    }

    .newly-launched-projects .view-btn {
        width: 100%;
        text-align: center;
        padding: 10px !important;
    }

    /* Pagination shrinks */
    .pagination-wrapper {
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }

    .pagination-wrapper button,
    .pagination-wrapper a {
        padding: 8px 10px;
    }

    /* Schedule visit modal */
    #visitModal .invite-box {
        width: 92%;
        padding: 18px;
    }
}

/* ---------- SMALL MOBILE (<=576px) ---------- */
@media (max-width: 576px) {
    .listing-page {
        margin-top: 4.5rem;
    }

    .breadcrumb-item {
        font-size: 11px;
    }

    .top-header .heading {
        font-size: 16px;
    }

    .card-main .left,
    .card-main .left img {
        height: 180px;
    }

    .card-main .right {
        padding: 12px;
    }

    .title {
        font-size: 18px;
    }

    .expire {
        font-size: 10px;
    }

    .invite h4 {
        font-size: 11px;
    }

    .right-side-badge-btn .badge-btn,
    .badge-chip,
    .badge-chip-icon {
        font-size: 11px;
        padding: 6px 10px;
    }

    .table-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px !important;
    }

    .table-box .col {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .price-progress .progress-top {
        font-size: 11px;
    }

    .start-btn {
        flex-direction: column;
        align-items: flex-start;
    }

    .actions form,
    .actions .btn-join,
    .actions .btn-join1,
    .actions .btn-outline-secondary {
        flex: 1 1 100%;
    }

    /* Range sliders keep usable thumb size on touch */
    .slider-wrapper input[type="range"]::-webkit-slider-thumb {
        width: 22px !important;
        height: 22px !important;
    }

    .footer_soluction,
    .footer_community,
    .footer_about,
    .footer_quicklink {
        margin-bottom: 20px;
    }

    .copy_mainse {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .copy_left,
    .copy_right {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ---------- EXTRA SMALL (<=375px) ---------- */
@media (max-width: 375px) {
    .title {
        font-size: 16px;
    }

    .new-price {
        font-size: 18px;
    }

    .old-price {
        font-size: 13px;
    }

    .actions .btn-join,
    .actions .btn-join1,
    .actions .btn-outline-secondary {
        font-size: 12px;
        padding: 8px !important;
    }

    .chip {
        font-size: 11px;
        padding: 6px 10px;
    }
}




@media (max-width: 576px) {
    .badge-btn, .badge-chip, .badge-chip-icon {
        width: auto !important;
        justify-content: center;
        text-align: center;
        white-space: normal;
        padding: 7px 12px;
    }
}





















/* ==========================================================================
   AVA PROPERTY — PROJECT DETAIL PAGE — RESPONSIVE CSS
   Isse apni property-detail-page.css file ke SABSE END mein paste karein
   (taake ye existing rules ko override kar sake)
   ========================================================================== */

/* ---------- LAPTOP / SMALL DESKTOP (<=1200px) ---------- */
@media (max-width: 1200px) {
    .property-detail-main {
        margin-top: 140px;
    }

    .property-detail-main .col-md-6.ps-5 {
        padding-left: 2rem !important;
    }

    .buttons-gp .joinBtn2 {
        padding: 10px 40px;
    }
}

/* ---------- TABLET (<=992px) ---------- */
@media (max-width: 992px) {
    .property-detail-main {
        margin-top: 110px;
    }

    .property-detail-main .col-md-6.ps-5 {
        padding-left: 1.25rem !important;
        margin-top: 20px;
    }

    .right-side-content h4 {
        font-size: 24px;
    }

    /* Key facts / amenities grids already collapse at 768, but let's
       tighten spacing a bit earlier for tablets */
    .keyfacts-card,
    .amenities-card,
    .pricing-card,
    .construction-card,
    .emi-card {
        padding: 20px;
    }

    .floor-plan-section .top-bar {
        padding: 20px;
    }

    .floor-plan-section .details-box {
        padding-left: 0;
        padding-top: 15px;
    }

    .right-details-box {
        border-left: none;
        border-top: 1px solid #0000001A;
        margin-top: 15px;
    }

    .developer-section .stats {
        flex-wrap: wrap;
        gap: 10px;
    }

    .developer-section .stats hr {
        display: none;
    }
}

/* ---------- MOBILE / SMALL TABLET (<=768px) ---------- */
@media (max-width: 768px) {
    .property-detail-main {
        margin-top: 90px;
    }
    
    .property-detail-main .bottom-info {
    position: absolute;
    bottom: 98px;
    left: 0;
    /* padding: 10px; */
    align-items: center;
    justify-content: space-between;
}

    .property-detail-page .breadcrumb-item {
        font-size: 11px;
    }

    /* ---- Gallery / main image ---- */
    .property-detail-main .col-md-6.ps-5 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .property-detail-main #mainImage {
        border-radius: 12px;
    }

    /* Zoom lens only makes sense with a mouse — hide on touch screens */
    #lens,
    #zoomResult {
        display: none !important;
    }

    .group-buyimg {
        flex-wrap: wrap;
        gap: 6px;
        max-width: calc(100% - 60px);
    }

    .top-badges-2 {
        top: 8px !important;
        right: 8px !important;
    }

    .top-badges-2 i {
        padding: 9px 12px;
        font-size: 13px;
    }

    /* Bottom info badges: absolute positioning breaks once the image
       height shrinks on small screens — turn it into a normal wrapping
       row that sits right under the image instead. */
    .property-detail-main .bottom-info {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0 !important;
            bottom: 99px !important;
    }

    .property-detail-main .bottom-info .badge {
        font-size: 11px;
        padding: 6px 10px;
    }

    .thumbnail-strip {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

    .thumbnail-strip .thumb {
        flex: 0 0 70px;
        width: 70px !important;
        height: 60px;
        object-fit: cover;
        border-radius: 6px;
    }

    /* ---- Right side content ---- */
    .property-detail-main .right-side-content h4 {
        font-size: 20px;
    }

    .property-detail-main .skylark {
        flex-wrap: wrap;
        gap: 8px;
    }

    .property-detail-main .right-side-top {
        text-align: left;
    }

    .property-detail-main .right-side-badge-btn {
        flex-wrap: wrap;
    }

    .property-detail-main .badge-chip {
        flex-wrap: wrap;
    }

    .property-detail-main .new-price {
        font-size: 22px;
    }

    .old-price {
        font-size: 15px;
    }

    .property-detail-main .table-box {
        flex-wrap: wrap;
        gap: 14px;
    }

    .property-detail-main .table-box .fw-semibold,
    .property-detail-main .table-box .ft-semibold {
        font-size: 15px;
    }

    /* Action buttons: no more fixed huge horizontal padding, full width */
    .property-detail-main .right-side-buttons,
    .property-detail-main .right-side-buttons-2 {
        flex-direction: column;
        gap: 10px;
    }

    .property-detail-main .right-side-buttons form,
    .property-detail-main .right-side-buttons .btn-join,
    .property-detail-main .right-side-buttons .btn-outline-secondary,
    .property-detail-main .right-side-buttons-2 .btn-outline-secondary,
    .property-detail-main .right-side-buttons-2 a {
        width: 100%;
    }

    .property-detail-main .right-side-buttons .btn-join {
        padding: 12px !important;
        width: 100%;
    }

    .property-detail-main .right-side-buttons-2 .btn-outline-secondary {
        padding: 12px !important;
    }

    /* ---- Project details section ---- */
    .project-details h3 {
        font-size: 24px;
        padding: 15px 0;
    }

    .keyfacts-card .header h2,
    .amenities-header h3,
    .pricing-top h4,
    .construction-card .header h2,
    .emi-card h2 {
        font-size: 18px;
    }

    /* Amenities: stack into a single readable column on mobile */
    .amenities-card .row {
        flex-direction: column;
    }

    .amenities-card .amenity {
        width: 100%;
        margin-bottom: 14px;
    }

    /* Pricing card */
    .pricing-card .row.text-center.text-md-start {
        text-align: left !important;
    }

    .buttons-gp {
        flex-direction: column;
    }

    .buttons-gp .joinBtn2,
    .buttons-gp .btn-outline-secondary {
        width: 100%;
        padding: 12px !important;
    }

    /* Construction + EMI cards stack full width under col-md-4 already
       via bootstrap; just tighten spacing */
    .construction-card .footer {
        flex-wrap: wrap;
        gap: 15px;
    }

    .emi-card .bank img {
        width: 60px;
    }

    /* ---- Floor plan section ---- */
    .floor-plan-section .title {
        font-size: 22px;
    }

    .top-bar {
        padding: 15px !important;
        gap: 12px;
    }

    .top-bar .config1,
    .top-bar .area {
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .floor-plan-section .plan-box {
        margin: 15px 0;
        padding: 10px;
    }

    .floor-plan-section .info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .floor-plan-section .btns {
        flex-direction: column;
    }

    /* Compare-sizes table: allow horizontal scroll instead of squeezing */
    .table-section .accordion-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .floor-plan-section .table {
        min-width: 560px;
    }

    .table-section .accordion-button {
        font-size: 16px;
    }

    /* ---- Location & connectivity ---- */
    .location h4 {
        font-size: 22px;
    }

    .info-box {
        padding: 16px !important;
    }

    .info-box .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    

    .info-box .tabs .btn {
        flex: 0 0 auto;
    }

    /* ---- Map "Copy" / "Open Maps" pills ----
       These sit inside an absolutely-positioned .map-footer with no
       white-space rule, so on narrow screens the flex row runs out of
       space and the text wraps one letter per line. Force them onto
       their own row, full width, text never wraps. */
    .map-box {
        height: 220px;
    }

    .map-footer {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
        left: 8px;
        bottom: 8px;
        width: calc(100% - 16px);
    }

    .map-footer > span {
        white-space: nowrap;
        font-size: 12px;
        padding: 6px 12px;
    }

    .loc-btn-gp {
        width: 100%;
        gap: 8px;
    }

    .loc-btn-gp .btn-sm {
        white-space: nowrap;
        flex: 1 1 auto;
        justify-content: center;
        font-size: 11px;
        padding: 6px 8px;
    }

    /* ---- Nearby-location list rows ----
       Keep the "Directions" button on the same line as the text instead
       of letting long distance text push it to a new line. */
    .list-group-item.location-item,
    #locationList .list-group-item {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .list-group-item.location-item > div:first-child,
    #locationList .list-group-item > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    .list-group-item.location-item strong,
    #locationList .list-group-item strong {
        display: block;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .list-group-item.location-item .small,
    #locationList .list-group-item .small {
        font-size: 11px;
    }

    .list-group-item .btn-outline-primary {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 11px;
        padding: 6px 10px;
    }

    .list-group-item img {
        width: 28px;
        flex-shrink: 0;
    }

    .stats-box .col h5 {
        font-size: 16px;
    }

    /* ---- Know the developer ---- */
    .developer-section .row.align-items-center {
        text-align: left;
    }

    .developer-section .logo-box {
        width: 45px;
        height: 45px;
        font-size: 14px;
    }

    /* ---- Testimonials ---- */
    .testimonial-section .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* ---- Also from us ---- */
    .also-from .card {
        margin-bottom: 20px;
    }

    /* ---- Properties nearby / more projects sliders ---- */
    .properties-section .header,
    .properties-section-2 .header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .properties-section-2 .header h2 {
        flex-wrap: wrap;
        font-size: 20px;
    }

    .properties-section .title-row h4,
    .properties-section-2 .title-row h4 {
        font-size: 17px;
    }

    .properties-section .btns .primary,
    .properties-section .btns .outline,
    .properties-section-2 .btns .primary,
    .properties-section-2 .btns .outline {
        width: 100%;
        text-align: center;
        padding: 8px 10px;
    }

   
}

/* ---------- SMALL MOBILE (<=576px) ---------- */
@media (max-width: 576px) {
    .property-detail-main {
        margin-top: 75px;
    }

    .property-detail-main .right-side-content h4 {
        font-size: 18px;
    }

    .property-detail-main .new-price {
        font-size: 20px;
    }

    .keyfacts-card .box h4 {
        font-size: 14px;
    }

    .floor-plan-section .info-grid {
        grid-template-columns: 1fr;
    }

    .emi-card .bank {
        flex-wrap: wrap;
        gap: 6px;
    }

    .developer-section .stats {
        flex-direction: column;
        align-items: stretch;
    }

    .developer-section .stats div {
        padding: 8px 0;
    }

    .properties-section .save,
    .properties-section-2 .save {
        width: auto;
    }

   
}

/* ---------- EXTRA SMALL (<=375px) ---------- */
@media (max-width: 375px) {
    .property-detail-main .new-price {
        font-size: 18px;
    }

    .old-price {
        font-size: 13px;
    }

    .badge-chip-icon,
    .badge-btn {
        font-size: 10px !important;
        padding: 5px 8px !important;
    }

    .amenities-card .icon {
        width: 40px;
        height: 40px;
    }
}

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




.top_menu {
    display: flex !important;
    gap: 26px !important;
    flex-direction: column !important;
}


.top_menu p { display: block; }










/* ==========================================================================
   AVA SPACE — HOME PAGE — RESPONSIVE CSS
   Isse apni main site CSS file (jisme header/hero/sections hain) ke
   SABSE END mein paste karein (taake ye existing rules ko override kar sake)
   ========================================================================== */

/* ---------- SCROLL-LOCK SAFETY NET ----------
   Agar mobile hamburger menu (stellarnav) ki JS body/html pe overflow:hidden
   set karke stuck reh jaati hai, to poora page scroll hona band ho jaata hai
   aur full-page screenshot tools same viewport ko baar-baar capture karte
   hain (jaisa screenshot mein "Book Free Consultation" hero block dozens of
   times repeat hua). Ye rule sirf genuine menu-open state (jo aksar body pe
   ek class add karta hai) ko chhodkar, baaki hamesha scroll allow karta hai.
   Apne menu-open class ka actual naam pata karke neeche wale
   ':not(.menu-open)' selector mein replace kar dein agar naam alag ho
   (common names: .nav-open, .no-scroll, .offcanvas-open, .menu-active). */
html, body {
    overflow-x: hidden;
}

/*body:not(.menu-open):not(.nav-open):not(.no-scroll):not(.offcanvas-open):not(.menu-active) {*/
/*    overflow-y: auto !important;*/
/*    height: auto !important;*/
/*    min-height: 100%;*/
/*}*/

/* ---------- LAPTOP (<=1200px) ---------- */
@media (max-width: 1200px) {
    .advantage_container {
        grid-template-columns: 300px 1fr;
        gap: 20px;
    }

    .image-box {
        width: 220px;
    }

    .explore_loanslider {
        padding: 0 45px;
    }
}

/* ---------- TABLET (<=992px) ---------- */
@media (max-width: 992px) {
    /* ---- Header ---- */
    .main_header,
    .main_header.sticky {
        height: auto;
    }

    .hero-section {
        margin-top: 210px;
    }

    .topmain_section {
        flex-wrap: wrap;
        gap: 8px;
        row-gap: 6px;
    }

    .top_right {
        gap: 15px;
        flex-wrap: wrap;
    }

    .header_mid_section {
        flex-wrap: wrap;
        gap: 15px;
    }

    .header_mid_right {
        gap: 20px;
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
    }

    /* ---- Hero ---- */
    .hero_banner {
        height: auto;
        min-height: 480px;
        padding: 30px 20px;
    }

    .main-title {
        font-size: 2.2rem;
    }

    /* ---- Transparency section ---- */
    .transparency-container {
        flex-direction: column;
        gap: 30px;
    }

    /* ---- AVA Advantage ---- */
    .advantage_container {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        top: auto;
    }

    .step-card {
        flex-direction: column;
    }

    .image-box {
        width: 100%;
        height: 200px;
    }

    /* ---- Clarity over guesswork ---- */
    .comparison-grid {
        flex-direction: column;
    }

    .card-left {
        margin-right: 0;
        border-radius: 24px;
        padding-right: 40px;
    }

    /* ---- See homes / project cards ---- */
    .project-card {
        flex-direction: column;
    }

    .image-side {
        min-height: 260px;
    }

    .main-img {
        height: 260px;
    }

    .content-side {
        padding: 25px;
    }

    .btn-row {
        margin-top: 30px;
        flex-wrap: wrap;
    }

    /* ---- Residents-only group ---- */
    .pricing-card {
        max-width: 100%;
        width: 100%;
    }

    /* ---- Deals grid ---- */
    .deals-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /* ---- Search box ---- */
    .search-left,
    .search-right {
        padding: 35px;
    }
}

/* ---------- MOBILE / SMALL TABLET (<=768px) ---------- */
@media (max-width: 768px) {
    

    /*.container {*/
    /*    max-width: 100%;*/
    /*}*/

    /* ---- Header ---- */
    .hero-section {
        margin-top: 230px;
    }

    .sell_avamartmain p {
        font-size: 11px;
    }

    .link_button {
        gap: 10px;
        flex-wrap: wrap;
    }

    .link_button a {
        font-size: 11px;
        padding: 6px 12px;
    }

    .google_tral .form-select {
        font-size: 12px;
        padding: 10px 35px 10px 10px;
    }

    .mid_cart_section {
        gap: 12px;
    }

    .sign_main a p {
        font-size: 12px;
    }

    /* ---- Hero ---- */
    .hero-section {
        margin-top: 200px;
    }

    .hero_banner {
        min-height:100%;
        border-radius: 20px;
        justify-content: center;
        gap: 20px;
    }
    
/*    i.fa-solid.fa-angle-down.arrow-icon.rotate {*/
/*    display: none;*/
/*}*/

    .main-title {
        font-size: 1.7rem;
        margin-bottom: 20px;
    }

    .button-group_hero {
        flex-direction: column;
        width: 100%;
        margin-bottom: 30px;
    }

    .btn_hero {
        width: 100%;
        text-align: center;
        padding: 13px 20px;
    }

    .features-grid {
        flex-wrap: wrap;
        margin-bottom: 0;
    }

    .hero-section .feature-item {
        width: calc(50% - 10px);
    }

    /* ---- Assurance section ---- */
    .assurance-section {
        padding: 50px 10px;
    }

    .assurance_title h2 {
        font-size: 1.75rem;
    }

    /* ---- Content column (transparency) ---- */
    .content-column h2 {
        font-size: 1.6rem;
    }

    /* ---- Everything your home needs ---- */
    .everything_needs_section {
        padding: 40px 0;
        margin-top: 20px;
    }

    .services_title h2 {
        font-size: 1.6rem;
    }

    .top-stats {
        gap: 8px;
    }

    .stat-pill {
        padding: 6px 14px;
        font-size: 12px;
    }

    /* ---- Modular interiors ---- */
    .nav-pills {
        flex-wrap: wrap;
        gap: 6px;
    }

    .nav-pills .nav-link {
        padding: 10px 16px;
        font-size: 0.95rem;
    }

    .featured-card {
        min-height: 320px;
        padding: 25px;
    }

    .featured-card-content h2 {
        font-size: 20px;
    }

    .step-container {
        overflow-x: auto;
        justify-content: flex-start;
        gap: 20px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .step-container::before {
        display: none;
    }

    .step-item {
        width: auto;
        flex: 0 0 auto;
        min-width: 80px;
    }

    /* gallery cols inside modular tab: 2-up is fine on mobile, just tighten */
    .gallery-item-wrapper {
        height: 150px;
    }

    /* ---- Choose your package ---- */
    .packege_title h2 {
        font-size: 1.6rem;
    }

    .calc-container {
        padding: 14px 16px 16px;
    }

    .estimate-box {
        padding: 16px 20px;
        margin-top: 15px;
    }

    .d-flex.justify-content-center.gap-4.mb-5 {
        flex-direction: column;
        gap: 12px !important;
    }

    .myborder {
        width: 100%;
        text-align: left;
    }

    /* ---- Loan options ---- */
    .loan-section .header-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    .explore_loanslider {
        padding: 0 35px;
    }

    .owl-nav button {
        width: 34px;
        height: 34px;
    }

    /* ---- AVA Advantage ---- */
    .advantage_header h2 {
        font-size: 26px;
    }

    .tracker-card {
        padding: 25px 18px;
    }

    .content-box {
        padding: 20px;
    }

    /* ---- Clarity over guesswork ---- */
    .clarity_guesswork_section {
        padding: 50px 0;
    }

    .clarity_guesswork_header_section h2 {
        font-size: 26px;
    }

    .card {
        padding: 25px;
    }

    .card-left {
        padding-right: 25px;
    }

    .ava_interios_card_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .card-right .actions {
        flex-direction: column;
    }

    /* ---- See homes like yours ---- */
    .seelike_header h2 {
        font-size: 26px;
    }

    .seehome_filter_section {
        flex-wrap: wrap;
        padding: 16px 20px;
        gap: 12px;
        justify-content: flex-start;
    }

    .seehome_filter_section .filter-item {
        flex: 1 1 45%;
        max-width: none;
        padding: 0;
    }

    .content-side {
        padding: 20px;
    }

    .content h2 {
        font-size: 20px;
    }

    .btn-row {
        flex-direction: column;
    }

    .btn-row .btn {
        width: 100%;
    }

    .thumb-strip {
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    .thumb {
        flex: 0 0 100px;
        width: 100px;
        height: 64px;
    }

    .designer-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Real homes real reviews ---- */
    .main-grid {
        grid-template-columns: 1fr;
    }

    .real_title {
        font-size: 26px;
    }

    .filters {
        flex-wrap: wrap;
        gap: 10px;
    }

    .filter-group {
        flex: 1 1 45%;
    }

    .review-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 15px;
    }

    .realhome_inforight {
        text-align: left;
        margin-left: 0;
    }

    /* ---- FAQ ---- */
    .faqtatil_main h3 {
        font-size: 26px;
    }

    .category-btn {
        font-size: 12px;
        padding: 6px 12px;
    }

    .action-btns {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .action-btns .btn {
        max-width: 100% !important;
        width: 100%;
    }

    /* ---- Also from us ---- */
    .card-title {
        font-size: 20px;
    }

    /* ---- Residents-only group interiors ---- */
    .hero_title_group {
        font-size: 26px;
    }

    .stats-row {
        flex-wrap: wrap;
        gap: 10px 20px;
    }

    .cta-group button,
    .btn-primary-cta,
    .btn-secondary-cta {
        width: 100%;
        text-align: center;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .section-header h2 {
        font-size: 20px;
    }

    .deals-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Search box ---- */
    .search-left,
    .search-right {
        padding: 25px;
    }

    .form-grid {
        flex-direction: column;
        gap: 12px;
    }
}

/* ---------- SMALL MOBILE (<=576px) ---------- */
@media (max-width: 576px) {
    .hero-section {
        margin-top: 220px;
    }

    .main-title {
        font-size: 1.4rem;
    }

    .hero-section .feature-item {
        width: 100%;
    }

    .cards-container {
        gap: 16px;
    }

    .card_assurance {
        min-width: 100%;
        padding: 25px 20px;
    }

    .services-grid {
        gap: 16px;
    }

    .image-wrapper {
        height: 180px;
    }

    .card-body_everyting {
        padding: 18px;
    }

    .card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .featured-card {
        min-height: 260px;
        padding: 18px;
    }

    .calc-container .row.g-2 > div {
        margin-bottom: 10px;
    }

    .pricing-card {
        padding: 22px 16px;
    }

    .price-text {
        font-size: 1.4rem;
    }

    .buttons-gp .joinBtn2 {
        padding: 10px 20px !important;
    }

    .seehome_filter_section .filter-item {
        flex: 1 1 100%;
    }

    .status-tag {
        top: 15px;
        right: 15px;
        font-size: 12px;
    }

    .price {
        font-size: 17px;
    }

    .sidebar-card.rating-boxst h2 {
        font-size: 32px;
    }

    .savings-card h3 {
        font-size: 26px;
    }

    .search-left h2,
    .search-right h3 {
        font-size: 20px;
    }

    .promo-box {
        padding: 12px 15px;
    }

    .reward-tier {
        flex-wrap: wrap;
    }
}

/* ---------- EXTRA SMALL (<=375px) ---------- */
@media (max-width: 375px) {
    .main-title {
        font-size: 1.2rem;
    }

    .btn_hero {
        padding: 12px 16px;
        font-size: 0.9rem;
    }

    .card-body_everyting h3 {
        font-size: 18px;
    }

    .step-numbermy {
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    
    .top_left { justify-content: space-between; padding: 8px; }


}

@media (max-width: 767px) {

    .top_left {
        display: flex;
        align-items: center;
        gap: 10px;
    }



}

/* ==========================================================================
   HEADER / NAVBAR — RESPONSIVE CSS (cleaned & deduplicated)
   Matches the <header class="main_header"> markup exactly.
   Load this AFTER your main site CSS so these rules win.

   NOTE: the big combined file had the same selector
   (.navbar-custom .navbar-collapse.show) patched THREE separate times
   with conflicting values (one said height:100vh, another said
   height:auto + max-height:calc(100vh - 70px), the last said
   max-height:100vh again) — later rules were silently cancelling the
   earlier fix. Below is ONE final version only (no dead/contradicting
   rules left in).
   ========================================================================== */

/* ---------- ALWAYS (not just mobile) ----------
   Kills a stray "<p>menu</p>" debug text that sits as a direct sibling
   inside .top_menu, and stops meg-menu.css from forcing .top_menu into
   a column layout (which stacks the hamburger icon above that stray
   word at every screen size). */
/*.top_menu > p {*/
/*    display: none !important;*/
/*}*/

/*.top_menu {*/
/*    flex-direction: row !important;*/
/*    align-items: center !important;*/
/*    gap: 10px !important;*/
/*}*/

/* ---------- LAPTOP (<=1200px) ---------- */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        /*padding: 0 20px;*/
    }
    
    .overlap-icon{
            position: unset;
                margin: 10px;
    margin-bottom: 0;
    }
    
    .card-body {
    padding: 10px;
}

    .header_mid_right {
        gap: 20px;
    }

    .top_right {
        gap: 16px;
    }
}

/* ---------- TABLET (<=992px) ---------- */
@media (max-width: 992px) {
    .topmain_section {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    
    .top_menu > p {
    display: none !important;
}

    .top_right {
        gap: 14px;
        flex-wrap: wrap;
    }

    .header_mid_section {
        padding: 12px 0;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .header_mid_right {
        gap: 16px;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .main_header .navbar-brand img {
        max-width: 130px;
    }

    .navbar-custom .navbar-nav {
        min-width: 100% !important;
    }
}

/* ---------- MOBILE (<=767px) ---------- */
@media (max-width: 767px) {
    /* .menu-container is the desktop mega-menu (hamburger + tab panel
       with Solutions/Quick Links/About/Partners/Community) — hidden on
       mobile in favour of navbar-custom's own collapse menu. */
    .menu-container {
        display: none !important;
    }
    
    .copy_mainse {
    display: block;
    justify-content: space-between;
    gap: 10px;
}

.lang_but {
    text-align: center;
    margin-bottom: 45px;
    display: flex;
    align-items: center;
    justify-content: normal !important;
    gap: 20px;
}

    /* .menu_mainsection is a SECOND, separate stellarnav mobile menu
       that sits right below the header. It's redundant with
       navbar-custom (which already handles mobile nav) and was the
       cause of a stray "☰ Menu" bar + extra gap before the hero. */
    /*.menu_mainsection {*/
    /*    display: none !important;*/
    /*}*/

    .navbar-custom {
        display: block;
    }

    /* .navbar-custom carries BOTH "fixed-top" and its own inline
       positioning — this detaches the toggle from the header row and
       makes it float at a random left offset instead of sitting
       inline. Pin it back into normal flow. */
    .navbar-custom.fixed-top {
        left: auto !important;
        top:-6px;
    }

    .navbar-custom .navbar-toggler {
        padding: 0;
        border: none;
        box-shadow: none;
        position: relative;
        z-index: 10001;
    }

    /* keep just the hamburger icon, hide the "Menu" text label so it
       doesn't wrap/overflow next to the logo */
    .navbar-custom .menu-icon.mobl p {
        display: none;
    }

    .navbar-custom .menu-icon.mobl span {
        background: #fff;
    }

    /* animate hamburger -> "✕" when the panel is open, so there's an
       obvious way to close it again */
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background: #242424;
    }
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(2) {
        opacity: 0;
    }
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background: #242424;
    }

    /* Open panel: cover the full screen (both while animating -
       ".collapsing" - and once fully open - ".show" - so it doesn't
       visibly "snap" partway through the animation). Sized to content
       with its own scroll, not forced to a dead-space-leaving 100vh. */
    .navbar-custom .navbar-collapse.collapsing,
    .navbar-custom .navbar-collapse.show {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        background: #fff !important;
        z-index: 10000 !important;
        padding: 70px 15px 30px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
    }

    .navbar-custom .navbar-nav {
        min-width: 100% !important;
        margin-top: 0 !important;
        box-shadow: none !important;
    }

    .navbar-custom .navbar-nav .nav-link {
        padding: 0.7rem 1rem;
        margin: 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: solid 1px #ddd;
        background: #F2F3F7;
    }

    /* remove the small decorative grid icon next to every menu label —
       it doesn't mean anything to users, just clutter */
    .navbar-custom .nav-link .fa-th,
    .navbar-custom .nav-link i.fa-th {
        display: none !important;
    }

    /* sub-menu links (e.g. "AVA Property", "AVA Space"...) — indent +
       shrink so they read clearly as children of the row above */
    .navbar-custom .dropdown-menu {
        padding-left: 14px !important;
    }

    .navbar-custom .dropdown-item {
        font-size: 14px !important;
        padding: 0.65rem 1rem !important;
        border-bottom: solid 1px #eee !important;
    }

    .header_mid_right {
        /*justify-content: flex-end;*/
        gap: 12px;
    }

    .sign_main a p {
        display: none;
    }

    .mid_cart_section {
        gap: 12px;
    }
}

/* ---------- SMALL MOBILE (<=480px) ---------- */
@media (max-width: 480px) {
    .topmain_section {
        display: block;
    }

    .top_left {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: space-between;
        padding: 8px;
    }

    /* "How it Works / Support" links + language switcher hidden on the
       smallest screens to keep the top bar to one compact row */
    .top_right {
        display: none;
    }

    .header_mid_right {
        gap: 12px;
    }

    .dropdown-toggle {
        padding: 8px 10px 8px 14px;
        font-size: 12px;
    }
}

/* ---------- EXTRA SMALL (<=360px) ---------- */
@media (max-width: 360px) {
    .navbar-custom .navbar-nav {
        min-width: 100%;
    }

    .main_header .navbar-brand img {
        max-width: 110px;
    }
}













.menu-icon {
    width: 30px;
    height: auto;
    position: relative;
    cursor: pointer;
    z-index: 100;
    /*top: 6px;*/
}



.top_menu {
    display: flex;
    gap: 32px;
    flex-direction: column;
}






























/* ==========================================================================
   AVA ADVANTAGE — "From Idea to Handover" STEPS — RESPONSIVE SLIDER CSS
   Isse apni site CSS ke end mein paste karein.
   Matches: .advantage_container > .sidebar (tracker card) + .steps-list
   (6x .step-card with .image-box + .content-box)
   ========================================================================== */

/* ---------- TABLET (<=992px) ----------
   Fixed 350px sidebar column breaks on tablets — stack sidebar above
   the steps, let it size naturally instead of being sticky-pinned. */
@media (max-width: 992px) {
    .advantage_container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sidebar {
        position: static;
        top: auto;
        max-width: 420px;
        margin: 0 auto;
    }
}

/* ---------- MOBILE (<=767px) ----------
   Turn the 6 stacked step-cards into a horizontal swipeable slider
   instead of one very long vertical list. Pure CSS scroll-snap — no
   JS/library needed, works with native touch swipe on every phone. */
@media (max-width: 767px) {
    .steps-list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 4px 4px 16px;
        margin: 0 -4px;
        scrollbar-width: none;       /* Firefox: hide scrollbar */
        -ms-overflow-style: none;    /* old Edge/IE */
    }

    .steps-list::-webkit-scrollbar {
        display: none;               /* Chrome/Safari: hide scrollbar */
    }

    .step-card {
        flex: 0 0 82%;
        max-width: 340px;
        scroll-snap-align: center;
        flex-direction: column;      /* image on top, content below, per-card */
    }

    .step-card .image-box {
        width: 100%;
        height: 170px;
    }

    .step-card .content-box {
        padding: 20px;
    }

    .step-numbermy {
        font-size: 30px;
    }

    .content-box h3 {
        font-size: 18px;
        margin: 14px 0 8px 0;
    }

    .content-box p {
        font-size: 14px;
    }

    /* small hint so users know it's swipeable, since there are no
       visible arrows/dots in this pure-CSS version */
    .steps-list::after {
        content: "";
        flex: 0 0 4px;
    }
}

/* ---------- DOT INDICATORS (below the slider) ----------
   Generated automatically by the small JS snippet at the bottom of
   this file — no HTML changes needed. Hidden by default; only shown
   on mobile once JS adds them (so nothing appears on desktop). */
.steps-slider-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

@media (max-width: 767px) {
    .steps-slider-dots {
        display: flex;
    }
}

.steps-slider-dots button {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 50%;
    background: var(--mylight-blue, #f0f7ff);
    border: 1px solid rgba(0, 69, 158, 0.25);
    padding: 0;
    cursor: pointer;
    transition: all 0.25s ease;
}

.steps-slider-dots button.active {
    width: 24px;
    border-radius: 20px;
    background: var(--myprimary-blue, #00459E);
    border-color: var(--myprimary-blue, #00459E);
}

/* ---------- SMALL MOBILE (<=480px) ---------- */
@media (max-width: 480px) {
    .step-card {
        flex: 0 0 88%;
    }

    .step-card .image-box {
        height: 150px;
    }

    .step-card .content-box {
        padding: 16px;
    }

    .pill-group {
        gap: 6px;
    }

    .pill {
        font-size: 11px;
        padding: 6px 12px;
    }
}