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

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

.cormorant-garamond {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.mulish {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: radikal;
  src: url("../assets/fonts/Nootype-RadikalLight.otf");
}

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


/* ============================================================
   Brand palette — black / gold / white only.
   Sampled from the Progressive ERA brochure artwork
   (assets/images/banner/Web.jpeg):
     charcoal sky   #1e1e1e / #2f2f2f / #3d3d3d
     signature gold #c6a268  (lit apartment windows)
     platinum panel #e5e5e5 -> #eeeef0  (brushed silver plate)
     window glow    #f2deb8  (warm highlight)
   The greys are neutral steps between the black and the white,
   not a fourth hue. No red anywhere in the scheme.
   ============================================================ */
:root {
  --white: #FFFFFF;
  --black: #000000;

  /* charcoal — the dominant brochure tone, used for type + large surfaces */
  --primary: #1C1C1C;
  --ink: #1C1C1C;
  --ink-2: #2F2F2F;
  --ink-3: #3D3D3D;
  --jet: #0C0C0C;

  /* signature gold — lifted from the lit windows; sharp, sparing accents only */
  --accent: #C6A268;
  --accent-dark: #A6813F;
  --accent-soft: rgba(198, 162, 104, 0.14);

  /* brushed platinum plate from the brochure's headline panel */
  --platinum: #E8E9EB;
  --platinum-soft: #F5F6F7;
  --platinum-tint: #FAFAFB;

  /* warm glow of the lit windows — subtle luxury highlight */
  --amber: #E2C48D;
  --amber-soft: #F2DEB8;

  --muted: #6B6B6F;
  --hairline: rgba(28, 28, 28, 0.12);
  --light: #FFFFFF;

  --mulish: 'Mulish', sans-serif;
  --radikal: 'radikal';
  --font-cormorant: 'Cormorant Garamond', serif;
  --color: #C6A268;
  --color-3: transparent;
  --radius-full: 100px;

  --shadow-sm: 0 2px 10px rgba(11, 12, 14, 0.06);
  --shadow-md: 0 12px 30px rgba(11, 12, 14, 0.10);
  --shadow-lg: 0 24px 60px rgba(11, 12, 14, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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(--mulish);
}

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

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: 100vw;
  left: 50%;
  background: var(--white);
  transform: translate(-50%, 0%);
  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: 100vw;
  /* background-color: var(--light); */
}

nav {
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  padding: 0.85rem 4rem;
}

nav.dropped {
  background-color: var(--primary);
}

.navbar-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -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: 1rem;
  align-items: center;
}

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

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

.navbar-container .navlogo .logo {
  -webkit-transition: all 0.45s ease;
  -o-transition: all 0.45s ease;
  transition: all 0.45s ease;
  width: 150px;
  -o-object-fit: cover;
  object-fit: cover;
}

nav.dropped .navbar-container .navlogo .logo {
  width: 100px;
  -webkit-transition: all 0.45s ease;
  -o-transition: all 0.45s ease;
  transition: all 0.45s ease;
  -o-object-fit: cover;
  object-fit: cover;
}

.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 {
  width: 230px;
  -o-object-fit: contain;
  object-fit: contain;
}

.navbar-container .navbar-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 3rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* .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;
  line-height: normal;
  font-style: normal;
  font-family: var(--radikal);
  font-weight: 400;
  text-wrap: nowrap;
  text-transform: capitalize;
}

.offcanvas.offcanvas-start {
  background: var(--white);
}

.offcanvas-body {
  padding: 2rem 1.5rem;
  background-color: var(--white);
  height: 100%;
  overflow-y: auto;
}

.offcanvas-navs {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

.offcanvas-link {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--primary);
  font-family: var(--font-cormorant);
  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 rgba(198, 162, 104, 0.55);
    box-shadow: 0 0 0 0 rgba(198, 162, 104, 0.55);
  }

  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 rgba(198, 162, 104, 0.55);
    box-shadow: 0 0 0 0 rgba(198, 162, 104, 0.55);
  }

  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: contain;
  object-fit: contain;
}

.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(--muted) !important;
}

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

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

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

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


/* Target placeholders inside the modal form only */
.modal-form ::placeholder {
  color: var(--muted) !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;
}

.sub-title {
  color: var(--primary);
  font-size: 3.5rem;
  text-transform: capitalize;
  font-family: var(--font-cormorant);
  font-weight: 500;
  margin-bottom: 0.8rem;
  line-height: 1.2;
}

.sub-title.aos-animate .char {
  background: linear-gradient(-45deg,
      var(--primary) 45%,
      var(--primary) 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;
  text-transform: capitalize;
}

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

.highlight-carousel .owl-item .item {
  padding: 20px;
}

.highlight-carousel .box {
  background: linear-gradient(160deg, var(--white) 0%, var(--platinum-soft) 100%);
  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;
}

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


.highlight-carousel .icon {
  background: linear-gradient(145deg, var(--ink-3) 0%, var(--ink) 100%);
  width: 85px;
  height: 85px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.highlight-carousel .title {
  font-size: 1.125rem;
  line-height: 1.6rem;
  color: var(--primary);
  font-weight: 600;
  padding-top: 2rem;
  margin-bottom: 0.5rem;
  text-align: start;
}

.highlight-carousel .text {
  font-size: 1rem;
  line-height: 1.6rem;
  color: var(--muted);
  font-weight: 400;
  text-align: start;
  margin-bottom: 0;
}

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

.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: 1.2rem 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 80%);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.layout-content .bhk {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.456em !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;
}

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

/* blinking CTA - Floor Plan */
.blink-cta {
  animation: cta-blink 1.4s ease-in-out infinite;
}

.blink-cta:hover {
  animation: none;
}

@keyframes cta-blink {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(198, 162, 104, 0.6);
  }

  50% {
    opacity: 0.55;
    box-shadow: 0 0 0 8px rgba(198, 162, 104, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blink-cta {
    animation: none;
  }
}

.config-cta {
  width: 100%;
}

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

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

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

.amenity-icon img {
  width: 67px;
  height: 67px;
}

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

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

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


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

.loc-back {
  background: var(--platinum-soft);
  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-content .acc-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
}

.accordion-content .acc-time {
  min-width: 72px;
  text-align: right;
}

@media (max-width: 575.98px) {
  .accordion-content .acc-meta {
    gap: 0.4rem;
  }

  .accordion-content .acc-time {
    min-width: 62px;
  }
}

.loc-text {
  padding-bottom: 1.5rem;
}

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

.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: 50%;
  transform: translateX(-50%);
}

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

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


/* form */

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

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

.adjust {
  display: flex;
  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(--platinum-soft);
  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: var(--ink);
  font-size: 20px;
  text-align: center;
  margin-top: 30px;
}

.form-calltxt a {
  color: var(--ink) !important;
  text-decoration: none !important;
  font-size: 1.8rem;
  font-weight: 600;
}


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

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

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

.footer-logo {
  padding: 1rem 0rem;
  width: 300px;
  margin: auto;
  height: auto;
  max-width: 100%;
}

.footer-logo img {
  width: 100%;
  height: 100%;
  border-radius: 0px;
  object-fit: contain;
  /* logo ships with black glyphs on transparent; flip to white for the gold footer band */
  filter: brightness(0) invert(1);
}

.footer-contact {
  margin: 0.5rem auto 0;
}

.footer-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: opacity 0.3s ease;
}

.footer-call:hover {
  color: var(--white);
  opacity: 0.75;
}

.footer-call img {
  width: 20px;
  height: 20px;
  /* icon ships dark; flip to white for the gold footer band */
  filter: brightness(0) invert(1);
}

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

section.secton-thankyou .thankyou-title {
  font-weight: 600;
  margin: 0.75rem auto 1.15rem auto !important;
  text-align: center;
  text-wrap: pretty;
  color: var(--light);
  font-size: 3rem;
}

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

.go_txt {
  font-size: 15px;
  color: #000;
  background-color: #fff !important;
  border-radius: 3.125rem;
  border: 1px solid #000;
  width: fit-content;
  padding: 15px 30px;
  margin: 15px auto 0;
}

.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 {
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    padding: 0.65rem 2rem;
  }

  .navbar-container .navbar-links .navbar-link .nav-link {
    font-size: 0.85rem;
  }

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

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

@media only screen and (max-width: 1280px) {
  .navbar-container .navbar-links {
    gap: 2rem;
  }

  .navbar-container .navbar-links .navbar-link .nav-link {
    font-size: 0.8rem;
  }

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

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

}

