/* ==========================================================================
   premium.css — refined skin layered over the original style.css
   Loaded AFTER style.css. Structure, markup and images are untouched;
   this file only changes how it looks.

   Direction: light, calm, editorial. Ivory paper, deep forest green,
   antique gold. Playfair Display headings over Inter body. Soft shadows,
   generous whitespace, one accent colour used sparingly.
   ========================================================================== */

:root {
  --p-green:      #17332e;
  --p-green-soft: #24483f;
  --p-gold:       #b08d4f;
  --p-gold-lit:   #cfae72;
  --p-gold-pale:  #f3ead9;
  --p-paper:      #fdfcfa;
  --p-paper-2:    #f6f3ee;
  --p-ink:        #22302c;
  --p-body:       #5c6a66;
  --p-line:       #e6e0d5;
  --p-shadow:     0 18px 50px -28px rgba(23, 51, 46, 0.34);
  --p-shadow-lg:  0 30px 70px -34px rgba(23, 51, 46, 0.42);
  --p-ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------- base -- */

body {
  background: var(--p-paper) !important;
  color: var(--p-body) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.heading h3, .section-title h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--p-ink) !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em;
  line-height: 1.18;
}

p { color: var(--p-body); }

::selection { background: var(--p-gold); color: #fff; }

/* section rhythm — the original is cramped; give everything room to breathe */
section { padding-top: clamp(56px, 6.5vw, 96px) !important; padding-bottom: clamp(56px, 6.5vw, 96px) !important; }
section.banner-section { padding: 0 !important; }

/* shared section headings */
.heading.text-center h3,
.section-title h2 {
  font-size: clamp(28px, 3.4vw, 42px) !important;
  position: relative;
  display: inline-block;
  padding-bottom: 18px;
  margin-bottom: 6px;
}
.heading.text-center h3::after,
.section-title h2::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 54px;
  height: 2px;
  background: var(--p-gold);
}
.section-title p { color: var(--p-body) !important; font-size: 16.5px !important; }

/* ---------------------------------------------------------------- nav --- */

.header-area,
.header-area.overlay {
  background: rgba(253, 252, 250, 0.94) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--p-line);
  box-shadow: 0 1px 24px -14px rgba(23, 51, 46, 0.4);
}
.header-area .navbar { padding: 10px 0 !important; }
.header-area .navbar-brand .logo { max-height: 52px; width: auto; }

.navbar-dark .navbar-nav .nav-link,
.header-area .nav-item.nav-link {
  color: var(--p-ink) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 14px !important;
  position: relative;
  transition: color 0.3s var(--p-ease);
}
.header-area .nav-item.nav-link::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1.5px;
  background: var(--p-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--p-ease);
}
.header-area .nav-item.nav-link:hover { color: var(--p-gold) !important; }
.header-area .nav-item.nav-link:hover::after { transform: scaleX(1); }

.navbar-toggler { border: 1px solid var(--p-line) !important; }
.menu-icon-bar { background: var(--p-ink) !important; }
.mob-contact .btn { background: var(--p-green) !important; color: #fff !important; border-radius: 50% !important; }

/* ---------------------------------------------------- announcement bar -- */

.urgency-bar {
  background: var(--p-green) !important;
  color: var(--p-gold-pale) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em;
  padding: 10px 16px !important;
  text-transform: none !important;
  animation: none !important;
}
.urgency-bar span { color: var(--p-gold-lit) !important; font-weight: 600 !important; }

/* ---------------------------------------------------------------- hero -- */

.banner-section .slider-img {
  min-height: clamp(520px, 74vh, 760px);
  object-fit: cover;
}
/* readable gradient scrim instead of the flat dark wash */
.banner-section .banner-main .carousel-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(15, 32, 28, 0.86) 0%,
              rgba(15, 32, 28, 0.62) 42%,
              rgba(15, 32, 28, 0.16) 72%,
              rgba(15, 32, 28, 0.30) 100%);
  pointer-events: none;
}
.banner-section .carousel-caption { z-index: 3; }

.carousel-caption-content h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
  font-size: clamp(38px, 5vw, 66px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.005em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  margin-bottom: 6px !important;
}
.carousel-caption-content h1 span {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--p-gold-lit) !important;
  margin-top: 20px;
}

/* the three stat cards */
.roi-cards { gap: 14px !important; margin: 32px 0 26px !important; flex-wrap: wrap; }
.roi-card {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 18px 20px !important;
  min-width: 150px;
  box-shadow: none !important;
  transition: border-color 0.4s var(--p-ease), transform 0.4s var(--p-ease);
}
.roi-card:hover { border-color: var(--p-gold) !important; transform: translateY(-3px); }
.roi-card .value {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(26px, 2.6vw, 34px) !important;
  color: var(--p-gold-lit) !important;
  font-weight: 400 !important;
  line-height: 1.1;
}
.roi-card .label {
  font-size: 12px !important;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.45;
  margin-top: 7px;
}

.banner-message {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 56ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
  font-weight: 400 !important;
}

/* hero buttons */
.hero-btns { gap: 14px !important; margin-top: 30px !important; flex-wrap: wrap; }
.hero-btn {
  border-radius: 4px !important;
  padding: 15px 28px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none !important;
  border: 1px solid transparent !important;
  transition: transform 0.35s var(--p-ease), background 0.35s var(--p-ease), color 0.35s var(--p-ease);
}
.hero-btn.primary-btn {
  background: var(--p-gold) !important;
  color: #fff !important;
}
.hero-btn.primary-btn:hover { background: #9c7b41 !important; transform: translateY(-2px); }
.hero-btn.whatsapp-btn {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #fff !important;
}
.hero-btn.whatsapp-btn:hover { background: #fff !important; color: var(--p-green) !important; transform: translateY(-2px); }

/* --------------------------------------------------- sticky side form -- */

.sidebar-contact .banner-form,
.footer-form {
  background: #fff !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--p-shadow-lg) !important;
  padding: 26px 24px !important;
}
.sidebar-contact .banner-form h2,
.footer-form .heading {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--p-ink) !important;
  background: none !important;
  font-size: 22px !important;
  border-radius: 0 !important;
  padding: 0 0 16px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--p-line);
}
.sidebar-contact .form-control,
.footer-form .form-control,
.footer-form select,
.sidebar-contact select,
#f-budget {
  background: var(--p-paper-2) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 6px !important;
  color: var(--p-ink) !important;
  font-size: 15px !important;
  padding: 13px 15px !important;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color 0.3s var(--p-ease), background 0.3s var(--p-ease);
}
.sidebar-contact .form-control:focus,
.footer-form .form-control:focus,
select:focus {
  border-color: var(--p-gold) !important;
  background: #fff !important;
  outline: none !important;
}
::placeholder { color: #9aa5a1 !important; }

.button,
input[type="submit"],
.sidebar-contact .btn {
  background: var(--p-green) !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 30px !important;
  transition: background 0.35s var(--p-ease), transform 0.35s var(--p-ease);
}
.button:hover,
input[type="submit"]:hover { background: var(--p-gold) !important; transform: translateY(-2px); }

.sidebar-contact .sidebar-tab,
.sidebar-contact > a,
.sidebar-contact .enquire-tab { background: var(--p-gold) !important; }

/* ------------------------------------------------------- why invest ---- */

.why-invest-section { background: var(--p-paper-2) !important; }
.section-tag {
  display: inline-block;
  background: none !important;
  color: var(--p-gold) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0 !important;
  margin-bottom: 14px !important;
  border-radius: 0 !important;
}
.why-invest-section .section-title { color: var(--p-ink) !important; }
.why-invest-section .section-title span { color: var(--p-gold) !important; display: block; }
.section-subtitle { color: var(--p-body) !important; max-width: 68ch; margin-inline: auto; font-size: 16.5px !important; }

.why-grid { gap: 24px !important; margin-top: 48px !important; }
.why-card {
  background: #fff !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--p-shadow) !important;
  padding: 34px 30px !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--p-ease), box-shadow 0.45s var(--p-ease), border-color 0.45s var(--p-ease);
}
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--p-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--p-ease);
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--p-shadow-lg) !important;
  border-color: var(--p-gold-pale) !important;
}
.why-card:hover::before { transform: scaleX(1); }
.why-icon {
  font-size: 26px !important;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  background: var(--p-gold-pale) !important;
  border-radius: 50%;
  margin-bottom: 20px !important;
}
.why-card h3 { font-size: 21px !important; margin-bottom: 12px !important; }
.why-card p { font-size: 15px !important; line-height: 1.7 !important; }
.why-card .highlight {
  display: inline-block;
  background: transparent !important;
  color: var(--p-green) !important;
  border: 1px solid var(--p-line);
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  padding: 7px 16px !important;
  margin-top: 18px;
}

