:root {
      --green: #0f3d2e;
      --light-green: #1d6a4f;
      --white: #ffffff;
      --gray: #6b6b6b;
      --transition: all 0.4s ease;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; background-color: var(--white); overflow-x: hidden; }
    
#overview,
#pricing,
#masterplan,
#amenities,
#location {
  scroll-margin-top: 100px;
}

     /* ======================================= */
/* 🔹 Navbar Base (Desktop - unchanged) 🔹 */
/* ======================================= */
nav {
  width: 100%;
  background-color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  border-bottom: 1px solid #e2e2e2;
}

.logo img {
  height: 50px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 25px;
}

.nav-links a {
  text-decoration: none;
  color: var(--green);
  font-weight: 500;
  transition: var(--transition);
}

.nav-links a:hover {
  color: var(--light-green);
}

.cta-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-brochure {
  border: 1px solid var(--green);
  color: var(--green);
  padding: 8px 18px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.btn-brochure:hover {
  background-color: var(--green);
  color: var(--white);
}

.whatsapp-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--white);
  border: 1px solid #ccc;
  border-radius: 30px;
  padding: 6px 12px;
  text-decoration: none;
}

.whatsapp-pill span {
  color: var(--green);
  font-weight: 600;
}

/* ======================================= */
/* 🔹 Hamburger Menu (Mobile) 🔹 */
/* ======================================= */

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 18px;
  cursor: pointer;
  z-index: 1100;
  transition: transform 0.3s ease;
}

.hamburger span {
  display: block;
  height: 3px;
  background-color: var(--green);
  border-radius: 2px;
  transition: all 0.4s ease;
}

/* Animate to "X" when active */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ======================================= */
/* 🔹 Mobile Menu Overlay Styles 🔹 */
/* ======================================= */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: flex-end;
  z-index: 1200;
  transition: opacity 0.4s ease;
}

.mobile-menu {
  background: #fff;
  width: 70%;
  max-width: 300px;
  height: 100%;
  padding: 60px 25px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: translateX(100%);
  transition: transform 0.4s ease;
  position: relative;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
}

/* Close button */
.close-menu {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--green);
  cursor: pointer;
}

/* Menu links */
.mobile-menu a {
  text-decoration: none;
  color: var(--green);
  font-weight: 600;
  font-size: 16px;
  transition: color 0.3s;
}

.mobile-menu a:hover {
  color: var(--light-green);
}

/* CTA section */
.mobile-cta {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
}

.mobile-cta .btn-brochure,
.mobile-cta .whatsapp-pill {
  width: 100%;
  justify-content: center;
}

/* Active animation */
.mobile-menu-overlay.active {
  display: flex;
  opacity: 1;
}

.mobile-menu.active {
  transform: translateX(0);
}

/* ======================================= */
/* 🔹 Responsive Adjustments 🔹 */
/* ======================================= */
@media (max-width: 991px) {
  .nav-links,
  .cta-buttons {
    display: none;
  }

  .hamburger {
    display: flex;
    margin-left: auto;
    margin-top: -43px;
  }
}

/* Desktop logo shown, mobile hidden */
.logo-desktop {
  display: block;
  height: 55px;
  width: auto;
}

.logo-mobile {
  display: none;
  height: 45px;
  width: auto;
}

/* Mobile-specific adjustments */
@media (max-width: 991px) {
  .logo-desktop {
    display: none;
  }

  .logo-mobile {
    display: block;
    margin-left: -206px;
  }
}

    /* Hero Section */
    .hero {
      position: relative;
      width: 100%;
      height: 90vh;
      background: url('images/banner.jpg') center center / cover no-repeat;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 120px 60px 60px;
    }

    .hero-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(15, 61, 46, 0.85);
  max-width: 420px;
  padding: 33px 20px;
  color: var(--white);
  text-align: center;
  gap: 14px;
}

.hero-left .tag {
  background: var(--light-green);
  color: var(--green);
  font-weight: 600;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 14px;
}

.hero-left ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
  width: 100%;
}

.hero-left ul li {
  border-radius: 30px;
  padding: 10px 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
}

/* No background for location */
.hero-left ul li.location {
  background: transparent;
}

/* Light translucent background */
.hero-left ul li.plots {
  background: rgba(255, 255, 255, 0.15);
}

/* Light translucent background for plot-size */
.hero-left ul li.plot-size {
  background: rgba(255, 255, 255, 0.15);
}

/* White background for price & starting */
.hero-left ul li.price,
.hero-left ul li.starting {
  background: var(--white);
  color: var(--green);
  font-weight: 700;
}

/* Highlight bold text */
.hero-left ul li strong {
  font-weight: 700;
}

/* Express Interest Button */
.hero-left .interest-btn {
  background: var(--white);
  color: var(--green);
  border: none;
  padding: 12px 28px;
  border-radius: 40px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-size: 16px;
}

