html { scroll-behavior: smooth; }
         :root{
         --accent: #00c194;
         --text-muted: #6c7a87;
         --card-border: #e6e6e6;
         --bg: #f7f9fa;
         --header-bg: #ffffff;
         --header-border: #e6f3ee;
         }
         html,body{height:100%}
         body{
         margin:0;
         background:var(--bg);
         color:#122028;
         font-family: 'Ubuntu', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
         -webkit-font-smoothing:antialiased;
         -moz-osx-font-smoothing:grayscale;
         padding-left:24px;
         padding-right:24px;
         }
         .max-w-7xl{ max-width:1280px; margin:0 auto; }
         /* ===== Header ===== */
         .site-header {
         background: var(--header-bg);
         border: 1px solid var(--header-border);
         border-radius: 12px;
         padding: 10px 16px;
         margin: 18px auto 8px;
         max-width:1280px;
         display:flex;
         align-items:center;
         gap:12px;
         justify-content:space-between;
         box-shadow: 0 6px 18px rgba(16,24,40,0.03);
         }
         .header-left, .header-center, .header-right{ display:flex; align-items:center; gap:12px; }
         /* Logo */
         .logo {
         display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--accent);
         font-weight:800; font-size:20px;
         }
         .logo svg{ width:36px; height:36px; flex-shrink:0; }
         /* Nav */
         /* Increased gap for desktop menu items as requested */
         .site-nav { display:flex; gap:28px; align-items:center; }
         .site-nav a { color:#0f1720; text-decoration:none; font-weight:600; padding:8px 6px; position:relative; white-space:nowrap; }
         .site-nav a:hover::after, .site-nav a.active::after {
         content: ''; position:absolute; left:6px; right:6px; bottom:-12px; height:3px; background:var(--accent); border-radius:6px;
         }
         /* Right actions */
         .icon-btn{
            width: 40px;
            height: 40px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #474747;
            border: 1px solid #e6f3ee;
            cursor: pointer;
            color: #ffffff;
         }
         .modal-body{
  display:flex;
  gap:20px;
  max-height:85vh;
}

.modal-left{
  flex:1.2;
  display:flex;
  flex-direction:column;
}

.modal-slider{
  position:relative;
  height:420px;
  background:#000;
  border-radius:10px;
  overflow:hidden;
}

.modal-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .4s ease;
}

.modal-slide.active{ opacity:1; }

.modal-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.6);
  color:#fff;
  border:none;
  width:44px;
  height:44px;
  border-radius:50%;
  font-size:26px;
  cursor:pointer;
  z-index:10;
}

.modal-arrow.left{ left:12px; }
.modal-arrow.right{ right:12px; }

.modal-thumbs{
  display:flex;
  gap:10px;
  margin-top:10px;
  overflow-x:auto;
}

.modal-thumbs img{
  width:90px;
  height:60px;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
  opacity:.7;
  border:2px solid transparent;
}

.modal-thumbs img.active{
  opacity:1;
  border-color:var(--accent);
}

.modal-right{
  flex:1;
  overflow-y:auto;
  padding-right:10px;
}

.modal-title{
  font-size:22px;
  font-weight:800;
}

.modal-location{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--accent);
  margin-top:6px;
}

.modal-price{
  font-size:20px;
  font-weight:800;
  color:var(--accent);
  margin:10px 0;
}

.modal-desc{
  color:var(--text-muted);
}

.modal-subtitle{
  margin-top:18px;
  font-size:18px;
  font-weight:700;
}

.modal-list{
  margin-top:8px;
  padding-left:18px;
  color:#334155;
}

.modal-list li{
  margin-bottom:6px;
  list-style:disc;
}