/* ------------------------------------------------------------ brands --- */

.sec_3 { background: #fff !important; }
.sec_3 .amen_list.brand {
  background: var(--p-paper) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 10px !important;
  padding: 18px !important;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  min-height: 96px;
  box-shadow: none !important;
  transition: box-shadow 0.4s var(--p-ease), transform 0.4s var(--p-ease), border-color 0.4s var(--p-ease);
}
.sec_3 .amen_list.brand:hover {
  box-shadow: var(--p-shadow) !important;
  border-color: var(--p-gold-pale) !important;
  transform: translateY(-3px);
}
.sec_3 .amenity-icon {
  max-height: 52px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.4s var(--p-ease), opacity 0.4s var(--p-ease);
}
.sec_3 .amen_list.brand:hover .amenity-icon { filter: none; opacity: 1; }

/* ------------------------------------------------------- floor / price -- */

.feedback-area { background: var(--p-paper-2) !important; }
.feedback-area .section-title h2 { color: var(--p-ink) !important; font-weight: 400 !important; }

.single-feedback {
  background: #fff !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--p-shadow) !important;
  padding: 0 0 28px !important;
  overflow: hidden;
  height: 100%;
  transition: transform 0.45s var(--p-ease), box-shadow 0.45s var(--p-ease);
}
.single-feedback:hover { transform: translateY(-6px); box-shadow: var(--p-shadow-lg) !important; }

.single-feedback .client-image {
  margin: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 210px;
  overflow: hidden;
}
.single-feedback .client-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform 0.7s var(--p-ease);
}
.single-feedback:hover .client-image img { transform: scale(1.05); }

.single-feedback > p {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 22px !important;
  color: var(--p-ink) !important;
  margin: 24px 28px 8px !important;
  text-align: left;
}
.single-feedback .bar { display: none !important; }
.single-feedback > span {
  display: block;
  margin: 0 28px 6px !important;
  color: var(--p-gold) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
}
.single-feedback > div[style] {
  margin: 0 28px 4px !important;
  color: var(--p-green) !important;
  font-size: 14px !important;
}
.floor-features {
  list-style: none;
  padding: 0 !important;
  margin: 16px 28px 22px !important;
  border-top: 1px solid var(--p-line);
  padding-top: 14px !important;
}
.floor-features li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 14.5px;
  color: var(--p-body);
  border: 0 !important;
}
.floor-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 15px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--p-gold);
}
.btn.new-watsapp {
  display: block;
  margin: 0 28px !important;
  background: var(--p-green) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background 0.35s var(--p-ease);
}
.btn.new-watsapp:hover { background: var(--p-gold) !important; }

/* --------------------------------------------------------- advantages -- */

.advantages { background: #fff !important; }
.highlights-point > p { font-size: 17px !important; color: var(--p-ink) !important; margin-bottom: 24px; }
.highlights-point ul { padding: 0 !important; list-style: none; }
.highlights-point ul li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0 !important;
  border-bottom: 1px solid var(--p-line);
}
.highlights-point ul li:first-child { border-top: 1px solid var(--p-line); }
.highlights-point ul li p { margin: 0 !important; font-size: 15.5px !important; color: var(--p-ink) !important; }
.highlights-point .f-icon { width: 26px; height: 26px; flex: none; }

.location-sec img,
.lc-map img {
  border-radius: 12px !important;
  box-shadow: var(--p-shadow) !important;
  border: 1px solid var(--p-line);
}
.loc-map-layout { margin-top: 44px; }
.lc-map p {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 18px !important;
  color: var(--p-ink) !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.02em;
}
.lc-map a { display: block; overflow: hidden; border-radius: 12px; }

/* ------------------------------------------------------------ gallery -- */

.gallery { background: var(--p-paper-2) !important; }
.gallery .row > [class*='col-'] { margin-bottom: 24px; }
.gallery a { display: block; overflow: hidden; border-radius: 12px; box-shadow: var(--p-shadow); }
.gallery .site-plan-img {
  border-radius: 12px !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--p-ease), filter 0.6s var(--p-ease);
}
.gallery a:hover .site-plan-img { transform: scale(1.06); filter: brightness(1.04); }

/* ------------------------------------------------------- testimonials -- */

