:root {

  /* ===== Global Riverfront palette: white ground + terracotta (#944c3c) + soft terracotta accent ===== */
  --fontPrimary: #944c3c;
  /* taupe-brown (e-brochure cover panel)  headings, strong text, borders */
  --fontSecondary: #6d5d5a;
  /* warm grey  body text */
  --bgColorPrimary: #ffffff;
  /* white  primary background (e-brochure ground) */
  --bgColorSecondary: #f9f2f0;
  /* soft warm off-white  secondary background band */
  --buttonTextColor: #ffffff;
  /* white text on taupe-brown CTAs */
  --accentOrange: #bd7a6b;
  /* rose-gold accent (var name kept for compatibility) */
  --buttonColor: linear-gradient(135deg, #ab5b49, #944c3c 55%, #743c2f);
  /* taupe-brown gradient CTA */

  /* Extended luxury tokens  taupe-brown (#944c3c) + rose-gold (#bd7a6b) system */
  --gold: #bd7a6b;
  --goldLight: #d19f94;
  --goldDeep: #a35d4d;
  --charcoal: #944c3c;
  --charcoal2: #ab5b49;
  --ivory: #ffffff;
  --champagne: #f9f2f0;
}

.aboutSection .floorPlanSectionTitle,
.bannerMainTitle,
.bannerPrice,
.price-title,
.quoteTitle,
.tourHeading {
  -webkit-text-fill-color: transparent
}

@media (max-width:1280px) {
  .headerNav {
    gap: 10px;
    margin: 0 20px;
  }
}

.map-image-container iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}


.amenitiesDownload,
.bannerIntroSection,
.galleryDownload {
  text-align: center
}

.bannerOfferSection {
  margin: 10px 0;
  text-align: center
}

.bannerOffer {
  background: rgba(148, 76, 60, 0.08);
  border: 1px solid var(--fontPrimary);
  box-shadow: 0 0 2px var(--fontPrimary);
  border-radius: 12px;
  padding: 10px 20px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: .3s;
  margin-bottom: 10px;
}

@keyframes shimmer {
  0% {
    left: -100%
  }

  100% {
    left: 100%
  }
}

.offerText {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--fontPrimary);
  margin-bottom: 5px
}

.offerText:last-child {
  margin-bottom: 0px;
}

.quotePopupClose,
.quoteSubmit {
  border: none;
  transition: .3s;
  cursor: pointer
}

.highlightsList li,
.overviewDescription {
  line-height: 1.8;
  color: var(--fontSecondary);
  font-size: 16px
}

.amenitiesDownloadBtn::before,
.floorPlanCta::before,
.galleryDownloadBtn::before,
.map-cta::before,
.overviewBrochureButton::before,
.price-get-details::before,
.quoteSubmit::before,
.requestButton::before,
.bannerOverlayBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  animation: 3s infinite shimmer
}

.amenitiesDownloadBtn:hover,
.floorPlanCta:hover,
.galleryDownloadBtn:hover,
.map-cta:hover,
.overviewBrochureButton:hover,
.quoteSubmit:hover,
.requestButton:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(148, 76, 60, .5)
}

.floorPlanCta:active,
.map-cta:active,
.overviewBrochureButton:active,
.price-get-details:active,
.quoteSubmit:active,
.requestButton:active {
  transform: translateY(-1px)
}

.quotePopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(5px)
}

.quotePopupOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 0
}

.quotePopupContent {
  position: relative;
  background: var(--bgColorPrimary);
  border-radius: 20px;
  padding: 40px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0px 5px var(--fontPrimary);
  /* border: 1px solid var(--fontPrimary); */
  animation: .3s ease-out popupSlideIn;
  z-index: 1
}

@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: scale(.8) translateY(-50px)
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0)
  }
}

.quotePopupClose {
  position: absolute;
  top: 15px;
  right: 15px;
  background: 0 0;
  color: var(--fontPrimary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 2;
  pointer-events: auto
}

.quotePopupClose:hover {
  background: rgba(189, 122, 107, .15)
}

.quotePopup .quoteForm {
  background: 0 0;
  padding: 0;
  border: none;
  box-shadow: none
}

.quotePopup .quoteTitle {
  font-size: 28px;
  margin-bottom: 1.5vhx;
  text-align: center;
  line-height: 1.5;
}

.quotePopup .quoteInput,
.quotePopup .quotePhoneInput,
.quotePopup .quoteSelect {
  font-size: 16px;
  margin: 0px 0 1.5vh;
  padding: 10px 25px
}

.quotePopup .quoteSubmit {
  margin-top: 1vh;
  font-size: 15px;
  padding: 10px 25px
}

.overviewSection {
  background: var(--bgColorPrimary);
  padding: 25px 0 35px
}

.overviewContainer {
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
  max-width: 1300px;
}

.overviewDescriptionSection {
  margin-bottom: 60px;
  text-align: center
}

.overviewContent {
  display: flex;
  align-items: center;
  gap: 60px;
  /* min-height: 500px */
  max-width: 1200px;
  margin: 0 auto;
}

.overviewTextSection {
  flex: 1;
  padding-right: 20px
}

.amenitiesTitle,
.galleryTitle,
.highlightsTitle,
.map-title,
.overviewTitle {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  background: var(--fontPrimary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  line-height: 1.5;
}

.overviewDescription {
  margin-bottom: 40px;
  text-align: justify
}

.highlightsList {
  list-style: none;
  margin-bottom: 40px
}

.highlightsList li {
  margin-bottom: 15px;
  padding-left: 30px;
  position: relative
}

.highlightsList li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--fontPrimary);
  font-weight: 700;
  font-size: 18px
}

.overviewBrochureButton {
  background: var(--buttonColor);
  color: var(--buttonTextColor);
  border: none;
  padding: 10px 25px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  box-shadow: 0 4px 15px rgba(148, 76, 60, .3);
  display: block;
  margin: 0 auto;
  position: relative;
  overflow: hidden
}

.overviewImageSection {
  display: block;
}

.overviewImage {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0px 20px rgba(0, 0, 0, .3);
  border: 2px solid rgba(148, 76, 60, .2);
  transition: transform .3s
}

.amenitiesSlide:hover,
.gallerySlide:hover,
.overviewImage:hover,
.videoThumbnail:hover {
  transform: scale(1.02)
}

.amenitiesSection,
.floorPlanSection,
.gallerySection,
.priceSection {
  padding: 80px 0;
  opacity: 0;
  transform: translateY(50px);
  transition: .8s ease-out
}

.amenitiesSection {
  background: var(--bgColorPrimary);
}

.priceSection {
  background: var(--bgColorSecondary);
}

.floorPlanSection {
  background: var(--bgColorPrimary);
}

.gallerySection {
  background: var(--bgColorSecondary);
}


.amenitiesSection.is-visible,
.floorPlanSection.is-visible,
.gallerySection.is-visible,
.priceSection.is-visible {
  opacity: 1;
  transform: translateY(0)
}

.amenitiesContainer,
.galleryContainer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  width: 100%
}

.amenitiesCarousel,
.galleryCarousel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
  margin-bottom: 40px
}

/* Gallery is shown as a static grid (not a sliding carousel) */
.galleryCarousel {
  overflow: visible;
  border-radius: 0;
  box-shadow: none
}

.amenitiesTrack {
  display: flex;
  transition: transform .5s ease-in-out;
  will-change: transform;
  /* width: 600% */
}

.amenitiesSlide {
  width: 16.666%;
  position: relative;
  cursor: pointer;
  transition: transform .3s
}

@media (max-width:1024px) {

  .headerContainer,
  .overviewContainer {
    padding: 0 30px
  }

  .burgerMenu {
    display: flex
  }

  .headerContactSection {
    display: none
  }

  .headerNav.active,
  .headerNav.active .headerLink {
    opacity: 1;
    transform: translateY(0)
  }

  .headerNav {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 30px 20px;
    gap: 25px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: .5s cubic-bezier(.25, .46, .45, .94);
    /* box-shadow: 0 10px 40px rgba(0, 0, 0, .6); */
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    margin: 0;
    backdrop-filter: blur(10px)
  }

  .headerNav.active {
    visibility: visible
  }

  .headerLink {
    font-size: 15px
  }

  .overviewContent {
    gap: 40px
  }

  .amenitiesTrack {
    width: 100%
  }

  .amenitiesSlide {
    flex: 0 0 100%;
    width: 100%
  }
}

@media (min-width:1025px) {
  .amenitiesCarousel {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px
  }

  .amenitiesTrack {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px
  }

  .amenitiesSlide {
    width: calc(33.333% - 14px);
    flex-shrink: 0;
    margin: 0
  }
}

.amenitiesImageContainer {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden
}

.amenitiesImage,
.galleryImage,
.price-floor-plan img,
.tourImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s
}

.amenitiesLightboxClose:hover,
.amenitiesSlide:hover .amenitiesImage,
.galleryLightboxClose:hover,
.gallerySlide:hover .galleryImage,
.mobileBottomBar a:hover {
  transform: scale(1.1)
}

.amenitiesTextOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  color: #fff;
  padding: 30px 20px 20px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, .8)
}

.amenitiesDownloadBtn,
.amenitiesNext,
.amenitiesPrev,
.galleryDownloadBtn,
.requestButton {
  color: var(--buttonTextColor);
  box-shadow: 0 4px 15px rgba(148, 76, 60, .3);
  transition: .3s;
  cursor: pointer
}

