:root {

  --colorPrimary: #e31836 ;

  --colorSecondary: #e31836 ;

  --colorText: #000000;

  --bodyColorPrimary: #ffffff;

  --bodyColorSecondary: #ffffff;

  --buttonBodyColorPrimary: #e31836 ;

  --buttonBodyColorSecondary: #e31836 ;

  --buttonTextColor: #fff;

}



button {

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

}





.bannerIntroText,

.offerText {

  text-transform: capitalize;

  letter-spacing: normal

}



.aboutSection .floorPlanSectionTitle,

.bannerMainTitle,

.bannerPrice,

.price-title,

.quoteTitle,

.tourHeading {

  -webkit-text-fill-color: transparent

}



@media (max-width:1280px) {

  .headerNav {

    gap: 10px;

    margin: 0 20px;

  }

}





/* .bannerPropertyImage */

/* ,.map-image-container img,  */

 .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: linear-gradient(135deg, rgba(229, 185, 115, .15) 0, rgba(229, 185, 115, .15) 100%); */

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 12px;

  padding: 2vh 2vw;

  display: inline-block;

  position: relative;

  overflow: hidden;

  transition: .3s

}


/* 
.bannerOffer:hover {

  box-shadow: 0 0px 5px var(--colorSecondary)

} */



@keyframes shimmer {

  0% {

    left: -100%

  }



  100% {

    left: 100%

  }

}



.offerText {

  display: block;

  font-size: 1.2vw;

  font-weight: 500;

  color: var(--colorPrimary);

  margin-bottom: 5px

}

.offerText:last-child {

  margin-bottom: 0;

}



.quoteCheckboxWrapper,

.quotePhoneWrapper {

  display: flex;

  gap: 12px

}



.quotePopupClose,

.quoteSubmit {

  border: none;

  transition: .3s;

  cursor: pointer

}



/* .quoteSelect {

  flex: 0 0 40%;

  cursor: pointer

} */



.highlightsList li,

.overviewDescription {

  line-height: 1.8;

  color: var(--colorText);

  font-size: 16px

}



.amenitiesDownloadBtn::before,

.floorPlanCta::before,

.galleryDownloadBtn::before,

.map-cta::before,

.overviewBrochureButton::before,

.price-get-details::before,

.quoteSubmit::before,

.requestButton::before,

.loanBtn::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

.loanBtn::hover {

  background: linear-gradient(135deg, var(--buttonBodyColorPrimary) 0, var(--buttonBodyColorSecondary) 50%, var(--buttonBodyColorPrimary) 100%);

  transform: translateY(-3px);

  box-shadow: 0 0px 5px var(--colorPrimary)

}



.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

}



.quotePopupContent {

  position: relative;

  background: linear-gradient(135deg, var(--bodyColorPrimary) 0, var(--bodyColorSecondary) 100%);

  border-radius: 20px;

  padding: 40px;

  max-width: 500px;

  width: 90%;

  max-height: 90vh;

  overflow-y: auto;

  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);

  border: 1px solid rgba(255, 255, 255, .1);

  animation: .3s ease-out popupSlideIn

}



@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(--colorPrimary);

  width: 40px;

  height: 40px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px

}



.quotePopupClose:hover {

  background: rgba(255, 255, 255, .2)

}



.quotePopup .quoteForm {

  background: 0 0;

  padding: 0;

  border: none;

  box-shadow: none

}



.quotePopup .quoteTitle {

  font-size: 28px;

  margin-bottom: 8px;

  text-align: center;
  -webkit-text-fill-color:var(--buttonBodyColorPrimary);
  font-weight: 700;

}



.quotePopup .quoteInput,

.quotePopup .quotePhoneInput,

.quotePopup .quoteSelect {

  font-size: 16px;

  /* margin: 12px 0; */

  padding: 10px 25px

}



.quotePopup .quoteSubmit {

  margin-top: 5px;

  font-size: 15px;

  padding: 10px 25px

}



.overviewSection {

  background: linear-gradient(135deg, var(--bodyColorPrimary) 0, var(--bodyColorSecondary) 100%);

  padding: 30px 0 80px;

}



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

}



.overviewTextSection {

  flex: 1;

  padding-right: 20px

}



.amenitiesTitle,