.testimonials-section { background: var(--p-green) !important; }
.testimonials-section .section-tag { color: var(--p-gold-lit) !important; }
.testimonials-section .section-title,
.testimonials-section .section-title span,
.testimonials-section h2 { color: #fff !important; }
.testimonials-section .section-title::after { background: var(--p-gold-lit); }
.testimonials-section .section-subtitle { color: rgba(255, 255, 255, 0.72) !important; }

.testimonials-grid { gap: 24px !important; margin-top: 44px !important; }
.testimonial-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  padding: 32px 28px !important;
  box-shadow: none !important;
  transition: border-color 0.4s var(--p-ease), transform 0.4s var(--p-ease);
}
.testimonial-card:hover { border-color: var(--p-gold-lit) !important; transform: translateY(-4px); }
.testimonial-card p { color: rgba(255, 255, 255, 0.86) !important; font-size: 15.5px !important; font-style: italic; }
.testimonial-author strong,
.testimonial-author h4 { color: #fff !important; font-family: 'Playfair Display', Georgia, serif !important; }
.testimonial-author span, .testimonial-author p { color: var(--p-gold-lit) !important; font-size: 13px !important; font-style: normal; }
.stars, .rating { color: var(--p-gold-lit) !important; }

/* ------------------------------------------------------------ contact -- */

.contact.section-bg { background: #fff !important; }
.contact .footer-form { max-width: 860px; margin-inline: auto; }

/* ------------------------------------------------- fixed footer / dock -- */

.fix-footer {
  background: rgba(23, 51, 46, 0.97) !important;
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fix-footer a { color: #fff !important; font-size: 13px !important; letter-spacing: 0.04em; }
.fix-footer a i { color: var(--p-gold-lit) !important; }

/* the floating WhatsApp bubble */
.whatsapp-float, .whats-app, a[href*='wa.me'].float {
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.4) !important;
}

/* ------------------------------------------------------------ footer --- */

footer, .footer-section, .copyright {
  background: var(--p-green) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
footer a { color: rgba(255, 255, 255, 0.8) !important; }
footer a:hover { color: var(--p-gold-lit) !important; }
footer h3, footer h4 { color: #fff !important; }

/* the legal / disclaimer block — make it readable, not buried */
.disclaimer, .disclaimer-sec, .rera-sec {
  background: var(--p-paper-2) !important;
  color: var(--p-body) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  border-top: 1px solid var(--p-line);
}

/* ------------------------------------------------------------ motion --- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--p-ease), transform 0.8s var(--p-ease); }
.reveal.visible, .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------------- responsive --- */

@media (max-width: 991px) {
  .banner-section .slider-img { min-height: 640px; }
  .banner-section .banner-main .carousel-item::after {
    background: linear-gradient(180deg, rgba(15, 32, 28, 0.5) 0%, rgba(15, 32, 28, 0.86) 60%);
  }
  .carousel-caption-content h1 { font-size: 34px !important; }
  .roi-card { min-width: 0; flex: 1 1 30%; padding: 14px 12px !important; }
  .roi-card .label { font-size: 11px !important; }
  .single-feedback > p,
  .single-feedback > span,
  .floor-features,
  .btn.new-watsapp,
  .single-feedback > div[style] { margin-left: 20px !important; margin-right: 20px !important; }
}

@media (max-width: 575px) {
  .hero-btn { width: 100%; justify-content: center; }
  .roi-cards { gap: 8px !important; }
  .why-card { padding: 26px 22px !important; }
  .heading.text-center h3, .section-title h2 { font-size: 26px !important; }
}

/* ==========================================================================
   Overrides for rules that live in the page's inline <style> block or
   deeper in style.css — kept here so the fix is easy to find.
   ========================================================================== */

/* nav was a solid corporate blue (#024690) */
.navbar,
.header-area .navbar,
.navbar.navbar-dark { background-color: transparent !important; }
.header-area { background: rgba(253, 252, 250, 0.94) !important; }
.header-area .navbar-nav > li > a,
.header-area .navbar-nav .nav-link { color: var(--p-ink) !important; }
.header-area .navbar-nav > li > a:hover { color: var(--p-gold) !important; }

/* hero legibility scrim */
.banner-section .carousel-item { position: relative; }
.banner-section .carousel-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg,
              rgba(12, 28, 24, 0.92) 0%,
              rgba(12, 28, 24, 0.74) 38%,
              rgba(12, 28, 24, 0.28) 66%,
              rgba(12, 28, 24, 0.10) 100%);
}
.banner-main .carousel-caption { z-index: 5 !important; }

/* the hero buttons had a sliding dark panel behind them */
.hero-btn::before { display: none !important; }

/* sticky enquiry card: was a black box with gold top/bottom rules */
.enquiry-form {
  background-color: #fff !important;
  border: 1px solid var(--p-line) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 12px !important;
  box-shadow: var(--p-shadow-lg) !important;
  padding: 28px 26px !important;
}
.enquiry-form h5 {
  font-family: 'Playfair Display', Georgia, serif !important;
  background: none !important;
  color: var(--p-ink) !important;
  font-size: 21px !important;
  padding: 0 0 16px !important;
  margin: 0 0 20px !important;
  border-bottom: 1px solid var(--p-line) !important;
  border-radius: 0 !important;
}
.enquiry-form .form-group { margin-bottom: 14px; }
.enquiry-form .form-control,
.enquiry-form select {
  background: var(--p-paper-2) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 6px !important;
  color: var(--p-ink) !important;
  padding: 13px 15px !important;
  width: 100%;
}

/* the vertical "Enquire Now!" tab */
.toggle {
  background: var(--p-gold) !important;
  color: #fff !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 14px !important;
  letter-spacing: 0.08em;
  box-shadow: -6px 0 20px -10px rgba(0, 0, 0, 0.4);
}
.toggle::before { color: #fff !important; }

/* headline colour was set to red / black inline */
.banner-section h1 { color: #fff !important; background: none !important; padding: 0 !important; }

/* .navbar is the actual fixed bar (.header-area is just a wrapper) ---------- */
.navbar,
.header-area .navbar,
.navbar.navbar-dark {
  background-color: rgba(253, 252, 250, 0.95) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--p-line);
  box-shadow: 0 6px 24px -18px rgba(23, 51, 46, 0.55) !important;
}
.header-area { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.header-area.overlay::after { display: none !important; }

/* remove the shadow the theme puts on every <section> */
section { box-shadow: none !important; }

/* WhatsApp CTA — keep it recognisable, just calmer */
.hero-btn.whatsapp-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none !important;
}
.hero-btn.whatsapp-btn:hover {
  background: #fff !important;
  color: var(--p-green) !important;
  box-shadow: none !important;
}

/* keep hero content clear of the fixed bar */
.banner-section .carousel-caption { padding-top: 40px; }

/* The project logo is a white-text lockup, so the bar has to be dark.
   Deep forest green reads more premium than the original corporate blue. */
.navbar,
.header-area .navbar,
.navbar.navbar-dark {
  background-color: rgba(20, 44, 39, 0.94) !important;
  border-bottom: 1px solid rgba(207, 174, 114, 0.22) !important;
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.9) !important;
}
.header-area .navbar-nav > li > a,
.header-area .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.86) !important;
}
.header-area .navbar-nav > li > a:hover,
.header-area .nav-item.nav-link:hover { color: var(--p-gold-lit) !important; }
.header-area .nav-item.nav-link::after { background: var(--p-gold-lit); }
.menu-icon-bar { background: #fff !important; }
.navbar-toggler { border-color: rgba(255, 255, 255, 0.35) !important; }

/* the Omaxe corporate logo is dark-on-transparent — give it a light plate */
.navbar-brand .logo { background: transparent; }

/* section headings (h2.section-title is the element itself, not a wrapper) -- */
.section-heading { text-align: center !important; max-width: 820px; }
h2.section-title,
.why-invest-section h2.section-title,
.testimonials-section h2.section-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--p-ink) !important;
  line-height: 1.2 !important;
  margin-bottom: 18px !important;
}
h2.section-title span { color: var(--p-gold) !important; }
.testimonials-section h2.section-title { color: #fff !important; }
.testimonials-section h2.section-title span { color: var(--p-gold-lit) !important; }
.section-heading .section-subtitle { margin-inline: auto; text-align: center; }

/* the sticky enquiry panel was covering a whole column of content —
   dock it closed and let the "Enquire Now!" tab open it */
.sidebar-contact { right: -380px !important; width: 372px !important; transition: right 0.5s var(--p-ease) !important; }
.sidebar-contact.active { right: 0 !important; }

/* ---------------------------------------------- auto enquiry pop-up ----- */

#autoEnquiryModal .modal-dialog { max-width: 430px; }
.auto-enquiry {
  border: 0 !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55) !important;
  background: #fff !important;
}
.auto-enquiry__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 5;
  filter: invert(1) grayscale(1) brightness(2);
  opacity: 0.85;
}
.auto-enquiry__head {
  background: linear-gradient(160deg, #1b3b34, #12292434);
  background-color: var(--p-green);
  padding: 26px 28px 22px;
  text-align: center;
}
.auto-enquiry__logo { max-height: 46px; width: auto; margin: 0 auto 14px; display: block; }
.auto-enquiry__head h5 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
  font-size: 21px !important;
  margin: 0 0 8px !important;
}
.auto-enquiry__head p { color: rgba(255, 255, 255, 0.72) !important; font-size: 13.5px !important; margin: 0; line-height: 1.55; }

.auto-enquiry__form { padding: 24px 28px 28px; }
.auto-enquiry__form .form-group { margin-bottom: 12px; }
.auto-enquiry__form .form-control {
  background: var(--p-paper-2) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 6px !important;
  padding: 13px 15px !important;
  font-size: 15px !important;
  color: var(--p-ink) !important;
  width: 100%;
}
.auto-enquiry__form .form-control:focus { border-color: var(--p-gold) !important; background: #fff !important; outline: none; }
.auto-enquiry__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8a938f;
  margin: 12px 0 16px;
}
.auto-enquiry__consent input { margin-top: 2px; accent-color: var(--p-gold); flex: none; }
.auto-enquiry__consent a { color: var(--p-gold) !important; text-decoration: underline; }
.auto-enquiry__form .button { width: 100%; }

/* --------------------------------------------------- chatbot launcher -- */

#chat-square {
  position: fixed !important;
  right: 22px;
  bottom: 92px;
  z-index: 9998;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px !important;
  background: var(--p-green) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer;
  border: 1px solid rgba(207, 174, 114, 0.4) !important;
  transition: transform 0.35s var(--p-ease), background 0.35s var(--p-ease);
}
#chat-square:hover { transform: translateY(-3px); background: #1e463d !important; }
#chat-square .chatbot-tail-inner {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: url('../img/ankur_chat.jpeg') center/cover no-repeat, var(--p-gold);
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
#chat-square .chatbot-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
}
.chat-wrapper { z-index: 10000 !important; }
.chat-header { background: var(--p-green) !important; }
.chat-header-name { font-family: 'Playfair Display', Georgia, serif !important; }