.hero-left .interest-btn:hover {
  background: #25a266;
  color: var(--white);
}

    .hero-right {
      background-color: var(--white);
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
      width: 320px;
      animation: fadeInUp 1.2s ease forwards;
    }

    .hero-right h3 { color: var(--green); margin-bottom: 15px; text-align: center; }
    .hero-right input { width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 6px; }
    .hero-right button { width: 100%; background-color: var(--green); color: var(--white); border: none; padding: 10px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: var(--transition); }
    .hero-right button:hover { background-color: var(--light-green); }

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

    /* Below Banner Section */
    .about-section { background-color: var(--white); padding: 60px 10%; color: var(--green); }
    .about-section h2 { margin-bottom: 20px; }
    .about-section p { color: var(--gray); line-height: 1.6; }

    /* Responsive */
    @media (max-width: 768px) {
      nav { flex-direction: column; gap: 10px; }
      .hero { flex-direction: column; height: auto; padding: 120px 20px 40px; }
      .hero-left, .hero-right { width: 100%; }
      .hero-right { margin-top: 20px; }
    }

    :root {
    --saibya-green: #0f3d2e;
    --saibya-gray: #6b6b6b;
  }

  .two-col-about {
    background: #ffffff;
    padding: 48px 4%;
    overflow: hidden;
  }

  .two-col-wrap {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 48px;
    align-items: start;
  }

  /* LEFT IMAGE COLUMN */
  .col-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    object-fit: cover;
  }

  .cta-left { margin-top: 14px; text-align: center; }

  /* BUTTONS */
  .btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  transform: scale(1);
  /* opacity removed so buttons are visible by default */
}

  .btn.download { background: var(--saibya-green); color: #fff; }
  .btn.outline {
    background: transparent;
    color: var(--saibya-green);
    border: 2px solid var(--saibya-green);
  }

  /* Hover pop animation */
  .btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(15,61,46,0.25);
  }

  /* REVEAL POPPING ANIMATION */
  .pop.active {
    animation: popIn 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  }

  @keyframes popIn {
    0% {
      transform: scale(0.8);
      opacity: 0;
    }
    60% {
      transform: scale(1.05);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* TEXT + LIST */
  .col-content h3 { color: var(--saibya-green); margin-bottom: 10px; }
  .col-content .lead { color: var(--saibya-gray); font-weight: 600; margin-bottom: 12px; }
  .col-content .muted { color: var(--saibya-gray); line-height: 1.6; margin-bottom: 12px; font-size: 14px; }

  .checklist { list-style: none; padding: 0; margin: 14px 0; }
  .checklist li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    color: #111;
    font-size: 14px;
  }
  .checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--saibya-green);
    font-weight: 700;
  }

  .cta-row { display: flex; gap: 16px; margin-top: 18px; flex-wrap: wrap; }

  /* RESPONSIVE */
  @media (max-width: 900px) {
    .two-col-wrap { grid-template-columns: 1fr; gap: 20px; }
    .cta-row { flex-direction: column; }
    .btn { width: 100%; text-align: center; }
  }

  @media (max-width: 420px) {
    .two-col-about { padding: 32px 4%; }
    .col-content p, .checklist li { font-size: 13px; }
  }

  /* Add / replace these styles for a continuous, subtle "popping" animation on the buttons.
   Buttons will gently scale & glow repeatedly. Hover pauses the animation and applies a stronger lift. */

/* keyframes for continuous pop/pulse */
@keyframes popPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 6px 14px rgba(15,61,46,0.08);
    opacity: 1;
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 18px 40px rgba(15,61,46,0.14);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 6px 14px rgba(15,61,46,0.08);
    opacity: 1;
  }
}

/* apply continuous pulse to buttons with class .pop */
.btn.pop {
  /* keep the existing base rules (padding, border-radius, etc.) and add animation */
  animation: popPulse 2s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, box-shadow;
  transition: box-shadow .18s ease, transform .18s ease;
}

/* pause / stronger hover state for better UX */
.btn.pop:hover,
.btn.pop:focus {
  animation-play-state: paused;
  transform: scale(1.08);
  box-shadow: 0 20px 46px rgba(15,61,46,0.20);
  outline: none;
}

/* Respect users' reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .btn.pop {
    animation: none;
    transition: transform .18s ease, box-shadow .18s ease;
  }
}

:root{
    --fv-green: #285035;        /* deep green bg strip */
    --fv-accent: #ffffff;      /* white text over green */
    --fv-muted: #dbe7df;       /* lighter separators/text */
    --maxw: 1140px;
  }

  .feature-video{background:var(--fv-green);color:var(--fv-accent);padding:48px 4%;}
  .fv-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center;}
  /* Left column */
  .fv-left h3{margin:0 0 14px 0;font-size:18px;font-weight:700}
  .fv-list{list-style:none;padding:0;margin:0 0 20px 0}
  .fv-list li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;gap:12px;align-items:center;color:var(--fv-accent);font-weight:600}
  .fv-list li .ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,0.06);font-size:12px}
  /* Price / location */
  .price-row{display:flex;gap:12px;align-items:center;margin:20px 0 18px}
  .price-row .pin{flex:0 0 22px;background:transparent}
  .loc{font-weight:800;font-size:18px}
  .price{font-weight:700;margin-top:4px}
  .price span{font-weight:600}
  /* CTA button */
  .btn-book{display:inline-block;padding:10px 20px;border-radius:6px;background:#fff;color:var(--fv-green);text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
  .btn-book:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,0.16);}

  /* Right column (video) */
  .fv-right{display:flex;justify-content:center}
  .video-thumb{position:relative;border:0;padding:0;background:transparent;cursor:pointer;border-radius:6px;overflow:hidden;display:inline-block}
  .video-thumb img{display:block;width:100%;height:auto;max-width:420px;border-radius:6px;object-fit:cover;box-shadow:0 8px 28px rgba(0,0,0,0.18)}
  .video-thumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center;justify-content:center}
  .video-thumb .play svg{filter:drop-shadow(0 6px 12px rgba(0,0,0,0.4))}

  /* Modal */
  .fv-modal{position:fixed;inset:0;background:rgba(0,0,0,0.66);display:none;align-items:center;justify-content:center;z-index:1600}
  .fv-modal[aria-hidden="false"]{display:flex}
  .fv-modal-inner{max-width:980px;width:90%;background:#000;border-radius:8px;position:relative;padding:12px}
  .fv-close{position:absolute;right:12px;top:8px;background:transparent;border:0;color:#fff;font-size:20px;cursor:pointer}
  .fv-iframe-wrap{position:relative;padding-top:56.25%;height:0}
  .fv-iframe-wrap iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;border-radius:6px}

  /* Responsive behavior */
  @media (max-width:1000px){
    .fv-inner{grid-template-columns:1fr;gap:22px}
    .fv-right{order:2}
    .fv-left{order:1}
    .video-thumb img{max-width:100%}
    .loc{font-size:16px}
  }

  @media (max-width:420px){
    .feature-video{padding:28px 4%}
    .fv-list li{padding:10px 0;font-size:14px}
    .loc{font-size:15px}
    .btn-book{width:100%;text-align:center;padding:12px}
    .fv-iframe-wrap{padding-top:56.25%}
  }

  /* small accessibility focus styles */
  .video-thumb:focus-visible, .btn-book:focus-visible{outline:3px solid rgba(255,255,255,0.18);outline-offset:4px}

  /* -------------------------
  Animations for feature-video section
  ------------------------- */

/* Button pulse (continuous) */
@keyframes fvBtnPulse {
  0%   { transform: translateY(0) scale(1); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
  50%  { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 40px rgba(0,0,0,0.18); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
}

/* Play icon pulse */
@keyframes fvPlayPulse {
  0%   { transform: translate(-50%,-50%) scale(1); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.30)); }
  50%  { transform: translate(-50%,-50%) scale(1.08); filter: drop-shadow(0 20px 46px rgba(0,0,0,0.40)); }
  100% { transform: translate(-50%,-50%) scale(1); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.30)); }
}