.amenitiesNext,
.amenitiesPrev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--buttonColor);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 10
}

.amenitiesPrev,
.galleryPrev {
  left: 20px
}

.amenitiesNext,
.galleryNext {
  right: 20px
}

.amenitiesNext:hover,
.amenitiesPrev:hover,
.galleryNext:hover,
.galleryPrev:hover {
  background: var(--buttonColor);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(148, 76, 60, .5)
}

.amenitiesDownloadBtn,
.galleryDownloadBtn,
.requestButton {
  background: var(--buttonColor);
  border: none;
  padding: 10px 25px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  overflow: hidden
}

.amenitiesLightbox,
.galleryLightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(10px)
}

.amenitiesLightbox.active,
.galleryLightbox.active {
  display: flex
}

.amenitiesLightboxContent,
.galleryLightboxContent {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  align-items: center;
  justify-content: center
}

.amenitiesLightboxImage,
.galleryLightboxImage {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5)
}

.floorPlanCta,
.galleryNext,
.galleryPrev,
.price-get-details {
  box-shadow: 0 4px 15px rgba(148, 76, 60, .3)
}

.amenitiesLightboxClose,
.galleryLightboxClose {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--buttonColor);
  border: none;
  color: var(--buttonTextColor);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: .3s
}

.amenitiesLightboxNext,
.amenitiesLightboxPrev,
.galleryLightboxNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--buttonColor);
  border: none;
  color: var(--buttonTextColor);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: .3s
}

.map-dropdown-btn {
  justify-content: space-between
}

.amenitiesLightboxPrev,
.galleryLightboxPrev {
  left: 5px
}

.amenitiesLightboxNext,
.galleryLightboxNext {
  right: 5px
}

.amenitiesLightboxNext:hover,
.amenitiesLightboxPrev:hover,
.galleryLightboxNav:hover {
  background: var(--buttonColor);
  transform: translateY(-50%) scale(1.1)
}

.amenitiesLightboxTitle {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, .8)
}

.amenitiesLightboxCounter {
  position: absolute;
  background: var(--buttonColor);
  top: 5px;
  left: 5px;
  color: var(--buttonTextColor);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  padding: 4px 12px;
  border-radius: 20px
}

.price-card::before,
.price-title {
  background: var(--fontPrimary)
}

.price-heading-container {
  text-align: center;
  margin-bottom: 30px
}

.price-subtitle {
  font-size: 16px;
  color: var(--fontSecondary);
  margin-top: 10px;
  font-weight: 500;
}

.price-note {
  max-width: 1100px;
  margin: 30px auto 0;
  padding: 0 40px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fontSecondary);
  opacity: .85;
}

.price-title {
  font-size: 28px;
  font-weight: 700;
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  margin: 0;
  line-height: 1.5;
}

.price-container {
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 280px));
  gap: 30px;
  place-content: center;
  max-width: 1200px;
}

.price-card {
  background: var(--bgColorSecondary);
  border-radius: 20px;
  padding: 5px;
  border: 1px solid var(--fontPrimary);
  transition: .3s;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  background: var(--bgColorPrimary);
}

.price-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px
}

.floorPlanCard:hover,
.price-card:hover {
  transform: translateY(-10px);
  border-color: var(--fontPrimary);
  box-shadow: 0 00px 10px var(--fontPrimary)
}

.price-floor-plan {
  margin-bottom: 20px;
  border-radius: 15px;
  overflow: hidden;
  height: 200px
}

.qrCard:hover img,
.floorPlanCard:hover img,
.price-card:hover .price-floor-plan img,
.videoThumbnail:hover .tourImage {
  transform: scale(1.05)
}

.price-details {
  color: #fff
}

.price-row {
  padding: 0px 0 12px;
  line-height: 1.5;
  display: block;
  text-align: center;
}

.connectivity-item:last-child {
  border-bottom: none
}

.price-label {
  font-size: 18px;
  font-weight: 400;
  color: var(--fontSecondary);
  /* letter-spacing: 1px; */
}

.price-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--fontSecondary);
  /* letter-spacing: 1px; */
}

.price-value.highlight {
  color: var(--fontPrimary);
  font-size: 22px;
}

.price-get-details,
.price-get-details:hover {
  background: var(--buttonColor);
  color: var(--buttonTextColor)
}

.price-get-details {
  text-decoration: none;
  font-weight: 700;
  padding: 10px 25px;
  border-radius: 8px;
  font-size: 16px;
  transition: .3s;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border: none;
  margin-top: 6px;
}

.price-get-details:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(148, 76, 60, .5)
}

.galleryTrack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%
}

.gallerySlide {
  width: 100%;
  position: relative;
  cursor: default;
  transition: transform .3s
}

@media (max-width:1024px) {
  .amenitiesContainer {
    padding: 0 30px
  }

  .amenitiesImageContainer {
    height: 350px
  }

  .price-container {
    padding: 0 30px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px
  }

  .price-floor-plan {
    height: 180px
  }

  .galleryTrack {
    width: 100%;
    grid-template-columns: repeat(2, 1fr)
  }

  .gallerySlide {
    width: 100%
  }
}

@media (min-width:1025px) {
  .galleryCarousel {
    width: 100%;
    position: relative;
    display: block;
    padding: 0
  }

  .galleryTrack {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
  }

  .gallerySlide {
    width: 100%;
    margin: 0
  }
}

.galleryImageContainer {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18)
}

.galleryNext,
.galleryPrev {
  display: none !important
}


.galleryLightboxCounter {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--buttonColor);
  color: var(--buttonTextColor);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  padding: 4px 12px;
  border-radius: 20px
}

@media (max-width:1024px) {
  .galleryContainer {
    padding: 0 30px
  }

  .galleryTitle {
    font-size: 42px
  }

  .galleryImageContainer {
    height: 220px
  }
}

.floorPlanSectionTitle {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--fontPrimary);
  margin-bottom: 30px;
  position: relative;
  line-height: 1.5;
}

.floorPlanCarousel {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px
}

.floorPlanSlides,
.floorPlanSlidesContainer {
  display: contents
}

.floorPlanCard {
  background: rgba(148, 76, 60, 0.08);
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(148, 76, 60, .2);
  transition: .3s;
  position: relative;
  overflow: hidden
}

.floorPlanOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px
}


.floorPlanCard img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px;
  filter: blur(5px);
  transition: transform .3s
}

.floorPlanCard h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fontSecondary);
  text-align: center;
  margin-bottom: 15px
}

.floorPlanOverlay {
  background: rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s
}

.floorPlanButton,
.floorPlanButton:hover {
  background: var(--buttonColor)
}

.floorPlanCard:hover .floorPlanOverlay {
  opacity: 1
}

.floorPlanButton {
  color: var(--buttonTextColor);
  padding: 12px 24px;
  border-radius: 25px;
  border: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: .3s
}

.floorPlanButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(148, 76, 60, .3)
}

.floorPlanIndicators,
.floorPlanNext,
.floorPlanPrev {
  display: none
}

.floorPlanCta {
  background: var(--buttonColor);
  color: var(--buttonTextColor);
  border: none;
  padding: 10px 25px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  display: block;
  margin: 40px auto 0;
  position: relative;
  overflow: hidden
}

.aboutSection,
.virtualTourSection {

  padding: 80px 0;
  color: #fff;
  background: var(--bgColorSecondary);
}

.mapSection,
.aboutSection {
  background: var(--bgColorPrimary);
  padding: 80px 0;
  color: var(--fontSecondary)
}

.footerWrapper,
.map-container,
.tourContainer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px
}

.map-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start
}

.map-left {
  position: relative
}

.map-image-container {
  position: relative;
  width: 100%;
  height: 450px;
  border-radius: 12px;
  border: 2px solid rgba(148, 76, 60, .3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
  overflow: hidden
}

.map-cta {
  box-shadow: 0 4px 15px rgba(148, 76, 60, .3)
}

.map-right {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.map-dropdown {
  background: var(--bgColorSecondary);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .1);
  overflow: hidden;
  transition: .3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.map-dropdown:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(148, 76, 60, .3)
}

.map-dropdown-btn {
  width: 100%;
  background: 0 0;
  border: none;
  color: var(--fontSecondary);
  padding: 15px 25px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: .3s
}

.connectivity-item:hover,
.map-dropdown-btn:hover {
  background: rgba(148, 76, 60, .1)
}

.map-dropdown-btn.active {
  background: var(--buttonColor);
  color: var(--buttonTextColor)
}

.map-arrow {
  transition: transform .3s;
  font-size: 18px
}

.map-arrow.active {
  transform: rotate(180deg);
  /* The active row is filled with the deep-green CTA gradient, so the chevron
     has to match that row's white label - on --fontPrimary it was #944c3c on
     #944c3c and the arrow vanished. */
  color: var(--buttonTextColor)
}

.map-dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s;
  background: var(--bgColorSecondary);
}

.map-dropdown-content.active {
  max-height: 1000px
}

.connectivity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  transition: background .3s;
}

.connectivity-item .location {
  font-size: 16px;
  font-weight: 400;
  color: var(--fontSecondary);
  flex: 1
}

