/* === Top bar / brand === */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body{
   font-family: "Poppins", sans-serif !important;
}

 .topbar{ background:#127782; color:#fff; font-size:.95rem; }
.topbar a{ color:#fff; text-decoration:none; }

.navbar .nav-link{ padding:.5rem .9rem; }
.btn-brand{ background:#127782; border:none; }
.btn-brand:hover{ background:#0c8fa0; }
.flag{ width:22px; height:22px; border-radius:50%; object-fit:cover; }

.brand-logo{ height:32px; width:auto; }
.navbar-brand{ min-width:0; padding-top:.25rem; padding-bottom:.25rem; }
.brand-title{ font-weight:600; max-width:60vw; }
.brand-tagline{ font-size:.8rem; color:#6c757d; margin-top:2px; }
@media (max-width:575.98px){
  .brand-title{ font-size:1rem; max-width:70vw; }
  .brand-logo{ height:28px; }
}
/* keep btn-link from underlining on hover/focus for this element */
.btn-link.text-decoration-none:hover,
.btn-link.text-decoration-none:focus {
  text-decoration: none !important;
}
.brand-logo{ height:60px; }                /* default */
/*@media (min-width: 992px){*/
/*  .brand-logo{ height:64px; }*/
/*}*/





/* NAV SEARCH (desktop) */
.nav-search-group{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid #e4edf6;
  border-radius:10px; padding:6px 8px; width:min(820px, 52vw);
  box-shadow:0 1px 0 rgba(13,110,253,.08) inset;
}
.mode-btn{
  background:#fff; border:0; font-weight:700; color:#0f172a; padding:.45rem .75rem;
  border-right:1px solid #e9eff6; border-radius:10px 0 0 10px;
}
.q-input{
  border:0; box-shadow:none !important; background:#fff;
  padding:.55rem .5rem; min-width:240px; flex:1 1 auto;
}
.icon-btn{
  width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f1f7ff; color:#0d6efd; border:0;
}
.search-btn{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:#3b4652; border-left:1px solid #e9eff6;
  margin-left:2px;
}

/* keep underline off anywhere we used btn-link earlier */
.btn-link.text-decoration-none:hover, .btn-link.text-decoration-none:focus{ text-decoration:none !important; }





@media (min-width:992px){
  .nav-search{ max-width:820px; width:52vw; } /* adjust to taste */
}

/* search pill */
.nav-search-group{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid #e4edf6; border-radius:12px;
  padding:6px 8px;
}
.mode-btn{ background:#fff; border:0; font-weight:700; color:#0f172a; padding:.45rem .75rem;
           border-right:1px solid #e9eff6; border-radius:10px 0 0 10px; }
.q-input{ border:0; box-shadow:none!important; background:#fff; padding:.55rem .5rem; flex:1 1 auto; }
.icon-btn, .search-btn{
  width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:#f1f7ff; color:#127782; border:0;
}
.search-btn{ background:transparent; color:#3b4652; border-left:1px solid #e9eff6; margin-left:2px; }

/* remove focus rings on the icon buttons (that black circle you saw) */
.icon-btn:focus, .search-btn:focus{ outline:none; box-shadow:none; }


/* Compact navbar search (desktop) */
@media (min-width: 992px){
  .nav-search{ 
    max-width: 560px;          /* was ~820px */
    width: 38vw;               /* scales with screen */
  }
  .nav-search-group{
    padding: 4px 6px;          /* shorter height */
    gap: .35rem;               
    border-radius: 10px;
  }
  .mode-btn{
    padding: .3rem .6rem;
    font-size: .95rem;
  }
  .q-input{
    padding: .4rem .45rem;
    font-size: .95rem;
  }
  .icon-btn,
  .search-btn{
    width: 30px;               /* was 36–38px */
    height: 30px;
  }
  .icon-btn i,
  .search-btn i{
    font-size: .9rem;          /* slightly smaller icon */
  }
}
/* layers */
.topbar.fixed-top{ z-index:1040; }
.navbar.fixed-top.under-topbar{ z-index:1030; }

/* dynamic offsets */
:root{ --topbar-h:0px; --navbar-h:64px; }   /* navbar fallback */
.navbar.fixed-top.under-topbar{ top: var(--topbar-h); margin-top:-1px; } /* kill hairline gap */
body{ padding-top: calc(var(--topbar-h) + var(--navbar-h)); }

/* on mobile your topbar is hidden (d-none d-md-block) */
@media (max-width:767.98px){
  :root{ --topbar-h:0px; }
}






/* ===========================
   HERO (full, paste-as-is)
   =========================== */

/* === Base === */
.hero-spot{
  position: relative;
  min-height: 560px;
  background: #011919;
  overflow: hidden;
  display: flex;           /* helps vertical centering on short screens */
  align-items: stretch;
}
.hero-spot::after{
  content:"";
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(90deg,
              rgba(6,28,28,.85) 0%,
              rgba(6,28,28,.70) 40%,
              rgba(6,28,28,0)   70%);
}
.hero-content{
  position:relative;
  z-index:3;
  color:#fff;
  max-width:680px;
}

.hero-badge{
  display:inline-block;
  padding:.5rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-weight:500;
}
.hero-title{
  font-size:clamp(1.8rem, 3vw + 1rem, 3.25rem);
  line-height:1.15;
}

/* === Right image panel (curved edge on desktop) === */
.hero-media{
  position:absolute; top:0; right:0; bottom:0; width:58%; z-index:1;
  clip-path: polygon(18% 0,100% 0,100% 100%,0 100%); /* fallback */
}
/* Make the carousel chain fill the hero height */
.hero-media .carousel,
.hero-media .carousel-inner,
.hero-media .carousel-item{
  height:100%;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:opacity .28s ease;
}
/* Nicer curved path if supported */
@supports (clip-path: path("M0,0 L1,0 L1,1 L0,1 Z")){
  .hero-media{
    clip-path:path("M 18% 0 C 10% 28%, 10% 72%, 18% 100% L 100% 100% L 100% 0 Z");
  }
}

/* === Search / form (kept from your original) === */
.search-wrap{ position:relative; }
.hero-pills{ position:relative; z-index:2; margin-left:.5rem; margin-bottom:0; }
.hero-pills .nav-link{ border-radius:.7rem .7rem 0 0; padding:.5rem 1rem; font-weight:600; }
.hero-pills .nav-link.active{ background:#127782; color:#fff; }
.hero-pills .nav-link:not(.active){ background:#eef1f3; color:#0f172a; }

.hero-form{
  margin-top:-10px; background:#fff; border-radius:1rem; padding:.5rem;
  box-shadow:0 14px 32px rgba(0,0,0,.16); border:1px solid rgba(15,23,42,.06);
}
.hero-form .input-group{ align-items:center; }
.hero-form .input-group-text{ background:#fff; border:0; color:#0f172a; }
.hero-form .form-control{ background:#f3f5f7; border:0; border-radius:.75rem; }
.hero-form .form-control::placeholder{ color:#98a2b3; }
.hero-form .form-control:focus{ box-shadow:none; }
.adv-btn{
  background:#fff; border:1px solid #e7eaee; border-radius:999px;
  font-weight:600; color:#0f172a; padding:.55rem .9rem; margin-left:.25rem; position:relative;
}
.adv-btn::before{
  content:""; position:absolute; left:-.5rem; top:50%; transform:translateY(-50%);
  width:1px; height:28px; background:#e7eaee;
}
.search-btn{ width:48px; height:48px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; margin-left:.35rem; }

/* === Thumbnails === */
.hero-thumbs{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  padding-right:clamp(8px,1.6vw,24px);
  display:flex; flex-direction:column; gap:14px; z-index:4;
}
.thumb{
  width:58px; height:58px; border-radius:50%; overflow:hidden; padding:0; cursor:pointer;
  border:2px solid #fff; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb.active{ outline:3px solid transparent; border-color:#127782; }

/* ===========================
   Responsive
   =========================== */

/* Tablets & down */
@media (max-width:991.98px){
  /* Fill safe viewport height on mobile */
  .hero-spot{
    align-items:center;     /* vertically center content */
  }
  .hero-media{
    width:100%; left:0; right:0; top:0; bottom:0;
    clip-path:none;         /* remove curve for full-bleed */
  }
  .hero-spot::after{
    background:linear-gradient(180deg,
                rgba(6,28,28,.75) 0%,
                rgba(6,28,28,.35) 35%,
                rgba(6,28,28,0)   70%);
  }
  .hero-content{
    padding-top: clamp(16px, 6vh, 48px);
    padding-bottom: clamp(16px, 6vh, 56px);
  }

  /* Thumbs move to bottom center */
  .hero-thumbs{
    right:auto; left:50%; top:auto; bottom:24px;
    transform:translateX(-50%);
    flex-direction:row; padding-right:0;
  }
  .thumb{ width:50px; height:50px; }

  .adv-btn{ display:none; }
  .hero-form{ border-radius:.85rem; }
}

/* Very short phones: tighten spacing */
@media (max-height:640px) and (max-width:575.98px){
  .hero-content .mb-4{ margin-bottom:.75rem !important; }
}



/* theme helpers (match your teal) */
.bg-teal-soft{ background:#e6f6f7; }
.text-teal{ color:#127782; }

/* mosaic layout */
.mosaic{
  position:relative;
  display:grid;
  grid-template-areas:
    "tall square"
    "tall wide";
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.tile{ margin:0; border-radius:16px; overflow:hidden; background:#f3f5f7; }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }

/* aspect ratios */
.tall{ grid-area:tall; aspect-ratio:3/4; }
.square{ grid-area:square; aspect-ratio:1/1; }
.wide{ grid-area:wide; aspect-ratio:16/9; }

/* floating social proof card */
.happy-card{
  position:absolute;
  left:52%; top:48%;
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:14px;
  padding:.75rem .9rem;
  min-width:190px;
}
.avatar-stack{
  display:flex;
}
.avatar-stack img{
  width:28px; height:28px; border-radius:50%;
  border:2px solid #fff; object-fit:cover; margin-left:-8px;
}
.avatar-stack img:first-child{ margin-left:0; }

/* stats */
.stat-num{ font-size: clamp(1.5rem, 2.2vw + .5rem, 2rem); font-weight:700; }
.stat-label{ color:#6b7280; font-size:.95rem; }

/* responsive */
@media (max-width: 991.98px){
  .mosaic{ gap:14px; }
  .happy-card{ left:58%; top:55%; }
}
@media (max-width: 767.98px){
  .mosaic{
    grid-template-areas:
      "tall tall"
      "square wide";
    grid-template-columns: 1fr 1fr;
  }
  .happy-card{ left:60%; top:60%; }
}
@media (max-width: 575.98px){
  .mosaic{
    grid-template-areas:
      "tall"
      "square"
      "wide";
    grid-template-columns: 1fr;
  }
  .tall{ aspect-ratio:4/5; }
  .happy-card{
    position:absolute; left:50%; top:auto; bottom:8%;
    transform:translateX(-50%);
  }
}




/* palette helpers */
.bg-teal-soft{ background:#e6f6f7; }
.text-teal{ color:#127782; }

/* filter chips */
.chip{
  border:0; 
  background: #FF6B001A; 
  color:#0f172a; 
  padding:.5rem .85rem;
  border-radius:.7rem; 
  font-weight:600;
}
.chip.active{ background:#127782; color:#fff; }

/* property card */
.prop-card{  border-radius:1rem; background:#fff; padding:.5rem; }
.prop-card:hover{ box-shadow:0 12px 28px rgba(0,0,0,.08); transform:translateY(-1px); transition:.15s; }

.prop-img{ width:100%; height:100%; object-fit:cover; }
.tag{
  background:#fff; color:#000; font-size:.75rem; padding:.2rem .5rem;
  border-radius:.8rem;
}
.price-badge{
  position:absolute; left:.75rem; bottom:.75rem;
  background:#0ea5b7; color:#fff; padding:.35rem .6rem; border-radius:.5rem;
  font-weight:700; font-size:.9rem;
}
.act{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#0f172a; border-radius:50%; text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.spec{
  background:#f5f7fa; border:1px solid #eef0f3; border-radius:999px;
  padding:.25rem .55rem; font-size:.85rem; color:#374151;
}



/* XL screens: a bit roomier */
@media (min-width:1200px){
  .chip{ padding:.6rem 1rem; }
}

/* SM and below: make chips horizontally scrollable, bigger tap targets */
@media (max-width:575.98px){
  .filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    gap:.5rem;
    margin-inline:-12px;           /* bleed to edges */
    padding:0 12px .25rem;
    scroll-snap-type:x mandatory;
  }
  .filters::-webkit-scrollbar{ display:none; } /* hide scrollbar (optional) */

}
/* Badges & actions scale slightly on small screens */
@media (max-width:767.98px){
  .tag{ font-size:.7rem; padding:.15rem .45rem; border-radius:.6rem; }
  .act{ width:30px; height:30px; }
  .price-badge{ font-size:.85rem; padding:.3rem .55rem; }
  .spec{ font-size:.8rem; padding:.2rem .5rem; }
  .prop-card{ border-radius:.85rem; }
}

/* XS tweaks */
@media (max-width:575.98px){
  .prop-card{ padding:.45rem; }
  .prop-body{ padding-top:.35rem; }
}
/* --- FILTER CHIPS (center + mobile scroll) --- */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;            /* centered on most screens */
}

@media (max-width: 575.98px){
  .filters{
    flex-wrap:nowrap;                /* single row that can scroll */
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:0 12px .25rem;
    margin-inline:-12px;             /* edge-to-edge feel */
    gap:.5rem;
  }
  .filters::-webkit-scrollbar{ display:none; } /* optional */
  .chip{
    white-space:nowrap;
    padding:.45rem .75rem;
    font-size:.9rem;
    border-radius:.6rem;
  }
}

/* --- PROPERTY CARDS (robust on small screens) --- */
.prop-card{ 
  border-radius:1rem; 
  background:#fff; 
  padding:.5rem; 
  display:flex; 
  flex-direction:column;             /* keep body below image */
}

/* keep images consistent without HTML changes */
.prop-img{
  width:100%;
  height:auto;                        /* override previous height:100% */
  aspect-ratio:4/3;                   /* consistent crop; modern browsers */
  object-fit:cover;
  display:block;
  border-radius:.8rem;
}

@media (max-width: 767.98px){
  .tag{ font-size:.7rem; padding:.15rem .45rem; border-radius:.6rem; }
  .act{ width:30px; height:30px; }
  .price-badge{ font-size:.85rem; padding:.3rem .5rem; }
  .spec{ font-size:.8rem; padding:.2rem .5rem; }
}

@media (max-width: 575.98px){
  .prop-card{ padding:.45rem; border-radius:.85rem; }
  .prop-body{ padding-top:.35rem; }
}





/* buttons */
.btn-teal{ background:#127782; color:#fff; border:0; }
.btn-teal:hover{ background:#0f6a72; color:#fff; }
.btn-outline-teal{ border:1px solid #cfe9ea; color:#0f6a72; }
.btn-outline-teal:hover{ background:#e6f6f7; color:#0f6a72; }

/* cards */
.help-card{
  background:#fff; border:1px solid #eef2f4; border-radius:1rem;
  padding:2rem 1.25rem; box-shadow:0 6px 20px rgba(0,0,0,.04);
}
.help-card.is-featured{
  border-color:#bfe6e8;
  box-shadow:0 16px 40px rgba(18,119,130,.12);
}

/* icons */
.help-icon{
  width:72px; height:72px; border-radius:18px; margin-inline:auto;
  display:grid; place-items:center; background:#f3fbfc; color:#127782;
  font-size:32px;
}

/* responsive tweaks */
@media (max-width: 575.98px){
  .help-card{ padding:1.5rem 1rem; }
  .help-icon{ width:64px; height:64px; font-size:28px; }
  .help-section .h3{ font-size:1.35rem; }
}






/* Section bg to match mockup */
.cities-section{ background: #D8E2E3; }  /* tweak if needed */

/* City card */
.city-card{
  background:#fff;
  border:1px solid #e8ecef;
  border-radius:14px;
  padding:.9rem 1rem;
  transition:box-shadow .15s ease, transform .15s ease;
  color:#0f172a;
}
.city-card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.06); transform:translateY(-1px); }

/* Thumb */
.city-thumb{
  width:56px; height:56px; border-radius:12px; overflow:hidden; flex:0 0 56px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.city-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Text */
.city-name{ font-weight:700; }
.city-count{ color:#6b7280; }

/* Buttons (reuse your palette) */
.btn-outline-teal{ border:1px solid #cfe9ea; color:#127782; }
.btn-outline-teal:hover{ background:#e6f6f7; color:#127782; }





/* Toggle buttons */
.toggle-group{ display:flex; gap:.5rem; }
.toggle-btn{
  border:1px solid #cfd6da; background:#fff; color:#0f172a;
  padding:.45rem .9rem; border-radius:.6rem; font-weight:600;
}
.toggle-btn.active{
  background:#127782; color:#fff; border-color:#127782;
}

/* Cards */
.listing-card{ border:1px solid #e9edf0; border-radius:1rem; background:#fff; }
.listing-card:hover{ box-shadow:0 12px 28px rgba(0,0,0,.08); transform:translateY(-1px); transition:.15s; }

.img-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.price{
  position:absolute; left:.75rem; bottom:.75rem;
  background:#127782; color:#fff; padding:.35rem .6rem; border-radius:.5rem; font-weight:700;
}

/* Responsive niceties */
@media (max-width: 575.98px){
  .toggle-group{ width:100%; justify-content:center; }
  .toggle-btn{ flex:1 0 auto; }
}
/* Make the price sit UNDER the image */
.listing-card .price{
  position: static !important;          /* cancel absolute overlay */
  display: inline-block;
  background:#127782;
  color:#fff;
  padding:.35rem .6rem;
  border-radius:.5rem;
  font-weight:700;
  line-height:1;
  margin-top:.5rem;                      /* space below image */
  margin-bottom:.25rem;
  font-size: .95rem;
}

/* If the price is placed right after .listing-media (outside .p-2) */
.listing-media + .price{ margin-left:.5rem; }

/* If the price is inside the .p-2 body, remove the left offset */
.listing-card .p-2 > .price{ margin-left:0; }

/* Image stays responsive */
.img-cover{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Small-screen tweaks */
@media (max-width: 575.98px){
  .listing-card .price{ font-size:.9rem; margin-top:.4rem; }
  .listing-card h6{ font-size:1rem; }
}




/* theme helpers */
.bg-teal-soft{ background:#e6f6f7; }
.text-teal{ color:#127782; }
.btn-teal{ background:#127782; border:0; }
.btn-teal:hover{ background:#0f6a72; }

/* quote card */
.quote-card{
  background:#0f6a72; color:#fff; border-radius:14px; position:relative;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}
.quote-card .bubble-tip{
  position:absolute; left:48px; bottom:-10px; width:0; height:0;
  border-left:12px solid transparent; border-right:12px solid transparent;
  border-top:12px solid #0f6a72;
}
.quote-card p{ margin:0; font-size:1.02rem; }

/* stars */
.stars i{ color:#ffc107; margin-right:2px; }

/* avatars */
.avatar-btn{
  width:54px; height:54px; border-radius:50%; padding:0; border:2px solid #fff;
  box-shadow:0 6px 16px rgba(0,0,0,.12); background:#fff; overflow:hidden; cursor:pointer;
}
.avatar-btn img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-btn.active{ outline:3px solid #127782; }

/* responsive */
@media (max-width: 991.98px){
  .quote-card{ border-radius:12px; }
  .avatar-rail{ justify-content:center; }
  .quote-card .bubble-tip{ left:50%; transform:translateX(-50%); }
}
@media (max-width:575.98px){
  .avatar-btn{ width:48px; height:48px; }
  .quote-card p{ font-size:1rem; }
}



/* Quote bubble styling */
.testi-section .quote-card{
  position: relative;
  background:#0f6a72;     /* teal */
  color:#fff;
  border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* Stars color */
.testi-section .stars i{ color:#ffc107; }

/* Pointer under the bubble (no extra markup required) */
.testi-section .quote-card::after{
  content:"";
  position:absolute;
  left:44px;               /* aligns over the avatar on desktop */
  bottom:-10px;
  width:0; height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:12px solid #0f6a72;
}

/* If you kept a <span class="bubble-tip"> in the HTML, hide it */
.testi-section .bubble-tip{ display:none; }

/* Put some space between the bubble and the client row underneath */
.testi-section .quote-card + .d-flex{
  margin-top:14px;
}

/* Avatar sizing under the quote */
#tAvatar{
  width:40px; height:40px; object-fit:cover;
}

/* Responsive: center the pointer under the bubble on smaller screens */
@media (max-width: 991.98px){
  .testi-section .quote-card::after{
    left:50%;
    transform:translateX(-50%);
  }
}
@media (max-width: 575.98px){
  #tAvatar{ width:36px; height:36px; }
  .testi-section .quote-card + .d-flex{ margin-top:12px; }
}










/* colors consistent with your theme */
.btn-brand{ background:#127782; border:0; }
.btn-brand:hover{ background:#0f6a72; }

/* CTA background (deep night blue with subtle stars) */
.newsletter-cta{
  background: radial-gradient(1200px 600px at 80% -10%, #1a2b7a 0%, #0b1f4a 55%, #071b3b 100%);
}
.newsletter-cta::before{
  /* tiny star noise */
  content:""; position:absolute; inset:0; opacity:.15; pointer-events:none;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff 30%, transparent 31%),
                    radial-gradient(1px 1px at 60% 20%, #fff 30%, transparent 31%),
                    radial-gradient(1px 1px at 80% 60%, #fff 30%, transparent 31%);
  background-size: 180px 180px, 220px 220px, 260px 260px;
}


/* Illustration */
.cta-img{
  max-width: 560px;
  width: min(48vw, 560px);
  height: auto;
}

/* Subscribe input group */
.subs-group{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}
.subs-group .form-control{
  padding:.9rem 1rem;
  background:#fff;
}
.subs-group .form-control:focus{ box-shadow:none; }
.subs-group .btn{ padding:.6rem 1rem; }

/* Teal strip */
.brand-strip{
  background:#0d0d0e;
}
.brand-mark{ height:32px; width:auto; }
.text-white-75{ color:rgba(255,255,255,.85); }
.soc{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.15); color:#fff; text-decoration:none;
}
.soc:hover{ background:rgba(255,255,255,.25); }

/* Responsive */
@media (max-width: 991.98px){
  .cta-img{ width: min(72vw, 520px); margin-top:1rem; }
}
@media (max-width: 575.98px){
  .cta-img{ width: 88vw; }
  .subs-group{ border-radius:10px; }
  .subs-group .btn{ border-radius:10px; }
}



/* Footer styling (responsive) */
.site-footer{ background:#fff; }
.foot-title{
  font-weight:700; font-size:.95rem; color:#0f172a; margin-bottom:.5rem;
}
.foot-links{ list-style:none; padding:0; margin:0; }
.foot-links li{ margin:.35rem 0; }
.foot-links a{ text-decoration:none; color:#444; }
.foot-links a:hover{ color:#127782; }

.newsletter .form-control{ border:1px solid #dfe6ea; }
.btn-teal{ background:#127782; color:#fff; border:none; }
.btn-teal:hover{ background:#0f6a72; color:#fff; }

.app-badge{
  display:flex; align-items:center; gap:.5rem;
  background:#111; color:#fff; text-decoration:none;
  border-radius:.6rem; padding:.55rem .7rem; min-width: 190px;
}
.app-badge span{ line-height:1.05; }
.app-badge small{ color:#cbd5e1; }
.app-badge:hover{ opacity:.9; }

.footer-rule{ border:0; border-top:2px solid #127782; }

/* Small screens */
@media (max-width:575.98px){
  .app-badge{ width:100%; }
}
/* =========================
   APPEND-ONLY RESPONSIVE PATCH
   (paste at the END of your stylesheet)
   ========================= */

/* 0) Safety: stop horizontal scroll caused by wide clipped elements */
html, body { max-width: 100%; overflow-x: hidden; }

/* 1) Nav/brand: keep brand compact on phones */
@media (max-width: 575.98px){
  .navbar-brand { gap:.4rem; }
  .brand-title { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-tagline { display:none; }       /* hide tiny tagline on xs */
}

/* 2) Hero sizing: comfortable padding on tablets/phones */
@media (max-width: 991.98px){
  .hero-content { max-width: none; padding-right: .5rem; padding-left: .5rem; }
  .hero-spot     { padding-bottom: 80px; } /* space for bottom thumbs on md- */
}
@media (max-width: 575.98px){
  .hero-title { font-size: clamp(1.6rem, 5.5vw + .6rem, 2.1rem); line-height: 1.2; }
}

/* 3) Hero thumbs: fix missing outline color + keep tappable */
.thumb.active { outline: 3px solid #127782; border-color: #127782; }
@media (max-width: 575.98px){
  .thumb { width: 48px; height: 48px; }
}

/* 4) Filter chips: center by default, smooth scroll on mobile (in case earlier rules get overridden) */
.filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
@media (max-width:575.98px){
  .filters{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 12px .25rem; margin-inline:-12px; }
  .filters::-webkit-scrollbar{ display:none; }
  .chip{ white-space:nowrap; font-size:.9rem; padding:.45rem .75rem; }
}

/* 5) Property cards: force consistent image aspect without HTML changes */
.prop-img{ width:100%; height:auto; aspect-ratio: 4 / 3; object-fit: cover; display:block; border-radius:.8rem; }

/* 6) Price badge under image (honor both placements) */
.listing-card .price{ position:static !important; display:inline-block; margin:.5rem 0 .25rem; }

/* 7) Testimonials: ensure pointer centers on small screens and spacing is tight */
@media (max-width: 991.98px){
  .testi-section .quote-card::after{ left:50%; transform:translateX(-50%); }
}
.testi-section .quote-card + .d-flex{ margin-top:14px; }

/* 8) CTA: make form/button comfy on mobile */
@media (max-width: 575.98px){
  .subs-group .form-control{ padding:.8rem .9rem; }
  .subs-group .btn{ padding:.6rem .9rem; }
}

/* 9) Footer: make columns stack cleanly, badges full-width on phones */
@media (max-width: 575.98px){
  .app-badge{ width:100%; }
}