/* List item reveal (slide up + fade) */
@keyframes fvItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Apply animations */
.btn-book {
  /* keep existing styles, add pulse */
  animation: fvBtnPulse 2.4s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, box-shadow;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Pause/strong hover state */
.btn-book:hover,
.btn-book:focus {
  animation-play-state: paused;
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 22px 48px rgba(0,0,0,0.20);
  outline: none;
}

/* Play icon pulse (apply to overlay container and svg) */
.video-thumb .play,
.video-thumb .play svg {
  animation: fvPlayPulse 2s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, filter;
}

/* Hover/focus on video thumbnail: pause & slightly scale */
.video-thumb:hover .play,
.video-thumb:focus .play {
  animation-play-state: paused;
  transform: translate(-50%,-50%) scale(1.12);
  filter: drop-shadow(0 28px 60px rgba(0,0,0,0.46));
}

/* Staggered reveal for list items (supports up to 8 items; adjust as needed) */
.fv-list li {
  opacity: 0;
  transform: translateY(10px);
  animation: fvItemIn .56s cubic-bezier(.2,.9,.3,1) forwards;
}

.fv-list li:nth-child(1){ animation-delay: 0.08s; }
.fv-list li:nth-child(2){ animation-delay: 0.16s; }
.fv-list li:nth-child(3){ animation-delay: 0.24s; }
.fv-list li:nth-child(4){ animation-delay: 0.32s; }
.fv-list li:nth-child(5){ animation-delay: 0.40s; }
.fv-list li:nth-child(6){ animation-delay: 0.48s; }
.fv-list li:nth-child(7){ animation-delay: 0.56s; }
.fv-list li:nth-child(8){ animation-delay: 0.64s; }

/* Accessibility: respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-book,
  .video-thumb .play,
  .video-thumb .play svg,
  .fv-list li {
    animation: none !important;
    transition: transform .12s ease, box-shadow .12s ease;
  }
}

 /* Responsive iframe wrapper */
  .video-embed {
    max-width: 700px; /* increased width */
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    background: #000;
    margin: 0 auto; /* centers the video */
  }

  .video-embed iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto; /* ensures height adjusts properly */
    border: 0;
    display: block;
  }

  /* Responsive: ensure iframe scales on smaller screens */
  @media (max-width: 1000px) {
    .video-embed {
      max-width: 100%;
    }
  }

  /* -------------------------
       Tokens
       ------------------------- */
    :root{
      --bg: #f3fbf7;            /* page bg/mint (matches screenshot) */
      --card-green: #0f3d2e;    /* deep card green */
      --card-green-dark: #0b2f25;
      --accent-green: #1d6a4f;
      --muted: #6b6b6b;
      --white: #ffffff;
      --maxw: 1100px;
    }

    /* -------------------------
       Layout
       ------------------------- */
    .price-cards-exact{background:var(--bg);padding:48px 4% 36px;box-sizing:border-box}
    .pc-wrap{max-width:var(--maxw);margin:0 auto;text-align:center}
    .pc-pre{color:var(--muted);font-size:20px;margin:0 0 8px;font-family: libre baskerville;}
    .pc-title{font-weight:500;margin:0 0 28px;font-size:20px;color:#0b2e24}

    .pc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;align-items:start;justify-items:center}
    @media (max-width:980px){ .pc-grid{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:620px){ .pc-grid{grid-template-columns:1fr;gap:22px} }

    /* -------------------------
       Card Item (wraps top CTA + card body)
       ------------------------- */
    .pc-item{width:100%;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:0;position:relative}
    /* top small button sits visually above the card (pulled up) */
    .pc-top-cta{
      background:var(--card-green);
      color:var(--white);
      border:0;
      padding:8px 22px;
      border-radius:6px;
      font-weight:700;
      cursor:pointer;
      box-shadow:0 8px 22px rgba(5,25,18,0.12);
      margin-bottom:-18px; /* pull up to appear above card exactly like screenshot */
      z-index:3;
    }

    /* -------------------------
       Card body
       ------------------------- */
    .pc-card{
      width:100%;
      background:var(--card-green);
      color:var(--white);
      padding:20px 18px 22px;
      border-radius:14px;
      box-shadow:0 18px 40px rgba(5,25,18,0.10);
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:12px;
      transform-origin:center;
      margin-top: 25px;
    }

    .pc-price{font-weight:700;font-size:18px;line-height:1.1;text-align:center}
    .pc-sep{width:86%;height:1px;background:rgba(255,255,255,0.06);margin:2px 0 6px;border-radius:2px}
    .pc-size{font-size:14px;line-height:1.4;text-align:center;color:rgba(255,255,255,0.95)}

    /* unlock button (white rounded inside the card) */
    .pc-unlock{
      display:inline-block;
      margin-top:6px;
      background:var(--white);
      color:var(--card-green-dark);
      padding:8px 18px;
      border-radius:10px;
      font-weight:700;
      text-decoration:none;
      box-shadow:0 8px 18px rgba(0,0,0,0.06);
      border:0;
      cursor:pointer;
    }

    /* small spacing match */
    .pc-item + .pc-item { }

    /* -------------------------
       Animations: continuous pop for CTAs & reveal for cards
       ------------------------- */

    /* continuous subtle pulse (for top and unlock CTAs) */
    @keyframes pcPulse {
      0% { transform: scale(1); box-shadow: 0 8px 18px rgba(5,25,18,0.06); }
      50% { transform: scale(1.06); box-shadow: 0 22px 48px rgba(5,25,18,0.14); }
      100% { transform: scale(1); box-shadow: 0 8px 18px rgba(5,25,18,0.06); }
    }
    .pop-cta{ animation: pcPulse 2.2s ease-in-out infinite; transform-origin:center; will-change: transform, box-shadow; transition: transform .18s ease, box-shadow .18s ease; }

    /* hover/focus: pause continuous animation and apply stronger lift */
    .pop-cta:hover, .pop-cta:focus {
      animation-play-state: paused;
      transform: translateY(-6px) scale(1.08);
      box-shadow: 0 28px 60px rgba(5,25,18,0.20);
      outline: none;
    }

    /* reveal (card slide up + fade) */
    .reveal { opacity:0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.9,.3,1), transform .6s cubic-bezier(.2,.9,.3,1); }
    .reveal.revealed { opacity:1; transform: none; }
    .reveal.active {
  opacity: 1;
  transform: none;
}

    /* subtle card lift on hover/focus to match screenshot feel */
    .pc-card:hover, .pc-card:focus-within { transform: translateY(-6px); box-shadow:0 28px 62px rgba(5,25,18,0.16); }

    /* Accessibility: respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .pop-cta { animation: none !important; transition: transform .12s ease, box-shadow .12s ease; }
      .reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
    }

    :root{
      --mp-bg: #285035;      /* page strip bg */
      --mp-white: #ffffff;
      --mp-green: #0f3d2e;   /* button text color */
      --maxw: 980px;
    }

    .masterplan-section{background:var(--mp-bg);padding:40px 12px;color:var(--mp-white);box-sizing:border-box}
    .mp-inner{max-width:var(--maxw);margin:0 auto;text-align:center}
    .mp-inner h2{margin:0 0 28px;font-weight:600;font-size:20px;color:var(--mp-white)}

    .mp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px;justify-items:center;align-items:start}
    .mp-card{width:220px}
    .mp-frame{
      background:var(--mp-white);
      padding:10px;               /* white border look */
      border-radius:4px;
      display:block;
      box-shadow:0 8px 30px rgba(0,0,0,0.12);
    }
    .mp-frame img{
      display:block;
      width:100%;
      height:160px;              /* keep aspect similar to screenshot */
      object-fit:cover;
      border-radius:2px;
    }

    figcaption{margin-top:12px}
    .mp-btn{
      display:inline-block;
      background:var(--mp-green);
      color:var(--mp-white);
      text-decoration:none;
      padding:8px 18px;
      border-radius:6px;
      font-weight:700;
      box-shadow:0 8px 20px rgba(0,0,0,0.12);
      transition:transform .18s ease, box-shadow .18s ease;
      transform-origin:center;
    }
    .mp-btn:hover,
    .mp-btn:focus{
      transform:translateY(-4px) scale(1.03);
      box-shadow:0 20px 48px rgba(0,0,0,0.18);
      outline:none;
    }

    /* continuous subtle pulse animation (pauses on hover/focus) */
    @keyframes mpPulse {
      0%   { transform: scale(1); box-shadow:0 8px 18px rgba(0,0,0,0.08); }
      50%  { transform: scale(1.06); box-shadow:0 22px 48px rgba(0,0,0,0.14); }
      100% { transform: scale(1); box-shadow:0 8px 18px rgba(0,0,0,0.08); }
    }
    .mp-btn.pop{
      animation: mpPulse 2.2s ease-in-out infinite;
      will-change: transform, box-shadow;
     background: var(--white);
    color: var(--card-green-dark);
    padding: 8px 18px;
    }
    .mp-btn.pop:hover,
    .mp-btn.pop:focus{
      animation-play-state: paused;
    }

    /* reveal helper (cards slide up + fade) */
    .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
    .reveal.active{opacity:1;transform:none}

    /* responsive: stack on small screens */
    @media (max-width:880px){
      .mp-grid{grid-template-columns:1fr;gap:20px}
      .mp-card{width:320px}
      .mp-frame img{height:200px}
    }

    @media (max-width:420px){
      .masterplan-section{padding:28px 10px}
      .mp-card{width:100%}
      .mp-frame img{height:180px}
      .mp-inner h2{font-size:18px}
    }

    /* accessibility: respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      .mp-btn.pop{animation:none}
      .reveal{transition:none;opacity:1;transform:none}
    }

    /* Use a serif for the section heading to match the screenshot */
  .masterplan-section .mp-inner h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;          /* lighter serif look like the screenshot */
    font-size: 20px;          /* adjust if you want it larger/smaller */
    letter-spacing: 0.2px;
    margin-bottom: 18px;      /* a touch tighter */
    line-height: 1.25;
  }

  /* Reduce the gap between the two image cards */
  .masterplan-section .mp-grid {
    gap: 16px;                /* was 36px — reduced to 16px for tighter spacing */
    justify-items: center;
  }

  /* Slightly reduce the vertical space inside each card so they sit closer */
  .masterplan-section .mp-card { 
    width: 220px;
    margin: 0;                /* ensure no extra margins */
  }
  .masterplan-section .mp-frame {
    padding: 8px;             /* reduce white border padding to tighten visually */
  }

  /* Small-screen tweak (if needed) */
  @media (max-width:880px) {
    .masterplan-section .mp-grid { gap: 14px; }
    .masterplan-section .mp-card { width: 320px; }
    .masterplan-section .mp-frame img { height: 200px; }
  }

  :root{
      --bg: #f3fbf7;
      --green: #0f3d2e;
      --muted: #6b6b6b;
      --accent: #1d6a4f;
      --maxw: 1200px;
    }

    .amenities{background:var(--bg);padding:48px 4%;}
    .amenities .wrap{max-width:var(--maxw);margin:0 auto;text-align:center}

    .kicker{color:var(--muted);margin:0;font-size:13px}
    .amenities h2{color:var(--green);margin:6px 0 28px;font-weight:700;font-size:20px}

    /* Grid */
    .amenities-grid{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:28px 18px;
      list-style:none;
      padding:0;
      margin:0 0 28px 0;
      align-items:start;
    }
    
    /* Make amenity images always responsive */
