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

/* Type: a geometric-sans pairing matching the reference landing page.
   Outfit carries the headings, Jost the body copy. Both are SIL Open Font
   License, so they can be self-hosted later if the CDN is undesirable.
   (Replaces Cormorant Garamond + Mulish + the local Radikal .otf.) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300..700;1,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 JR One East brochure.
     bone = page background, charcoal = dark panels, terracotta = the accent
     badge, blush = the callout cards. */
  --bone: #F2EDE8;
  --blush: #EADCD9;
  --taupe: #766E6B;
  --surface-dark: #4C4844;
  --heading: #3A3633;

  /* Accent: drives buttons, badges, counters, active states.
     Taken from the JR logo hexagon, which is a gradient from #ED1C24 down to
     #BE1C21. #C81C22 is one of its own tones and is the brightest that still
     clears AA contrast on both the bone background and white. */
  --primary: #C81C22;
  --primary-bright: #ED1C24;

  /* --font-heading: section titles and display type.
     --font-body: everything else. */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Jost', sans-serif;
  /* Highlight that sweeps across headings as they reveal. */
  --color: #C81C22;
  --color-3: transparent;
  --radius-full: 100px;
}

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

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;
}

@-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 JR Housing mark is square and the One East
   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);
  }
}

.modal-logo {
  width: 200px;
  max-width: 100%;
}

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

.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;
}

.carousel-item img {
  animation: zoomEffect 15s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes zoomEffect {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.07);
  }

  100% {
    transform: scale(1);
  }
}

.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*********** */

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

.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;
}

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

.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;
}

/* ************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: #7A5B27;
  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;
}

.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;
}

.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. 2.svg and 5.svg
   are the original exports, kept because they already depict a pool and a
   track; the rest are drawn to match in weight and outline style. */
.amenity-icon .glyph-gazebo { --glyph: url("../assets/images/amenities/gazebo.svg"); }
.amenity-icon .glyph-cycling { --glyph: url("../assets/images/amenities/cycling-track.svg"); }
.amenity-icon .glyph-senior-park { --glyph: url("../assets/images/amenities/senior-park.svg"); }
.amenity-icon .glyph-pool { --glyph: url("../assets/images/amenities/2.svg"); }
.amenity-icon .glyph-yoga { --glyph: url("../assets/images/amenities/yoga.svg"); }
.amenity-icon .glyph-gym { --glyph: url("../assets/images/amenities/gym.svg"); }
.amenity-icon .glyph-badminton { --glyph: url("../assets/images/amenities/badminton.svg"); }
.amenity-icon .glyph-billiards { --glyph: url("../assets/images/amenities/billiards.svg"); }
.amenity-icon .glyph-tennis { --glyph: url("../assets/images/amenities/tennis.svg"); }
.amenity-icon .glyph-banquet { --glyph: url("../assets/images/amenities/banquet.svg"); }
.amenity-icon .glyph-indoor-games { --glyph: url("../assets/images/amenities/indoor-games.svg"); }
.amenity-icon .glyph-jogging { --glyph: url("../assets/images/amenities/5.svg"); }
.amenity-icon .glyph-amphitheater { --glyph: url("../assets/images/amenities/amphitheater.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;
}

.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;
}

.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 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);
}

.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;
}

.about-img img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  height: 100%;
}

.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;
}

.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;
}

.text-footer a {
  color: #242424;
}

.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: 100%;
  border-radius: 0px;
  object-fit: cover;
}

.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;
}

section.secton-thankyou {
  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: 0rem 1.5rem;
  margin: 8rem auto auto auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-height: 100%;
}

/* Matches the site's section headings: the Outfit 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;
  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);
}

.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); */
}


.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 "one east" mark hard left, square JR Housing mark
     dead centre, hamburger hard right. The centre mark is taken out of flow and
     pinned to 50% so it is centred on the viewport, not merely spaced evenly
     between the other two (the left mark is ~4x wider than it is tall, so
     space-between would push the centre mark visibly right of centre). */
  .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-container .navlogo-center {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .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;
  }

  .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;
  }

  .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 body reserves its height at the bottom. */

  body {
    padding-bottom: 54px;
  }

  .mobile-fixed-button {
    display: block;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding: 0;
    -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;
  }

  .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.95rem 0.5rem;
    color: var(--white);
  }

  .btn-enquire-fixed {
    background: var(--primary);
    border-right: 1px solid rgba(255, 255, 255, 0.35);
  }

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

  /* mobile fixed bottom CTA bar */


}

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

  /* 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;
  }

  /* Back into the flow below 576px. Pinning this mark to 50% is only safe
     while the row has slack: the "one east" mark beside it is ~4x wider than
     it is tall, so on a narrow phone its tail reaches past the middle of the
     viewport and the two logos printed on top of each other. space-between
     puts a real gap between them instead — slightly off dead-centre, but
     legible, which the overlap was not. */
  .navbar-container .navlogo-center {
    position: static;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  .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;
  -webkit-animation: pulse-glow 2.5s infinite ease-in-out;
  animation: pulse-glow 2.5s infinite ease-in-out;
}

.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;
  }
}