@font-face {
  font-family: Tartuffo_Trial-Regular;
  src: url("../assets/fonts/tartuffo/Tartuffo_Trial-Regular.otf");
}

@font-face {
  font-family: Tartuffo_Trial-Medium;
  src: url("../assets/fonts/tartuffo/Tartuffo_Trial-Medium.otf");
}

@font-face {
  font-family: TT_Neoris_Trial_Regular;
  src: url("../assets/fonts/tt_neoris/TT_Neoris_Trial_Regular.ttf");
}

@font-face {
  font-family: TT_Neoris_Trial_Medium;
  src: url("../assets/fonts/tt_neoris/TT_Neoris_Trial_Medium.ttf");
}

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

:root {
  --light: #ffffff;
  --dark: #000;
  --Lato: "Lato", sans-serif;
  --Montserrat: "Montserrat", sans-serif;
  --Raleway: "Raleway", sans-serif;
  --Tartuffo-Medium: Tartuffo_Trial-Medium;
  --Tartuffo-Regular: Tartuffo_Trial-Regular;
  --TT_Neoris_Regular: TT_Neoris_Trial_Regular;
  --TT_Neoris_Medium: TT_Neoris_Trial_Medium;
  --radius-1: 16px;
  --radius-full: 100px;
  /* palette sampled from the Lotus Developers logo artwork:
     core #B47225, gradient range #B37124 -> #F8B85A */
  --primary: #b47225;
  --primary-deep: #8f5a1d;
  --primary-light: #f8b85a;
  --charcoal: #1e2127;
  --text-color: #58595b;
  --text-color-2: #727272;
}

html {
  font-size: 16px !important;
  overflow-x: 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;
  font-family: var(--TT_Neoris_Regular);
}

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

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

.lenis.lenis-smooth [data-lenis-prevent] {
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
}

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

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
  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;
}

.toggle-up {
  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;
  background: var(--dark-blue);
  width: 45px;
  height: 45px;
  border-radius: 100px;
  position: fixed;
  bottom: 0%;
  right: 1.25%;
  color: var(--light);
  z-index: 999;
  cursor: pointer;
  opacity: 0;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.toggle-up.show {
  opacity: 1;
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.toggle-up i {
  font-size: 1.15rem;
}

/* form loader css */

.form-loader-div {
  display: none;
}

.form-loader {
  width: 25px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid #b5acac;
  border-right-color: var(--light);
  -webkit-animation: l2 0.35s infinite linear;
  animation: l2 0.35s infinite linear;
}

@-webkit-keyframes l2 {
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

@keyframes l2 {
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

/* form loader css */

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

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

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

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

a {
  text-decoration: none;
}

p {
  margin-bottom: 0rem;
}

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

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

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

.max-content {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.no-wrap {
  text-wrap: nowrap;
}

.invert {
  -webkit-filter: invert(1);
  filter: invert(1);
}

.rotate {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rotate-180 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.mirror {
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}

.letter-spacing {
  letter-spacing: 1.05px;
}

.text-shadow {
  text-shadow: 0px 2px 10px rgba(46, 74, 81, 0.3);
}

.primary-bg {
  background-color: #f3f3f3;
}

.header-container {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  z-index: 11;
}

.navbar-container {
  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;
  padding: 1rem 8rem;
  background: var(--light);
  gap: 1rem;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.menu {
  display: none;
  width: 21px;
  cursor: pointer;
}

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

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

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

.navLinks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  gap: 1.25rem;
}

.navLinks .navLink {
  display: block;
  font-family: var(--TT_Neoris_Regular);
  font-size: 1rem;
  color: var(--text-color);
  font-weight: 500;
  text-transform: capitalize;
  cursor: pointer;
  position: relative;
}

.navLinks .navLink::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  bottom: -5px;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  border-radius: var(--radius-full);
  background-color: var(--primary-deep);
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.navLinks .navLink:hover::after {
  -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;
}

.line {
  width: 1px;
  height: 20px;
  background-color: rgba(88, 89, 91, 0.18);
}

.btn-contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.35rem;
  color: var(--light);
  padding: 0.5rem 1rem;
  font-family: var(--TT_Neoris_Medium);
  cursor: pointer;
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0 0 0 1rem;
  border-radius: 9px;
  background-color: var(--primary-deep);
}

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

.offcanvas.offcanvas-end {
  width: 100%;
}

.offcanvas.offcanvas-end .offcanvas-header {
  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;
}

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

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

.offcanvas-close {
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  border-radius: 100px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: var(--light);
  -webkit-transform: translateY(4px) scale(0.95);
  -ms-transform: translateY(4px) scale(0.95);
  transform: translateY(4px) scale(0.95);
  -webkit-transition: all 0.45s ease;
  -o-transition: all 0.45s ease;
  -o-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.offcanvas-close i {
  font-size: 1.1rem;
}

.offcanvas-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2.5rem;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  margin: 1rem 0;
}

.offcanvas-link {
  display: block;
  font-size: 1.35rem;
  font-family: var(--Tartuffo-Regular);
  font-weight: 400;
  color: var(--primary-blue);
  text-transform: capitalize;
  position: relative;
  width: 100%;
}

.offcanvas-link::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #0000001a;
  left: 0;
  bottom: -15px;
}

.offcanvas-link:last-child:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: transparent;
  left: 0;
  bottom: -15px;
}

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

.invert {
  -webkit-filter: invert(1);
  filter: invert(1);
}

.btn-visit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  outline: none;
  border: none;
  background: var(--primary-blue);
  gap: 0.25rem;
  padding: 0.65rem 1.25rem;
  font-family: var(--Metropolis-SemiBold);
  border-radius: var(--radius-full);
  font-weight: 600;
  color: var(--light);
}

.btn-visit span {
  display: block;
}

.btn-visit.light {
  background: var(--light);
  gap: 0.45rem;
  padding: 0.5rem 1.25rem;
  font-family: var(--Metropolis-SemiBold);
  color: rgba(37, 88, 131, 1);
}

.section-heading .section-title {
  font-size: 4vw;
  font-family: var(--Tartuffo-Regular);
  color: var(--primary);
  font-weight: 400;
  letter-spacing: 2.1px;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.section-title.pattern {
  position: relative;
}

/* Decorative lotus marks flanking the heading are hidden for now.
   To restore them, change display:none back to display:block on both
   ::after and ::before below. */
.section-title.pattern::after {
  content: "";
  display: none;
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 50%;
  left: -8%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background: url(../assets/images/icons/lotus.svg) no-repeat center center /
    contain;
  opacity: 0.85;
}

.section-title.pattern::before {
  content: "";
  display: none;
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 50%;
  right: -8%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background: url(../assets/images/icons/lotus.svg) no-repeat center center /
    contain;
  opacity: 0.85;
}

.section-heading .section-desc {
  font-size: 1.025rem;
  font-family: var(--TT_Neoris_Regular);
  color: var(--text-color);
  font-weight: 400;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  /* line-height: 30px; */
}

/* centered intro copy: readable measure, evenly wrapped lines */
.section-heading .section-desc.desc-narrow {
  max-width: 760px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-heading .section-desc.desc-narrow p {
  text-align: center;
  text-wrap: balance;
}

.section-heading .section-desc.desc-narrow p + p {
  margin-top: 0.75rem;
}

@media (max-width: 767px) {
  .section-heading .section-desc.desc-narrow {
    max-width: 100%;
  }

  .section-heading .section-desc.desc-narrow p {
    text-wrap: pretty;
  }
}

section.main-banner {
  margin: 5.25rem 0 0 0;
}

.carousel-indicators [data-bs-target] {
  width: 30px;
  height: 6px;
  display: block;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-color: #fff;
}

.carousel-indicators .active {
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-color: var(--primary);
}

section.section-overview {
  padding: 4rem 0rem;
}

.overview-main-content {
  margin: 4rem auto auto auto;
}

.overview-subcontent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.75rem;
}

.overview-subcontent .overview-subcontent-txt {
  font-size: 1.4vw;
  color: var(--primary);
  font-weight: 400;
  font-family: var(--Tartuffo-Regular);
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.overview-form {
  padding: 2rem 2.5rem;
  border-radius: 9px;
  -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background: var(--light);
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.form-title {
  color: var(--primary-deep);
  font-weight: 500;
  font-size: 1.175rem;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  font-family: var(--TT_Neoris_Medium);
}

.custom-input {
  padding: 0.9rem 1rem;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: var(--TT_Neoris_Medium);
  outline: unset;
  border: none;
  border-radius: 5px;
  background-color: rgba(86, 86, 86, 0.1);
}

.custom-input:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-box-shadow: 0px 0px 0px 2px var(--primary-deep);
  box-shadow: 0px 0px 0px 2px var(--primary-deep);
}

.custom-input::-webkit-input-placeholder {
  color: var(--text-color-2) !important;
  font-weight: 400 !important;
  text-transform: capitalize !important;
  font-size: 0.975rem !important;
  font-family: var(--TT_Neoris_Regular);
}

.custom-input::-moz-placeholder {
  color: var(--text-color-2) !important;
  font-weight: 400 !important;
  text-transform: capitalize !important;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  font-family: var(--TT_Neoris_Regular);
}

.custom-input:-ms-input-placeholder {
  color: var(--text-color-2) !important;
  font-weight: 400 !important;
  text-transform: capitalize !important;
  font-size: 0.975rem !important;
  font-family: var(--TT_Neoris_Regular);
}

.custom-input::-ms-input-placeholder {
  color: var(--text-color-2) !important;
  font-weight: 400 !important;
  text-transform: capitalize !important;
  font-family: var(--TT_Neoris_Regular);
  font-size: 0.975rem !important;
}

.custom-input::placeholder {
  color: var(--text-color-2) !important;
  font-weight: 400 !important;
  text-transform: capitalize !important;
  font-size: 0.975rem !important;
}

.btn-submit {
  border: none;
  background: var(--primary-deep);
  color: var(--light);
  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: 0.75rem 3rem;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 5px;
}

.btn-submit-ext {
  border: none;
  background: var(--primary-deep);
  color: var(--light);
  padding: 0.65rem 4rem;
  font-weight: 600;
  margin: 1.25rem 0 0 0;
  font-size: 1rem;
  border-radius: 10px;
}

.form-check-label {
  color: #727272;
  font-weight: 400;
  cursor: pointer;
  font-size: 0.875rem;
}

.form-check-input[type="checkbox"] {
  cursor: pointer;
}

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

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

.divider {
  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: 2rem;
}

.divider .line {
  width: 100%;
  position: relative;
  height: 2px;
  background-color: rgba(172, 136, 58, 0.14);
}

.divider .line.line-1::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  right: 0;
  z-index: 1;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background-color: rgb(235 228 208);
  border-radius: var(--radius-full);
}

.divider .line.line-2::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  left: 0;
  z-index: 1;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background-color: rgb(235 228 208);
  border-radius: var(--radius-full);
}

section.section-config {
  position: relative;
  padding: 5rem 0;
}

.config-nav .custom-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.5rem;
}

.config-nav .custom-nav .nav-item .nav-link:not(.active) .icon img.active {
  display: none;
}

.config-nav .custom-nav .nav-item:has(.nav-link.active) .icon img {
  display: none;
}

.config-nav .custom-nav .nav-item:has(.nav-link.active) .icon img.active {
  display: block;
}

.config-nav .custom-nav .nav-item .nav-link {
  border: 1px solid var(--primary-deep);
  border-radius: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  font-weight: 500;
  font-family: var(--TT_Neoris_Medium);
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--primary-deep);
}