.amenity img {
  display:block;
  max-width:64px;    /* tweak if you want larger/smaller icons */
  width:100%;
  height:auto;
  object-fit:contain;
}

    /* Amenity item */
    .amenity{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      color:var(--green);
      font-size:13px;
      line-height:1.3;
      opacity:0;
      transform:translateY(12px) scale(.98);
      transition: transform .28s cubic-bezier(.2,.9,.3,1), opacity .36s ease;
    }

    .amenity .icon{
      width:44px;
      height:44px;
      stroke:var(--green);
      fill:none;
      transition: transform .28s ease, stroke .28s ease, filter .28s ease;
      display:block;
    }

    /* Hover + focus effect (pop + color shift) */
    .amenity:hover .icon,
    .amenity:focus .icon{
      transform: translateY(-6px) scale(1.08);
      stroke: var(--accent);
      filter: drop-shadow(0 8px 20px rgba(29,106,79,0.12));
      outline: none;
    }
    .amenity:hover span,
    .amenity:focus span{ color: var(--accent); }

    /* reveal state (set by JS) */
    .amenity.active{ opacity:1; transform:none; }

    /* CTA button */
    .cta-wrap{margin-top:6px}
    .btn-book{
      display:inline-block;
      background: #fff;
      color: var(-green);
      padding:10px 26px;
      border-radius:4px;
      text-decoration:none;
      font-weight:700;
      box-shadow:0 8px 18px rgba(15,61,46,0.08);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    /* continuous pulse for CTA */
    @keyframes pulseBtn {
      0% { transform: translateY(0) scale(1); box-shadow:0 8px 18px rgba(15,61,46,0.08); }
      50% { transform: translateY(-4px) scale(1.04); box-shadow:0 22px 40px rgba(15,61,46,0.14); }
      100% { transform: translateY(0) scale(1); box-shadow:0 8px 18px rgba(15,61,46,0.08); }
    }
    .pop-cta{ animation: pulseBtn 2.2s ease-in-out infinite; transform-origin:center; will-change:transform,box-shadow; }

    .btn-book:hover,
    .btn-book:focus{ animation-play-state: paused; transform: translateY(-6px); box-shadow:0 28px 52px rgba(15,61,46,0.18); outline:none; }

    /* Responsive */
    @media (max-width:1100px){
      .amenities-grid{grid-template-columns:repeat(4,1fr);gap:22px}
    }
    @media (max-width:820px){
      .amenities-grid{grid-template-columns:repeat(3,1fr);gap:20px}
    }
    @media (max-width:560px){
      .amenities-grid{grid-template-columns:repeat(3,1fr);gap:18px}
      .amenity .icon{width:40px;height:40px}
      .amenity{ flex-direction:column; align-items:center; text-align:center; }
    }
    @media (max-width:380px){
      .amenities-grid{grid-template-columns: repeat(3,1fr); gap:12px}
      .amenity{ gap:8px; font-size:12px; }
  .amenity span{ font-size:12px; }
    }

    /* Respect prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce){
      .amenity, .pop-cta { transition:none; animation:none !important; transform:none !important; opacity:1 !important; }
    }

    :root{
      --la-bg: #2f553f;        /* deep green strip */
      --la-paper: #efe9dd;     /* pale paper behind map */
      --la-white: #ffffff;
      --la-accent: #dfeee6;
      --la-max: 1100px;
    }

    .location-adv{background:var(--la-bg);padding:36px 4%;color:var(--la-white);box-sizing:border-box}
    .la-inner{max-width:var(--la-max);margin:0 auto;display:grid;grid-template-columns:1fr 460px;gap:28px;align-items:center}

    /* LEFT column (map) */
    .la-left{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:12px}
    .la-map-frame{
      background:var(--la-paper);
      padding:18px;
      border-radius:4px;
      box-shadow:0 10px 28px rgba(0,0,0,0.18);
      width:100%;
      max-width:660px;
      display:block;
      overflow:hidden;
    }
    .la-map-frame img{width:100%;height:auto;display:block;object-fit:contain}

    /* rotated label on the left of the frame */
    .la-vertical{
      position:absolute;
      left:12px;
      top:50%;
      transform:translate(-100%,-50%) rotate(-90deg);
      transform-origin:center;
      color: rgba(255,255,255,0.8);
      font-weight:700;
      letter-spacing:3px;
      font-size:18px;
      text-transform:uppercase;
      pointer-events:none;
    }

    /* RIGHT column (list + CTA) */
    .la-right{padding:8px 12px}
    .la-right h3{margin:0 0 18px 0;font-size:20px;font-weight:700;color:var(--la-white)}
    .la-right .sub{display:block;font-weight:400;font-size:14px;color:rgba(255,255,255,0.85);margin-top:6px}

    .la-list{list-style:none;padding:0;margin:0 0 18px 0;display:flex;flex-direction:column;gap:14px}
    .la-item{
      display:flex;
      align-items:center;
      gap:12px;
      color:var(--la-accent);
      font-size:14px;
      position:relative;
      padding:6px 0;
      border-top:1px solid rgba(255,255,255,0.04);
    }

    .la-item:first-child{border-top:0;padding-top:0}
    .la-item::after{
      content:'';
      position:absolute;
      left:40px;
      right:0;
      height:1px;
      bottom:-7px;
      background:rgba(255,255,255,0.04);
    }

    /* arrow-in-circle icon (uses currentColor) */
    .la-icon{
      width:30px;
      height:30px;
      min-width:30px;
      stroke:var(--la-accent);
      fill:none;
      transition: transform .26s ease, stroke .26s ease, filter .26s ease;
    }

    /* hover/focus on list rows */
    .la-item:hover .la-icon,
    .la-item:focus-within .la-icon{
      transform:translateX(4px) scale(1.04);
      stroke:var(--la-white);
      filter:drop-shadow(0 8px 20px rgba(255,255,255,0.06));
    }
    .la-item:hover span,
    .la-item:focus-within span{ color:var(--la-white) }

    /* CTA button (white pill on dark bg) */
    .la-cta-wrap{margin-top:10px}
    .la-cta{
      display:inline-block;
      background: #ffffff;
      color: var(--la-bg);
      padding:10px 22px;
      border-radius:6px;
      font-weight:700;
      text-decoration:none;
      box-shadow:0 10px 30px rgba(0,0,0,0.18);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    /* continuous subtle pulse for CTA */
    @keyframes laPulse {
      0%   { transform: translateY(0) scale(1); box-shadow:0 8px 18px rgba(0,0,0,0.12); }
      50%  { transform: translateY(-4px) scale(1.03); box-shadow:0 28px 60px rgba(0,0,0,0.22); }
      100% { transform: translateY(0) scale(1); box-shadow:0 8px 18px rgba(0,0,0,0.12); }
    }
    .pop-cta{ animation: laPulse 2.4s ease-in-out infinite; transform-origin:center; will-change:transform,box-shadow; }
    .la-cta:hover, .la-cta:focus{ animation-play-state: paused; transform: translateY(-6px); box-shadow:0 36px 72px rgba(0,0,0,0.28); outline:none }

    /* reveal helper for list items (initially hidden -> JS will set .active) */
    .la-item{opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .48s cubic-bezier(.2,.9,.3,1)}
    .la-item.active{opacity:1;transform:none}

    /* RESPONSIVE */
    @media (max-width:1060px){
      .la-inner{grid-template-columns:1fr 420px;gap:20px;align-items: flex-start;}
      .la-vertical{left:6px;font-size:16px}
    }
    @media (max-width:840px){
      .la-inner{grid-template-columns:1fr;gap:18px}
      .la-vertical{display:none}
      .la-map-frame{max-width:100%}
      .la-right{padding:0; display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start; /* align heading to left edge */
  gap: 10px;}
    }
    /* Heading spacing & typography */
.la-right h3 {
  margin: 0 0 16px 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--la-white);
  line-height: 1.3;
}
.la-right .sub {
  display: block;
  font-weight: 400;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 4px;
}
    @media (max-width:420px){
      .la-list{gap:10px}
      .la-item{font-size:13px}
      .la-icon{width:26px;height:26px;min-width:26px}
    }

    /* Reduced motion respect */
    @media (prefers-reduced-motion: reduce){
      .pop-cta{animation:none}
      .la-item{transition:none;opacity:1;transform:none}
    }

    :root{
      --pg-bg: #f3fbf7;
      --pg-accent: #0f3d2e;
      --pg-muted: rgba(15,61,46,0.12);
      --maxw: 1160px;
    }

    .project-gallery{background:var(--pg-bg);padding:56px 4%;box-sizing:border-box}
    .pg-inner{max-width:var(--maxw);margin:0 auto;text-align:center}

    /* header (faint in screenshot) */
    .pg-kicker{color:transparent;height:4px;margin:0} /* keep invisible as per screenshot */
    .pg-title{
      font-size:14px;
      color: rgba(15,61,46,0.06); /* extremely faint like screenshot */
      margin: 0 0 30px 0;
    }

    /* grid */
    .pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 46px;align-items:center;justify-items:center;margin:0 0 28px 0}
    .pg-item{width:320px;max-width:100%;border-radius:4px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,0.06)}
    .pg-item img{display:block;width:100%;height:300px;object-fit:cover;vertical-align:middle;transition:transform .6s cubic-bezier(.2,.9,.3,1),filter .45s ease}

    /* reveal initial state */
    .reveal{opacity:0;transform:translateY(12px) scale(.995)}
    .reveal.active{opacity:1;transform:none}

    /* interaction: hover lift + slight zoom */
    .pg-item:hover img,
    .pg-item:focus-within img{
      transform: scale(1.03);
      filter: saturate(1.03);
    }

    /* CTA button */
    .pg-cta{margin:12px 0 0}
    .btn-brochure{
      display:inline-block;
      background:#ffffff;
      color:var(--pg-accent);
      padding:10px 22px;
      border-radius:6px;
      text-decoration:none;
      font-weight:700;
      box-shadow:0 10px 30px rgba(15,61,46,0.06);
      transition: transform .18s ease, box-shadow .18s ease;
      border-radius: 30px;
    }

    /* continuous popping pulse for CTA (pauses on hover) */
    @keyframes brochurePulse {
      0% { transform: translateY(0) scale(1); box-shadow:0 10px 30px rgba(15,61,46,0.06); }
      50% { transform: translateY(-4px) scale(1.04); box-shadow:0 30px 68px rgba(15,61,46,0.16); }
      100% { transform: translateY(0) scale(1); box-shadow:0 10px 30px rgba(15,61,46,0.06); }
    }
    .pop-cta{ animation: brochurePulse 2.2s ease-in-out infinite; transform-origin:center; will-change:transform,box-shadow; }
    .pop-cta:hover, .pop-cta:focus{ animation-play-state: paused; transform: translateY(-6px) scale(1.06); box-shadow:0 42px 88px rgba(15,61,46,0.18); outline:none; }

    /* responsive adjustments */
    @media (max-width:1100px){ .pg-grid{grid-template-columns:repeat(2,1fr);gap:28px} .pg-item img{height:260px} }
    @media (max-width:640px){ .pg-grid{grid-template-columns:1fr;gap:18px} .pg-item{width:100%} .pg-item img{height:220px} .project-gallery{padding:36px 4%} }

    /* reduced-motion respect */
    @media (prefers-reduced-motion: reduce){
      .reveal, .pop-cta { transition:none; animation:none !important; transform:none !important; opacity:1 !important; }
      .pg-item img { transition: none; }
    }


    :root{
      --ae-bg: #345F3C;            /* dark green card color */
      --ae-bg-deep: #0b2f25;
      --ae-white: #ffffff;
      --ae-muted: #cfe9df;
      --ae-paper: #f7fbf8;
      --maxw: 1180px;
    }

    .about-enquiry{background:var(--ae-bg);color:var(--ae-white);padding:56px 4%;box-sizing:border-box}
    .ae-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 460px;gap:36px;align-items:start}

    /* LEFT */
    .ae-left h3{color:var(--ae-white);margin:0 0 12px;font-size:20px;font-weight:700}
    .ae-copy p{color:var(--ae-muted);line-height:1.6;font-size:14px;margin:0 0 12px}
    .ae-cta{margin-top:18px}

    /* RIGHT */
    .ae-right{background:transparent;padding:0;}
    .ae-right h3{color:var(--ae-white);margin:0 0 18px;font-size:18px;font-weight:700}
    .enquiry-form{background:transparent;display:flex;flex-direction:column;gap:12px}

    .field{display:flex;flex-direction:column;gap:6px}
    .label-text{font-size:12px;color:var(--ae-muted);display:block}
    .field input[type="text"],