.connectivity-item .time {
  font-size: 14px;
  font-weight: 600;
  color: var(--fontPrimary);
  background: rgba(148, 76, 60, .1);
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap
}

.map-cta {
  background: var(--buttonColor);
  color: var(--buttonTextColor);
  border: none;
  padding: 10px 25px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
  margin-top: 20px;
  position: relative;
  overflow: hidden
}

.tourRow {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap
}

.tourColumn {
  flex: 1;
  max-width: 660px;
  text-align: center;
  background: rgba(255, 255, 255, .05);
  border-radius: 20px;
  padding: 0px;
  /* border: 1px solid #ccc; */
  transition: .3s
}

.tourVideoWrapper,
.videoThumbnail {
  position: relative;
  overflow: hidden;
  border-radius: 15px
}

.tourColumn:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(148, 76, 60, .3);
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  padding: 30px;
}

.tourVideoWrapper {
  margin-bottom: 25px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4)
}

.videoThumbnail {
  width: 100%;
  height: 300px;
  cursor: pointer;
  transition: transform .3s
}

.playButtonOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .3);
  transition: background .3s
}

.aboutSection .floorPlanSectionTitle {
  background: var(--fontPrimary)
}

.videoThumbnail:hover .playButtonOverlay {
  background: rgba(0, 0, 0, .5)
}

.playButton {
  width: 110px;
  height: 80px;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: .3s;
  /* box-shadow: 0 8px 25px rgba(148, 76, 60, .4) */
  background-color: red;
}

.playButton:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 35px red
}

.playButton::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 25px solid #fff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent
}

.aboutSection .floorPlanSectionTitle {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 700;
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  line-height: 1.5;
}

.aboutSectionDescription {
  margin: 0 auto;
  padding: 0 40px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--fontSecondary);
  text-align: center;
  font-weight: 400
}

.readMoreLink {
  color: var(--fontPrimary) !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: .3s;
  display: inline-block;
  position: relative
}

.readMoreLink:hover {
  color: var(--fontPrimary) !important;
  transform: translateY(-2px)
}

.readMoreLink::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--buttonColor);
  transition: width .3s
}

.readMoreLink:hover::after {
  width: 100%
}

.footerDisclaimer,
.footerLinks p {
  font-size: 10px;
  text-align: center
}

.footerContainer {
  background: var(--bgColorSecondary);
  color: #333333;
  padding: 60px 0 30px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.footerList {
  margin-bottom: 30px
}

.footerAdvertiser,
.footerProjectNumber,
.footerRegistration {
  font-size: 10px;
  line-height: 1.2;
  color: var(--fontSecondary);
  margin-bottom: 5px;
  text-align: center
}

.footerContactInfo {
  font-size: 13px;
  line-height: 1.4;
  color: var(--fontSecondary);
  margin: 8px 0 5px;
  text-align: center;
  font-weight: 600;
}

.footerContactInfo a {
  color: var(--fontPrimary);
  text-decoration: none;
  font-weight: 700;
}

.footerContactInfo a:hover {
  text-decoration: underline;
}

.footerPrivacy,
.footerTerms,
.reraLink {
  color: var(--fontPrimary);
  text-decoration: none;
  font-weight: 600;
  transition: .3s
}

.footerPrivacy:hover,
.footerTerms:hover,
.reraLink:hover {
  color: var(--fontPrimary);
  text-decoration: underline
}

.footerDisclaimer {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 0 40px;
  line-height: 1.6;
  color: var(--fontSecondary);
  font-style: italic
}

.footerDisclaimer strong {
  color: var(--fontPrimary);
  font-weight: 600
}

.footerLinks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 0 40px
}

.aboutSectionQr {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0;
}

.qrCard {
  background: var(--bgColorSecondary);
  border: 1px solid rgba(148, 76, 60, 0.15);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(148, 76, 60, 0.05);
  transition: all 0.3s ease;
  width: 160px;
  text-align: center;
}

.qrCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(148, 76, 60, 0.15);
  border-color: rgba(148, 76, 60, 0.4);
}

.qrCard img {
  width: 120px !important;
  height: 120px !important;
  object-fit: contain;
  border-radius: 6px;
  background: white;
  padding: 6px;
  box-shadow: none !important;
  display: block;
}

.qrLabel {
  font-size: 14px;
  font-weight: 600;
  color: var(--fontPrimary);
  letter-spacing: 0.5px;
  margin-top: 4px;
  text-transform: uppercase;
  font-family: 'Jost', sans-serif;
}

.qrSubLabel {
  font-size: 11px;
  color: var(--fontSecondary);
  font-weight: 500;
}

.footerLinks p {
  /* color: #e8eef3; */
  margin: 0
}

@media (max-width:1024px) {
  .quotePopupContent {
    padding: 30px 25px;
    margin: 20px;
    width: calc(100% - 40px)
  }

  .quotePopup .quoteTitle {
    font-size: 24px
  }

  .offerText {
    font-size: 16px
  }

  .quotePopup .quoteInput,
  .quotePopup .quotePhoneInput,
  .quotePopup .quoteSelect {
    padding: 12px 14px
  }

  .quotePopup .quoteSubmit {
    font-size: 16px;
    padding: 14px
  }

  /* .headerNav.active,
  .headerNav.active .headerLink {
    opacity: 1;
    transform: translateY(0)
  } */

  .headerContainer {
    height: 70px;
    padding: 0 20px
  }

  .headerLink {
    font-size: 18px;
    padding: 12px 0;
    text-align: center;
    width: 100%;
    opacity: 0;
    transform: translateY(-20px);
    transition: .3s
  }

  .headerNav.active .headerLink:first-child {
    transition-delay: 0.1s
  }

  .headerNav.active .headerLink:nth-child(2) {
    transition-delay: 0.15s
  }

  .headerNav.active .headerLink:nth-child(3) {
    transition-delay: 0.2s
  }

  .headerNav.active .headerLink:nth-child(4) {
    transition-delay: 0.25s
  }

  .headerNav.active .headerLink:nth-child(5) {
    transition-delay: 0.3s
  }

  .headerNav.active .headerLink:nth-child(6) {
    transition-delay: 0.35s
  }

  .headerNav.active .headerLink:nth-child(7) {
    transition-delay: 0.4s
  }

  .headerNav.active .headerLink:nth-child(8) {
    transition-delay: 0.45s;
    margin-top: 0px;
  }

  /* .headerContactSection {
    display: none
  } */

  /* .bannerSectionMain {
    padding-top: 70px;
    padding-bottom: 20px
  } */


  /*.bannerImageContainer::before {
    padding-top: 125%
  } */



  .bannerOfferSection {
    margin: 15px 0
  }

  .bannerOffer {
    padding: 12px 16px;
    width: 100%;
    max-width: 500px;
  }

  .quoteForm {
    padding: 30px 25px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

  .quoteSubTitle,
  .readMoreLink {
    font-size: 15px
  }

  .aboutSection,
  .amenitiesSection,
  .floorPlanSection,
  .gallerySection,
  .mapSection,
  .overviewSection,
  .priceSection,
  .virtualTourSection {
    padding: 60px 0
  }

  .amenitiesContainer,
  .footerLinks,
  .footerWrapper,
  .galleryContainer,
  .map-container,
  .overviewContainer,
  .tourContainer {
    padding: 0 20px
  }

  .overviewDescriptionSection {
    margin-bottom: 40px
  }

  .overviewContent {
    flex-direction: column;
    gap: 40px;
    text-align: center
  }

  .overviewTextSection {
    padding-right: 0;
    order: 1
  }

  .overviewImageSection {
    order: 2
  }

  .overviewTitle {
    font-size: 36px;
    margin-bottom: 25px
  }

  .overviewDescription {
    font-size: 16px;
    text-align: justify;
    margin-bottom: 30px
  }

  .highlightsTitle {
    font-size: 36px;
    margin-bottom: 25px
  }

  .highlightsList li {
    font-size: 16px;
    text-align: left
  }

  .amenitiesTitle,
  .floorPlanSectionTitle,
  .galleryTitle,
  .map-title,
  .price-title {
    font-size: 36px;
    margin-bottom: 40px
  }

  .amenitiesImageContainer,
  .galleryImageContainer,
  .map-image-container {
    height: 300px
  }

  .amenitiesTextOverlay {
    font-size: 20px;
    padding: 25px 15px 15px
  }

  .amenitiesLightboxNext,
  .amenitiesLightboxPrev,
  .amenitiesLightboxClose,
  .amenitiesNext,
  .amenitiesPrev,
  .galleryLightboxNav,
  .galleryNext,
  .galleryPrev,
  .galleryLightboxClose {
    width: 40px;
    height: 40px;
    font-size: 16px
  }

  .amenitiesLightboxPrev,
  .galleryLightboxPrev {
    left: 5px
  }

  .amenitiesLightboxNext,
  .galleryLightboxNext {
    right: 5px
  }

  .amenitiesLightboxTitle {
    font-size: 20px;
    /* bottom: -50px */
  }

  .amenitiesLightboxCounter {
    font-size: 14px;
  }

  .price-container {
    padding: 0 20px;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    justify-content: center;
  }

  .price-card {
    padding: 15px;
  }

  .price-card::before {
    display: none;
  }

  .price-card:hover {
    transform: translateY(-5px);
  }

  .price-floor-plan {
    height: 120px;
    border-radius: 8px;
    margin-bottom: 15px
  }

  .price-row {
    align-items: center;
    padding: 8px 0;
    line-height: 1.5
  }

  .price-label {
    font-size: 16px;
    font-weight: 500
  }

  .price-value {
    font-size: 16px;
  }

  .price-value.highlight {
    font-size: 18px;
  }

  .galleryLightboxCounter {
    font-size: 14px;
    /* top: auto;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: 0 0;
    color: var(--fontPrimary) */
  }

  .floorPlanCarousel {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    max-width: 100% !important
  }

  .floorPlanSlidesContainer {
    display: block !important;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    position: relative
  }

  .floorPlanSlides {
    display: flex !important;
    will-change: transform;
    display: flex !important;
    transition: transform .5s;
    width: 300%
  }

  .floorPlanCarousel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    position: relative
  }

  .floorPlanCard {
    width: 33.333%;
    flex-shrink: 0;
    margin: 0;
    padding: 15px;
    box-sizing: border-box
  }

  .floorPlanCard img {
    width: 100%;
    height: 200px;
    margin-bottom: 15px
  }

  .floorPlanCard h3 {
    font-size: 15px;
    margin-bottom: 10px;
    text-align: center
  }

  .floorPlanOverlay {
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 12px
  }

  .floorPlanButton {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
  }

  .floorPlanNext,
  .floorPlanPrev {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--fontPrimary);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: .3s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10
  }

  .floorPlanPrev {
    left: 10px
  }

  .floorPlanNext {
    right: 10px
  }

  .floorPlanNext:hover,
  .floorPlanPrev:hover {
    background: var(--fontPrimary);
    transform: translateY(-50%) scale(1.1)
  }

  .floorPlanIndicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px
  }

  .floorPlanDot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(148, 76, 60, .3);
    cursor: pointer;
    transition: .3s
  }

  .floorPlanDot.active {
    background: var(--fontPrimary);
    transform: scale(1.2)
  }

  .floorPlanCta {
    padding: 12px 30px;
    font-size: 16px;
    margin-top: 30px
  }

  .map-content {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .map-dropdown-btn {
    padding: 16px 20px;
    font-size: 15px
  }

  .connectivity-item {
    padding: 12px 20px
  }

  .connectivity-item .location {
    font-size: 13px
  }

  .connectivity-item .time {
    font-size: 12px;
    padding: 3px 10px
  }

  .map-cta,
  .requestButton {
    padding: 14px 28px;
    font-size: 15px
  }

  .tourRow {
    gap: 30px
  }

  .tourColumn {
    max-width: 100%;
    padding: 25px
  }

  .videoThumbnail {
    height: 250px
  }

  .playButton {
    width: 100px;
    height: 70px
  }

  .playButton::before {
    border-left: 18px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent
  }

  .aboutSection .floorPlanSectionTitle {
    font-size: 36px;
    margin-bottom: 30px
  }

  .aboutSectionDescription {
    padding: 0 20px;
    font-size: 16px;
    line-height: 1.7
  }

  .footerContainer {
    padding: 50px 0 80px
  }

  .footerAdvertiser,
  .footerProjectNumber,
  .footerRegistration {
    font-size: 10px;
    margin-bottom: 7px
  }

  .footerDisclaimer {
    padding: 0 20px;
    font-size: 10px;
    margin-bottom: 25px
  }

  .footerLinks {
    gap: 20px
  }

  .aboutSectionQr {
    gap: 15px
  }

  .qrCard {
    width: 130px;
    padding: 12px;
    gap: 6px;
  }

  .qrCard img {
    height: 100px !important;
    width: 100px !important;
  }
}

