/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* Type: a serif-display over geometric-sans pairing, following the reference
   landing page (embassyonethane.com), which sets its headings in FreightNeo
   Pro Book over Outfit body copy. FreightNeo is a licensed Freight family and
   cannot be served from here, so Fraunces stands in for it: the same warm,
   slightly condensed serif with a low-contrast wedge, and an optical-size axis
   that keeps the large section titles from looking spindly. Outfit matches the
   reference exactly. Both are SIL Open Font License, so they can be
   self-hosted later if the CDN is undesirable.
   (Replaced Cormorant Garamond + Mulish + the local Radikal .otf, then
   Outfit + Jost.) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300..700&display=swap');

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


:root {
  --white: #FFFFFF;
  --black: #000000;

  /* Palette sampled from the official Nirala Trio page
     (niralaworld.com/projects/nirala-trio).
     bone = page background (--body background there), charcoal = dark panels,
     blush = the warm callout cards. */
  --bone: #EFE8DD;
  --blush: #F5EDE3;
  --taupe: #8A7B6B;
  --surface-dark: #2D241E;
  --heading: #33281F;

  /* Accent: drives buttons, badges, counters, active states.
     Deep navy sampled from the brand reference; --primary-bright is a lighter
     tone of the same hue for hovers and highlights. White on --primary clears
     WCAG AA comfortably (~8:1). */
  --primary: #1A5480;
  --primary-bright: #2A6FA3;

  /* --font-heading: section titles and display type.
     --font-body: everything else. */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Highlight that sweeps across headings as they reveal. */
  --color: #1A5480;
  --color-3: transparent;
  --radius-full: 100px;
}

html {
  scroll-behavior: smooth !important;
  overflow-x: hidden;
}

/* AOS parks a fade-left element 100px to the RIGHT of its resting place, and
   this page inits with once:false, so those elements re-park every time they
   scroll out of view — leaving the document permanently ~88px wider than the
   viewport. html/body overflow-x:hidden masks that on desktop, but iOS Safari
   still lets the page drag sideways and shows a blank strip past the footer.
   Below the desktop breakpoint the offset is vertical instead: same fade, no
   horizontal overflow. The selector mirrors aos.css's own
   `html:not(.no-js) [data-aos=fade-left]` plus a repeated attribute, so it wins
   on specificity (aos.css loads after this file) while still losing to its
   `.aos-animate` reset. */
@media (max-width: 991.98px) {
  html:not(.no-js) [data-aos="fade-left"][data-aos] {
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
  }
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  overflow-x: hidden !important;
  -webkit-transition: all 0.45s ease;
  -o-transition: all 0.45s ease;
  transition: all 0.45s ease;
  padding-right: 0px !important;
  background: var(--white);
  font-family: var(--font-body);
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #ffffff00;
}

body::-webkit-scrollbar {
  width: 9px;
  background-color: #ffffff00;
}

body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  background-color: #cfcfcf;
}

body.loading {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

body.loaded {
  -webkit-animation: fadeIn 3s ease-out forwards;
  animation: fadeIn 3s ease-out forwards;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* form loader css */

.form-loader {
  display: none;
}

.form-loader-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  background-color: var(--light);
  border: 2px solid var(--white);
  margin: auto;
  padding: 0.45rem 0.75rem 0.3rem 0.75rem;
  border-radius: 4px;
}

.form-loader-wrapper .loader-txt {
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
}

.f-loader {
  width: 25px;
  height: 25px;
  border: 3px solid var(--white);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation: rotation 0.75s linear infinite;
  animation: rotation 0.75s linear infinite;
}

/* Full-page curtain shown between a valid submit and the thank-you.php
   navigation. It fades in over everything — including an open Bootstrap modal
   (z-index 1055) — so the form is physically unclickable while the POST is in
   flight, which is what stops a second submit.
   visibility (not display) is toggled so the opacity transition can run. */
.submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.1rem;
  background: var(--bone);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  -o-transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.submit-overlay.is-active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.4s ease, visibility 0s linear 0s;
  -o-transition: opacity 0.4s ease, visibility 0s linear 0s;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.submit-overlay .submit-overlay-logo {
  width: 120px;
  height: auto;
  margin-bottom: 0.25rem;
}

/* Same spinner geometry as .f-loader, tinted for the light curtain. */
.submit-overlay .submit-overlay-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--primary);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation: rotation 0.75s linear infinite;
  animation: rotation 0.75s linear infinite;
}

.submit-overlay .submit-overlay-txt {
  color: var(--heading);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .submit-overlay {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }

  .submit-overlay .submit-overlay-spinner {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
}

/* The submit button stays visually "busy" behind the curtain, and is disabled
   in JS so a keyboard Enter can't re-fire it either. */
.btn-submit2[disabled],
.btn-submit[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* form loader css */

.compensate-for-scrollbar {
  margin-right: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0rem !important;
}

ul {
  padding-left: 0rem !important;
  margin-bottom: 0rem !important;
}

li {
  list-style: none;
  text-decoration: none;
}

a {
  text-decoration: none !important;
}

p {
  margin-bottom: 0rem !important;
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


#kenytChatBubble.style1 {
  bottom: 8% !important;
}

.line {
  width: 6vw;
  height: 2px;
  border-radius: 100px;
  background-color: var(--primary);
  position: relative;
  bottom: 15px;
}

.line.about-line {
  bottom: unset;
}

.line.light {
  background-color: var(--light);
}

/* width:100% not 100vw: 100vw counts the scrollbar gutter, so on desktop the
   header ran ~15px wider than the content and forced a horizontal scroll. */
header {
  position: fixed;
  z-index: 10;
  top: 0vw;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  width: 100%;
  left: 0;
  background: var(--white);
  z-index: 999;
}

header.dropped {
  top: 0;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  width: 100%;
  /* background-color: var(--light); */
}

/* Fluid padding rather than a breakpoint ladder: the gutter has to give way
   before the nav links do, or the row overflows between 1200px and 1400px. */
nav {
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  padding: 0.85rem 4rem;
  padding: clamp(0.6rem, 1.1vw, 0.85rem) clamp(1rem, 3.2vw, 4rem);
}

nav.dropped {
  background-color: var(--bone);
  box-shadow: 0 2px 12px rgba(58, 54, 51, 0.08);
}

.navbar-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-evenly;
  -webkit-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
  -webkit-box-align: center;
  -ms-flex-align: center;
  gap: clamp(0.5rem, 1vw, 1rem);
  align-items: center;
  width: 100%;
  min-width: 0;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.navbar-container .navlogo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5rem;
}

.navbar-container .menu {
  display: none;
}

/* Sized by height, not width: the developer mark is square and the Nirala Trio
   mark is wide, so a fixed width would blow the square one out of the header. */
.navbar-container .navlogo .logo {
  -webkit-transition: all 0.45s ease;
  -o-transition: all 0.45s ease;
  transition: all 0.45s ease;
  height: 52px;
  height: clamp(30px, 3.6vw, 52px);
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

nav.dropped .navbar-container .navlogo .logo {
  height: 44px;
  width: auto;
  -webkit-transition: all 0.45s ease;
  -o-transition: all 0.45s ease;
  transition: all 0.45s ease;
  -o-object-fit: contain;
  object-fit: contain;
}

.logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.logo-img.logo-img-1 {
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  width: 80px;
  max-width: 100%;
  position: relative;
}

.logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.logo-img.logo-img-1::after {
  content: "";
  position: absolute;
  width: 1px;
  top: 0;
  right: -41px;
  height: 100%;
  background-color: var(--white);
}

.logo-img.logo-img-2 {
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  width: 55px;
  max-width: 100%;
}

.logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.mob-logo {
  height: 44px;
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.navbar-container .navbar-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3rem;
  gap: clamp(0.85rem, 2.1vw, 3rem);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 0;
}

/* .navbar-link {
  position: relative;
  display: inline-block;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  bottom: -5px;
  transform: scaleX(0);
  transform-origin: center;
  background-color: var(--primary);
  transition: transform 0.5s ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
} */

.navbar-container .navbar-links .navbar-link .nav-link {
  color: #000;
  font-size: 1rem;
  font-size: clamp(0.75rem, 0.92vw, 1rem);
  line-height: normal;
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 400;
  text-wrap: nowrap;
  text-transform: capitalize;
}

/* Bootstrap's default is a flat 400px, which is wider than a 360px phone.
   Cap it against the viewport so the drawer never runs off-screen. */
.offcanvas.offcanvas-start {
  background: var(--white);
  width: min(400px, 85vw);
}

/* height:100% was 100% of the whole drawer, so the body extended past the
   bottom edge by the height of the header and clipped the last link. Letting
   it flex into the leftover space keeps the scroll inside the drawer. */
.offcanvas-body {
  padding: 2rem 1.5rem;
  background-color: var(--white);
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.offcanvas-navs {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  gap: clamp(1rem, 3.5vh, 2rem);
  margin-top: clamp(1rem, 3vh, 2rem);
}

/* Not 300 like the section titles: these are tap targets, and hairline strokes
   at menu size hurt legibility. 400 keeps them light without going frail. */
.offcanvas-link {
  display: block;
  font-size: 1.6rem;
  font-size: clamp(1.15rem, 4.5vw, 1.6rem);
  font-weight: 400;
  color: var(--primary);
  font-family: var(--font-heading);
  text-transform: capitalize;
  padding-bottom: 0.5rem;
  position: relative;
  transition: all 0.3s ease;
}

.offcanvas-link:hover {
  color: var(--primary);
}

.offcanvas-link::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var(--primary);
  left: 0;
  bottom: 0;
}

.offcanvas-nav:last-child .offcanvas-link::after {
  display: none;
}

.btn-primary {
  color: var(--white);
  border: none;
  position: relative;
  border-radius: 20px;
  outline: none;
  display: flex;
  justify-content: center;
  background: transparent;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  text-wrap: nowrap;
  font-size: 1rem;
  overflow: hidden;
  transition: color 0.6s ease, border 0.6s ease;
  border: 1px solid transparent;
  z-index: 1;
}

.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  z-index: -1;
  transform: translateY(0%);
  transition: transform 0.6s ease;
}

.btn-primary:hover::before {
  transform: translateY(100%);
}

.btn-primary:hover {
  color: var(--primary);
  border: 1px solid var(--primary);
}

@-webkit-keyframes pulse-effect {
  0% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-box-shadow: 0 0 0 0 var(--primary);
    box-shadow: 0 0 0 0 var(--primary);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.144);
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.144);
  }

  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