@media only screen and (max-width: 1200px) {
  .navbar-container .menu {
    display: flex !important;
  }

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

  .navbar-container {
    justify-content: unset;
  }


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

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



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

  .navbar-container {
    justify-content: unset;
  }


  .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: 2.5rem;
  }

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

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

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

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

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

  .copyright2 {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 2.5rem;
    gap: 0.2rem;
  }

  .navbar-container .navlogo {
    gap: 2rem;
  }

  .navbar-container {
    justify-content: space-between;
  }

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

  .mobile-fixed-button {
    display: block;
    position: fixed;
    width: 100%;
    bottom: 2%;
    left: 50%;
    z-index: 999;
    padding: 2rem 1rem 1rem 1rem;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    fill: rgba(255, 255, 255, 0.84);
    -webkit-filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.05));
    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.05));
  }

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



  .mobile-fixed-button::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    z-index: -1;
    left: 50%;
    background: url(../assets/images/icons/toggle.svg) no-repeat center center / cover;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .mobile-fixed-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 85%;
    margin: auto;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
  }

  .btn-middle-content {
    padding: 1rem;
    background-color: transparent;
    position: absolute;
    top: 10px;
    left: 50%;
    border-radius: var(--radius-full);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .btn-middle {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    border: none;
    outline: none;
    background-color: var(--accent);
  }

  .mobile-fixed-content .btn-fixed {
    width: 35%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    top: -7px;
    font-size: 1rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1rem 0.85rem;
  }

  .btn-middle img {
    width: 50px;
    height: 50px;
    -o-object-fit: cover;
    object-fit: cover;
  }

  /* mobile toggle bar */


}

@media only screen and (max-width: 576px) {
  .high-text {
    width: unset;
  }

  .config-text {
    width: unset;
  }

  /* mobile toggle bar */

  .btn-middle {
    width: 70px;
    height: 70px;
  }

  .mobile-fixed-content .btn-fixed {
    /* width: auto; */
    top: -7px;
    font-size: 0.8rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0.45rem 0.55rem;
    width: 36%;

  }

  .btn-middle-content {
    top: 16px;
  }

  /* mobile toggle bar */
}

@media only screen and (max-width: 450px) {
  .btn-middle {
    width: 55px;
    height: 55px;
  }

  .mobile-fixed-content .btn-fixed {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    top: -7px;
    font-size: 0.725rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0.4rem 0.5rem;
  }

  .mobile-fixed-content {
    width: 88%;
  }

  .btn-middle img {
    width: 32px;
    height: 32px;
    -o-object-fit: cover;
    object-fit: cover;
  }

  .btn-middle-content {
    top: 16px;
  }

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

  .navbar-container .navlogo .logo {
    width: 120px;
  }
}

@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 {
    width: 90px;
  }
}

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

/* ==================================================================
   PROGRESSIVE ERA — BROCHURE THEME LAYER
   Charcoal + signature gold + brushed platinum, lifted from the
   project brochure artwork. Appended last so it settles on top of
   the base sheet; responsive tweaks live at the bottom of this block.
   ================================================================== */

/* ---------- 1. Global ---------- */

::selection {
  background: var(--accent);
  color: var(--white);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--ink-3);
  -webkit-box-shadow: none;
  box-shadow: none;
}

body::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

/* fixed header would otherwise clip anchored sections */
section[id] {
  scroll-margin-top: 96px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.other-description {
  color: #3A3A3D;
  line-height: 1.95rem;
}

/* ---------- 2. Header / navigation ---------- */

header {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}

header.dropped {
  background: rgba(20, 20, 20, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  -webkit-box-shadow: 0 10px 30px rgba(11, 12, 14, 0.28);
  box-shadow: 0 10px 30px rgba(11, 12, 14, 0.28);
}

/* thin brand rule riding the bottom edge of the scrolled bar */
header.dropped::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
      var(--accent) 0%,
      var(--accent) 22%,
      rgba(198, 162, 104, 0) 60%);
}

header.dropped .navbar-container .navlogo .logo,
header.dropped .navbar-container .navlogo img {
  /* logos ship as black glyphs on transparent — flip them for the dark bar */
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

header.dropped .navbar-container .navbar-links .navbar-link .nav-link {
  color: rgba(255, 255, 255, 0.86);
}

.navbar-container .navbar-links .navbar-link {
  position: relative;
}

.navbar-container .navbar-links .navbar-link .nav-link {
  position: relative;
  padding-bottom: 4px;
  letter-spacing: 0.02em;
  -webkit-transition: color 0.35s var(--ease);
  -o-transition: color 0.35s var(--ease);
  transition: color 0.35s var(--ease);
}

.navbar-container .navbar-links .navbar-link .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transition: -webkit-transform 0.4s var(--ease);
  transition: transform 0.4s var(--ease);
}

.navbar-container .navbar-links .navbar-link .nav-link:hover::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
}

.navbar-container .navbar-links .navbar-link .nav-link:hover,
header.dropped .navbar-container .navbar-links .navbar-link .nav-link:hover {
  color: var(--accent);
}

/* off-canvas drawer */
.offcanvas-body {
  background: var(--white);
}

.offcanvas-link {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.offcanvas-link::after {
  background-color: var(--hairline);
  height: 1px;
  -webkit-transition: background-color 0.35s var(--ease);
  -o-transition: background-color 0.35s var(--ease);
  transition: background-color 0.35s var(--ease);
}

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

.offcanvas-link:hover::after {
  background-color: var(--accent);
}

/* ---------- 3. Hero banner + fact strip ---------- */

.main-banner {
  position: relative;
  background: var(--ink);
}

.hero-facts {
  position: relative;
  z-index: 3;
  background: linear-gradient(90deg, var(--jet) 0%, var(--ink-2) 50%, var(--jet) 100%);
  border-top: 2px solid var(--accent);
}

/* soft landing from the artwork into the strip — hangs off the strip itself,
   so nothing is painted over the banner when the strip isn't in the markup */
.hero-facts::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(11, 12, 14, 0.55), rgba(11, 12, 14, 0));
}

.hero-facts-inner {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 1.05rem 0;
}

.hero-fact {
  position: relative;
  text-align: center;
  padding: 0.15rem 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--radikal), var(--mulish);
  font-size: 0.82rem;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* gold tick divider between facts, echoing the brochure's rule bars */
.hero-fact+.hero-fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
  background: var(--accent);
}

.hero-fact strong {
  color: var(--white);
  font-weight: 700;
}

/* ---------- 4. Section headings ---------- */

.sub-title {
  color: var(--ink);
  letter-spacing: -0.015em;
  position: relative;
}

/* short gold rule under every section title */
.sub-title::after {
  content: "";
  display: block;
  width: 68px;
  height: 3px;
  margin-top: 1rem;
  border-radius: 100px;
  background: var(--accent);
}

.head-text .sub-title::after,
.text-center .sub-title::after {
  margin-left: auto;
  margin-right: auto;
}

/* The base sheet reveals headings via a background-clip wipe whose
   gradient rests on its `transparent` stop — the finished heading ends up
   ghosted. Swap in a per-character reveal that settles fully opaque. */
.sub-title.aos-animate .char,
.sub-title .char {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}

.sub-title.aos-animate .char {
  -webkit-animation: era-char-in 0.7s var(--ease) both;
  animation: era-char-in 0.7s var(--ease) both;
  -webkit-animation-delay: calc(20ms + (26ms * var(--char-index)));
  animation-delay: calc(20ms + (26ms * var(--char-index)));
}

@-webkit-keyframes era-char-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0.32em);
    transform: translateY(0.32em);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes era-char-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0.32em);
    transform: translateY(0.32em);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sub-title.aos-animate .char {
    -webkit-animation: none;
    animation: none;
  }
}

.high-text,
.config-text,
.ame-text {
  color: var(--muted);
}

/* ---------- 5. Overview ---------- */

.overview-img {
  overflow: hidden;
  border-radius: 0.75rem;
  -webkit-box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-md);
}

.overview-img img {
  -webkit-transition: -webkit-transform 1.2s var(--ease);
  transition: transform 1.2s var(--ease);
}

.overview-img:hover img {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

/* ---------- 6. Project highlights ---------- */

.project-highlight {
  background: var(--white);
}

.highlight-carousel .box {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 0.9rem;
  -webkit-box-shadow: var(--shadow-sm);
  box-shadow: var(--shadow-sm);
  -webkit-transition: -webkit-transform 0.45s var(--ease), -webkit-box-shadow 0.45s var(--ease);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}

/* gold cap wipes in on hover */
.highlight-carousel .box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.5s var(--ease);
  transition: transform 0.5s var(--ease);
}