.field input[type="tel"] {
  background: #ffffff;            /* solid white background */
  color: #000000;                 /* dark text for readability */
  border: 1px solid rgba(0,0,0,0.15);
  padding: 10px 12px;
  border-radius: 4px;
  outline: none;
  font-size: 14px;
  transition: box-shadow .18s ease, transform .18s ease;
}
    .field input::placeholder {
  color: rgba(0,0,0,0.6);         /* dark placeholder to match white bg */
}

/* Highlight when focused */
.field input:focus {
  border-color: #345F3C;
  box-shadow: 0 0 0 3px rgba(15,61,46,0.15);
}

/* Checkbox text contrast fix */
.consent-text {
  color: rgba(255,255,255,0.9);
}

    .consent{display:flex;gap:10px;align-items:flex-start;color:var(--ae-muted);font-size:12px}
    .consent input{width:16px;height:16px;margin-top:3px}

    .form-cta{text-align:left;margin-top:8px}

    /* Buttons */
    .btn{
      display:inline-block;padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:700;border:0;cursor:pointer;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .btn-brochure{background:var(--ae-paper);color:var(--ae-bg);box-shadow:0 10px 30px rgba(0,0,0,0.14)}
    .btn-submit{background:var(--ae-paper);color:var(--ae-bg);min-width:140px;box-shadow:0 10px 30px rgba(0,0,0,0.14)}

    /* continuous pop animation (CTA buttons). Pauses on hover/focus. */
    @keyframes aePulse {
      0%{ transform: translateY(0) scale(1); box-shadow: 0 8px 18px rgba(0,0,0,0.08); }
      50%{ transform: translateY(-4px) scale(1.04); box-shadow: 0 26px 60px rgba(0,0,0,0.16); }
      100%{ transform: translateY(0) scale(1); box-shadow: 0 8px 18px rgba(0,0,0,0.08); }
    }
    .pop-cta{ animation: aePulse 2.4s ease-in-out infinite; transform-origin:center; will-change:transform,box-shadow; }
    .pop-cta:hover, .pop-cta:focus{ animation-play-state: paused; transform: translateY(-6px) scale(1.06); box-shadow:0 36px 72px rgba(0,0,0,0.2); outline:none }

    /* reveal helper (left/right) */
    .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.9,.3,1), transform .6s cubic-bezier(.2,.9,.3,1)}
    .reveal.active{opacity:1;transform:none}

    /* FORM focus states for accessibility */
    .field input:focus{ box-shadow: 0 6px 20px rgba(29,106,79,0.06); border-color: rgba(255,255,255,0.28) }

    /* RESPONSIVE */
    @media (max-width:980px){
      .ae-inner{grid-template-columns:1fr;gap:30px}
      .ae-right{order:2}
      .ae-left{order:1}
      .ae-right h3{text-align:left}
      .form-cta{text-align:left}
    }
    @media (max-width:420px){
      .about-enquiry{padding:28px 4%}
      .ae-copy p{font-size:13px}
      .btn-brochure,.btn-submit{width:100%}
      .ae-inner{grid-template-columns:1fr;gap:20px}
    }

    /* reduced motion */
    @media (prefers-reduced-motion: reduce){
      .pop-cta{animation:none !important;transition:transform .12s ease}
      .reveal{transition:none;opacity:1;transform:none}
    }


    /* Scoped styles for disclaimer footer */
    .disclaimer-footer{
      background:#ffffff;
      color:#222;               /* default text colour */
      padding:32px 14px;
      border-top:2px solid rgba(0,0,0,0.04);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      box-sizing:border-box;
    }

    .df-inner{
      max-width:1100px;
      margin:0 auto;
      text-align:center;
    }

    /* Very small, tightly spaced legal text as per screenshot */
    .df-topline{
      font-size:11px;
      color:#111;
      margin:0 0 10px 0;
      line-height:1.2;
      font-weight:600;
      letter-spacing:0.2px;
    }

    .df-body{
      font-size:11px;
      color:#333;
      margin:10px 0;
      line-height:1.35;
      max-width:980px;
      margin-left:auto;
      margin-right:auto;
      text-align:center;
    }

    .df-copyright{
      font-size:11px;
      color:#222;
      margin:12px 0 8px;
      line-height:1.3;
      max-width:980px;
      margin-left:auto;
      margin-right:auto;
      text-align:center;
    }

    .df-links{
      margin-top:8px;
      display:flex;
      justify-content:center;
      gap:10px;
      align-items:center;
    }

    .df-link{
      font-size:11px;
      color:#0f3d2e;
      text-decoration:underline;
      text-underline-offset:2px;
    }

    .df-sep{color:#999;font-size:12px}

    /* subtle tightening for desktop wide view */
    @media (min-width:1200px){
      .disclaimer-footer{padding:38px 20px;}
      .df-body{font-size:12px;line-height:1.38}
    }

    /* mobile adjustments: keep readable but compact */
    @media (max-width:560px){
      .disclaimer-footer{padding:22px 12px;}
      .df-topline{font-size:10px}
      .df-body{font-size:10px;line-height:1.28;padding:0 6px}
      .df-copyright{font-size:10px}
      .df-links{gap:8px}
    }

    /* Respect reduced-motion & high-contrast prefs (no animations here) */
    @media (prefers-reduced-motion: reduce){
      * { transition: none !important; }
    }
    
     /* Modal Overlay */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none; /* hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Modal Box */
.custom-modal {
  background: #fff;
  border-radius: 10px;
  padding: 30px 25px;
  width: 90%;
  max-width: 420px;
  position: relative;
  animation: popIn 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Heading */
.custom-modal h3 {
  text-align: center;
  margin-bottom: 20px;
  font-weight: 600;
  color: #333;
}

/* Input Fields */
.custom-modal input[type="text"],
.custom-modal input[type="email"],
.custom-modal input[type="tel"] {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

/* Checkbox */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #555;
  margin-bottom: 20px;
}

/* Submit Button */
.custom-modal button[type="submit"] {
  width: 100%;
  padding: 12px 0;
  background: var(--green, #2e8b57);
  border: none;
  color: white;
  font-weight: 600;
  border-radius: 30px;
  cursor: pointer;
  transition: 0.3s;
}
.custom-modal button[type="submit"]:hover {
  background: var(--light-green, #3aa76d);
}

/* Close Button */
.close-modal-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 26px;
  color: #333;
  cursor: pointer;
}

/* Open Button */
.open-modal-btn {
  background: var(--green, #2e8b57);
  color: #fff;
  padding: 10px 25px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}
.open-modal-btn:hover {
  background: var(--light-green, #3aa76d);
}

/* Animation */
@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Responsive */
@media (max-width: 480px) {
  .custom-modal {
    width: 95%;
    padding: 25px 20px;
  }
}

/* Phone number row styling */
.form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.form-row .col-5,
.form-row .col-7 {
  flex: 1;
}

.form-row select,
.form-row input[type="tel"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  appearance: none;
  background-color: #fff;
}

/* Adjust spacing in modal form */
.custom-modal .form-group {
  margin-bottom: 15px;
}

/* Make sure it looks good on mobile too */
@media (max-width: 480px) {
  .form-row {
    flex-direction: row;
    gap: 8px;
  }

  .form-row .col-5 {
    flex: 0 0 35%;
  }

  .form-row .col-7 {
    flex: 0 0 65%;
  }
}

.custom-checkbox-inline {
  display:flex;
  align-items:center;
  gap:12px;
}
.custom-checkbox-inline input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid #cfcfcf;
  display: inline-block;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.custom-checkbox-inline input[type="checkbox"]:checked {
  background: #0f6b4d;
  border-color: #0f6b4d;
}
.custom-checkbox-inline input[type="checkbox"]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 14px;
  position: absolute;
  left: 3px;
  top: -2px;
}
.custom-checkbox-inline label {
  font-size: 13px;
  margin: 0;
  line-height: 1.3;
}


.float {
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 40px;
	left: 40px;
	background-color: #25d366;
	color: #FFF;
	border-radius: 50px;
	text-align: center;
	font-size: 30px;
	box-shadow: 2px 2px 3px #999;
	z-index: 100;
}

.my-float {
	margin-top: 16px;
}

@media only screen and (max-width: 600px) {
	.float {
		bottom: 70px;
	}
}

@media (max-width: 767px) {
	#counter .row-cols-1 .col {
		max-width: 100%;
		flex: 0 0 100%;
	}
}

@media (max-width: 767px) {
	#masterplan .button-container {
		display: flex;
		justify-content: flex-end;
	}
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	left:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}

/* ---------- Fix: checkbox visibility & spacing ---------- */
/* make checkbox label dark and readable on white form background */
.check-row .check-label,
.check-row label[for="checkbox2"] {
  color: #163b2e;            /* dark green (adjust to your brand color) */
  font-size: 13px;
  line-height: 1.35;
  display: inline-block;
  margin: 0;                 /* remove stray margins that hide text */
}

/* ensure checkbox and label fit inside the form (not overflowing) */
.check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;   /* checkbox sits at top of label */
  margin-top: 8px;
  margin-bottom: 8px;        /* small bottom space so paragraph isn't clipped */
  width: 100%;
  box-sizing: border-box;
}

/* visual sizing for checkbox itself */
.check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0;
  flex: 0 0 auto;
}

