/* ============ Scoped: Staycation Showcase ============ */
      .staycation-showcase{
        --msc-bg: #f6f7fb;
        --msc-text: #101828;
        --msc-muted:#667085;
        --msc-line:#e9ecf3;
        --msc-card:#ffffff;
        --msc-accent:#f6cf7a;   /* orange */
        --msc-accent-2:#ffd4b1; /* soft peach */
        --msc-ghost:#f3f5fa;
        position: relative;
        overflow: clip;
        padding: 72px 0;
        background: radial-gradient(1200px 800px at 85% -20%, #f6cf7a 0%, transparent 55%),
                    radial-gradient(900px 700px at 0% 85%, #f6cf7a 0%, transparent 55%),
                    var(--msc-bg);
      }

      /* Decorative background */
      .msc-bg .msc-blob{
        position: absolute; inset: auto;
        filter: blur(50px);
        opacity: .45; pointer-events: none;
      }
      .msc-blob-a{ width: 40vmax; height: 40vmax; top:-12vmax; right:-10vmax; background: radial-gradient(circle at 30% 30%, var(--msc-accent), transparent 60%); animation: msc-float 18s ease-in-out infinite;}
      .msc-blob-b{ width: 35vmax; height: 35vmax; bottom:-10vmax; left:-8vmax; background: radial-gradient(circle at 60% 50%, var(--msc-accent-2), transparent 60%); animation: msc-float 22s ease-in-out infinite reverse;}
      @keyframes msc-float{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(16px,-10px)} }

      .msc-grid{
        position:absolute; inset:0;
        background:
          linear-gradient(transparent 95%, rgba(0,0,0,.04) 95%) 0 0/ 28px 28px,
          linear-gradient(90deg, transparent 95%, rgba(0,0,0,.04) 95%) 0 0/ 28px 28px;
        mask-image: radial-gradient(1000px 600px at 70% 10%, #000 0%, transparent 70%);
        opacity:.25;
        pointer-events:none;
      }

      .msc-container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; }

      .msc-head{
        text-align: center; margin-bottom: 28px;
      }
      .msc-head h2{
        margin:0 0 8px; color: var(--msc-text);
        font-size: clamp(24px, 4vw, 42px); font-weight: 900; letter-spacing:.2px;
      }
      .msc-head p{
        margin:0; color:var(--msc-muted); font-size: clamp(14px, 1.8vw, 18px);
      }

      /* Cards grid */
      .msc-cards{
        display: grid; gap: 22px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .msc-card{
        display: grid;
        grid-template-rows: auto 1fr;
        background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.6));
        backdrop-filter: blur(10px);
        border: 1px solid var(--msc-line);
        border-radius: 18px;
        box-shadow: 0 30px 80px rgba(16, 24, 40, .08);
        overflow: hidden;
        transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
      }
      .msc-card:hover{
        transform: translateY(-6px);
        box-shadow: 0 40px 90px rgba(16, 24, 40, .12);
        border-color: rgba(255,122,24,.35);
      }

      /* Media */
      .msc-media{
        position: relative; overflow: hidden;
        aspect-ratio: 16/9; background:#fff;
      }
      .msc-media img{
        width: 100%; height: 100%; object-fit: cover; display:block;
        transform: scale(1.02);
        transition: transform .6s ease;
      }
      .msc-card:hover .msc-media img{ transform: scale(1.06); }

      /* Corner badge */
      .msc-badge{
        position: absolute; left: 14px; top: 14px;
        display:inline-flex; align-items:center; gap:8px;
        padding:8px 12px; font-size:12px; font-weight:700; letter-spacing:.2px;
        color:#7a3a12; background: rgba(255, 244, 233, .92);
        border:1px solid rgba(255, 184, 120, .6); border-radius: 999px;
        box-shadow: 0 6px 18px rgba(255,122,24,.18);
      }

      /* Body */
      .msc-body{ padding: 18px 18px 20px; }
      .msc-body h3{
        margin: 4px 0 8px; color: var(--msc-text);
        font-size: clamp(18px, 2.4vw, 26px); font-weight: 800;
      }
      .msc-body p{
        margin:0 0 12px; color: var(--msc-muted); line-height: 1.7;
      }

      /* Points */
      .msc-points{ list-style:none; padding:0; margin:0 0 14px; }
      .msc-points li{
        display:flex; align-items:center; gap:10px; color: var(--msc-text);
        margin: 6px 0;
      }
      .msc-points li::before{
        content:""; width:10px; height:10px; border-radius:50%;
        background: radial-gradient(circle at 30% 30%, var(--msc-accent), #f6cf7a);
        box-shadow: 0 0 0 3px #fff, 0 3px 12px rgba(255,122,24,.35);
      }

      /* Buttons */
      .msc-actions{ display:flex; flex-wrap:wrap; gap:10px; }
      .msc-btn-staycation{
        display:inline-flex; align-items:center; justify-content:center; gap:8px;
        padding:10px 14px; border-radius: 12px; text-decoration:none; font-weight:800;
        font-size: 14px; line-height:1; border:1px solid transparent;
      }
      .msc-btn-primary{
        background: linear-gradient(135deg, var(--msc-accent), #f6cf7a);
        color:#1b120a; box-shadow: 0 10px 24px rgba(255,122,24,.28);
      }
      .msc-btn-primary:hover{ filter: brightness(1.03); color:#ffffff;}
      .msc-btn-ghost{
        background: var(--msc-ghost); color: var(--msc-text);
        border-color: var(--msc-line);
      }
      .msc-btn-ghost:hover{ background:#fff; }

      /* Responsive */
      @media (max-width: 992px){
        .msc-cards{ grid-template-columns: 1fr; }
      }
    

      
        /* ====== Scoped styling for this section ====== */
        .space-up .before-after-left-area {
          padding: clamp(20px, 4vw, 48px);
          background: linear-gradient(180deg, #0f0f14 0%, #1b1f2a 100%);
          color: #fff;
          border-radius: 10px;
        }

        .space-up .pbmit-title {
          margin-bottom: 6px;
        }

        .space-up .pbmit-heading-desc {
          color: #e5e7eb;
          margin-top: 10px;
          line-height: 1.7;
        }

        /* Swiper container fills height nicely */
        .events-swiper-wrap {
          position: relative;
          border-radius: 10px;
          overflow: hidden;
          background: #0b0e14;
        }

        /* Ensure slides are neat and consistent */
        .events-swiper {
          width: 100%;
          height: 100%;
          min-height: 420px; /* desktop comfort */
        }
        @media (max-width: 767.98px) {
          .events-swiper { min-height: 300px; }
        }

        .events-swiper .swiper-slide {
          display: grid;
          place-items: center;
          background: #0b0e14;
        }
        .events-swiper .swiper-slide img {
          width: 100%;
          height: 420px;
          object-fit: cover;
        }

        /* Pagination & arrows styling */
        .events-swiper .swiper-pagination-bullet {
          background: rgba(255,255,255,.7);
          opacity: 1;
        }
        .events-swiper .swiper-pagination-bullet-active {
          background: #ff9f43; /* warm accent */
        }
        .events-swiper .swiper-button-prev,
        .events-swiper .swiper-button-next {
          color: #ffffff;
          text-shadow: 0 6px 18px rgba(0,0,0,.35);
        }
        .events-swiper .swiper-button-prev:hover,
        .events-swiper .swiper-button-next:hover {
          color: #ff9f43;
        }   


        /* Section skin */
.mrb-two-cta { padding: 36px 0; background:#fff; }
.mrb-two-cta h3 { margin:0 0 8px; font-weight:800; }
.mrb-two-cta .lead-note { color:#636e72; margin-bottom:16px; }

/* Button row */
.mrb-links { display: center; gap:10px; flex-wrap:wrap; }

/* Buttons */
.mrb-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px; font-weight:700;
  text-decoration:none; border:1px solid transparent;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.mrb-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.10); }
.mrb-btn i{ font-size:1.1rem; }

/* Brand skins */
.mrb-ig{ background:#fff; color:#e1306c; border-color:#ffd1e1; }
.mrb-ig:hover{ filter:brightness(1.05); }

.mrb-airbnb{ background:#ff385c; color:#fff; }
.mrb-airbnb:hover{ filter:brightness(1.03); color: #f2f2f2;}

/* Cards (optional visual separation) */
.mrb-card{
  border:1px solid #eee; 
  border-radius:14px; 
  padding:16px 16px 14px;
  box-shadow:0 6px 16px rgba(0,0,0,.05); 
  text-align: center;
}

      



      /* Contact cards – Marbella Suites */
.mfr-card {
  position: relative;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.mfr-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

.mfr-accent {
  height: 4px;
  background: linear-gradient(90deg, var(--mfr-accent), var(--mfr-accent-2));
}

.mfr-card-body {
  padding: 1.25rem;
}

.mfr-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: linear-gradient(135deg, #e8f5e9, #ffffff);
  border: 1px solid rgba(46,125,50,.25);
  color: var(--mfr-accent);
}

.mfr-title {
  font-weight: 700;
  letter-spacing: .2px;
}

.mfr-ic {
  width: 1.25rem;
  text-align: center;
  color: var(--mfr-accent);
  margin-top: .25rem;
}

.mfr-list li {
  padding: .6rem .6rem;
  border-radius: 12px;
  background: #fafafa;
  border: 1px dashed rgba(0,0,0,.06);
}

.mfr-list li + li {
  margin-top: .6rem;
}

.mfr-link {
  text-decoration: none;
  color: #111;
  word-break: break-word;
}

.mfr-text {
  display: block;
  color: #333;
}

.mfr-copy {
  border: 1px solid rgba(0,0,0,.08);
}

/* Larger padding on desktop */
@media (min-width: 992px) {
  .mfr-card-body {
    padding: 1.5rem 1.25rem 3.25rem;
  }
}

/* Brand-colored social rows in right card */
.mfr-whatsapp-row {
  background: #25D366 !important;
  color: #ffffff;
}

.mfr-instagram-row {
  background: #E1306C !important;
  color: #ffffff;
}

.mfr-airbnb-row {
  background: #FF5A5F !important;
  color: #ffffff;
}

/* White text inside colored rows */
.mfr-whatsapp-row .mfr-link,
.mfr-instagram-row .mfr-link,
.mfr-airbnb-row .mfr-text,
.mfr-whatsapp-row .mfr-text {
  color: #ffffff;
}

/* White icons inside colored rows */
.mfr-whatsapp-row .mfr-ic,
.mfr-instagram-row .mfr-ic,
.mfr-airbnb-row .mfr-ic,
.mfr-whatsapp-row i,
.mfr-instagram-row i,
.mfr-airbnb-row i {
  color: #ffffff;
}

/* Right-side small buttons on colored background */
.mfr-whatsapp-row .btn,
.mfr-instagram-row .btn,
.mfr-airbnb-row .btn {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.35);
  color: #ffffff;
}

.mfr-whatsapp-row .btn:hover,
.mfr-instagram-row .btn:hover,
.mfr-airbnb-row .btn:hover {
  background: rgba(255,255,255,0.22);
}

/* Social pill at the bottom center of each card */
  .mfr-card { position: relative; }
  .mfr-card-body { padding-bottom: 1rem; } /* space so the pill doesn’t overlap */

  /* Social container – buttons in one line with gaps */
.mfr-social {
  position: static;             /* keep it inside card flow */
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;            /* keep in single line until space ends */
  justify-content: center !important;  /* or center if you like */
  gap: 10px;                     /* space between buttons */
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Base button style */
.msc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  white-space: nowrap; 
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.msc-btn i {
  font-size: 14px;
}

/* WhatsApp brand */
.msc-btn-whatsapp {
  background-color: #25D366;
}
.msc-btn-whatsapp:hover {
  box-shadow: 0 6px 14px rgba(37, 211, 102, 0.4);
  transform: translateY(-1px);
}

/* Instagram gradient */
.msc-btn-instagram {
  background: radial-gradient(circle at 30% 30%, #fdf497 0%, #fd5949 45%, #d6249f 70%, #285AEB 100%);
}
.msc-btn-instagram:hover {
  box-shadow: 0 6px 14px rgba(214, 36, 159, 0.4);
  transform: translateY(-1px);
}

/* Airbnb brand */
.msc-btn-airbnb {
  background-color: #FF5A5F;
}
.msc-btn-airbnb:hover {
  box-shadow: 0 6px 14px rgba(255, 90, 95, 0.4);
  transform: translateY(-1px);
} 

.msc-btn-google {
  background: linear-gradient(
    135deg,
    #4285F4 0%,     /* blue strong start */
    #4285F4 40%,    /* blue extends */
    #EA4335 55%,    /* red */
    #FBBC05 72%,    /* yellow */
    #34A853 100%    /* green */
  );
}

.msc-btn-google:hover {
  box-shadow: 0 6px 14px rgba(66, 133, 244, 0.45);
  transform: translateY(-1px);
}

/*.msc-btn-google .gmaps-icon {
  height: 18px;
  width: auto;
  display: block;
}*/




/* Optional: on small screens allow wrapping to next line */
@media (max-width: 576px) {
  .mfr-social {
    flex-wrap: wrap;
    justify-content: center;
  }
}


  .mfr-btn-icon{
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }

  .mfr-btn-icon .fa-brands{ font-size: 18px; line-height: 1; }

  .mfr-btn-icon:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
  }

  /* Brand tints */
  .mfr-ig{ color:#C13584; }
  .mfr-ig:hover{ background: rgba(193,53,132,.08); }

  .mfr-airbnb{ color:#FF5A5F; }
  .mfr-airbnb:hover{ background: rgba(255,90,95,.08); }  


  /* ===== Scoped: MARBELLA REVIEWS BLOCK ===== */
      /* ===== Scoped: Marbella Guest Reviews ===== */
      .marbella-guest-reviews {
        --mgr-bg: #f8fafc;
        --mgr-card: #ffffff;
        --mgr-text: #0f172a;
        --mgr-sub: #475569;
        --mgr-line: #e5e7eb;
        --mgr-accent: #f6cf7a; /* orange accent */
        --mgr-star: #f59e0b;   /* amber stars */
        padding: 60px 0;
        background: var(--mgr-bg);
      }

      .marbella-guest-reviews .container { padding-left: 12px; padding-right: 12px; }

      .mgr-main {
        text-align: center;
        margin: 0 0 28px;
        font-weight: 900;
        letter-spacing: .3px;
        font-size: clamp(24px, 3.2vw, 38px);
        color: var(--mgr-text);
      }

      .mgr-group + .mgr-group { margin-top: 16px; }

      .mgr-flex {
        display: flex;
        gap: 24px;
        align-items: stretch;
      }

      /* LEFT 20%: heading + image only */
      .mgr-left {
        flex: 0 0 20%;
        max-width: 20%;
        min-width: 220px;
      }

      .mgr-left-title {
        margin: 0 0 12px;
        font-size: clamp(18px, 2.2vw, 26px);
        font-weight: 800;
        color: var(--mgr-text);
      }

      .mgr-thumb {
        width: 100%;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid var(--mgr-line);
        background: #fff;
        box-shadow: 0 10px 26px rgba(2,6,23,.06);
      }
      .mgr-thumb img {
        display: block;
        width: 100%;
        height: 150px;
        object-fit: cover;
      }

      /* RIGHT 80% */
      .mgr-right { flex: 1 0 0; min-width: 300px; }

      /* Marquee */
      .mgr-marquee {
        overflow: hidden;
        position: relative;
        width: 100%;
        padding: 1rem 0;
      }
      .mgr-track {
        display: flex;
        width: max-content;
        gap: 24px;
        animation-duration: 24s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }
      .mgr-leftward .mgr-track  { animation-name: mgr-scroll-left; }
      .mgr-rightward .mgr-track { animation-name: mgr-scroll-right; }

      @keyframes mgr-scroll-left {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); } /* duplicate items for seamless loop */
      }
      @keyframes mgr-scroll-right {
        from { transform: translateX(-50%); }
        to   { transform: translateX(0); }
      }

      /* Cards */
      .mgr-card {
        background: var(--mgr-card);
        border: 1px solid var(--mgr-line);
        border-radius: 14px;
        box-shadow: 0 8px 26px rgba(2,6,23,.06);
        padding: 18px 18px 16px;
        min-width: 360px;
        max-width: 420px;
      }

      .mgr-card p {
        margin: 0 0 14px;
        color: var(--mgr-text);
        line-height: 1.6;
      }

      /* Quote bubble */
      .mgr-quote {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--mgr-accent), #f6cf7a);
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 900;
        line-height: 1;
        margin-bottom: 10px;
      }

      /* Meta */
      .mgr-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .mgr-name { margin: 0; font-weight: 700; color: var(--mgr-text); }
      .mgr-role { font-size: 13px; color: var(--mgr-sub); }

      /* Stars (CSS-only) */
      .mgr-stars { display: inline-flex; gap: 2px; }
      .mgr-stars span,
      .mgr-stars span.half {
        width: 16px; height: 16px; display: inline-block; position: relative;
      }
      .mgr-stars span::before,
      .mgr-stars span.half::before {
        content: "★";
        color: var(--mgr-star);
        font-size: 16px;
        line-height: 16px;
        position: absolute; inset: 0;
      }
      .mgr-stars span.half::before {
        background: linear-gradient(90deg, var(--mgr-star) 50%, transparent 50%);
        -webkit-background-clip: text;
        color: transparent;
      }

      /* Responsive */
      @media (max-width: 992px) {
        .mgr-flex { flex-direction: column; }
        .mgr-left { max-width: 100%; flex-basis: auto; }
      }