.highlight-carousel .box:hover::before {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

.highlight-carousel .box:hover {
  -webkit-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  transform: translateY(-8px);
  border-color: rgba(198, 162, 104, 0.28);
  -webkit-box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-md);
}

.highlight-carousel .icon {
  position: relative;
  -webkit-box-shadow: 0 0 0 0 rgba(198, 162, 104, 0);
  box-shadow: 0 0 0 0 rgba(198, 162, 104, 0);
  -webkit-transition: -webkit-box-shadow 0.5s var(--ease);
  transition: box-shadow 0.5s var(--ease);
}

.highlight-carousel .box:hover .icon {
  -webkit-box-shadow: 0 0 0 6px var(--accent-soft);
  box-shadow: 0 0 0 6px var(--accent-soft);
}

.highlight-carousel .title {
  color: var(--ink);
  letter-spacing: -0.005em;
  padding-top: 1.5rem;
}

/* ---------- 7. Configuration ---------- */

.configuration {
  background: var(--platinum-soft);
}

.layout-box {
  border-radius: 0.9rem;
  border: 1px solid var(--hairline);
  -webkit-box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-md);
  -webkit-transition: -webkit-box-shadow 0.45s var(--ease);
  transition: box-shadow 0.45s var(--ease);
}

.layout-box:hover {
  -webkit-box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg);
}

.layout-box img {
  -webkit-transition: -webkit-transform 1.1s var(--ease);
  transition: transform 1.1s var(--ease);
}

.layout-box:hover img {
  -webkit-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}

.layout-content {
  background: linear-gradient(to top, rgba(11, 12, 14, 0.88), rgba(11, 12, 14, 0) 85%);
  padding: 2.5rem 1.5rem 1.35rem;
}

.layout-content .bhk {
  letter-spacing: 0.01em;
}

.layout-content .area {
  color: rgba(255, 255, 255, 0.78);
}

.layout-content .btn-check::before {
  background-color: var(--accent);
}

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

/* ---------- 8. Amenities ---------- */

.amenity-icon {
  border: 1px solid var(--hairline);
  -webkit-box-shadow: var(--shadow-sm);
  box-shadow: var(--shadow-sm);
  -webkit-transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), -webkit-transform 0.45s var(--ease), -webkit-box-shadow 0.45s var(--ease);
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.amenity-icon img {
  -webkit-transition: -webkit-filter 0.45s var(--ease);
  transition: filter 0.45s var(--ease);
}

.amenity-item:hover .amenity-icon {
  background: var(--ink);
  border-color: var(--accent);
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-box-shadow: 0 14px 32px rgba(11, 12, 14, 0.18), 0 0 0 5px var(--accent-soft);
  box-shadow: 0 14px 32px rgba(11, 12, 14, 0.18), 0 0 0 5px var(--accent-soft);
}

.amenity-item:hover .amenity-icon img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.amenity-label {
  color: var(--ink);
  -webkit-transition: color 0.35s var(--ease);
  -o-transition: color 0.35s var(--ease);
  transition: color 0.35s var(--ease);
}

.amenity-item:hover .amenity-label {
  color: var(--accent);
}

/* ---------- 9. Gallery ---------- */

.gallery {
  background: var(--platinum-soft);
}

.nav-tabs .nav-link {
  color: var(--muted);
  letter-spacing: 0.02em;
  -webkit-transition: color 0.35s var(--ease);
  -o-transition: color 0.35s var(--ease);
  transition: color 0.35s var(--ease);
}

.nav-tabs .nav-link:hover {
  color: var(--ink);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--ink) !important;
  font-weight: 600;
}

.nav-tabs .nav-link.active::after {
  background-color: var(--accent) !important;
  height: 3px;
  border-radius: 100px;
}

.gal_image {
  overflow: hidden;
  border-radius: 0.5rem;
}

.gal_image img {
  -webkit-transition: -webkit-transform 1.1s var(--ease);
  transition: transform 1.1s var(--ease);
}

.gal_image:hover img {
  -webkit-transform: scale(1.06);
  -ms-transform: scale(1.06);
  transform: scale(1.06);
}

.gallery .overtext {
  background-color: rgba(11, 12, 14, 0.82);
  border-left: 3px solid var(--accent);
  padding: 6px 10px;
  letter-spacing: 0.08em;
}

/* ---------- 10. Location ---------- */

.loc-back {
  background: var(--platinum-soft);
  border: 1px solid var(--hairline);
  -webkit-box-shadow: var(--shadow-sm);
  box-shadow: var(--shadow-sm);
}

.accordion-button {
  border-bottom: 1px solid var(--hairline) !important;
  -webkit-transition: color 0.35s var(--ease);
  -o-transition: color 0.35s var(--ease);
  transition: color 0.35s var(--ease);
}

.accordion-button:hover,
.accordion-button:not(.collapsed) {
  color: var(--accent) !important;
}

.accordion-body .distance,
.accordion-content .acc-time {
  color: var(--muted);
}

.loc-img {
  overflow: hidden;
  border-radius: 0.75rem;
  -webkit-box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-md);
}

/* ---------- 11. About + counters ---------- */

.aboutus {
  background: var(--platinum-soft);
}

.about-img {
  overflow: hidden;
  border-radius: 0.75rem;
  -webkit-box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-md);
}

.about-img img {
  -webkit-transition: -webkit-transform 1.2s var(--ease);
  transition: transform 1.2s var(--ease);
}

.about-img:hover img {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

.counter-box .top-line {
  height: 3px;
  width: 56px;
  border-radius: 100px;
  background-color: var(--accent);
}

.counter-number {
  color: var(--ink);
  font-family: var(--font-cormorant);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.counter-label {
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ---------- 12. Contact — the dark brochure panel ---------- */

.register-interest {
  background: linear-gradient(160deg, var(--ink-2) 0%, var(--jet) 100%);
  position: relative;
  overflow: hidden;
}

/* faint warm wash, borrowed from the lit windows in the artwork */
.register-interest::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 55%;
  height: 120%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(226, 196, 141, 0.10) 0%, rgba(226, 196, 141, 0) 65%);
}

.register-interest .custom-container {
  position: relative;
  z-index: 1;
}

/* chars inherit colour from the heading, so this carries the whole title */
.register-interest .sub-title {
  color: var(--white);
}

.register-interest .about-img {
  -webkit-box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg);
}

.register-interest .new-class {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  -webkit-transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease), -webkit-box-shadow 0.35s var(--ease);
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.register-interest .new-class:focus {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--accent);
  -webkit-box-shadow: 0 0 0 4px var(--accent-soft);
  box-shadow: 0 0 0 4px var(--accent-soft);
  color: var(--white);
}

.register-interest .new-class::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

.register-interest .new-class::-moz-placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

.register-interest .new-class:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

.register-interest .new-class::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

.register-interest .invalid-feedback {
  color: var(--amber);
}

/* ---------- 13. Buttons ---------- */

.btn-primary,
.btn-submit2 {
  border-radius: 100px;
  letter-spacing: 0.03em;
  font-weight: 600;
  -webkit-box-shadow: 0 8px 20px rgba(198, 162, 104, 0.22);
  box-shadow: 0 8px 20px rgba(198, 162, 104, 0.22);
}

.btn-primary::before,
.btn-submit2::before {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-dark) 100%);
}

.btn-primary:hover,
.btn-submit2:hover {
  color: var(--accent);
  border: 1px solid var(--accent);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.register-interest .btn-submit2:hover {
  color: var(--white);
  border-color: var(--accent);
}

.btn-primary .btn-primary-txt {
  position: relative;
  z-index: 2;
}

.layout-content .btn-check {
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* floating desktop CTAs — gold to enquire, charcoal to download */
.btn-enquire {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-dark) 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  -webkit-box-shadow: 0 12px 28px rgba(198, 162, 104, 0.32);
  box-shadow: 0 12px 28px rgba(198, 162, 104, 0.32);
}

.download-btn {
  background: linear-gradient(120deg, var(--ink-3) 0%, var(--ink) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
  -webkit-animation: none;
  animation: none;
  -webkit-box-shadow: 0 12px 28px rgba(11, 12, 14, 0.30);
  box-shadow: 0 12px 28px rgba(11, 12, 14, 0.30);
}

.btn-enquire:hover,
.download-btn:hover {
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
}

/* modal submit */
.btn-submit {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-dark) 100%);
  border: none;
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: 0.03em;
  -webkit-transition: -webkit-box-shadow 0.35s var(--ease), -webkit-transform 0.35s var(--ease);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}