@media (max-width: 575px) {
  #chat-square { bottom: 86px; right: 14px; padding: 8px 14px 8px 8px !important; }
  #chat-square .chatbot-label { font-size: 12px; }
}

/* modal close button sat as a black square on the green header */
.auto-enquiry__close {
  background: rgba(255, 255, 255, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") center/11px no-repeat !important;
  filter: none !important;
  border-radius: 50% !important;
  width: 30px; height: 30px;
  opacity: 1 !important;
  padding: 0 !important;
  transition: background 0.3s var(--p-ease);
}
.auto-enquiry__close:hover { background-color: rgba(255, 255, 255, 0.28) !important; }

/* chat window trim */
.chat-header-photo {
  background: url('../img/ankur_chat.jpeg') center/cover no-repeat, var(--p-gold) !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
}
.chat-header-name { color: #fff !important; font-size: 16px !important; }
#chat-close { background: rgba(255, 255, 255, 0.16) !important; border-radius: 50% !important; }
.chat-actions-container .hb-actions-buttons,
.chat-actions-container button { border-radius: 6px !important; }

/* pricing card CTA was overflowing the card */
.btn.new-watsapp { width: auto !important; box-sizing: border-box; text-align: center; }
.single-feedback { display: flex; flex-direction: column; }
.single-feedback .btn.new-watsapp { margin-top: auto !important; }

/* ==========================================================================
   Fixes: announcement bar, floating buttons, brand logo colour
   ========================================================================== */

/* The announcement bar was position:fixed under the navbar, so it followed you
   down the whole page. It belongs in the flow, right under the nav. */
.urgency-bar {
  position: static !important;
  top: auto !important;
  margin-top: 66px;                 /* clears the fixed navbar */
  z-index: 1 !important;
}
@media (max-width: 767px) {
  .urgency-bar { margin-top: 62px; top: auto !important; }
}

/* Floating actions — one aligned stack in the bottom-right, phone on the left.
   Previously the WhatsApp bubble and the chat launcher sat at different
   offsets and collided. */
.whtsap-btn {
  bottom: 24px !important;
  right: 22px !important;
  height: 54px !important;
  width: 54px !important;
  font-size: 27px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: #25a05c !important;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45) !important;
  animation: none !important;       /* the theme's blink is distracting */
  transition: transform 0.35s var(--p-ease), background-color 0.35s var(--p-ease);
}
.whtsap-btn:hover { transform: translateY(-3px); background-color: #1f8b4e !important; }

#chat-square {
  bottom: 92px !important;          /* sits directly above the WhatsApp bubble */
  right: 22px !important;
}

.mobile-btn {
  bottom: 24px !important;
  left: 22px !important;
  height: 54px !important;
  width: 54px !important;
  font-size: 25px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: var(--p-green) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.35s var(--p-ease);
}
.mobile-btn:hover { transform: translateY(-3px); }

/* Brand logos in full colour by default (the grayscale-until-hover treatment
   made them look washed out). */
.sec_3 .amenity-icon { filter: none !important; opacity: 1 !important; }
.sec_3 .amen_list.brand:hover .amenity-icon { filter: none !important; opacity: 1 !important; }

/* Correct stacking: header sticks, announcement bar sits under it in the flow
   and scrolls away with the page. (The theme had both position:fixed, which is
   why the bar followed you down the page.) */
.header-area {
  position: sticky !important;
  top: 0;
  z-index: 9999;
}
.navbar,
.header-area .navbar {
  position: static !important;
  width: 100% !important;
}
.urgency-bar { margin-top: 0 !important; }
@media (max-width: 767px) { .urgency-bar { margin-top: 0 !important; } }

/* ==========================================================================
   Mobile / tablet
   ========================================================================== */

@media (max-width: 991px) {
  /* Hero: the theme stacked a full-height image above the copy, with a 3rem
     white gap on top of it. Crop the image and close the gap. */
  .banner-section .carousel-item,
  .banner-section .carousel-item img,
  .banner-section .slider-img {
    height: auto !important;
    margin-top: 0 !important;
  }
  .banner-section .carousel-item img,
  .banner-section .slider-img {
    height: 340px !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }
  .banner-section .carousel-item::before { display: none !important; }
  .banner-main .carousel-caption {
    position: static !important;
    padding: 26px 18px 34px !important;
    background: var(--p-green);
    text-align: left;
  }
  .carousel-caption-content h1 { font-size: 32px !important; text-shadow: none !important; }
  .banner-message { font-size: 15px !important; text-shadow: none !important; }
  .roi-cards { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .roi-card { padding: 12px 8px !important; min-width: 0 !important; text-align: center; }
  .roi-card .value { font-size: 20px !important; }
  .roi-card .label { font-size: 10px !important; letter-spacing: 0 !important; }
  .hero-btn { width: 100%; justify-content: center; }
}

@media (max-width: 767px) {
  /* Announcement bar was wrapping to three lines */
  .urgency-bar { font-size: 11.5px !important; padding: 8px 12px !important; line-height: 1.45; }

  /* The theme's bottom action bar (Book Visit / Call Now / Whatsapp) already
     covers calling and WhatsApp on mobile, so keep the round floaters hidden
     as the theme intended — otherwise they stack on top of it. */
  .whtsap-btn, .mobile-btn { display: none !important; }

  /* Chat launcher clears the bottom action bar */
  #chat-square { bottom: 78px !important; right: 14px !important; }

  /* Pop-up fits a small screen */
  #autoEnquiryModal .modal-dialog { max-width: calc(100vw - 28px); margin: 14px auto; }
  .auto-enquiry__head { padding: 20px 20px 16px; }
  .auto-enquiry__form { padding: 18px 20px 22px; }

  .heading.text-center h3, .section-title h2, h2.section-title { font-size: 25px !important; }
  .single-feedback > p, .single-feedback > span,
  .floor-features, .btn.new-watsapp,
  .single-feedback > div[style] { margin-left: 18px !important; margin-right: 18px !important; }
}

/* never let anything cause a sideways scroll on a phone.
   NOTE: overflow-x on <body> turns body into its own scroll container and
   strands the bottom of the page — keep it on <html> only. */
/* No overflow rule on <html>/<body>: `hidden` turns the root into a scroll
   container (stranding the page bottom) and `clip` broke rendering here.
   Nothing currently overflows sideways — measured 0 at 390px. */

/* ==========================================================================
   Floating action layout (final)
   Left column : phone at the bottom, WhatsApp stacked above it
   Right corner: chatbot launcher only
   ========================================================================== */

.mobile-btn {
  left: 22px !important;
  right: auto !important;
  bottom: 24px !important;
}
.whtsap-btn {
  left: 22px !important;
  right: auto !important;
  bottom: 88px !important;          /* directly above the phone button */
}
#chat-square {
  right: 22px !important;
  left: auto !important;
  bottom: 24px !important;
}

@media (max-width: 767px) {
  /* keep all three visible on phones, clearing the bottom action bar */
  .whtsap-btn, .mobile-btn { display: flex !important; }
  .mobile-btn  { left: 14px !important; bottom: 72px !important; height: 48px !important; width: 48px !important; font-size: 22px !important; }
  .whtsap-btn  { left: 14px !important; bottom: 128px !important; height: 48px !important; width: 48px !important; font-size: 24px !important; }
  #chat-square { right: 14px !important; bottom: 72px !important; }
}

/* the floaters were being painted under the hero caption block on mobile */
.whtsap-btn, .mobile-btn { z-index: 9997 !important; }

/* ==========================================================================
   Floater colours — deliberately OFF the site palette (ivory / forest / gold)
   so they read as utilities, not as part of the page.
   ========================================================================== */

/* WhatsApp: its own brand green, brighter than the site's muted forest */
.whtsap-btn {
  background-color: #25D366 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 10px 26px -8px rgba(37, 211, 102, 0.55) !important;
}
.whtsap-btn:hover { background-color: #1ebe5a !important; }
.whtsap-btn i { color: #fff !important; }

/* Phone: call-blue */
.mobile-btn {
  background-color: #1668d6 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 10px 26px -8px rgba(22, 104, 214, 0.5) !important;
}
.mobile-btn:hover { background-color: #1157b4 !important; }
.mobile-btn i { color: #fff !important; }

/* Chat launcher: near-black, so it separates from both the page and WhatsApp */
#chat-square {
  background: #16181c !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.6) !important;
}
#chat-square:hover { background: #23272e !important; }
#chat-square .chatbot-tail-inner { border-color: rgba(255, 255, 255, 0.7) !important; }
#chat-square .chatbot-label { color: #fff !important; }

/* inline form feedback */
.form-msg {
  width: 100%;
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 6px;
}
.form-msg.is-ok  { background: rgba(37, 160, 92, 0.12); color: #1c7a46; border: 1px solid rgba(37, 160, 92, 0.3); }
.form-msg.is-err { background: rgba(200, 70, 45, 0.10); color: #b1442a; border: 1px solid rgba(200, 70, 45, 0.28); }

/* chatbot close button — make the cross unmistakable on the dark header */
#chat-close {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--p-ease);
}
#chat-close:hover { background: rgba(255, 255, 255, 0.34) !important; }
#chat-close .close-img {
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: none !important;
}

/* chat option buttons: long unit labels were being clipped on one line */
.chat-actions-container .hb-actions-buttons,
.chat-actions-container button,
.chat-actions-container a {
  white-space: normal !important;
  word-break: break-word;
  line-height: 1.35 !important;
  font-size: 12.5px !important;
  padding: 10px 14px !important;
  max-width: 100% !important;
  text-align: center;
}

/* ==========================================================================
   Header with the Omaxe Mall logo
   The new lockup is dark-on-light artwork, so the bar goes light — the
   earlier dark-green bar existed only because the old logo was white text.
   ========================================================================== */
.navbar,
.header-area .navbar,
.navbar.navbar-dark {
  background-color: rgba(253, 252, 250, 0.96) !important;
  border-bottom: 1px solid var(--p-line) !important;
  box-shadow: 0 8px 26px -20px rgba(23, 51, 46, 0.5) !important;
}
.header-area .navbar-nav > li > a,
.header-area .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link { color: var(--p-ink) !important; }
.header-area .navbar-nav > li > a:hover,
.header-area .nav-item.nav-link:hover { color: var(--p-gold) !important; }
.header-area .nav-item.nav-link::after { background: var(--p-gold); }
.menu-icon-bar { background: var(--p-ink) !important; }
.navbar-toggler { border-color: var(--p-line) !important; }

.navbar-brand .logo { max-height: 56px !important; width: auto !important; }
@media (max-width: 767px) { .navbar-brand .logo { max-height: 44px !important; } }

/* pop-up header is dark, so the logo needs a light plate there */
.auto-enquiry__logo {
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  max-height: 58px !important;
}

/* designed-by credit */
.designed-by {
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.6) !important;
}
.designed-by a {
  color: var(--p-gold-lit) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(207, 174, 114, 0.45);
  padding-bottom: 1px;
  transition: color 0.3s var(--p-ease), border-color 0.3s var(--p-ease);
}
.designed-by a:hover { color: #fff !important; border-bottom-color: #fff; }

/* ==========================================================================
   Header: tighter, professional bar height (was ~103px)
   ========================================================================== */
.header-area .navbar,
.navbar {
  padding: 0 !important;
  min-height: 0 !important;
}
.header-area .navbar > .container-fluid {
  min-height: 66px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center;
}
.navbar-brand {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
}
.navbar-brand .logo {
  max-height: 44px !important;
  height: 44px !important;
  width: auto !important;
  object-fit: contain;
  display: block;
}
.header-area .navbar-nav { align-items: center; }
.header-area .navbar-nav > li { display: flex; align-items: center; }
.header-area .nav-item.nav-link,
.header-area .navbar-nav > li > a {
  padding: 6px 13px !important;
  line-height: 1.2 !important;
}
.header-area .nav-item.nav-link::after { bottom: 0; }

/* the duplicate centre logo the theme keeps for mobile shouldn't add height */
.navbar-nav .center-logo { display: none !important; }

@media (max-width: 991px) {
  .header-area .navbar > .container-fluid { min-height: 58px; }
  .navbar-brand .logo { max-height: 38px !important; height: 38px !important; }
}

/* keep the brand off the window edge */
.header-area .navbar > .container-fluid {
  padding-left: clamp(16px, 3vw, 40px) !important;
  padding-right: clamp(16px, 3vw, 40px) !important;
}

/* ==========================================================================
   Mobile hero legibility
   The stat cards used a 7%-white fill + backdrop blur, which over the solid
   green caption block just read as haze. Solid fills, stronger contrast,
   no blur (it also costs a repaint on every scroll frame on phones).
   ========================================================================== */
@media (max-width: 991px) {
  .banner-main .carousel-caption {
    background: linear-gradient(180deg, #12292400, #122924 6%, var(--p-green) 100%), var(--p-green);
    padding: 30px 20px 38px !important;
  }

  .carousel-caption-content h1 {
    color: #fff !important;
    font-size: 34px !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    margin-bottom: 4px !important;
  }
  .carousel-caption-content h1 span {
    color: var(--p-gold-lit) !important;
    font-size: 12.5px !important;
    letter-spacing: 0.18em !important;
    margin-top: 14px !important;
    line-height: 1.5 !important;
  }

  .banner-message {
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    text-shadow: none !important;
  }

  .roi-cards { gap: 9px !important; margin: 26px 0 22px !important; }
  .roi-card {
    background: #1f453c !important;          /* solid, not translucent */
    border: 1px solid rgba(207, 174, 114, 0.34) !important;
    backdrop-filter: none !important;         /* nothing to blur behind it */
    -webkit-backdrop-filter: none !important;
    padding: 14px 8px !important;
    border-radius: 8px !important;
  }
  .roi-card .value {
    color: var(--p-gold-lit) !important;
    font-size: 21px !important;
    letter-spacing: 0 !important;
  }
  .roi-card .label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
  }

  /* the theme fades these in; on a phone it just looks half-rendered */
  .roi-cards, .carousel-caption-content, .banner-message, .hero-btns {
    animation: none !important;
    opacity: 1 !important;
  }

  .hero-btn { font-size: 12.5px !important; letter-spacing: 0.08em !important; }
}

/* ==========================================================================
   Mobile bottom action bar removed — the floating buttons cover the same
   actions (WhatsApp, call) and the "Enquire Now!" tab covers Book Visit.
   ========================================================================== */
.fix-footer { display: none !important; }

@media (max-width: 767px) {
  /* nothing to clear at the bottom any more, so drop the stack down */
  .mobile-btn  { bottom: 16px !important; left: 14px !important; }
  .whtsap-btn  { bottom: 76px !important; left: 14px !important; }
  #chat-square { bottom: 16px !important; right: 14px !important; }
}

/* ==========================================================================
   Floaters, final placement
   The bottom action bar is gone, so the stack sits low and tight:
   phone at the bottom-left with WhatsApp directly above it, chat bottom-right.
   ========================================================================== */
.mobile-btn  { bottom: 20px !important; left: 22px !important; height: 52px !important; width: 52px !important; }
.whtsap-btn  { bottom: 82px !important; left: 22px !important; height: 52px !important; width: 52px !important; }
#chat-square { bottom: 20px !important; right: 22px !important; }

@media (max-width: 767px) {
  .mobile-btn  { bottom: 16px !important; left: 14px !important; height: 48px !important; width: 48px !important; }
  .whtsap-btn  { bottom: 74px !important; left: 14px !important; height: 48px !important; width: 48px !important; }
  #chat-square { bottom: 16px !important; right: 14px !important; }
}

/* ==========================================================================
   Mobile floaters sit lower and tighter — they were reading as "floating"
   too high up the screen. Safe-area inset keeps them clear of the iPhone
   home indicator without pushing them up on phones that don't have one.
   ========================================================================== */
@media (max-width: 767px) {
  .mobile-btn {
    height: 46px !important; width: 46px !important; font-size: 21px !important;
    left: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .whtsap-btn {
    height: 46px !important; width: 46px !important; font-size: 23px !important;
    left: 12px !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #chat-square {
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 7px 13px 7px 7px !important;
  }
  #chat-square .chatbot-tail-inner { width: 26px; height: 26px; }
  #chat-square .chatbot-label { font-size: 11.5px; }
}

/* ==========================================================================
   Floaters: one low baseline instead of a vertical stack.
   Stacking put WhatsApp ~82px up the screen, which read as "floating".
   Phone + WhatsApp sit side by side bottom-left, chat bottom-right, all
   sharing the same bottom edge.
   ========================================================================== */
.mobile-btn {
  bottom: 12px !important;
  left: 20px !important;
  height: 50px !important; width: 50px !important;
}
.whtsap-btn {
  bottom: 12px !important;
  left: 80px !important;                 /* beside the phone button */
  right: auto !important;
  height: 50px !important; width: 50px !important;
}
#chat-square {
  bottom: 12px !important;
  right: 20px !important;
}

@media (max-width: 767px) {
  .mobile-btn {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    height: 46px !important; width: 46px !important;
  }
  .whtsap-btn {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    left: 66px !important;
    height: 46px !important; width: 46px !important;
  }
  #chat-square {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }
}

/* ==========================================================================
   FIX: the theme's inline mobile CSS sets
       @media (max-width:767px) .carousel-caption-content { background:#f4f1e8 }
   — a cream panel. Our hero text is white, so on a phone the headline, the
   stat cards and the location line were white-on-cream, i.e. invisible.
   ========================================================================== */
@media (max-width: 767px) {
  .carousel-caption-content {
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    top: auto !important;
  }
  /* the theme also forces the paragraph to near-black with a white shadow */
  .banner-message {
    color: rgba(255, 255, 255, 0.94) !important;
    text-shadow: none !important;
    font-weight: 400 !important;
    font-size: 15.5px !important;
  }
  .carousel-caption-content h1,
  .banner-section h1 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: none !important;
  }
  .carousel-caption-content h1 span { color: var(--p-gold-lit) !important; -webkit-text-fill-color: var(--p-gold-lit) !important; }
}

/* ==========================================================================
   Mobile hero, final: no green panel.
   The copy sits over the render itself (as it does on desktop) with a dark
   gradient scrim for legibility, instead of a separate coloured block below.
   ========================================================================== */
@media (max-width: 991px) {
  .banner-section .carousel-item {
    position: relative !important;
    min-height: 620px;
  }
  /* the render becomes the backdrop */
  .banner-section .carousel-item img,
  .banner-section .slider-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 62% center;
    margin: 0 !important;
  }
  /* scrim so white type always has something dark under it */
  .banner-section .carousel-item::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(180deg,
                rgba(10, 24, 20, 0.40) 0%,
                rgba(10, 24, 20, 0.64) 40%,
                rgba(10, 24, 20, 0.88) 100%) !important;
  }
  .banner-main .carousel-caption {
    position: relative !important;
    z-index: 3 !important;
    background: none !important;
    background-image: none !important;
    min-height: 620px;
    display: flex !important;
    align-items: center;
    padding: 26px 20px !important;
    text-align: left;
  }
  .carousel-caption-content { background: transparent !important; }

  .roi-card {
    background: rgba(12, 30, 25, 0.55) !important;
    border: 1px solid rgba(207, 174, 114, 0.45) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .carousel-caption-content h1,
  .banner-message,
  .roi-card .value,
  .roi-card .label {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55) !important;
  }
}

/* ==========================================================================
   Mobile hero, revised: let the render breathe.
   Copy drops to the lower-left, the scrim is clear at the top and only
   darkens where the text actually sits, so the building stays visible.
   ========================================================================== */
@media (max-width: 991px) {
  .banner-section .carousel-item { min-height: 680px; }
  .banner-section .carousel-item img,
  .banner-section .slider-img { object-position: 70% top !important; }

  /* clear at the top, darkening only under the copy */
  .banner-section .carousel-item::before {
    background: linear-gradient(180deg,
                rgba(10, 24, 20, 0.00) 0%,
                rgba(10, 24, 20, 0.10) 26%,
                rgba(10, 24, 20, 0.55) 46%,
                rgba(10, 24, 20, 0.86) 68%,
                rgba(10, 24, 20, 0.94) 100%) !important;
  }

  .banner-main .carousel-caption {
    min-height: 680px;
    align-items: flex-end !important;      /* sit at the bottom */
    padding: 0 18px 30px !important;
  }
  .carousel-caption-content,
  .banner-main .carousel-caption > div { width: 100%; }

  /* keep the column narrow so the render shows past it on the right */
  .carousel-caption-content h1 { max-width: 88%; font-size: 31px !important; }
  .banner-message { max-width: 92%; font-size: 14.5px !important; line-height: 1.55 !important; }

  .roi-cards { margin: 18px 0 16px !important; }
  .roi-card { padding: 11px 6px !important; }
  .roi-card .value { font-size: 19px !important; }
  .roi-card .label { font-size: 10px !important; }

  .hero-btns { margin-top: 18px !important; gap: 10px !important; }
  .hero-btn { padding: 12px 20px !important; }
}

/* hero: push the copy properly to the bottom, trim the dead space, and frame
   the render on the retail frontage rather than the sky */
@media (max-width: 991px) {
  .banner-section .carousel-item,
  .banner-main .carousel-caption { min-height: 620px; }

  .banner-section .carousel-item img,
  .banner-section .slider-img { object-position: 58% 42% !important; }

  /* the caption's inner bootstrap column was stretching to full height */
  .banner-main .carousel-caption > [class*="col-"] {
    margin-top: auto !important;
    align-self: flex-end !important;
    width: 100%;
  }
  .banner-main .carousel-caption { padding-bottom: 26px !important; }

  .banner-section .carousel-item::before {
    background: linear-gradient(180deg,
                rgba(10, 24, 20, 0.00) 0%,
                rgba(10, 24, 20, 0.06) 30%,
                rgba(10, 24, 20, 0.48) 50%,
                rgba(10, 24, 20, 0.84) 72%,
                rgba(10, 24, 20, 0.94) 100%) !important;
  }
}

/* ==========================================================================
   Mobile: hero paragraph + CTAs live in their own block under the render.
   Keeps the hero image clean and gives the buttons a proper tap target area.
   ========================================================================== */
.hero-below { display: none; }

@media (max-width: 991px) {
  .hero-below {
    display: block;
    background: var(--p-paper);
    border-bottom: 1px solid var(--p-line);
    padding: 24px 18px 28px !important;
  }
  .hero-below__inner { max-width: 640px; margin-inline: auto; }

  .hero-below .banner-message {
    color: var(--p-ink) !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    text-shadow: none !important;
    max-width: none !important;
    margin: 0 0 20px !important;
  }
  .hero-below .hero-btns {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
    margin: 0 !important;
  }
  .hero-below .hero-btn {
    width: 100%;
    justify-content: center;
    padding: 15px 20px !important;
    font-size: 13px !important;
  }
  .hero-below .hero-btn.primary-btn { background: var(--p-gold) !important; color: #fff !important; }
  .hero-below .hero-btn.whatsapp-btn {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }

  /* hero itself gets shorter now that it only carries the headline + stats */
  .banner-section .carousel-item,
  .banner-main .carousel-caption { min-height: 500px !important; }
  .banner-section .carousel-item::before {
    background: linear-gradient(180deg,
                rgba(10, 24, 20, 0.00) 0%,
                rgba(10, 24, 20, 0.08) 32%,
                rgba(10, 24, 20, 0.52) 56%,
                rgba(10, 24, 20, 0.88) 100%) !important;
  }
}

/* ==========================================================================
   Mobile hero block sits top-right.
   Scrim flips accordingly — dark where the type is (top), clearing downwards
   so the lower half of the render stays visible.
   ========================================================================== */
@media (max-width: 991px) {
  .banner-main .carousel-caption {
    align-items: flex-start !important;
    padding: 22px 16px 24px !important;
  }
  .banner-main .carousel-caption > [class*="col-"] {
    margin-top: 0 !important;
    margin-bottom: auto !important;
    align-self: flex-start !important;
    margin-left: auto !important;          /* push the block right */
    text-align: right;
  }

  .carousel-caption-content { text-align: right; }
  .carousel-caption-content h1 {
    max-width: 100% !important;
    margin-left: auto !important;
    text-align: right;
    font-size: 29px !important;
  }
  .carousel-caption-content h1 span { text-align: right; }

  .roi-cards { margin: 16px 0 0 auto !important; }
  .roi-card { text-align: center; }

  /* dark at the top where the copy is, clearing towards the bottom */
  .banner-section .carousel-item::before {
    background: linear-gradient(180deg,
                rgba(10, 24, 20, 0.86) 0%,
                rgba(10, 24, 20, 0.72) 26%,
                rgba(10, 24, 20, 0.34) 52%,
                rgba(10, 24, 20, 0.10) 78%,
                rgba(10, 24, 20, 0.00) 100%) !important;
  }
  /* frame the render so its lower half — the retail frontage — is what shows */
  .banner-section .carousel-item img,
  .banner-section .slider-img { object-position: 58% 58% !important; }
}

/* headline + location back to the left, stat cards stay across the width */
@media (max-width: 991px) {
  .banner-main .carousel-caption > [class*="col-"] {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: left;
  }
  .carousel-caption-content { text-align: left !important; }
  .carousel-caption-content h1 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  .carousel-caption-content h1 span { text-align: left !important; }
  .roi-cards { margin: 16px 0 0 !important; }
}

/* stat cards now live in the block under the hero on mobile — restyle them
   for a light background instead of the dark render */
@media (max-width: 991px) {
  .hero-below .roi-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px !important;
    margin: 0 0 20px !important;
  }
  .hero-below .roi-card {
    background: var(--p-paper-2) !important;
    border: 1px solid var(--p-line) !important;
    box-shadow: none !important;
    padding: 14px 8px !important;
    text-align: center;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .hero-below .roi-card .value {
    color: var(--p-gold) !important;
    font-size: 20px !important;
    text-shadow: none !important;
  }
  .hero-below .roi-card .label {
    color: var(--p-body) !important;
    font-size: 10.5px !important;
    text-shadow: none !important;
  }

  /* hero keeps only the headline + location, so it can be shorter again */
  .banner-section .carousel-item,
  .banner-main .carousel-caption { min-height: 440px !important; }
  .banner-section .carousel-item::before {
    background: linear-gradient(180deg,
                rgba(10, 24, 20, 0.82) 0%,
                rgba(10, 24, 20, 0.60) 30%,
                rgba(10, 24, 20, 0.24) 60%,
                rgba(10, 24, 20, 0.00) 100%) !important;
  }
}

/* ==========================================================================
   Mobile hero: let the render show through behind the brand name.
   The heavy top scrim is replaced with a light veil plus a soft shadow on the
   type itself — the words stay legible, the building stays visible.
   ========================================================================== */
@media (max-width: 991px) {
  .banner-section .carousel-item::before {
    background: linear-gradient(180deg,
                rgba(10, 24, 20, 0.42) 0%,
                rgba(10, 24, 20, 0.26) 24%,
                rgba(10, 24, 20, 0.08) 46%,
                rgba(10, 24, 20, 0.00) 68%) !important;
  }

  .carousel-caption-content h1 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75),
                 0 1px 34px rgba(0, 0, 0, 0.55) !important;
  }
  .carousel-caption-content h1 span {
    color: #f0d9a8 !important;
    -webkit-text-fill-color: #f0d9a8 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8),
                 0 1px 24px rgba(0, 0, 0, 0.6) !important;
  }
}

/* ==========================================================================
   Offer bar pinned under the header
   ========================================================================== */
.urgency-bar {
  position: sticky !important;
  top: 67px !important;            /* sits directly under the sticky header */
  z-index: 9998 !important;
  background: var(--p-green) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em;
  padding: 11px 16px !important;
  text-align: center;
  border-bottom: 1px solid rgba(207, 174, 114, 0.3);
  box-shadow: 0 8px 22px -18px rgba(0, 0, 0, 0.8);
}
.urgency-bar span { color: var(--p-gold-lit) !important; font-weight: 700 !important; }

@media (max-width: 991px) {
  .urgency-bar { top: 58px !important; font-size: 12.5px !important; padding: 9px 12px !important; line-height: 1.45; }
}
@media (max-width: 767px) {
  .urgency-bar { top: 58px !important; font-size: 11.5px !important; }
}

/* ==========================================================================
   Desktop hero: the caption was pinned near the bottom (top ~207px with a
   20px bottom anchor), leaving the copy low and the sky empty. Lift it.
   ========================================================================== */
@media (min-width: 992px) {
  .banner-main .carousel-caption {
    top: 11% !important;
    bottom: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ==========================================================================
   Consent line on the lead forms
   ========================================================================== */
.lead-consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.5;
  color: #7d8783;
  margin: 4px 0 14px;
  text-align: left;
  font-weight: 400;
  cursor: pointer;
}
.lead-consent input[type="checkbox"] {
  margin: 2px 0 0 !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px;
  flex: none;
  accent-color: var(--p-gold);
  padding: 0 !important;
}
.lead-consent span { flex: 1; }
.lead-consent a { color: var(--p-gold) !important; text-decoration: underline; }

/* the sticky side panel is narrow — keep the text from crowding it */
.enquiry-form .lead-consent { font-size: 10.5px; margin-bottom: 12px; }


/* logo on the enquiry forms */
.form-logo {
  display: block;
  max-width: 190px;
  height: auto;
  margin: 0 auto 16px;
}
.enquiry-form .form-logo { max-width: 165px; margin-bottom: 14px; }
@media (max-width: 767px) { .form-logo { max-width: 160px; margin-bottom: 12px; } }

/* ==========================================================================
   Hero offer bar — translucent plate under the headline
   ========================================================================== */
.hero-offer {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 4px;
  padding: 13px 22px 13px 16px;
  border-radius: 6px;
  background: rgba(18, 30, 26, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 34px -20px rgba(0, 0, 0, 0.85);
  max-width: 100%;
}
.hero-offer__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--p-gold-lit);
}
.hero-offer__icon svg { width: 22px; height: 22px; }
.hero-offer__text {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

@media (max-width: 991px) {
  .hero-offer {
    margin: 16px 0 0;
    padding: 11px 16px 11px 12px;
    gap: 9px;
  }
  .hero-offer__icon { width: 20px; height: 20px; }
  .hero-offer__icon svg { width: 18px; height: 18px; }
  .hero-offer__text { font-size: 13.5px; }
}
@media (max-width: 480px) {
  .hero-offer__text { font-size: 12.5px; }
}

/* ==========================================================================
   Hero image legibility vs visibility
   The desktop scrim ran to 92% on the left, which washed the render out and
   read as "blurry". Much lighter now; the type carries its own shadow.
   ========================================================================== */
@media (min-width: 992px) {
  .banner-section .carousel-item::before {
    background: linear-gradient(100deg,
                rgba(12, 28, 24, 0.62) 0%,
                rgba(12, 28, 24, 0.40) 34%,
                rgba(12, 28, 24, 0.14) 62%,
                rgba(12, 28, 24, 0.04) 100%) !important;
  }
  .carousel-caption-content h1 {
    text-shadow: 0 2px 12px rgba(0,0,0,.8), 0 1px 40px rgba(0,0,0,.6) !important;
  }
  .carousel-caption-content h1 span {
    color: #f0d9a8 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 1px 30px rgba(0,0,0,.65) !important;
  }
  .banner-message, .roi-card .value, .roi-card .label {
    text-shadow: 0 1px 10px rgba(0,0,0,.7) !important;
  }
  .roi-card { background: rgba(12, 30, 25, 0.42) !important; }
}

/* the offer line now sits in the subtitle slot on mobile too */
@media (max-width: 991px) {
  .carousel-caption-content h1 span {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.5 !important;
  }
}

/* keep the render crisp when the browser scales it */
.banner-section .slider-img { image-rendering: auto; }

/* ==========================================================================
   Hero offer block — one line: "Invest ₹32 Lakhs → Earn ₹48,000/month"

   NOTE ON SPECIFICITY: the theme styles *every* span inside the hero h1
   (`.carousel-caption-content h1 span`) with !important — uppercase, 13px,
   gold, display:block. Every rule below is scoped through
   `.carousel-caption-content h1` and re-declares what it needs to undo.
   ========================================================================== */

.carousel-caption-content h1 .hero-offer,
.carousel-caption-content h1 .hero-offer span,
.carousel-caption-content h1 .hero-offer b {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-align: left !important;
  text-shadow: none !important;
  margin: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
}

/* the strip itself — always a single, non-wrapping line */
.carousel-caption-content h1 .hero-offer {
  display: inline-flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55em;
  max-width: 100%;
  margin-top: 18px !important;
  padding: 0.6em 0.95em;
  /* scales with the viewport so the line never has to wrap */
  font-size: clamp(13px, 2.1vw, 24px) !important;
  white-space: nowrap;
  border: 1px solid rgba(207, 174, 114, 0.45);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(10, 24, 20, 0.82), rgba(10, 24, 20, 0.6));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.95);
  animation: fadeUp 0.6s 0.15s ease both;
}