.galleryTitle,

.highlightsTitle,

.map-title,

.overviewTitle {

  font-size: 36px;

  font-weight: 700;

  text-align: center;

  margin-bottom: 30px;

  background: linear-gradient(135deg, var(--colorPrimary) 0, var(--colorSecondary) 50%, var(--colorPrimary) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  position: relative

}



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

  font-weight: 700;

  font-size: 20px

}



.overviewBrochureButton {

  background: linear-gradient(135deg, var(--buttonBodyColorPrimary) 0, var(--buttonBodyColorSecondary) 50%, var(--buttonBodyColorPrimary) 100%);

  color: var(--buttonTextColor);

  border: none;

  padding: 10px 25px;

  border-radius: 8px;

  font-size: 16px;

  font-weight: 700;

  cursor: pointer;

  transition: .3s;

  box-shadow: 0 0px 5px var(--colorPrimary);

  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 20px 40px rgba(0, 0, 0, .3);

  border: 2px solid rgba(229, 185, 115, .2);

  transition: transform .3s

}



.amenitiesSlide:hover,

.gallerySlide:hover,

.overviewImage:hover,

.videoThumbnail:hover {

  transform: scale(1.02)

}



.amenitiesSection,

.floorPlanSection,

.gallerySection,

.priceSection {

  background: linear-gradient(135deg, var(--bodyColorPrimary) 0, var(--bodyColorSecondary) 100%);

  padding: 80px 0;

  opacity: 0;

  transform: translateY(50px);

  transition: .8s ease-out

}



.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

}



.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

  }



  /* .headerNav {

    gap: 25px;

    display: none;

  } */

  .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: linear-gradient(135deg, var(--bodyColorPrimary) 0, var(--bodyColorSecondary) 100%);

    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 10px

  }



  .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,

.loanBtn {

  color: var(--buttonTextColor);

  box-shadow: 0 0px 5px var(--colorPrimary);

  transition: .3s;

  cursor: pointer

}



.amenitiesNext,

.amenitiesPrev {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: var(--buttonBodyColorPrimary);

  color: var(--buttonTextColor);

  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(--buttonBodyColorSecondary);

  transform: translateY(-50%) scale(1.1);

  box-shadow: 0 6px 20px rgba(229, 185, 115, .5)

}



.amenitiesDownloadBtn,

.galleryDownloadBtn,

.requestButton,

.loanBtn {

  background: linear-gradient(135deg, var(--buttonBodyColorPrimary) 0, var(--buttonBodyColorSecondary) 50%, var(--buttonBodyColorPrimary) 100%);

  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)

}



@media (min-width:1450px) {

  .amenitiesLightboxImage,

.galleryLightboxImage {

  max-height: 60vh;

}

}



.floorPlanCta,

.galleryNext,

.galleryPrev,

.price-get-details {

  box-shadow: 0 0px 5px var(--colorPrimary)

}



.amenitiesLightboxClose,

.galleryLightboxClose {

  position: absolute;

  top: 5px;

  right: 5px;

  background: var(--buttonBodyColorPrimary);

  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(--buttonBodyColorPrimary);

  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,

.price-row {

  justify-content: space-between

}



.amenitiesLightboxPrev,

.galleryLightboxPrev {

  left: 5px

}



.amenitiesLightboxNext,

.galleryLightboxNext {

  right: 5px

}



.amenitiesLightboxNext:hover,

.amenitiesLightboxPrev:hover,

.galleryLightboxNav:hover {

  background: var(--buttonBodyColorSecondary);

  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(--buttonBodyColorPrimary);

  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: linear-gradient(135deg, var(--colorPrimary) 0, var(--colorSecondary) 50%, var(--colorSecondary) 100%)

} */



.price-heading-container {

  text-align: center;

  margin-bottom: 30px

}



.price-title {

  font-size: 36px;

  font-weight: 700;

  -webkit-background-clip: text;

  background-clip: text;

  position: relative;

  margin: 0

}



.price-container {

  margin: 0 auto;

  padding: 0 40px;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));

  gap: 30px;

  place-content: center;

}