@media (max-width:480px) {
  .quotePopupContent {
    padding: 25px 20px;
    margin: 15px;
    width: calc(100% - 30px)
  }

  .quotePopup .quoteTitle {
    font-size: 22px
  }

  .offerText {
    font-size: 16px
  }

  .quotePopup .quoteInput,
  .quotePopup .quotePhoneInput,
  .quotePopup .quoteSelect {
    font-size: 14px;
    padding: 10px 12px
  }

  .quotePopup .quoteSubmit {
    font-size: 15px;
    padding: 12px
  }

  .amenitiesSection,
  .floorPlanSection,
  .gallerySection,
  .priceSection {
    padding: 40px 0
  }

  .overviewSection {
    padding: 0px 0 40px;
  }

  .amenitiesContainer,
  .footerLinks,
  .footerWrapper,
  .galleryContainer,
  .map-container,
  .overviewContainer,
  .tourContainer {
    padding: 0 15px
  }

  .overviewDescriptionSection {
    margin-bottom: 30px
  }

  .highlightsTitle,
  .overviewTitle {
    font-size: 24px
  }

  .overviewDescription {
    font-size: 15px
  }

  .highlightsList li {
    font-size: 15px;
    margin-bottom: 12px
  }

  .amenitiesDownloadBtn,
  .galleryDownloadBtn,
  .overviewBrochureButton,
  .requestButton {
    padding: 10px 25px;
    font-size: 15px
  }

  .aboutSection .floorPlanSectionTitle,
  .amenitiesTitle,
  .galleryTitle,
  .map-title,
  .price-title {
    font-size: 24px;
    margin-bottom: 25px
  }

  .amenitiesImageContainer,
  .galleryImageContainer,
  .map-image-container {
    height: 250px
  }

  .amenitiesTextOverlay {
    font-size: 18px;
    padding: 20px 10px 10px
  }

  .amenitiesLightboxClose,
  .amenitiesLightboxNext,
  .amenitiesLightboxPrev,
  .amenitiesNext,
  .amenitiesPrev,
  .galleryLightboxClose,
  .galleryLightboxNav,
  .galleryNext,
  .galleryPrev {
    width: 35px;
    height: 35px;
    font-size: 14px
  }

  .amenitiesLightboxPrev,
  .galleryLightboxPrev {
    left: 0
  }

  .amenitiesLightboxNext,
  .galleryLightboxNext {
    right: 0
  }

  .amenitiesLightboxClose,
  .galleryLightboxClose {
    top: -35px
  }

  .amenitiesLightboxTitle {
    font-size: 18px;
    /* bottom: -40px */
  }

  .amenitiesLightboxCounter,
  .galleryLightboxCounter {
    font-size: 12px
  }

  .footerLinks p {
    font-size: 9px;
  }

  .price-container {
    padding: 0 15px;
    gap: 10px;
    justify-content: center;
  }

  .price-card {
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
  }

  .price-card:hover {
    transform: translateY(-3px);
  }

  .price-floor-plan {
    display: none;
  }

  .price-row {
    padding: 0 0 6px;
    text-align: center;
  }

  .price-label {
    font-size: 13px;
    /* letter-spacing: normal; */
  }

  .price-value {
    font-size: 16px;
    /* letter-spacing: normal; */
  }

  .price-value.highlight {
    font-size: 18px;

  }

  .floorPlanSectionTitle {
    font-size: 24px;
    margin-bottom: 25px;
    color: var(--fontPrimary)
  }

  .floorPlanCarousel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    position: relative;
    max-width: 100%
  }

  .floorPlanSlidesContainer {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    position: relative
  }

  .floorPlanSlides {
    display: flex !important;
    transition: transform .5s ease-in-out;
    width: 300%
  }

  .floorPlanCard {
    padding: 12px;
    width: 33.333%;
    flex-shrink: 0;
    margin: 0;
    box-sizing: border-box
  }

  .floorPlanCard img {
    height: 250px;
    margin-bottom: 12px
  }

  .floorPlanCard h3 {
    font-size: 15px;
    margin-bottom: 8px
  }

  .floorPlanOverlay {
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-radius: 12px
  }

  .floorPlanButton {
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 10px;
  }

  .floorPlanNext,
  .floorPlanPrev {
    width: 35px;
    height: 35px;
    font-size: 16px
  }

  .floorPlanPrev {
    left: 5px
  }

  .floorPlanNext {
    right: 5px
  }

  .floorPlanIndicators {
    display: none;
  }

  .floorPlanDot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .floorPlanCta {
    padding: 10px 25px;
    font-size: 15px;
    margin-top: 25px
  }

  .aboutSection,
  .mapSection,
  .virtualTourSection {
    padding: 40px 0
  }

  .map-content,
  .tourRow {
    gap: 25px
  }

  .map-dropdown-btn {
    padding: 14px 16px;
    font-size: 15px
  }

  .connectivity-item {
    padding: 10px 16px
  }

  .connectivity-item .location,
  .readMoreLink {
    font-size: 14px
  }

  .connectivity-item .time {
    font-size: 14px;
    padding: 2px 8px
  }

  .map-cta {
    padding: 10px 25px;
    font-size: 15px;
    width: fit-content;
    margin: 0 auto
  }

  .tourColumn {
    padding: 20px
  }

  .videoThumbnail {
    height: 200px
  }

  .playButton {
    width: 90px;
    height: 60px
  }

  .playButton::before {
    border-left: 20px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent
  }

  .aboutSectionDescription {
    padding: 0 15px;
    font-size: 15px;
    line-height: 1.6
  }

  .clampText {
    margin-bottom: 12px
  }

  .footerContainer {
    padding: 40px 0 80px
  }

  .footerAdvertiser,
  .footerProjectNumber,
  .footerRegistration {
    font-size: 9px;
    margin-bottom: 5px
  }

  .footerDisclaimer {
    padding: 0 15px;
    font-size: 9px;
    margin-bottom: 20px
  }

  .footerLinks {
    gap: 15px
  }

  .aboutSectionQr {
    gap: 12px;
    align-items: center
  }

  .qrCard {
    width: 110px;
    padding: 10px;
    gap: 4px;
  }

  .qrCard img {
    height: 80px !important;
    width: 80px !important;
  }

  .qrLabel {
    font-size: 11px;
  }

  .qrSubLabel {
    font-size: 9px;
  }
}

.mobileBottomBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #944c3c;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);
  padding: 0px;
  z-index: 100;
  gap: 0px;
  border-top: 1px solid #743c2f
}

.mobileBottomBar a {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: visible
}

.callButton,
.pdfButton {
  background-color: transparent
}

.whatsappButton {
  background: #944c3c;
  color: #fff !important;
  /* border-radius: 4px; */
}

.callButton,
.pdfButton {
  border-right: 1px solid rgba(255, 255, 255, .25)
}

.mobileBottomBar svg {
  width: 20px;
  height: 20px;
  fill: white
}

@media (min-width:1024px) {
  .mobileBottomBar {
    display: none
  }
}

.clampText {
  display: -webkit-box;
  margin-bottom: 15px;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidedownloadBtn {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  gap: 10px;
  background: var(--buttonColor);
  /* optional background */
  border: 1px solid var(--fontPrimary);
  cursor: pointer;
  position: fixed;
  bottom: 50%;
  right: 25px;
  transform: rotate(-90deg);
  transform-origin: right center;
  animation: bounce 5s ease-in-out infinite;
  z-index: 1;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateX(10px) rotate(-90deg);
  }

  50% {
    transform: translateX(0) rotate(-90deg);
  }
}

.btn-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-content img {
  vertical-align: middle;
}

.btn-text {
  font-size: 16px;
  color: var(--buttonTextColor);
}

.pdf-icon {
  transform: rotate(90deg);
}

@media (min-width:769px) {
  .sidedownloadBtn {
    z-index: 1;
  }
}

@media (max-width:768px) {
  .sidedownloadBtn {
    display: none;
  }

  /* Mobile: show price cards and gallery images one per row */
  .price-container {
    grid-template-columns: 1fr;
  }

  .galleryTrack {
    grid-template-columns: 1fr;
  }
}

@media (min-width:1025px) {
  .readMoreLink {
    display: none;
  }

  .clampText {
    display: block;
  }
}

body,
p,
a,
button,
input,
select,
textarea,
li,
label,
span {
  font-family: "Jost", "FuturaBT-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

button {
  letter-spacing: 1px;
}

h1,
.bannerPrice,
.overviewTitle,
.highlightsTitle,
.amenitiesTitle,
.price-title,
.floorPlanSectionTitle,
.galleryTitle,
.map-title,
.quoteTitle {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
}

p {
  font-weight: 400;
}

.popupLogo {
  height: auto;
}

/* ===== Fix: keep the page fixed (no left/right sliding) on mobile ===== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* "img-fluid" is used in the markup but Bootstrap isn't loaded, so images had
   no width cap and could push the page wider than the screen. Constrain them. */
img {
  max-width: 100%;
}

/* Map image fills its rounded container cleanly at every screen size */
.map-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   HELIOS  PREMIUM LUXURY THEME LAYER  (gold & charcoal)
   Appended last so it refines the components above.
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(148, 76, 60, .10), transparent 60%),
    var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display typography (font <link> added in <head>) ---- */
.bannerMainTitle,
.overviewTitle,
.amenitiesTitle,
.galleryTitle,
.highlightsTitle,
.map-title,
.price-title,
.floorPlanSectionTitle,
.quoteTitle,
.tourHeading,
.aboutSection .floorPlanSectionTitle {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif !important;
  letter-spacing: .5px;
  font-weight: 700;
}

/* Gold gradient section headings + centered gold rule beneath */
.overviewTitle,
.amenitiesTitle,
.galleryTitle,
.highlightsTitle,
.map-title,
.floorPlanSectionTitle,
.price-title {
  background: linear-gradient(120deg, var(--goldDeep), var(--gold) 45%, var(--goldLight)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.overviewTitle::after,
.amenitiesTitle::after,
.galleryTitle::after,
.highlightsTitle::after,
.map-title::after,
.floorPlanSectionTitle::after,
.price-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.bannerMainTitle {
  line-height: 1.1;
}

/* ---- Premium gold buttons (sheen + lift) ---- */
.requestButton,
.map-cta,
.overviewBrochureButton,
.floorPlanCta,
.price-get-details,
.galleryDownloadBtn,
.amenitiesDownloadBtn,
.quoteSubmit,
.bannerOverlayBtn,
.sidedownloadBtn,
.floorPlanButton {
  background: var(--buttonColor) !important;
  color: var(--charcoal) !important;
  font-weight: 700;
  letter-spacing: .4px;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 8px 24px rgba(148, 76, 60, .34), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.requestButton:hover,
.map-cta:hover,
.overviewBrochureButton:hover,
.floorPlanCta:hover,
.price-get-details:hover,
.galleryDownloadBtn:hover,
.amenitiesDownloadBtn:hover,
.quoteSubmit:hover,
.bannerOverlayBtn:hover {
  box-shadow: 0 14px 34px rgba(148, 76, 60, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
  filter: brightness(1.03);
}

/* ---- 3D motion cards ---- */
.price-card,
.floorPlanCard,
.amenitiesSlide,
.overviewImage,
.videoThumbnail {
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .55s ease, border-color .4s;
  will-change: transform;
}

.price-card:hover,
.floorPlanCard:hover {
  transform: perspective(1000px) rotateX(2.5deg) translateY(-10px) !important;
  box-shadow: 0 34px 70px rgba(148, 76, 60, .20) !important;
  border-color: var(--gold) !important;
}

.price-card {
  background: linear-gradient(180deg, #ffffff, var(--champagne)) !important;
  border: 1px solid rgba(148, 76, 60, .45) !important;
}

.amenitiesSlide:hover,
.overviewImage:hover {
  transform: scale(1.03) translateY(-4px);
}

/* ---- Scroll reveal (JS adds .in) ---- */
.reveal {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.reveal.d1 {
  transition-delay: .08s
}

.reveal.d2 {
  transition-delay: .16s
}

.reveal.d3 {
  transition-delay: .24s
}

.reveal.d4 {
  transition-delay: .32s
}

/* ---- Glass header ---- */
.mainHeader {
  background: #ffffff !important;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(148, 76, 60, .35);
  box-shadow: 0 6px 24px rgba(148, 76, 60, .06);
}

.headerLink {
  position: relative;
  transition: color .3s;
}

.headerLink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--goldDeep));
  transition: width .35s ease;
}

.headerLink:hover {
  color: var(--goldDeep);
}

.headerLink:hover::after {
  width: 100%;
}

/* ---- Light (white) footer with readable dark text ---- */
.footerWrapper {
  background: #ffffff !important;
  color: #ab5b49 !important;
  border-top: 3px solid var(--gold);
  box-shadow: 0 -6px 24px rgba(148, 76, 60, .06);
}

.footerWrapper a,
.footerWrapper p,
.footerWrapper span,
.footerProjectName,
.footerRegistration,
.footerProjectNumber,
.footerContactInfo {
  color: #ab5b49 !important;
}

.footerProjectName {
  color: var(--charcoal) !important;
  font-weight: 700;
}

.footerWrapper a {
  color: var(--goldDeep) !important;
  transition: color .3s;
}

.footerWrapper a:hover {
  color: var(--charcoal) !important;
}

.footerContactInfo a {
  color: var(--goldDeep) !important;
  font-weight: 700;
}

/* Disclaimer + copyright sit on the cream page bg  make them clearly visible */
.footerDisclaimer {
  color: #6d5d5a !important;
}

.footerDisclaimer strong {
  color: var(--charcoal) !important;
}

.footerLinks,
.footerLinks p,
.footerTerms,
.footerPrivacy {
  color: #6d5d5a !important;
}

.footerTerms,
.footerPrivacy {
  color: var(--goldDeep) !important;
}

/* Footer quick links (Overview · Prices · ...) had no colour rule and fell back to browser blue */
.footerLinks a {
  color: var(--fontPrimary);
  text-decoration: none;
}

.footerLinks a:hover {
  text-decoration: underline;
}

/* ---- Offer pill ---- */
.bannerOffer {
  background: rgba(148, 76, 60, .10) !important;
  border: 1px solid rgba(148, 76, 60, .55) !important;
  box-shadow: 0 0 0 1px rgba(148, 76, 60, .15), 0 10px 30px rgba(148, 76, 60, .12) !important;
}

/* ---- Motion keyframes ---- */
@keyframes floatY {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-7px)
  }
}

.whatsappButton {
  animation: floatY 3.4s ease-in-out infinite;
}

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

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .whatsappButton {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}


/* ============================================================
   HELIOS  premium price table
   ============================================================ */
.price-tablewrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.helios-price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: linear-gradient(180deg, #ffffff, var(--champagne));
  border: 1px solid rgba(148, 76, 60, .45);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(148, 76, 60, .12);
  font-size: 15px;
}

.helios-price-table thead th {
  background: linear-gradient(180deg, var(--charcoal2), var(--charcoal));
  color: var(--goldLight);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  letter-spacing: .5px;
  font-weight: 700;
  text-align: left;
  padding: 16px 20px;
  white-space: nowrap;
}

.helios-price-table tbody td {
  padding: 14px 20px;
  border-top: 1px solid rgba(148, 76, 60, .08);
  color: var(--fontSecondary);
}

.helios-price-table tbody tr {
  transition: background .25s ease;
}

.helios-price-table tbody tr:hover {
  background: rgba(148, 76, 60, .10);
}

.helios-price-table td:nth-child(2) {
  font-weight: 600;
  color: var(--charcoal);
}

.helios-price-table td:last-child {
  font-weight: 700;
  color: var(--goldDeep);
  white-space: nowrap;
}

/* Highlight the Helios tower rows */
.helios-price-table tr.is-helios {
  background: rgba(148, 76, 60, .16);
}

.helios-price-table tr.is-helios:hover {
  background: rgba(148, 76, 60, .24);
}

.helios-price-table tr.is-helios td:first-child {
  box-shadow: inset 4px 0 0 var(--gold);
}

.price-cta-wrap {
  text-align: center;
  margin-top: 28px;
}

.price-cta-wrap .price-get-details {
  display: inline-block;
  padding: 14px 38px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
}

/* Mobile: turn the table into stacked cards (no horizontal scroll) */
@media (max-width: 768px) {
  .helios-price-table {
    box-shadow: 0 14px 34px rgba(148, 76, 60, .12);
  }

  .helios-price-table thead {
    display: none;
  }

  .helios-price-table,
  .helios-price-table tbody,
  .helios-price-table tr,
  .helios-price-table td {
    display: block;
    width: 100%;
  }

  .helios-price-table tr {
    margin: 0 0 14px;
    border: 1px solid rgba(148, 76, 60, .4);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
  }

  .helios-price-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-top: none;
    border-bottom: 1px solid rgba(148, 76, 60, .06);
    padding: 12px 16px;
    text-align: right;
  }

  .helios-price-table tbody td:last-child {
    border-bottom: none;
  }

  .helios-price-table tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--charcoal);
    text-align: left;
    font-size: 13px;
    letter-spacing: .3px;
  }

  .helios-price-table tr.is-helios td:first-child {
    box-shadow: none;
  }

  .helios-price-table tr.is-helios {
    box-shadow: inset 0 0 0 2px var(--gold);
  }
}


