html{overflow-x:hidden;scrollbar-gutter:stable;}
body{overflow-x:hidden;width:100%;}

@media (min-width:992px){
  .desktopFloatBtns{display:flex;}
}

@media (max-width:1199px){
  .header .container-fluid{padding:0 20px;}
  .heroRegisterCard{display:none;}
  .heroInfoCard{max-width:90%;left:5%;}
}

@media (min-width:992px) and (max-width:1199px){
  .header .container-fluid{padding:0 14px;}
  .navi .menu{gap:14px;}
  .navi .menu li a{font-size:11px;letter-spacing:.6px;}
  .logo img{height:40px;}
  .topHead .clbtn{padding:8px 10px;font-size:11px;}
  .phoneNumTxt{display:none;}
}

/* ===================== TABLET + MOBILE (<=991px) ===================== */
@media (max-width:991px){
  .navi{display:none!important;}
  .padding{padding:56px 0;}
  .h2, h2{font-size:2rem;}
  .banner{height:88vh;}
  .heroInfoCard{bottom:6%;padding:24px 22px;}
  .heroProjectName{font-size:2rem;}
  .amenitiesitems{grid-template-columns:repeat(3,1fr);}
  .galleryGrid{grid-template-columns:repeat(3,1fr);}
  .footer-form .row.g-0 > .col-lg-6 img{min-height:260px;}
  .mobile-action-bar{display:flex;}
  .butterfly{display:none;}

  /* leave room at the bottom for the fixed mobile action bar so footer
     content/last section is never hidden behind it (previously this was
     only compensated for below 767px, leaving it broken on tablets) */
  body{padding-bottom:64px;}

  /* clean, uncluttered header on tablet & mobile: the desktop top icon row
     (brochure / enquire / phone-number text) used to stay visible here with
     no width to spare next to the logo + hamburger, causing it to overflow
     and push the hamburger into the middle of the header. The mobile action
     bar at the bottom already exposes Enquire / Chat / Call, so we simply
     hide the desktop row and pin the hamburger to the right. */
  .topHead{display:none!important;}
  .menu-section{flex:0 0 auto;justify-content:flex-end;}
  .header .container-fluid{justify-content:space-between;}

  /* icon row under Overview wraps to 2 rows below lg (g-lg-5 gutter only
     applies at >=992px) — restore vertical spacing so rows don't touch */
  .iconWrapper .row.g-lg-5{row-gap:22px;}

  /* ===== Content centering (tablet + mobile) ===== */
  .heading{text-align:center;}
  .heading .eyebrow{display:inline-block;}

  /* CTA button rows/pairs (Download Brochure, Express Your Interest, etc.)
     were left-aligned by default flexbox behaviour — this is the
     "buttons stuck to one side while text is centered" bug. */
  .cta-box{justify-content:center;}

  .gaursBox, .gaursBox .inner, .gaursBox p{text-align:center;}
  .gaurs-logo{display:flex;justify-content:center;}

  .stats .inner{justify-content:center;}
  .statsBox{text-align:center;}

  #enquiryForm .inner{text-align:center;}
  #enquiryForm .anotherForm{text-align:left;}

  .footer-about, .footer-about .inner{text-align:center;}
  .footerlogo{display:flex;justify-content:center;}

  .footer-links{text-align:center;}
  .footer-links h4{text-align:center;}
  .footer-links .inner p{justify-content:center;}
  .capsulbox{text-align:center;}

  .overviewRerabox{text-align:center!important;}
  .raraInnerbox{justify-content:center;margin:0 auto;}

  .footer-disclaimer, .footer-disclaimer .container-lg{text-align:center;}
  .disclaimer-points{justify-content:center;}
  .disclaimer, .disclaimer-text{text-align:center;}

  .copybox{text-align:center;}
  .privacybox{justify-content:center;}

  .modal-body{text-align:center;}
  .modal-body .anotherForm, .modal-body form{text-align:left;}

  .connectivity-box .in{gap:12px;justify-content:center;}
  .connectivity-box .location-text{text-align:center;}
}