.price-card {

  background: var(--bodyColorPrimary);

  border-radius: 20px;

  padding: 25px;

  border: 1px solid var(--colorPrimary);

  transition: .3s;

  backdrop-filter: blur(10px);

  position: relative;

  overflow: hidden

}



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

  box-shadow: 0 5px 5px var(--colorSecondary)

} */



.price-floor-plan {

  margin-bottom: 20px;

  border-radius: 15px;

  overflow: hidden;

  height: 200px

}



.aboutSectionQr img:hover,

.floorPlanCard:hover img,

.price-card:hover .price-floor-plan img,

.videoThumbnail:hover .tourImage {

  transform: scale(1.05)

}



.price-details {

  color: var(--colorText)

}



.price-row {

  display: block;

  align-items: center;

  padding: 12px 0;

  border-bottom: 1px solid #888;

  line-height: 2;

  gap: 10px;

}



.connectivity-item:last-child,

.price-row:last-child {

  border-bottom: none

}



.price-label {

  font-size: 16px;

  font-weight: 500;

  color: var(--colorText)

}



.price-value {

  font-size: 16px;

  font-weight: 600;

  color: var(--colorText);

  text-align:center;

}



.price-value.highlight {

  color: var(--colorPrimary);

  font-size: 18px;

  font-weight: 700

}



.price-get-details,

.price-get-details:hover {

  background: linear-gradient(135deg, var(--buttonBodyColorPrimary) 0, var(--buttonBodyColorSecondary) 50%, var(--buttonBodyColorSecondary) 100%);

  color: var(--buttonTextColor);

}



.price-get-details {
  margin-top:6px;
  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

}



.price-get-details:hover {

  transform: translateY(-3px);

  box-shadow: 0 0px 5px var(--colorPrimary)

}



.galleryTrack {

  display: flex;

  transition: transform .5s ease-in-out;

  will-change: transform;

  width: 700%

}



.gallerySlide {

  width: 14.285%;

  position: relative;

  cursor: pointer;

  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%

  }



  .gallerySlide {

    width: 100%;

    flex: 0 0 100%

  }

}



@media (min-width:1025px) {
  

  .galleryCarousel {

    width: 100%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 10px

  }



  .galleryNext,

  .galleryPrev {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10

  }



  .galleryTrack {

    width: 100%;

    display: flex;

    justify-content: space-between;

    gap: 20px

  }



  .gallerySlide {

    width: calc(33.333% - 14px);

    flex-shrink: 0;

    margin: 0

  }



  .galleryPrev {

    left: 10px

  }



  .galleryNext {

    right: 10px

  }

}



.galleryImageContainer {

  position: relative;

  width: 100%;

  height: 300px;

  overflow: hidden

}



.galleryNext,

.galleryPrev {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: var(--buttonBodyColorPrimary);

  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;

  z-index: 1000;

  pointer-events: auto

}



.galleryLightboxCounter {

  position: absolute;

  top: 5px;

  left: 5px;

  background-color: var(--buttonBodyColorPrimary);

  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: 350px

  }

}



.floorPlanSectionTitle {

  text-align: center;

  font-size: 36px;

  font-weight: 700;

  color: var(--colorPrimary);

  margin-bottom: 30px;

  position: relative

}



.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: var(--bodyColorSecondary);

  border-radius: 20px;

  padding: 20px;

  border: 1px solid var(--colorPrimary);

  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: 250px;

  object-fit: cover;

  border-radius: 12px;

  margin-bottom: 10px;

  transition: transform .3s

}



.floorPlanCard h3 {

  font-size: 16px;

  font-weight: 600;

  color: var(--colorText);

  text-align: center;

  margin-bottom: 0px

}



.floorPlanOverlay {

  background: rgba(0, 0, 0, .7);

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transition: opacity .3s

}



.floorPlanButton,

.floorPlanButton:hover {

  background: linear-gradient(135deg, var(--buttonBodyColorPrimary) 0, var(--buttonBodyColorSecondary) 50%, var(--buttonBodyColorSecondary) 100%)

}



.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(229, 185, 115, .3)

}



.floorPlanIndicators,

.floorPlanNext,

.floorPlanPrev {

  display: none

}



