/* Ezz El Arab Rent — Main Stylesheet */
/* ========================================= */

    :root {
      --navy: #0d2240;
      --navy-light: #163459;
      --teal: #1a8a8a;
      --teal-light: #22b5b5;
      --sand: #f4ede0;
      --sand-dark: #e8d9c0;
      --gold: #c9a84c;
      --gold-dark: #a8872e;
      --gold-light: #e4c97a;
      --white: #ffffff;
      --text-dark: #0d2240;
      --text-muted: #6b7a90;
      --radius: 14px;
      --shadow: 0 8px 40px rgba(13,34,64,0.12);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: #f7f4ef;
      color: var(--text-dark);
      overflow-x: hidden;
    }

    /* ── RTL SUPPORT ── */
    [dir="rtl"] body { font-family: 'Noto Sans Arabic', 'DM Sans', sans-serif; }
    [dir="rtl"] .section-title,
    [dir="rtl"] .offer-name,
    [dir="rtl"] .prop-name,
    [dir="rtl"] .testi-name,
    [dir="rtl"] .how-title,
    [dir="rtl"] .why-title,
    [dir="rtl"] .newsletter-title { font-family: 'Noto Sans Arabic', sans-serif; }

    /* Navbar */
    [dir="rtl"] .navbar-nav { margin-left: 0 !important; margin-right: auto !important; }
    [dir="rtl"] .navbar-brand { margin-right: 0; margin-left: 1rem; }

    /* Hero */
    [dir="rtl"] .hero-content { text-align: center; }
    [dir="rtl"] .search-fields { flex-direction: row-reverse; flex-wrap: wrap; }
    [dir="rtl"] .field-input i:first-child { left: auto; right: 12px; }
    [dir="rtl"] .field-input select,
    [dir="rtl"] .field-input input { padding: 10px 40px 10px 12px; text-align: right; }
    [dir="rtl"] .field-input .dropdown-arrow { right: auto; left: 12px; }
    [dir="rtl"] .prop-type-filter { flex-direction: row-reverse; flex-wrap: wrap; gap: 8px; }
    [dir="rtl"] .prop-type-label { margin-right: 0; margin-left: 12px; }

    /* Areas */
    [dir="rtl"] .area-badge { right: auto; left: 12px; }
    [dir="rtl"] .areas-nav { flex-direction: row-reverse; }

    /* Offers */
    [dir="rtl"] .offer-discount-badge { left: auto; right: 16px; }
    [dir="rtl"] .offer-tag,
    [dir="rtl"] .offer-feats,
    [dir="rtl"] .offer-footer { flex-direction: row-reverse; }
    [dir="rtl"] .offer-footer .btn-book { margin-left: 0; margin-right: auto; }

    /* Properties */
    [dir="rtl"] .prop-type-badge { left: auto; right: 12px; }
    [dir="rtl"] .prop-wishlist { right: auto; left: 12px; }
    [dir="rtl"] .prop-photo-count { right: auto; left: 12px; bottom: 12px; }
    [dir="rtl"] .prop-area,
    [dir="rtl"] .prop-feats,
    [dir="rtl"] .prop-footer { flex-direction: row-reverse; }
    [dir="rtl"] .filter-chips { flex-direction: row-reverse; flex-wrap: wrap; }

    /* Testimonials */
    [dir="rtl"] .testi-footer { flex-direction: row-reverse; }
    [dir="rtl"] .testi-loc { flex-direction: row-reverse; }
    [dir="rtl"] .testi-stars { margin-left: 0 !important; margin-right: auto !important; }
    [dir="rtl"] .testi-property { flex-direction: row-reverse; }
    [dir="rtl"] .testi-fade-left { background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.95)); left: auto; right: 0; }
    [dir="rtl"] .testi-fade-right { background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.95)); right: auto; left: 0; }

    /* How it works */
    [dir="rtl"] .step-arrow { transform: scaleX(-1); }

    /* Footer */
    [dir="rtl"] .footer-contact div { display: flex; flex-direction: row-reverse; gap: 8px; align-items: flex-start; }
    [dir="rtl"] .footer-links { padding-right: 0; padding-left: 0; }
    [dir="rtl"] .social-links { flex-direction: row-reverse; }
    [dir="rtl"] .footer-bottom { flex-direction: row-reverse; }
    [dir="rtl"] .offset-lg-1 { margin-left: 0; margin-right: 8.333333%; }

    /* Back to top */
    [dir="rtl"] .back-to-top { right: auto; left: 24px; }

    /* Misc utilities */
    [dir="rtl"] .section-eyebrow { flex-direction: row-reverse; }
    [dir="rtl"] .title-line { margin-right: 0; }
    [dir="rtl"] .newsletter-form-wrap { padding-left: 0; padding-right: 20px; }
    [dir="rtl"] .offers-scroll-hint { flex-direction: row-reverse; }
    [dir="rtl"] .d-flex:not(.testi-card):not(.why-card):not(.how-step):not(.search-card):not(.newsletter-card) { gap: inherit; }

    /* ── TOP BAR ── */
    .top-bar {
      background: var(--navy-light);
      border-bottom: 1px solid rgba(255,255,255,0.07);
      padding: 7px 0;
      position: sticky;
      top: 0;
      z-index: 1001;
    }
    .top-bar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .top-bar-left {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 0.75rem;
      color: rgba(255,255,255,0.55);
    }
    .top-bar-left i { color: var(--gold); font-size: 0.7rem; }
    .top-bar-sep {
      width: 1px; height: 12px;
      background: rgba(255,255,255,0.15);
      display: inline-block;
    }
    @media (max-width: 575px) {
      .top-bar-left span:last-child { display: none; }
      .top-bar-sep { display: none; }
    }
    .top-bar-right { display: flex; align-items: center; gap: 12px; }

    /* Language Switcher */
    .lang-switcher {
      display: flex;
      align-items: center;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 20px;
      padding: 2px;
      gap: 1px;
    }
    .lang-btn {
      background: none;
      border: none;
      border-radius: 16px;
      padding: 4px 12px;
      font-size: 0.75rem;
      font-weight: 600;
      font-family: 'DM Sans', sans-serif;
      color: rgba(255,255,255,0.55);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.22s;
      white-space: nowrap;
      letter-spacing: 0.02em;
      text-decoration: none;
    }
    .lang-btn .lang-flag { font-size: 0.9rem; line-height: 1; }
    .lang-btn.active {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--navy);
      box-shadow: 0 2px 8px rgba(201,168,76,0.35);
    }
    .lang-btn:not(.active):hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); }
    .lang-divider {
      width: 1px; height: 14px;
      background: rgba(255,255,255,0.15);
      flex-shrink: 0;
    }

    /* ── NAVBAR ── */
    .navbar-custom {
      background: var(--navy);
      padding: 0.9rem 0;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 20px rgba(0,0,0,0.25);
    }
    .navbar-custom .container {
      position: relative;
    }
    .navbar-custom .navbar-brand img { height: 48px; width: auto; display: block; }
    .navbar-custom .nav-link {
      color: rgba(255,255,255,0.82) !important;
      font-size: 0.88rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 0.4rem 0.9rem !important;
      transition: color 0.2s;
    }
    .navbar-custom .nav-link:hover { color: var(--gold-light) !important; }
    .navbar-custom .btn-register {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--navy) !important;
      border-radius: 8px;
      padding: 0.4rem 1.1rem !important;
      font-weight: 700;
      transition: all 0.2s;
      box-shadow: 0 2px 10px rgba(201,168,76,0.35);
    }
    .navbar-custom .btn-register:hover {
      background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
      box-shadow: 0 4px 16px rgba(201,168,76,0.5);
    }
    .navbar-custom .phone-badge {
      color: rgba(255,255,255,0.6);
      font-size: 0.8rem;
      display: flex; align-items: center; gap: 5px;
    }

    /* ── Mobile navbar: Login/Register centered + Arabic right ── */
    .mob-auth-center {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .mob-auth-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.6rem;
      padding: 0;
      width: 100%;
      background: var(--navy);
    }
    .mob-login, .mob-register {
      text-decoration: none;
      padding: 0.3rem 0.65rem;
      border-radius: 7px;
      font-size: 0.8rem;
      font-weight: 600;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .mob-login {
      color: rgba(255,255,255,0.85);
      border: 1px solid rgba(255,255,255,0.3);
    }
    .mob-login:hover { background: rgba(255,255,255,0.1); color: #fff; }
    .mob-register {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--navy) !important;
      box-shadow: 0 2px 8px rgba(201,168,76,0.4);
    }
    .mob-register:hover { box-shadow: 0 3px 14px rgba(201,168,76,0.6); }
    .mob-ar-lang {
      display: flex;
      align-items: center;
      gap: 4px;
      text-decoration: none;
      color: rgba(255,255,255,0.85);
      font-size: 0.78rem;
      font-weight: 600;
      padding: 0.28rem 0.65rem;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.25);
      background: rgba(255,255,255,0.07);
      white-space: nowrap;
      transition: all 0.2s;
      letter-spacing: 0.02em;
    }
    .mob-ar-lang:hover { background: rgba(255,255,255,0.14); color: #fff; }

    /* ══════════════════════════════════════════
       BEACH ANIMATIONS
    ══════════════════════════════════════════ */

    /* ── Animated waves ── */
    @keyframes wave1 {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes wave2 {
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }
    @keyframes wave3 {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .hero-wave-layer {
      position: absolute;
      bottom: 0; left: 0;
      width: 200%;
      height: 140px;
      pointer-events: none;
      z-index: 1;
    }
    .hero-wave-layer.w1 {
      animation: wave1 9s linear infinite;
      opacity: 0.9;
    }
    .hero-wave-layer.w2 {
      animation: wave2 7s linear infinite;
      opacity: 0.6;
      bottom: 8px;
    }
    .hero-wave-layer.w3 {
      animation: wave3 5s linear infinite;
      opacity: 0.35;
      bottom: 18px;
    }

    /* ── Sun rays ── */
    @keyframes sunSpin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes sunPulse {
      0%, 100% { opacity: 0.25; transform: scale(1); }
      50%       { opacity: 0.4;  transform: scale(1.08); }
    }
    .hero-sun {
      position: absolute;
      top: 32px; right: 90px;
      width: 110px; height: 110px;
      pointer-events: none;
      z-index: 1;
    }
    .hero-sun-core {
      position: absolute;
      inset: 22px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,220,80,0.7) 0%, rgba(255,180,30,0.4) 60%, transparent 100%);
      animation: sunPulse 3s ease-in-out infinite;
    }
    .hero-sun-rays {
      position: absolute;
      inset: 0;
      animation: sunSpin 18s linear infinite;
    }

    /* ── Beach umbrellas ── */
    @keyframes umbrellaFloat {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50%       { transform: translateY(-8px) rotate(2deg); }
    }
    @keyframes umbrellaSway1 {
      0%, 100% { transform: translateY(0) rotate(-3deg); }
      50%       { transform: translateY(-6px) rotate(3deg); }
    }
    @keyframes umbrellaSway2 {
      0%, 100% { transform: translateY(-4px) rotate(2deg); }
      50%       { transform: translateY(4px) rotate(-2deg); }
    }
    .hero-umbrellas {
      position: absolute;
      bottom: 80px;
      left: 0; right: 0;
      height: 160px;
      pointer-events: none;
      z-index: 2;
    }
    .umbrella {
      position: absolute;
      bottom: 0;
    }
    .umbrella svg {
      filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
    }
    .umbrella-1 { left: 5%;  animation: umbrellaFloat  4s ease-in-out infinite; }
    .umbrella-2 { left: 14%; animation: umbrellaSway1  5s ease-in-out infinite 0.8s; }
    .umbrella-3 { right: 8%; animation: umbrellaSway2  4.5s ease-in-out infinite 0.3s; }
    .umbrella-4 { right: 17%;animation: umbrellaFloat  5.5s ease-in-out infinite 1.2s; }

    /* ── Floating seagulls ── */
    @keyframes gullFly {
      0%   { transform: translateX(-60px) translateY(0);    opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { transform: translateX(calc(100vw + 60px)) translateY(-40px); opacity: 0; }
    }
    @keyframes gullFlap {
      0%, 100% { d: path("M0,0 Q5,-4 10,0 Q5,-2 0,0"); }
      50%       { d: path("M0,0 Q5,2 10,0 Q5,0 0,0"); }
    }
    .hero-seagulls {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      z-index: 2;
      overflow: hidden;
    }
    .gull {
      position: absolute;
    }
    .gull-1 { top: 18%; animation: gullFly 14s linear infinite 1s; }
    .gull-2 { top: 28%; animation: gullFly 18s linear infinite 6s; }
    .gull-3 { top: 12%; animation: gullFly 11s linear infinite 9s; }

    /* ── Floating bubbles/drops ── */
    @keyframes bubbleRise {
      0%   { transform: translateY(0) scale(1);   opacity: 0.6; }
      100% { transform: translateY(-120px) scale(0.3); opacity: 0; }
    }
    .hero-bubbles {
      position: absolute;
      bottom: 100px; left: 0; right: 0;
      height: 120px;
      pointer-events: none;
      z-index: 2;
      overflow: hidden;
    }
    .bubble {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.3);
      animation: bubbleRise linear infinite;
    }
    .bubble:nth-child(1)  { width:8px;  height:8px;  left:10%; animation-duration:4s; animation-delay:0s; }
    .bubble:nth-child(2)  { width:5px;  height:5px;  left:22%; animation-duration:5s; animation-delay:1.2s; }
    .bubble:nth-child(3)  { width:10px; height:10px; left:35%; animation-duration:3.5s; animation-delay:0.5s; }
    .bubble:nth-child(4)  { width:6px;  height:6px;  left:50%; animation-duration:4.5s; animation-delay:2s; }
    .bubble:nth-child(5)  { width:8px;  height:8px;  left:65%; animation-duration:3.8s; animation-delay:0.8s; }
    .bubble:nth-child(6)  { width:4px;  height:4px;  left:78%; animation-duration:5.2s; animation-delay:1.6s; }
    .bubble:nth-child(7)  { width:7px;  height:7px;  left:88%; animation-duration:4.2s; animation-delay:0.3s; }

    /* ── Palm tree sway ── */
    @keyframes palmSway {
      0%, 100% { transform: rotate(-3deg) translateX(0); }
      50%       { transform: rotate(3deg) translateX(4px); }
    }
    .hero-palm {
      position: absolute;
      bottom: 60px;
      pointer-events: none;
      z-index: 2;
      transform-origin: bottom center;
    }
    .hero-palm.palm-left  { left: -10px; animation: palmSway 5s ease-in-out infinite; }
    .hero-palm.palm-right { right: -10px; animation: palmSway 6s ease-in-out infinite 1s; transform: scaleX(-1); transform-origin: bottom right; }

    /* ── Sand particles ── */
    @keyframes sandDrift {
      0%   { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0.5; }
      100% { transform: translateX(80px) translateY(-20px) rotate(180deg); opacity: 0; }
    }
    .hero-sand {
      position: absolute;
      bottom: 90px; left: 0; right: 0;
      height: 60px;
      pointer-events: none;
      z-index: 2;
      overflow: hidden;
    }
    .sand-p {
      position: absolute;
      width: 3px; height: 3px;
      border-radius: 50%;
      background: rgba(201,168,76,0.6);
      animation: sandDrift linear infinite;
    }
    .sand-p:nth-child(1) { left:5%;  bottom:10px; animation-duration:3s;  animation-delay:0s; }
    .sand-p:nth-child(2) { left:18%; bottom:20px; animation-duration:4s;  animation-delay:1s; }
    .sand-p:nth-child(3) { left:33%; bottom:5px;  animation-duration:2.8s;animation-delay:0.5s; }
    .sand-p:nth-child(4) { left:55%; bottom:15px; animation-duration:3.5s;animation-delay:1.5s; }
    .sand-p:nth-child(5) { left:72%; bottom:8px;  animation-duration:2.5s;animation-delay:0.8s; }
    .sand-p:nth-child(6) { left:88%; bottom:18px; animation-duration:4.2s;animation-delay:2s; }

    /* ── Beach ball ── */
    @keyframes ballBounce {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      30%       { transform: translateY(-22px) rotate(60deg); }
      60%       { transform: translateY(-8px) rotate(110deg); }
    }
    @keyframes ballRoll {
      0%   { left: 2%; }
      100% { left: 12%; }
    }
    .hero-ball {
      position: absolute;
      bottom: 90px;
      animation: ballBounce 2.4s ease-in-out infinite, ballRoll 8s linear infinite alternate;
      z-index: 3;
      pointer-events: none;
    }

    /* ── Sparkle stars ── */
    @keyframes sparkle {
      0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
      50%       { opacity: 1; transform: scale(1.2) rotate(180deg); }
    }
    .hero-sparkle {
      position: absolute;
      pointer-events: none;
      z-index: 2;
      animation: sparkle ease-in-out infinite;
    }
    .hero-sparkle:nth-child(1) { top: 20%; left: 15%; animation-duration: 2.1s; animation-delay: 0s; }
    .hero-sparkle:nth-child(2) { top: 35%; left: 80%; animation-duration: 2.8s; animation-delay: 0.6s; }
    .hero-sparkle:nth-child(3) { top: 55%; left: 60%; animation-duration: 1.9s; animation-delay: 1.2s; }
    .hero-sparkle:nth-child(4) { top: 15%; left: 45%; animation-duration: 3.1s; animation-delay: 0.3s; }
    .hero-sparkle:nth-child(5) { top: 70%; left: 25%; animation-duration: 2.4s; animation-delay: 0.9s; }

    /* ── HERO ── */
    .hero {
      position: relative;
      min-height: 620px;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: linear-gradient(135deg, var(--navy) 0%, #0e3a5a 40%, #155f6e 100%);
    }
    .hero-waves {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 120px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23f7f4ef' fill-opacity='1' d='M0,60 C240,100 480,20 720,60 C960,100 1200,20 1440,60 L1440,120 L0,120 Z'/%3E%3C/svg%3E") no-repeat bottom center / cover;
    }
    .hero-dots {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
    }
    .hero-content { position: relative; z-index: 2; padding: 80px 0 160px; }
    .hero-label {
      display: inline-block;
      background: rgba(201,168,76,0.18);
      border: 1px solid rgba(201,168,76,0.5);
      color: var(--gold-light);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 20px;
      margin-bottom: 20px;
    }
    .hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.18;
      margin-bottom: 16px;
    }
    .hero h1 span { color: var(--gold-light); }
    .hero p {
      color: rgba(255,255,255,0.72);
      font-size: 1.05rem;
      max-width: 520px;
      line-height: 1.7;
    }

    /* ── SEARCH CARD ── */
    .search-card {
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 28px 28px 24px;
      position: relative;
      z-index: 10;
      margin-top: -80px;
    }
    
    .search-fields {
      display: grid;
      grid-template-columns: 1.6fr 1.2fr 1.2fr 1.2fr auto;
      gap: 10px;
      align-items: end;
    }
    @media (max-width: 991px) {
      .search-fields { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 575px) {
      .search-fields { grid-template-columns: 1fr; }
      .search-card { padding: 20px 16px; margin-top: -40px; margin-left: 20px; margin-right: 20px; }
    }

    .field-group { display: flex; flex-direction: column; gap: 5px; }
    .field-label {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .field-input {
      position: relative;
    }
    .field-input i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--gold);
      font-size: 1rem;
      pointer-events: none;
    }
    .field-input select,
    .field-input input {
      width: 100%;
      border: 1.5px solid #e2e7ef;
      border-radius: 10px;
      padding: 10px 12px 10px 36px;
      font-size: 0.9rem;
      font-family: 'DM Sans', sans-serif;
      color: var(--text-dark);
      background: #f8fafc;
      appearance: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      outline: none;
    }
    .field-input select:focus,
    .field-input input:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
      background: #fff;
    }
    .field-input .dropdown-arrow {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: #aab;
      font-size: 0.8rem;
    }

    .btn-search {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--navy);
      border: none;
      border-radius: 10px;
      padding: 11px 28px;
      font-size: 0.95rem;
      font-weight: 700;
      font-family: 'DM Sans', sans-serif;
      display: flex; align-items: center; gap: 8px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.25s;
      box-shadow: 0 4px 18px rgba(201,168,76,0.4);
    }
    .btn-search:hover {
      background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
      transform: translateY(-1px);
      box-shadow: 0 6px 24px rgba(201,168,76,0.55);
    }

    /* ── PROPERTY TYPE CHECKBOXES ── */
    .prop-type-filter {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 18px;
      flex-wrap: wrap;
      padding-top: 16px;
      border-top: 1px solid #eef0f5;
    }
    .prop-type-label {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }
    .prop-type-checks {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .type-check {
      cursor: pointer;
      margin: 0;
    }
    .type-check input[type="checkbox"] {
      display: none;
    }
    .type-check-box {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1.5px solid #dde2ea;
      border-radius: 8px;
      padding: 7px 14px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-muted);
      background: #f8fafc;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
      user-select: none;
    }
    .type-check-box i {
      font-size: 0.88rem;
      color: var(--text-muted);
      transition: color 0.2s;
    }
    .type-check:hover .type-check-box {
      border-color: var(--gold);
      color: var(--gold-dark);
    }
    .type-check:hover .type-check-box i {
      color: var(--gold);
    }
    .type-check input:checked + .type-check-box {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      border-color: var(--gold-dark);
      color: var(--navy);
      box-shadow: 0 3px 12px rgba(201,168,76,0.3);
    }
    .type-check input:checked + .type-check-box i {
      color: var(--navy);
    }

    /* ── SECTION TITLES ── */
    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      font-weight: 700;
      color: var(--navy);
    }
    .section-sub {
      color: var(--text-muted);
      font-size: 0.95rem;
      margin-top: 6px;
    }
    .title-line {
      width: 48px; height: 3px;
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
      border-radius: 2px;
      margin-top: 12px;
    }

    /* ── AREAS STRIP ── */
    .areas-section {
      padding: 60px 0 40px;
      background: #ffffff;
      position: relative;
      overflow: hidden;
    }

    /* ── Sea-themed animations for Browse by Area ── */

    /* Floating seawater ripple */
    @keyframes seaRipple {
      0%   { transform: scale(0.8); opacity: 0.12; }
      50%  { transform: scale(1.15); opacity: 0.22; }
      100% { transform: scale(0.8); opacity: 0.12; }
    }
    /* Sun glow pulse */
    @keyframes areasSunGlow {
      0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
      50%       { transform: scale(1.08) rotate(180deg); opacity: 1; }
    }
    /* Shell gentle rock */
    @keyframes shellRock {
      0%, 100% { transform: rotate(-8deg) translateY(0); }
      50%       { transform: rotate(8deg) translateY(-6px); }
    }
    /* Wave drift left */
    @keyframes waveDriftL {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    /* Wave drift right */
    @keyframes waveDriftR {
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }
    /* Bubble float up */
    @keyframes seaBubbleUp {
      0%   { transform: translateY(0) scale(1); opacity: 0.55; }
      80%  { opacity: 0.4; }
      100% { transform: translateY(-80px) scale(0.5); opacity: 0; }
    }
    /* Starfish spin */
    @keyframes starfishSpin {
      0%   { transform: rotate(0deg) scale(1); }
      50%  { transform: rotate(20deg) scale(1.08); }
      100% { transform: rotate(0deg) scale(1); }
    }
    /* Seagull fly */
    @keyframes areasGull {
      0%   { transform: translateX(-60px); opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { transform: translateX(calc(100vw + 60px)); opacity: 0; }
    }
    /* Fish swim */
    @keyframes fishSwim {
      0%   { transform: translateX(120px) scaleX(1); opacity: 0; }
      5%   { opacity: 0.7; }
      48%  { transform: translateX(calc(-100vw - 120px)) scaleX(1); opacity: 0.7; }
      49%  { transform: translateX(calc(-100vw - 120px)) scaleX(-1); opacity: 0; }
      50%  { transform: translateX(calc(-100vw - 120px)) scaleX(-1); opacity: 0; }
      55%  { opacity: 0.7; }
      100% { transform: translateX(120px) scaleX(-1); opacity: 0; }
    }

    /* Shared */
    .areas-sea-deco {
      position: absolute;
      pointer-events: none;
      z-index: 0;
    }

    /* Sun — top right */
    .areas-sun {
      top: 10px; right: 30px;
      width: 90px; height: 90px;
      animation: areasSunGlow 8s ease-in-out infinite;
    }

    /* Animated wave strips — top & bottom */
    .areas-wave-strip {
      position: absolute;
      left: 0;
      width: 200%;
      pointer-events: none;
      z-index: 0;
      height: 32px;
    }
    .areas-wave-strip.awt {
      top: 0;
      animation: waveDriftL 9s linear infinite;
      opacity: 0.5;
    }
    .areas-wave-strip.awb {
      bottom: 0;
      animation: waveDriftR 7s linear infinite;
      opacity: 0.45;
    }

    /* Left side — shell + ripple circles */
    .areas-shell-l {
      left: 18px; top: 30%;
      width: 56px; height: 56px;
      animation: shellRock 4s ease-in-out infinite;
    }
    .areas-ripple-l1 {
      left: -30px; top: 15%;
      width: 130px; height: 130px;
      border-radius: 50%;
      border: 2px solid rgba(26,138,138,0.18);
      animation: seaRipple 5s ease-in-out infinite;
    }
    .areas-ripple-l2 {
      left: -10px; top: 55%;
      width: 80px; height: 80px;
      border-radius: 50%;
      border: 1.5px solid rgba(26,138,138,0.12);
      animation: seaRipple 7s ease-in-out infinite 1.5s;
    }
    .areas-ripple-l3 {
      left: -20px; bottom: 12%;
      width: 110px; height: 110px;
      border-radius: 50%;
      background: rgba(26,138,138,0.04);
      border: 1.5px solid rgba(26,138,138,0.1);
      animation: seaRipple 6s ease-in-out infinite 0.8s;
    }

    /* Right side — starfish + ripple + bubbles */
    .areas-starfish-r {
      right: 14px; top: 25%;
      width: 52px; height: 52px;
      animation: starfishSpin 5s ease-in-out infinite;
    }
    .areas-shell-r {
      right: 20px; bottom: 18%;
      width: 44px; height: 44px;
      animation: shellRock 5s ease-in-out infinite 1s;
    }
    .areas-ripple-r1 {
      right: -35px; top: 10%;
      width: 140px; height: 140px;
      border-radius: 50%;
      border: 2px solid rgba(201,168,76,0.15);
      animation: seaRipple 6s ease-in-out infinite 0.5s;
    }
    .areas-ripple-r2 {
      right: -15px; top: 60%;
      width: 90px; height: 90px;
      border-radius: 50%;
      background: rgba(201,168,76,0.04);
      border: 1.5px solid rgba(201,168,76,0.12);
      animation: seaRipple 5.5s ease-in-out infinite 1.2s;
    }

    /* Rising bubbles left */
    .areas-bubble {
      border-radius: 50%;
      background: rgba(26,138,138,0.12);
      border: 1px solid rgba(26,138,138,0.25);
      animation: seaBubbleUp linear infinite;
    }
    .areas-bubble.ab1 { width:8px;  height:8px;  left:22px; bottom:35%; animation-duration:4s;   animation-delay:0s; }
    .areas-bubble.ab2 { width:5px;  height:5px;  left:38px; bottom:42%; animation-duration:5.5s; animation-delay:1.2s; }
    .areas-bubble.ab3 { width:10px; height:10px; left:12px; bottom:28%; animation-duration:3.8s; animation-delay:0.6s; }

    /* Bubbles right */
    .areas-bubble.ab4 { width:7px;  height:7px;  right:25px; bottom:38%; animation-duration:4.5s; animation-delay:0.3s;  background: rgba(201,168,76,0.12); border-color: rgba(201,168,76,0.25); }
    .areas-bubble.ab5 { width:5px;  height:5px;  right:14px; bottom:50%; animation-duration:5.2s; animation-delay:1.8s;  background: rgba(201,168,76,0.1);  border-color: rgba(201,168,76,0.2); }

    /* Seagull */
    .areas-gull {
      top: 12%;
      animation: areasGull 18s linear infinite 3s;
    }

    /* Fish */
    .areas-fish {
      top: 70%;
      animation: fishSwim 22s linear infinite 8s;
    }

    /* Bottom wave */
    .areas-wave-bottom {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 40px;
      pointer-events: none;
      z-index: 0;
    }
    .areas-section .container { position: relative; z-index: 1; }
    .area-card {
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
      cursor: pointer;
      height: 200px;
      transition: transform 0.3s;
    }
    .area-card:hover { transform: translateY(-4px); }
    .area-card:hover .area-overlay { opacity: 0.55; }
    .area-bg {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.4s;
    }
    .area-card:hover .area-bg { transform: scale(1.06); }
    .area-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(13,34,64,0.85) 0%, rgba(13,34,64,0.2) 100%);
      transition: opacity 0.3s;
    }
    .area-info {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 16px 18px;
    }
    .area-name {
      font-family: 'Playfair Display', serif;
      color: #fff;
      font-size: 1.05rem;
      font-weight: 600;
    }
    .area-count {
      color: rgba(255,255,255,0.75);
      font-size: 0.78rem;
      margin-top: 2px;
    }
    .area-badge {
      position: absolute;
      top: 12px; right: 12px;
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--navy);
      font-size: 0.7rem;
      font-weight: 800;
      padding: 3px 9px;
      border-radius: 12px;
      letter-spacing: 0.03em;
    }

    /* ── OFFERS SECTION ── */
    .offers-section {
      padding: 0 0 60px;
      background: #ffffff;
      position: relative;
    }
    .offers-section::before {
      content: '';
      display: block;
      height: 50px;
    }
    .offers-section .container { position: relative; z-index: 1; }


    .offers-eyebrow {
      display: inline-flex;
      align-items: center;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold-dark);
      margin-bottom: 6px;
    }
    .offers-eyebrow i { color: var(--gold); }

    .offers-scroll-hint {
      font-size: 0.78rem;
      color: var(--text-muted);
      font-weight: 500;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
    }

    /* Track */
    .offers-track-wrap {
      position: relative;
      overflow: hidden;
    }
    .offers-track {
      display: flex;
      gap: 18px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 14px;
      cursor: grab;
      scrollbar-width: none;
      scroll-behavior: auto;
    }
    .offers-track:active { cursor: grabbing; }
    .offers-track::-webkit-scrollbar { display: none; }

    /* Individual slide */
    .offer-slide {
      flex: 0 0 300px;
    }
    @media (max-width: 575px) { .offer-slide { flex: 0 0 260px; } }

    /* Card */
    .offer-card {
      background: #fff;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 4px 22px rgba(13,34,64,0.09);
      position: relative;
      transition: transform 0.3s, box-shadow 0.3s;
      height: 100%;
    }
    .offer-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 40px rgba(13,34,64,0.15);
    }

    /* Card image area */
    .offer-img {
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.2rem;
      color: rgba(255,255,255,0.25);
      position: relative;
    }

    /* Discount badge */
    .offer-discount-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--navy);
      font-size: 0.72rem;
      font-weight: 900;
      padding: 5px 12px;
      border-radius: 20px;
      letter-spacing: 0.05em;
      box-shadow: 0 3px 10px rgba(201,168,76,0.4);
      z-index: 2;
    }
    .offer-discount-badge--hot {
      background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
      color: #fff;
      box-shadow: 0 3px 10px rgba(231,76,60,0.4);
    }

    /* Card body */
    .offer-body {
      padding: 16px 18px 18px;
    }
    .offer-tag {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--gold-dark);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 6px;
    }
    .offer-name {
      font-family: 'Playfair Display', serif;
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--navy);
      line-height: 1.35;
      margin-bottom: 10px;
    }
    .offer-feats {
      display: flex;
      gap: 12px;
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-bottom: 12px;
      flex-wrap: wrap;
    }
    .offer-feats span { display: flex; align-items: center; gap: 4px; }
    .offer-feats i { color: var(--gold); }

    /* Pricing */
    .offer-pricing {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      padding: 10px 12px;
      background: rgba(201,168,76,0.07);
      border: 1px solid rgba(201,168,76,0.18);
      border-radius: 10px;
    }
    .offer-old-price {
      font-size: 0.82rem;
      color: var(--text-muted);
      text-decoration: line-through;
    }
    .offer-old-price span { font-size: 0.7rem; }
    .offer-new-price {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--navy);
    }
    .offer-new-price span { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); }

    /* Footer */
    .offer-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .offer-timer {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-muted);
      display: flex;
      align-items: center;
    }
    .offer-timer i { color: var(--teal); }
    .offer-timer--urgent {
      color: #c0392b;
      animation: pulse-text 1.4s ease-in-out infinite;
    }
    .offer-timer--urgent i { color: #c0392b; }
    @keyframes pulse-text {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }

    /* ── LOAD MORE ── */
    .load-more-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--navy);
      border: none;
      border-radius: 12px;
      padding: 14px 36px;
      font-size: 0.95rem;
      font-weight: 700;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      box-shadow: 0 6px 24px rgba(201,168,76,0.35);
      transition: all 0.25s;
      position: relative;
      overflow: hidden;
    }
    .load-more-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--gold-light), var(--gold));
      opacity: 0;
      transition: opacity 0.25s;
    }
    .load-more-btn:hover::before { opacity: 1; }
    .load-more-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(201,168,76,0.5);
    }
    .load-more-btn:active { transform: translateY(0); }
    .load-more-btn * { position: relative; z-index: 1; }

    .load-more-count {
      background: rgba(13,34,64,0.18);
      border-radius: 20px;
      padding: 2px 10px;
      font-size: 0.8rem;
      font-weight: 700;
      margin-left: 4px;
    }

    /* Spinner */
    .spinner-ring {
      width: 36px; height: 36px;
      border: 3px solid rgba(201,168,76,0.2);
      border-top-color: var(--gold);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 0 auto 8px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .loading-text {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.02em;
    }

    .all-loaded-msg {
      color: var(--teal);
      font-weight: 600;
      font-size: 0.95rem;
    }

    /* Newly loaded card entrance */
    .prop-col.newly-loaded {
      animation: cardPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    @keyframes cardPopIn {
      from { opacity: 0; transform: translateY(30px) scale(0.94); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ── PROPERTY FILTER ANIMATION ── */
    .prop-col {
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .prop-col.hiding {
      opacity: 0;
      transform: scale(0.95);
      pointer-events: none;
    }
    .prop-col.hidden {
      display: none !important;
    }
    .no-results-msg {
      display: none;
      text-align: center;
      padding: 60px 20px;
      width: 100%;
    }
    .no-results-msg i {
      font-size: 3rem;
      color: var(--gold);
      margin-bottom: 14px;
      display: block;
    }
    .no-results-msg h5 {
      font-family: 'Playfair Display', serif;
      color: var(--navy);
      margin-bottom: 6px;
    }
    .no-results-msg p {
      color: var(--text-muted);
      font-size: 0.9rem;
    }

    /* ── PROPERTY CARDS ── */
    .properties-section {
      padding: 60px 0 220px;   /* extra bottom padding for umbrella height */
      position: relative;
      overflow: hidden;
      background: #ffffff;
    }

    /* Beach umbrellas — swaying at the bottom */
    @keyframes propUmbrella1 { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
    @keyframes propUmbrella2 { 0%,100% { transform: rotate(1.5deg); } 50% { transform: rotate(-1.5deg); } }

    .prop-beach-items {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 210px;
      pointer-events: none;
      z-index: 0;
    }
    .prop-umbrella {
      position: absolute;
      bottom: 0;
      transform-origin: bottom center;
    }
    .prop-umbrella.pu1 { left: 2%;   animation: propUmbrella1 4s   ease-in-out infinite; }
    .prop-umbrella.pu2 { left: 9%;   animation: propUmbrella2 5s   ease-in-out infinite 0.7s; }
    .prop-umbrella.pu3 { right: 4%;  animation: propUmbrella1 4.5s ease-in-out infinite 1s; }
    .prop-umbrella.pu4 { right: 11%; animation: propUmbrella2 5.5s ease-in-out infinite 0.3s; }

    /* Ensure content sits above background */
    .properties-section .container { position: relative; z-index: 1; }


    .prop-card {
      background: #fff;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 3px 20px rgba(13,34,64,0.07);
      transition: transform 0.3s, box-shadow 0.3s;
      height: 100%;
    }
    .prop-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(13,34,64,0.14); }
    .prop-img-wrap { position: relative; overflow: hidden; height: 210px; }
    .prop-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
    .prop-card:hover .prop-img-wrap img { transform: scale(1.07); }
    .prop-type-badge {
      position: absolute; top: 14px; left: 14px;
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--navy);
      font-size: 0.7rem; font-weight: 800;
      padding: 4px 10px; border-radius: 8px;
      text-transform: uppercase; letter-spacing: 0.06em;
    }
    .prop-wishlist {
      position: absolute; top: 12px; right: 12px;
      background: rgba(255,255,255,0.92);
      border: none;
      border-radius: 50%;
      width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background 0.2s;
      color: #c0392b;
      font-size: 1rem;
    }
    .prop-wishlist:hover { background: #fff; }

    /* Photo count badge */
    .prop-photo-count {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: rgba(13, 34, 64, 0.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 5px;
      letter-spacing: 0.02em;
      border: 1px solid rgba(201,168,76,0.35);
      transition: background 0.2s, transform 0.2s;
      cursor: pointer;
    }
    .prop-photo-count i {
      color: var(--gold-light);
      font-size: 0.82rem;
    }
    .prop-img-wrap:hover .prop-photo-count {
      background: rgba(13, 34, 64, 0.9);
      transform: translateY(-2px);
    }
    .prop-body { padding: 18px 18px 14px; }
    .prop-area {
      font-size: 0.75rem; font-weight: 600;
      color: var(--gold-dark);
      text-transform: uppercase; letter-spacing: 0.08em;
      margin-bottom: 5px;
    }
    .prop-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.05rem; font-weight: 600;
      color: var(--navy);
      line-height: 1.35;
      margin-bottom: 8px;
    }
    .prop-feats {
      display: flex; gap: 14px;
      font-size: 0.8rem; color: var(--text-muted);
      margin-bottom: 12px;
      flex-wrap: wrap;
    }
    .prop-feats span { display: flex; align-items: center; gap: 4px; }
    .prop-feats i { color: var(--gold); }
    .prop-footer {
      display: flex; align-items: center; justify-content: space-between;
      border-top: 1px solid #eef0f4;
      padding-top: 12px;
    }
    .prop-price { font-size: 0.8rem; color: var(--text-muted); }
    .prop-price strong {
      display: block;
      font-size: 1.15rem;
      color: var(--navy);
      font-weight: 700;
    }
    .prop-price strong span { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
    .prop-rating {
      display: flex; align-items: center; gap: 5px;
      background: rgba(201,168,76,0.12);
      border: 1px solid rgba(201,168,76,0.3);
      padding: 5px 10px; border-radius: 8px;
      font-size: 0.82rem; font-weight: 700; color: var(--gold-dark);
    }
    .prop-rating i { color: var(--gold); }
    .btn-book {
      background: var(--teal);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 8px 18px;
      font-size: 0.83rem;
      font-weight: 600;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      transition: background 0.2s;
    }
    .btn-book:hover { background: var(--navy); }

    /* ── FILTERS BAR ── */
    .filters-bar {
      background: #fff;
      border-radius: var(--radius);
      padding: 14px 20px;
      display: flex; align-items: center; gap: 10px;
      flex-wrap: wrap;
      box-shadow: 0 2px 14px rgba(13,34,64,0.07);
      margin-bottom: 28px;
    }
    .filter-chip {
      border: 1.5px solid #dde2ea;
      background: none;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'DM Sans', sans-serif;
    }
    .filter-chip:hover, .filter-chip.active {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff;
    }
    .filter-sep { width: 1px; height: 24px; background: #e2e7ef; }
    .filter-sort {
      margin-left: auto;
      border: 1.5px solid #dde2ea;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 0.82rem;
      font-family: 'DM Sans', sans-serif;
      color: var(--text-muted);
      outline: none;
      cursor: pointer;
    }

    /* ── WHY CHOOSE ── */
    .why-section {
      background: linear-gradient(135deg, var(--navy) 0%, #0e3a5a 100%);
      padding: 70px 0;
      position: relative;
      overflow: hidden;
    }
    .why-section::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .why-card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius);
      padding: 32px 26px;
      text-align: center;
      transition: background 0.3s, transform 0.3s;
    }
    .why-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-4px); }
    .why-icon {
      width: 60px; height: 60px;
      background: rgba(201,168,76,0.15);
      border: 1px solid rgba(201,168,76,0.4);
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 18px;
      font-size: 1.6rem; color: var(--gold-light);
    }
    .why-title {
      font-family: 'Playfair Display', serif;
      color: #fff; font-size: 1.1rem; font-weight: 600; margin-bottom: 8px;
    }
    .why-text { color: rgba(255,255,255,0.65); font-size: 0.88rem; line-height: 1.65; }

    /* ── SECTION EYEBROW ── */
    .section-eyebrow {
      display: inline-flex;
      align-items: center;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold-dark);
      margin-bottom: 8px;
    }
    .section-eyebrow i { color: var(--gold); }

    /* ── TESTIMONIALS CAROUSEL ── */
    .testimonials-section {
      padding: 80px 0 60px;
      background: #fff;
    }
    .testi-track-wrap {
      position: relative;
      overflow: hidden;
      margin: 0 -12px;
    }
    .testi-track {
      display: flex;
      gap: 24px;
      overflow-x: auto;
      scroll-behavior: auto;
      -webkit-overflow-scrolling: touch;
      padding: 8px 12px 16px;
      cursor: grab;
      scrollbar-width: none;
    }
    .testi-track:active { cursor: grabbing; }
    .testi-track::-webkit-scrollbar { display: none; }

    /* Each slide is exactly 1/3 of the visible container */
    .testi-slide {
      flex: 0 0 calc(33.333% - 16px);
      min-width: 280px;
    }
    @media (max-width: 991px) { .testi-slide { flex: 0 0 calc(50% - 12px); } }
    @media (max-width: 575px) { .testi-slide { flex: 0 0 85%; } }

    /* Fade edges */
    .testi-fade-left,
    .testi-fade-right {
      position: absolute;
      top: 0; bottom: 0;
      width: 80px;
      pointer-events: none;
      z-index: 2;
    }
    .testi-fade-left  { left: 0;  background: linear-gradient(to right, #fff 0%, transparent 100%); }
    .testi-fade-right { right: 0; background: linear-gradient(to left,  #fff 0%, transparent 100%); }

    .testi-card {
      background: #f8fafc;
      border: 1px solid #e8edf4;
      border-radius: var(--radius);
      padding: 28px 26px 22px;
      height: 100%;
      position: relative;
      transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
      user-select: none;
    }
    .testi-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 36px rgba(13,34,64,0.1);
      border-color: rgba(201,168,76,0.35);
    }
    .testi-card--featured {
      background: linear-gradient(145deg, var(--navy) 0%, #163459 100%);
      border-color: rgba(201,168,76,0.4);
      box-shadow: 0 8px 32px rgba(13,34,64,0.2);
    }
    .testi-card--featured .testi-text { color: rgba(255,255,255,0.88); }
    .testi-card--featured .testi-name { color: #fff; }
    .testi-card--featured .testi-loc  { color: rgba(255,255,255,0.55); }
    .testi-card--featured .testi-property { color: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.1); }
    .testi-card--featured .testi-quote i { color: rgba(201,168,76,0.4); }

    .testi-quote {
      margin-bottom: 14px;
    }
    .testi-quote i {
      font-size: 2rem;
      color: rgba(201,168,76,0.25);
      line-height: 1;
    }
    .testi-text {
      font-size: 0.9rem;
      line-height: 1.75;
      color: #4a5568;
      margin-bottom: 20px;
      font-style: italic;
    }
    .testi-footer {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .testi-avatar {
      width: 42px; height: 42px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; font-weight: 700; color: #fff;
      flex-shrink: 0;
    }
    .testi-name {
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--navy);
    }
    .testi-loc {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .testi-loc i { color: var(--gold); }
    .testi-stars i { color: var(--gold); font-size: 0.75rem; }
    .testi-property {
      font-size: 0.72rem;
      color: var(--text-muted);
      border-top: 1px solid #edf0f5;
      padding-top: 12px;
      display: flex;
      align-items: center;
    }
    .testi-property i { color: var(--gold); }

    /* Review summary bar */
    .review-summary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      background: var(--navy);
      border-radius: var(--radius);
      padding: 32px 20px;
      margin-top: 50px;
      flex-wrap: wrap;
    }
    .review-stat {
      text-align: center;
      padding: 0 40px;
      flex: 1;
      min-width: 140px;
    }
    .review-stat-num {
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--gold-light);
      line-height: 1.1;
    }
    .review-stat-stars { margin: 4px 0; }
    .review-stat-stars i { color: var(--gold); font-size: 0.8rem; }
    .review-stat-label {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.55);
      font-weight: 500;
      margin-top: 4px;
      letter-spacing: 0.04em;
    }
    .review-divider {
      width: 1px;
      height: 50px;
      background: rgba(255,255,255,0.1);
      flex-shrink: 0;
    }
    @media (max-width: 575px) { .review-divider { display: none; } }

    /* ── HOW IT WORKS ── */
    .how-section {
      padding: 80px 0;
      background: var(--sand);
    }
    .how-card {
      background: #fff;
      border-radius: var(--radius);
      padding: 36px 28px 30px;
      text-align: center;
      position: relative;
      box-shadow: 0 3px 18px rgba(13,34,64,0.07);
      transition: transform 0.3s, box-shadow 0.3s;
      height: 100%;
    }
    .how-card:hover { transform: translateY(-5px); box-shadow: 0 14px 38px rgba(13,34,64,0.12); }
    .how-card--mid {
      background: var(--navy);
      margin-top: -12px;
      box-shadow: 0 10px 40px rgba(13,34,64,0.25);
    }
    .how-card--mid .how-title { color: #fff; }
    .how-card--mid .how-text  { color: rgba(255,255,255,0.65); }
    .how-card--mid .how-step  { color: rgba(201,168,76,0.5); }
    .how-card--mid .how-icon  { background: rgba(201,168,76,0.15); border-color: rgba(201,168,76,0.35); color: var(--gold-light); }

    .how-step {
      font-family: 'Playfair Display', serif;
      font-size: 3rem;
      font-weight: 700;
      color: rgba(201,168,76,0.18);
      line-height: 1;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }
    .how-icon {
      width: 64px; height: 64px;
      border-radius: 18px;
      background: rgba(201,168,76,0.1);
      border: 1.5px solid rgba(201,168,76,0.3);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem;
      color: var(--gold-dark);
      margin: 0 auto 20px;
    }
    .how-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 10px;
    }
    .how-text {
      font-size: 0.88rem;
      line-height: 1.7;
      color: var(--text-muted);
    }

    /* ── NEWSLETTER ── */
    .newsletter-section {
      padding: 70px 0;
      background: #f7f4ef;
    }
    .newsletter-card {
      background: linear-gradient(135deg, var(--navy) 0%, #0e3a5a 60%, #155f6e 100%);
      border-radius: 20px;
      padding: 52px 52px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(13,34,64,0.25);
    }
    @media (max-width: 767px) { .newsletter-card { padding: 36px 24px; } }
    .newsletter-deco-left {
      position: absolute; top: -60px; left: -60px;
      width: 220px; height: 220px;
      border-radius: 50%;
      background: rgba(201,168,76,0.08);
      pointer-events: none;
    }
    .newsletter-deco-right {
      position: absolute; bottom: -80px; right: -40px;
      width: 280px; height: 280px;
      border-radius: 50%;
      background: rgba(255,255,255,0.04);
      pointer-events: none;
    }
    .newsletter-eyebrow {
      display: inline-flex;
      align-items: center;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 12px;
    }
    .newsletter-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      color: #fff;
      margin-bottom: 12px;
    }
    .newsletter-sub {
      font-size: 0.9rem;
      color: rgba(255,255,255,0.65);
      line-height: 1.7;
      max-width: 400px;
      margin-bottom: 18px;
    }
    .newsletter-perks {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
    }
    .newsletter-perks span {
      font-size: 0.8rem;
      font-weight: 600;
      color: rgba(255,255,255,0.75);
      display: flex;
      align-items: center;
    }
    .newsletter-perks i { color: var(--gold); }

    .newsletter-form-wrap { padding-left: 20px; }
    @media (max-width: 991px) { .newsletter-form-wrap { padding-left: 0; margin-top: 10px; } }

    .newsletter-input-row { display: flex; flex-direction: column; gap: 12px; }
    .newsletter-field {
      position: relative;
    }
    .newsletter-field i {
      position: absolute;
      left: 14px; top: 50%;
      transform: translateY(-50%);
      color: var(--gold);
      font-size: 0.9rem;
      pointer-events: none;
    }
    .newsletter-field input {
      width: 100%;
      background: rgba(255,255,255,0.1);
      border: 1.5px solid rgba(255,255,255,0.2);
      border-radius: 10px;
      padding: 12px 14px 12px 38px;
      font-size: 0.88rem;
      font-family: 'DM Sans', sans-serif;
      color: #fff;
      outline: none;
      transition: border-color 0.2s, background 0.2s;
    }
    .newsletter-field input::placeholder { color: rgba(255,255,255,0.45); }
    .newsletter-field input:focus {
      border-color: var(--gold);
      background: rgba(255,255,255,0.15);
    }
    .newsletter-btn {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--navy);
      border: none;
      border-radius: 10px;
      padding: 13px 20px;
      font-size: 0.92rem;
      font-weight: 700;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      transition: all 0.25s;
      box-shadow: 0 4px 18px rgba(201,168,76,0.4);
      width: 100%;
    }
    .newsletter-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(201,168,76,0.55);
    }
    .newsletter-btn.subscribed {
      background: linear-gradient(135deg, #22b5b5 0%, #1a8a8a 100%);
      color: #fff;
      box-shadow: 0 4px 18px rgba(26,138,138,0.4);
    }
    .newsletter-note {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.4);
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .newsletter-note i { color: var(--teal-light); }

    /* ── BACK TO TOP ── */
    .back-to-top {
      position: fixed;
      bottom: 130px;
      right: 28px;
      width: 46px; height: 46px;
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--navy);
      border: none;
      border-radius: 50%;
      font-size: 1.1rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(201,168,76,0.45);
      transition: all 0.3s;
      opacity: 0;
      transform: translateY(16px);
      pointer-events: none;
      z-index: 999;
    }
    .back-to-top.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }
    .back-to-top:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(201,168,76,0.6);
    }

    /* ── FOOTER ── */
    .footer {
      background: var(--navy);
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 54px 0 28px;
      color: rgba(255,255,255,0.65);
    }
    .footer-logo img { height: 52px; width: auto; display: block; margin-bottom: 14px; }
    .footer-tagline { font-size: 0.88rem; line-height: 1.7; max-width: 260px; }
    .footer-heading {
      color: #fff; font-weight: 700; font-size: 0.85rem;
      letter-spacing: 0.08em; text-transform: uppercase;
      margin-bottom: 16px;
    }
    .footer-links { list-style: none; padding: 0; }
    .footer-links li { margin-bottom: 9px; }
    .footer-links a {
      color: rgba(255,255,255,0.6); text-decoration: none;
      font-size: 0.88rem; transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--gold-light); }
    .footer-contact { font-size: 0.88rem; line-height: 2; }
    .footer-contact i { color: var(--gold); margin-right: 7px; }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      margin-top: 40px; padding-top: 22px;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 12px;
      font-size: 0.8rem; color: rgba(255,255,255,0.4);
    }
    .social-links { display: flex; gap: 10px; }
    .social-links a {
      width: 34px; height: 34px;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.5); font-size: 0.9rem;
      transition: all 0.2s; text-decoration: none;
    }
    .social-links a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }

    /* Utility */
    .view-all-btn {
      border: 2px solid var(--gold);
      color: var(--gold-dark);
      background: none;
      border-radius: 10px;
      padding: 9px 26px;
      font-size: 0.88rem;
      font-weight: 700;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      transition: all 0.2s;
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 7px;
    }
    .view-all-btn:hover {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--navy);
      border-color: var(--gold);
    }

    /* ── AREAS CAROUSEL ── */
    .areas-scroll-wrap {
      position: relative;
      overflow: hidden;
    }
    .areas-track {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 6px;
      cursor: grab;
      scroll-behavior: auto;
    }
    .areas-track:active { cursor: grabbing; }
    .areas-track::-webkit-scrollbar { display: none; }
    .areas-track { scrollbar-width: none; }

    .area-slide {
      flex: 0 0 220px;
    }
    @media (max-width: 575px) { .area-slide { flex: 0 0 170px; } }

    .area-card {
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
      cursor: pointer;
      height: 210px;
      transition: transform 0.3s;
    }
    .area-card:hover { transform: translateY(-4px); }
    .area-card:hover .area-overlay { opacity: 0.55; }

    /* Fade edges */
    .scroll-fade-left,
    .scroll-fade-right {
      position: absolute;
      top: 0; bottom: 6px;
      width: 60px;
      pointer-events: none;
      transition: opacity 0.3s;
      z-index: 2;
    }
    .scroll-fade-left {
      left: 0;
      background: linear-gradient(to right, #f7f4ef 0%, transparent 100%);
      opacity: 0;
    }
    .scroll-fade-right {
      right: 0;
      background: linear-gradient(to left, #f7f4ef 0%, transparent 100%);
      opacity: 1;
    }

    /* Nav buttons */
    .areas-nav { display: flex; gap: 8px; }
    .area-nav-btn {
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 2px solid var(--gold);
      background: #fff;
      color: var(--gold-dark);
      font-size: 0.95rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 2px 10px rgba(201,168,76,0.15);
    }
    .area-nav-btn:hover {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: var(--navy);
      box-shadow: 0 4px 16px rgba(201,168,76,0.35);
    }
    .area-nav-btn:disabled {
      opacity: 0.35;
      cursor: default;
      border-color: #ddd;
      color: #bbb;
      background: #f5f5f5;
      box-shadow: none;
    }


    /* ── AREA LOGO ── */
    .area-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -60%);
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      transition: transform 0.3s;
    }
    .area-card:hover .area-logo {
      transform: translate(-50%, -65%);
    }
    .area-logo-icon {
      width: 62px;
      height: 62px;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1.5px solid rgba(255,255,255,0.3);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    }
    .area-logo-icon svg {
      width: 36px;
      height: 36px;
    }
    .area-logo-text {
      background: rgba(201,168,76,0.85);
      backdrop-filter: blur(4px);
      border-radius: 6px;
      padding: 3px 10px;
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #fff;
      white-space: nowrap;
    }

    /* Area color overlays */
    .area-marina { background: linear-gradient(180deg, #0e4f7a 0%, #083348 100%); }
    .area-hacienda { background: linear-gradient(180deg, #1a5c4a 0%, #0d3328 100%); }
    .area-marassi { background: linear-gradient(180deg, #2d4a7a 0%, #1a2d50 100%); }
    .area-almaza { background: linear-gradient(180deg, #6a3c1f 0%, #3d1f08 100%); }
    .area-sidi { background: linear-gradient(180deg, #1a4a6a 0%, #0d2840 100%); }
    .area-ras { background: linear-gradient(180deg, #1c5c3a 0%, #0d2e1c 100%); }
    /* ══════════════════════════════════════════
       PAGE LOADER
    ══════════════════════════════════════════ */
    #page-loader {
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: #0d2240;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 36px;
      transition: opacity 0.6s ease, visibility 0.6s ease;
    }
    #page-loader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* Logo wrapper */
    .loader-logo {
      animation: loaderLogoPulse 2s ease-in-out infinite;
    }
    @keyframes loaderLogoPulse {
      0%, 100% { transform: scale(1);   opacity: 1; }
      50%       { transform: scale(1.04); opacity: 0.85; }
    }

    /* Wave bar */
    .loader-waves {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      height: 40px;
    }
    .loader-wave-bar {
      width: 5px;
      border-radius: 3px;
      background: linear-gradient(to top, #1a8a8a, #c9a84c);
      animation: loaderWaveBar 1.1s ease-in-out infinite;
    }
    .loader-wave-bar:nth-child(1) { animation-delay: 0s;    }
    .loader-wave-bar:nth-child(2) { animation-delay: 0.1s;  }
    .loader-wave-bar:nth-child(3) { animation-delay: 0.2s;  }
    .loader-wave-bar:nth-child(4) { animation-delay: 0.3s;  }
    .loader-wave-bar:nth-child(5) { animation-delay: 0.4s;  }
    .loader-wave-bar:nth-child(6) { animation-delay: 0.3s;  }
    .loader-wave-bar:nth-child(7) { animation-delay: 0.2s;  }
    .loader-wave-bar:nth-child(8) { animation-delay: 0.1s;  }
    .loader-wave-bar:nth-child(9) { animation-delay: 0s;    }
    @keyframes loaderWaveBar {
      0%, 100% { height: 8px;  opacity: 0.4; }
      50%       { height: 38px; opacity: 1;   }
    }

    /* Loading text */
    .loader-text {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      animation: loaderTextFade 1.8s ease-in-out infinite;
    }
    @keyframes loaderTextFade {
      0%, 100% { opacity: 0.35; }
      50%       { opacity: 0.9;  }
    }

    /* Ripple ring */
    .loader-ripple {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 1px solid rgba(201,168,76,0.15);
      animation: loaderRipple 2.4s ease-out infinite;
    }
    .loader-ripple:nth-child(2) { animation-delay: 0.8s; }
    .loader-ripple:nth-child(3) { animation-delay: 1.6s; }
    @keyframes loaderRipple {
      0%   { transform: scale(0.5); opacity: 0.6; }
      100% { transform: scale(2.5); opacity: 0;   }
    }


     /*-- Chat -- */
  #botpenguin-launcher-12{
    bottom:60px !important;
  }