/* ===================== PHONES (<=767px) ===================== */
@media (max-width:767px){
  .logo img{height:42px;}
  .banner{height:auto;min-height:0;overflow:visible;}
  .banner .carousel-inner, .banner .carousel-item{height:62vh;min-height:380px;}
  .bannerText{top:38%;}
  .bannerTagline{font-size:1.2rem!important;}

  /* Hero info card: below the image, not overlapping it — background
     switched to the site's own teal-ink tone (matching the RERA strip)
     instead of a generic black, so the card, image gradient and RERA
     bar all read as one consistent brand palette. */
  .heroInfoCard{
    position:relative;left:auto;right:auto;bottom:auto;top:auto;
    display:block;width:auto;max-width:none;
    margin:-28px 16px 0;padding:24px 20px;
    background:linear-gradient(180deg,rgba(9,55,53,.92),rgba(4,26,25,.94));
    border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,.35);
    text-align:center;
  }
  .heroPriceTag{font-size:11px;letter-spacing:1.5px;white-space:normal;}
  .heroPriceTag strong{font-size:19px;}
  .heroPriceRow{justify-content:center;flex-wrap:wrap;}
  .heroLocation{text-align:center;}
  .heroProjectName{font-size:1.6rem;}
  .heroPriceRow strong{font-size:1.3rem;}
  .btnEnquire{width:100%;justify-content:center;}
  .raraBox.overviewRerabox.toprerabox{display:none;}
  .raraBox.overviewRerabox.mbrerabox{display:block;position:relative;top:auto;left:auto;margin:16px 16px 0;}
  .amenitiesitems{grid-template-columns:repeat(2,1fr);}
  .galleryGrid{grid-template-columns:repeat(2,1fr);}
  .pricingTable, .pricingTable tbody, .pricingTable tr, .pricingTable td{display:block;width:100%;}
  .pricingTable{border:0;}
  .pricingTable thead{display:none;}
  .pricingTable tbody tr{
    border:1px solid rgba(0,0,0,.1);border-radius:4px;margin-bottom:16px;
    padding:16px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.05);
  }
  .pricingTable tbody tr:last-child{margin-bottom:0;}
  .pricingTable tbody td{padding:6px 0;border-bottom:0;font-size:14px;text-align:center;}
  .pricingTable td:nth-child(1)::before,
  .pricingTable td:nth-child(2)::before,
  .pricingTable td:nth-child(3)::before{
    content:attr(data-label);display:block;color:var(--gold-dark);font-size:10.5px;
    font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:2px;
  }
  .pricingTable .priceCell{font-size:1.15rem;}
  .pricingTable td:nth-child(4){padding-top:12px;display:flex;flex-direction:column;gap:8px;align-items:center;}
  .pricingTable td:nth-child(4) a{
    margin-right:0;text-align:center;border:1px solid var(--gold-dark);padding:10px 12px;
    border-radius:2px;width:100%;
  }
  #enquiryForm .inner{padding:40px 24px!important;}
  .yamunaBox picture img{height:260px;}
  .modal-body{padding:26px 22px;}
  .quickStatsRow{flex-wrap:wrap;}
  .quickStatsRow .qsItem{min-width:50%;border-bottom:1px solid rgba(201,151,63,.25);}
  .heading p, .padding p.text-center{padding:0 4px;}

  /* ===== Typography (mobile) ===== */
  body, p, li, a, span, .btn, .clbtn{font-family:var(--sans);}
  h1, h2, h3, h4, h5, .h2{font-family:var(--sans)!important;letter-spacing:.3px;}
}

/* ===================== SMALL PHONES (<=576px) ===================== */
@media (max-width:576px){
  .heroInfoCard{padding:16px;}
  .heroProjectName{font-size:1.4rem;}
  .amenitiesitems{grid-template-columns:repeat(2,1fr);}

  /* Stack CTA button pairs full-width & centered — the standard mobile
     pattern — instead of two unevenly-sized buttons squeezed side by side. */
  .cta-box{flex-direction:column;align-items:center;}
  .cta-box > a, .cta-box > button{width:100%;justify-content:center;text-align:center;}
}