@keyframes pulse-effect {
  0% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-box-shadow: 0 0 0 0 var(--primary);
    box-shadow: 0 0 0 0 var(--primary);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-box-shadow: 0 0 0 0.6rem rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0.6rem rgba(0, 0, 0, 0);
  }

  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* The close button is taken out of flow so the heading can use the header's
   full width instead of sharing a flex row with the button. */
.modal-header {
  position: relative;
  display: block;
  padding-right: 3rem;
  min-height: 3rem;
}

/* Heading block above the modal form. The title text is swapped per CTA by
   openLeadModal(), so keep it on one line-height and let it wrap gracefully. */
.modal-form-head {
  margin: 0;
}

.modal-form-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}

.modal-form-subtitle {
  font-size: 0.9rem;
  color: var(--primary);
  margin: 0;
  line-height: 1.4;
}

.form-control.custom-input {
  border: none;
  border-bottom: 1px solid var(--primary);
  background: transparent;
  border-radius: 0px;
  color: var(--primary);
}

.mobile-input-div {
  position: relative;
}

.mobile-input-div .country-code {
  position: absolute;
  top: 7px;
  left: 2px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--primary);
}

.invalid-feedback {
  margin-top: 0.2rem;
  font-size: 0.8rem;
}

.form-control.custom-input.mobile-input {
  padding-left: 2.55rem;
}

.form-control.custom-input:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}


.modal-form .form-check-label {
  color: var(--primary);
  font-weight: 400;
  cursor: pointer;
  font-size: 0.875rem;
}

.btn-submit {
  background: var(--primary);
  color: var(--white);
  border: none;
  border: 1px solid var(--white);
  padding: 0.5rem 2rem;
  margin: 1rem 0 0 0;
}

.contact-form {
  padding: 1rem 0 0.25rem 0;
}

::-webkit-input-placeholder {
  color: var(--primary) !important;
}

::-moz-placeholder {
  color: var(--primary) !important;
}

:-ms-input-placeholder {
  color: var(--primary) !important;
}

::-ms-input-placeholder {
  color: var(--primary) !important;
}

::placeholder {
  color: var(--primary) !important;
}


/* Target placeholders inside the modal form only */
.modal-form ::placeholder {
  color: var(--primary) !important;
  opacity: 1;
}

.modal-form input::-webkit-input-placeholder {
  color: var(--primary) !important;
}

.modal-form input:-moz-placeholder {
  color: var(--primary) !important;
}

.modal-form input::-moz-placeholder {
  color: var(--primary) !important;
}

.modal-form input:-ms-input-placeholder {
  color: var(--primary) !important;
}