.config-nav .custom-nav .nav-item .nav-link.active {
  background: var(--primary-deep);
  color: var(--light);
}

.config-content {
  margin: 2.75rem auto auto auto;
}

.config-swiper-container {
  position: relative;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* two floor-plan cards per tower sit side by side - no slider */
.config-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2rem 1fr;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* the plan cards render twice: a grid for tablet/desktop and a slider for
   mobile - only one of the two is ever visible */
.config-mobile-only {
  display: none;
}

@media only screen and (max-width: 767px) {
  .config-desktop-only {
    display: none;
  }

  .config-mobile-only {
    display: block;
  }

  .config-swiper-mobile {
    padding-bottom: 0.5rem;
  }

  .config-swiper-mobile .swiper-slide {
    height: auto;
  }

  /* dots match the amenities carousel */
  .config-swiper-mobile .swiper-pagination {
    position: static;
    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: 1.5rem auto 0 auto;
  }

  .config-swiper-mobile .swiper-pagination .swiper-pagination-bullet {
    width: 15px;
    height: 4px;
    border-radius: 100px;
    opacity: 1;
    margin: 0;
    -webkit-transition: all 1.1s ease;
    -o-transition: all 1.1s ease;
    transition: all 1.1s ease;
    background-color: #dfdfdf;
  }

  .config-swiper-mobile .swiper-pagination .swiper-pagination-bullet-active {
    width: 25px;
    background-color: var(--primary);
  }
}

.config-swiper-container .swiper-button {
  position: absolute;
  top: 50%;
  z-index: 1;
  opacity: 1;
  -webkit-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

.config-swiper-container .swiper-button.swiper-button-disabled {
  -webkit-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
}

.config-swiper-container .swiper-button.swiper-button-prev-1 {
  left: -25px;
}

.config-swiper-container .swiper-button.swiper-button-next-1 {
  right: -25px;
}

.config-swiper-content {
  border-radius: 9px;
  padding: 1.5rem 1rem 1rem 1rem;
  border: 1px solid rgba(88, 88, 88, 0.14);
  background: var(--light);
}

.config-swiper-content .config-txt {
  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: 1rem;
}

.config-swiper-content .config-txt span {
  color: var(--text-color);
  font-family: var(--TT_Neoris_Medium);
  font-weight: 500;
  font-size: 1rem;
  display: block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--text-color);
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border-radius: var(--radius-full);
}

.config-swiper-content .config-img {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 1.5rem auto auto auto;
  cursor: pointer;
}

.config-swiper-content .config-img img.plan {
  width: 100%;
  -webkit-filter: blur(9px);
  filter: blur(9px);
  height: 380px;
  max-height: 55vh;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

@media (max-width: 767px) {
  .config-swiper-content .config-img img.plan {
    height: 240px;
  }
}

.config-swiper-content .config-img .config-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.config-swiper-content .config-img .config-overlay .config-overlay-icon {
  width: 100px;
  height: 100px;
}

.config-swiper-content .config-img .config-overlay .config-overlay-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.btn-quote {
  color: var(--primary-deep);
  border: none;
  outline: none;
  font-family: var(--TT_Neoris_Medium);
  font-weight: 500;
  padding: 0.65rem 1.5rem;
  text-wrap: nowrap;
  border-radius: 5px;
  font-size: 1.1rem;
  background-color: var(--light);
}

section.section-amenities {
  padding: 3.5rem 0;
}

.amenities-contents .amenities-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2.5rem 1rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.amenities-contents .amenities-content .amens-details {
  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;
  /* fixed width keeps every card the same size regardless of label length,
     so the icon row and the text row each line up across the slide */
  -webkit-box-flex: 0;
  -ms-flex: 0 0 150px;
  flex: 0 0 150px;
  width: 150px;
  gap: 0.85rem;
}

/* the icon art varies in intrinsic size, so pin it to a fixed box and let
   object-fit letterbox it - this is what keeps the labels on one baseline */
.amenities-contents .amenities-content .amens-details .amens-icon {
  width: 64px;
  height: 64px;
  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;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.amenities-contents .amenities-content .amens-details .amens-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.amenities-contents .amenities-content .amens-details .amens-txt {
  text-align: center;
  line-height: 1.35;
}

.amenities-contents {
  margin: 2.5rem auto auto auto;
  width: 90%;
  position: relative;
}

.amenities-carousel-desktop .owl-nav button {
  position: absolute;
  top: 45%;
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 50px;
  height: 50px;
  z-index: 1;
}

.amenities-carousel-desktop .owl-nav button img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.amenities-carousel-desktop .owl-nav .owl-prev {
  left: -70px;
}

.amenities-carousel-desktop .owl-nav .owl-next {
  right: -70px;
}

.amenities-carousel-desktop .owl-dots,
.amenities-carousel-mobile .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-desktop .owl-dots button,
.amenities-carousel-mobile .owl-dots button {
  width: 15px;
  height: 4px;
  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-desktop .owl-dots button.active,
.amenities-carousel-mobile .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;
}

section.section-gallery {
  padding: 1rem 0 4rem 0;
}

.gallery-nav .custom-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.5rem;
}

.gallery-nav .custom-nav .nav-item .nav-link:not(.active) .icon img.active {
  display: none;
}

.gallery-nav .custom-nav .nav-item:has(.nav-link.active) .icon img {
  display: none;
}

.gallery-nav .custom-nav .nav-item:has(.nav-link.active) .icon img.active {
  display: block;
}

.gallery-nav .custom-nav .nav-item .nav-link {
  border: 1px solid var(--primary);
  border-radius: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  font-weight: 500;
  font-family: var(--TT_Neoris_Medium);
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--primary);
}

.gallery-nav .custom-nav .nav-item .nav-link.active {
  background: var(--primary);
  color: var(--light);
}

.gallery-content {
  width: 90%;
  margin: auto 0 auto auto;
}

.gallery-swiper-container {
  position: relative;
  margin: 3.5rem auto auto auto;
}

.gallery-swiper-container .swiper-nav .swiper-button {
  position: absolute;
  top: 50%;
  z-index: 1;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  opacity: 1;
  width: 55px;
  height: 55px;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.gallery-swiper-container .swiper-nav .swiper-button img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.gallery-swiper-container .swiper-nav .swiper-button.swiper-button-disabled {
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.gallery-swiper-container .swiper-nav .swiper-button {
  position: absolute;
  top: 50%;
  z-index: 1;
}

.gallery-swiper-container .swiper-nav .swiper-button.swiper-button-prev-2 {
  left: -25px;
}

.gallery-swiper-container .swiper-nav .swiper-button.swiper-button-next-2 {
  right: 10%;
}

.gallery-swiper-container .gallery-swiper .swiper-slide .gallery-img {
  border-radius: 9px;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.gallery-swiper-container .gallery-swiper .swiper-slide .gallery-img img {
  border-radius: 9px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.gallery-swiper .swiper-wrapper {
  margin: 0 0 2.5rem 0;
}

.swiper-scrollbar-drag {
  background: var(--primary) !important;
}

section.section-location {
  padding: 3rem 0;
}

.map-content {
  margin: 4rem auto auto auto;
}

.location-accordion {
  padding: 1rem;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  border-radius: 9px;
  border: 1px solid rgba(88, 88, 88, 0.14);
  background-color: var(--light);
}

.location-accordion .accordion-item {
  background-color: transparent;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("../assets/images/icons/drop.svg");
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.accordion-button::after {
  background-image: url("../assets/images/icons/drop.svg");
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.location-accordion .accordion-button:not(.collapsed),
.location-accordion .accordion-button {
  background-color: transparent;
  outline: unset;
  -webkit-box-shadow: unset;
  box-shadow: unset;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1.75rem 1.25rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.location-accordion .accordion-button .acc-icon {
  width: 30px;
  height: 30px;
}

.location-accordion .accordion-button .acc-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.location-accordion .accordion-button .acc-txt {
  font-size: 1.25rem;
  font-weight: 500;
  font-family: var(--TT_Neoris_Medium);
  color: var(--primary);
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.location-accordion .accordion-body {
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--Metropolis-regular);
  color: var(--text-color);
}

.location-accordion .accordion-item {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border: var(--bs-accordion-border-width) solid rgba(86, 86, 86, 0.25);
}

.location-accordion .accordion-item:last-of-type {
  border-bottom-right-radius: unset;
  border-bottom-left-radius: unset;
  border: unset !important;
}

.location-details {
  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.75rem;
}

.location-details .location-item {
  position: relative;
  font-weight: 400;
  text-transform: capitalize;
  padding: 0 0 0 2rem;
  color: var(--text-color);
}

.location-details .location-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-color);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.location-map {
  width: 100%;
  border-radius: 9px;
  overflow: hidden;
  height: 100%;
}

.location-map img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  height: 100%;
}

.location-map iframe {
  display: block;
  width: 100%;
  height: 470px;
  border: 0;
}

/* desktop: map fills the column so it ends level with the accordion */
@media (min-width: 992px) {
  .map-content .row {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .location-map iframe {
    height: 100%;
    min-height: 470px;
  }
}

section.section-about {
  padding: 4rem 0 6rem 0;
}

.about-main-content {
  margin: 4rem auto auto auto;
}

.about-img {
  width: 100%;
  height: 100%;
}

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

/* =====================================================================
   CONTACT BAND
   The closing call-to-action runs as a light grey band between the white
   About section and the white footer, so the enquiry form reads as the
   page's final destination rather than more of the same page. The form
   fields are lifted to white here (they are a translucent grey by
   default, which would have dissolved into the band).
   ===================================================================== */

section.section-contact {
  position: relative;
  isolation: isolate;
  padding: 5rem 0;
  background:
    -o-linear-gradient(top, #f7f7f6 0%, #f3f3f3 100%);
  background: linear-gradient(180deg, #f7f7f6 0%, #f3f3f3 100%);
  overflow: hidden;
}

/* gold hairline along the top edge of the band */
section.section-contact::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background:
    -o-linear-gradient(left, rgba(180, 114, 37, 0) 0%, rgba(180, 114, 37, 0.45) 50%, rgba(180, 114, 37, 0) 100%);
  background:
    linear-gradient(90deg, rgba(180, 114, 37, 0) 0%, rgba(180, 114, 37, 0.45) 50%, rgba(180, 114, 37, 0) 100%);
  z-index: 1;
}

/* soft warm glow behind the heading */
section.section-contact::after {
  content: "";
  position: absolute;
  top: -20rem;
  left: 50%;
  width: 52rem;
  height: 52rem;
  max-width: 120vw;
  max-height: 120vw;
  margin-left: -26rem;
  border-radius: 50%;
  background:
    -o-radial-gradient(center, circle, rgba(248, 184, 90, 0.16) 0%, rgba(248, 184, 90, 0) 65%);
  background:
    radial-gradient(circle, rgba(248, 184, 90, 0.16) 0%, rgba(248, 184, 90, 0) 65%);
  pointer-events: none;
  z-index: -1;
}

/* the default field fill is a translucent grey - on the grey band it
   needs to be solid white to stay readable as an input */
.section-contact .custom-input {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.section-contact .custom-input:focus {
  border-color: transparent;
}

.contact-logo {
  width: 18rem;
  max-width: 80%;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  margin: auto;
}

/* the mark is hairline gold on a light band - below ~16rem the medallion
   strokes and the DEVELOPERS lettering stop resolving, so keep it large
   and let the browser resample the 1400px source smoothly */
.contact-logo img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}

/* --- contact heading block ------------------------------------------
   Was a pair of generic .contact-title divs (headline + a run-on phone /
   WhatsApp line). Now a proper heading group: eyebrow, headline, a line
   of supporting copy, and the two contact routes as tappable cards.
   -------------------------------------------------------------------- */
.contact-head {
  text-align: center;
  max-width: 46rem;
  margin: 3.25rem auto 0 auto;
}

.contact-title {
  font-family: var(--Tartuffo-Regular);
  font-size: 2rem;
  line-height: 1.2;
  color: var(--dark);
  text-align: center;
  margin: 0 auto;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.contact-subtitle {
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.8;
  max-width: 34rem;
  margin: 1rem auto 0 auto;
}

/* --- call / WhatsApp cards --- */
.contact-actions {
  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: 0.9rem;
  margin-top: 1.9rem;
}

.contact-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.35rem 0.7rem 0.85rem;
  border: 1px solid rgba(180, 114, 37, 0.28);
  border-radius: var(--radius-full);
  background: #fff;
  text-decoration: none;
  -webkit-transition: border-color 0.4s ease, background-color 0.4s ease,
    -webkit-box-shadow 0.4s ease, -webkit-transform 0.4s ease;
  transition: border-color 0.4s ease, background-color 0.4s ease,
    -webkit-box-shadow 0.4s ease, -webkit-transform 0.4s ease;
  -o-transition: border-color 0.4s ease, background-color 0.4s ease,
    box-shadow 0.4s ease, transform 0.4s ease;
  transition: border-color 0.4s ease, background-color 0.4s ease,
    box-shadow 0.4s ease, transform 0.4s ease;
  transition: border-color 0.4s ease, background-color 0.4s ease,
    box-shadow 0.4s ease, transform 0.4s ease, -webkit-box-shadow 0.4s ease,
    -webkit-transform 0.4s ease;
}

.contact-action:hover,
.contact-action:focus-visible {
  border-color: var(--primary);
  background: #fff;
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 14px 28px -18px rgba(56, 36, 10, 0.6);
  box-shadow: 0 14px 28px -18px rgba(56, 36, 10, 0.6);
}

.contact-action-icon {
  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;
  width: 2.4rem;
  height: 2.4rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    -o-linear-gradient(left, var(--primary-deep) 0%, var(--primary) 55%, var(--primary-light) 100%);
  background:
    linear-gradient(90deg, var(--primary-deep) 0%, var(--primary) 55%, var(--primary-light) 100%);
  color: #fff;
  font-size: 0.95rem;
}

.contact-action.is-whatsapp .contact-action-icon {
  background:
    -o-linear-gradient(left, #1da851 0%, #25d366 100%);
  background: linear-gradient(90deg, #1da851 0%, #25d366 100%);
  font-size: 1.15rem;
}

.contact-action-txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: left;
  color: var(--dark);
  font-family: var(--TT_Neoris_Medium), sans-serif;
  font-size: 1rem;
  line-height: 1.25;
}

.contact-action-txt small {
  color: var(--text-color-2);
  font-family: var(--TT_Neoris_Regular), sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.contact-form {
  margin: 3rem auto auto auto;
}

footer {
  padding: 2rem 0;
}

/* the same mark as the header, sized to sit above the RERA QR */
.footer-logo {
  width: 175px;
  max-width: 60%;
  margin: 0 auto 2.5rem auto;
}

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

/* the thank-you page has far less in its footer, so the mark carries it */
.footer-logo.is-large {
  width: 260px;
  max-width: 75%;
}

.footer-qr {
  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: 5rem;
}

.qr-content {
  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;
  gap: 0.5rem;
  margin: 0 0 3rem 0;
  /* fixed width so the QR stays a sensible size no matter how many are
     listed - it used to inherit its size from the flex row, which made a
     single code stretch to fill the whole width */
  width: 150px;
}

.qr-content .qr-img {
  width: 100%;
}

.qr-content .qr-img img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}

.qr-content .qr-txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  color: var(--text-color);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.disc {
  color: var(--text-color);
  /* margin: 3rem 0; */
  font-size: 0.95rem;
}

.disc strong {
  font-size: 1.035rem;
  font-weight: 600;
}

.footer-copyright {
  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;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
}

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

.custom-modal-content {
  position: relative;
  padding: 1.25rem 0.5rem 0.5rem 0.5rem;
}

.modal-logo {
  width: 12rem;
  max-width: 100%;
  margin: 3rem auto 1rem auto;
}

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

.modal-close {
  position: absolute;
  top: 3%;
  width: 48px;
  height: 48px;
  right: 3%;
  cursor: pointer;
}

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

.fixed-button {
  position: fixed;
  display: block;
  right: 1.5%;
  bottom: 2.5%;
  gap: 1rem;
  z-index: 999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: auto;
}

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

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

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

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

/* thank you css */

/* =====================================================================
   THANK YOU PAGE
   A single centred card on the site's grey band. The previous version
   set its type in var(--Metropolis-Meduim) / var(--Metropolis-Regular),
   neither of which is defined in this stylesheet - the headings were
   silently falling back to the body font. Uses the real brand faces now.
   ===================================================================== */

section.section-thankyou {
  min-height: calc(100vh - 75px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 7rem 1.25rem 4rem 1.25rem;
  background:
    -o-linear-gradient(top, #f7f7f6 0%, #f3f3f3 100%);
  background: linear-gradient(180deg, #f7f7f6 0%, #f3f3f3 100%);
}

.thankyou-card {
  width: 100%;
  max-width: 34rem;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(180, 114, 37, 0.14);
  border-radius: var(--radius-1);
  padding: 3.25rem 2.5rem 2.75rem 2.5rem;
  -webkit-box-shadow: 0 26px 60px -34px rgba(56, 36, 10, 0.45);
  box-shadow: 0 26px 60px -34px rgba(56, 36, 10, 0.45);
}

/* --- drawn tick --- */
.thankyou-mark {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.6rem auto;
}

.thankyou-mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thankyou-mark-ring {
  stroke: var(--primary);
  stroke-width: 1.5;
  opacity: 0.45;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  -webkit-animation: thankyou-draw 0.9s ease forwards;
  animation: thankyou-draw 0.9s ease forwards;
}

.thankyou-mark-tick {
  stroke: var(--primary);
  stroke-width: 3;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  -webkit-animation: thankyou-draw 0.5s 0.55s ease forwards;
  animation: thankyou-draw 0.5s 0.55s ease forwards;
}

@-webkit-keyframes thankyou-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes thankyou-draw {
  to { stroke-dashoffset: 0; }
}

/* --- copy --- */
.thankyou-eyebrow {
  display: block;
  color: var(--primary);
  font-family: var(--TT_Neoris_Medium), sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  opacity: 0.85;
}

.thankyou-title {
  color: var(--dark);
  font-family: var(--Tartuffo-Regular), serif;
  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 400;
  text-align: center;
  margin: 0;
}

.thankyou-subtitle {
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.8;
  text-align: center;
  text-wrap: balance;
  margin: 0.9rem auto 0 auto;
  max-width: 26rem;
}

/* --- actions --- */
.thankyou-actions {
  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: 0.7rem;
  margin-top: 2rem;
}

.thankyou-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem;
  border: 1px solid rgba(180, 114, 37, 0.35);
  border-radius: var(--radius-full);
  color: var(--primary);
  font-family: var(--TT_Neoris_Medium), sans-serif;
  font-size: 0.95rem;
  text-decoration: none;
  -webkit-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.thankyou-btn:hover {
  border-color: var(--primary);
  background: rgba(180, 114, 37, 0.07);
  color: var(--primary);
}

.thankyou-btn.is-primary {
  border-color: transparent;
  color: #fff;
  background:
    -o-linear-gradient(left, var(--primary-deep) 0%, var(--primary) 55%, var(--primary-light) 100%);
  background:
    linear-gradient(90deg, var(--primary-deep) 0%, var(--primary) 55%, var(--primary-light) 100%);
  -webkit-box-shadow: 0 10px 22px -12px rgba(143, 90, 29, 0.9);
  box-shadow: 0 10px 22px -12px rgba(143, 90, 29, 0.9);
}

.thankyou-btn.is-primary:hover {
  color: #fff;
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}

.thankyou-call {
  display: block;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(180, 114, 37, 0.16);
  color: var(--text-color-2);
  font-size: 0.9rem;
  text-decoration: none;
}

.thankyou-call span {
  color: var(--primary);
  font-family: var(--TT_Neoris_Medium), sans-serif;
}

@media only screen and (max-width: 575px) {
  section.section-thankyou {
    padding: 6rem 1rem 3rem 1rem;
  }

  .thankyou-card {
    padding: 2.5rem 1.4rem 2rem 1.4rem;
  }

  .thankyou-mark {
    width: 4.25rem;
    height: 4.25rem;
    margin-bottom: 1.3rem;
  }

  .thankyou-title {
    font-size: 1.75rem;
  }

  .thankyou-subtitle {
    font-size: 0.95rem;
  }

  /* full-width taps rather than two cramped pills */
  .thankyou-actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .thankyou-btn {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thankyou-mark-ring,
  .thankyou-mark-tick {
    -webkit-animation: none;
    animation: none;
    stroke-dashoffset: 0;
  }
}

/*********** media query *********/

@media only screen and (max-width: 1400px) {
  .navbar-container {
    padding: 1rem 4rem;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }
}

@media only screen and (max-width: 1200px) {
  .navbar-container {
    padding: 1rem 2rem;
  }

  .navLinks {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    gap: 1rem;
  }
}

@media only screen and (max-width: 1080px) {
  .navbar-container {
    padding: 1rem 2rem;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }

  .menu {
    display: block;
  }

  .navLinks {
    display: none;
  }
}

@media only screen and (max-width: 991px) {
  .section-heading .section-title {
    font-size: 5.5vw;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .overview-main-content {
    margin: 3rem auto auto auto;
  }

  .overview-subcontent {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .overview-subcontent .overview-subcontent-txt {
    font-size: 1rem;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .gallery-swiper-container {
    width: 90%;
    margin: 2.75rem auto auto auto;
  }

  .gallery-content {
    width: 90%;
    margin: auto;
  }

  .gallery-swiper-container .swiper-nav .swiper-button {
    top: 45%;
    width: 50px;
    height: 50px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .gallery-swiper-container .swiper-nav .swiper-button.swiper-button-next-2 {
    right: -25px;
  }

  .map-content {
    margin: 3rem auto auto auto;
  }

  .location-accordion .accordion-button .acc-txt {
    font-size: 1.05rem;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .copy-right {
    text-align: center;
  }

  .footer-copyright {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
  }
}

@media only screen and (max-width: 767px) {
  /* one plan per row once two cards no longer fit comfortably */
  .config-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

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

  section.main-banner {
    margin: 4.5rem 0 0 0;
  }

  .section-heading .section-title {
    font-size: 6vw;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .amens-details {
    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;
    gap: 0.25rem;
  }

  .amens-details .amens-icon {
    width: 60px;
    height: 60px;
  }

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

  .amens-details .amens-txt {
    text-align: center;
    font-size: 0.95rem;
  }

  .amenities-carousel-mobile .owl-nav {
    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: 1rem;
    margin: 1.5rem auto auto auto;
  }

  .amenities-carousel-mobile .owl-nav button {
    width: 45px;
    height: 45px;
  }

  .amenities-carousel-mobile .owl-nav button img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }

  .overview-content {
    margin: 1.5rem auto auto auto;
  }

  .amenities-contents {
    width: 100%;
  }

  .contact-head {
    margin-top: 2.5rem;
  }

  .contact-title {
    font-size: 1.85rem;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .contact-subtitle {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  .contact-actions {
    gap: 0.7rem;
    margin-top: 1.5rem;
  }

  .fixed-button {
    display: none;
  }

  /* 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));
    /* backdrop-filter: blur(5px); */
  }

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

  .mobile-fixed-content .btn-fixed {
    width: 35%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    top: -7px;
    font-size: 1.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) {
  .navbar-container {
    padding: 1rem;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }

  .section-title.pattern::after {
    left: -10%;
    width: 1.5rem;
    height: 1.5rem;
  }

  .section-title.pattern::before {
    right: -10%;
    width: 1.5rem;
    height: 1.5rem;
  }

  .overview-form {
    padding: 1.25rem 1.5rem 1.85rem 1.5rem;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .form-title {
    font-size: 1rem;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .config-content {
    width: 90%;
  }

  /* the three chips stay on a single row on mobile - they shrink to fit
     rather than wrapping "On Request" onto a line of its own */
  .config-swiper-content .config-txt {
    gap: 0.4rem;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .config-swiper-content .config-txt span {
    font-size: clamp(0.52rem, 2.65vw, 0.85rem);
    padding: 0.4rem 0.55rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    text-align: center;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .overview-subcontent .overview-subcontent-txt {
    font-size: 0.85rem;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .gallery-swiper-container .swiper-nav .swiper-button {
    width: 45px;
    height: 45px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .contact-logo {
    width: 14rem;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .contact-title {
    font-size: 1.55rem;
    margin: 0 auto;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  /* stack the two contact routes so each stays a full-width tap target */
  .contact-actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .contact-action {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 0.65rem 1rem 0.65rem 0.7rem;
  }

  .footer-qr {
    /* was a hard 3-column grid, which left-aligned a lone QR into column 1;
       flex-wrap centres whatever number of codes are present */
    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: 2rem;
  }

  .qr-content {
    width: 130px;
    margin-bottom: 2rem;
  }

  .qr-content .qr-txt {
    font-size: 0.85rem;
  }

  /* mobile toggle bar */

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

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

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

/* smallest handsets - claw back the last few pixels so the config chip row
   still clears the card border on a single line */
@media only screen and (max-width: 360px) {
  .config-swiper-content {
    padding: 1.25rem 0.7rem 0.85rem 0.7rem;
  }

  .config-swiper-content .config-txt {
    gap: 0.3rem;
  }

  .config-swiper-content .config-txt span {
    font-size: clamp(0.5rem, 2.5vw, 0.8rem);
    padding: 0.35rem 0.45rem;
  }
}

@media only screen and (max-width: 350px) {
  .footer-qr {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .qr-content .qr-img {
    width: 60px;
    height: 60px;
  }
  .qr-content .qr-txt {
    font-size: 0.785rem;
  }

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

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

/* =====================================================================
   OVERVIEW SECTION
   Replicated verbatim from https://00aws-rl1.realatte.com/piramal-custom/
   Class names verified to not collide with any existing rule in this file.
   ===================================================================== */

/* Cormorant Garamond is loaded via <link> in index.php <head> */

.overview {
  /* tokens the reference section depends on; scoped so the rest of the
     site is untouched. --primary intentionally inherits this site's gold
     (#ac883a) rather than the reference's #A77D40 - change here to match
     the reference exactly. */
  --white: #ffffff;
  --color: #f8b85a;
  --font-cormorant: 'Cormorant Garamond', serif;

  /* the reference only sets .overview padding under 991px, leaving desktop
     flush. 4rem matches the section this replaced and the surrounding
     sections (3-5rem). */
  padding: 4rem 0;

  /* same grey band as the closing contact section, so the page opens and
     closes on the same tone with the white sections held between them */
  position: relative;
  isolation: isolate;
  background:
    -o-linear-gradient(top, #f7f7f6 0%, #f3f3f3 100%);
  background: linear-gradient(180deg, #f7f7f6 0%, #f3f3f3 100%);
  overflow: hidden;
}

/* gold hairline along the top edge of the band */
.overview::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background:
    -o-linear-gradient(left, rgba(180, 114, 37, 0) 0%, rgba(180, 114, 37, 0.45) 50%, rgba(180, 114, 37, 0) 100%);
  background:
    linear-gradient(90deg, rgba(180, 114, 37, 0) 0%, rgba(180, 114, 37, 0.45) 50%, rgba(180, 114, 37, 0) 100%);
  z-index: 1;
}

/* soft warm glow behind the copy column */
.overview::after {
  content: "";
  position: absolute;
  top: -14rem;
  left: -10rem;
  width: 48rem;
  height: 48rem;
  max-width: 120vw;
  max-height: 120vw;
  border-radius: 50%;
  background:
    -o-radial-gradient(center, circle, rgba(248, 184, 90, 0.16) 0%, rgba(248, 184, 90, 0) 65%);
  background:
    radial-gradient(circle, rgba(248, 184, 90, 0.16) 0%, rgba(248, 184, 90, 0) 65%);
  pointer-events: none;
  z-index: -1;
}

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

.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; */
  color: var(--text-color);
}

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

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

.overview .btn-primary {
  color: var(--white);
  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;
}

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

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

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

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

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

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

@media only screen and (max-width: 991px) {
  .overview { padding: 4rem 0; }
  .overview-container { width: 95%; margin: auto auto auto auto; }
  .sub-title { font-size: 2.5rem; }
}

@media only screen and (max-width: 767px) {
  .overview { padding: 2rem 0; }
  .sub-title { font-size: 2.5rem; }
  .overview-container { width: 95%; margin: auto auto auto auto; }
}

/* =====================================================================
   ABOUT SECTION
   Editorial two-column layout: a bracketed image plate on the left, the
   narrative and credentials on the right, and the collection roll below.
   Body copy stays left-aligned at every breakpoint (centring it read
   badly over a long measure); the plate keeps a fixed aspect ratio so
   the two columns stay balanced as they scale.
   ===================================================================== */

section.section-about {
  position: relative;
  isolation: isolate;
  background:
    -webkit-gradient(linear, left top, left bottom,
      from(#ffffff), color-stop(45%, #fdfaf5), to(#ffffff));
  background:
    -o-linear-gradient(top, #ffffff 0%, #fdfaf5 45%, #ffffff 100%);
  background:
    linear-gradient(180deg, #ffffff 0%, #fdfaf5 45%, #ffffff 100%);
  overflow: hidden;
}

/* soft warm wash behind the plate, purely decorative */
section.section-about::before {
  content: "";
  position: absolute;
  top: 12%;
  left: -12%;
  width: 46rem;
  height: 46rem;
  max-width: 90vw;
  max-height: 90vw;
  border-radius: 50%;
  background:
    -o-radial-gradient(center, circle, rgba(248, 184, 90, 0.16) 0%, rgba(248, 184, 90, 0) 68%);
  background:
    radial-gradient(circle, rgba(248, 184, 90, 0.16) 0%, rgba(248, 184, 90, 0) 68%);
  pointer-events: none;
  z-index: -1;
}

.about-eyebrow {
  display: block;
  color: var(--primary);
  font-family: var(--TT_Neoris_Medium), sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  opacity: 0.85;
}

/* --- image plate --------------------------------------------------- */
.about-figure {
  position: relative;
  margin: 0;
  padding: 0;
}

/* the photograph carries the section on its own - no gold corner brackets,
   no inner hairline, no drop shadow, per the reference */
.about-figure-frame {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.about-figure-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  -o-object-fit: cover;
  object-fit: cover;
}

/* floating credential card */
/* Currently unused - the badge markup is commented out in index.php. The
   plate it was pinned to (14px padding + 12px inner hairline) is gone with
   the flat treatment, so these offsets need revisiting if it comes back. */
.about-badge {
  position: absolute;
  left: 26px;
  bottom: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.25rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(180, 114, 37, 0.2);
  border-radius: 12px;
  -webkit-box-shadow: 0 16px 34px -18px rgba(56, 36, 10, 0.5);
  box-shadow: 0 16px 34px -18px rgba(56, 36, 10, 0.5);
}

.about-badge-icon {
  width: 1.5rem;
  height: 1.5rem;
  -o-object-fit: contain;
  object-fit: contain;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.about-badge-num {
  color: var(--primary);
  font-family: var(--Tartuffo-Medium), serif;
  font-size: 2rem;
  line-height: 1;
}

.about-badge-text {
  color: var(--text-color-2);
  font-size: 0.7rem;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- narrative ----------------------------------------------------- */
.about-body {
  text-align: left;
}

/* lead and body read as one flowing paragraph block */
.about-lead {
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 1.15rem;
}

.about-lead em {
  color: var(--primary);
  font-style: normal;
}

.about-para {
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 1.25rem;
}

.about-para:last-child {
  margin-bottom: 0;
}

/* --- credentials row ----------------------------------------------- */
.about-stats {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(0, 1fr))[3];
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(56, 36, 10, 0.12);
}

.about-stat {
  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.3rem;
  padding-left: 1.35rem;
  border-left: 1px solid rgba(56, 36, 10, 0.1);
  min-width: 0;
}

.about-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.about-stat-num {
  color: var(--primary);
  font-family: var(--Tartuffo-Medium), serif;
  font-size: 1.75rem;
  line-height: 1.1;
}

.about-stat-label {
  color: var(--text-color-2);
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* --- collection roll ------------------------------------------------ */
.about-collection {
  margin-top: 4.5rem;
  text-align: center;
}

.about-collection-head {
  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;
  gap: 1.15rem;
  margin-bottom: 1.6rem;
}

/* hairline rules flanking the label */
.about-collection-head::before,
.about-collection-head::after {
  content: "";
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  max-width: 5.5rem;
  height: 1px;
}

.about-collection-head::before {
  background:
    -o-linear-gradient(left, rgba(180, 114, 37, 0) 0%, rgba(180, 114, 37, 0.5) 100%);
  background:
    linear-gradient(90deg, rgba(180, 114, 37, 0) 0%, rgba(180, 114, 37, 0.5) 100%);
}

.about-collection-head::after {
  background:
    -o-linear-gradient(left, rgba(180, 114, 37, 0.5) 0%, rgba(180, 114, 37, 0) 100%);
  background:
    linear-gradient(90deg, rgba(180, 114, 37, 0.5) 0%, rgba(180, 114, 37, 0) 100%);
}

.about-collection-title {
  color: var(--text-color-2);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0;
  white-space: nowrap;
}

.about-chips {
  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: 0.65rem;
}

.about-chip {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(180, 114, 37, 0.3);
  border-radius: var(--radius-full);
  padding: 0.5rem 1.2rem;
  font-size: 0.88rem;
  line-height: 1.2;
  color: var(--text-color);
  -webkit-transition: color 0.35s ease, border-color 0.35s ease,
    background-color 0.35s ease, -webkit-transform 0.35s ease;
  transition: color 0.35s ease, border-color 0.35s ease,
    background-color 0.35s ease, -webkit-transform 0.35s ease;
  -o-transition: color 0.35s ease, border-color 0.35s ease,
    background-color 0.35s ease, transform 0.35s ease;
  transition: color 0.35s ease, border-color 0.35s ease,
    background-color 0.35s ease, transform 0.35s ease;
  transition: color 0.35s ease, border-color 0.35s ease,
    background-color 0.35s ease, transform 0.35s ease, -webkit-transform 0.35s ease;
}

.about-chip:hover {
  border-color: var(--primary);
  background: rgba(180, 114, 37, 0.07);
  color: var(--primary);
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}

.about-chip.is-current {
  background:
    -o-linear-gradient(left, var(--primary-deep) 0%, var(--primary) 55%, var(--primary-light) 100%);
  background:
    linear-gradient(90deg, var(--primary-deep) 0%, var(--primary) 55%, var(--primary-light) 100%);
  border-color: transparent;
  color: #fff;
  font-family: var(--TT_Neoris_Medium), sans-serif;
  letter-spacing: 0.02em;
  -webkit-box-shadow: 0 8px 20px -10px rgba(143, 90, 29, 0.85);
  box-shadow: 0 8px 20px -10px rgba(143, 90, 29, 0.85);
}

.about-chip.is-current:hover {
  color: #fff;
}

@media only screen and (max-width: 1200px) {
  .about-stat-num { font-size: 1.5rem; }
  .about-badge-num { font-size: 1.75rem; }
}

@media only screen and (max-width: 991px) {
  .about-main-content { margin-top: 3rem; }
  .about-figure-frame img { aspect-ratio: 16 / 9; }
  .about-collection { margin-top: 3rem; }
}

@media only screen and (max-width: 767px) {
  section.section-about { padding: 2rem 0 3.5rem 0; }
  .about-eyebrow { font-size: 0.66rem; letter-spacing: 0.26em; }
  .about-main-content { margin-top: 2.25rem; }
  .about-figure-frame img { aspect-ratio: 3 / 2; }
  /* tuck the card inside the plate so it never hangs off the gutter */
  /* padding drops to 10px and the hairline inset to 9px here */
  .about-badge { left: 19px; bottom: 19px; padding: 0.65rem 0.9rem; gap: 0.55rem; }
  .about-badge-icon { width: 1.2rem; height: 1.2rem; }
  .about-badge-num { font-size: 1.5rem; }
  .about-badge-text { font-size: 0.62rem; letter-spacing: 0.1em; }
  .about-lead { line-height: 1.8; }
  .about-para { line-height: 1.8; }
  .about-stats {
    margin-top: 1.85rem;
    padding-top: 1.5rem;
  }
  .about-stat { padding-left: 0.9rem; gap: 0.2rem; }
  .about-stat-num { font-size: 1.25rem; }
  .about-stat-label { font-size: 0.65rem; letter-spacing: 0.07em; }
  .about-collection-head { gap: 0.75rem; margin-bottom: 1.25rem; }
  .about-collection-head::before,
  .about-collection-head::after { max-width: 2.5rem; }
  .about-collection-title { font-size: 0.68rem; letter-spacing: 0.14em; }
  .about-chip { padding: 0.4rem 0.95rem; font-size: 0.82rem; }
}

@media only screen and (max-width: 576px) {
  /* the heading's flower marks are offset by a percentage of the title, so
     on narrow screens they ran off the edge — pin them to a fixed inset and
     reserve the gutter they need */
  .section-about .section-heading {
    max-width: calc(100% - 4.25rem);
  }
  .section-about .section-title.pattern::after { left: -2.15rem; }
  .section-about .section-title.pattern::before { right: -2.15rem; }
}

@media only screen and (max-width: 480px) {
  /* three columns get too cramped — stack them as a ledger */
  .about-stats {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .about-stat {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 1rem;
    padding-left: 0;
    padding-bottom: 0.9rem;
    border-left: 0;
    border-bottom: 1px solid rgba(56, 36, 10, 0.1);
  }
  .about-stat:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .about-stat-num { font-size: 1.35rem; }
  .about-badge { padding: 0.55rem 0.8rem; }
  .about-badge-num { font-size: 1.3rem; }
  .about-badge-text { font-size: 0.58rem; }
}

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

/* =====================================================================
   MOBILE FIXED CTA BAR - FOOTER CLEARANCE
   The .mobile-fixed-button bar is position:fixed and occupies roughly the
   bottom 108px of the viewport below 767px, which covered the end of the
   footer (RERA QR, disclaimer, copyright). Reserve that space so the last
   of the footer can always be scrolled clear of the bar.
   ===================================================================== */

@media only screen and (max-width: 767px) {
  footer {
    padding-bottom: 8.5rem;
  }
}

/* =====================================================================
   SECTION RHYTHM
   Two problems this fixes:

   1. Adjacent sections shared a background, so the seam between them
      disappeared - overview ran into configurations (both ended #f3f3f3
      via the .primary-bg wrapper) and amenities ran into gallery (both
      white). Backgrounds now alternate grey / white all the way down, so
      every section is visibly its own block.

   2. Vertical padding was set per-section and never agreed: 5rem on
      config, 3.5rem on amenities, 1rem/4rem on gallery, 3rem on
      location, 4rem/6rem on about. It is one value for every section
      now, and a larger one, so the page breathes evenly.

   Declared last so it wins over the per-section rules above.
   ===================================================================== */

.overview,
section.section-amenities,
section.section-location,
section.section-contact {
  background:
    -o-linear-gradient(top, #f7f7f6 0%, #f3f3f3 100%);
  background: linear-gradient(180deg, #f7f7f6 0%, #f3f3f3 100%);
}

/* the .primary-bg wrapper tints these grey from behind - they sit in the
   white slots of the rhythm, so they need an explicit white of their own */
section.section-config,
section.section-gallery {
  background: #fff;
}

/* gold hairline opening each grey band, matching overview and contact */
section.section-amenities,
section.section-location {
  position: relative;
}

section.section-amenities::before,
section.section-location::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background:
    -o-linear-gradient(left, rgba(180, 114, 37, 0) 0%, rgba(180, 114, 37, 0.45) 50%, rgba(180, 114, 37, 0) 100%);
  background:
    linear-gradient(90deg, rgba(180, 114, 37, 0) 0%, rgba(180, 114, 37, 0.45) 50%, rgba(180, 114, 37, 0) 100%);
}

/* --- one vertical rhythm for every section --- */
.overview,
section.section-config,
section.section-amenities,
section.section-gallery,
section.section-location,
section.section-about,
section.section-contact {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

@media only screen and (max-width: 991px) {
  .overview,
  section.section-config,
  section.section-amenities,
  section.section-gallery,
  section.section-location,
  section.section-about,
  section.section-contact {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .overview,
  section.section-config,
  section.section-amenities,
  section.section-gallery,
  section.section-location,
  section.section-about,
  section.section-contact {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}


/* =====================================================================
   CLOSING DARK BAND
   Matched to the Lotus Aquaria reference: everything past the About
   section - the enquiry band and the footer - runs on charcoal, with the
   gold allowed to run at full strength against it. Every piece of copy
   that sat dark-on-light is lifted here, and the QR gets a white plate
   so it stays scannable. Shared by index.php and thank-you.php.

   Declared last so it wins over the SECTION RHYTHM rules above.
   ===================================================================== */

section.section-contact {
  background:
    radial-gradient(38rem 26rem at 50% 0%, rgba(237, 179, 104, 0.16), transparent 65%),
    var(--charcoal);
}

section.section-contact .contact-title {
  color: var(--primary-light);
}

section.section-contact .contact-subtitle,
section.section-contact .form-check-label {
  color: #c9c2b6;
}

section.section-contact .custom-input {
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(237, 179, 104, 0.28);
  color: #f6efe4;
}

section.section-contact .custom-input::-webkit-input-placeholder {
  color: #b9b1a4;
}

section.section-contact .custom-input::-moz-placeholder {
  color: #b9b1a4;
}

section.section-contact .custom-input:-ms-input-placeholder {
  color: #b9b1a4;
}

section.section-contact .custom-input::placeholder {
  color: #b9b1a4;
}

section.section-contact .custom-input:focus {
  background-color: rgba(255, 255, 255, 0.11);
  border-color: var(--primary-light);
  color: #fff;
}

footer {
  background: var(--charcoal);
  color: #c9c2b6;
}

footer .disc,
footer .copy-right,
footer .created p,
footer .qr-content .qr-txt {
  color: #a9a297;
}

footer .qr-content .qr-txt p:last-child {
  color: var(--primary-light);
}

footer .disc a,
footer .qr-content .qr-txt a {
  color: var(--primary-light);
  text-decoration: none;
}

footer .disc a:hover,
footer .qr-content .qr-txt a:hover {
  color: var(--primary-light);
  text-decoration: underline;
}

footer hr {
  border-color: rgba(237, 179, 104, 0.22);
  opacity: 1;
}

/* the QR needs a light plate to stay scannable on the dark band */
footer .qr-content .qr-img {
  background: #fff;
  padding: 6px;
  border-radius: 6px;
}