/* smooth GPU acceleration */
*{
  box-sizing:border-box;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Base */
:root{
  --bg:#f6f4ef;
  --ink:#101418;
  --muted:#2b3136;
  --dark:#075a21;
  --card:#ffffff;
  --accent:#f6d86b;
  --shadow: 0 10px 24px rgba(16,20,24,0.06);
  --radius: 18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  width: auto;
  nimation:pageFade .8s ease-out both;
}

img{max-width:100%;display:block}

.container{
  width:min(1320px, 100%);
  margin:0 auto;
  padding:0 18px;
}

.h1{
  font-family:"Playfair Display", serif;
  font-weight:700;
  letter-spacing:0.2px;
  font-size:clamp(30px, 4vw, 48px);
  line-height:1.12;
  margin:12px 0 10px;
}

.h2{
  font-family:"Playfair Display", serif;
  font-weight:700;
  font-size:clamp(22px, 2.4vw, 30px);
  margin:0 0 8px;
}

.h3{
  font-weight:800;
  margin:0 0 8px;
  font-size:18px;
}

.lead{
  margin:0 0 18px;
  font-size:16px;
  opacity:0.95;
/*  max-width:680px; */
}

.muted{color:var(--muted)}
.subhead{color:var(--muted);margin-top:4px}
.section{padding:46px 0}
.page{background:var(--bg)}
.page .container{padding-top:46px;padding-bottom:46px}

/* Top bar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 100;

  /* glass effect */
  background: rgba(255,255,255,0.80);   /* 80% transparent white */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}
/* inner layout */
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
}
.brand{
  color:#0b3d2e;      /* dark green */
  font-weight:900;
  text-decoration:none;
  letter-spacing:0.3px;
}

/* =========================
   LOGO STYLING
========================= */

.brand--logo{
  display:flex;
  align-items:center;
}

/* logo size */
.brand--logo img{
  height:64px;     /* desktop size */
  width:auto;
  object-fit:contain;

  /* smooth animation */
  animation: logoFloat 4s ease-in-out infinite;
  transition: transform .3s ease;
}

/* subtle hover lift */
.brand--logo:hover img{
  transform: scale(1.05);
}


/* Nav */
.nav{
  display:flex;
  gap:18px;
  align-items:center;
  font-size:16px;
}
.nav a{
  position:relative;   /* REQUIRED */
  color:#0b3d2e;
  text-decoration:none;
  font-weight:600;
  transition:all .25s ease;
}

/* hover effect */
.nav a:hover{
  color:#137547;
  transform:translateY(-1px);
}

/* animate underline */
.nav a:hover::after{
  width:100%;
}

.nav .btn::after{
  display:none;
}

.nav .btn{
  color:#fff !important;
}

.nav a.btn{
  color:#fff;
}

.nav a.btn{
  color:#fff;
  font-weight:700;
}

.nav a.btn:hover{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
}



.nav__toggle{
  display:none;
  background:transparent;
  border:0;
  padding:10px;
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  width:24px;
  height:2px;
  margin:5px 0;
  border-radius:2px;
  background:#0b3d2e;
}

/* underline */
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:#137547;
  transition:width .3s ease;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .25s ease, filter .25s ease, background .25s ease, border-color .25s ease;
  will-change:transform;
}

/* book button */
.btn--primary{
  background:#137547;
  color:#fff;
  border:none;
  transition:background .25s ease, transform .2s ease;
}

.btn--primary:hover{
  background:#0f5e38;  /* darker green */
  color:#fff;
  transform:translateY(-2px);
}

.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0px) scale(0.99)}
/*.btn--primary{background:var(--dark);color:#fff}*/
.btn--accent{background:var(--accent);color:var(--dark)}
.btn--ghost{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.18);color:#fff}
.btn--soft{background:#f6f4ef;border-color:rgba(16,20,24,0.10);color:var(--dark)}
/*.btn--primary:hover{filter:brightness(1.06)}*/
.btn--accent:hover{filter:brightness(1.03)}


/* HERO CALL BUTTON */
.btn--call{
  background:#137547;     /* green */
  color:#fff;             /* white text */

  min-width:240px;        /* wider desktop */
  padding:14px 26px;      /* bigger feel */
  font-size:16px;
  font-weight:800;

  border-radius:14px;
  text-align:center;
}

/* hover */
.btn--call:hover{
  background:#0f5e38;
  transform:translateY(-2px);
  color: #fff;
}


/* Hero */
.hero{
  position: relative;
  height: 600px;          /* fixed height */
  overflow: hidden;
  background: var(--dark);

  display: flex;          /* center content */
  align-items: center;    /* vertical center */
}

.hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  animation: heroSlowZoom 18s ease-in-out infinite alternate;
}