.floorPlanCta {

  background: linear-gradient(135deg, var(--buttonBodyColorPrimary) 0, var(--buttonBodyColorSecondary) 50%, var(--buttonBodyColorPrimary) 100%);

  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,

.mapSection,

.virtualTourSection {

  background: linear-gradient(135deg, var(--bodyColorPrimary) 0, var(--bodyColorSecondary) 100%);

  padding: 80px 0;

  color: var(--colorText)

}



.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(229, 185, 115, .3);

  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);

  overflow: hidden

}



.map-cta {

  box-shadow: 0 0px 5px var(--colorPrimary)

}



.map-right {

  display: flex;

  flex-direction: column;

  gap: 20px

}



.map-dropdown {

  background: var(--bodyColorSecondary);

  border-radius: 12px;

  border: 1px solid var(--colorPrimary);

  overflow: hidden;

  transition: .3s

}



/* .map-dropdown:hover {

  background: rgba(255, 255, 255, .08);

  border-color: rgba(229, 185, 115, .3)

} */



.map-dropdown-btn {

  width: 100%;

  background: 0 0;

  border: none;

  color: var(--colorText);

  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: var(--bodyColorPrimary)

}



.map-dropdown-btn.active {

  background: var(--colorPrimary);

  opacity: 0.8;

  color: var(--buttonTextColor)

}



.map-arrow {

  transition: transform .3s;

  font-size: 18px

}



.map-arrow.active {

  transform: rotate(180deg);

  color: var(--colorPrimary)

}



.map-dropdown-content {

  max-height: 0;

  overflow: hidden;

  transition: max-height .3s;

  background: var(--bodyColorSecondary)

}



.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(255, 255, 255, .1);

  transition: background .3s

}



.connectivity-item .location {

  font-size: 16px;

  font-weight: 400;

  color: var(--colorText);

  flex: 1

}



.connectivity-item .time {

  font-size: 14px;

  font-weight: 600;

  color: var(--colorPrimary);

  background: rgba(229, 185, 115, .1);

  padding: 4px 12px;

  border-radius: 20px;

  white-space: nowrap

}



.map-cta {

  background: linear-gradient(135deg, var(--buttonBodyColorPrimary) 0, var(--buttonBodyColorSecondary) 50%, var(--buttonBodyColorPrimary) 100%);

  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: 30px;

  border: 1px solid rgba(255, 255, 255, .1);

  transition: .3s

}



.tourVideoWrapper,

.videoThumbnail {

  position: relative;

  overflow: hidden;

  border-radius: 15px

}



.tourColumn:hover {

  background: rgba(255, 255, 255, .08);

  border-color: rgba(229, 185, 115, .3);

  transform: translateY(-5px);

  box-shadow: 0 10px 40px rgba(0, 0, 0, .3)

}



.tourHeading {

  font-size: 28px;

  font-weight: 700;

  margin-bottom: 25px;

  background: linear-gradient(135deg, var(--buttonBodyColorPrimary) 0, var(--buttonBodyColorSecondary) 50%, var(--buttonBodyColorPrimary) 100%);

  -webkit-background-clip: text;

  background-clip: text

}



.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: linear-gradient(135deg, var(--colorPrimary) 0, var(--colorSecondary) 50%, var(--colorPrimary) 100%)

}



.playButton {

  background: linear-gradient(135deg, var(--buttonBodyColorPrimary) 0, var(--buttonBodyColorSecondary) 50%, var(--buttonBodyColorPrimary) 100%);

}



.videoThumbnail:hover .playButtonOverlay {

  background: rgba(0, 0, 0, .5)

}



.playButton {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  position: relative;

  cursor: pointer;

  transition: .3s;

  box-shadow: 0 8px 25px rgba(229, 185, 115, .4)

}



.playButton:hover {

  transform: scale(1.1);

  box-shadow: 0 12px 35px rgba(229, 185, 115, .6)

}



.playButton::before {

  content: '';

  position: absolute;

  top: 50%;

  left: 55%;

  transform: translate(-50%, -50%);

  width: 0;

  height: 0;

  border-left: 20px solid var(--buttonTextColor);

  border-top: 12px solid transparent;

  border-bottom: 12px solid transparent

}



.aboutSection .floorPlanSectionTitle {

  text-align: center;

  margin-bottom: 30px;

  font-size: 36px;

  font-weight: 700;

  -webkit-background-clip: text;

  background-clip: text;

  position: relative

}



