:root{
--green:#6C7744;
--brown:#4A3C2A;
--gold:#D2A550;
--cream:#F7F3E9;
--dark:#333;
--wrap:1300px;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
color:var(--dark);
background:var(--cream);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.45;
-webkit-text-size-adjust:100%;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}

/* layout wrapper */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- HEADER ---------- */
.site-header{
width:100%;
background: rgba(255,255,255,0.62);
padding:6px 0;
box-shadow: 0 1px 5x rgba(0,0,0,0.06);
position:sticky;
top:0;
z-index:1000;
backdrop-filter: blur(3px);
}
.header-wrap{
width:90%;
max-width:var(--wrap);
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:6px 0;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
}
.logo-block{display:flex;align-items:center;gap:12px}
.main-logo{width:90px;height:90px;display:block}
.logo-text h2{font-size:20px;margin:0;color:var(--green);line-height:1}
.logo-text h4{font-size:12px;margin:2px 0 0;color:var(--green);font-weight:600;line-height:1}

/* NAV */
.main-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}
.main-nav a{font-size:16px;color:var(--green);font-weight:700;padding:6px 8px;border-radius:6px;display:inline-block}
.main-nav a:hover{background:rgba(108,119,68,0.08);color:var(--green);transition:all .18s}

/* mobile nav toggle (if used) */
.menu-toggle{display:none;background:none;border:0;padding:8px}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden}
.hero .swiper{height:70vh;min-height:420px}
.hero-slide{
background-size:cover;
background-position:center;
height:100%;
display:block;
position:relative;
overflow:hidden;
}

/* subtle dark overlay so white text is visible */
.hero-slide::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 65%);
z-index:1;
pointer-events:none;
}

/* center hero content robustly */
.hero-inner{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:2;
max-width:900px;
width:calc(100% - 60px);
padding:28px 20px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
color:#fff;
}

/* headings */
.hero-inner h1{
font-size:44px;
margin:0 0 10px;
text-shadow:0 6px 20px rgba(0,0,0,0.45);
line-height:1.05;
letter-spacing:0.2px;
}

/* lead / tagline */
.lead{
font-size:22px;
margin:0 0 16px;
text-shadow:0 6px 20px rgba(0,0,0,0.45);
}

/* primary button - centered and stacked under text */
.btn{
background:var(--green);
color:#fff;
padding:12px 20px;
border-radius:8px;
text-decoration:none;
font-weight:800;
display:inline-block;
align-self:center;
box-shadow:0 8px 20px rgba(108,119,68,0.12);
transition:transform .18s ease, background .18s ease;
z-index:3;
}
.btn:hover{background:var(--brown);transform:translateY(-2px);}