/* ============================================================
   HELIOS  Amenities icon grid (Raheja-Helios style + motion)
   ============================================================ */
.amenitiesSubtitle {
  text-align: center;
  color: var(--fontSecondary);
  max-width: 640px;
  margin: -8px auto 50px;
  font-size: 16px;
}

.amenityGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
}

.amenityCard {
  background: linear-gradient(180deg, #ffffff, var(--champagne));
  border: 1px solid rgba(148, 76, 60, .35);
  border-radius: 16px;
  padding: 34px 18px;
  text-align: center;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease, border-color .4s;
  will-change: transform;
}

.amenityCard:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 22px 44px rgba(148, 76, 60, .14);
}

.amenityIcon {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(148, 76, 60, .12);
  border: 1px solid rgba(148, 76, 60, .4);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), background .4s ease;
}

.amenityIcon i {
  font-size: 34px;
  color: var(--fontPrimary);
  transition: color .4s ease;
}

.amenityCard:hover .amenityIcon {
  background: var(--buttonColor);
  transform: rotateY(360deg) scale(1.06);
  /* 3D flip on hover */
}

/* The hovered circle fills with the deep-green CTA gradient, so the glyph has
   to invert to gold - leaving it on --charcoal painted #944c3c on #944c3c and
   the icon vanished mid-hover. */
.amenityCard:hover .amenityIcon i {
  color: var(--goldLight);
}

.amenityCard h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--charcoal);
  margin: 0;
}

/* staggered scroll-reveal cascade (premium.js adds .reveal/.in) */
.amenityCard.reveal {
  transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}

.amenityGrid .amenityCard:nth-child(4n+2) {
  transition-delay: .08s
}

.amenityGrid .amenityCard:nth-child(4n+3) {
  transition-delay: .16s
}

.amenityGrid .amenityCard:nth-child(4n+4) {
  transition-delay: .24s
}

@media (max-width: 1024px) {
  .amenityGrid {
    grid-template-columns: repeat(3, 1fr);
  }

  .amenityGrid .amenityCard:nth-child(n) {
    transition-delay: 0s
  }

  .amenityGrid .amenityCard:nth-child(3n+2) {
    transition-delay: .08s
  }

  .amenityGrid .amenityCard:nth-child(3n+3) {
    transition-delay: .16s
  }
}

@media (max-width: 768px) {
  .amenityGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .amenityCard {
    padding: 26px 12px;
  }

  .amenityIcon {
    width: 62px;
    height: 62px;
  }

  .amenityIcon i {
    font-size: 28px;
  }

  .amenityCard h3 {
    font-size: 14px;
  }

  .amenityGrid .amenityCard:nth-child(n) {
    transition-delay: 0s
  }

  .amenityGrid .amenityCard:nth-child(2n) {
    transition-delay: .1s
  }
}


/* Highlight the Helios tower cards in the price grid */
.price-card.helios-pick {
  border: 2px solid var(--gold) !important;
  box-shadow: 0 14px 34px rgba(148, 76, 60, .28) !important;
  position: relative;
}

.price-card.helios-pick::after {
  content: "BEST VALUE";
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--buttonColor);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 100px;
  z-index: 2;
}

/* White action-button icons on the #944c3c buttons + no hover jump */
.headerContact img,
.headerWhatsapp img,
.mobileBottomBar a img {
  filter: brightness(0) invert(1);
}

.mobileBottomBar a:hover {
  transform: none;
}


/* Center the Amenities download button under the grid */
.amenitiesDownload {
  display: flex !important;
  justify-content: center;
  align-items: center;
  max-width: 1120px;
  margin: 44px auto 0 !important;
  padding: 0;
}

.amenitiesDownloadBtn {
  display: inline-block;
}

/* New K Raheja Corp logo (squarer)  keep header/popup logos compact */
.popupLogo {
  height: 86px !important;
  width: auto !important;
}

.headerLogo img {
  height: 78px;
  width: auto;
}

/* =====================================================================
   ANIMATION & MOTION REMOVED FROM LANDING PAGE
   Disables scroll-reveal, entrance fades, floating/bouncing buttons,
   smooth scroll and hover glides so the page renders fully static.
   (To restore motion, delete this block and re-add premium.js.)
   ===================================================================== */
html {
  scroll-behavior: auto !important;
}

*,
*::before,
*::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* Float / bounce decorations  fully off */
.whatsappButton,
.sidedownloadBtn {
  animation: none !important;
}

/* Elements that started hidden for a fade/slide-in  force visible */
.reveal {
  opacity: 1 !important;
  transform: none !important;
}

.amenitiesSection,
.floorPlanSection,
.gallerySection,
.priceSection {
  opacity: 1 !important;
  transform: none !important;
}

.bannerVideoOverlay.Active {
  opacity: 1 !important;
}
/* ===========================================================================
   Kalpataru Vian brand theme (from the project plan booklet & brochure)
   Taupe-brown #944c3c carries the CTAs, rose-gold #bd7a6b is the accent.
   The old palette used a light CTA that happened to read against dark
   label text; the deeper brown does not, so every solid CTA gets a light
   label here. Both -webkit-text-fill-color and color are set because several
   of these buttons inherit the gradient-text treatment used by headings.
   ========================================================================= */
.quoteSubmit,
.overviewBrochureButton,
.amenitiesDownloadBtn,
.price-get-details,
.floorPlanButton,
.floorPlanCta,
.galleryDownloadBtn,
.map-cta,
.requestButton,
.sidedownloadBtn,
.bannerOverlayBtn {
  color: var(--buttonTextColor) !important;
  -webkit-text-fill-color: var(--buttonTextColor) !important;
}

.sidedownloadBtn .btn-text {
  color: var(--buttonTextColor);
  -webkit-text-fill-color: var(--buttonTextColor);
}

/* Gold hairline under the section headings, matching the document's rules */
.overviewTitle::after,
.amenitiesTitle::after,
.price-title::after,
.galleryTitle::after,
.map-title::after,
.floorPlanSectionTitle::after {
  background: linear-gradient(90deg, transparent, var(--goldLight), transparent);
}

/* ---------------------------------------------------------------------------
   Header sizing for the official stacked lockup.
   The mark is emblem-over-wordmark-over-"SINHGAD ROAD", so it needs more
   vertical room than the old horizontal logo. These live at the end of the
   sheet so they win over the earlier responsive blocks, and the banner's
   top padding tracks the header height at every breakpoint (the header is
   position:fixed, so a mismatch tucks the hero underneath it).
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .headerContainer { height: 88px; }
  .headerLogo img  { height: 66px; }
  .bannerSectionMain { padding-top: 88px; }
}

@media (max-width: 480px) {
  .headerContainer { height: 78px; }
  .headerLogo img  { height: 58px; }
  .bannerSectionMain { padding-top: 78px; }
}

/* ---------------------------------------------------------------------------
   Type system, matched to the official brand document.
   The PDF ships fully outlined (no embedded fonts), so these were identified
   from the letterforms: a light bracketed-serif caps logotype with wide
   tracking = Cormorant Garamond, and a geometric sans with a circular O,
   pointed-apex A and double-storey a = Futura PT / Avenir Next, whose closest
   free equivalent is Jost.
     - Cormorant Garamond -> logotype-style display headings + italic accents
     - Jost               -> headlines, body, labels, distances, numerals
   ------------------------------------------------------------------------- */
