@font-face {
  font-family: "gillei";
  src: url("fonts/Gillei-Quest.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "monteserrat";
  src: url("fonts/Montserrat.ttf") format("truetype");
  font-display: swap;
}

:root {
  --green: #112c19;
  --green-ame: #14331d;
  --green-alt: #6f7a63;
  --bg-strong: #d4e0cd;
  --bg: #fdfdf0;
  --grey: #d9d3d2;
}

body {
  scroll-behavior: smooth;
  font-family: monteserrat;
}

/* cursor */
html,
body {
  cursor: none;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

.cursor-dot {
  width: 10px;
  height: 10px;
  background-color: var(--bg);
  border-radius: 50%;
  z-index: 9999;
}

.cursor-ring {
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--bg-strong);
  border-radius: 50%;
  z-index: 9998;
  transition:
    top 0.08s ease-out,
    left 0.08s ease-out;
}

/* fonts*/
.header {
  font-family: "gillei", sans-serif;
  font-size: 3dvw;
  line-height: 3.5dvw;
  color: #fff;
}
.header-top {
  font-size: 1dvw;
}
.header-green {
  font-family: "gillei", sans-serif;
  font-size: 3dvw;
  line-height: 3.5dvw;
  background: linear-gradient(to right, #112c19 0%, #445d3d 50%, #9bb48e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  color: var(--green);
}
.header-config {
  font-size: 4dvw;
  line-height: 4dvw;
  font-weight: 600;
  color: var(--green);
}
.header-config-alt {
  font-size: 1dvw;
  line-height: 1dvw;
  font-weight: 600;
  color: var(--green-alt);
}

.content {
  font-size: 1.8dvh;
  color: var(--green-alt);
}

/* keywords scroller */
.keywords {
  background: var(--bg-strong);
  padding: 16px 0;
  overflow: hidden;
  white-space: nowrap;
}

.keywords-scroller {
  display: inline-block;
  animation: inf-scroll 26s linear infinite;
}

.keywords-scroller span {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
  margin: 0 40px;
}

.keywords-scroller .dot {
  font-size: 12px;
  color: rgba(13, 56, 48, 0.3);
  margin: 0 20px;
}

@keyframes inf-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* overview */
.bullet-point {
  color: var(--bg-strong);
  font-size: 2.2rem;
  margin-top: -0.4rem;
  line-height: 2.2rem;
}

.btn-alt {
  background-color: var(--bg-strong);
  color: var(--green);
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  border: none;
}
.btn-alt:hover {
  background-color: var(--bg);
  box-shadow: 0 0 15px rgba(92, 197, 118, 0.3);
}

.btn-floor {
  background-color: white;
  color: var(--green);
  border: 2px solid var(--green);
  font-size: 0.85rem;
  letter-spacing: 1.5px;
}
.btn-floor:hover {
  background-color: var(--green-alt);
  color: var(--bg-strong);
  box-shadow: 0 0 15px rgba(92, 197, 118, 0.3);
}

.btn-main {
  background-color: var(--green);
  color: var(--bg);
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  border: none;
}
.btn-main:hover {
  background-color: var(--green-alt);
  color: var(--bg);
  box-shadow: 0 0 15px rgba(92, 197, 97, 0.3);
}

/* project snapshot */
.snap-tile {
  background-color: #fff;
  padding-block: 5dvh;
  transition: 0.5s;
}

.snap-icon {
  color: var(--green-alt);
  transition: 0.5s;
}

.snap-num {
  font-size: 2dvw;
  font-weight: 500;
  color: var(--green);
  transition: 0.5s;
}
.snap-text {
  font-size: 0.7dvw;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--green-alt);
}

.snap-tile:hover {
  background-color: var(--green);
  transform: translateY(-7px);
}

.snap-tile:hover .snap-icon {
  color: var(--bg-strong);
}
.snap-tile:hover .snap-num {
  color: var(--bg);
}

.snap-badge {
  background-color: #fff;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* Soft premium shadow */
  border: 1px solid #fff;
  transition: 0.5s;
}

.snap-badge span {
  font-size: 0.6dvw;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: var(--green);
  transition: 0.5s;
}

.fa-gear {
  color: var(--green-alt);
}

.snap-badge:hover {
  border: 1px solid var(--green-alt);
}

.snap-badge:hover span {
  color: var(--green-alt);
}

/* configuration section */
.configuration-container {
}

.config-tabs {
  border-bottom: 1px solid #e2ded5;
}

.config-tabs .nav-link {
  background: transparent;
  border: 1px solid transparent;
  color: var(--green-alt);
  font-size: 1dvw;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-block: 2dvh;
  padding-inline: 4.35dvh;
  border-radius: 0;
  transition: color 0.3s ease;
}

.config-tabs .nav-link:hover {
  background-color: var(--bg-strong);
}

.config-tabs .nav-link.active {
  background-color: var(--bg-strong);
  color: var(--green);
  border-bottom: 3px solid var(--green) !important;
}

.config-content {
  background-color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* amenities */
.amenities-text {
  font-size: 0.85dvw;
}
.ame-hr {
  margin-block: 2px;
  border-top: 1px solid #1b4426;
}
.amenities-header {
  font-size: 1.1dvw;
  font-weight: 500;
  color: var(--bg-strong);
}

.luxury-shimmer-card {
  position: relative;
  background-color: var(--green-ame);
  transition: 0.2s;
}

.luxury-shimmer-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--green-alt);

  transform: scaleX(0);
  transform-origin: center;

  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.luxury-shimmer-card:hover::before {
  transform: scaleX(1);
}
.luxury-shimmer-card:hover {
  background-color: #143820;
}

/* location */
.custom-location-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.custom-location-tabs .nav-link {
  background-color: var(--bg-strong);
  color: var(--green);
  border-radius: 0;
  border: 1px solid var(--bg-strong);
  padding: 0.5dvh 1dvh;
  font-size: 0.7dvw;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.loc-item {
  font-size: 1dvw;
  padding-block: 0.3dvw;
  border-bottom: 1px solid var(--bg-strong);
}

.custom-location-tabs .nav-link:hover {
  border: 1px solid var(--green);
}

.custom-location-tabs .nav-link.active {
  background-color: var(--green-alt) !important;
  color: var(--bg-strong) !important;
}

.location-content .tab-pane {
  display: none;
}
.location-content .tab-pane.active.show {
  display: block;
  animation: fadeIn 0.4s ease-in-out;
}

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

/* nav */
.transition-nav {
  transition: all 0.3s ease-in-out;
  background-color: #14331d60;
  border-radius: 20px;
}

.transition-nav .nav-link,
.transition-nav .brand-text {
  color: #fff;
  font-weight: 600;
  transition: color 0.3s ease;
}

.transition-nav.scrolled {
  background-color: var(--bg) !important;
  border-radius: 50px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  padding-block: 0rem;
}

.transition-nav.scrolled .nav-link,
.transition-nav.scrolled .brand-text {
  color: var(--green) !important;
}

.transition-nav .nav-link:hover {
  opacity: 0.8;
}

.alt-logo {
  display: none;
}

.transition-nav.scrolled .default-logo {
  display: none;
}

.transition-nav.scrolled .alt-logo {
  display: block;
}

/* Inverts the white hamburger SVG to dark when the navbar background changes on scroll */
.transition-nav.scrolled .navbar-toggler-icon {
  filter: invert(1);
}

/* form */
/* lead form */
.lead-input {
  width: 100%;
  background-color: var(--bg);
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 1rem 1.2rem;
  font-family: monteserrat;
  font-size: 0.95rem;
  color: var(--green);
  outline: none;
  transition: border-color 0.3s ease;
}

.lead-input::placeholder {
  color: var(--green-alt);
  opacity: 0.8;
}

.lead-input:focus {
  border-color: var(--green-alt);
}

.lead-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--green-alt);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7a63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 16px;
  cursor: pointer;
}