.carousel-caption-content h1 .hero-offer .hero-offer__part {
  display: inline !important;
  font-size: 1em !important;
  color: rgba(255, 255, 255, 0.82) !important;
  white-space: nowrap;
}

/* the two numbers carry the weight */
.carousel-caption-content h1 .hero-offer .hero-offer__part b {
  font-size: 1.12em !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.carousel-caption-content h1 .hero-offer .hero-offer__part--win,
.carousel-caption-content h1 .hero-offer .hero-offer__part--win b {
  color: var(--p-gold-lit) !important;
}

.carousel-caption-content h1 .hero-offer .hero-offer__arrow {
  display: inline-block !important;
  flex: none;
  position: relative;
  width: 1.6em;
  height: 1px;
  background: rgba(207, 174, 114, 0.6);
}
.carousel-caption-content h1 .hero-offer .hero-offer__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.38em;
  height: 0.38em;
  border-top: 1px solid rgba(207, 174, 114, 0.9);
  border-right: 1px solid rgba(207, 174, 114, 0.9);
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 991px) {
  .carousel-caption-content h1 .hero-offer {
    /* sized so the whole line still fits a 320px phone without wrapping */
    font-size: clamp(10.5px, 3.3vw, 19px) !important;
    margin-top: 14px !important;
    gap: 0.45em;
    padding: 0.6em 0.8em;
    background: linear-gradient(135deg, rgba(10, 24, 20, 0.9), rgba(10, 24, 20, 0.78));
    border-color: rgba(207, 174, 114, 0.6);
  }
  .carousel-caption-content h1 .hero-offer .hero-offer__arrow { width: 1.3em; }
}