.btn-fixed {
  border: none;
  outline: none;
  border-radius: 100px;
  color: var(--white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 600;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.375rem;
  padding: 0.55rem 1.15rem;
}

/* ---------button of call now,  download brochure , enqurie now---------*/
.enquire-div {
  position: fixed;
  bottom: -50px;
  right: -50px;
  z-index: 99;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
}

.enquire-div.show {
  bottom: 3vw;
  -webkit-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
  right: 1vw;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  border: none;
  background: transparent;
}

.btn-enquire {
  color: var(--white);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  border: 1px solid var(--white);
  padding: 0.6rem 1.6rem;
  background: var(--primary);
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 500;
  -webkit-transition: all 0.45s ease;
  -o-transition: all 0.45s ease;
  transition: all 0.45s ease;
  cursor: pointer;
  -webkit-animation: pulse-effect 2s infinite;
  animation: pulse-effect 2s infinite;
  display: flex;
  gap: 0.375rem;
}

.btn-enquire .icon {
  width: 25px;
  height: 25px;
}

.btn-enquire .icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.download-div {
  position: fixed;
  bottom: -50px;
  left: -50px;
  z-index: 99;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
}

.download-div.show {
  bottom: 3vw;
  -webkit-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
  left: 1vw;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  border: none;
  background: transparent;
}

.download-btn {
  color: var(--white);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 0.6rem 1.6rem;
  border-radius: 10px;
  background: var(--primary);
  border: 1px solid var(--white);
  font-size: 1.15rem;
  font-weight: 500;
  -webkit-transition: all 0.45s ease;
  -o-transition: all 0.45s ease;
  transition: all 0.45s ease;
  cursor: pointer;
  -webkit-animation: pulse-effect 2s infinite;
  animation: pulse-effect 2s infinite;
  display: flex;
  gap: 0.375rem;
}

.download-btn .icon {
  width: 25px;
  height: 25px;
}

.download-btn .icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

/******************Banner Section Starts************* */

.mt40 {
  margin-top: 70px;
}

.main-banner {
  position: relative;
  overflow: hidden;
}

.carousel-inner img {
  position: relative;
  /* z-index: 1; */
}

.ban-text {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 3;
}

.ban-title {
  color: #fff;
  font-size: 3rem;
  margin: -2.25rem 0 0 0;
  font-style: normal;
  font-weight: 400;
  text-transform: capitalize;
  padding: 0.5rem 0rem;
  text-align: center;
}

.btn-visit.light {
  position: absolute;
  bottom: -99%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--white);
  background: var(--primary);
  gap: 0.45rem;
  padding: 0.5rem 1.25rem;
  color: #fff;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/******************Banner Section Ends************* */
/* ***********Overview Section Starts*********** */

/* The elevation render became the section's own background once the enquiry
   form took the right-hand column (was an <img> before). position:relative
   anchors the readability veil below, cover fills whatever height the two
   columns settle at, and flex centres the content so the crop stays balanced
   no matter the viewport. */
.overview {
  position: relative;
  background-color: var(--bone);
  background-image: url('../assets/images/about/overview.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 4rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* Frosted veil over the render: keeps both columns legible without hiding the
   tower. Sitting on its own plane means children only need a z-index to come
   to the front; pointer-events keep the veil from eating clicks. */
.overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.88);
  pointer-events: none;
}

.overview > * {
  position: relative;
  z-index: 1;
}

.overview-container {
  width: 90%;
  margin: auto 0 auto auto;
  /* The rows inside carry g-5, whose -24px side margins would otherwise poke
     past the viewport on the right — this container is flush to that edge and
     has no padding to absorb them. Clipped, not hidden: hidden would make this
     a scroll container. */
  overflow-x: clip;
}

.custom-container {
  width: 85%;
  margin: auto;
}

.sec-pad {
  padding: 4rem 0;
}

/* Light-weight display headings: at 600 the geometric forms read bulky and
   generic, so the weight drops to 300 and the size grows to hold presence.
   Line-height opens up to suit the thinner strokes. */
.sub-title {
  color: var(--heading);
  font-size: 3.1rem;
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: 0;
  margin-bottom: 0.8rem;
  line-height: 1.25;
}

.sub-title.aos-animate .char {
  background: linear-gradient(-45deg,
      var(--heading) 45%,
      var(--heading) 45%,
      var(--color) 50%,
      transparent 50%);
  background-size: 2em 3em;
  z-index: calc(var(--char-total) - var(--char-index));
  position: relative;
  -webkit-animation: bg-pos 1.3s cubic-bezier(0.3, 0, 0.3, 1) forwards alternate;
  animation: bg-pos 1.3s cubic-bezier(0.3, 0, 0.3, 1) forwards alternate;
  -webkit-animation-delay: calc(20ms + (30ms * var(--char-index)));
  animation-delay: calc(20ms + (30ms * var(--char-index)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@-webkit-keyframes bg-pos {
  0% {
    background-position: 0 0;
  }

  80%,
  100% {
    background-position: -1em -1.5em;
  }
}

@keyframes bg-pos {
  0% {
    background-position: 0 0;
  }

  80%,
  100% {
    background-position: -1em -1.5em;
  }
}

.overview-img {
  width: 100%;
  position: relative;
}

/* The render is portrait (800x1060); left to its intrinsic ratio at half the
   container width it towered over the copy beside it. A fixed ratio plus a cap
   keeps the image close to the text column's height, and it stays full-bleed to
   the right edge as the section intends. */
.overview-img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 620px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  display: block;
}

.other-description {
  color: #000;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem;
}

.overview-links {
  display: flex;
  justify-content: start;
  align-items: center;
  margin: 1rem auto auto auto;
}

/* Enquiry card that replaced the elevation <img>: a solid white sheet so it
   stays crisp above the image-filled section behind it. Column flex makes the
   fields stack evenly; the header gets its own spacing from the column gap. */
.overview-form {
  background: #ffffff;
  border: 1px solid rgba(26, 84, 128, 0.12);
  border-radius: 24px;
  padding: 2.25rem 2rem 2.5rem;
  max-width: 460px;
  -webkit-box-shadow: 0 24px 60px rgba(51, 40, 31, 0.18);
  box-shadow: 0 24px 60px rgba(51, 40, 31, 0.18);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.15rem;
}

.overview-form-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--heading);
}

.overview-form-sub {
  color: var(--taupe);
  font-size: 0.9rem;
  margin-bottom: 0;
}

.overview-form-header {
  margin-bottom: 0.25rem;
}

/* The +91 | prefix and its input both come from the modal form's underline
   styling; parked on top of the rounded bone inputs here the prefix floats at
   a different depth, so re-anchor it and clear the input's left side. */
.overview-form .mobile-input-div .country-code {
  top: 1.05rem;
  left: 1.15rem;
}

.overview-form .new-class.mobile-input {
  padding-left: 3.6rem;
}

.overview-form .form-check-label {
  color: var(--heading);
  font-size: 0.8rem;
  font-weight: 400;
  cursor: pointer;
}

.overview-form .btn-submit2 {
  width: 100%;
}

/* The contact card shares .overview-form; give it a touch more room on desktop
   (right-aligned via the base rule's margin, this reduces the run of space
   between it and the section image without closing the gutter gap entirely). */
@media only screen and (min-width: 992px) {
  .register-interest .overview-form {
    max-width: 520px;
  }
}

/* ************Overview Section Ends*********** */

/* ************Project Highlight Starts*********** */
.high-text {
  width: 65%;
  margin: auto;
  padding: 1rem 0;
}

.highlight-carousel {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}

/* Owl floats its items, so each box grows only to its own text height and the
   row comes out ragged. Flexing the stage stretches every box to the tallest in
   the row, so the cards are all one size whatever the copy length. */
.highlight-carousel .owl-stage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.highlight-carousel .owl-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
}

.highlight-carousel .owl-item .item {
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.highlight-carousel .box {
  background: linear-gradient(94deg, var(--bone) 3.13%, rgba(242, 237, 232, 0) 96.87%);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10);
  text-align: center;
  transition: transform 0.3s ease;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.highlight-carousel .box:hover {
  transform: translateY(-5px);
}


.highlight-carousel .icon {
  background-color: var(--primary);
  width: 85px;
  height: 85px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The box is a flex column now; keep the circle from being squashed. */
  flex: 0 0 auto;
}

.highlight-carousel .icon img {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);
}

.highlight-carousel .text {
  font-size: 1rem;
  line-height: 1.6rem;
  color: var(--taupe);
  font-weight: 400;
  padding-top: 2rem;
  text-align: start;
}

.owl-nav button {
  pointer-events: all;
  background: var(--primary) !important;
  width: 40px;
  height: 40px;
  border-radius: 45% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.highlight-carousel .owl-nav {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}

.highlight-carousel .owl-nav .owl-prev {
  margin-left: -5rem;
}

.highlight-carousel .owl-nav .owl-next {
  margin-right: -5rem;
}

/* ************Project Highlight ends*********** */

/* ************************project config Section Starts******************* */
.configuration {
  position: relative;
  background: var(--bone);
}

.config-text {
  width: 80%;
  margin: auto;
  padding: 1rem 0;
}

.layout-box {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.layout-box img {
  width: 100%;
  height: auto;
  display: block;
  /* Card shape follows the reference landing page (jroneeast.com), whose
     configuration cards are the near-square 902x934 of their plan images.
     Ours are landscape 1000x620, so the ratio is set here and the image
     covers it: contain would letterbox the taller card with bands of --blush.
     Cropping costs nothing, since the plan is blurred behind the lock until
     the enquiry is made. Fixing the ratio also holds the card's shape while
     the image loads, instead of collapsing to just the .layout-content scrim. */
  aspect-ratio: 902 / 934;
  -o-object-fit: cover;
  object-fit: cover;
  background-color: var(--blush);
}

/* Desktop: the carousel is not initialised (see syncProjectCarousel), so the
   two configuration cards are laid out directly as a centred 2-up row. */
@media (min-width: 992px) {
  .project-carousel:not(.owl-loaded) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    /* 2 x 399px + the 40px gap, plus the row's 24px of gutter padding, so
       each card lands on the reference's card width. */
    max-width: 862px;
    margin: 0 auto;
  }
}

.layout-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 3.5rem 1.25rem 1.2rem;
  /* Scrim runs dark enough to keep white text legible over pale floor plans */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.72) 40%, rgba(0, 0, 0, 0) 100%);
  color: var(--white);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: end;
}

.layout-content .text {
  min-width: 0;
}

.layout-content .bhk {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.35em !important;
}

.layout-content .area {
  margin: 2px 0 0;
  font-size: 0.875rem;
  opacity: 0.9;
}

.layout-content .btn-check {
  cursor: pointer;
  background-color: transparent;
  color: var(--white);
  padding: 8px 18px;
  font-size: 0.875rem;
  border-radius: 20px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: color 0.6s ease, border 0.6s ease;
  z-index: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.layout-content .btn-check::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--primary);
  z-index: -1;
  transform: translateY(0%);
  transition: transform 0.6s ease;
}