.lead-select option {
  color: var(--green);
}

.lead-submit {
  border-radius: 3px;
  letter-spacing: 2px;
  font-weight: 600;
  padding-block: 1rem;
}

/* callus modal */
.callus-modal {
  background-color: var(--bg);
  border: none;
  border-radius: 4px;
  position: relative;
}

.callus-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 5;
}

.modal-backdrop.show {
  opacity: 0.7;
  background-color: var(--green);
}

.about-block {
  text-transform: uppercase;
  font-weight: 500;
  color: var(--green-alt);
  border: 1px solid var(--bg-strong);
  padding-block: 1rem;
}

/* mobile font sizes */
@media (max-width: 768px) {
  .header {
    font-size: 7dvw;
    line-height: 10dvw;
  }
  .header-green {
    font-size: 7dvw;
    line-height: 10dvw;
  }
  .header-top {
    font-size: 3dvw;
  }
  .snap-num {
    font-size: 6dvw;
  }
  .snap-text {
    font-size: 3dvw;
  }
  .snap-badge span {
    font-size: 2.1dvw;
  }
  .config-tabs .nav-link {
    font-size: 3.4dvw;
  }
  .header-config {
    font-size: 8dvw;
    line-height: 8dvw;
    padding-bottom: 5px;
  }
  .header-config-alt {
    font-size: 3.5dvw;
  }
  .amenities-text {
    font-size: 3.2dvw;
  }
  .amenities-header {
    font-size: 4dvw;
  }
  .loc-item {
    font-size: 3.5dvw;
    padding-block: 1.5dvw;
    border-bottom: 1px solid var(--bg);
  }
  .custom-location-tabs {
    justify-content: center;
    align-items: center;
  }
  .custom-location-tabs .nav-link {
    font-size: 3dvw;
  }
  .loc-item {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .navbar-collapse {
    padding-bottom: 10px;
  }
}