.btn-submit:hover {
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 10px 24px rgba(198, 162, 104, 0.32);
  box-shadow: 0 10px 24px rgba(198, 162, 104, 0.32);
}

/* ---------- 14. Carousel controls ---------- */

.owl-nav button {
  background: var(--ink) !important;
  border-radius: 50% !important;
  -webkit-box-shadow: var(--shadow-sm);
  box-shadow: var(--shadow-sm);
  -webkit-transition: background-color 0.35s var(--ease), -webkit-transform 0.35s var(--ease);
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.owl-nav button:hover {
  background: var(--accent) !important;
  -webkit-transform: scale(1.08);
  -ms-transform: scale(1.08);
  transform: scale(1.08);
}

.amenities-carousel .owl-dots button.active,
.highlight-carousel .owl-dots button.active {
  background-color: var(--accent) !important;
}

/* ---------- 15. Modal ---------- */

.modal-content {
  border-radius: 12px;
  outline: none;
  overflow: hidden;
  -webkit-box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--accent);
}

.form-control.custom-input {
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  -webkit-transition: border-color 0.35s var(--ease);
  -o-transition: border-color 0.35s var(--ease);
  transition: border-color 0.35s var(--ease);
}

.form-control.custom-input:focus {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.mobile-input-div .country-code,
.modal-form .form-check-label {
  color: var(--muted);
}

/* the base sheet paints this white-on-white; keep it readable */
.form-loader-wrapper {
  background-color: var(--ink);
  border-color: var(--ink);
}

/* ---------- 16. Footer ---------- */

.footer-black {
  background: linear-gradient(180deg, var(--ink) 0%, var(--jet) 100%);
  border-top: 3px solid var(--accent);
}

.text-footer p,
.footer-desc p {
  color: rgba(255, 255, 255, 0.66);
}

.copyright-desc2 {
  color: rgba(255, 255, 255, 0.55);
}

.custom-hr {
  border-color: rgba(255, 255, 255, 0.14);
  opacity: 1;
}

.footer-call {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  padding: 0.55rem 1.4rem;
  -webkit-transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), opacity 0.35s var(--ease);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), opacity 0.35s var(--ease);
}

.footer-call:hover {
  background: var(--accent);
  border-color: var(--accent);
  opacity: 1;
}

.qr-logo {
  background: var(--white);
  padding: 6px;
  border-radius: 8px;
}

.readmore-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-weight: 600;
  padding: 0;
}

/* ---------- 17. Mobile action bar ---------- */

.btn-fixed.primary-pink {
  background: linear-gradient(120deg, var(--ink-3) 0%, var(--ink) 100%);
  border-radius: 100px;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.btn-middle {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
  -webkit-box-shadow: 0 10px 26px rgba(198, 162, 104, 0.38);
  box-shadow: 0 10px 26px rgba(198, 162, 104, 0.38);
}

/* ---------- 18. Thank-you page ---------- */

section.secton-thankyou {
  background: linear-gradient(160deg, var(--ink-2) 0%, var(--jet) 100%);
  border-radius: 1rem;
  width: 88%;
  max-width: 900px;
  margin: 9rem auto 3rem auto;
  -webkit-box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg);
  border-top: 3px solid var(--accent);
}

section.secton-thankyou .thankyou-title {
  color: var(--white);
  font-family: var(--font-cormorant);
}

section.secton-thankyou .thankyou-subtitle {
  color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}

.go_txt {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
  color: var(--white);
  border: none;
  font-weight: 600;
  letter-spacing: 0.03em;
}

nav.thank-you {
  background-color: transparent;
}

/* ---------- 19. Responsive ---------- */

@media only screen and (max-width: 991px) {
  section[id] {
    scroll-margin-top: 80px;
  }

  /* two columns below desktop; the odd fifth fact spans the full row */
  .hero-facts-inner {
    width: 92%;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem 0;
    padding: 0.95rem 0;
  }

  .hero-fact {
    font-size: 0.74rem;
    letter-spacing: 0.07em;
    padding: 0.3rem 0.5rem;
  }

  /* wrapping rows break the +sibling divider logic — draw one per column */
  .hero-fact+.hero-fact::before {
    display: none;
  }

  .hero-fact:nth-child(even)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 2px;
    height: 16px;
    background: var(--accent);
  }

  .hero-fact:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media only screen and (max-width: 767px) {
  .hero-fact {
    font-size: 0.68rem;
  }

  .sub-title::after {
    width: 52px;
    height: 2px;
    margin-top: 0.75rem;
  }

  section.secton-thankyou {
    width: 92%;
    margin: 7rem auto 2rem auto;
    height: auto;
    padding: 2.5rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .overview-img img,
  .about-img img,
  .layout-box img,
  .gal_image img,
  .highlight-carousel .box,
  .amenity-icon {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }

  .btn-enquire,
  .download-btn {
    -webkit-animation: none;
    animation: none;
  }
}


/* ==================================================================
   SECTION UPDATES — responsive map embed, amenities grid, 360 view
   ================================================================== */

/* ---------- Location: Google Maps embed ---------- */

.loc-img.loc-map {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--hairline);
  -webkit-box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-md);
  /* keeps the embed proportional instead of a fixed 450px box */
  aspect-ratio: 4 / 3;
  min-height: 380px;
  background: var(--platinum-soft);
}

.loc-img.loc-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Amenities: even grid at every breakpoint ---------- */

/* Flex rather than grid: with 7 items the final row holds 3, and
   justify-content:center balances it automatically at any column count. */
/* Amenities Carousel (Mobile) */
.amenities-carousel {
  margin-top: 1rem;
}
.amenities-carousel .amenity-item {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.amenities-carousel .amenity-label {
  margin-top: 0.85rem;
  text-wrap: balance;
  line-height: 1.45;
}

.amenities-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 2.5rem 1.5rem;
  width: 100%;
  max-width: 1100px;
  margin: 1rem auto 0;
}

.amenities-grid .amenity-item {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: calc((100% - 3 * 1.5rem) / 4);
  /* capped just under the 4-up width so a 5th can never squeeze onto a row */
  max-width: 240px;
  padding: 0;
  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;
}

.amenities-grid .amenity-label {
  margin-top: 0.85rem;
  text-wrap: balance;
  line-height: 1.45;
}

/* ---------- 360 view ---------- */

.tour-360 {
  background: var(--platinum-soft);
  position: relative;
}

.tour-text {
  width: 72%;
  margin: auto;
  color: var(--muted);
  text-wrap: pretty;
}

.tour-frame {
  position: relative;
  margin: 2.5rem auto 0;
  max-width: 1100px;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--ink);
  -webkit-box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 7;
}

.tour-frame iframe,
.tour-frame .tour-poster {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  -o-object-fit: cover;
  object-fit: cover;
}

/* scrim so the CTA stays legible over any poster */
.tour-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 12, 14, 0.15) 0%, rgba(11, 12, 14, 0.62) 100%);
}

.btn-tour {
  position: absolute;
  left: 50%;
  bottom: 2.25rem;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 1.6rem 0.55rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
  background: rgba(11, 12, 14, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  -webkit-transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), -webkit-transform 0.4s var(--ease);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.btn-tour:hover {
  background: rgba(11, 12, 14, 0.75);
  border-color: var(--accent);
  -webkit-transform: translateX(-50%) translateY(-3px);
  -ms-transform: translateX(-50%) translateY(-3px);
  transform: translateX(-50%) translateY(-3px);
}

.tour-ring {
  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;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  -webkit-box-shadow: 0 0 0 0 rgba(198, 162, 104, 0.55);
  box-shadow: 0 0 0 0 rgba(198, 162, 104, 0.55);
  -webkit-animation: pulse-effect 2.4s infinite;
  animation: pulse-effect 2.4s infinite;
}

.tour-cta {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tour-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1100px;
  margin: 2.25rem auto 0;
  border-top: 1px solid var(--hairline);
}

.tour-spec {
  position: relative;
  text-align: center;
  padding: 1.5rem 1rem 0;
}

.tour-spec+.tour-spec::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.6rem;
  width: 1px;
  height: 46px;
  background: var(--hairline);
}

.tour-spec .spec-value {
  display: block;
  font-family: var(--font-cormorant);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.tour-spec .spec-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* gold tick under each spec, echoing the brochure rules */
.tour-spec .spec-value::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin: 0.55rem auto 0;
  border-radius: 100px;
  background: var(--accent);
}

