/* ===== Brand / Base ===== */
    @font-face{font-family:"Euclid Circular A";src:url("../font/EuclidCircularA-Medium.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
    @font-face{font-family:"Euclid Circular A";src:url("../font/EuclidCircularA-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
    @font-face{font-family:"Baskerville Custom";src:url("../font/baskervi.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
    @font-face{font-family:"Baskerville Custom";src:url("../font/BaskervilleBoldItalicBT.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap}

    :root{
      --page-bg:#fffbf5;            /* paper-warm background */
      --brand:#c79a5a;              /* brand gold */
      --theme:#a95917;              /* accent (headers) */
      --text:#1d1d1f;               /* body text */
      --muted:#6c6c6c;              /* captions */
      --side:clamp(16px,6vw,72px);
      --gap:clamp(18px,2.6vw,28px);
      --radius:14px;
      --shadow:0 10px 30px rgba(0,0,0,.12);
      --ease:cubic-bezier(.22,1,.36,1);

          /* Anim */
      --ease: cubic-bezier(.22,1,.36,1);
      --dur-in: .9s;
      --dur-img: 1.15s;
      --stagger: 110ms;
      --lift: 16px;
      --fade: 0;
      --scale-start: .985;
    }
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;background:var(--page-bg);color:var(--text);font-family:"Euclid Circular A",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}

    /* ===== Page Intro ===== */
    /* Header Styling */
    header.page-head{padding:clamp(60px,8vw,90px) var(--side) clamp(24px,3vw,40px);text-align:center;position:relative;}
    header.page-head h1{font-family:"Baskerville Custom",serif;font-style:italic;font-size:clamp(32px,4vw,46px);color:var(--theme);}
    header.page-head p{max-width:720px;margin:0 auto 0;color:var(--muted);line-height:1.6;letter-spacing: 1.68px; text-align: justify;}

.section-title-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;   /* centers the whole row */
  align-items: center;        /* vertically align icon + text */
  gap: 18px;                  /* spacing between icon + text */
}

.section-title-wrapper .section-icon {
  width: 140px;   /* adjust size to your liking */
  height: auto;
}



.section-title-wrapper .section-title {
  font-family: "Euclid Circular A", sans-serif;
  font-size: 30px;
  letter-spacing: 0.25em;
  color: #716a65;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
}

@media (max-width:900px){
  .section-title-wrapper .section-title{
    font-size: 20px;
  }

  .section-title-wrapper .section-icon {
    width: 80px;   /* adjust size to your liking */
    height: auto;
  }
}

@media (max-width:475px){
  .section-title-wrapper .section-title{
    font-size: 13px;
  }

  .section-title-wrapper .section-icon {
    width: 50px;   /* adjust size to your liking */
    height: auto;
  }
}
    /* ===== Two‑up grid ===== */
    .wrap{width:min(1440px,100%);margin:0 auto;padding:8px var(--side) 80px}
    .glamping-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;}
    @media (max-width:860px){.glamping-grid{grid-template-columns:1fr}}

    /* Card */
    .glamp-card{position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
    .glamp-card:hover{transform:translateY(-4px);}

    .villa-media{position:relative;display:block;overflow:hidden}
    .villa-media::before{content:"";display:block;aspect-ratio:4/3}
    .villa-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease); box-shadow: rgba(0,0,0,.3);}
    .glamp-card:hover .villa-media img{transform:scale(1.03)}

    .glamp-info{padding:1.4rem 1.6rem; background-color: var(--page-bg);}
    .glamp-info h3{margin:0 0 4px;font-weight:700;font-size:30px;letter-spacing:.02em; color: var(--theme); font-family: "Baskerville Custom"; font-style: italic;} 
    .glamp-info .villa-sub{margin:0;color:var(--muted);font-size:14px;letter-spacing:.02em}

    /* Stagger: every second card drops slightly to create a level difference */
    @media (max-width:900px){.glamp-card:nth-child(2n){transform:none}}

    /* Divider with a soft rule + arrow at right edge (like Canva comp) */
    .pair-sep{grid-column:1/-1;border:0;position:relative;margin:clamp(10px,1.6vw,16px) 0 0}
    .pair-sep::after{content:"›";position:absolute;right:0;top:50%;transform:translateY(-55%);font-size:20px;color:var(--theme)}

    /* WhatsApp FAB */
    .fab-wrap{position:fixed;right:clamp(18px,2vw,24px);bottom:clamp(14px,2vw,20px);z-index:9999;display:flex;flex-direction:column;gap:14px;pointer-events:none}
    .fab-btn{width:70px;height:70px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.25);transition:transform .25s var(--ease),box-shadow .25s var(--ease);pointer-events:auto;color:#fff;text-decoration:none}
    .fab-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.33)}
    .fab-btn i{font-size:30px}
    @media (max-width:600px){.fab-btn{width:50px;height:50px}.fab-btn i{font-size:22px}}

    .villa-sub {
      display: flex;
      justify-content: space-between;     /* pushes arrow to right edge */
      align-items: center;
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      letter-spacing: .02em;
    }

    .read-more {
      color: var(--brand);
      text-decoration: none;
      font-size: 22px;                    /* larger arrow */
      flex-shrink: 0;
      transition: transform 0.3s ease, color 0.3s ease;
    }

    .read-more:hover {
      transform: translateX(6px);
      color: var(--theme);
    }


    .arrow {
      color: var(--brand);
      margin-left: 4px;
      font-size: 30px;
      transition: transform 0.3s ease;
    }
    .villa-link:hover i { transform: translateX(4px); }

    /* ===== Discover More — vertical slideshow ===== */
    .exp-section{padding: 0;}
    .exp-viewport{width: min(2160px, 100%);;position:relative;overflow:hidden;padding: var(--side); padding-left: 10rem; padding-right: 10rem; padding-top: none;}
    .exp-track{display:flex;flex-direction:column;position:relative;transition:transform .6s var(--ease);}
.exp-slide{
  display:none;
  grid-template-columns:1.9fr 1fr;
  gap:clamp(18px,3vw,40px);
  align-items:center;
  will-change: transform, opacity;
}

/* default active state (for first load) */
.exp-slide.active{
  display:grid;
  animation: slideUpIn var(--dur-img) var(--ease);
}

/* when moving to next slide (down arrow) */
.exp-slide.active.slide-up{
  animation-name: slideUpIn;
}

/* when moving to previous slide (up arrow) */
.exp-slide.active.slide-down{
  animation-name: slideDownIn;
}

/* keyframes */
@keyframes slideUpIn{
  from{
    opacity:0;
    transform:translateY(32px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes slideDownIn{
  from{
    opacity:0;
    transform:translateY(-32px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

    @media (max-width:900px){.exp-slide{grid-template-columns:1fr;} 
    .exp-viewport{
      padding: var(--side);
    }}


    .exp-media{position:relative;overflow:hidden;}
    .exp-media::before{content:"";display:block;aspect-ratio:16/10;}
    .exp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}


    .exp-copy{background: var(--page-bg);padding:clamp(18px,2.8vw,28px);border-radius:var(--radius);}
    .exp-title{margin:0 0 6px;font-family:"Baskerville Custom",serif;font-size:clamp(28px,3.8vw,48px);line-height:1.1;color:var(--theme);}
    .exp-handle{margin:0 0 12px;color:#8a7f73;font-style:italic; margin-bottom: 2rem; }
    .exp-desc{margin:0 0 18px;color:var(--muted);line-height:1.6; margin-right: 1rem; text-align: justify; margin-bottom: 2rem;}


    .exp-cta {
      display: inline-block;
      position: relative;
      background: var(--theme);       /* your brand brown */
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      padding: 0.8rem 2.4rem 0.8rem 1.6rem; /* extra space for arrow tail */
      border: none;
      border-radius: 0;               /* flat edges */
      font-family: "Euclid Circular A", sans-serif;
      letter-spacing: 0.5px;
      text-align: center;
      transition: background 0.3s ease, transform 0.3s ease;
    }

    /* Create the angled tail */
    .exp-cta::after {
      content: "";
      position: absolute;
      top: 0;
      right: -18px;                   /* width of the angled tail */
      width: 0;
      height: 0;
      border-top: 22px solid transparent;
      border-bottom: 22px solid transparent;
      border-left: 18px solid var(--theme);
      transition: border-left-color 0.3s ease;
      text-align: center;
    }

    .exp-cta:hover {
      background: #8a4212;            /* darker on hover */
      transform: translateY(-2px);
    }

    .exp-cta:hover::after {
      border-left-color: #8a4212;
    }

    .villa-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .villa-title-row h3 {
      margin: 0;
    }

    .title-continue {
      color: var(--brand);
      text-decoration: none;
      font-size: 16px;
      font-weight: 600;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: color .3s ease, transform .3s ease;
    }

    .title-continue:hover {
      color: var(--theme);
      transform: translateX(3px);
    }




    .exp-controls{position:absolute;right: 0.5rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:3;}
    .exp-btn{width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--page-bg);color:var(--theme);transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
    .exp-btn:hover{transform:translateY(-2px);}
    .exp-btn i{font-size:16px;}
    @media (max-width:900px){.exp-controls{right:var(--side);}}

      /* Reveal */
  .reveal{opacity:var(--fade);transform:translateY(var(--lift)) scale(var(--scale-start));will-change:transform,opacity;}
  .reveal.is-visible{opacity:1;transform:translateY(0) scale(1);transition:opacity var(--dur-in) var(--ease),transform var(--dur-in) var(--ease);}

  .title{
    text-decoration: none;
  }

  .section-title-wrapper .section-icon-2 {
  width: 250px;   /* adjust size to your liking */
  height: auto;
}

@media (max-width:900px){
  .section-title-wrapper .section-title{
    font-size: 20px;
  }

  .section-title-wrapper .section-icon {
    width: 80px;   /* adjust size to your liking */
    height: auto;
  }

  .section-title-wrapper .section-icon-2 {
    width: 110px;   /* adjust size to your liking */
    height: auto;
  }
}

@media (max-width:475px){
  .section-title-wrapper .section-title{
    font-size: 13px;
  }

  .section-title-wrapper .section-icon {
    width: 50px;   /* adjust size to your liking */
    height: auto;
  }

    .section-title-wrapper .section-icon-2 {
    width: 100px;   /* adjust size to your liking */
    height: auto;
  }
  
}