.layout-content .btn-check:hover::before {
  transform: translateY(100%);
}

.layout-content .btn-check:hover {
  color: var(--primary);
  border: 1px solid var(--primary);
}

.project-carousel {
  margin-top: 2rem;
}

/* ----- Project Configuration motion -----
   The cards are the section's only interactive content, so the motion is tied
   to intent: a staggered reveal on arrival, then everything else responds to
   hover. AOS puts .aos-animate on the carousel when it scrolls into view, which
   is what gates the reveal — the cards cannot animate before they are seen, and
   Owl's mobile clones inherit the same rule so they never sit stuck at
   opacity 0. */
.project-carousel.aos-animate .item {
  -webkit-animation: cfg-card-in 0.75s cubic-bezier(0.22, 0.8, 0.3, 1) both;
  animation: cfg-card-in 0.75s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.project-carousel.aos-animate .item:nth-child(2) {
  -webkit-animation-delay: 0.16s;
  animation-delay: 0.16s;
}

.layout-box {
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1), -webkit-box-shadow 0.45s ease;
  transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 0.45s ease;
}

.layout-box:hover {
  -webkit-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  transform: translateY(-8px);
  -webkit-box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

/* The gate reads as pressable: the ring breathes on its own, then the whole
   badge steps forward under the cursor. */
.plan-lock-icon {
  -webkit-animation: cfg-lock-pulse 2.8s infinite ease-out;
  animation: cfg-lock-pulse 2.8s infinite ease-out;
  -webkit-transition: -webkit-transform 0.35s ease;
  transition: transform 0.35s ease;
}

.layout-box:hover .plan-lock-icon {
  -webkit-transform: scale(1.12);
  -ms-transform: scale(1.12);
  transform: scale(1.12);
}

.plan-lock {
  -webkit-transition: background-color 0.45s ease;
  transition: background-color 0.45s ease;
}

.layout-box:hover .plan-lock {
  background: rgba(0, 0, 0, 0.42);
}

.plan-lock-text {
  -webkit-transition: letter-spacing 0.45s ease;
  transition: letter-spacing 0.45s ease;
}

.layout-box:hover .plan-lock-text {
  letter-spacing: 0.12em;
}

/* Label lifts with the card so the caption block feels attached to it. */
.layout-content .text {
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
  transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.layout-box:hover .layout-content .text {
  -webkit-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  transform: translateY(-4px);
}

@-webkit-keyframes cfg-card-in {
  from { opacity: 0; -webkit-transform: translateY(38px) scale(0.97); transform: translateY(38px) scale(0.97); }
  to { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}

@keyframes cfg-card-in {
  from { opacity: 0; -webkit-transform: translateY(38px) scale(0.97); transform: translateY(38px) scale(0.97); }
  to { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}

@-webkit-keyframes cfg-lock-pulse {
  0% { -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0.45); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0.45); }
  70% { -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 14px rgba(255, 255, 255, 0); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 14px rgba(255, 255, 255, 0); }
  100% { -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0); }
}

@keyframes cfg-lock-pulse {
  0% { -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0.45); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0.45); }
  70% { -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 14px rgba(255, 255, 255, 0); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 14px rgba(255, 255, 255, 0); }
  100% { -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Cards must still arrive at full opacity when motion is switched off. */
@media (prefers-reduced-motion: reduce) {
  .project-carousel.aos-animate .item,
  .plan-lock-icon {
    -webkit-animation: none !important;
    animation: none !important;
  }
}

.btn-check {
  position: unset;
  clip: unset;
  pointer-events: unset;
}

.project-carousel .owl-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 2rem;
}

/* ***********************project config Section Ends*************** */


/* ***********amenities section starts********** */

.amenities {
  width: 100%;
  position: relative;
  background: #fff;
}

.amenity-item {
  text-align: center;
  padding: 1rem 0rem;
}

.amenity-icon {
  width: 120px;
  height: 120px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 5px;
  transition: all 0.3s ease;
}

/* The source SVGs are a single flat colour, so we mask them and tint with the
   theme token instead of hardcoding a colour into each file — the icons then
   follow --primary automatically if the accent changes.
   The url()s must live here, not in an inline style: a relative url() inside a
   custom property resolves against the stylesheet's path, not the document's. */
.amenity-icon .amenity-glyph {
  display: block;
  width: 67px;
  height: 67px;
  background-color: var(--primary);
  -webkit-mask-image: var(--glyph);
  mask-image: var(--glyph);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.3s ease;
}

/* One glyph per amenity, named after the label it sits under. All ten are
   drawn to a shared spec: 64x64 viewBox, 2.4px round-joined stroke, no fill —
   so they read as one set once the mask tints them with --primary. */
.amenity-icon .glyph-commercial-plaza { --glyph: url("../assets/images/amenities/commercial-plaza.svg"); }
.amenity-icon .glyph-jacuzzi { --glyph: url("../assets/images/amenities/jacuzzi.svg"); }
.amenity-icon .glyph-spa { --glyph: url("../assets/images/amenities/spa.svg"); }
.amenity-icon .glyph-gym { --glyph: url("../assets/images/amenities/gym.svg"); }
.amenity-icon .glyph-kids-play { --glyph: url("../assets/images/amenities/kids-play.svg"); }
.amenity-icon .glyph-yoga { --glyph: url("../assets/images/amenities/yoga.svg"); }
.amenity-icon .glyph-badminton { --glyph: url("../assets/images/amenities/badminton.svg"); }
.amenity-icon .glyph-banquet { --glyph: url("../assets/images/amenities/banquet.svg"); }
.amenity-icon .glyph-pool { --glyph: url("../assets/images/amenities/pool.svg"); }
.amenity-icon .glyph-kids-pool { --glyph: url("../assets/images/amenities/kids-pool.svg"); }

.amenity-item:hover .amenity-icon {
  background: var(--primary);
  transform: translateY(-4px);
}

.amenity-item:hover .amenity-glyph {
  background-color: var(--white);
}

.amenity-label {
  font-size: 1rem;
  color: var(--black);
  font-weight: 400;
  margin: 0;
}

.ame-cirle {
  margin: 1rem 0rem;
}

.amenities-carousel .owl-nav {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}

.amenities-carousel .owl-nav .owl-prev {
  margin-left: -5rem;
}

.amenities-carousel .owl-nav .owl-next {
  margin-right: -5rem;
}

/* ***********amenities section ends********** */

/* ***********gallery section starts*********/
.gallery {
  background: var(--bone);
  position: relative;
}

.head-text {
  text-align: center;
}

.justify-ext {
  justify-content: center;
  gap: 1rem;
}

.nav-tabs {
  border-bottom: none !important;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link {
  border-bottom: 0 !important;
}

.nav-tabs .nav-link.active {
  position: relative;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--primary) !important;
  font-size: 1.2rem;
  background-color: transparent;
}


.nav-tabs .nav-link {
  border-bottom: none !important;
  font-size: 1.2rem;
  color: var(--black);
}

.nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 2px;
  background-color: var(--primary) !important;
  transition: width 0.3s ease-in-out;
}

.nav-tabs .nav-link {
  border: none !important;
}

.gal_image {
  position: relative;
}

/* Gallery slides share one 16:9 frame so every tab's images line up in a row
   instead of stepping up and down with their own aspect ratios. */
.gal-carousel .gal_image,
.gal-carousel .gal_image > a {
  display: block;
  width: 100%;
}

.gal-carousel .gal_image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.gal-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.gal-carousel .owl-item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.gal-carousel .owl-item.active.center .gal_image {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: relative;
}

.gal-carousel .owl-item:not(.active.center) .gal_image {
  position: relative;
}

.gal-carousel .owl-item .gal_image {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  position: relative;
}