@media only screen and (max-width: 991px) {
  .amenities-grid {
    gap: 2rem 1rem;
  }

  .amenities-grid .amenity-item {
    width: calc((100% - 2 * 1rem) / 3);
  }

  .tour-text {
    width: 90%;
  }

  .tour-frame {
    aspect-ratio: 16 / 9;
  }

  .tour-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.5rem;
  }

  /* dividers follow the 2-column rhythm */
  .tour-spec+.tour-spec::before {
    display: none;
  }

  .tour-spec:nth-child(even)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.6rem;
    width: 1px;
    height: 46px;
    background: var(--hairline);
  }

  .loc-img.loc-map {
    aspect-ratio: 16 / 10;
    min-height: 320px;
  }
}

@media only screen and (max-width: 767px) {
  .amenities-grid {
    gap: 1.75rem 0.75rem;
  }

  .amenities-grid .amenity-item {
    width: calc((100% - 0.75rem) / 2);
  }

  .amenity-icon {
    width: 96px;
    height: 96px;
  }

  .amenity-icon img {
    width: 52px;
    height: 52px;
  }

  .amenity-label {
    font-size: 0.9rem;
  }

  .tour-frame {
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
  }

  .btn-tour {
    bottom: 1.25rem;
    gap: 0.6rem;
    padding: 0.45rem 1.15rem 0.45rem 0.45rem;
  }

  .tour-ring {
    width: 42px;
    height: 42px;
    font-size: 0.72rem;
  }

  .tour-cta {
    font-size: 0.82rem;
    letter-spacing: 0.03em;
  }

  .tour-spec .spec-value {
    font-size: 1.4rem;
  }

  .tour-spec .spec-label {
    font-size: 0.8rem;
  }

  .loc-img.loc-map {
    aspect-ratio: 1 / 1;
    min-height: 300px;
  }
}


/* ==================================================================
   LOCATION SECTION — spacing + balance
   The section carried no vertical padding, so it ran straight into
   About Us, and it used the right-bleeding .overview-container, which
   clipped the map against the viewport edge.
   ================================================================== */

.location {
  background: var(--white);
}

/* clear separation from the 360 section above and About Us below */
.location.sec-pad {
  padding: 5rem 0;
}

.loc-back {
  border-radius: 1.25rem;
  padding: 2.75rem 2.5rem;
}

.loc-back .sub-title::after {
  margin-bottom: 0.25rem;
}

.loc-text {
  padding-bottom: 1.25rem;
  color: var(--muted);
}

.loc-img.loc-map {
  border-radius: 1.25rem;
}

/* accordion sits flush inside the card */
.loc-back .accordion-button {
  padding-left: 0 !important;
  padding-right: 0.25rem;
}

.loc-back .accordion-body {
  padding-left: 0;
  padding-right: 0;
}

@media only screen and (min-width: 992px) {

  /* map tracks the height of the accordion card instead of a fixed ratio */
  .location .loc-img.loc-map {
    height: 100%;
    min-height: 100%;
    aspect-ratio: auto;
  }
}

@media only screen and (max-width: 991px) {
  .location.sec-pad {
    padding: 3.5rem 0;
  }

  .loc-back {
    padding: 2.25rem 1.75rem;
  }
}

@media only screen and (max-width: 767px) {
  .location.sec-pad {
    padding: 3rem 0;
  }

  .loc-back {
    padding: 1.75rem 1.25rem;
    border-radius: 1rem;
  }

  .loc-img.loc-map {
    border-radius: 1rem;
  }
}


/* ==================================================================
   ABOUT US — centred, image-free intro block
   h1 carries the brand, h2 the positioning line; the gold rule sits
   under the pair so the two headings read as one unit.
   ================================================================== */