/*.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(11,15,12,0.78) 0%,
    rgba(11,15,12,0.52) 55%,
    rgba(11,15,12,0.20) 100%
  );
}*/

.hero__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.70);
}

/* center inner content */
.hero__content{
  position: relative;
  color:#fff;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;
  height:100%;
  padding: 0 18px;
  max-width: 900px;
  margin: 0 auto;
}

.pill{
  display:inline-block;
  background:rgba(246,216,107,0.16);
  border:1px solid rgba(246,216,107,0.28);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:0.25px;
}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.hero__note{margin-top:18px;font-size:13px;opacity:0.9}

/* Cards / layout */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.pad{padding:26px}

.grid-2{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:26px;
  align-items:stretch;
}
.media{
  min-height:320px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  background:#e9ecef;
}
.media img{width:100%;height:100%;object-fit:cover}

.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}
.cards--3{grid-template-columns: repeat(3, minmax(0, 1fr));}
.card img{height:170px;width:100%;object-fit:cover}


.feature-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
}
.feature{
  background:var(--bg);
  border-radius:14px;
  padding:14px;
  border:1px solid rgba(16,20,24,0.06);
}
.feature__title{font-weight:900;margin-bottom:4px}

.stars{font-weight:900}
.who{margin-top:10px;font-size:13px;color:var(--muted)}

.actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Dark section */
.dark{
  background:transparent;
  padding:0;
}
.dark__inner{
  background:var(--dark);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:0 10px 24px rgba(16,20,24,0.10);
}

.quote-card { background: #075a21; color: white; padding: 3rem; border-radius: var(--radius); text-align: center; }
.quote-text { font-family: var(--font-heading); font-size: 1.5rem; font-style: italic; margin-bottom: 1rem; line-height: 1.4; }

/* ==============================
   PICNIC GREEN SECTION
============================== */

.picnic-section{
  background:#137547;
  color:#fff;
  padding:80px 0;
}

/* title */
.picnic-title{
  color:#fff;
  margin-bottom:40px;
}

/* two column layout */
.picnic-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  font-size:18px;
  line-height:2.1;
  margin-bottom:40px;
}

.picnic-grid ul{
  list-style:disc;
  padding-left:20px;
}

/* button spacing */
.picnic-cta{
  margin-bottom:60px;
}

/* video split block */
.picnic-video{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:260px;
}

.video-left{
  background:#e6e6e6;
  border-radius:12px 0 0 12px;
}

.video-right{
  background:#137547;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border-radius:0 12px 12px 0;
}

.video-right h3{
  font-family:"Playfair Display";
  font-size:28px;
  margin-bottom:6px;
}

.video-right p{
  opacity:0.85;
}

/* Picnic icons styling */
.picnic-icons .feature{
  display:flex;
  align-items:center;
  gap:12px;
}

.picnic-icons i{
  width:20px;
  height:20px;
  stroke: var(--green, #2f6b3f);
}

/* ===== Nature Section ===== */

.nature-section{
  padding-top:80px;
}

/* grid */
/* ===== Single Row Nature Cards ===== */

.nature-grid{
  margin-top:40px;

  display:flex;
  gap:24px;

  overflow-x:auto;
  scroll-snap-type:x mandatory;

  padding-bottom:10px;
}

/* hide ugly scrollbar */
.nature-grid::-webkit-scrollbar{
  display:none;
}

/* each card fixed width */
.nature-card{
  min-width:280px;
  flex:0 0 280px;

  height:260px;
  scroll-snap-align:start;
}


.nature-card{
  transition: transform .3s ease;
}

.nature-card:hover{
  transform: translateY(-6px);
}


/* card */
.nature-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  cursor:pointer;
  height:260px;
  box-shadow:0 8px 28px rgba(0,0,0,0.12);
}

/* image */
.nature-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.6s ease;
}

/* hover zoom */
.nature-card:hover img{
  transform:scale(1.1);
}

/* overlay */
.nature-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px;
  color:#fff;

  background:linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.25),
    transparent
  );
}