.gal-carousel .owl-nav {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Gallery arrows sit over the artwork, so they run a step lighter than the
   shared owl-nav primary — enough to stay legible without competing with the
   photography. They darken to the full primary on hover. */
.gal-carousel .owl-nav button {
  background: var(--primary-bright) !important;
  opacity: 0.85;
  -webkit-transition: background-color 0.3s ease, opacity 0.3s ease;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.gal-carousel .owl-nav button:hover {
  background: var(--primary) !important;
  opacity: 1;
}

.gal-carousel .owl-nav .owl-prev {
  margin-left: -5rem;
}

.gal-carousel .owl-nav .owl-next {
  margin-right: -5rem;
}

/* Width comes from the Bootstrap column; this only makes the image fill it. */
.master-plan-single img {
  width: 100%;
  height: auto;
  display: block;
}

/* Gated plans: the floor plans and the master plan are blurred out, and
   clicking one opens the enquiry modal instead of revealing the image. */
.plan-locked {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.plan-locked img {
  /* Scaled up because blur feathers the edges inward and would otherwise leave
     a translucent border inside the frame. */
  -webkit-transform: scale(1.08);
  -ms-transform: scale(1.08);
  transform: scale(1.08);
  -webkit-filter: blur(10px);
  filter: blur(10px);
  -webkit-transition: -webkit-filter 0.35s ease, -webkit-transform 0.35s ease;
  -o-transition: filter 0.35s ease, transform 0.35s ease;
  transition: filter 0.35s ease, transform 0.35s ease;
}

.plan-locked:hover img {
  -webkit-transform: scale(1.12);
  -ms-transform: scale(1.12);
  transform: scale(1.12);
}

/* The master plan is gated the same way the floor plans are — blurred until
   the enquiry is made — so it inherits .plan-locked img above and keeps the
   matching upscale that hides the blur's feathered edges. */

.plan-lock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  color: var(--white);
}

.plan-lock-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.plan-lock-icon i {
  font-size: 20px;
  line-height: 1;
  color: var(--white);
}

.plan-lock-text {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.gallery .overtext {
  position: absolute;
  bottom: 0%;
  right: 0%;
  background-color: var(--primary);
  color: #fff;
  font-size: 12px;
  font-family: var(--font-heading);
  padding: 5px;
  text-transform: uppercase;
}

/* **************gallery section ends********* */


/* ***********loaction section starts************** */
.location {
  position: relative;
}

.btn-directions {
  display: inline-block;
  padding: 10px 26px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-full);
  color: var(--primary);
  background-color: transparent;
  font-size: 0.9rem;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.btn-directions:hover {
  background-color: var(--primary);
  color: var(--white);
}

.loc-back {
  background: var(--bone);
  padding: 3rem 2.8rem;
  border-radius: 3rem;

}

.loc-text {
  text-align: start !important;
}

.accordion {
  --bs-accordion-bg: transparent !important;
  --bs-accordion-border-color: none !important;
  --bs-accordion-btn-icon-transform: rotate(0deg) !important;
}

.accordion-button:not(.collapsed) {
  background-color: unset !important;
}

.accordion-button:not(.collapsed)::after {
  background-image: url('../assets/images/loacation/minus.png') !important;
  transform: rotate(0deg);
}

.accordion-button::after {
  background-image: url('../assets/images/loacation/plus.svg') !important;
  transform: rotate(360deg);
  background-size: contain;
}

.accordion-button img {
  position: absolute;
  left: 0%;
}

.accordion-button:focus {
  z-index: 3;
  border-color: none;
  outline: 0;
  box-shadow: none !important;
}

.accordion-button {
  font-size: 1.2rem !important;
  padding-left: 2% !important;
  border-bottom: 1px solid !important;
  font-style: normal;
  font-weight: 600;
  line-height: 1.55rem;
  /* 103.333% */
  letter-spacing: 0.02375rem;
}

.accordion-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.85rem;
}

.accordion-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.accordion-content .acc-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.25rem;
}

.accordion-body .distance {
  white-space: nowrap;
  padding-left: 10px;
}

.accordion-body {
  position: relative;
}

.accordion-body span {
  position: absolute;
  right: 22px;
}

.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: #242424 !important;
  text-align: left;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}

.accordion-item {
  position: relative;
}

/* .accordion-item img {
  position: absolute;
  top: 17px;
  width: 15px;
} */

.loc-img {
  width: 100%;
  position: relative;
}

.loc-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.loc-cust {
  margin-top: 1%;
}

.adv-text {
  font-weight: 500;
}


/* ***********loaction section ends************** */


/* ***********about us section starts---------- */
.aboutus {
  background: var(--bone);
  ;
}

.gap-title {
  padding-bottom: 1rem;
}

.gap-title2 {
  padding-bottom: 2rem;
}

.about-img {
  width: 100%;
  position: relative;
}

/* Both renders behind this class are near-square or 3:2; without a fixed ratio
   they ran far taller than the copy and the form they sit beside. */
.about-img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 520px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: 0.5rem;
  display: block;
}

.counter-section {
  padding-top: 3rem;
}

.counter-box {
  position: relative;
  padding-top: 2rem;
}

.counter-box .top-line {
  content: "";
  width: 90%;
  height: 1px;
  background-color: var(--primary);
  position: absolute;
  top: 0;
  left: 0;
}

.counter-number {
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
}

.counter-label {
  font-size: 1rem;
  margin-top: 0.5rem;
  color: var(--black);
}

/* The About heading is a full sentence, not a 2-3 word section title, so it
   needs a smaller size than the global .sub-title. Fluid, so no media queries. */
.aboutus .sub-title {
  font-size: clamp(1.75rem, 2.2vw + 0.5rem, 2.75rem);
}

/* A counter whose value is words, not a number — the 3.5rem number size is far
   too large for it. */
.counter-number.counter-text {
  font-size: clamp(1.25rem, 1.4vw + 0.5rem, 1.9rem);
  line-height: 1.25;
}

/* ***********about us section ends---------- */


/* form */

.auto-update-form {
  gap: 1rem;
}

.register-interest {
  background: #fff;
  position: relative;
}

.adjust {
  display: flex;
  /* Wrap so the full-width .invalid-feedback drops below the input instead of
     sitting beside it and squeezing the field. */
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.section-title {
  color: #242424;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
}

.section-subtitle {
  color: #000;
  background-color: #fff;
  font-size: 1.25rem;
  font-style: normal;
  /* width: max-content; */
  max-width: 100%;
  margin: 1rem auto !important;
  padding: 1.5rem 0rem;
  font-weight: 600;
  line-height: 22.5px;
  text-transform: capitalize;
}

.new-class {
  background: var(--bone);
  border: 0;
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 1rem 1rem;
  border-radius: 20px;
}

.new-class:focus {
  box-shadow: none;
}

/* The submit sits in a col-md-10 that is wider than the button, so without
   this it hangs on the left edge of the form. */
.contact-submit-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.btn-submit2 {
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 0.75rem 2.5rem;
  color: #fff;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 20px;
  font-size: 1.15rem;
  font-weight: 400;
  transition: color 0.6s ease, border 0.6s ease;
}

.btn-submit2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--primary);
  z-index: -1;
  transform: translateY(0%);
  transition: transform 0.6s ease;
}

.btn-submit2:hover::before {
  transform: translateY(100%);
}

.btn-submit2:hover {
  color: var(--primary);
  border: 1px solid var(--primary);
}

.form-calltxt {
  margin-bottom: 0;
  color: #181d24;
  font-size: 20px;
  text-align: center;
  margin-top: 30px;
}

.form-calltxt a {
  color: #181d24 !important;
  text-decoration: none !important;
  font-size: 1.8rem;
  font-weight: 600;
}


/********** footer ***********/
.footer-black {
  background: var(--surface-dark);
  padding: 2rem 0rem;
}

/* The copyright .row sits straight in .footer-black with no .container to
   absorb its -12px gutter margins, so it hung 12px past the viewport. The
   .copyright2 inside is already width:90%;margin:auto, so dropping the
   negative margins costs nothing visually. */
.footer-black > .row {
  margin-left: 0;
  margin-right: 0;
}

/* The footer sits on a dark ground, so the RERA authority link has to be light
   or it disappears into the background. */
.text-footer a {
  color: var(--white);
  text-decoration: underline;
}