.about-heading {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.about-heading .about-h1 {
  margin-bottom: 0 !important;
  line-height: 1.15;
}

/* only one rule for the heading pair — it belongs under the h2 */
.about-heading .about-h1::after {
  display: none;
}

.about-heading .about-h2 {
  font-family: var(--font-cormorant);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  letter-spacing: -0.005em;
  margin-top: 0.4rem !important;
  text-wrap: balance;
}

.about-heading .about-h2::after {
  content: "";
  display: block;
  width: 68px;
  height: 3px;
  margin: 1.35rem auto 0;
  border-radius: 100px;
  background: var(--accent);
}

.about-heading .other-description {
  text-align: center;
  text-wrap: pretty;
  margin-top: 1.75rem !important;
}

.about-heading .other-description+.other-description {
  margin-top: 1.15rem !important;
}

@media only screen and (max-width: 1200px) {
  .about-heading .about-h2 {
    font-size: 1.6rem;
  }
}

@media only screen and (max-width: 991px) {
  .about-heading {
    max-width: 760px;
  }

  .about-heading .about-h2 {
    font-size: 1.4rem;
  }

  .about-heading .other-description {
    margin-top: 1.5rem !important;
  }
}

@media only screen and (max-width: 767px) {
  .about-heading .about-h2 {
    font-size: 1.2rem;
    margin-top: 0.3rem !important;
  }

  .about-heading .about-h2::after {
    width: 52px;
    height: 2px;
    margin-top: 1rem;
  }

  .about-heading .other-description {
    margin-top: 1.35rem !important;
  }
}


/* ==================================================================
   MOBILE MENU TOGGLE
   menu.png ships as a pure-white glyph. The base sheet inverts the
   .menu wrapper to blacken it, which is right on the light bar but
   compounds with any filter on the <img>, turning the icon black
   again on the dark scrolled bar. Filter the <img> only, once.
   ================================================================== */

.navbar-container .menu {
  -webkit-filter: none;
  filter: none;
  /* pushes the toggle to the right edge of the bar */
  margin-left: auto !important;
  -webkit-box-ordinal-group: 100;
  -ms-flex-order: 99;
  order: 99 !important;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-container .menu a {
  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;
  /* comfortable tap target without moving the glyph */
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: 8px;
}

.navbar-container .menu img {
  width: 26px;
  height: 26px;
  -o-object-fit: contain;
  object-fit: contain;
  /* white source glyph -> charcoal on the light bar */
  -webkit-filter: brightness(0);
  filter: brightness(0);
  -webkit-transition: -webkit-filter 0.35s var(--ease);
  transition: filter 0.35s var(--ease);
}

/* dark scrolled bar: leave the glyph as its native white */
header.dropped .navbar-container .menu img {
  -webkit-filter: none;
  filter: none;
}

/* The bar keeps 2rem side padding all the way down from 1400px, which
   overflows once the two logos and the toggle share a phone-width row. */
@media only screen and (max-width: 991px) {
  nav {
    padding: 0.6rem 1.25rem;
  }
}

@media only screen and (max-width: 767px) {
  nav {
    padding: 0.55rem 1rem;
  }

  .navbar-container {
    gap: 0.5rem;
  }

  .navbar-container .menu a {
    width: 40px;
    height: 40px;
    margin-right: -6px;
  }

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

@media only screen and (max-width: 450px) {
  nav {
    padding: 0.5rem 0.75rem;
  }

  .navbar-container {
    gap: 0.35rem;
  }

  .navbar-container .menu a {
    width: 36px;
    height: 36px;
    margin-right: -4px;
  }

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

/* ============================================================
   header call CTA
   The bar is white at rest and charcoal once `header.dropped`
   kicks in, so this pill carries its own colours for both
   states. It used to borrow .footer-call, which is white-on-gold
   — that left the number and the icon invisible on the white bar.
   ============================================================ */
.nav-call {
  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;
}

.nav-call-btn {
  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;
  gap: 0.5rem;
  padding: 0.55rem 1.35rem;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  color: var(--ink);
  font-family: var(--radikal);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  /* line-height 1 keeps the digits optically centred in the pill */
  line-height: 1;
  text-decoration: none;
  text-wrap: nowrap;
  white-space: nowrap;
  -webkit-transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
  -o-transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}

.nav-call-btn span {
  display: block;
  line-height: 1;
}

.nav-call-btn img {
  display: block;
  width: 17px;
  height: 17px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  /* call.svg ships with a white fill — knock it to black for the white bar */
  -webkit-filter: brightness(0);
  filter: brightness(0);
  -webkit-transition: -webkit-filter 0.35s var(--ease);
  transition: filter 0.35s var(--ease);
}

.nav-call-btn:hover,
.nav-call-btn:focus-visible {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.nav-call-btn:hover img,
.nav-call-btn:focus-visible img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

/* charcoal bar after scroll */
header.dropped .nav-call-btn {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.28);
}

header.dropped .nav-call-btn img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

header.dropped .nav-call-btn:hover,
header.dropped .nav-call-btn:focus-visible {
  color: var(--white);
  border-color: var(--accent);
}

@media only screen and (max-width: 1400px) {
  .nav-call-btn {
    font-size: 0.85rem;
    padding: 0.5rem 1.15rem;
  }

  .nav-call-btn img {
    width: 15px;
    height: 15px;
  }
}

@media only screen and (max-width: 1280px) {
  .nav-call-btn {
    gap: 0.4rem;
    font-size: 0.8rem;
    padding: 0.45rem 1rem;
  }
}

/* below 1200px the links collapse into the off-canvas drawer and the
   fixed bottom bar carries the CTAs, so the pill steps aside too */
@media only screen and (max-width: 1200px) {
  .nav-call {
    display: none !important;
  }
}

/* ============================================================
   Form validation palette
   Bootstrap's own stylesheet paints invalid states red (#dc3545)
   and valid states green (#198754), both off-scheme. Restated
   here in gold/charcoal so the page stays black / gold / white.
   The messages still carry the meaning in text, so nothing
   depends on colour alone.
   ============================================================ */
.invalid-feedback {
  color: var(--accent-dark);
}

.valid-feedback {
  color: var(--ink-2);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid {
  border-color: var(--accent-dark);
  /* drop Bootstrap's red inline warning glyph */
  background-image: none;
  padding-right: 0.75rem;
}

.form-control.is-valid,
.was-validated .form-control:valid,
.form-select.is-valid,
.was-validated .form-select:valid {
  border-color: var(--hairline);
  /* drop Bootstrap's green inline tick */
  background-image: none;
  padding-right: 0.75rem;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  border-color: var(--accent);
  -webkit-box-shadow: 0 0 0 0.2rem var(--accent-soft);
  box-shadow: 0 0 0 0.2rem var(--accent-soft);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: var(--accent);
  -webkit-box-shadow: 0 0 0 0.2rem var(--accent-soft);
  box-shadow: 0 0 0 0.2rem var(--accent-soft);
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
  border-color: var(--accent-dark);
}

.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label {
  color: var(--accent-dark);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  border-color: var(--accent);
  -webkit-box-shadow: 0 0 0 0.2rem var(--accent-soft);
  box-shadow: 0 0 0 0.2rem var(--accent-soft);
}

/* dark-panel form (Register Interest) reads the warm tone instead */
.register-interest .form-control.is-invalid,
.register-interest .was-validated .form-control:invalid {
  border-color: var(--amber);
}

.register-interest .form-check-input.is-invalid ~ .form-check-label,
.register-interest .was-validated .form-check-input:invalid ~ .form-check-label {
  color: var(--amber);
}

/* ==================================================================
   OVERVIEW — rebuilt
   Was a 50/50 split with ~120 words of `capitalize`d body copy beside
   a landscape photo whose flat pale sky filled the top half and read
   as a grey background. Now: white ground throughout, an editorial
   copy stack with a gold-ruled spec strip, and the photo cropped to a
   portrait frame on a charcoal mat so the tower — not the sky — is the
   subject. Black / gold / white only.
   ================================================================== */

.overview {
  background: var(--white);
}

.ov-grid {
  display: grid;
  /* fixed media column so the gutter stays a real gap instead of the
     leftover slack a fr-based column left between copy and photo */
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 4rem;
  align-items: center;
  /* keeps the copy to a readable measure on wide screens without
     re-opening a void beside the image */
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- copy column ---- */

.ov-eyebrow {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--accent);
  font-family: var(--radikal);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ov-grid .sub-title {
  font-size: 3rem;
  margin-bottom: 0;
  text-transform: none;
}

.ov-lead {
  margin: 1.75rem 0 0;
  color: var(--ink);
  font-family: var(--mulish);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.75;
}

.ov-body {
  margin: 1rem 0 0;
  color: var(--ink-3);
  font-family: var(--mulish);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.85;
}

/* ---- gold-ruled spec strip ---- */

.ov-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 2.25rem 0 0;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--accent-soft);
  list-style: none;
}

.ov-specs li {
  position: relative;
  padding: 0 1rem;
  text-align: center;
}

.ov-specs li:first-child {
  padding-left: 0;
  text-align: left;
}

.ov-specs li:last-child {
  padding-right: 0;
}

/* hairline dividers between specs, not after the last */
.ov-specs li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 1px;
  background: var(--hairline);
}

.ov-spec-v {
  display: block;
  color: var(--ink);
  font-family: var(--font-cormorant);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: nowrap;
  white-space: nowrap;
}

.ov-spec-l {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-3);
  font-family: var(--radikal);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.overview .overview-links {
  margin: 2.25rem 0 0;
}

/* ---- media column: charcoal mat + portrait crop ---- */

.ov-media {
  position: relative;
}

.ov-frame {
  position: relative;
  padding: 0.7rem;
  border-radius: 1rem;
  background: linear-gradient(160deg, var(--ink-2) 0%, var(--jet) 100%);
  -webkit-box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg);
  /* the grid's media column is now a fixed 480px, so the frame simply
     fills it — no cap needed, and no slack left over as a gutter */
}

/* gold hairline just inside the mat */
.ov-frame::after {
  content: "";
  position: absolute;
  inset: 0.32rem;
  border: 1px solid rgba(198, 162, 104, 0.38);
  border-radius: 0.8rem;
  pointer-events: none;
}

.overview .overview-img {
  position: relative;
  width: 100%;
  /* portrait crop centred on the tower (it sits at ~47% across), which
     trims the wide pale sky that used to flank it */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0.7rem;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.overview .overview-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 47% 62%;
  object-position: 47% 62%;
}

/* deepen the remaining sky toward charcoal so no flat grey field is left */
.overview .overview-img::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(12, 12, 12, 0.62) 0%, rgba(12, 12, 12, 0.22) 55%, rgba(12, 12, 12, 0) 100%);
  pointer-events: none;
}

.ov-tag {
  position: absolute;
  z-index: 2;
  top: 1.7rem;
  right: 1.7rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(198, 162, 104, 0.55);
  border-radius: 0.6rem;
  background: rgba(12, 12, 12, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
}

.ov-tag-k {
  display: block;
  color: var(--accent);
  font-family: var(--radikal);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ov-tag-v {
  display: block;
  margin-top: 0.15rem;
  color: var(--white);
  font-family: var(--font-cormorant);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.2;
}

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

@media only screen and (max-width: 1200px) {
  .ov-grid {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 3rem;
  }

  .ov-grid .sub-title {
    font-size: 2.5rem;
  }

  .ov-spec-v {
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 991px) {
  .ov-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* photo follows the copy on narrow screens, so it lands after the
     Download Brochure button rather than pushing the heading down */
  .ov-media {
    order: 0;
  }

  /* single column — contain and centre it */
  .ov-frame {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .overview .overview-img {
    aspect-ratio: 16 / 11;
  }

  .ov-lead {
    font-size: 1.05rem;
  }
}

@media only screen and (max-width: 575px) {
  .ov-grid .sub-title {
    font-size: 2.1rem;
  }

  .ov-specs {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.35rem 0;
  }

  /* on two columns the divider belongs to the right-hand cell only */
  .ov-specs li,
  .ov-specs li:first-child {
    padding: 0 0.75rem;
    text-align: left;
  }

  .ov-specs li + li::before {
    display: none;
  }

  .ov-specs li:nth-child(odd) {
    padding-left: 0;
  }

  .ov-specs li:nth-child(even)::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0.15rem;
    bottom: 0.15rem;
    width: 1px;
    background: var(--hairline);
  }

  .ov-tag {
    top: 1.2rem;
    right: 1.2rem;
    padding: 0.55rem 0.9rem;
  }
}

/* aspect-ratio fallback for pre-2021 Safari, which would otherwise collapse
   the portrait frame to zero height */
@supports not (aspect-ratio: 4 / 5) {
  .overview .overview-img {
    height: 34rem;
  }

  @media only screen and (max-width: 991px) {
    .overview .overview-img {
      height: 24rem;
    }
  }
}

/* ==================================================================
   LOOK & FEEL — dark bands + polish
   The alternating band sections used --platinum-soft (#F5F6F7), a pale
   grey. They now run black, so the page reads as black / gold / white
   only and darkens toward the enquiry form at the end. Everything in
   here is presentation: no markup, copy or behaviour is touched.

   Rhythm: hero(dark) - overview(white) - highlights(white)
           - configuration(BLACK) - amenities(white) - 360(BLACK)
           - location(white) - about(BLACK) - contact(dark)
   ================================================================== */

/* ---------- 1. the banded sections turn black ---------- */

.configuration,
.tour-360,
.aboutus {
  position: relative;
  /* three layers: a fine diagonal weave for tooth, a gold wash off the
     top-right corner, and a charcoal-to-black fall — so the band reads
     as a surface rather than a flat fill */
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0 1px, rgba(255, 255, 255, 0) 1px 7px),
    radial-gradient(115% 75% at 85% 0%, rgba(198, 162, 104, 0.10) 0%, rgba(198, 162, 104, 0) 62%),
    linear-gradient(168deg, var(--ink-2) 0%, var(--jet) 60%, var(--black) 100%);
  color: rgba(255, 255, 255, 0.82);
}

/* hairline of gold light where each dark band begins */
.configuration::before,
.tour-360::before,
.aboutus::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(198, 162, 104, 0) 0%,
      rgba(198, 162, 104, 0.55) 50%,
      rgba(198, 162, 104, 0) 100%);
}