/* ---------- Fix: phone + country alignment and sizing ---------- */
/* phone-row container */
.phone-row {
  display: flex;
  gap: 8px;                  /* small gap between country code and phone */
  align-items: center;       /* vertically center select and input */
  margin-bottom: 6px;
  width: 100%;
  box-sizing: border-box;
}

/* ensure vertical alignment in row */
.phone-row {
  align-items: center !important;
}

/* ensure dropdown can open below */
.hero-right,
.hero-right form,
.phone-row,
.col-cc,
.ccode {
  overflow: visible !important;
  position: relative !important;
}
/* force dropdown to appear below */
.ccode {
  position: relative;
  z-index: 9999 !important;       /* ensure dropdown is not clipped */
}

.hero-right {
  overflow: visible !important;
}

/* make the country code narrower and fixed — looks better than percent */
.col-cc {
  width: 92px;               /* fixed width for country-code select */
  min-width: 80px;
  max-width: 120px;
  box-sizing: border-box;
}

/* phone input takes remaining width */
.col-phone {
  flex: 1 1 auto;
  width: auto;
}

/* ensure select and input heights match precisely */
.phone-row .ccode,
.phone-row .form-control[type="tel"],
.phone-row input[type="tel"] {
  height: 46px !important;              /* unified height so everything aligns */
  padding: 0 10px !important;
  line-height: 46px !important;
  display: flex;
  align-items: center;
}

/* make the country select text centered-ish for clarity */
.phone-row .ccode {
  text-align: center;
}

.ccode:focus {
  position: relative;
  z-index: 999999 !important;
}

/* ensure phone input stretches fully */
.phone-row .col-phone .form-control,
.phone-row .col-phone input {
  width: 100%;
}

/* reduce top spacing above email so phone and email are closer */
.email-row { margin-top: 6px; margin-bottom: 6px; }

/* ensure submit button doesn't get pushed down too far */
#submitBtn { margin-top: 10px !important; }

/* responsive: on very small screens stack country+phone */
@media (max-width:480px) {
  .phone-row { flex-direction: column; align-items: stretch; }
  .col-cc, .col-phone { width: 100%; }
  .phone-row .ccode, .phone-row input[type="tel"] { height: 44px; }
  .check-row { align-items: center; }
}