/* ------------------------------------------- keep the hero photo on show -- */
/* The mobile hero uses the render as a full-bleed backdrop (see "Mobile hero,
   final" above). That scrim was dark enough to bury the building, and the copy
   no longer needs it — the offer block carries its own contrast. */
@media (max-width: 991px) {
  /* Scrim only where type actually sits — a band at the top for the headline
     and offer strip. The middle and lower render stay clear. */
  .banner-section .carousel-item::before {
    background: linear-gradient(180deg,
                rgba(10, 24, 20, 0.62) 0%,
                rgba(10, 24, 20, 0.42) 26%,
                rgba(10, 24, 20, 0.10) 52%,
                rgba(10, 24, 20, 0.28) 100%) !important;
  }
  /* headline sits on the render, so give it a shadow instead of a panel */
  .carousel-caption-content h1 {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75),
                 0 1px 4px rgba(0, 0, 0, 0.6) !important;
  }
  /* Portrait crop: frame the glass tower (right of centre in the render)
     instead of the dark ground-level canopy. */
  .banner-section .carousel-item img,
  .banner-section .slider-img {
    object-position: 74% 38% !important;
  }
}

/* -------------------------------------------------- announcement bar -- */

@media (max-width: 767px) {
  /* two tidy lines instead of three ragged ones */
  .urgency-bar {
    font-size: 12px !important;
    letter-spacing: 0.01em !important;
    padding: 8px 10px !important;
  }
  .urgency-bar span { white-space: nowrap; }
}