.aboutSectionDescription {

  margin: 0 auto;

  padding: 0 40px;

  font-size: 16px;

  line-height: 1.8;

  color: var(--colorText);

  text-align: center;

  font-weight: 400

}



.readMoreLink {

  color: var(--colorPrimary) !important;

  text-decoration: none;

  font-weight: 600;

  font-size: 16px;

  transition: .3s;

  display: inline-block;

  position: relative

}



.readMoreLink:hover {

  color: var(--colorSecondary) !important;

  transform: translateY(-2px)

}



.readMoreLink::after {

  content: '';

  position: absolute;

  bottom: -2px;

  left: 0;

  width: 0;

  height: 2px;

  background: linear-gradient(135deg, var(--colorPrimary) 0, var(--colorSecondary) 100%);

  transition: width .3s

}



.readMoreLink:hover::after {

  width: 100%

}



.footerDisclaimer,

.footerLinks p {

  font-size: 14px;

  text-align: center

}



.footerContainer {

  background: linear-gradient(135deg, var(--bodyColorPrimary) 0, var(--bodyColorSecondary) 100%);

  color: var(--colorText);

  padding: 60px 0 30px;

  border-top: 1px solid rgba(255, 255, 255, .1)

}



.footerList {

  margin-bottom: 30px

}



.footerAdvertiser,

.footerProjectNumber,

.footerRegistration {

  font-size: 14px;

  line-height: 1.6;

  color: var(--colorText);

  margin-bottom: 5px;

  text-align: center

}



.footerPrivacy,

.footerTerms,

.reraLink {

  color: var(--colorPrimary);

  text-decoration: none;

  font-weight: 600;

  transition: .3s

}



.footerPrivacy:hover,

.footerTerms:hover,

.reraLink:hover {

  color: var(--colorPrimary);

  text-decoration: underline

}



.footerDisclaimer {

  max-width: 1000px;

  margin: 0 auto 30px;

  padding: 0 40px;

  line-height: 1.6;

  color: var(--colorText);

  font-style: italic

}



.footerDisclaimer strong {

  color: var(--colorPrimary);

  font-weight: 600

}



.footerLinks {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 25px;

  padding: 0 40px

}



.aboutSectionQr {

  display: flex;

  gap: 20px;

  justify-content: center;

  flex-wrap: wrap

}



.aboutSectionQr img {

  border-radius: 8px;

  box-shadow: 0 4px 15px var(--bodyColorSecondary);

  transition: transform .3s;

  width: auto;

}



.footerLinks p {

  color: var(--colorText);

  margin: 0

}



@media (max-width:1024px) {

  .quotePopupContent {

    padding: 30px 25px;

    margin: 20px;

    width: calc(100% - 40px)

  }



  .quotePopup .quoteTitle {

    font-size: 24px

  }



  .offerText {

    font-size: 15px

  }



  .quotePopup .quoteInput,

  .quotePopup .quotePhoneInput,

  .quotePopup .quoteSelect {

    font-size: 15px;

    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

  } */



  

  

  .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: 28px;

    margin-bottom: 25px

  }



  .highlightsList li {

    font-size: 16px;

    text-align: left

  }



  .overviewBrochureButton,

  .price-get-details {

    padding: 12px 30px;

    font-size: 16px

  }



  .amenitiesTitle,

  .floorPlanSectionTitle,

  .galleryTitle,

  .map-title,

  .price-title {

    font-size: 36px;

    margin-bottom: 40px

  }

  .overviewTextSection p { text-align: left; }

  .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: 20px

  }



  .amenitiesLightboxCounter {

    font-size: 14px;

  }



  .price-container {

    padding: 0 20px;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px

  }



  .price-card {

    padding: 15px;

  }



  .price-card::before {

    display: none;

  }



  .price-floor-plan {

    height: 120px;

    overflow: hidden;

    border-radius: 8px;

    margin-bottom: 15px

  }



  .price-row {

    padding: 8px 0;

  }



  .price-label {

    font-size: 12px;

  }



  .price-value {

    font-size: 12px;

  }



  .price-value.highlight {

    font-size: 14px;

  }



  .galleryLightboxCounter {

    font-size: 14px;

  }



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

    object-fit: cover;

    border-radius: 12px;

    margin-bottom: 15px

  }



  .floorPlanCard h3 {

    font-size: 15px;

    margin-bottom: 10px;

    text-align: center

  }



  .floorPlanOverlay {

    position: absolute;

    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(--buttonBodyColorPrimary);

    color: var(--buttonTextColor);

    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(--colorSecondary);

    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(229, 185, 115, .3);

    cursor: pointer;

    transition: .3s

  }



  .floorPlanDot.active {

    background: var(--colorPrimary);

    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,

  .footerLinks p {

    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

  }



  .tourHeading {

    font-size: 24px;

    margin-bottom: 20px

  }



  .videoThumbnail {

    height: 250px

  }



  .playButton {

    width: 70px;

    height: 70px

  }



  .playButton::before {

    border-left: 18px solid var(--buttonTextColor);

    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: 13px;

    margin-bottom: 10px

  }



  .footerDisclaimer {

    padding: 0 20px;

    font-size: 12px;

    margin-bottom: 25px

  }



  .footerLinks {

    gap: 20px

  }



  .aboutSectionQr {

    gap: 15px

  }



  .aboutSectionQr img {

    height: 100px !important

  }

}