/* ---------- 2. type inside the dark bands ---------- */

.configuration .sub-title,
.tour-360 .sub-title,
.aboutus .sub-title,
.aboutus .about-h1 {
  color: var(--white);
}

.configuration .other-description,
.tour-360 .other-description,
.aboutus .other-description {
  color: rgba(255, 255, 255, 0.78);
}

.configuration .config-text,
.tour-360 .tour-text,
.aboutus .about-heading .about-h2 {
  color: rgba(255, 255, 255, 0.62);
}

/* ---------- 3. Configuration: floor-plan card ---------- */

.configuration .layout-box {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(198, 162, 104, 0.26);
  -webkit-box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}

.configuration .layout-box:hover {
  border-color: rgba(198, 162, 104, 0.5);
  -webkit-box-shadow: 0 32px 74px rgba(0, 0, 0, 0.65);
  box-shadow: 0 32px 74px rgba(0, 0, 0, 0.65);
}

/* the card sits on black now, so the CTA reverses to gold-on-dark */
.configuration .layout-content .btn-check {
  border: 1px solid rgba(198, 162, 104, 0.55);
}

.configuration .layout-content .btn-check:hover {
  color: var(--jet);
  border-color: var(--accent);
}

/* ---------- 4. 360 view: frame + spec strip ---------- */

.tour-360 .tour-frame {
  border: 1px solid rgba(198, 162, 104, 0.24);
  -webkit-box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

.tour-360 .tour-specs {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.tour-360 .tour-spec + .tour-spec::before,
.tour-360 .tour-spec:nth-child(even)::before {
  background: rgba(255, 255, 255, 0.14);
}

.tour-360 .tour-spec .spec-value {
  color: var(--white);
}

.tour-360 .tour-spec .spec-label {
  color: rgba(255, 255, 255, 0.58);
}

/* ---------- 5. About us: counters ---------- */

.aboutus .counter-number {
  color: var(--white);
}

.aboutus .counter-label {
  color: rgba(255, 255, 255, 0.6);
}

/* each counter gets a faint plinth so the trio reads as a set */
.aboutus .counter-box {
  padding: 1.75rem 1rem 1.5rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  -webkit-transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), -webkit-transform 0.45s var(--ease);
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.45s var(--ease);
}

.aboutus .counter-box:hover {
  background: rgba(198, 162, 104, 0.07);
  border-color: rgba(198, 162, 104, 0.3);
  -webkit-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  transform: translateY(-4px);
}

/* ---------- 6. no grey card surfaces left on the light sections ---------- */

.highlight-carousel .box {
  background: var(--white);
  border: 1px solid var(--hairline);
  -webkit-transition: border-color 0.45s var(--ease), -webkit-box-shadow 0.45s var(--ease), -webkit-transform 0.45s var(--ease);
  transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}

.highlight-carousel .box:hover {
  border-color: rgba(198, 162, 104, 0.45);
  -webkit-box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-md);
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

.loc-back {
  background: var(--white);
  border: 1px solid var(--hairline);
  -webkit-box-shadow: var(--shadow-sm);
  box-shadow: var(--shadow-sm);
}

/* charcoal while the map iframe loads, rather than a grey plate */
.loc-img.loc-map {
  background: var(--ink);
}

/* ==================================================================
   ORNAMENT PASS
   The page read as plain: one flat gold bar under each title, unadorned
   media, hairline-only cards. Adds a decorated divider, gold corner
   brackets on the framed media, and richer rest/hover detail on the
   icon and card sets. Presentation only.
   ================================================================== */

/* ---------- 1. decorated section divider ----------
   Replaces the flat 68px bar with a gold diamond leading a rule that
   tapers away. Works left-aligned and centred alike, since the layers
   are positioned inside the pseudo-element's own box. */

.sub-title::after {
  width: 122px;
  height: 10px;
  border-radius: 0;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Crect%20x='2.5'%20y='2.5'%20width='5'%20height='5'%20transform='rotate(45%205%205)'%20fill='%23C6A268'/%3E%3C/svg%3E") no-repeat,
    linear-gradient(90deg, #C6A268 0%, #C6A268 34%, rgba(198, 162, 104, 0.16) 100%) no-repeat;
  background-size: 10px 10px, 106px 2px;
  background-position: left center, 16px center;
}

/* the ornament keeps its proportions when the title is centred */
.head-text .sub-title::after,
.text-center .sub-title::after {
  background-position: left center, 16px center;
}

/* ---------- 2. gold corner brackets ---------- */

/* Overview photo — brackets sit outside the mat (no clipping there) */
.ov-frame::before {
  content: "";
  position: absolute;
  inset: -18px;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 1px 28px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 28px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 1px 28px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 28px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 1px 28px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 28px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 1px 28px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 28px 1px no-repeat;
  opacity: 0.55;
}

/* Floor-plan card and 360 frame both clip, so their brackets sit inside
   as viewfinder marks. Both are later in the DOM than these pseudo
   elements, so the overlay content and CTAs still paint above. */
.configuration .layout-box::before,
.tour-360 .tour-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 1px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 26px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 1px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 26px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 1px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 26px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 1px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 26px 1px no-repeat;
  opacity: 0.6;
}

/* ---------- 3. amenity icons: gold ring at rest ---------- */

.amenity-icon {
  position: relative;
  border-color: rgba(198, 162, 104, 0.4);
}

/* a second, offset ring so the medallion has depth before hover */
.amenity-icon::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(198, 162, 104, 0.2);
  border-radius: 50%;
  -webkit-transition: opacity 0.45s var(--ease), -webkit-transform 0.45s var(--ease);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.amenity-item:hover .amenity-icon::before {
  opacity: 0.9;
  -webkit-transform: scale(1.06);
  -ms-transform: scale(1.06);
  transform: scale(1.06);
}

/* ---------- 4. cards gain a gold top edge on hover ---------- */

.highlight-carousel .box,
.loc-back {
  position: relative;
  overflow: hidden;
}

.highlight-carousel .box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 60%, rgba(198, 162, 104, 0) 100%);
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.5s var(--ease);
  transition: transform 0.5s var(--ease);
}

.highlight-carousel .box:hover::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

/* the location card carries the gold edge permanently, as a header rule */
.loc-back::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(198, 162, 104, 0) 72%);
}

/* ---------- 5. counters: gold corner tick ---------- */

.aboutus .counter-box::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 14px;
  height: 14px;
  border-right: 1px solid rgba(198, 162, 104, 0.45);
  border-bottom: 1px solid rgba(198, 162, 104, 0.45);
  -webkit-transition: opacity 0.45s var(--ease);
  transition: opacity 0.45s var(--ease);
  opacity: 0.7;
}

.aboutus .counter-box:hover::after {
  opacity: 1;
}

/* ---------- 1b. centred titles get a symmetric ornament ----------
   Left-aligned titles lead with the diamond; centred ones need the rule
   tapering away from a centred diamond, or the motif reads lopsided. */

