:root {

  /* ===== Promenade Residences at Blue Ridge  brochure palette: cool cream + antique gold + black ===== */
  --fontPrimary: #213520;
  /* near-black  headings, strong text, accents, borders */
  --fontSecondary: #4a5548;
  /* neutral warm-grey  body text */
  --bgColorPrimary: #f6f5f0;
  /* cool neutral cream  primary background (brochure #f2f1ed) */
  --bgColorSecondary: #eceee6;
  /* soft neutral stone  secondary background band */
  --buttonTextColor: #ffffff;
  /* white text on #213520 CTAs */
  --accentOrange: #b8913c;
  /* warm brown accent (var name kept for compatibility) */
  --buttonColor: linear-gradient(135deg, #335534, #213520 55%, #16240f);
  /* #213520 warm-brown CTA */

  /* Extended luxury tokens  warm-brown (#213520) accent system */
  --gold: #b8913c;
  --goldLight: #d0ac59;
  --goldDeep: #8a6b28;
  --charcoal: #213520;
  --charcoal2: #2c3f2b;
  --ivory: #f6f5f0;
  --champagne: #eceee6;
}

.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(33, 53, 32, 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(33, 53, 32, .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(184, 156, 148, .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(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, 0.08);
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
  overflow: hidden
}

.map-cta {
  box-shadow: 0 4px 15px rgba(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .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 #213520 on
     #213520 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(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .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(184, 145, 60, 0.15);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(33, 53, 32, 0.05);
  transition: all 0.3s ease;
  width: 160px;
  text-align: center;
}

.qrCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(184, 145, 60, 0.15);
  border-color: rgba(184, 145, 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(33, 53, 32, .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: #213520;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);
  padding: 0px;
  z-index: 100;
  gap: 0px;
  border-top: 1px solid #16240f
}

.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: #213520;
  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(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .20) !important;
  border-color: var(--gold) !important;
}

.price-card {
  background: linear-gradient(180deg, #ffffff, var(--champagne)) !important;
  border: 1px solid rgba(33, 53, 32, .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(33, 53, 32, .35);
  box-shadow: 0 6px 24px rgba(33, 53, 32, .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: #2c3f2b !important;
  border-top: 3px solid var(--gold);
  box-shadow: 0 -6px 24px rgba(33, 53, 32, .06);
}

.footerWrapper a,
.footerWrapper p,
.footerWrapper span,
.footerProjectName,
.footerRegistration,
.footerProjectNumber,
.footerContactInfo {
  color: #2c3f2b !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: #4a5548 !important;
}

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

.footerLinks,
.footerLinks p,
.footerTerms,
.footerPrivacy {
  color: #4a5548 !important;
}

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

/* ---- Offer pill ---- */
.bannerOffer {
  background: rgba(33, 53, 32, .10) !important;
  border: 1px solid rgba(33, 53, 32, .55) !important;
  box-shadow: 0 0 0 1px rgba(33, 53, 32, .15), 0 10px 30px rgba(33, 53, 32, .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(33, 53, 32, .45);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(33, 53, 32, .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(33, 53, 32, .08);
  color: var(--fontSecondary);
}

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

.helios-price-table tbody tr:hover {
  background: rgba(33, 53, 32, .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(33, 53, 32, .16);
}

.helios-price-table tr.is-helios:hover {
  background: rgba(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .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(33, 53, 32, .14);
}

.amenityIcon {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(33, 53, 32, .12);
  border: 1px solid rgba(33, 53, 32, .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 #213520 on #213520 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(33, 53, 32, .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 #213520 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;
}
/* ===========================================================================
   The Reserve brand theme (from the official opportunity document)
   Deep forest green #213520 carries the CTAs, gold #b8913c is the accent.
   The old palette used a mid-brown CTA that happened to read against dark
   label text; the deeper green 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 (The Reserve) sits first as
   the primary identity, with the developer mark (Kolte-Patil) 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(33, 53, 32, .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 Kolte-Patil 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; }
}