.bannerMainTitle,
.bannerSubtitleText,
.overviewTitle,
.highlightsTitle,
.amenitiesTitle,
.price-title,
.floorPlanSectionTitle,
.galleryTitle,
.map-title,
.quoteTitle,
.tourHeading,
.bannerPrice,
h1, h2 {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
}

/* Section titles echo the logotype: lighter weight, generous tracking */
.overviewTitle,
.amenitiesTitle,
.price-title,
.floorPlanSectionTitle,
.galleryTitle,
.map-title {
  letter-spacing: 1.4px;
}

/* Card titles, nav, buttons and every number stay in the geometric sans */
h3,
.headerLink,
.amenityCard h3,
.faqQuestion h3,
.price-value,
.price-label,
.connectivity-item .location,
.connectivity-item .time,
.qrLabel,
.qrSubLabel,
.footerProjectNumber,
.offerText {
  font-family: "Jost", "FuturaBT-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Italic accents pick up Cormorant's old-style calligraphic italic.
   :not([class]) keeps Remix Icon's <i class="ri-*"> glyphs out of this. */
em,
i:not([class]),
.accentItalic {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Dual branding in the header: the project mark (Kalpataru Vian) sits first as
   the primary identity, with the developer mark (Kalpataru) beside it behind
   a hairline rule. The developer mark is set a little smaller so the project
   still leads, and the pair collapses gracefully at narrow widths.
   ------------------------------------------------------------------------- */
.headerLogo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.headerLogo img {
  width: auto;
}

.headerLogoRule {
  width: 1px;
  height: 46px;
  flex: 0 0 auto;
  background: linear-gradient(180deg, transparent, rgba(148, 76, 60, .28), transparent);
}

.headerLogoDeveloper {
  height: 60px;
}

@media (max-width: 1280px) {
  .headerLogoDeveloper { height: 52px; }
  .headerLogoRule { height: 38px; }
  .headerLogo { gap: 10px; }
}

@media (max-width: 768px) {
  .headerLogoDeveloper { height: 46px; }
  .headerLogoRule { height: 32px; }
  .headerLogo { gap: 9px; }
}

@media (max-width: 480px) {
  .headerLogoDeveloper { height: 40px; }
  .headerLogoRule { height: 28px; }
  .headerLogo { gap: 7px; }
}

/* Very small screens: the project mark alone, so nothing squashes */
@media (max-width: 360px) {
  .headerLogoRule,
  .headerLogoDeveloper { display: none; }
}

/* Specificity note: the responsive block above targets `.headerLogo img`
   (0,1,1), so a bare `.headerLogoDeveloper` class (0,1,0) loses no matter how
   late it appears. Qualifying with the element keeps the developer mark
   smaller than the project mark, as intended. */
.headerLogo img.headerLogoDeveloper { height: 62px; }

@media (max-width: 1280px) {
  .headerLogo img.headerLogoDeveloper { height: 54px; }
}

/* The burger layout starts at 1024, where the bar drops to 70px */
@media (max-width: 1024px) {
  .headerContainer { height: 84px; }
  .headerLogo img { height: 62px; }
  .headerLogo img.headerLogoDeveloper { height: 50px; }
  .headerLogoRule { height: 34px; }
  .bannerSectionMain { padding-top: 84px; }
}

@media (max-width: 768px) {
  .headerLogo img.headerLogoDeveloper { height: 46px; }
}

@media (max-width: 480px) {
  .headerLogo img.headerLogoDeveloper { height: 40px; }
}

/* Developer mark in the About Kalpataru section.
   Centred with display:block + auto side margins rather than relying on
   text-align inheritance, so it stays centred no matter what the surrounding
   section does with alignment. */
.aboutDeveloperMark {
  text-align: center;
  margin: 0 auto 26px;
}

.aboutDeveloperMark img {
  display: block;
  height: 96px;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .aboutDeveloperMark { margin-bottom: 20px; }
  .aboutDeveloperMark img { height: 76px; }
}

@media (max-width: 480px) {
  .aboutDeveloperMark img { height: 66px; }
}

/* ===========================================================================
   Highlights showcase (overview section)
   A framed panel with a light travelling around its border and corner
   brackets, bordered highlight cards with icon badges, and a matted image
   with an offset outline frame and dotted accent.
   Motion is scoped to this block and plays once as it scrolls into view
   (script.js adds .hl-armed / .hl-inview). The rest of the landing page stays
   static (see "ANIMATION & MOTION REMOVED" above), so every motion property
   here is !important to win over that block. Visitors who prefer reduced
   motion - or whose browser lacks IntersectionObserver - get the finished
   layout with no animation.
   ========================================================================= */
@property --hl-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.hlShowcase {
  --hl-ease: cubic-bezier(.2, .7, .2, 1);
  gap: 64px;
}

/* ---- Panel ---- */
.hlPanel {
  position: relative;
  isolation: isolate;
  padding: 42px 36px 36px !important;
  border: 1px solid rgba(148, 76, 60, .16);
  border-radius: 24px;
  background:
    radial-gradient(460px 240px at 100% 0%, rgba(148, 76, 60, .08), transparent 70%),
    radial-gradient(360px 200px at 0% 100%, rgba(189, 122, 107, .08), transparent 70%),
    linear-gradient(180deg, #ffffff, #fcf7f6);
  box-shadow: 0 34px 70px -42px rgba(116, 60, 47, .5);
}

/* the light that travels around the panel border */
.hlPanel::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--hl-angle), transparent 0deg 240deg, rgba(209, 159, 148, .85) 290deg, #944c3c 335deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* corner brackets */
.hlCorner {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 0 solid #944c3c;
  pointer-events: none;
}

.hlCorner--tl {
  top: 14px;
  left: 14px;
  border-top-width: 2px;
  border-left-width: 2px;
  border-top-left-radius: 16px;
  transform-origin: top left;
}

.hlCorner--br {
  right: 14px;
  bottom: 14px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-bottom-right-radius: 16px;
  transform-origin: bottom right;
}

.hlCorner::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: #bd7a6b;
  transform: rotate(45deg);
}

.hlCorner--tl::after {
  top: -4.5px;
  left: 52px;
}

.hlCorner--br::after {
  right: 52px;
  bottom: -4.5px;
}

.hlPanel .highlightsTitle {
  margin-bottom: 26px;
}

.hlPanel .overviewBrochureButton {
  margin: 0 auto;
}

/* ---- Highlight cards ---- */
.hlList {
  display: grid;
  gap: 12px;
  margin: 0 0 34px !important;
  padding: 0;
}

.hlList li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 66px;
  margin: 0 !important;
  padding: 12px 18px 12px 78px !important;
  overflow: hidden;
  border: 1px solid rgba(148, 76, 60, .16);
  border-radius: 14px;
  background: linear-gradient(90deg, #ffffff 60%, #fcf7f6);
  box-shadow: inset 3px 0 0 #944c3c, 0 12px 26px -20px rgba(116, 60, 47, .5);
  color: var(--fontSecondary);
  font-size: 15.5px;
  line-height: 1.55 !important;
  text-align: left;
}

/* icon badge (replaces the old check mark) */
.hlList li::before {
  content: "" !important;
  position: absolute;
  top: 50% !important;
  left: 15px !important;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border-radius: 50%;
  background-image: var(--hl-icon), linear-gradient(135deg, #bd7a6b, #944c3c 55%, #743c2f);
  background-position: center, center;
  background-size: 22px 22px, cover;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 4px rgba(148, 76, 60, .09), 0 8px 16px -8px rgba(116, 60, 47, .75);
  font-size: 0 !important;
}

.hlList li:nth-child(1) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20C20 20.5523 19.5523 21 19 21ZM13 19H18V9.15745L12 3.7029L6 9.15745V19H11V13H13V19Z'/%3E%3C/svg%3E"); }
.hlList li:nth-child(2) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M11.2703 12.2162L15 6L23 21H2L9 8L11.2703 12.2162ZM12.3897 14.2378L14.9873 19H19.6667L14.8976 10.058L12.3897 14.2378ZM5.34843 19H12.6516L9 12.2185L5.34843 19ZM5.5 8C4.11929 8 3 6.88071 3 5.5C3 4.11929 4.11929 3 5.5 3C6.88071 3 8 4.11929 8 5.5C8 6.88071 6.88071 8 5.5 8Z'/%3E%3C/svg%3E"); }
.hlList li:nth-child(3) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M21 20H23V22H1V20H3V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V20ZM19 20V4H5V20H19ZM8 11H11V13H8V11ZM8 7H11V9H8V7ZM8 15H11V17H8V15ZM13 15H16V17H13V15ZM13 11H16V13H13V11ZM13 7H16V9H13V7Z'/%3E%3C/svg%3E"); }
.hlList li:nth-child(4) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17.0007 1.20825 18.3195 3.68108 20.7923 4.99992 18.3195 6.31876 17.0007 8.79159 15.6818 6.31876 13.209 4.99992 15.6818 3.68108 17.0007 1.20825ZM10.6673 9.33325 15.6673 11.9999 10.6673 14.6666 8.00065 19.6666 5.33398 14.6666.333984 11.9999 5.33398 9.33325 8.00065 4.33325 10.6673 9.33325ZM11.4173 11.9999 9.18905 10.8115 8.00065 8.58325 6.81224 10.8115 4.58398 11.9999 6.81224 13.1883 8.00065 15.4166 9.18905 13.1883 11.4173 11.9999ZM19.6673 16.3333 18.0007 13.2083 16.334 16.3333 13.209 17.9999 16.334 19.6666 18.0007 22.7916 19.6673 19.6666 22.7923 17.9999 19.6673 16.3333Z'/%3E%3C/svg%3E"); }
.hlList li:nth-child(5) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 10H4V19H20V10ZM15.0355 11.136L16.4497 12.5503L11.5 17.5L7.96447 13.9645L9.37868 12.5503L11.5 14.6716L15.0355 11.136ZM7 5H4V8H20V5H17V6H15V5H9V6H7V5Z'/%3E%3C/svg%3E"); }

/* sheen that sweeps across a card on hover */
.hlList li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(209, 159, 148, .28), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

.hlList li:hover {
  border-color: rgba(148, 76, 60, .45);
  box-shadow: inset 5px 0 0 #944c3c, 0 18px 34px -20px rgba(116, 60, 47, .6);
}

/* ---- Image: white mat, offset outline frame, dotted accent ---- */
.hlFrame {
  position: relative;
  isolation: isolate;
  display: block;
  max-width: 600px;
  margin: 0 22px 22px 0;
  line-height: 0;
}

.hlFrame .overviewImage {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  border: 6px solid #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 0 0 1px rgba(148, 76, 60, .22), 0 36px 60px -30px rgba(62, 32, 25, .65) !important;
}

.hlFrame .overviewImage:hover {
  transform: none;
}

.hlFrame::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  right: -22px;
  bottom: -22px;
  z-index: 0;
  border: 2px solid rgba(148, 76, 60, .5);
  border-radius: 22px;
  pointer-events: none;
}

.hlFrame::after {
  content: "";
  position: absolute;
  top: -26px;
  left: -26px;
  z-index: 0;
  width: 132px;
  height: 132px;
  background-image: radial-gradient(rgba(148, 76, 60, .4) 1.6px, transparent 1.9px);
  background-size: 14px 14px;
  pointer-events: none;
}

.hlChip {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px -10px rgba(62, 32, 25, .6);
  color: #944c3c;
  font-family: "Jost", "FuturaBT-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
}

/* side by side: share the row in proportion, so the panel is never squeezed
   by a fixed-width image on small laptops (1025-1280px) */
@media (min-width: 1025px) {
  .hlShowcase > .overviewTextSection {
    flex: 1 1 52%;
    min-width: 0;
  }

  .hlShowcase > .overviewImageSection {
    flex: 1 1 48%;
    min-width: 0;
  }
}

@media (max-width: 1024px) {
  .hlShowcase {
    gap: 52px;
  }

  .hlPanel,
  .hlShowcase .overviewImageSection {
    width: 100%;
  }

  .hlPanel {
    padding: 36px 24px 30px !important;
  }

  .hlFrame {
    max-width: min(600px, calc(100% - 16px));
    margin: 0 auto 16px;
  }

  .hlFrame::before {
    top: 16px;
    left: 16px;
    right: -14px;
    bottom: -14px;
  }

  .hlFrame::after {
    top: -18px;
    left: -18px;
    width: 96px;
    height: 96px;
  }
}

@media (max-width: 480px) {
  .hlPanel {
    padding: 32px 14px 24px !important;
    border-radius: 20px;
  }

  .hlCorner {
    width: 40px;
    height: 40px;
  }

  .hlCorner--tl {
    top: 10px;
    left: 10px;
  }

  .hlCorner--br {
    right: 10px;
    bottom: 10px;
  }

  .hlCorner--tl::after {
    left: 36px;
  }

  .hlCorner--br::after {
    right: 36px;
  }

  .hlList li {
    min-height: 58px;
    padding: 11px 12px 11px 64px !important;
    font-size: 14.5px;
  }

  .hlList li::before {
    left: 12px !important;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    background-size: 19px 19px, cover;
  }

  .hlChip {
    left: 14px;
    bottom: 14px;
    padding: 6px 11px;
    font-size: 10px;
  }
}

/* ---- Motion ---- */
@keyframes hlBeam {
  to { --hl-angle: 360deg; }
}

@keyframes hlRise {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}

@keyframes hlSlideIn {
  from { opacity: 0; transform: translateX(-30px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes hlPop {
  0% { opacity: 0; transform: scale(.3) rotate(-35deg); }
  70% { opacity: 1; transform: scale(1.12) rotate(6deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes hlCornerDraw {
  from { opacity: 0; transform: scale(.2); }
  to { opacity: 1; transform: none; }
}

@keyframes hlLine {
  from { width: 0; }
  to { width: 72px; }
}

@keyframes hlCurtain {
  from { opacity: .35; clip-path: inset(0 100% 0 0 round 20px); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 20px); }
}

@keyframes hlFrameSlide {
  from { opacity: 0; transform: translate(-22px, -22px); }
  to { opacity: 1; transform: none; }
}

@keyframes hlFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hlSheen {
  from { left: -60%; opacity: 1; }
  to { left: 130%; opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .hlPanel::before {
    animation: hlBeam 7s linear infinite !important;
  }

  /* hidden only after script.js arms the block, so no-JS visitors still see it */
  .hl-armed .hlPanel:not(.hl-inview),
  .hl-armed .hlFrame:not(.hl-inview) {
    opacity: 0;
  }

  /* "backwards" keeps each part hidden during its delay and hands control back
     to the normal styles afterwards, so hover effects keep working */
  .hlPanel.hl-inview {
    animation: hlRise .9s var(--hl-ease) backwards !important;
  }

  .hlPanel.hl-inview .hlCorner {
    animation: hlCornerDraw .8s var(--hl-ease) .45s backwards !important;
  }

  .hlPanel.hl-inview .highlightsTitle {
    animation: hlRise .8s var(--hl-ease) .15s backwards !important;
  }

  .hlPanel.hl-inview .highlightsTitle::after {
    animation: hlLine .9s ease .55s backwards !important;
  }

  .hlPanel.hl-inview .hlList li {
    animation: hlSlideIn .7s var(--hl-ease) backwards !important;
  }

  .hlPanel.hl-inview .hlList li::before {
    animation: hlPop .65s cubic-bezier(.3, 1.4, .5, 1) backwards !important;
  }

  .hlPanel.hl-inview .hlList li:nth-child(1) { animation-delay: .35s !important; }
  .hlPanel.hl-inview .hlList li:nth-child(2) { animation-delay: .47s !important; }
  .hlPanel.hl-inview .hlList li:nth-child(3) { animation-delay: .59s !important; }
  .hlPanel.hl-inview .hlList li:nth-child(4) { animation-delay: .71s !important; }
  .hlPanel.hl-inview .hlList li:nth-child(5) { animation-delay: .83s !important; }
  .hlPanel.hl-inview .hlList li:nth-child(1)::before { animation-delay: .5s !important; }
  .hlPanel.hl-inview .hlList li:nth-child(2)::before { animation-delay: .62s !important; }
  .hlPanel.hl-inview .hlList li:nth-child(3)::before { animation-delay: .74s !important; }
  .hlPanel.hl-inview .hlList li:nth-child(4)::before { animation-delay: .86s !important; }
  .hlPanel.hl-inview .hlList li:nth-child(5)::before { animation-delay: .98s !important; }

  .hlPanel.hl-inview .overviewBrochureButton {
    animation: hlRise .7s var(--hl-ease) 1.05s backwards !important;
  }

  .hlPanel .overviewBrochureButton::before {
    animation: shimmer 3s infinite !important;
  }

  .hlFrame.hl-inview .overviewImage {
    animation: hlCurtain 1.15s cubic-bezier(.7, 0, .2, 1) .1s backwards !important;
  }

  .hlFrame.hl-inview::before {
    animation: hlFrameSlide 1s var(--hl-ease) .75s backwards !important;
  }

  .hlFrame.hl-inview::after {
    animation: hlFade 1.2s ease .9s backwards !important;
  }

  .hlFrame.hl-inview .hlChip {
    animation: hlRise .6s var(--hl-ease) 1.15s backwards !important;
  }

  .hlList li,
  .hlList li::before,
  .hlFrame .overviewImage {
    transition: transform .45s var(--hl-ease), box-shadow .45s ease, border-color .35s ease !important;
  }

  .hlList li:hover {
    transform: translateX(6px);
  }

  .hlList li:hover::before {
    transform: rotate(-10deg) scale(1.08);
  }

  .hlList li:hover::after {
    animation: hlSheen .9s ease forwards !important;
  }

  .hlFrame:hover .overviewImage {
    transform: translateY(-6px);
  }
}