.copyright {
  display: flex;
  justify-content: space-between;
}

/* Height-driven so the logo's own aspect ratio decides its width. A fixed width
   here would stretch a near-square mark into a very tall block. */
.footer-logo {
  padding: 0.5rem 0rem;
  margin: auto;
  height: auto;
  max-width: 100%;
}

.footer-logo img {
  width: auto;
  height: 62px;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  border-radius: 0px;
  object-fit: contain;
}

.qr-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1rem auto 1rem auto;
}

.qr-logo {
  width: 90px;
}

.qr-logos img {
  width: 100%;
  height: auto;
  border-radius: 0px;
  /* A QR must not be cropped or stretched or scanners lose the finder patterns,
     so it keeps its own square ratio and sits on white for scan contrast. */
  aspect-ratio: 1 / 1;
  -o-object-fit: contain;
  object-fit: contain;
  background-color: var(--white);
  display: block;
}

.footer-qr img {
  width: 100%;
  height: 100%;
  /* border-radius: 6px; */
  -o-object-fit: cover;
  object-fit: cover;
}

.text-footer p {
  color: var(--white);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 400;
  padding: 1.3rem 1rem;
  text-wrap: balance;
}


.footer-desc p {
  color: var(--white);
  text-align: center;
  font-size: 0.85rem;
  text-wrap: balance;
  font-weight: 500;
  padding: 0.2rem 1rem;
}

.copyright-desc {
  color: var(--white);
  margin-top: 1rem;
  padding: 0.2rem 1rem;
}

.copyright-desc2 {
  color: var(--white);
  font-size: 0.95rem;
  padding: 0.2rem 1rem;
}

.realatte-logo {
  height: 20px;
  vertical-align: middle;
  margin-left: 5px;
}


.copyright {
  display: flex;
  justify-content: space-between;
}

.copyright2 {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.custom-hr {
  color: var(--white);
}

.copyright {
  width: 80%;
  margin: auto;
}

/* --------Modal Place holder starts */
.custom-placeholder::placeholder {
  color: white !important;
  opacity: 1;
  /* Ensure full visibility */
}

.custom-placeholder:-ms-input-placeholder {
  /* Edge 12-18 */
  color: white !important;
}

.custom-placeholder::-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white !important;
}

/* thank you page css */

nav.thank-you {
  background-color: #00000080;
}

/* min-height, not a fixed 450px: the heading wraps to two lines on a phone and
   the fixed box clipped the button off the bottom. The top margin only has to
   clear the fixed header, so it scales with the viewport instead of spending
   8rem of a short screen. */