.head-text .sub-title::after,
.text-center .sub-title::after,
.about-heading .about-h2::after {
  width: 122px;
  height: 10px;
  border-radius: 0;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Crect%20x='2.5'%20y='2.5'%20width='5'%20height='5'%20transform='rotate(45%205%205)'%20fill='%23C6A268'/%3E%3C/svg%3E") no-repeat center center,
    linear-gradient(90deg, rgba(198, 162, 104, 0) 0%, #C6A268 100%) no-repeat left center,
    linear-gradient(90deg, #C6A268 0%, rgba(198, 162, 104, 0) 100%) no-repeat right center;
  background-size: 10px 10px, 48px 2px, 48px 2px;
  margin-left: auto;
  margin-right: auto;
}

/* the About Us rule keeps its own vertical rhythm */
.about-heading .about-h2::after {
  margin-top: 1.35rem;
  margin-bottom: 0;
}

/* The floor-plan card's lower half carries the 4.5 BHK overlay text, which
   the bottom brackets cut through once the card narrows — mark only the
   top corners there. The 360 frame centres its CTA, so it keeps all four. */
.configuration .layout-box::before {
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 1px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 26px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 1px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 26px 1px no-repeat;
}

/* narrow screens: pull the outside brackets in so they stay clear of the
   viewport edge (html has overflow-x hidden and would clip them) */
@media only screen and (max-width: 991px) {
  .ov-frame::before {
    inset: -10px;
  }
}

/* ==================================================================
   ALL-DARK CONVERSION
   Every section now sits on black. The four that were still light
   (overview, project highlights, amenities, location) are inverted
   here, and the bands alternate between a lifted charcoal and a
   deeper black so a full page of black still has rhythm.
   Presentation only — no markup, copy or behaviour touched.
   ================================================================== */

html,
body {
  background: var(--black);
}

/* ---------- 1. shared band surface ---------- */

.overview,
.project-highlight,
.configuration,
.amenities,
.tour-360,
.location,
.aboutus {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0 1px, rgba(255, 255, 255, 0) 1px 7px),
    radial-gradient(115% 75% at 85% 0%, rgba(198, 162, 104, 0.10) 0%, rgba(198, 162, 104, 0) 62%),
    linear-gradient(168deg, var(--ink-2) 0%, var(--jet) 60%, var(--black) 100%);
  color: rgba(255, 255, 255, 0.82);
}

/* alternating deeper bands, gold wash swung to the other corner */
.project-highlight,
.amenities,
.location {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 1px, rgba(255, 255, 255, 0) 1px 7px),
    radial-gradient(110% 70% at 14% 0%, rgba(198, 162, 104, 0.075) 0%, rgba(198, 162, 104, 0) 58%),
    linear-gradient(178deg, var(--jet) 0%, var(--black) 100%);
}

/* gold hairline where every band begins */
.overview::before,
.project-highlight::before,
.configuration::before,
.amenities::before,
.tour-360::before,
.location::before,
.aboutus::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(198, 162, 104, 0) 0%,
      rgba(198, 162, 104, 0.55) 50%,
      rgba(198, 162, 104, 0) 100%);
}

/* ---------- 2. type across the newly dark bands ---------- */

.overview .sub-title,
.project-highlight .sub-title,
.amenities .sub-title,
.location .sub-title {
  color: var(--white);
}

.overview .other-description,
.project-highlight .other-description,
.amenities .other-description,
.location .other-description {
  color: rgba(255, 255, 255, 0.78);
}

.project-highlight .high-text,
.amenities .ame-text,
.location .loc-text {
  color: rgba(255, 255, 255, 0.62);
}

/* ---------- 3. Overview on black ---------- */

.overview .ov-lead {
  color: rgba(255, 255, 255, 0.86);
}

.overview .ov-body {
  color: rgba(255, 255, 255, 0.7);
}

.overview .ov-specs {
  border-top-color: rgba(198, 162, 104, 0.28);
}

.overview .ov-specs li + li::before,
.overview .ov-specs li:nth-child(even)::before {
  background: rgba(255, 255, 255, 0.14);
}

.overview .ov-spec-v {
  color: var(--white);
}

.overview .ov-spec-l {
  color: rgba(255, 255, 255, 0.58);
}

/* the mat needs a touch of lift to separate from the band behind it */
.overview .ov-frame {
  background: linear-gradient(160deg, #1F1F1F 0%, #101010 100%);
}

/* ---------- 4. Project highlights: cards on black ---------- */

.project-highlight .highlight-carousel .box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

.project-highlight .highlight-carousel .box:hover {
  background: rgba(198, 162, 104, 0.06);
  border-color: rgba(198, 162, 104, 0.42);
  -webkit-box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
}

/* a dark circle would vanish on a dark card — ring it in gold instead */
.project-highlight .highlight-carousel .icon {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(198, 162, 104, 0.38);
}

.project-highlight .highlight-carousel .title {
  color: var(--white);
}

.project-highlight .highlight-carousel .text {
  color: rgba(255, 255, 255, 0.66);
}

/* ---------- 5. Amenities on black ---------- */

.amenities .amenity-icon {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(198, 162, 104, 0.42);
}

/* the icon files ship as dark strokes — flip them for the black band */
.amenities .amenity-icon img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.amenities .amenity-item:hover .amenity-icon {
  background: rgba(198, 162, 104, 0.14);
  border-color: var(--accent);
}

.amenities .amenity-label {
  color: rgba(255, 255, 255, 0.86);
}

.amenities .amenity-item:hover .amenity-label {
  color: var(--accent);
}

/* ---------- 6. Location: card + accordion on black ---------- */

.location .loc-back {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Bootstrap drives the accordion off its own custom properties, so
   restate them rather than fighting each rule individually */
.location .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: rgba(255, 255, 255, 0.88);
  --bs-accordion-border-color: rgba(255, 255, 255, 0.12);
  --bs-accordion-btn-color: rgba(255, 255, 255, 0.9);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--accent);
  --bs-accordion-btn-focus-box-shadow: none;
}

.location .accordion-item {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

.location .accordion-button {
  color: rgba(255, 255, 255, 0.9) !important;
  background-color: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

.location .accordion-button:hover,
.location .accordion-button:not(.collapsed) {
  color: var(--accent) !important;
}

/* plus / minus glyphs and the map pins all ship dark */
.location .accordion-button::after {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

.location .acc-icon img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
  opacity: 0.6;
}

.location .acc-location {
  color: rgba(255, 255, 255, 0.85);
}

.location .accordion-content .acc-time,
.location .accordion-body .distance {
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- 7. carousel controls read on black ---------- */

.owl-nav button {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(198, 162, 104, 0.4) !important;
}

.owl-nav button:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.amenities-carousel .owl-dots button,
.highlight-carousel .owl-dots button {
  background-color: rgba(255, 255, 255, 0.24) !important;
}

.amenities-carousel .owl-dots button.active,
.highlight-carousel .owl-dots button.active {
  background-color: var(--accent) !important;
}

/* ==================================================================
   NAV CHROME ON BLACK
   The bar and the off-canvas drawer were the last light surfaces. They
   now carry the dark treatment from the start rather than only after
   `header.dropped` kicks in — a white bar on an all-black page read as
   a bright seam at the top. The .dropped rules still apply on scroll
   and land on the same colours.
   ================================================================== */

header {
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.97) 0%, rgba(12, 12, 12, 0.9) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* logos ship as black glyphs on transparent */
header .navbar-container .navlogo .logo,
header .navbar-container .navlogo img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

header .navbar-container .navbar-links .navbar-link .nav-link {
  color: rgba(255, 255, 255, 0.86);
}

header .nav-call-btn {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.28);
}

header .nav-call-btn img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

/* menu.png is a white source glyph — the light-bar rule blackened it */
header .navbar-container .menu img {
  -webkit-filter: none;
  filter: none;
}

/* ---------- off-canvas drawer ---------- */

.offcanvas.offcanvas-start,
.offcanvas-body {
  background: linear-gradient(170deg, var(--ink-2) 0%, var(--jet) 55%, var(--black) 100%);
}

.offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.offcanvas-title .mob-logo {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.offcanvas .btn-close {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.offcanvas .btn-close:hover {
  opacity: 1;
}

.offcanvas-link {
  color: rgba(255, 255, 255, 0.88);
}

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

.offcanvas-link::after {
  background-color: rgba(255, 255, 255, 0.12);
}

/* ==================================================================
   Mobile: breathing room between the two logos
   Below 1200px the nav links and the call pill are hidden, so the two
   .navlogo blocks become neighbours and the container's small gap
   (0.5rem / 0.35rem) left them almost touching. A general-sibling
   selector is needed rather than `+` because the hidden .navbar-links
   and .nav-call still sit between them in the DOM.
   ================================================================== */

@media only screen and (max-width: 1200px) {
  .navbar-container .navlogo ~ .navlogo {
    margin-left: 0.95rem;
  }
}

@media only screen and (max-width: 450px) {
  .navbar-container .navlogo ~ .navlogo {
    margin-left: 0.65rem;
  }
}

@media only screen and (max-width: 350px) {
  .navbar-container .navlogo ~ .navlogo {
    margin-left: 0.45rem;
  }
}