*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-background);
  color: var(--color-foreground);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 1rem;
}

.elementor-icon-wrapper {
  line-height: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--lwc-header-height, 96px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body.lwc-has-fixed-header {
  padding-top: var(--lwc-header-height, 96px);
}

/* ---------------------------------------------------------------------
   Lovable-compiler button fix: the compiler places each button/link's
   real Tailwind classes (color, background, radius, padding, height,
   hover state) on the OUTER .elementor-widget-button wrapper div, but
   Elementor always renders the visible box as an INNER
   <a class="elementor-button"> that carries its own explicit,
   higher-specificity color/background/padding/line-height from
   Elementor's per-widget generated CSS (post-*.css). That inner anchor
   was winning the cascade everywhere (stock 3px-radius/grey chrome,
   hardcoded dark nav text, inflated Elementor default padding squeezing
   the header). Make the anchor a transparent, fully-inheriting
   pass-through so the wrapper's own classes become what's visible.
   --------------------------------------------------------------------- */
.elementor-widget-button .elementor-button {
  background-color: transparent !important;
  color: inherit !important;
  fill: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  padding: 0 !important;
  line-height: normal !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  display: flex !important;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: inherit;
}

.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus {
  background-color: transparent !important;
  color: inherit !important;
}

.elementor-widget-button .elementor-button-content-wrapper,
.elementor-widget-button .elementor-button-icon,
.elementor-widget-button .elementor-button-text {
  color: inherit;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: inherit;
}

/* Header desktop CTA ("Call Now") lost its h-9/py-2/shadow sizing classes
   in compilation, collapsing to a 20px-tall pill. Restore real dimensions. */
.elementor-element-lwc00000c {
  height: 36px;
  box-shadow: 0 1px 3px rgba(20, 29, 22, 0.1), 0 1px 2px rgba(20, 29, 22, 0.06);
}

/* Header mobile-menu CTA lost ALL its Tailwind classes (bg-primary,
   text-primary-foreground, hover state, height, padding) in compilation
   and rendered with no visible button chrome at all. Restore explicitly
   with plain rgb (not var()/oklch — oklch background-color has shown up
   computed-correct-but-not-painted on this project before). */
.elementor-element-lwc00000m {
  background-color: rgb(28, 58, 39);
  color: rgb(251, 248, 241);
  height: 40px;
  padding: 0 20px;
  transition: background-color 0.15s ease;
}
.elementor-element-lwc00000m:hover {
  background-color: rgb(14, 49, 29);
}

/* Header text never swapped color when the header goes solid on scroll: the
   existing scroll listener toggles background/blur classes on the header's
   outer fixed row (adding bg-ivory/92) but the logo/nav text classes stay
   hardcoded text-white, leaving unreadable white-on-cream text once scrolled.
   Swap to dark foreground tones keyed off that same scrolled-state class. */
.elementor-element-lwc00000p.bg-ivory\/92 .text-white {
  color: rgb(20, 29, 22) !important; /* foreground */
}
.elementor-element-lwc00000p.bg-ivory\/92 .text-white\/75 {
  color: rgb(95, 101, 93) !important; /* muted-foreground, logo subtitle */
}
.elementor-element-lwc00000p.bg-ivory\/92 .text-white\/85 {
  color: rgba(20, 29, 22, 0.8) !important; /* nav links */
}
.elementor-element-lwc00000p.bg-ivory\/92 .text-white\/85:hover,
.elementor-element-lwc00000p.bg-ivory\/92 .hover\:text-white:hover {
  color: rgb(28, 58, 39) !important; /* primary, nav link hover */
}

/* .container-page sections collapse to their content's natural width instead
   of filling to the 1280px max-width, because Elementor's container widget is
   always display:flex — a flex-grow:0 item with no explicit width shrink-wraps
   to content instead of stretching (unlike the reference's plain block-level
   div, where width:auto naturally fills the parent). Only sections whose
   content happens to be wide enough reached the right width by coincidence;
   force it explicitly so every section matches. */
.container-page {
  width: 100% !important;
}

/* Same root cause as the desktop nav-row fix above (Elementor's default
   .e-con width:100% not being overridden with a sane per-widget value at
   this breakpoint) but on the mobile header's logo container: it stretches
   to ~90% of the row, crushing the hamburger toggle up against the logo
   instead of pushing it to the far right via justify-content:space-between. */
.elementor-element-lwc000004 {
  width: auto !important;
  flex-grow: 0 !important;
}

/* Nav row was stretching to fill nearly the entire header row (Elementor's
   default .e-con width:100% applies even though this container never got an
   explicit narrower --width from the compiler), crowding its content flush
   against the logo while leaving a huge dead gap before the CTA button.
   Reference's plain <nav> just hugs its own content width — restore that. */
.elementor-element-lwc00000b {
  width: auto !important;
}

/* Same root cause as the button fix above, but for Heading widgets: Elementor's
   per-widget generated CSS hardcodes color:var(--e-global-color-foreground) on
   .elementor-heading-title regardless of the wrapper's actual intended Tailwind
   color class (e.g. the North Bangalore highlight-card titles are meant to be
   text-white over a dark photo overlay, but rendered dark-on-dark). Inherit from
   the wrapper instead. */
.elementor-widget-heading .elementor-heading-title {
  color: inherit !important;
}

/* Same width-collapse-or-stretch root cause as the other fixes above: the
   hero's "Download Brochure" button wrapper stretches to fill the entire
   flex-wrap row instead of hugging its own content, forcing it onto its own
   line below "Book Site Visit" on mobile instead of sitting beside it
   (reference: 207px content-hugging pill, side-by-side with the other CTA). */
.elementor-element-lwc00001e {
  width: auto !important;
}

/* Same root cause as the button/heading fixes above: Elementor's Image widget
   puts the intended Tailwind classes (absolute inset-0 h-full w-full
   object-cover) on the WRAPPER div, but renders a bare <img> with no classes
   at all. Most tiles "accidentally" looked right only because their image's
   aspect ratio happened to overflow the tile and get clipped by the
   ancestor's overflow-hidden — any image narrower than that left visible
   letterboxing. Make the actual <img> fill and cover its wrapper directly. */
.elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Same recurring root cause as the header nav-row/logo fixes: the hero's
   "NIKOO · BHARTIYA CITY" location badge is an absolutely-positioned flex
   item with no intended width of its own, so it defaults to Elementor's
   .e-con width:100% — stretching it to the full mobile viewport width
   (390px) instead of hugging its short text content, causing horizontal
   page overflow. */
.elementor-element-lwc00002p {
  width: auto !important;
}

/* Amenities images converted from small circular icon-badges to full-width
   rectangular photo boxes; the theme's compiled Tailwind CSS has no aspect-
   ratio utilities at all (aspect-[4/3] class has nothing to match), so set
   it natively here instead. */
.elementor-element-lwc000082,
.elementor-element-lwc000086,
.elementor-element-lwc00008a,
.elementor-element-lwc00008e,
.elementor-element-lwc00008i,
.elementor-element-lwc00008m,
.elementor-element-lwc00008q,
.elementor-element-lwc00008u {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
}