section.secton-thankyou {
  min-height: 450px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 2rem 1.5rem;
  margin: clamp(5rem, 12vw, 8rem) auto 0 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* Matches the site's section headings: the Fraunces display face in charcoal.
   (These previously used var(--light), which was never defined, so the colour
   silently fell back to inherited black.) */
section.secton-thankyou .thankyou-title {
  font-weight: 300;
  letter-spacing: 0;
  margin: 0.75rem auto 1.15rem auto !important;
  text-align: center;
  text-wrap: pretty;
  font-family: var(--font-heading);
  color: var(--heading);
  font-size: 2.8rem;
  font-size: clamp(1.75rem, 6vw, 2.8rem);
  line-height: 1.2;
}

section.secton-thankyou .thankyou-subtitle {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.75;
  text-align: center;
  text-wrap: pretty;
  color: var(--heading);
}

/* The thank-you header carries the mark alone, so it can run larger than the
   landing page's, where it shares the row with the nav links and the CTA. */
.page-thankyou .navbar-container .navlogo .logo,
.page-thankyou nav.dropped .navbar-container .navlogo .logo {
  height: clamp(42px, 5.2vw, 68px);
  width: auto;
}

.go_txt {
  font-size: 15px;
  color: var(--primary);
  background-color: transparent;
  border-radius: 3.125rem;
  border: 1px solid var(--primary);
  width: fit-content;
  padding: 15px 30px;
  margin: 15px auto 0;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.go_txt:hover {
  background-color: var(--primary);
  color: var(--white);
}

.mobile-fixed-button {
  display: none;
}

/* thank you page css */

/* ***********Modal Form********* */
.modal-content {
  background: #fff;
  border-radius: unset;
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.modal-header .btn-close {
  /* filter: invert(1); */
  position: absolute;
  top: 50%;
  right: 1rem;
  margin: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}


.carousel-fade .carousel-item-next.carousel-item-start, .carousel-fade .carousel-item-prev.carousel-item-end, .carousel-fade .carousel-item.active {
  z-index: unset !important;
}

@media only screen and (max-width: 1400px) {
  /* Nav padding, link size and link gap are fluid in the base rules now. The
     fixed values that used to live here overrode those clamps with a *larger*
     font than the space allowed, which is what pushed the row into overflow
     between 1200px and 1300px. */

  .sub-title {
    font-size: 2.6rem;
  }

  .counter-number {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 1280px) {
  .sub-title {
    font-size: 2.4rem;
  }

  .counter-number {
    font-size: 2rem;
  }

}

@media only screen and (max-width: 1200px) {

  /* Hamburger header: wide "nirala trio" mark hard left, Book CTA, then the
     hamburger hard right. */
  .navbar-container .menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    filter: invert(1);
  }

  .navbar-container .menu img {
    width: 26px;
    height: 26px;
    -o-object-fit: contain;
    object-fit: contain;
  }

  .navbar-container .navlogo-left {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  /* The CTA has to be ordered explicitly. Everything else in the row gets an
     order here, and an unset order computes to 0 — which sorts the button
     BEFORE the logo and threw it to the far left of the header. `order` only
     accepts integers, so the 2.5 that used to be set for this was dropped as
     invalid and left the button at 0 as well. */
  .navbar-container .header-cta-wrapper {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    margin-left: auto;
    margin-right: 0.5rem;
  }

  .navbar-links {
    display: none !important;
  }

  .navbar-container {
    position: relative;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
  }


  .high-text {
    width: unset;
  }

  .config-text {
    width: unset;
  }

  .highlight-carousel .owl-nav .owl-prev {
    margin-left: -4rem;
  }

  .highlight-carousel .owl-nav .owl-next {
    margin-right: -4rem;
  }

  /* Was 3rem, which is larger than the 1280px step above it, so the heading
     grew as the viewport shrank. Steps down monotonically now. */
  .sub-title {
    font-size: 2.2rem;
  }



  .counter-number {
    font-size: 2.5rem;
  }
}

@media only screen and (max-width: 991px) {

  .believe-nav .custom-nav {
    margin: 1.4rem auto auto auto;
    gap: 1rem;
  }

  .high-text {
    width: unset;
  }

  .config-text {
    width: unset;
  }

  .overview {
    padding: 4rem 0;
  }

  .overview-container {
    width: 95%;
    margin: auto auto auto auto;
  }

  /* Below lg the enquiry card stacks above the copy (order-lg-* utilities in
     index.php swap DOM-first form to the right on desktop). Keep the sheet a
     comfortable width and centred so it doesn't stretch the whole section. */
  .overview-form {
    max-width: 540px;
    margin: 0 auto;
  }

  .about-img img {
    aspect-ratio: 16 / 9;
    max-height: 380px;
  }

  .counter-box .top-line {
    width: 100%;
  }

  .sub-title {
    font-size: 2rem;
  }

  .counter-number {
    font-size: 2.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .overview {
    padding: 2rem 0;
  }

  /* Center the Download Brochure button under the stacked overview text. */
  .overview-links {
    justify-content: center;
  }

  /* Weight nudges up as the size drops: 300 turns hairline-thin and washes out
     at phone sizes. */
  .sub-title {
    font-size: 2rem;
    font-weight: 400;
  }

  .sec-pad {
    padding: 2rem 0;
  }

  /* Location accordion had no mobile step-down: headers rendered at 19.2px and
     rows at 16px, which crowds long landmark names on a narrow screen. */
  .accordion-button {
    font-size: 1rem !important;
    line-height: 1.35rem;
  }

  .acc-location {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .accordion-content {
    gap: 0.5rem;
  }

  .accordion-content .acc-icon img {
    width: 12px;
  }

  /* g-5's -24px side margins pull this column wider than the container, and
     the card's own padding here (18.4px) is too small to push the text back
     inside — the section's overflow-x: clip then shaves the first letter.
     Dropping the horizontal gutter keeps the vertical row spacing intact. */
  .location .row {
    --bs-gutter-x: 0;
  }

  .loc-back {
    padding: 1.75rem 1.15rem;
    border-radius: 1.5rem;
  }

  .high-text {
    width: unset;
  }

  .config-text {
    width: unset;
  }

  .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
    display: flex !important;
  }


  .copyright {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 0.2rem;
  }

  /* The old floating bar overlapped the footer, so this cleared it. The CTA bar
     is now full-bleed and body reserves its height, so the extra gap is gone. */
  .copyright2 {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 0.2rem;
  }

  /* Also match nav.dropped, else the scrolled header re-grows the logos. */
  .navbar-container .navlogo .logo,
  nav.dropped .navbar-container .navlogo .logo {
    height: 40px;
    width: auto;
  }

  /* One card per slide on mobile, so centre its contents. The box is already
     text-align: center; the icon is a flex block that needs centring itself,
     and .text opts out with text-align: start. */
  .highlight-carousel .icon {
    margin-left: auto;
    margin-right: auto;
  }

  .highlight-carousel .text {
    text-align: center;
  }

  .highlight-carousel .owl-nav {
    top: auto;
    bottom: 0;
    transform: none;
    justify-content: center !important;
    position: relative;
    gap: 20px;
    margin-top: 1rem;
  }

  .amenities-carousel .owl-nav {
    top: auto;
    bottom: 0;
    transform: none;
    justify-content: center !important;
    position: relative;
    gap: 20px;
    margin-top: 1rem;
  }

  .overview-container {
    width: 95%;
    margin: auto auto auto auto;
  }

  .readmore-btn {
    background: none;
    border: none;
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
  }

  .readmore-btn:hover {
    text-decoration: underline;
  }

  .counter-number {
    font-size: 2rem;
  }

  .counter-box .top-line {
    width: 100%;
  }

  .highlight-carousel {
    margin-top: 0rem;
  }

  .social-links2 {
    padding-bottom: 3.5rem;
  }

  .nav-tabs .nav-link {
    font-size: 1rem;
  }

  /* mobile fixed bottom CTA bar: full-bleed, two equal halves, square corners.
     Sits in the flow's way, so the page has to reserve its height at the
     bottom. That reserve lives inside the dark footer rather than on body:
     body padding paints in the page background, so any mismatch between the
     reserve and the bar's real height showed as a pale strip under the
     footer. Padding the footer instead keeps the reserved area dark. */
  .footer-black {
    padding-bottom: calc(2rem + 64px);
  }

  /* The bar carries the two CTAs as pills on a light tray, rather than as
     two full-bleed panels. They used to be flush to each other and to the
     screen edge, which is why they were the one pair of CTAs left out of the
     shared pulse: scaling a full-bleed panel to 0.95 opens a gap down the
     middle and along the edges. Given room to breathe, they run the same
     pulse-effect as every other button on the page. */
  .mobile-fixed-button {
    display: block;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding: 0.5rem 0.6rem;
    background: var(--white);
    -webkit-box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
  }

  .mobile-fixed-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin: 0;
    gap: 0.6rem;
  }

  .mobile-fixed-content .btn-fixed {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.4rem;
    border-radius: 0;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.7rem 0.5rem;
    color: var(--white);
    -webkit-animation: pulse-effect 2s infinite;
    animation: pulse-effect 2s infinite;
  }

  .btn-enquire-fixed {
    background: var(--primary);
  }

  .btn-brochure-fixed {
    background: var(--primary);
  }

  /* The bar is the main conversion path on mobile, so it earns motion: it
     rises in once on load, then each button takes a staggered shine sweep and
     its icon a small idle nudge. Everything animates transform/opacity only,
     so the bar never shifts the layout it sits above. */
  .mobile-fixed-button {
    -webkit-animation: cta-bar-rise 0.6s 0.4s ease-out both;
    animation: cta-bar-rise 0.6s 0.4s ease-out both;
  }

  .mobile-fixed-content .btn-fixed {
    position: relative;
    overflow: hidden;
    -webkit-transition: -webkit-transform 0.18s ease;
    transition: transform 0.18s ease;
  }

  .mobile-fixed-content .btn-fixed::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    pointer-events: none;
    z-index: 2;
    -webkit-animation: shine-swipe 4s infinite ease-in-out;
    animation: shine-swipe 4s infinite ease-in-out;
  }

  /* Offset so the two halves sweep in turn rather than as one block. */
  .mobile-fixed-content .btn-brochure-fixed::after {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }

  /* Keep label and icon above the sweep. */
  .mobile-fixed-content .btn-fixed span.icon,
  .mobile-fixed-content .btn-fixed span.txt {
    position: relative;
    z-index: 3;
  }

  /* Tap feedback, since :hover never fires on touch. */
  .mobile-fixed-content .btn-fixed:active {
    -webkit-transform: scale(0.97);
    -ms-transform: scale(0.97);
    transform: scale(0.97);
  }

  /* mobile fixed bottom CTA bar */


}

@media only screen and (max-width: 576px) {

  /* Keep "Nirala Trio, Noida Sector 2" on a single line at phone widths: the
     2rem tablet size wraps from ~480px down, so hold the line and scale the
     type with the viewport instead (capped at the 2rem floor above 576px). */
  .overview-text-col .sub-title {
    white-space: nowrap;
    font-size: clamp(1.15rem, 5.4vw, 2rem);
  }

  /* Tighten the enquiry sheet on phones: 2rem side padding on a 360px screen
     leaves the fields cramped. */
  .overview-form {
    padding: 1.6rem 1.25rem 2rem;
    border-radius: 18px;
  }

  .overview-form .new-class.mobile-input {
    padding-left: 3.2rem;
  }

  /* 2rem each side costs 64px of a 360px viewport, which the three header
     items need. */
  nav {
    padding: 0.65rem 1rem;
  }

  .navbar-container {
    gap: 0.75rem;
  }

  .high-text {
    width: unset;
  }

  .config-text {
    width: unset;
  }

  /* mobile fixed bottom CTA bar */

  .mobile-fixed-content .btn-fixed {
    font-size: 0.85rem;
    padding: 0.85rem 0.5rem;
  }

  /* mobile fixed bottom CTA bar */
}

@media only screen and (max-width: 450px) {

  .mobile-fixed-content .btn-fixed {
    font-size: 0.8rem;
    padding: 0.8rem 0.4rem;
  }

  .btn-fixed span.icon {
    width: 18px;
    height: 18px;
  }

  .btn-fixed span.icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }

  .text-footer p {
    font-size: 0.75rem;
  }

  .copyright-desc2 {
    font-size: 0.75rem;
  }

  /* The left mark is ~4x wider than tall; it must stay clear of the centred
     mark, so it shrinks as the viewport narrows. */
  .navbar-container .navlogo .logo,
  nav.dropped .navbar-container .navlogo .logo {
    height: 32px;
    width: auto;
  }

  .navbar-container .menu img {
    width: 24px;
    height: 24px;
  }
}

@media only screen and (max-width: 350px) {
  .text-footer p {
    font-size: 0.75rem;
  }

  .copyright-desc2 {
    font-size: 0.75rem;
  }

  .mobile-fixed-content .btn-fixed {
    font-size: 0.725rem;
  }

  .btn-fixed span.icon {
    width: 15px;
    height: 15px;
  }

  .navbar-container .navlogo .logo,
  nav.dropped .navbar-container .navlogo .logo {
    height: 28px;
    width: auto;
  }

  .navbar-container .menu img {
    width: 22px;
    height: 22px;
  }
}

/* ---------owl line starts here------- */

.amenities-carousel .owl-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.25rem;
  margin: 2rem auto 1rem auto;
}

.amenities-carousel .owl-dots button {
  width: 15px;
  height: 3px;
  border-radius: 100px;
  -webkit-transition: all 1.1s ease;
  -o-transition: all 1.1s ease;
  transition: all 1.1s ease;
  background-color: #dfdfdf !important;
}

.amenities-carousel .owl-dots button.active {
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  width: 25px;
  background-color: var(--primary) !important;
}


.highlight-carousel .owl-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.25rem;
  margin: 2rem auto 1rem auto;
}

