/* =========================================================
   WBProperty.in — Main Stylesheet
   Palette: Deep Bengal Teal + Warm Terracotta accent
   ========================================================= */

:root{
  --wb-primary: #0F3D3E;      /* deep teal */
  --wb-primary-dark: #092628;
  --wb-primary-light: #14544f;
  --wb-accent: #D98E3B;       /* warm terracotta / gold */
  --wb-accent-dark: #b8721f;
  --wb-bg: #FBF9F4;           /* warm off-white */
  --wb-bg-alt: #F2EFE6;
  --wb-text: #1F2A2C;
  --wb-text-muted: #5C6b6c;
  --wb-border: #E6E1D6;
  --wb-success: #2E8B57;
  --wb-danger: #C4402A;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 10px 30px rgba(15,61,62,0.08);
  --shadow-hover: 0 18px 40px rgba(15,61,62,0.16);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

body{
  font-family: 'Inter', sans-serif;
  color: var(--wb-text);
  background: var(--wb-bg);
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--wb-primary-dark);
}

a { text-decoration: none; color: inherit; transition: color .2s ease; }
img { max-width: 100%; }

.text-accent{ color: var(--wb-accent); }

/* ---------- Buttons ---------- */
.btn-cta{
  background: var(--wb-accent);
  color: #fff !important;
  border: none;
  font-weight: 600;
  padding: .65rem 1.4rem;
  border-radius: var(--radius-sm);
  transition: all .25s ease;
}
.btn-cta:hover{ background: var(--wb-accent-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(217,142,59,.35); }

.btn-outline-cta{
  border: 2px solid var(--wb-primary);
  color: var(--wb-primary) !important;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: .55rem 1.3rem;
  background: transparent;
  transition: all .25s ease;
}
.btn-outline-cta:hover{ background: var(--wb-primary); color: #fff !important; }

.btn-whatsapp{
  background: #25D366;
  color: #fff !important;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
}
.btn-whatsapp:hover{ background: #1ebe57; color: #fff; }

/* ---------- Top bar & navbar ---------- */
.top-bar{
  background: var(--wb-primary-dark);
  color: #cfe3e0;
  font-size: .85rem;
  padding: .45rem 0;
}
.top-bar a{ color: #cfe3e0; margin-left: 1rem; }
.top-bar a:hover{ color: var(--wb-accent); }

.main-navbar{
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
  padding: .7rem 0;
  z-index: 1030;
}
.navbar-brand{ display:flex; align-items:center; gap:.5rem; font-family:'Poppins',sans-serif; }
.brand-icon{ color: var(--wb-accent); font-size: 1.6rem; }
.brand-text{ font-size: 1.4rem; font-weight: 800; color: var(--wb-primary-dark); }
.brand-text small{ font-size: .8rem; font-weight: 500; color: var(--wb-text-muted); }

.main-navbar .nav-link{
  font-weight: 500;
  color: var(--wb-text);
  padding: .5rem 1rem !important;
  position: relative;
}
.main-navbar .nav-link.active,
.main-navbar .nav-link:hover{ color: var(--wb-primary); }
.main-navbar .nav-link.active::after{
  content:''; position:absolute; left:1rem; right:1rem; bottom:0; height:2px; background: var(--wb-accent);
}

/* ---------- Hero ---------- */
.hero-section{ position: relative; color: #fff; padding: 6.5rem 0 5rem; overflow: hidden; }
.hero-bg{ position: absolute; inset:0; z-index: 0; }
.hero-bg img{ width:100%; height:100%; object-fit: cover; }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(120deg, rgba(9,38,40,.92) 10%, rgba(15,61,62,.75) 60%, rgba(15,61,62,.45) 100%); }

.hero-content{ max-width: 780px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  padding:.4rem 1rem; border-radius: 40px; font-size:.82rem; margin-bottom:1.2rem;
}
.hero-content h1{ color:#fff; font-size: 3rem; font-weight:800; line-height:1.15; margin-bottom:1rem; }
.hero-content p{ font-size:1.1rem; color: #E4EEEC; margin-bottom: 2rem; max-width: 600px; }

.search-widget{
  background: #fff; border-radius: var(--radius-lg); padding: 1.4rem;
  box-shadow: var(--shadow-hover); color: var(--wb-text);
}
.search-tabs .nav-link{
  border-radius: 40px; font-weight:600; color: var(--wb-text-muted); padding:.4rem 1.4rem; background:var(--wb-bg-alt);
  margin-right:.5rem;
}
.search-tabs .nav-link.active{ background: var(--wb-primary); color:#fff; }
.search-widget .form-label{ font-size:.78rem; font-weight:600; color: var(--wb-text-muted); margin-bottom:.25rem; }
.search-widget .form-select, .search-widget .form-control{ border-radius: var(--radius-sm); border:1px solid var(--wb-border); padding:.6rem .8rem; }

.hero-tags{ margin-top:1.5rem; font-size:.9rem; color:#cfe3e0; }
.hero-tags span{ margin-right:.5rem; }
.hero-tags a{ color:#fff; background: rgba(255,255,255,.14); padding:.3rem .8rem; border-radius:30px; margin-right:.5rem; display:inline-block; margin-bottom:.4rem; }
.hero-tags a:hover{ background: var(--wb-accent); }

/* ---------- Stats strip ---------- */
.stats-strip{ background: var(--wb-primary); color:#fff; padding: 2.5rem 0; }
.stat-box i{ font-size:1.8rem; color: var(--wb-accent); }
.stat-box h3{ color:#fff; font-size:2rem; margin:.4rem 0 0; }
.stat-box p{ color:#cfe3e0; margin:0; font-size:.9rem; }

/* ---------- Sections generic ---------- */
.section{ padding: 4.5rem 0; }
.bg-light-section{ background: var(--wb-bg-alt); }
.section-heading{ margin-bottom: 2.2rem; }
.section-eyebrow{
  display:inline-block; color: var(--wb-accent); font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; font-size:.8rem; margin-bottom:.4rem;
}
.section-heading h2{ font-size:2rem; margin-bottom:.5rem; }
.section-heading p{ color: var(--wb-text-muted); max-width:640px; }

/* ---------- Category cards ---------- */
.category-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  background:#fff; border:1px solid var(--wb-border); border-radius: var(--radius-md);
  padding: 1.6rem 1rem; text-align:center; height:100%; transition: all .25s ease;
}
.category-card i{ font-size:1.9rem; color: var(--wb-primary); }
.category-card span{ font-weight:600; font-size:.9rem; color: var(--wb-text); }
.category-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--wb-accent); }
.category-card:hover i{ color: var(--wb-accent); }

/* ---------- Property card ---------- */
.property-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-soft); height:100%; display:flex; flex-direction:column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.property-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.property-card-img{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.property-card-img img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.property-card:hover .property-card-img img{ transform: scale(1.08); }

.prop-badge{
  position:absolute; top:.8rem; left:.8rem; padding:.3rem .8rem; border-radius:30px;
  font-size:.72rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.03em;
}
.badge-sale{ background: var(--wb-primary); }
.badge-rent{ background: var(--wb-accent); }
.prop-type-badge{
  position:absolute; bottom:.8rem; left:.8rem; background: rgba(0,0,0,.55); color:#fff;
  padding:.25rem .7rem; border-radius:30px; font-size:.72rem;
}

.property-card-body{ padding: 1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.property-price{ font-family:'Poppins',sans-serif; font-weight:800; font-size:1.2rem; color: var(--wb-primary); }
.property-title{ font-size:1rem; margin:.3rem 0; line-height:1.35; }
.property-title a{ color: var(--wb-text); }
.property-title a:hover{ color: var(--wb-accent); }
.property-location{ color: var(--wb-text-muted); font-size:.85rem; margin-bottom:.6rem; }
.property-meta{ list-style:none; display:flex; gap:1rem; padding:0; margin:0 0 .6rem; flex-wrap:wrap; }
.property-meta li{ font-size:.82rem; color: var(--wb-text-muted); }
.property-meta i{ color: var(--wb-primary); margin-right:.25rem; }

/* ---------- City cards ---------- */
.city-card{ position:relative; display:block; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 7/5; }
.city-card img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.city-card:hover img{ transform: scale(1.1); }
.city-card-overlay{
  position:absolute; inset:0; background: linear-gradient(0deg, rgba(9,38,40,.85) 0%, rgba(9,38,40,.05) 55%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1rem 1.2rem; color:#fff;
}
.city-card-overlay h4{ color:#fff; margin:0; font-size:1.2rem; }
.city-card-overlay span{ font-size:.82rem; color:#e6dfce; }

/* ---------- Why us ---------- */
.why-us-img img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.feature-item{ display:flex; gap:.9rem; align-items:flex-start; }
.feature-item i{ font-size:1.4rem; color: var(--wb-accent); margin-top:.2rem; }
.feature-item h6{ margin-bottom:.15rem; }
.feature-item p{ color: var(--wb-text-muted); font-size:.88rem; margin:0; }

/* ---------- How it works ---------- */
.step-card{
  background:#fff; border-radius: var(--radius-md); padding: 1.8rem 1.2rem; text-align:center;
  box-shadow: var(--shadow-soft); position:relative; height:100%;
}
.step-number{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: var(--wb-primary); color:#fff; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}
.step-card i{ font-size:2rem; color: var(--wb-accent); margin: .8rem 0 .6rem; display:block; }
.step-card h6{ margin-bottom:.3rem; }
.step-card p{ color: var(--wb-text-muted); font-size:.85rem; margin:0; }

/* ---------- Requirement CTA ---------- */
.requirement-cta{ position:relative; padding: 5rem 0; color:#fff; text-align:center; overflow:hidden; }
.requirement-bg{ position:absolute; inset:0; }
.requirement-bg img{ width:100%; height:100%; object-fit:cover; }
.requirement-overlay{ position:absolute; inset:0; background: rgba(9,38,40,.82); }
.requirement-cta h2{ color:#fff; font-size:2.2rem; max-width:700px; margin:0 auto 1rem; }
.requirement-cta p{ color:#dce9e7; max-width:600px; margin:0 auto 1.8rem; }

/* ---------- Testimonials ---------- */
.testimonial-card{
  max-width:700px; background:#fff; border-radius: var(--radius-lg); padding:2.5rem;
  text-align:center; box-shadow: var(--shadow-soft); position:relative;
}
.quote-icon{ font-size:2.2rem; color: var(--wb-accent); opacity:.5; }
.testimonial-card p{ font-size:1.1rem; color: var(--wb-text); font-style:italic; margin: 1rem 0 1.5rem; }
.testimonial-user{ display:flex; align-items:center; justify-content:center; gap:.8rem; }
.testimonial-user img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.testimonial-user h6{ margin:0; }
.testimonial-user span{ font-size:.82rem; color: var(--wb-text-muted); }
.carousel-control-prev, .carousel-control-next{ width:5%; filter: invert(0.5); }
.carousel-control-prev-icon, .carousel-control-next-icon{ background-color: var(--wb-primary); border-radius:50%; padding:.9rem; }

/* ---------- Insight / blog cards ---------- */
.insight-card{ background:#fff; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-soft); height:100%; }
.insight-img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.insight-img img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.insight-card:hover .insight-img img{ transform: scale(1.08); }
.insight-tag{ position:absolute; top:.8rem; left:.8rem; background: var(--wb-accent); color:#fff; font-size:.72rem; padding:.25rem .7rem; border-radius:30px; }
.insight-body{ padding:1.2rem; }
.insight-body h5{ font-size:1.02rem; line-height:1.4; margin-bottom:.7rem; }
.insight-link{ color: var(--wb-primary); font-weight:600; font-size:.88rem; }
.insight-link:hover{ color: var(--wb-accent); }

/* ---------- FAQ ---------- */
.faq-section .accordion-item{ border:1px solid var(--wb-border); border-radius: var(--radius-sm) !important; margin-bottom:.8rem; overflow:hidden; }
.faq-section .accordion-button{ font-weight:600; background:#fff; }
.faq-section .accordion-button:not(.collapsed){ background: var(--wb-bg-alt); color: var(--wb-primary); box-shadow:none; }
.faq-section .accordion-button:focus{ box-shadow:none; }

/* ---------- Page header (inner pages) ---------- */
.page-header{ position:relative; padding: 5.5rem 0 3rem; color:#fff; overflow:hidden; }
.page-header-sm{ padding: 4rem 0 2.5rem; }
.page-header-bg{ position:absolute; inset:0; }
.page-header-bg img{ width:100%; height:100%; object-fit:cover; }
.page-header-overlay{ position:absolute; inset:0; background: rgba(9,38,40,.78); }
.page-header h1{ color:#fff; font-size:2.2rem; margin-bottom:.4rem; }
.page-header p{ color:#dce9e7; margin:0; }

.breadcrumb-bar{ background: var(--wb-bg-alt); padding:.7rem 0; font-size:.85rem; }
.breadcrumb-item a{ color: var(--wb-primary); }
.breadcrumb-item.active{ color: var(--wb-text-muted); }

/* ---------- Filter panel ---------- */
.filter-panel{ background:#fff; border:1px solid var(--wb-border); border-radius: var(--radius-md); padding:1.4rem; position:sticky; top:100px; }
.filter-title{ display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; font-size:1rem; }
.sidebar-cta{ background: var(--wb-primary); color:#fff; border-radius: var(--radius-md); padding:1.4rem; text-align:center; margin-top:1.2rem; }
.sidebar-cta i{ font-size:1.6rem; color: var(--wb-accent); }
.sidebar-cta h6{ color:#fff; margin: .5rem 0 .3rem; }
.sidebar-cta p{ color:#cfe3e0; font-size:.85rem; margin-bottom:1rem; }

.no-results i{ color: var(--wb-border); }

.pagination .page-link{ color: var(--wb-primary); }
.pagination .active .page-link{ background: var(--wb-primary); border-color: var(--wb-primary); }

/* ---------- Property detail page ---------- */
.detail-gallery .carousel-item img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.gallery-thumbs{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.3rem; }
.gallery-thumbs img{ width:90px; height:60px; object-fit:cover; border-radius: var(--radius-sm); cursor:pointer; opacity:.6; flex-shrink:0; border:2px solid transparent; }
.gallery-thumbs img.active, .gallery-thumbs img:hover{ opacity:1; border-color: var(--wb-accent); }

.detail-header{ margin: 1.6rem 0 1rem; }
.detail-header h1{ font-size:1.7rem; margin: .5rem 0 .3rem; }
.detail-price{ font-family:'Poppins',sans-serif; font-size:1.7rem; font-weight:800; color: var(--wb-primary); margin-top:.5rem; }
.detail-price span{ font-size:.9rem; color: var(--wb-text-muted); font-weight:500; }

.key-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; background:#fff; border:1px solid var(--wb-border); border-radius: var(--radius-md); padding:1.2rem; margin-bottom:1.8rem; }
.fact-box{ display:flex; align-items:center; gap:.6rem; }
.fact-box i{ font-size:1.3rem; color: var(--wb-accent); }
.fact-box span{ display:block; font-size:.75rem; color: var(--wb-text-muted); }
.fact-box strong{ font-size:.92rem; }

.detail-block{ margin-bottom:2rem; }
.detail-block h4{ margin-bottom:.8rem; font-size:1.2rem; }
.detail-block p{ color: var(--wb-text-muted); line-height:1.7; }

.amenities-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.6rem 1rem; }
.amenities-grid span{ font-size:.9rem; color: var(--wb-text); }
.amenities-grid i{ color: var(--wb-success); margin-right:.4rem; }

.info-table .info-row{ display:flex; justify-content:space-between; border-bottom:1px dashed var(--wb-border); padding:.6rem 0; }
.info-row span{ color: var(--wb-text-muted); font-size:.88rem; }
.info-row strong{ font-size:.9rem; }

.distance-box{ background:#fff; border:1px solid var(--wb-border); border-radius: var(--radius-sm); padding:1rem; text-align:center; }
.distance-box i{ font-size:1.3rem; color: var(--wb-primary); }
.distance-box span{ display:block; font-size:.78rem; color: var(--wb-text-muted); margin: .3rem 0 .1rem; }

.contact-card{ background:#fff; border:1px solid var(--wb-border); border-radius: var(--radius-md); padding:1.5rem; position:sticky; top:100px; }
.agent-info{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
.agent-avatar{ width:52px; height:52px; border-radius:50%; background: var(--wb-bg-alt); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color: var(--wb-primary); }
.agent-info h6{ margin:0; }
.agent-info span{ font-size:.8rem; color: var(--wb-text-muted); }

.safety-tip-card{ background: var(--wb-bg-alt); border-radius: var(--radius-md); padding:1.2rem; text-align:center; }
.safety-tip-card i{ font-size:1.5rem; color: var(--wb-accent); }
.safety-tip-card h6{ margin:.4rem 0 .3rem; }
.safety-tip-card p{ font-size:.82rem; color: var(--wb-text-muted); margin:0; }

/* ---------- Requirement form / contact ---------- */
.requirement-form-card{ background:#fff; border:1px solid var(--wb-border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-soft); }
.contact-info-card{ background:#fff; border:1px solid var(--wb-border); border-radius: var(--radius-md); padding:1.6rem; text-align:center; height:100%; }
.contact-info-card i{ font-size:1.7rem; color: var(--wb-accent); margin-bottom:.5rem; display:block; }
.office-hours ul{ list-style:none; padding:0; margin:.6rem 0 0; }
.office-hours li{ display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px dashed var(--wb-border); font-size:.9rem; }

/* ---------- About page ---------- */
.value-card{ background:#fff; border:1px solid var(--wb-border); border-radius: var(--radius-md); padding:1.8rem; text-align:center; height:100%; }
.value-card i{ font-size:1.9rem; color: var(--wb-accent); }
.team-card{ text-align:center; }
.team-card img{ width:120px; height:120px; border-radius:50%; object-fit:cover; margin-bottom:.7rem; box-shadow: var(--shadow-soft); }
.team-card h6{ margin:0; }
.team-card span{ font-size:.82rem; color: var(--wb-text-muted); }

/* ---------- Legal pages ---------- */
.legal-content{ max-width: 820px; }
.legal-content h4{ margin-top:1.8rem; }
.legal-content p{ color: var(--wb-text-muted); line-height:1.75; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--wb-primary-dark); color:#cfe3e0; margin-top: 0; }
.footer-cta{ background: var(--wb-primary); padding:2.5rem 0; color:#fff; }
.footer-cta h3{ color:#fff; margin-bottom:.4rem; }
.footer-main{ padding: 3.5rem 0 2rem; }
.footer-brand{ font-family:'Poppins',sans-serif; font-size:1.4rem; font-weight:800; color:#fff; }
.footer-brand i{ color: var(--wb-accent); margin-right:.4rem; }
.footer-heading{ color:#fff; font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:1rem; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:.6rem; }
.footer-links a{ color:#b9cfcc; font-size:.9rem; }
.footer-links a:hover{ color: var(--wb-accent); }
.footer-contact{ list-style:none; padding:0; margin:0 0 1rem; }
.footer-contact li{ display:flex; gap:.6rem; margin-bottom:.7rem; font-size:.88rem; color:#b9cfcc; align-items:flex-start; }
.footer-contact i{ color: var(--wb-accent); margin-top:.15rem; }
.social-icons a{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; background: rgba(255,255,255,.08); color:#fff; margin-right:.5rem;
}
.social-icons a:hover{ background: var(--wb-accent); }
.newsletter-form .form-control{ border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.newsletter-form .btn{ border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding: 1.1rem 0; font-size:.82rem; }
.footer-bottom a{ color:#cfe3e0; }
.footer-bottom a:hover{ color: var(--wb-accent); }

/* ---------- Floating buttons ---------- */
.back-to-top{
  position: fixed; bottom: 90px; right: 24px; width:44px; height:44px; border-radius:50%;
  background: var(--wb-primary); color:#fff; border:none; display:none; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft); z-index:999; font-size:1.1rem;
}
.back-to-top.show{ display:flex; }
.whatsapp-float{
  position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow: 0 8px 20px rgba(37,211,102,.4); z-index:999;
}
.whatsapp-float:hover{ color:#fff; transform: scale(1.08); }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991px){
  .hero-content h1{ font-size:2.2rem; }
  .key-facts{ grid-template-columns:repeat(2,1fr); }
  .filter-panel, .contact-card{ position:static; }
}
@media (max-width: 575px){
  .key-facts{ grid-template-columns:1fr 1fr; }
  .hero-content h1{ font-size:1.8rem; }
  .section{ padding:3rem 0; }
}