.nature-overlay h3{
  font-family:'Playfair Display', serif;
  font-size:20px;
  margin-bottom:6px;
}

.nature-overlay p{
  font-size:14px;
  opacity:0.9;
}

/* =====================================
   Premium Stay Gallery (Modern Layout)
===================================== */

.stay-gallery{
  padding:100px 0;
  background:#f6f4ef;
}

/* white rounded section block */
.stay-gallery__wrap{
  background:#fff;
  border-radius:30px;
  padding:60px 50px 70px;
  box-shadow:0 25px 70px rgba(0,0,0,0.08);
}

.stay-gallery__head{
  text-align:center;
  margin-bottom:50px;
}

/* grid */
.stay-gallery__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

/* tile */
.stay-item{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  min-height:260px;
  cursor:pointer;
  background:#e9ecef;
}

/* image zoom */
.stay-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s ease;
}

.stay-item:hover img{
  transform:scale(1.12);
}

/* overlay */
.stay-item__label{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:18px 20px;
  color:#fff;
  font-family:"Playfair Display", serif;
  font-weight:700;
  font-size:20px;

  background:linear-gradient(to top,
    rgba(0,0,0,.75),
    rgba(0,0,0,.35),
    transparent);
}

/* CTA */
.stay-gallery__cta{
  margin-top:55px;
  text-align:center;
}

/* smooth reveal animation */
.stay-item.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:all .8s ease;
}

.stay-item.reveal.in{
  opacity:1;
  transform:translateY(0);
}

.nearby{
  padding:100px 0;
  background:#f6f4ef;
}

.nearby__head{
  text-align:center;
  margin-bottom:50px;
}

/* grid */
.nearby__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}

/* card */
.nearby-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  height:300px;
  box-shadow:0 18px 45px rgba(0,0,0,0.08);
  cursor:pointer;
}

/* photo */
.nearby-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s ease, filter .8s ease;
}

.nearby-card:hover img{
  transform:scale(1.15);
  filter:brightness(0.85);
}

/* overlay */
.nearby-card__content{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:22px;
  color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.4), transparent);
}

.nearby-card__content h3{
  font-family:"Playfair Display", serif;
  font-size:22px;
  margin:0 0 6px;
}

.nearby-card__content span{
  color:#f6d86b;
  font-weight:800;
  font-size:14px;
}

.nearby-card__content p{
  font-size:14px;
  margin:6px 0 0;
  opacity:.9;
}

/* scroll animation */
.nearby-card.reveal{
  opacity:0;
  transform:translateY(35px);
  transition:all .7s ease;
}

.nearby-card.reveal.in{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   Booking CTA Banner
========================= */

.cta-book{
  background:#075a21; /* your dark green */
  color:#fff;
  padding:70px 0;
}

.cta-book__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.cta-book__title{
  font-size:40px;
  margin:0 0 10px;
  font-weight:700;
}

.cta-book__text{
  opacity:.9;
  font-size:18px;
  margin:0;
}

.cta-book__btn{
  background:#e6e6e6;
  color:#075a21;
  padding:14px 32px;
  border-radius:14px;
  font-weight:600;
  text-decoration:none;
  transition:.25s ease;
  white-space:nowrap;
}

.cta-book__btn:hover{
  background:#fff;
  transform:translateY(-2px);
}





/* Footer */
.footer{
  margin-top:0;
  background:var(--dark);
  color:#fff;
  padding:26px 0 0;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap:18px;
  padding-bottom:18px;
}
.footer__brand{font-weight:900;font-size:18px}
.footer__title{font-weight:900;margin-bottom:8px}
.footer__text{opacity:0.9;margin:10px 0 0}
.footer__links{display:flex;flex-direction:column;gap:6px;font-size:14px}
.footer__links a{color:#fff;text-decoration:none;opacity:0.9}
.footer__links a:hover{opacity:1}
.footer__link{color:var(--accent);text-decoration:none;font-weight:900}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,0.14);
  padding:14px 18px;
  font-size:13px;
  opacity:0.85;
}

/* Animations (subtle) */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in{
  opacity:1;
  transform: translateY(0);
}

.lift{
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.lift:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(16,20,24,0.10);
}

@keyframes heroSlowZoom{
  from{transform:scale(1.02)}
  to{transform:scale(2.08)}
}

@keyframes heroSlowZoom{
  from{transform:scale(1.02)}
  to{transform:scale(2.08)}
}