@media (max-width:480px) {

  .quotePopupContent {

    padding: 25px 20px;

    margin: 15px;

    width: calc(100% - 30px)

  }



  .quotePopup .quoteTitle {

    font-size: 22px

  }



  .quotePopup .quoteInput,

  .quotePopup .quotePhoneInput,

  .quotePopup .quoteSelect {

    font-size: 14px;

    padding: 10px 12px

  }



  .quotePopup .quoteSubmit {

    font-size: 15px;

    padding: 12px

  }



  .headerContainer {

    height: 65px;

    padding: 0 15px

  }



  .bannerSectionMain {

    padding-top: 65px;

    padding-bottom: 15px

  }



  .bannerContentSection {

    padding: 15px 20px

  }



  .bannerOfferSection {

    margin: 12px 0

  }



  .bannerOffer {

    padding: 10px 14px

  }



  .amenitiesSection,

  .floorPlanSection,

  .gallerySection,

  .overviewSection,

  .priceSection {

    padding: 40px 0

  }



  .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, 

  .loanBtn {

    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: 20px

  }



  .amenitiesLightboxCounter,

  .footerLinks p,

  .galleryLightboxCounter {

    font-size: 12px

  }



  .price-container {

    padding: 0 15px;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px

  }



  .price-card {

    border-radius: 8px;

    padding: 12px;

  }



  



  .price-floor-plan {

    height: 100px;

    border-radius: 6px;

    margin-bottom: 12px

  }



  .price-row {

    padding: 6px 0;

  }



  .price-label {

    font-size: 10px;

  }



  .price-value {

    font-size: 10px;

  }



  .price-value.highlight {

    font-size: 12px;

  }



  .price-get-details {

    padding: 6px 7px;

    font-size: 10px

  }



  .floorPlanSectionTitle {

    font-size: 24px;

    margin-bottom: 25px;

    color: var(--colorPrimary)

  }



  .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 {

    position: absolute;

    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 ;

  }

  .floorPlanCta {

    padding: 10px 25px;

    font-size: 15px;

    margin-top: 25px

  }



  .aboutSection,

  .mapSection,

  .virtualTourSection {

    padding: 50px 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

  }



  .tourHeading {

    font-size: 22px;

    margin-bottom: 18px

  }



  .videoThumbnail {

    height: 200px

  }



  .playButton {

    width: 60px;

    height: 60px

  }



  .playButton::before {

    border-left: 15px solid var(--buttonTextColor);

    border-top: 9px solid transparent;

    border-bottom: 9px solid transparent

  }



  .aboutSectionDescription {

    padding: 0 15px;

    font-size: 15px;

    line-height: 1.6

  }

  

  .footerContainer {

    padding: 40px 0 80px

  }



  .footerAdvertiser,

  .footerProjectNumber,

  .footerRegistration {

    font-size: 12px;

    margin-bottom: 8px

  }



  .footerDisclaimer {

    padding: 0 15px;

    font-size: 12px;

    margin-bottom: 20px

  }



  .footerLinks {

    gap: 15px

  }



  .aboutSectionQr {

    gap: 12px;

    align-items: center

  }



  .aboutSectionQr img {

    height: 80px !important

  }

}