/* Swiper nav customization (visible on hero) */
.swiper-button-next, .swiper-button-prev{
color:#fff;
width:44px;height:44px;border-radius:50%;
background:rgba(0,0,0,0.22);
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 18px rgba(0,0,0,0.25);
}
.swiper-button-next::after, .swiper-button-prev::after{font-size:20px;color:#fff}

/* ---------- INTRO / HIGHLIGHTS ---------- */
.intro-section{padding:60px 0;background:#fff}
.intro-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:start}
.intro-left h2{font-size:30px;color:var(--brown);margin:0 0 10px;font-weight:700}
.intro-left p{font-size:16px;color:#444;line-height:1.7;margin:0 0 10px}

.highlights h2{font-size:26px;margin:0 0 14px;color:var(--brown)}
.highlight-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 28px;margin-top:8px}
.highlight-item{display:flex;align-items:center;gap:14px}
.icon-circle{
width:56px;height:56px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
border:2px solid rgba(30,60,5,0.2);background:#fff;
padding:6px;
}
.icon-circle img{width:36px;height:36px;object-fit:contain;filter:none}
.highlight-item span{font-weight:700;color:var(--brown);font-size:15px}

/* ---------- SECTIONS / GLOBAL ---------- */
.section{padding:60px 0}
.section.alt{background:#fff}
h2{font-size:28px;color:var(--brown);margin:0 0 12px;font-weight:700}
.section-sub{color:#666;margin-bottom:24px;font-size:15px}

/* gallery / card grids */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.gallery-grid img{width:100%;height:220px;object-fit:cover;border-radius:10px;display:block}

.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,0.06)}
.card img{width:100%;height:200px;object-fit:cover;display:block}
.card-body{padding:14px}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.blog-card{background:#fff;border-radius:12px;padding:12px;box-shadow:0 8px 18px rgba(0,0,0,0.06)}
.blog-card img{width:100%;height:160px;object-fit:cover;border-radius:8px}
.read-more{display:inline-block;margin-top:10px;color:var(--green);font-weight:700}

/* blog content expand */
.blog-content{max-height:0;overflow:hidden;opacity:0;color:#444;font-size:15px;line-height:1.7;margin-top:0;transition:max-height .45s ease,opacity .35s ease;margin-bottom:0}
.blog-card.open .blog-content{max-height:500px;opacity:1;margin-top:10px}

/* ---------- ROOM / ACCOMMODATION SLIDER + DESCRIPTION ---------- /
/ container that holds left slider + right description (user uses inline flex but we style classes) */
.room-section{
display:flex;
gap:36px;
align-items:flex-start;
justify-content:center;
flex-wrap:wrap;
padding:14px 0 0;
}

/* left slider */
.room-slider{width:520px;max-width:100%;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,0.08);background:#fff}
.room-slider .swiper{height:360px}
.room-slider .swiper-slide img{width:100%;height:360px;object-fit:cover}

/* right description */
.room-desc{max-width:520px;flex:1;min-width:280px}
.room-desc h2{color:var(--brown);font-size:28px;margin:0 0 12px}
.room-desc p{font-size:16px;line-height:1.7;color:#444;margin:0}

/* small utility classes for spacing */
.mt-12{margin-top:12px}
.mb-12{margin-bottom:12px}

/* ---------- CONTACT / FORM ---------- */
.fancy-bg{background:var(--cream);padding:70px 0;position:relative}
.fancy-bg:before{content:"";position:absolute;top:-40px;left:0;width:100%;height:40px;background:url('wave.svg') center/cover no-repeat;opacity:0.12}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.input-group{position:relative;margin-bottom:16px}
.input-group i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:15px}
.input-group input, .input-group textarea{
width:100%;padding:12px 14px 12px 42px;border:1px solid #e3d8b3;border-radius:10px;font-size:15px;background:#fff
}
.submit-btn{width:100%;background:var(--brown);color:#fff;padding:12px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer}
.submit-btn:hover{background:var(--gold);color:#000}

/* contact info */
.contact-info h3{color:var(--brown);margin-bottom:8px}
.social a{font-size:22px;color:var(--gold);margin-right:12px}
.map iframe{border-radius:12px;margin-top:12px}

/* ---------- FOOTER ---------- */
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px;align-items:start}
.site-footer{background:var(--brown);color:#fff;padding:48px 0 26px}
.site-footer a{color:var(--gold)}
.copyright{background:rgba(0,0,0,0.06); padding:12px 20px;margin-top:20px;color:#fff;text-align:center;border-top:1px solid rgba(255,255,255,0.04)}

/* ---------- TOOLS / floating ---------- */
.whatsapp-float{position:fixed;bottom:22px;right:22px;background:#25D366;color:#fff;padding:12px 18px;border-radius:50px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 6px 22px rgba(0,0,0,0.18);z-index:9999}
.whatsapp-float img{width:28px;height:28px}
.whatsapp-float:hover{transform:translateY(-2px)}

/* ---------- ANIMATION ---------- */
.fade-in-up{opacity:0;transform:translateY(18px);transition:all .8s cubic-bezier(.2,.9,.3,1)}
.fade-in-up.visible{opacity:1;transform:translateY(0)}

/* ---------- SWIPER responsive tweaks ---------- */
@media (max-width:1100px){
.hero-inner h1{font-size:36px}
.lead{font-size:20px}
.room-slider .swiper{height:300px}
.room-slider .swiper-slide img{height:300px}
}
@media (max-width:900px){
.intro-grid{grid-template-columns:1fr;gap:22px}
.highlight-list{grid-template-columns:repeat(3,1fr)}
.main-nav ul{display:none}
.hero .swiper{height:58vh;min-height:320px}
.hero-inner h1{font-size:28px}
.lead{font-size:18px}
}
@media (max-width:768px){
.highlight-list{grid-template-columns:1fr}
.room-section{flex-direction:column;align-items:stretch;gap:18px}
.room-slider .swiper{height:240px}
.room-slider .swiper-slide img{height:240px}
.contact-grid{grid-template-columns:1fr}
.logo-text h2{font-size:16px}
.logo-text h4{font-size:11px}
}
@media (max-width:480px){
.hero-inner{padding:18px;width:calc(100% - 32px)}
.hero-inner h1{font-size:22px}
.lead{font-size:15px}
.btn{padding:10px 14px;font-size:15px}
.header-wrap{padding:6px 10px}
}

/* Extra helper: ensure .btn centered inside any container */
.centered{
display:flex;
justify-content:center;
align-items:center;
}

/* accessibility focus ring */
a:focus, button:focus, input:focus, textarea:focus{
outline:3px solid rgba(108,119,68,0.16);
outline-offset:2px;
border-radius:6px;
}

/* ensure swiper nav is visible on small screens */
.swiper-button-prev, .swiper-button-next{opacity:0.95}

/* small visual polish for cards */
.card-body h3, .blog-card h3{color:var(--brown);margin:8px 0 6px;font-size:18px}
.card-body p, .blog-card p{color:#444;font-size:15px;line-height:1.6}

/* ensure icon images inside icon-circle do not overflow */
.icon-circle img{width:36px;height:36px;object-fit:contain}

/* ---------- FOOTER MOBILE FIX ---------- */
@media (max-width: 768px) {
  .footer-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .footer-about {
    order: 1;
  }

  .footer-links {
    order: 2;
  }

  .footer-expertise {
    order: 3;
  }

  .footer-articles {
    order: 4;
  }

  /* Improve readability on mobile */
  .footer-grid h4 {
    margin-bottom: 8px;
    font-size: 18px;
  }

  .footer-grid ul li {
    margin-bottom: 6px;
  }

  .site-footer {
    text-align: left;
  }
}
/* ---------- ACTIVITIES / EXPERIENCES ---------- */

#activities .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

/* Activity card */
#activities .card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#activities .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}

/* Card image */
#activities .card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Card body */
#activities .card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Title */
#activities .card-body h3 {
  margin: 0 0 8px;
  color: var(--brown);
  font-size: 20px;
  font-weight: 700;
}

/* Description */
#activities .card-body p {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Read more / Explore button */
#activities .read-more-btn {
  margin-top: auto;
  background: var(--green);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

#activities .read-more-btn:hover {
  background: var(--brown);
  transform: translateY(-2px);
}

/* ---------- RESPONSIVE BREAKPOINTS ---------- */

/* Tablets */
@media (max-width: 768px) {
  #activities .card img {
    height: 180px;
  }

  #activities .card-body h3 {
    font-size: 18px;
  }

  #activities .card-body p {
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  #activities .cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #activities .card img {
    height: 160px;
  }

  #activities .read-more-btn {
    width: 100%;
    text-align: center;
  }
}
/* ---------- MODAL ---------- */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
}

.modal-content {
  background: #fff;
  max-width: 820px;
  margin: 40px auto;
  padding: 26px;
  border-radius: 14px;
  position: relative;
  animation: modalFade 0.3s ease;
}

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

.modal-content h2 {
  color: var(--brown);
  margin-bottom: 10px;
}

.modal-content h4 {
  margin-top: 18px;
  color: var(--green);
}

.modal-content ul {
  padding-left: 18px;
  margin-top: 6px;
}

.modal-content li {
  margin-bottom: 6px;
  font-size: 15px;
}

.close-btn {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 28px;
  cursor: pointer;
  color: #555;
}

/* Mobile modal */
@media (max-width: 480px) {
  .modal-content {
    padding: 18px;
  }
}
.blog-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  margin-top: 10px;
  color: #444;
}

.read-more {
  display: inline-block;
  margin-top: 10px;
  cursor: pointer;
  color: #2c6b3f;
  font-weight: 600;
}


.blog-card.open .blog-content {
  margin-bottom: 10px;
}

.blog-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.blog-content.open {
  margin-top: 10px;
}

.site-footer {
  background: #4A3C2A;
  padding: 50px 0 20px;
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

.footer-links a,
.footer-expertise a {
  color: #f5c16c;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links a:hover,
.footer-expertise a:hover {
  color: #fff;
  padding-left: 5px;
}

.copyright {
  text-align: center;
  margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 20px;
}
/* ===== MOBILE FOOTER FIX ===== */

@media (max-width: 768px) {

  .footer-grid {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .footer-about,
  .footer-links,
  .footer-expertise {
    width: 100%;
  }

  .footer-links ul,
  .footer-expertise ul {
    padding: 0;
  }

  .copyright {
    text-align: center;
    font-size: 13px;
  }

}