/* style.css — DAMAC Landing v3.3 */

:root{
  --brand-green:#0e7a56;
  --brand-green-dark:#0b5c41;
  --brand-green-700:#0a6b4a;

  --beige:#f3ead7;
  --offwhite:#f7f6f1;

  --shadow-a: 0 6px 18px rgba(0,0,0,.06);
  --shadow-b: 0 12px 28px rgba(0,0,0,.12);
}

html, body{
  font-family: "Anek Latin", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:#111;
  background:#fff;
}

h1, h2, h3, .section-heading, .hero-line, .cat-title, .prop-title,
.btn, .btn-theme, .btn-theme-outline, .btn-white {
  font-family:"Begum","Anek Latin",sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
}

a{ text-decoration:none; }

/* Buttons */
.btn-theme{
  background:var(--brand-green);
  color:#fff !important;
  border:none;
  font-weight:800;
  border-radius:.75rem;
  padding:.75rem 1.2rem;
}

.btn-theme1{
  margin-top: 3rem;
}

.btn-theme:hover{ background:var(--brand-green-dark); color:#fff !important; }

.btn-theme-outline{
  border:2px solid var(--brand-green);
  color:var(--brand-green) !important;
  background:transparent;
  font-weight:800;
  border-radius:.75rem;
  padding:.65rem 1.1rem;
}
.btn-theme-outline:hover{ background:var(--brand-green); color:#fff !important; }

.btn-white{
  border:2px solid #fff;
  background:#fff;
  color:var(--brand-green);
  font-weight:800;
  border-radius:.75rem;
  padding:.65rem 1.1rem;
}
.btn-white:hover{
  background:#f3f3f3;
  color:var(--brand-green-dark);
}

/* ===================== HERO ===================== */
.hero-section{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background-image: url('images/main-header.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Mobile-specific hero background (800x1200) */
@media (max-width: 767.98px){
  .hero-section{
    background-image: url('images/main-header-mobile.jpg');
    background-size: cover;
    background-position: center;
  }
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 100%);
}
.hero-copy{ color:#fff; text-align:left; }
.hero-line{
  margin:0 0 .45rem 0;
  font-weight:800;
  line-height:1.15;
  font-size: clamp(1rem, 1.55rem + 1.4vw, 2.1rem);
  /* NEW: subtle drop shadow for legibility */
  text-shadow: 0 2px 8px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.35);
}
.hero-line-spaced{ margin-top: .9rem; } /* extra spacing between hero lines */

/* Reduce font size by 50% on mobile */
@media (max-width: 576px) {
  .hero-line {
    font-size: 150%;
  }
}

/* ===================== SECTION 2 ===================== */
.section-green{
  background: var(--brand-green-700);
  padding: clamp(2.75rem, 6vw, 5rem) 0;
  color:#fff;
}
.section-heading{ color:#fff; font-weight:800; margin-bottom:.35rem; }
.val-card{
  background: rgba(255,255,255, .08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:1rem;
  backdrop-filter: blur(2px);
  padding:1rem .9rem;
  text-align:center;
  height:100%;
}
.val-top{ font-weight:800; font-size:clamp(1rem, .7rem + 1.2vw, 1.25rem); }
.val-bottom{ color:#e8f5ef; font-weight:600; margin-top:.25rem; }

/* ===================== SECTION 3 ===================== */
.section-cats{
  padding: clamp(3rem, 6vw, 5rem) 0;
  background:#fff;
}
.section-cats h2{ color:var(--brand-green); font-weight:800; }
.cat-card{
  display:block;
  border:1px solid rgba(0,0,0,.06);
  border-radius:1rem;
  overflow:hidden;
  color:inherit;
  background:#fff;
  box-shadow:var(--shadow-a);
  transition: transform .2s ease, box-shadow .2s ease;
  height:100%;
}
.cat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-b); }
.cat-media{ width:100%; aspect-ratio: 350 / 265; background:#ececec; }
.cat-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-body{ padding:.85rem .95rem 1.05rem; }
.cat-title{ font-weight:800; }
.cat-sub{ color:#333; font-weight:700; }

/* ===================== SECTION 4 ===================== */
.section-beige{
  background:var(--beige);
  color:#111;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.section-beige h2{ font-weight:800; color:#000; }
.section-beige p{ max-width:900px; margin-inline:auto; }
.stat-card{
  background:var(--offwhite);
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  height:100%;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
}
.stat-icon{ width:42px;height:42px; display:inline-grid;place-items:center; margin-bottom:.6rem; }
.stat-icon svg{ width:100%; height:100%; fill:#000; }
.stat-number{ font-weight:800; font-size:clamp(1.15rem, .9rem + 1.1vw, 1.6rem); line-height:1.1; }
.stat-label{ color:#444; font-weight:600; }
.stat-footnote{ font-size:.75rem; color:#666; margin-top:.5rem; }

/* ===================== SECTION 5 ===================== */
.properties-section{
  padding: clamp(3rem, 6vw, 5rem) 0;
  background:#fff;
}
.properties-section h2{ color:var(--brand-green); font-weight:800; }
.properties-section p.lead{ max-width: 980px; }

.prop-card{
  border:1px solid rgba(0,0,0,.06);
  border-radius:1rem;
  overflow:hidden;
  background:#fff;
  height:100%;
  box-shadow:var(--shadow-a);
  transition:transform .25s ease, box-shadow .25s ease;
}
.prop-card:hover{ transform: translateY(-3px); box-shadow:var(--shadow-b); }
.prop-media{ width:100%; aspect-ratio: 345 / 197; background:#eaeaea; }
.prop-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.prop-body{ padding: .9rem .95rem 1.1rem; }
.prop-title{ font-weight:800; margin-bottom:.35rem; }
.prop-loc{ display:flex; align-items:flex-start; gap:.45rem; color:#333; font-weight:600; margin-bottom:.4rem; }
.prop-loc svg{ width:18px; height:18px; flex:0 0 18px; fill:#000; opacity:.9; margin-top:.12rem; }
.prop-price{ font-weight:800; color:#111; margin-bottom:.6rem; }

/* Force single card per row on mobile */
@media (max-width: 767.98px){
  .properties-section .col-12.col-md-3 { flex: 0 0 100%; max-width:100%; }
}

/* ===================== SECTION 6 ===================== */
.section-invest{
  padding: clamp(3rem, 6vw, 5rem) 0;
  background:#fff;
}
.section-invest h2{ color:var(--brand-green); font-weight:800; }
.invest-card{
  border:1px solid rgba(0,0,0,.06);
  border-radius:1rem;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-a);
  height:100%;
}
.invest-media{ width:100%; aspect-ratio: 4 / 3; background:#eee; }
.invest-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.invest-body{ padding: .9rem .95rem 1.1rem; }
.invest-body h5{ font-family:"Begum","Anek Latin",sans-serif; font-weight:800; text-transform:uppercase; color:#111; }
.invest-body p{ margin:0; }

/* ===================== BOTTOM FORM ===================== */
.section-bottom-form{
  padding: clamp(3rem, 6vw, 5rem) 0;
  background:#f9fbfa;
}
/* Add left/right margin on mobile */
@media (max-width: 576px) {
  .lead-form {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

.section-bottom-form h2{ color:var(--brand-green); font-weight:800; }

/* Darker radio circles */
.form-check-input.form-check-input-dark{ border-color:#222; }
.form-check-input.form-check-input-dark:checked{ background-color:#111; border-color:#111; }

/* ===================== MODALS ===================== */
.form-modal{
  border-radius:1rem;
  border:1px solid rgba(0,0,0,.08);
}
.form-modal .modal-title{
  font-family:"Begum","Anek Latin",sans-serif;
  text-transform:uppercase;
  font-weight:800;
  color:var(--brand-green);
}
.form-label{ font-weight:700; }

.success-modal{
  border-radius:1rem;
  border:1px solid rgba(0,0,0,.08);
}
.success-modal .modal-title{
  font-family:"Begum","Anek Latin",sans-serif;
  text-transform:uppercase;
  font-weight:800;
  color:var(--brand-green);
}

/* ===================== FLOATING CONTACTS (TEXT BUTTONS) ===================== */
.floating-contacts{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1050;
}
.float-btn{
  min-width: 140px;
  height: 48px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 16px;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
}
.float-btn.whatsapp{ background:#25D366; color:#fff; }
.float-btn.email{ background:#0e7a56; color:#fff; }
.float-btn:hover{ filter:brightness(.95); }