/* MOBILE / TABLET FIXES
   styles.css ke BAAD load karo:
   <link rel="stylesheet" href="styles.css">
   <link rel="stylesheet" href="mobile-fix.css">
*/

/* Image aur listing cards ke beech ki heading: desktop par hidden */
.plans-heading{display:none}

/* Tablet: listing cards 2 column (inline style ko override karne ke liye !important) */
@media(max-width:980px){
  .plans-grid{grid-template-columns:1fr 1fr!important}
  .plans-grid .plan-box:last-child:nth-child(odd){grid-column:1/-1}
}

/* Mobile */
@media(max-width:700px){
  /* hero ke 4 features ek hi row me */
  .hero-features{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important;flex-wrap:nowrap!important}
  .hf{width:auto!important;font-size:10px!important;line-height:1.35}
  .hf-ic{width:44px!important;height:44px!important;font-size:15px!important;margin-bottom:8px!important}

  /* listing cards: ek row me ek card */
  .plans-grid{grid-template-columns:1fr!important}

  /* image aur listing cards ke beech heading */
  .plans-heading{display:block;padding:0 18px;margin-top:34px;text-align:left}
  .plans-heading .eyebrow{margin-bottom:8px}
  .plans-heading h2{font-size:26px;line-height:1.2;color:var(--maroon);margin-bottom:8px}
  .plans-heading p{font-size:14px;color:#000;margin:0}
  .plans-grid{margin-top:22px!important}

  /* Floor Plans heading + button upar-neeche */
  .plans .wrap>div:first-child{flex-direction:column!important;align-items:flex-start!important;gap:18px!important}
  .plans .wrap>div:first-child>div:last-child{margin:0!important}

  /* location list: naam ek side, mins doosri side */
  .loc-times{padding-left:0!important;margin-left:0!important}
  .loc-times li{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;gap:12px!important}
  .loc-place{flex:1;font-size:14px!important}
  .loc-time{flex:0 0 auto!important;font-size:13px!important}
}

/* Bahut chhote phone */
@media(max-width:360px){
  .hero-features{grid-template-columns:repeat(2,1fr)!important;row-gap:18px!important}
}

/* HERO text readable on mobile/tablet (background image ke upar) */
@media(max-width:980px){
  .hero-overlay{background:linear-gradient(180deg,rgba(12,8,4,.82) 0%,rgba(12,8,4,.74) 45%,rgba(12,8,4,.88) 100%)!important}
  .hero-left{text-shadow:0 1px 8px rgba(0,0,0,.65)}
  .hero p.tag{color:#fff!important;font-size:15px!important}
  .btn-outline{background:rgba(0,0,0,.45)!important;border-color:#fff!important}
  .hero-locline{color:#fff!important}
}
@media(max-width:700px){
  .hf{font-size:11px!important;font-weight:500!important}
}

/* =========================================================
   NEW 1: Enquire button (listing cards) — hover wala look ab normal me
   (desktop + mobile dono)
========================================================= */
.plan-enq{background:var(--maroon);border-color:var(--maroon);color:#fff}
.plan-enq:hover{background:var(--ruby);border-color:var(--ruby);color:#fff}

/* =========================================================
   NEW 2: Mobile par banner ka Enquire form strip ke niche
   (JS form ko #mobileEnquirySlot me move karta hai, desktop par wapas)
========================================================= */
.mobile-enquiry-slot{display:none}
@media(max-width:700px){
  .mobile-enquiry-slot{display:block;padding:26px 12px 0}
  .mobile-enquiry-slot:empty{display:none}
  .mobile-enquiry-slot .enquiry-card{max-width:100%;margin:0}
  .hero{padding-bottom:70px}
  .map-box {
          height: 192px;
  }
  .faq-title{
      padding-top:20px;
  }
}

/* =========================================================
   NEW 3: Navbar ke niche section menu
========================================================= */
html{scroll-padding-top:50px}
.sub-nav{position:sticky;top:0;z-index:999;background:var(--maroon-deep);border-bottom:1px solid rgba(201,162,74,.35)}
.sub-nav-inner{max-width:1400px;margin:0 auto;padding:0 32px;display:flex;justify-content:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.sub-nav-inner::-webkit-scrollbar{display:none}
.sub-nav a{flex:0 0 auto;padding:12px 16px;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--gold-light);white-space:nowrap;border-bottom:2px solid transparent;transition:.25s}
.sub-nav a:hover,.sub-nav a.active{color:#fff;border-bottom-color:var(--gold)}
@media(max-width:1000px){
  .sub-nav-inner{justify-content:flex-start;padding:0 10px}
  .sub-nav a{padding:12px 12px;font-size:11px}
}