/* ==========================================================================
   Hero creative (img/omaxe-hero.jpeg)
   The artwork already carries the headline and the ₹32L → ₹48,000 offer, so
   nothing is overlaid on it any more: the dark legibility scrims are off, the
   full frame is shown uncropped, and the stat cards / paragraph / CTAs sit in
   their own band underneath on every viewport.
   ========================================================================== */

/* off-screen H1 kept for SEO now that the headline lives in the image */
.visually-hidden-h1 {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* scrims off — they were only there to make overlay text readable */
.banner-section::before,
.banner-section .carousel-item::before,
.banner-section .banner-main .carousel-item::before,
.banner-section .banner-main .carousel-item::after { display: none !important; }

/* show the whole creative; letterbox blends into the artwork's black ground */
.banner-section .banner-main .carousel-item,
.banner-section .carousel-item {
  height: auto !important;      /* style.css pinned this to 100vh */
  min-height: 0 !important;
  background: #050505;
  font-size: 0;                 /* kills the inline-image baseline gap */
}
.banner-section .slider-img {
  min-height: 0 !important;
  height: clamp(420px, 76vh, 780px) !important;
  width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin-top: 0 !important;
}

/* the caption is emptied by the relocation script, which then tags it — until
   that happens it stays put, so a JS failure never loses the CTAs */
.banner-main .carousel-caption.is-emptied { display: none !important; }

/* content band under the hero — desktop */
.hero-below {
  display: block;
  background: var(--p-paper);
  border-bottom: 1px solid var(--p-line);
  padding: 34px 24px 38px !important;
}
.hero-below__inner {
  max-width: 1140px;
  margin-inline: auto;
}
.hero-below .roi-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 22px !important;
}
.hero-below .roi-card {
  background: #fff !important;
  border: 1px solid var(--p-line) !important;
  box-shadow: 0 10px 30px -24px rgba(23, 51, 46, 0.5) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 18px 14px !important;
}
.hero-below .roi-card .value { color: var(--p-gold) !important; }
.hero-below .roi-card .label { color: var(--p-ink) !important; opacity: 0.72; }
.hero-below .banner-message {
  color: var(--p-ink) !important;
  text-shadow: none !important;
  font-size: 16.5px !important;
  line-height: 1.75 !important;
  font-weight: 500 !important;
  margin: 0 0 22px !important;
}
.hero-below .hero-btns {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin: 0 !important;
}
.hero-below .hero-btn { padding: 14px 26px !important; }
.hero-below .hero-btn.primary-btn { background: var(--p-gold) !important; color: #fff !important; }
.hero-below .hero-btn.whatsapp-btn {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #fff !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

@media (max-width: 991px) {
  /* The old mobile treatment pinned the render as an absolute backdrop behind
     overlay copy. Nothing overlays it now, so it goes back into the flow and
     shows at its natural aspect ratio — the whole creative stays readable. */
  .banner-section .slider-img,
  .banner-section .carousel-item img {
    position: static !important;
    inset: auto !important;
    height: auto !important;
    width: 100% !important;
    object-fit: initial !important;
    object-position: center !important;
    margin: 0 !important;
  }
  .hero-below { padding: 24px 18px 28px !important; }
  .hero-below__inner { max-width: 640px; }
}

@media (max-width: 575px) {
  .hero-below .roi-cards { grid-template-columns: repeat(3, 1fr); gap: 8px !important; }
  .hero-below .hero-btns { display: grid !important; grid-template-columns: 1fr; }
  .hero-below .hero-btn { width: 100%; justify-content: center; }
}