.modal-actions{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

         .add-cta{
         display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; background:var(--accent);
         color:white; font-weight:700; border:0; cursor:pointer;
         box-shadow: 0 8px 20px rgba(0,193,148,0.12);
         font-size: 14px;
         }
         /* Mobile drawer & overlay (fully responsive nav) */
         .nav-toggle{ display:none; }
         .drawer-overlay{ display:none; }
         .mobile-drawer{
         position:fixed;
         right:-360px;
         top:0;
         width:320px;
         max-width:85%;
         height:100%;
         background:#fff;
         z-index:80;
         box-shadow: -28px 0 60px rgba(2,6,23,0.12);
         transition: right .28s cubic-bezier(.2,.9,.2,1);
         padding:18px;
         display:flex;
         flex-direction:column;
         gap:18px;
         border-left:1px solid #f0f6f3;
         }
         .mobile-drawer.open{ right:0; }
         .drawer-overlay.show{ display:block; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:70; }
         .drawer-close{
         align-self:flex-end;
         background:transparent;
         border:0;
         font-size:20px;
         cursor:pointer;
         color:#334155;
         }
         .drawer-nav{ display:flex; flex-direction:column; gap:12px; padding-top:6px; }
         .drawer-nav a{ font-weight:700; color:#0f1720; text-decoration:none; padding:10px 6px; border-radius:8px; }
         .drawer-cta { margin-top:auto; display:flex; gap:10px; flex-direction:column; }
         /* Small screens: show toggle, hide desktop nav */
         @media (max-width:900px){
         .site-nav{ display:none; }
         .nav-toggle{ display:inline-flex; margin-left: -20px;}
         .site-header{ padding:10px; gap:8px; }
         .header-right .icon-btn{ display:none; } /* hide icon-btn on mobile if present */
         }
         /* ---------- BANNER SLIDER (kept) ---------- */
         .banner-area { max-width:1280px; margin: 8px auto; border-radius:12px; overflow:hidden; }
         .banner-slider { position:relative; width:100%; height:260px; background:#eee; user-select:none; }
         @media (max-width:640px){ .banner-slider{ height:140px; } }
         .banner-slide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
         .banner-slide.active { opacity:1; }
         .banner-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
         /* arrows */
         .banner-arrow {
         position:absolute; top:50%; transform:translateY(-50%);
         width:40px; height:40px; border-radius:999px;
         display:flex; align-items:center; justify-content:center; cursor:pointer;
         background: rgb(0 193 148 / 85%); color:white; z-index:40;
         user-select:none;
         }
         .banner-arrow.left{ left:12px; }
         .banner-arrow.right{ right:12px; }
         /* dots */
         .banner-dots { position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:8px; z-index:40; }
         .banner-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.6); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
         .banner-dot.active { background:rgb(0 193 148);; transform:scale(1.15); }
         /* ---------- Card + listing styles (kept from original) ---------- */
         .card{
         background:white;
         border:1px solid var(--card-border);
         border-radius:12px;
         overflow:hidden;
         box-shadow:0 6px 20px rgba(16,24,40,0.06);
         transition:transform .16s ease, box-shadow .16s ease;
         display:flex;
         flex-direction:column;
         min-height:100%;
         }
         .card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(16,24,40,0.12); }
         /* Slider specific (for cards) */
         .slider{
         position:relative;
         width:100%;
         height:220px;
         background:#eaeef0;
         overflow:hidden;
         }
         .slide-img{
         position:absolute;
         left:0; top:0;
         width:100%;
         height:100%;
         object-fit:cover;
         opacity:0;
         transition:opacity .35s ease;
         }
         .slide-img.active{ opacity:1; }
         .arrow{
         position:absolute;
         top:50%;
         transform:translateY(-50%);
         background: rgb(0 193 148 / 79%);
         color:white;
         width:36px; height:36px;
         display:flex;
         align-items:center;
         justify-content:center;
         border-radius:50%;
         cursor:pointer;
         font-size:18px;
         user-select:none;
         z-index:6;
         }
         .arrow-left{ left:10px; }
         .arrow-right{ right:10px; }
         .card img.fallback{ width:100%; height:220px; object-fit:cover; display:block; }
         .price{ font-weight:700; font-size:1.12rem; color:var(--accent); }
         .location{ display:flex; align-items:center; gap:8px; color: #f30000; font-weight:600; font-size:0.95rem; }
         .label-small{ color:var(--text-muted); font-size:0.85rem; margin-top:6px; }
         .title{ font-weight:700; color:#0f1720; font-size:22px; margin-top:8px; }
         .desc{ color:var(--text-muted); font-size:0.94rem; margin-top:8px; }
         .meta-row{ display:flex; gap:14px; margin-top:8px; color:var(--text-muted); font-size:0.92rem; }
         /* Buttons */
         .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:11px 12px; border-radius:10px; font-weight:600; cursor:pointer; border:0; }
         .btn-whatsapp{ font-size: 14px; background:#25D366; color:white; width:100%; }
         .btn-call{ background:#f2fbf9; color:var(--accent); border:1px solid var(--accent); width:100%; font-size: 14px; }
         .btn-view{ font-size: 15px; background:var(--accent); color:white; width:100%; }
         /* Grid */
         .grid{ display:grid; gap:22px; grid-template-columns:repeat(1,1fr); }
         @media(min-width:640px){ .grid{ grid-template-columns:repeat(2,1fr); } }
         @media(min-width:1024px){ .grid{ grid-template-columns:repeat(3,1fr); } }
         /* Modal (kept) */
         .modal-root{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:999; background:rgba(2,6,23,0.45); backdrop-filter:blur(4px); }
         .modal-panel{ width:94%; max-width:1100px; background:white; border-radius:12px; box-shadow:0 30px 80px rgba(2,6,23,0.2); overflow:hidden; transform-origin:center; animation: modalIn .28s cubic-bezier(.2,.9,.2,1) both; }
         @keyframes modalIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
         .modal-body{ padding:18px; display:flex; gap:18px; flex-direction:column; }
         @media(min-width:860px){ .modal-body{ flex-direction:row; } }
         .modal-image{ flex:1; border-radius:8px; overflow:hidden; }
         .modal-image img{ width:100%; height:100%; object-fit:cover; display:block; min-height:260px; }
         .modal-right{ width:420px; max-width:420px; display:flex; flex-direction:column; gap:12px; }
         .thumbs{ display:flex; gap:10px; overflow:auto; margin-top:8px; padding-bottom:6px; }
         .thumbs img{ width:96px; height:64px; object-fit:cover; border-radius:8px; cursor:pointer; opacity:.9; border:1px solid #eee; }
         .thumbs img.active{ transform:translateY(-4px); box-shadow:0 10px 30px rgba(16,24,40,0.08); opacity:1; }
         .close-btn{ 
            position: absolute;
            right: 12px;
            top: 10px;
            background: #00ffd0;
            border: 0;
            font-size: 18px;
            cursor: pointer;
            color: #000000;
            padding: 8px 12px 8px 12px;
            border-radius: 4px;
            z-index: 9999;
          }
         @media (hover: none) { .arrow { display:none; } }
         /* About section */
         .about-area{ padding:48px 12px; background:#fff; border-radius:12px; margin-top:18px; }
         .about-grid{ display:grid; grid-template-columns: 1fr 420px; gap:36px; align-items:center; }
         .about-left { padding-right:6px; }
         .kicker{ color:var(--accent); font-weight:700; font-size:13px; margin-bottom:8px; letter-spacing:1px; }
         .about-title{ font-size:30px; line-height:1.03; margin:0 0 14px 0; font-weight:800; color:#0f1720; }
         .about-lead{ color:var(--text-muted); margin:0 0 12px 0; font-size:15px; }
         .about-desc{ color:var(--text-muted); margin:0 0 18px 0; font-size:15px; max-width:560px; }
         .about-actions{ margin-top:8px; }
         .about-cta{ width:200px; justify-content:center; }
         /* Image stack */
         .image-stack{ position:relative; width:100%; max-width:420px; margin-left:auto; }
         .stack-img{
         width:100%;
         display:block;
         border-radius:12px;
         object-fit:cover;
         transform-origin:center;
         box-shadow: 0 18px 40px rgba(16,24,40,0.08);
         opacity:0;
         animation: fadeUp .7s forwards cubic-bezier(.2,.8,.2,1);
         will-change: transform, opacity;
         }
         /* top image sits slightly higher and left */
         .img-top{
         height:260px;
         transform: translateY(0) rotate(-1deg);
         z-index:3;
         animation-delay: 0.08s;
         }
         /* bottom image smaller, tucked under */
         .img-bottom{
         position:absolute;
         right:0;
         bottom:-18px;
         width:72%;
         height:160px;
         transform: translateY(0) rotate(0.8deg);
         z-index:2;
         animation-delay: 0.22s;
         }

         @media (max-width:420px){

          body{
            padding-left: 6px;
            padding-right: 6px;
          }

           .logo img{
               width: 96px !important;
               top: 20px!important;
           }
           .header-center{
               position: absolute;
               left: 44%;
               top: 32px;
           }

           .add-cta{
             gap: 5px;
             font-size: 12px;
             padding: 10px 12px;
             margin-top: 2px;
           }
           .btn-call{
             font-size: 12px;
             width: 90%;
           }
           .btn-whatsapp{
             width: 90%;
             font-size: 12px;
           }
         }
                  
         /* subtle floating animation to bring life */
         @keyframes float {
         0% { transform: translateY(0) }
         50% { transform: translateY(-6px) }
         100% { transform: translateY(0) }
         }
         /* fade+slide up entrance */
         @keyframes fadeUp {
         from { opacity:0; transform: translateY(8px) scale(.995); }
         to   { opacity:1; transform: translateY(0) scale(1); }
         }
         /* apply slow float (staggered) */
         .img-top { animation-name: fadeUp, float; animation-duration: .7s, 6s; animation-delay: 0.08s, 1s; animation-iteration-count: 1, infinite; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.2,.8,.2,1), ease-in-out; }
         .img-bottom { animation-name: fadeUp, float; animation-duration: .7s, 6.5s; animation-delay: 0.22s, 1.5s; animation-iteration-count: 1, infinite; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.2,.8,.2,1), ease-in-out; transform-origin:center; }
         /* reduce motion for users who prefer it */
         @media (prefers-reduced-motion: reduce){
         .img-top, .img-bottom { animation: fadeUp .5s both; }
         .img-top, .img-bottom { animation-name: fadeUp; animation-duration:.5s; animation-iteration-count:1; }
         }
         /* Responsive */
         @media (max-width:1024px){
         .about-grid{ grid-template-columns: 1fr 360px; gap:24px; }
         .img-top{ height:220px; }
         .img-bottom{ height:140px; width:68%; bottom:-14px; }
         }
         @media (max-width:880px){
         .about-grid{ grid-template-columns: 1fr; text-align:center; }
         .about-left{ order:2; }
         .about-right{ order:1; margin-bottom:8px; }
         .image-stack{ margin-left:0; display:inline-block; }
         .img-top{ height:200px; }
         .img-bottom{ position:relative; width:60%; height:120px; bottom:0; margin:12px auto 0; }
         }
         @media (max-width:480px){
         .about-area{ padding:28px 12px; }
         .about-title{ font-size:20px; }
         .img-top{ height:140px; border-radius:10px; }
         .img-bottom{ height:84px; width:64%; }
         }
         .whyus-area{
         padding:48px 12px;
         margin-top:28px;
         background: #00c194; /* requested background */
         border-radius:12px;
         color: #ffffff;
         }
         .whyus-inner{ display:flex; gap:28px; align-items:flex-start; flex-direction:column; }
         .whyus-head{ max-width:720px; }
         .whyus-head .kicker{ color:rgba(255,255,255,0.92); font-weight:700; font-size:13px; letter-spacing:1px; margin-bottom:8px; }
         .whyus-title{ font-size:28px; margin:0 0 8px; font-weight:800; color:#ffffff; line-height:1.05; }
         .accent-text{ color: #ffffff; font-weight:800; }
         .whyus-sub{ color:rgba(255,255,255,0.92); margin:0 0 0px; }
         /* grid */
         .whyus-grid{
         display:grid;
         gap:18px;
         grid-template-columns: repeat(4,1fr);
         }
         /* Keep cards white so they pop on green background */
         .why-card{
         background:#ffffff;
         color: #0f1720;
         border:1px solid rgba(255,255,255,0.06);
         border-radius:12px;
         padding:18px;
         display:flex;
         flex-direction:column;
         gap:10px;
         align-items:flex-start;
         transition: transform .18s ease, box-shadow .18s ease;
         box-shadow:0 8px 30px rgba(2,6,23,0.06);
         }
         .why-card:hover{
         transform: translateY(-8px);
         box-shadow:0 28px 80px rgba(2,6,23,0.14);
         }
         .why-icon{
         width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:10px;
         background: rgb(0 193 148);
         }
         .why-icon svg{ stroke: #ffffff; } /* svg icon strokes white for contrast inside icon bg */
         .why-title-card{ margin:0; font-size:16px; font-weight:700; color:#0f1720; }
         .why-desc-card{ margin:0; color:var(--text-muted); font-size:14px; line-height:1.45; }
         /* Responsive */
         @media (max-width:1100px){
         .whyus-grid{ grid-template-columns: repeat(2,1fr); }
         .whyus-head .whyus-title{ font-size:26px; }
         }
         @media (max-width:680px){
         .whyus-grid{ grid-template-columns: 1fr; }
         .whyus-inner{ gap:20px; }
         .whyus-title{ font-size:22px; }
         .why-card{ align-items:flex-start; }
         }
         /* ===== FOOTER (redesigned) ===== */
         .footer-area{
         margin-top:40px;
         position:relative;
         background: url('../../img/footer.jpg') center/cover no-repeat;
         color:#ffffff;
         border-radius:12px 12px 0 0;
         overflow:hidden;
         padding:64px 20px 15px;
         /* subtle fallback color if image not loaded */
         background-color: #00382a;
         }
         /* overlay: keeps image visible but text readable */
         .footer-overlay{
         position:absolute;
         inset:0;
         background: linear-gradient(180deg, rgba(0,191,146,0.86) 0%, rgba(0,128,92,0.86) 100%);
         z-index:1;
         }
         /* grid layout — first column slightly wider */
         .footer-inner{
         position:relative;
         z-index:2;
         display:grid;
         grid-template-columns: 1.4fr 1fr 1fr;
         gap:36px;
         align-items:start;
         }
         /* headings */
         .footer-col h3.footer-logo{
         font-size:26px;
         font-weight:800;
         margin-bottom:10px;
         color:#ffffff;
         }
         .footer-col h4{
         font-size:18px;
         margin-bottom:12px;
         font-weight:700;
         color:#ffffff;
         }
         /* about text */
         .footer-about{
         color: rgba(255,255,255,0.95);
         font-size:15px;
         line-height:1.7;
         max-width:360px;
         margin-bottom:8px;
         }
         /* social icons (rounded) */
         .footer-social{ margin-top:14px; display:flex; gap:10px; }
         .footer-social a{
         width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
         border-radius:50%; background: rgba(255,255,255,0.08); color:#fff; text-decoration:none;
         font-size:16px;
         transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
         box-shadow: 0 6px 18px rgba(2,6,23,0.08);
         }
         .footer-social a:hover,
         .footer-social a:focus{
         background: #ffffff;
         color: var(--accent);
         transform: translateY(-4px);
         box-shadow: 0 18px 50px rgba(2,6,23,0.18);
         outline: none;
         }
         /* links */
         .footer-links{ padding:0; margin:0; list-style:none; }
         .footer-links li{ margin-bottom:12px; }
         .footer-links a{
         color: rgba(255,255,255,0.95);
         text-decoration:none;
         display:inline-flex;
         gap:10px;
         align-items:center;
         font-size:15px;
         transition: color .18s ease, transform .18s ease;
         }
         .footer-links a i{
         width:20px;
         text-align:center;
         color: rgba(255,255,255,0.95);
         font-size:14px;
         }
         .footer-links a:hover,
         .footer-links a:focus{
         color: #ffffff;
         transform: translateX(6px);
         }
         /* contact rows */
         .footer-contact{
         display:flex; align-items:center; gap:10px; color:rgba(255,255,255,0.95);
         margin-bottom:12px; font-size:15px;
         }
         .footer-contact i{ color:#fff; width:20px; text-align:center; font-size:16px; }
         .footer-contact a{ color:rgba(255,255,255,0.98); text-decoration:none; font-weight:600; }
         /* small CTA inside contact column */
         .footer-cta{
         display:inline-block;
         margin-top:8px;
         background: transparent;
         border: 1px solid rgba(255,255,255,0.18);
         color: #fff;
         padding:10px 14px;
         border-radius:10px;
         text-decoration:none;
         font-weight:700;
         transition: background .18s ease, transform .12s ease;
         }
         .footer-cta:hover,
         .footer-cta:focus{
         background: #ffffff;
         color: var(--accent);
         transform: translateY(-4px);
         outline:none;
         }
         /* bottom bar */
         .footer-bottom{
         position:relative;
         z-index:2;
         margin-top:32px;
         padding-top:22px;
         border-top:1px solid rgba(255,255,255,0.12);
         }
         .bottom-inner{
         display:flex;
         gap:12px;
         align-items:center;
         justify-content:space-between;
         color:rgba(255,255,255,0.92);
         font-size:13px;
         padding:0 8px;
         }
         .bottom-inner .bottom-links a{
         color:rgba(255,255,255,0.9);
         text-decoration:none;
         margin-left:12px;
         font-weight:600;
         }
         .bottom-inner .bottom-links a:hover{ text-decoration:underline; }
         /* small screens */
         @media (max-width:980px){
         .footer-inner{ grid-template-columns:1fr 1fr; }
         .bottom-inner{ flex-direction:column; gap:8px; text-align:center; }
         }
         @media (max-width:600px){
         .footer-inner{ grid-template-columns:1fr; text-align:center; gap:18px; }
         .footer-about{ margin-left:auto; margin-right:auto; }
         .footer-contact{ justify-content:center; }
         .footer-links a{ justify-content:center; }
         .footer-social{ justify-content:center; }
         }
         .active{
         color: #00c194!important;
         }
         /* SPECIFICATIONS */
.spec-box{
  background: #edfffb;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:26px 22px;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}

.spec-box i{
  font-size:34px;
  color:#00c194;
  margin-bottom:14px;
}

.spec-box h4{
  font-weight:800;
  margin-bottom:6px;
  font-size:16px;
}

.spec-box p{
  font-size:14px;
  color:#6b7280;
}

.spec-box:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 50px rgba(16,24,40,0.15);
}

/* AMENITIES */
.amenity-box{
  background: rgb(0 96 85);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:18px;
  padding:26px 22px;
  text-align:center;
  backdrop-filter:blur(6px);
  transition:transform .25s ease, background .25s ease;
}

.amenity-box i{
  font-size:34px;
  margin-bottom:14px;
}

.amenity-box h4{
  font-weight:800;
  margin-bottom:6px;
}

.amenity-box p{
  font-size:14px;
  opacity:.9;
}

.amenity-box:hover{
  background:#ffffff;
  color:#00c194;
  transform:translateY(-10px);
}