.mobileBottomBar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  position: fixed;

  bottom:10px;

  left: 0;

  right: 0;

  background-color: var(--bodyColorPrimary);

  box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);

  padding: 0px;

  z-index: 100;

  gap: 0px;

  border: 1px solid #b5945f;
  border-radius:10px;
  width:95%;
  margin:0 auto;
  overflow:hidden;

}



.mobileBottomBar a {

  flex: 1;

  text-align: center;

  padding: 8px;

  font-size: 10px;

  font-weight: 700;

  color: var(--colorText);

  text-decoration: none;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 3px;

  position: relative;

  overflow: visible;
  flex-direction: column;
}



.callButton,

.pdfButton {

  background-color: transparent

}

.whatsappButton {

  background-color: #1ebe57;

  color: #ffffff !important;

}



.callButton,

.pdfButton {

  border-right: 1px solid #b5945f

}

@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: none;

  align-items: center;

  padding: 5px 16px;

  gap: 10px;

  background-color: var(--bodyColorPrimary);

  /* optional background */

  border: 1px solid var(--colorPrimary);

  cursor: pointer;

  position: fixed;

  bottom: 50%;

  right: 25px;

  transform: rotate(-90deg);

  transform-origin: right center;

  animation: bounce 5s ease-in-out infinite;

}



@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(--colorText);

}



.pdf-icon {

  transform: rotate(90deg);

}



@media (min-width:1025px) {

  .sidedownloadBtn {

    display: inline-flex;

    right: 40px;

  }

}



@media (min-width:1025px) {

  .readMoreLink {display: none;}

  .clampText {display: block;}

}

.popupLogo {

  height: auto;

}