/* Responsive */
@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr}
  .feature-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .cards{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .footer__grid{grid-template-columns:1fr}
}

/* ==============================
   RESPONSIVE
============================== */

@media (max-width: 900px){
  .picnic-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .picnic-video{
    grid-template-columns:1fr;
  }

  .video-left,
  .video-right{
    border-radius:12px;
  }
}

@media (max-width: 640px){
  .hero{
    height: 500px;
  }
}

/* mobile height */
@media(max-width:640px){
  .nature-card{
    height:220px;
  }
}

/* responsive */
@media(max-width:980px){
  .stay-gallery__grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .stay-gallery__wrap{
    padding:40px 22px 50px;
    border-radius:22px;
  }

  .stay-gallery__grid{
    grid-template-columns:1fr;
  }
}

/* responsive */
@media(max-width:980px){
  .nearby__grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .nearby__grid{
    grid-template-columns:1fr;
  }
}


/* mobile */
@media(max-width:768px){
  .cta-book__inner{
    flex-direction:column;
    text-align:center;
  }
}



@media (max-width: 640px){
  .hero__content{padding:52px 18px 40px}
  .cards{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .pad{padding:18px}
  .topbar__inner{padding:12px 18px}
  .nav__toggle{display:inline-block}
  .nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    padding:8px 0 2px;
  }
  .nav.open{display:flex}
  .nav a{padding:8px 0}

        *{ animation: none !important; }
      [data-reveal], [data-stagger] > *{
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }
      [data-parallax]{ transform:none !important; }
}


/* =========================
   MOBILE HEADER FIX
========================= */

@media (max-width: 640px){

  /* header layout */
  .topbar__inner{
    flex-direction:column;
    align-items:center;
    gap:14px;
  }

  /* brand */
  .brand{
    font-size:18px;
    font-weight:800;
    text-align:center;
  }

  /* hamburger */
  .nav__toggle{
    display:block;
  }

  /* nav menu container */
  .nav{
    width:100%;
    display:none;
    flex-direction:column;
    align-items:center;
    gap:18px;

    padding:20px 0 24px;
    margin-top:8px;

    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(10px);
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
  }

  /* open state */
  .nav.open{
    display:flex;
  }

  /* links */
  .nav a{
    font-size:18px;
    font-weight:600;
    padding:10px 0;
    width:100%;
    text-align:center;
  }

  /* BOOK NOW button */
  .nav a.btn{
    width:85%;
    margin-top:8px;
    padding:14px 0;
    font-size:16px;
    border-radius:14px;
  }
}

/* floating animation */
@keyframes logoFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* mobile */
@media (max-width:640px){
  .brand--logo img{
    height:40px;
  }
}

@keyframes pageFade{
  from{opacity:0}
  to{opacity:1}
}