.highlight-carousel .owl-dots button {
  width: 15px;
  height: 3px;
  border-radius: 100px;
  -webkit-transition: all 1.1s ease;
  -o-transition: all 1.1s ease;
  transition: all 1.1s ease;
  background-color: #dfdfdf !important;
}

.highlight-carousel .owl-dots button.active {
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  width: 25px;
  background-color: var(--primary) !important;
}

/* Animated Download Brochure Button styles */
.animated-brochure-btn {
  position: relative;
  overflow: hidden;
  /* Was pulse-glow; now on the same pulse-effect as every other CTA. The
     shine sweep lives on ::after, so it still runs alongside. */
  -webkit-animation: pulse-effect 2s infinite;
  animation: pulse-effect 2s infinite;
}

.animated-brochure-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 30%;
  height: 200%;
  background: rgba(255, 255, 255, 0.35);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -webkit-transition: none;
  transition: none;
  -webkit-animation: shine-swipe 3.5s infinite ease-in-out;
  animation: shine-swipe 3.5s infinite ease-in-out;
  z-index: 2;
}

@-webkit-keyframes pulse-glow {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-box-shadow: 0 0 0 0 rgba(200, 28, 34, 0.4);
    box-shadow: 0 0 0 0 rgba(200, 28, 34, 0.4);
  }
  50% {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    -webkit-box-shadow: 0 0 0 12px rgba(200, 28, 34, 0);
    box-shadow: 0 0 0 12px rgba(200, 28, 34, 0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-box-shadow: 0 0 0 0 rgba(200, 28, 34, 0);
    box-shadow: 0 0 0 0 rgba(200, 28, 34, 0);
  }
}

@keyframes pulse-glow {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-box-shadow: 0 0 0 0 rgba(200, 28, 34, 0.4);
    box-shadow: 0 0 0 0 rgba(200, 28, 34, 0.4);
  }
  50% {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    -webkit-box-shadow: 0 0 0 12px rgba(200, 28, 34, 0);
    box-shadow: 0 0 0 12px rgba(200, 28, 34, 0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-box-shadow: 0 0 0 0 rgba(200, 28, 34, 0);
    box-shadow: 0 0 0 0 rgba(200, 28, 34, 0);
  }
}

@-webkit-keyframes shine-swipe {
  0% {
    left: -60%;
  }
  30% {
    left: 140%;
  }
  100% {
    left: 140%;
  }
}

@keyframes shine-swipe {
  0% {
    left: -60%;
  }
  30% {
    left: 140%;
  }
  100% {
    left: 140%;
  }
}

/* Book An Appointment CTA styles */
.btn-primary-cta {
  background-color: var(--primary);
  color: var(--white) !important;
  border: 1px solid var(--primary);
  border-radius: 20px;
  padding: 0.5rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none !important;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary-cta:hover {
  background-color: transparent;
  color: var(--primary) !important;
  border-color: var(--primary);
}

.header-cta-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* Scoped to the header CTA only, so the in-page "Book An Appointment" buttons
   keep their full size. Just above the 1200px hamburger cutover the nav links
   and both logos are already at their floor, so the button is the last thing
   left that can give. */
.btn-primary-cta.header-appointment-btn {
  font-size: clamp(0.78rem, 0.85vw, 0.95rem);
  padding: 0.5rem clamp(0.7rem, 1.1vw, 1.2rem);
  white-space: nowrap;
}

.header-appointment-btn-mobile {
  background-color: var(--primary);
  color: var(--white) !important;
  border: 1px solid var(--primary);
  font-weight: 500;
  text-decoration: none !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.header-appointment-btn-mobile:hover {
  background-color: transparent;
  color: var(--primary) !important;
}

@media (max-width: 991.98px) {
  .btn-primary-cta.header-appointment-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 15px;
  }
}

/* Mobile CTA bar motion — keyframes live at top level so the media-query
   rules above can share them. */
@-webkit-keyframes cta-bar-rise {
  from { -webkit-transform: translateY(100%); transform: translateY(100%); }
  to { -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes cta-bar-rise {
  from { -webkit-transform: translateY(100%); transform: translateY(100%); }
  to { -webkit-transform: translateY(0); transform: translateY(0); }
}

  90% { -webkit-transform: scale(1.06); transform: scale(1.06); }
}

  90% { -webkit-transform: scale(1.06); transform: scale(1.06); }
}

  90% { -webkit-transform: translateY(-1px); transform: translateY(-1px); }
}

  90% { -webkit-transform: translateY(-1px); transform: translateY(-1px); }
}

/* Idle motion is decoration; the bar must still be usable without it. */
@media (prefers-reduced-motion: reduce) {
  .mobile-fixed-button,
  .mobile-fixed-content .btn-fixed,
  .mobile-fixed-content .btn-fixed::after {
    -webkit-animation: none !important;
    animation: none !important;
  }
}


/* ----- Shared CTA motion -----
   The sticky desktop Enquire / Download buttons have always carried
   pulse-effect: a slow breath with a ring pushing out of the edge. Every other
   call to action now runs the same loop, so the page has one CTA behaviour
   rather than a different idle per button.
   Deliberately excluded: .btn-fixed, the mobile bottom bar. Its two halves are
   flush full-bleed panels, and scaling them to 0.95 opens a gap down the
   middle and along the screen edge — they keep the shine sweep and icon
   motion added for that bar instead. */
.btn-primary-cta,
.btn-check,
.btn-directions,
.btn-submit,
.btn-submit2 {
  -webkit-animation: pulse-effect 2s infinite;
  animation: pulse-effect 2s infinite;
}

/* The ring is drawn with box-shadow, so anything that clips its own overflow
   would swallow it. */
.btn-check,
.btn-directions {
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary-cta,
  .btn-check,
  .btn-directions,
  .btn-submit,
  .btn-submit2,
  .animated-brochure-btn,
  .btn-enquire,
  .btn-download {
    -webkit-animation: none !important;
    animation: none !important;
  }
}


/* ----- Right-edge sticky enquiry tab -----
   Modelled on the reference landing page's "Get In Touch" tab: a vertical
   pill docked to the right edge, rounded on the side that faces the page.
   The reference rotates the button 90deg; writing-mode does the same job
   without a transform, which matters here because the shared CTA pulse
   animates transform and would otherwise cancel the centring. So the dock is
   fixed and centred, and the button inside it is free to animate. */
.side-cta-dock {
  position: fixed;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1000;
}

.side-enquire-tab {
  border: 0;
  cursor: pointer;
  padding: 1.25rem 0.65rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--white);
  background: linear-gradient(to bottom, var(--primary-bright), var(--primary));
  border-radius: 0;
  -webkit-box-shadow: -2px 0 12px rgba(0, 0, 0, 0.22);
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.22);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-animation: pulse-effect 2s infinite;
  animation: pulse-effect 2s infinite;
  -webkit-transition: padding-right 0.3s ease;
  transition: padding-right 0.3s ease;
}

.side-enquire-tab:hover {
  padding-right: 0.95rem;
}

/* Label faces left: vertical-rl alone reads top-to-bottom, so it is turned a
   further 180deg to run bottom-to-top. The rotation sits on this span rather
   than the button because the button's pulse animates transform and would
   overwrite it. */
.side-enquire-label {
  display: block;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* Smaller screens: shorter tab so it cannot run into the header or the
   bottom CTA bar on short viewports. */
@media only screen and (max-width: 767px) {
  .side-enquire-tab {
    padding: 1rem 0.5rem;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-enquire-tab {
    -webkit-animation: none !important;
    animation: none !important;
  }
}