#m-emi-calculator {

            padding: 28px 16px;

        }





        #m-emi-calculator article {

            width: 100%;

            max-width: 1180px;

            margin: 0 auto;

            overflow: hidden;

            /* border: 1px solid rgba(184, 134, 11, 0.14);

            background: var(--emi-surface);

            box-shadow: var(--emi-shadow); */

        }





        .emi-card-body {

            padding: 0;

        }





        .emi-panel {

            display: grid;

            grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

            background: transparent;

        }





        .emi-input-column {

            padding: 28px 26px 30px;

            border-right: 1px solid #cdcdcd;

        }





        .emi-results-column {

            padding: 28px 24px 30px;

            /* background: linear-gradient(180deg, var(--bodyColorPrimary) 0%, var(--bgColorSecondary) 100%); */

        }





        .emi-copy {

            max-width: 540px;

            margin: 12px 0 0;

            line-height: 1.7;

            color: var(--colorText);

        }





        .emi-fields {

            margin-top: 24px;

            display: grid;

            gap: 18px;

        }





        .emi-field {

            display: block;

        }





        .emi-field-top {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 14px;

            /* margin-bottom: 10px; */

        }





        .emi-field-label {

            color: var(--colorText);

            width: 50%;

        }





        .emi-input-wrap {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            min-width: 142px;

            padding: 10px 0;

            font-size: 0.96rem;

            font-weight: 700;

            justify-content: flex-end;

        }





        .emi-input-wrap input {

            width:50%;

            min-width: 0;

            padding: 5px;

            border: 0;

            outline: none;

            background: #cdcdcd45;

            color: var(--colorText);

            text-align: right;

            font: inherit;

            border-radius: 5px;

        }





        .emi-slider {

            width: 100%;

            height: 6px;

            appearance: none;

            -webkit-appearance: none;

            outline: none;

            border-radius: 999px;

            background: linear-gradient(

                90deg,

                var(--colorPrimary) 0%,

                var(--colorPrimary) var(--emi-progress, 0%),

                #cdcdcd var(--emi-progress, 0%),

                #cdcdcd 100%

            );

        }





        .emi-slider::-webkit-slider-thumb {

            appearance: none;

            -webkit-appearance: none;

            width: 15px;

            height: 15px;

            cursor: pointer;

            border: 2px solid #fff;

            border-radius: 50%;

            background: var(--colorPrimary);

            box-shadow: 0 5px 16px var(--colorPrimary);

        }





        .emi-slider::-moz-range-thumb {

            width: 15px;

            height: 15px;

            cursor: pointer;

            border: 2px solid #fff;

            border-radius: 50%;

            background: var(--colorPrimary);

            box-shadow: 0 5px 16px var(--colorPrimary);

        }





        .emi-results-tag {

            font-weight: 800;

            letter-spacing: 0.16em;

            text-transform: uppercase;

            color: var(--colorPrimary);

        }





        .emi-summary-grid {

            margin-top: 14px;

            display: grid;

            gap: 12px;

            grid-template-columns: repeat(2, minmax(0, 1fr));

        }





        .emi-summary-card {

            padding: 16px;

            border: 1px solid #cdcdcd;

            border-radius: 15px;

            background: var(--bgColorSecondary);

        }





        .emi-summary-label {

            margin: 0;

            font-size: 0.77rem;

            font-weight: 700;

            text-transform: uppercase;

            color: var(--colorPrimary);

        }





        .emi-summary-value {

            margin: 10px 0 0;

            color: var(--colorText);

            font-weight: 700;

            line-height: 1.1;

        }





        #mEmiMonthlyValue {

            font-size: 1.95rem;

        }





        #mEmiInterestValue,

        #mEmiTotalValue,

        #mEmiPrincipalValue {

            font-size: 1.14rem;

        }





        .emi-chart-panel {

            margin-top: 14px;

            padding: 18px 16px 16px;

            border: 1px solid #cdcdcd;

            border-radius: 24px;

            background: var(--bgColorSecondary);

            text-align: center;

        }





        .m-emi-donut {

            --emi-interest-angle: 0deg;

            position: relative;

            width: 136px;

            height: 136px;

            margin: 0 auto;

            border-radius: 50%;

            background: conic-gradient(

                var(--colorPrimary) 0deg,

                var(--colorPrimary) var(--emi-interest-angle),

                #cdcdcd var(--emi-interest-angle),

                #cdcdcd 360deg

            );

        }





        .m-emi-donut::after {

            content: "";

            position: absolute;

            inset: 18%;

            border-radius: 50%;

            background: var(--bodyColorPrimary);

        }





        .emi-donut-center {

            position: absolute;

            inset: 0;

            z-index: 1;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-direction: column;

            color: var(--colorText);

            font-size: 0.8rem;

        }





        .emi-donut-center strong {

            margin-top: 4px;

            color: var(--colorText);

            font-size: 0.98rem;

        }





        .emi-legend {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 18px;

            flex-wrap: wrap;

            margin-top: 16px;

            color: var(--colorText);

            font-size: 0.77rem;

        }





        .emi-legend-item {

            display: flex;

            align-items: center;

            gap: 8px;

        }





        .emi-legend-swatch {

            width: 9px;

            height: 9px;

            border-radius: 50%;

        }

        .emi-legend-item:first-of-type .emi-legend-swatch {

            background: var(--colorPrimary);

        }

        .emi-legend-item:last-of-type .emi-legend-swatch {

            background: #cdcdcd;

        }





        .emi-note {

            margin: 14px 0 15px;

            font-size: 0.76rem;

            line-height: 1.65;

            color: var(--colorText);

        }

        .emi-cta {

          margin-top: 5px;

          text-align: center;

        }





        @media (max-width: 900px) {

            .emi-panel {

                grid-template-columns: 1fr;

            }





            .emi-input-column {

                border-right: 0;

                border-bottom: 1px solid #cdcdcd;

            }

        }





        @media (max-width: 640px) {

            #m-emi-calculator {

                padding: 16px;

            }





            .emi-input-column,

            .emi-results-column {

                padding: 20px 16px 22px;

            }





            .emi-heading {

                font-size: 1.84rem;

            }





            .emi-field-top {

                align-items: center;

            }





            .emi-input-wrap {

                width: 100%;

            }





            .emi-summary-card {

                padding: 12px;

            }





            #mEmiMonthlyValue {

              font-size: 18px;

            }

            #mEmiInterestValue, #mEmiTotalValue, #mEmiPrincipalValue {

              font-size: 16px;

            }

            .emi-summary-label {font-size: 12px;}

        }