/* =========================
   Unified Subpage Hero
   Matches index hero system
========================= */
.subhero{
  position: relative;
  min-height: 62vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.subhero__bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.subhero__overlay{
  position:absolute; inset:0;
/*  background: radial-gradient(1200px 600px at 50% 30%, rgba(0,0,0,.10), rgba(0,0,0,.72)); */
background:rgba(0,0,0,0.70);
}
.subhero__content{
  position:relative;
  padding: 110px 0 80px;
  text-align: center;
  max-width: 920px;
  color: #ffffff;
  text-align: center;
}
@media (max-width: 768px){
  .subhero__content{ padding: 92px 0 64px; }
}
.subhero--about .subhero__bg{ background-image:url('../images/anjanvel-aboutus.png?auto=format&fit=crop&w=2000&q=80'); }
.subhero--accommodation .subhero__bg{ background-image:url('../images/accomodation-banner.png?auto=format&fit=crop&w=2000&q=80'); }
.subhero--gallery .subhero__bg{ background-image:url('https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&w=2000&q=80'); }
.subhero--contact .subhero__bg{ background-image:url('../images/anjanvel-contact.png?auto=format&fit=crop&w=2000&q=80'); }

/* Active nav state */
.nav a.is-active{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 10px;
}

    /* --- LAYOUT --- */


    .section { padding: 5rem 0; }
    .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
    .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; align-items: center; }


    /* =========================================
       4. GALLERY SYSTEM
       ========================================= */
    
    /* Filters */
    .gallery-filter {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 3rem;
    }

    .filter-btn {
      background: transparent;
      border: 1px solid #e0e0e0;
      padding: 0.5rem 1.5rem;
      border-radius: 50px;
      font-family: var(--font-body);
      font-weight: 500;
      color: var(--color-text-muted);
      cursor: pointer;
      transition: var(--transition);
    }

    .filter-btn:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }

    .filter-btn.active {
      background-color: var(--color-primary);
      color: white;
      border-color: var(--color-primary);
    }

    /* Grid */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 24px;
      min-height: 400px; /* Prevent collapse during filter */
    }

    /* Items */
    .gallery-item {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      background: white;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
      animation: fadeIn 0.5s ease forwards;
    }

    .gallery-item img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    .gallery-item:hover img {
      transform: scale(1.08);
    }

    .gallery-overlay {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
      padding: 1.5rem;
      color: white;
      transform: translateY(20px);
      opacity: 0;
      transition: var(--transition);
    }

    .gallery-item:hover .gallery-overlay {
      transform: translateY(0);
      opacity: 1;
    }

    .gallery-overlay h3 { color: white; font-size: 1.2rem; margin-bottom: 0.25rem; font-family: var(--font-heading); }
    .gallery-overlay span { font-size: 0.85rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 1px; }

    /* Filter Animation State */
    .gallery-item.hide {
      display: none; /* Can switch to opacity/transform for fancier effect, but display:none is robust for layout reflow */
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 768px) {
      .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
    }


        .contact-hero {
      position: relative;
      padding: 180px 0 120px;
      background: #000;
      color: white;
      text-align: center;
      overflow: hidden;
    }

    .contact-hero__bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1920&q=80');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      transform: scale(1.1);
      transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      z-index: 1;
    }

    .contact-hero.active .contact-hero__bg {
      transform: scale(1);
    }

    .contact-hero .container {
      position: relative;
      z-index: 2;
    }

    .contact-hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.5rem, 5vw, 4rem);
      letter-spacing: 2px;
      margin-bottom: 20px;
    }

    .contact-container {
      margin-top: -80px;
      padding-bottom: 100px;
      position: relative;
      z-index: 10;
    }

    .contact-wrapper {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(0,0,0,0.05);
    }

    .contact-form-side {
      padding: 80px;
    }

    .contact-info-side {
      background: var(--luxury-beige);
      padding: 80px 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .form-group {
      position: relative;
      margin-bottom: 40px;
    }

    .form-input {
      width: 100%;
      padding: 12px 0;
      border: none;
      border-bottom: 1px solid #ccc;
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      background: transparent;
    }

    .form-input:focus {
      outline: none;
      border-bottom-color: var(--brand-green);
    }

    .form-label {
      position: absolute;
      top: 12px;
      left: 0;
      color: #888;
      pointer-events: none;
      transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
      font-weight: 300;
    }

    .form-input:focus ~ .form-label,
    .form-input:not(:placeholder-shown) ~ .form-label {
      top: -15px;
      font-size: 11px;
      color: var(--brand-green);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 35px;
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      opacity: 0;
      transform: translateX(20px);
    }

    .contact-wrapper.active .info-item {
      opacity: 1;
      transform: translateX(0);
    }

    .info-item:nth-child(1) { transition-delay: 0.2s; }
    .info-item:nth-child(2) { transition-delay: 0.3s; }
    .info-item:nth-child(3) { transition-delay: 0.4s; }
    .info-item:nth-child(4) { transition-delay: 0.5s; }

    .info-item:hover {
      transform: translateX(10px) !important;
    }

    .info-icon {
      width: 44px;
      height: 44px;
      background: white;
      color: var(--brand-green);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.03);
      flex-shrink: 0;
    }

    .info-content h4 {
      font-family: 'Playfair Display', serif;
      font-size: 18px;
      margin: 0 0 4px 0;
      color: #1a1a1a;
    }

    .info-content p {
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-muted);
    }

    .map-placeholder {
      width: 100%;
      height: 450px;
      background: #fafafa;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 60px;
      color: #888;
      border: 1px solid #eee;
      text-align: center;
      padding: 40px;
    }

    .social-links {
      display: flex;
      gap: 15px;
      margin-top: 20px;
    }

    .social-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      transition: all 0.3s ease;
    }

    .social-icon:hover {
      background: var(--brand-green);
      color: white;
      border-color: var(--brand-green);
      transform: translateY(-3px);
    }

    @media (max-width: 992px) {
      .contact-wrapper { grid-template-columns: 1fr; }
      .contact-form-side, .contact-info-side { padding: 50px 30px; }
      .contact-hero { padding: 140px 0 100px; }
    }

    /* Animation Classes */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }

     /* Pillar Icons */
    .pillar-card { text-align: center; padding: 2.5rem; background: #FFF; border-radius: var(--radius); }
    .pillar-icon { margin-bottom: 1.5rem; color: var(--color-primary); display: inline-flex; padding: 1rem; background: var(--color-accent); border-radius: 50%; }


        .card__body { padding: 2rem; flex-grow: 1; display: flex; flex-direction: column; }
    .card__title { font-size: 1.4rem; color: var(--color-primary); margin-bottom: 0.5rem; }
    .card__tag { 
      display: inline-block; 
      font-size: 0.75rem; 
      text-transform: uppercase; 
      letter-spacing: 1px; 
      color: var(--color-accent); 
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .price-block {
      background: #f4f8f4;
      padding: 1rem;
      border-radius: 8px;
      margin: 1rem 0;
    }
    
    .price-row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.95rem; }
    .price-row:last-child { margin-bottom: 0; }
    .price-row b { color: var(--color-primary-dark); }
    
    .inclusions { margin: 1rem 0; font-size: 0.9rem; color: var(--color-text-light); }
    .inclusions li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 0.5rem; }
    .inclusions i { color: var(--color-accent); width: 16px; margin-top: 4px; }

    .meta-info {
      font-size: 0.85rem;
      border-top: 1px solid #eee;
      padding-top: 1rem;
      margin-top: auto;
      color: #777;
    }
    .meta-row { display: flex; justify-content: space-between; margin-bottom: 0.3rem; }

    /* Founder Story */
    .founder { background-color: #f2f0e9; }
    .founder__img { border-radius: var(--radius); box-shadow: var(--shadow); }
    .quote-box {
      border-left: 4px solid var(--color-accent);
      padding-left: 1.5rem;
      margin: 1.5rem 0;
      font-style: italic;
      font-family: var(--font-heading);
      font-size: 1.2rem;
      color: var(--color-primary);
    }



.contact-grid{
  margin-top:60px;
  gap:40px;
}

.map-card{
  overflow:hidden;
  padding:0;
}

.map-embed{
  position:relative;
  width:100%;
  height:100%;
  min-height:420px;
}

.map-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

@media(max-width:992px){
  .map-embed{
    min-height:350px;
  }
}


   .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 35px;
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      opacity: 0;
      transform: translateX(20px);
    }

    .contact-wrapper.active .info-item {
      opacity: 1;
      transform: translateX(0);
    }

    .info-item:nth-child(1) { transition-delay: 0.2s; }
    .info-item:nth-child(2) { transition-delay: 0.3s; }
    .info-item:nth-child(3) { transition-delay: 0.4s; }
    .info-item:nth-child(4) { transition-delay: 0.5s; }

    .info-item:hover {
      transform: translateX(10px) !important;
    }

    .info-icon {
      width: 44px;
      height: 44px;
      background: white;
      color: var(--brand-green);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.03);
      flex-shrink: 0;
    }

    .info-content h4 {
      font-family: 'Playfair Display', serif;
      font-size: 18px;
      margin: 0 0 4px 0;
      color: #1a1a1a;
    }

    .info-content p {
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-muted);
    }

    .social-links {
      display: flex;
      gap: 15px;
      margin-top: 20px;
    }

    .social-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      transition: all 0.3s ease;
    }

    .social-icon:hover {
      background: var(--brand-green);
      color: white;
      border-color: var(--brand-green);
      transform: translateY(-3px);
    }

    @media (max-width: 992px) {
      .contact-wrapper { grid-template-columns: 1fr; }
      .contact-form-side, .contact-info-side { padding: 50px 30px; }
      .contact-hero { padding: 140px 0 100px; }
    }


/* =========================
   Footer Social Icons
========================= */

.footer__social{
  display:flex;
  gap:14px;
  margin-top:18px;
}

.footer__social a{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  color:#ffffff;
  transition:all .3s ease;
}

.footer__social a:hover{
  background:#f6d86b;         /* your accent */
  color:#075a21;              /* dark green */
  transform:translateY(-3px);
  border-color:#f6d86b;
}

.footer__social i{
  width:18px;
  height:18px;
}