@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Logo ke colors */
  --brown:     #3D1F0A;   /* dark wood brown - logo border */
  --gold:      #C8902A;   /* gold/amber - logo text */
  --gold-light:#E8B84B;   /* lighter gold - hover */
  --cream:     #F5E6C8;   /* cream/beige - logo background */
  --green-dark:#1A3A1A;   /* dark forest green */
  --sky:       #7DB8D4;   /* sky blue accent */
  --muted:     #F9F3E8;   /* warm cream bg */
  --white:     #FFFFFF;
  --dark:      #1a1a1a;
  --text:      #3a2a1a;
  --text-light:#7a6a5a;
  --border:    #DDD0B8;
  --font:      'Montserrat',sans-serif;
  --serif:     'Playfair Display',serif;
  --shadow:    0 4px 20px rgba(61,31,10,.12);
  --shadow-lg: 0 8px 40px rgba(61,31,10,.20);
  --radius:    10px;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--white);line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit;transition:color .2s}
ul{list-style:none}
.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}

/* TOP BAR */
.topbar{background:var(--brown);color:#fff;padding:.45rem 1.5rem;font-size:.82rem}
.topbar-inner{max-width:1280px;margin:0 auto}
.topbar-left{display:flex;gap:1.5rem;align-items:center}
.topbar-left a{color:#fff;display:flex;align-items:center;gap:.4rem}
.topbar-left a:hover{color:var(--gold)}
.topbar-left i{color:var(--gold);font-size:.8rem}

/* HEADER / NAV */
.main-header{background:var(--brown);position:sticky;top:0;z-index:999;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.header-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;padding:.6rem 1.5rem;gap:1rem}
.logo-wrap{flex-shrink:0}
.site-logo{height:86px;width:auto;object-fit:contain}
.main-nav{display:none;gap:0;align-items:center;flex:1;justify-content:center}
@media(min-width:1024px){.main-nav{display:flex}}
.nav-link{color:rgba(255,255,255,.9);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.9rem .72rem;border-bottom:3px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.nav-link:hover{color:#fff;border-bottom-color:var(--gold)}
.arr{font-size:.62rem;margin-left:1px}
.contact-us-btn{display:none;background:transparent;color:#fff;border:1.5px solid #fff;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.55rem 1.2rem;white-space:nowrap;transition:background .2s,color .2s}
.contact-us-btn:hover{background:#fff;color:var(--brown)}
@media(min-width:1024px){.contact-us-btn{display:inline-block}}
.hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;margin-left:auto}
.hamburger span{display:block;width:26px;height:2px;background:#fff;transition:.3s}
@media(min-width:1024px){.hamburger{display:none}}
.mob-menu{display:none;flex-direction:column;background:var(--brown)}
.mob-menu.open{display:flex}
.mob-menu a{color:rgba(255,255,255,.88);padding:.9rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.mob-menu a:hover{color:var(--gold)}

/* HERO SLIDER */
.hero-wrap{position:relative;width:100%;height:100vh;overflow:hidden;background:var(--brown)}
.hslider{position:relative;width:100%;height:100%}
.hslide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease;z-index:1}
.hslide.active{opacity:1;z-index:2}
.hslide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hoverlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.42);z-index:3;pointer-events:none}
.harrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.5);color:#fff;width:48px;height:48px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.harrow:hover{background:var(--gold);border-color:var(--gold)}
.harrow-l{left:20px}.harrow-r{right:20px}
.hdots{position:absolute;bottom:6rem;left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:.6rem}
.hdot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);border:none;cursor:pointer;padding:0;transition:background .3s,width .3s}
.hdot.active{background:var(--gold);width:26px;border-radius:5px}

/* BOOKING BAR */
.bbar{position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);width:95%;max-width:1100px;background:#fff;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.22);padding:1.2rem;z-index:20}
.bform{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end}
.bf{flex:1 1 130px;display:flex;flex-direction:column;gap:.25rem}
.bf label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text)}
.bf input,.bf select{border:1px solid #ddd;border-radius:6px;padding:.48rem .7rem;font-size:.85rem;color:#333;outline:none;width:100%;font-family:var(--font)}
.bf input:focus,.bf select:focus{border-color:var(--gold)}
.bf-ic{position:relative;display:flex;align-items:center}
.bf-ic i{position:absolute;left:.6rem;color:var(--brown);font-size:.8rem;pointer-events:none}
.bf-ic input{padding-left:1.9rem}
.bnow-btn{background:var(--gold);color:#000;border:none;padding:.65rem 1.6rem;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:10px 10px 0 0;white-space:nowrap;transition:background .2s}
.bnow-btn:hover{background:var(--gold-light)}

/* ABOUT */
.about-sec{background:#fff;padding:8rem 1.5rem 4rem}
.about-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
@media(min-width:1024px){.about-grid{grid-template-columns:7fr 5fr}}
.about-title{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--brown);font-style:italic;margin-bottom:1.2rem;line-height:1.3}
.about-desc{color:var(--text);line-height:1.8;margin-bottom:1.8rem;font-size:.95rem}
.amenities-title{font-size:1.2rem;font-weight:700;color:#222;margin-bottom:1rem}
.amenities-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}
@media(min-width:640px){.amenities-list{grid-template-columns:repeat(3,1fr)}}
.amenity-row{display:flex;align-items:center;gap:.5rem;font-size:.84rem;font-weight:500;color:var(--text)}
.amenity-check{background:rgba(61,31,10,.1);color:var(--brown);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.65rem}
.about-imgs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;height:460px}
.about-img-tall img{width:100%;height:100%;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}
.about-img-col2{display:flex;flex-direction:column;gap:1rem}
.about-img-col2 img{width:100%;height:calc(50% - .5rem);object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}

/* PACKAGES */
.packages-sec{background:var(--muted);padding:4rem 1.5rem}
.sec-title-orange{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--gold);text-align:center;margin-bottom:1rem}
.sec-title-green{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--brown);text-align:center;margin-bottom:2.5rem}
.sec-heading-center{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);text-align:center;margin-bottom:2rem}
.green-h{color:var(--brown)}.orange-h{color:var(--gold)}
.sec-desc{color:var(--text-light);text-align:center;max-width:860px;margin:0 auto 2.5rem;font-size:.95rem;line-height:1.8}
.pkg-layout{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
@media(min-width:900px){.pkg-layout{grid-template-columns:1fr 1fr}}
.pkg-image-wrap{border-radius:12px;overflow:hidden;box-shadow:var(--shadow-lg);height:500px}
.pkg-main-img{width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.pkg-cards{display:flex;flex-direction:column;gap:.8rem}
.pkg-card{display:flex;align-items:flex-start;gap:1rem;background:#fff;border-radius:10px;padding:1rem 1.2rem;box-shadow:0 2px 8px rgba(0,0,0,.07);cursor:pointer;transition:box-shadow .2s,transform .2s;border-left:4px solid transparent}
.pkg-card:hover{box-shadow:var(--shadow);transform:translateX(4px)}
.pkg-card.active{border-left-color:var(--brown);background:#fafff6}
.pkg-card-icon{flex-shrink:0;width:50px;height:50px;border-radius:8px;overflow:hidden}
.pkg-card-icon img{width:100%;height:100%;object-fit:cover}
.pkg-card-body h4{font-size:.95rem;font-weight:700;color:var(--dark);margin-bottom:.25rem}
.pkg-card.active .pkg-card-body h4{color:var(--brown)}
.pkg-card-body p{font-size:.8rem;color:var(--text-light);line-height:1.6}

/* ACCOMMODATION */
.accom-sec{background:#fff;padding:4rem 1.5rem}
.accom-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.accom-grid{grid-template-columns:1fr 1fr}}
.accom-card{position:relative;border-radius:12px;overflow:hidden;height:420px;box-shadow:var(--shadow-lg)}
.accom-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s;display:block}
.accom-card:hover img{transform:scale(1.05)}
.accom-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.3) 55%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem}
.accom-overlay h3{font-family:var(--serif);color:#fff;font-size:1.8rem;margin-bottom:.4rem}
.accom-overlay p{color:rgba(255,255,255,.88);font-size:1rem;margin-bottom:1.2rem}
.know-more-btn{display:inline-block;background:var(--gold);color:#000;font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;padding:.65rem 1.6rem;border-radius:10px 10px 0 0;transition:background .2s}
.know-more-btn:hover{background:var(--gold-light)}

/* ACTIVITIES */
.activities-sec{background:var(--muted);padding:4rem 1.5rem;border-top:1px solid #e0e0d8}
.act-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media(min-width:768px){.act-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.act-grid{grid-template-columns:repeat(5,1fr)}}
.act-card{background:#fff;border-radius:10px;padding:.6rem;box-shadow:0 2px 10px rgba(0,0,0,.07);cursor:pointer;transition:box-shadow .3s,transform .3s;text-align:center}
.act-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.act-img{aspect-ratio:1;overflow:hidden;border-radius:8px;margin-bottom:.6rem}
.act-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;display:block}
.act-card:hover .act-img img{transform:scale(1.1)}
.act-name{color:var(--brown);font-weight:700;font-size:.8rem;padding-bottom:.4rem}

/* SAFARI */
.safari-sec{background:var(--brown);padding:5rem 1.5rem}
.safari-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
@media(min-width:768px){.safari-grid{grid-template-columns:1fr 1fr}}
.safari-text h2{font-family:var(--serif);color:#fff;font-size:clamp(2rem,5vw,3.2rem);margin-bottom:1.5rem}
.safari-text p{color:rgba(255,255,255,.9);font-size:.95rem;line-height:1.8;margin-bottom:2rem}
.safari-imgs{display:flex;flex-direction:column;gap:1.2rem}
.safari-imgs img{width:100%;height:220px;object-fit:cover;border-radius:10px;box-shadow:var(--shadow-lg);display:block}

/* GALLERY */
.gallery-sec{background:#fff;padding:4rem 1.5rem}
.gallery-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.5rem}
.gallery-header h2{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--brown)}
.gal-controls{display:flex;gap:.5rem}
.gal-btn{background:var(--brown);color:#fff;border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;font-size:1rem}
.gal-btn:hover{background:var(--gold)}
.gal-wrapper{overflow:hidden}
.gal-track{display:flex;gap:1.2rem;transition:transform .5s ease}
.gal-col{flex:0 0 85%;display:flex;flex-direction:column;gap:1.2rem;min-width:0}
@media(min-width:640px){.gal-col{flex:0 0 45%}}
@media(min-width:1024px){.gal-col{flex:0 0 30%}}
.gal-col img{width:100%;height:240px;object-fit:cover;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.08);display:block}

/* WHY CHOOSE */
.why-sec{background:var(--muted);padding:4rem 1.5rem}
.why-grid{display:grid;grid-template-columns:1fr;gap:1.8rem;margin-top:1.5rem}
@media(min-width:640px){.why-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:transform .3s}
.why-card:hover{transform:translateY(-6px)}
.why-card img{width:100%;height:200px;object-fit:cover;display:block}
.why-card-body{padding:1.4rem}
.why-card-body h3{font-size:1.1rem;font-weight:700;color:var(--brown);margin-bottom:.4rem}
.why-card-body p{font-size:.84rem;color:var(--text-light);line-height:1.7}

/* GUEST REVIEWS */
.reviews-sec{position:relative;padding:5rem 0;overflow:hidden}
.reviews-bg{position:absolute;inset:0;z-index:0}
.reviews-bg-img{width:100%;height:100%;object-fit:cover;filter:brightness(.3);display:block}
.reviews-bg-overlay{position:absolute;inset:0;background:rgba(30,45,10,.7)}
.reviews-content{position:relative;z-index:2}
.reviews-main-title{font-family:var(--serif);font-size:clamp(2rem,4vw,2.8rem);color:#fff;text-align:center;margin-bottom:1rem}
.reviews-sub{color:rgba(255,255,255,.82);text-align:center;max-width:780px;margin:0 auto 2.5rem;font-size:.9rem;line-height:1.8}
.rev-slider-wrap{overflow:hidden;margin:0 -.5rem}
.rev-track{display:flex;gap:1.2rem;transition:transform .5s ease;padding:0 .5rem}
.rev-slide-card{flex:0 0 calc(33.333% - .9rem);background:#fff;border-radius:12px;padding:1.5rem 1.3rem 1.1rem;box-shadow:0 6px 24px rgba(0,0,0,.15);display:flex;flex-direction:column;gap:.75rem;min-width:0}
@media(max-width:900px){.rev-slide-card{flex:0 0 calc(50% - .7rem)}}
@media(max-width:580px){.rev-slide-card{flex:0 0 calc(85% - .5rem)}}
.rev-card-head{display:flex;align-items:center;gap:.8rem}
.rev-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--brown);flex-shrink:0;display:block}
.rev-name{font-weight:700;font-size:.92rem;color:#1a1a1a;margin-bottom:.15rem}
.rev-stars-row{color:var(--gold);font-size:.78rem;display:flex;gap:2px}
.rev-body{color:var(--text);font-size:.84rem;line-height:1.7;flex:1}
.rev-source{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:#888;border-top:1px solid #eee;padding-top:.7rem;margin-top:auto}
.rev-source img{height:18px;width:auto;object-fit:contain;display:inline-block}
.rev-dots{display:flex;justify-content:center;gap:.6rem;margin-top:1.8rem}
.rev-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;transition:background .3s,width .3s;padding:0}
.rev-dot.active{background:var(--gold);width:26px;border-radius:5px}

/* FOOTER */
.site-footer{background:var(--brown);color:#fff;padding:4rem 1.5rem 1rem;border-top:6px solid var(--gold)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;max-width:1280px;margin:0 auto 2rem}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
.footer-logo-img{height:72px;width:auto;object-fit:contain;margin-bottom:1rem;filter:brightness(0) invert(1);display:block}
.footer-about p{color:rgba(255,255,255,.78);font-size:.88rem;line-height:1.8;margin-bottom:1.2rem}
.footer-social{display:flex;gap:.6rem}
.footer-social a{background:rgba(255,255,255,.1);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;transition:background .2s}
.footer-social a:hover{background:var(--gold);color:#000}
.footer-col h4{font-family:var(--serif);font-size:1.2rem;color:var(--gold);margin-bottom:1.2rem}
.footer-col ul li{margin-bottom:.6rem}
.footer-col ul li a{color:rgba(255,255,255,.75);font-size:.88rem;transition:color .2s}
.footer-col ul li a:hover{color:var(--gold)}
.footer-contact-list li{display:flex;gap:.8rem;margin-bottom:.9rem;font-size:.88rem;color:rgba(255,255,255,.78);align-items:flex-start}
.footer-contact-list i{color:var(--gold);margin-top:3px;flex-shrink:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:1rem;text-align:center;color:rgba(255,255,255,.5);font-size:.8rem;max-width:1280px;margin:0 auto}

/* SIDE BUTTONS */
.side-btns{
  position:fixed;right:0;top:50%;
  transform:translateY(-50%);
  z-index:800;display:flex;
  flex-direction:column;gap:0;
  box-shadow:-3px 0 12px rgba(0,0,0,.15);
}
.side-btn{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  padding:2rem .8rem;
  font-size:.72rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
  display:block;cursor:pointer;
  transition:filter .2s,transform .2s;
  white-space:nowrap;text-decoration:none;
}
.side-btn:hover{filter:brightness(1.12);}
.side-btn-green{background:#354114;color:#fff;border-radius:0 0 0 8px;}
.side-btn-orange{background:#FFA534;color:#1a1a1a;border-radius:0 0 0 8px;}

/* WHATSAPP */
.whatsapp-fab{position:fixed;bottom:1.5rem;left:1.5rem;z-index:800;background:#25D366;color:#fff;border-radius:50%;width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 4px 16px rgba(0,0,0,.2);transition:transform .2s}
.whatsapp-fab:hover{transform:scale(1.1)}

/* MOBILE */
@media(max-width:767px){
  .bbar{transform:translate(-50%,0);position:relative;bottom:auto;left:auto;margin:1.5rem auto;border-radius:12px}
  .hero-wrap{height:70vh}
  .about-sec{padding:3rem 1.5rem}
}



/* =====================
   LOGO COLOR OVERRIDES
   Brown + Gold theme from Jawai Mount Down logo
   ===================== */

/* Topbar */
.topbar { background: var(--brown) !important; }
.topbar-left a { color: var(--cream); }
.topbar-left i { color: var(--gold); }
.topbar-left a:hover { color: var(--gold-light); }

/* Header / Nav */
.main-header { background: var(--brown) !important; border-bottom: 2px solid var(--gold); }
.nav-link { color: var(--cream); }
.nav-link:hover, .nav-link.active { color: var(--gold-light); border-bottom-color: var(--gold); }
.contact-us-btn { color: var(--gold); border-color: var(--gold); }
.contact-us-btn:hover { background: var(--gold); color: var(--brown); }
.hamburger span { background: var(--cream); }
.mob-menu { background: var(--brown); border-top: 1px solid var(--gold); }
.mob-menu a { color: var(--cream); }
.mob-menu a:hover { color: var(--gold); }

/* Hero dots + arrows */
.hdot.active { background: var(--gold); }
.harrow:hover { background: var(--gold); border-color: var(--gold); }

/* Booking bar button */
.bnow-btn { background: var(--gold); color: var(--brown); font-weight: 800; }
.bnow-btn:hover { background: var(--gold-light); }
.bf input:focus, .bf select:focus { border-color: var(--gold); }
.bf-ic i { color: var(--brown); }

/* About section */
.about-title { color: var(--brown); }
.amenity-check { background: rgba(200,144,42,.15); color: var(--gold); }

/* Section titles */
.sec-title-orange { color: var(--gold); }
.sec-title-green { color: var(--brown); }
.sec-heading-center.green-h, .green-h { color: var(--brown); }
.orange-h { color: var(--gold); }

/* Package cards */
.pkg-card.active { border-left-color: var(--gold); background: #FDF8EE; }
.pkg-card.active .pkg-card-body h4 { color: var(--brown); }
.pkg-card:hover { border-left-color: var(--gold); }

/* Know more / buttons */
.know-more-btn { background: var(--gold); color: var(--brown); }
.know-more-btn:hover { background: var(--gold-light); }

/* Activities */
.act-name { color: var(--brown); }
.act-card:hover { box-shadow: 0 8px 30px rgba(200,144,42,.2); }

/* Safari section */
.safari-sec { background: var(--brown) !important; border-top: 3px solid var(--gold); }

/* Gallery controls */
.gal-btn { background: var(--brown); }
.gal-btn:hover { background: var(--gold); color: var(--brown); }
.gallery-header h2 { color: var(--brown); }

/* Why choose */
.why-card-body h3 { color: var(--brown); }
.why-card:hover { box-shadow: 0 8px 30px rgba(200,144,42,.18); }

/* Reviews */
.rev-stars-row { color: var(--gold); }
.rev-dot.active { background: var(--gold); }
.rev-avatar { border-color: var(--brown); }
.rev-name { color: var(--brown); }

/* Footer */
.site-footer { background: var(--brown) !important; border-top: 6px solid var(--gold) !important; }
.footer-col h4 { color: var(--gold); }
.footer-col ul li a:hover { color: var(--gold); }
.footer-social a:hover { background: var(--gold); color: var(--brown); }
.footer-contact-list i { color: var(--gold); }

/* Side buttons */
.side-btn-green { background: var(--brown) !important; color: var(--cream); }
.side-btn-orange { background: var(--gold) !important; color: var(--brown); font-weight: 800; }

/* Accom overlay button */
.accom-overlay h3 { font-family: var(--serif); }

/* Scrollbar accent */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* Muted bg - warm cream */
.about-sec, .accom-sec, .gallery-sec, .why-sec, .reviews-sec + section { background: #fff; }
.packages-sec, .activities-sec { background: var(--muted) !important; }
.muted { background: var(--muted); }

/* =====================
   NEW FOOTER - Thour Style
   ===================== */
.site-footer { background: #fff !important; border-top: none !important; padding: 0 !important; color: var(--dark) !important; }

.footer-main {
  background: var(--brown);
  padding: 2.5rem 0 2rem;
  position: relative;
  overflow: hidden;
}

/* Logo row */
.footer-logo-row { margin-bottom: 1.5rem; text-align: center; }
.footer-logo-img {
  height: 80px; width: auto; object-fit: contain;
  filter: none !important;
  margin: 0 auto 1rem auto;
  display: block;
  background: rgba(255,255,255,.08);
  padding: .4rem .8rem;
  border-radius: 8px;
}
.footer-divider {
  border: none;
  border-top: 1px solid rgba(200,144,42,.4);
  margin: 0;
}

/* 5-col grid */
.footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr 1fr 1.2fr 1fr;
  gap: 2rem;
  padding-top: 2rem;
}
@media(max-width:1024px){ .footer-cols { grid-template-columns: repeat(3,1fr); } }
@media(max-width:640px){  .footer-cols { grid-template-columns: 1fr 1fr; } }
@media(max-width:420px){  .footer-cols { grid-template-columns: 1fr; } }

.footer-col h4 {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(200,144,42,.35);
  display: inline-block;
}

.footer-addr {
  font-size: .84rem;
  color: rgba(255,255,255,.75);
  line-height: 1.9;
}
.footer-addr strong { color: var(--gold-light); }

.footer-contact-item {
  font-size: .84rem;
  color: rgba(255,255,255,.75);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.footer-contact-item i { color: var(--gold); font-size: .8rem; }
.footer-contact-item a { color: rgba(255,255,255,.75); }
.footer-contact-item a:hover { color: var(--gold); }

.footer-social {
  display: flex;
  gap: .5rem;
  margin-top: .8rem;
}
.footer-social a {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(200,144,42,.4);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7); font-size: .78rem;
  transition: background .2s, color .2s, border-color .2s;
}
.footer-social a:hover { background: var(--gold); color: var(--brown); border-color: var(--gold); }

.footer-links { display: flex; flex-direction: column; gap: .45rem; }
.footer-links li a {
  font-size: .84rem;
  color: rgba(255,255,255,.7);
  transition: color .2s, padding-left .2s;
}
.footer-links li a:hover { color: var(--gold); padding-left: 5px; }

/* Paw watermark */
.footer-paw {
  position: absolute;
  right: 3%;
  bottom: -10px;
  font-size: 13rem;
  color: rgba(200,144,42,.07);
  pointer-events: none;
  line-height: 1;
}

/* Bottom bar */
.footer-bottom-bar {
  background: #e8b84b ;
  padding: .9rem 0;
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-bottom-bar p {
  font-size: .78rem;
  color: rgb(0 0 0);
}
.footer-bottom-links {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.footer-bottom-links a {
  font-size: .78rem;
  color: rgb(0 0 0);
  transition: color .2s;
}
.footer-bottom-links a:hover { color: var(--gold); }

/* =====================
   GALLERY 4-COLUMN GRID
   ===================== */
.gallery-sec { background: var(--muted) !important; padding: 4rem 1.5rem !important; }

.gallery-4grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  min-height: 600px;
}
@media(max-width:900px)  { .gallery-4grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:500px)  { .gallery-4grid { grid-template-columns: 1fr 1fr; } }

.g4col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.g4item {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  height: 180px;
}
.g4item.tall { height: 280px; }

.g4item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.g4item:hover img { transform: scale(1.08); }

.g4overlay {
  position: absolute;
  inset: 0;
  background: rgba(61,31,10,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, opacity .3s;
  color: #fff;
  font-size: 1.4rem;
  opacity: 0;
}
.g4item:hover .g4overlay {
  background: rgba(61,31,10,.45);
  opacity: 1;
}

/* Lightbox */
.g4lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.g4lightbox.open { display: flex; }
.g4lightbox img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.g4lb-close {
  position: absolute; top: 18px; right: 24px;
  background: none; border: none; color: #fff;
  font-size: 2.5rem; cursor: pointer; line-height: 1;
  transition: color .2s;
}
.g4lb-close:hover { color: var(--gold); }
.g4lb-prev, .g4lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.4);
  color: #fff; width: 48px; height: 48px; border-radius: 50%;
  font-size: 1.2rem; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: background .2s;
}
.g4lb-prev { left: 20px; }
.g4lb-next { right: 20px; }
.g4lb-prev:hover, .g4lb-next:hover { background: var(--gold); border-color: var(--gold); color: var(--brown); }

/* =====================
   FOOTER GALLERY STRIP
   ===================== */
.footer-gallery-strip {
  background: var(--brown);
  padding: 0;
  border-top: 3px solid var(--gold);
}

.fg-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
}
@media(max-width:900px) { .fg-grid { grid-template-columns: repeat(4,1fr); } }
@media(max-width:500px) { .fg-grid { grid-template-columns: repeat(4,1fr); } }

.fg-item {
  position: relative;
  overflow: hidden;
  height: 140px;
  cursor: pointer;
}
@media(max-width:900px) { .fg-item { height: 110px; } }
@media(max-width:500px) { .fg-item { height: 80px; } }

.fg-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
  filter: brightness(.85);
}
.fg-item:hover img {
  transform: scale(1.1);
  filter: brightness(1);
}

.fg-overlay {
  position: absolute; inset: 0;
  background: rgba(61,31,10,0);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem;
  opacity: 0;
  transition: background .3s, opacity .3s;
}
.fg-item:hover .fg-overlay {
  background: rgba(200,144,42,.35);
  opacity: 1;
}

/* Lightbox for footer gallery */
.fg-lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.93); z-index: 9999;
  align-items: center; justify-content: center;
}
.fg-lightbox.open { display: flex; }
.fg-lightbox img {
  max-width: 90vw; max-height: 88vh;
  object-fit: contain; border-radius: 6px;
}
.fg-close {
  position: absolute; top: 18px; right: 24px;
  background: none; border: none; color: #fff;
  font-size: 2.5rem; cursor: pointer; line-height: 1;
  transition: color .2s;
}
.fg-close:hover { color: var(--gold); }
.fg-prev, .fg-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.4);
  color: #fff; width: 48px; height: 48px; border-radius: 50%;
  font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.fg-prev { left: 20px; } .fg-next { right: 20px; }
.fg-prev:hover, .fg-next:hover { background: var(--gold); border-color: var(--gold); color: var(--brown); }

/* =====================
   ACCOMMODATION DETAIL PAGE
   ===================== */

/* Hero Banner */
.accom-page-hero{position:relative;height:55vh;min-height:380px;overflow:hidden;margin-top:0}
.accom-page-hero img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.accom-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.25),rgba(61,31,10,.75))}
.accom-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:2.5rem 3rem;z-index:2}
.accom-breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:.78rem;color:rgba(255,255,255,.75);margin-bottom:.8rem;flex-wrap:wrap}
.accom-breadcrumb a{color:rgba(255,255,255,.75);transition:color .2s}.accom-breadcrumb a:hover{color:var(--gold)}
.accom-breadcrumb span{color:var(--gold)}
.accom-hero-content h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.5rem);color:#fff;margin-bottom:.4rem;line-height:1.2}
.accom-hero-content p{color:rgba(255,255,255,.85);font-size:1rem}

/* Main Section */
.accom-detail-sec{padding:4rem 1.5rem;background:var(--muted)}
.accom-detail-grid{display:grid;grid-template-columns:1fr 340px;gap:2.5rem;align-items:start;max-width:1280px;margin:0 auto}
@media(max-width:960px){.accom-detail-grid{grid-template-columns:1fr}}

/* Price Tag */
.accom-price-tag{display:inline-flex;align-items:baseline;gap:.4rem;background:var(--brown);color:#fff;padding:.6rem 1.4rem;border-radius:8px 8px 0 0;margin-bottom:1.5rem}
.price-from{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.price-amt{font-family:var(--serif);font-size:1.8rem;font-weight:700;color:var(--gold)}
.price-per{font-size:.75rem;opacity:.8}

.accom-detail-title{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--brown);margin-bottom:1.2rem}
.accom-detail-desc{color:var(--text-light);line-height:1.9;margin-bottom:1.2rem;font-size:.95rem}

/* Features Grid */
.accom-features-title{font-family:var(--serif);font-size:1.3rem;color:var(--brown);margin-bottom:1.2rem;padding-bottom:.6rem;border-bottom:2px solid rgba(200,144,42,.3)}
.accom-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(min-width:640px){.accom-features-grid{grid-template-columns:repeat(3,1fr)}}
.accom-feature-item{display:flex;align-items:center;gap:.7rem;font-size:.88rem;font-weight:500;color:var(--text)}
.accom-feat-icon{width:34px;height:34px;background:rgba(200,144,42,.12);color:var(--gold);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}

/* Gallery Strip */
.accom-gallery-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:2rem}
@media(max-width:640px){.accom-gallery-strip{grid-template-columns:repeat(2,1fr)}}
.accom-gal-item{border-radius:8px;overflow:hidden;height:120px;cursor:pointer}
.accom-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.accom-gal-item:hover img{transform:scale(1.08)}

/* Other Room Card */
.accom-other-room{margin-top:2rem}
.accom-other-room h3{font-family:var(--serif);color:var(--brown);font-size:1.2rem;margin-bottom:1rem}
.other-room-card{display:flex;gap:1rem;background:#fff;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s;align-items:center}
.other-room-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.other-room-card img{width:120px;height:90px;object-fit:cover;flex-shrink:0}
.other-room-info{padding:1rem;flex:1}
.other-room-info h4{font-family:var(--serif);color:var(--brown);font-size:1.1rem;margin-bottom:.3rem}
.other-room-info p{color:var(--gold);font-weight:700;font-size:.9rem;margin-bottom:.3rem}
.other-room-info span{font-size:.8rem;color:var(--text-light)}

/* Booking Sidebar */
.accom-book-card{background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;position:sticky;top:90px}
.book-card-header{background:var(--brown);padding:1.4rem 1.5rem;text-align:center}
.book-card-header h3{font-family:var(--serif);color:#fff;font-size:1.3rem;margin-bottom:.3rem}
.book-card-header p{color:var(--gold);font-weight:700;font-size:1.1rem}
.accom-book-form{padding:1.2rem 1.5rem}
.book-field{margin-bottom:1rem}
.book-field label{display:flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brown);margin-bottom:.35rem}
.book-field input,.book-field select{width:100%;border:1.5px solid var(--border);border-radius:6px;padding:.55rem .8rem;font-size:.88rem;font-family:var(--font);color:var(--text);outline:none;transition:border-color .2s}
.book-field input:focus,.book-field select:focus{border-color:var(--gold)}
.book-now-btn-full{width:100%;background:var(--gold);color:var(--brown);border:none;padding:.9rem;font-size:.85rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:8px 8px 0 0;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}
.book-now-btn-full:hover{background:var(--gold-light)}
.book-card-footer{padding:1rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;border-top:1px solid var(--border)}
.book-card-footer a{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-light);transition:color .2s}
.book-card-footer a:hover{color:var(--brown)}
.book-card-footer i{color:var(--gold)}

/* Highlights */
.accom-highlights{background:#fff;border-radius:12px;padding:1.4rem;margin-top:1rem;box-shadow:var(--shadow)}
.accom-highlights h4{font-size:.9rem;font-weight:700;color:var(--brown);margin-bottom:1rem;display:flex;align-items:center;gap:.4rem}
.accom-highlights ul{display:flex;flex-direction:column;gap:.5rem}
.accom-highlights li{display:flex;align-items:center;gap:.6rem;font-size:.84rem;color:var(--text-light)}
.accom-highlights .fa-check{color:var(--gold);font-size:.75rem}

/* Switch Section */
.accom-switch-sec{background:var(--brown);padding:4rem 1.5rem}
.accom-switch-sec h2{font-family:var(--serif);color:#fff;text-align:center;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:2rem}
.accom-switch-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:900px;margin:0 auto}
@media(max-width:640px){.accom-switch-grid{grid-template-columns:1fr}}
.accom-switch-card{position:relative;border-radius:12px;overflow:hidden;height:280px;display:block;border:3px solid transparent;transition:border-color .3s,transform .3s}
.accom-switch-card.active{border-color:var(--gold)}
.accom-switch-card:hover{transform:translateY(-4px)}
.accom-switch-card img{width:100%;height:100%;object-fit:cover;display:block}
.accom-switch-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.2));display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem}
.accom-switch-overlay h3{font-family:var(--serif);color:#fff;font-size:1.5rem;margin-bottom:.3rem}
.accom-switch-overlay p{color:var(--gold);font-weight:700;margin-bottom:.8rem}
.switch-btn{display:inline-block;background:var(--gold);color:var(--brown);padding:.4rem 1rem;border-radius:6px 6px 0 0;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* =====================
   CONTACT SECTION (Single Page)
   ===================== */
.contact-section { background: var(--white); padding: 5rem 1.5rem; }
.contact-grid-sp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media(max-width:860px){ .contact-grid-sp { grid-template-columns: 1fr; } }

/* Info Card */
.contact-info-card-sp {
  background: var(--brown);
  color: #fff;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.contact-info-card-sp h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.ci-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.2rem;
  align-items: flex-start;
}
.ci-item i { color: var(--gold); font-size: 1rem; margin-top: 3px; flex-shrink: 0; }
.ci-item strong { display: block; font-size: .8rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.ci-item span { font-size: .9rem; color: rgba(255,255,255,.88); line-height: 1.6; }
.ci-item a { color: rgba(255,255,255,.88); }
.ci-item a:hover { color: var(--gold); }

/* Map */
.contact-map-sp { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.contact-map-sp iframe { width: 100%; height: 240px; border: none; display: block; }

/* Form */
.contact-form-sp {
  background: var(--muted);
  border-radius: 12px;
  padding: 2rem;
}
.contact-form-sp h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--brown);
  margin-bottom: .4rem;
}
.contact-form-sp > p { color: var(--text-light); font-size: .9rem; margin-bottom: 1.5rem; }

.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media(max-width:540px){ .cf-row { grid-template-columns: 1fr; } }
.cf-group { margin-bottom: 1rem; }
.cf-group label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brown); margin-bottom: .35rem; }
.cf-group input,
.cf-group textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: .6rem .9rem;
  font-size: .88rem;
  font-family: var(--font);
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color .2s;
}
.cf-group input:focus,
.cf-group textarea:focus { border-color: var(--gold); }
.cf-group textarea { resize: vertical; min-height: 110px; }

.cf-submit {
  width: 100%;
  background: var(--gold);
  color: var(--brown);
  border: none;
  padding: .85rem;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: background .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.cf-submit:hover { background: var(--gold-light); }

/* Alert */
.contact-alert {
  padding: .9rem 1.2rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.contact-alert.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.contact-alert.error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* Hero slide content */
.hslide-content{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;padding:0 2rem 8rem;max-width:780px;padding-left:clamp(1.5rem,8vw,7rem)}
.hslide-tag{display:inline-block;background:var(--gold);color:var(--brown);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:.35rem 1rem;border-radius:4px 4px 0 0;margin-bottom:1rem;width:fit-content;opacity:0;transform:translateY(16px);transition:opacity .6s .2s ease,transform .6s .2s ease}
.hslide.active .hslide-tag{opacity:1;transform:translateY(0)}
.hslide-content h1{font-family:var(--serif);font-size:clamp(2.2rem,6vw,4.2rem);color:#fff;line-height:1.15;margin-bottom:1rem;text-shadow:0 2px 20px rgba(0,0,0,.4);opacity:0;transform:translateY(24px);transition:opacity .7s .35s ease,transform .7s .35s ease}
.hslide.active .hslide-content h1{opacity:1;transform:translateY(0)}
.hslide-content p{font-size:clamp(.9rem,2vw,1.1rem);color:rgba(255,255,255,.88);margin-bottom:2rem;max-width:480px;line-height:1.7;opacity:0;transform:translateY(20px);transition:opacity .7s .5s ease,transform .7s .5s ease}
.hslide.active .hslide-content p{opacity:1;transform:translateY(0)}
.hslide-btn{display:inline-block;background:var(--gold);color:var(--brown);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:.7rem 1.8rem;border-radius:10px 10px 0 0;transition:background .2s;opacity:0;transform:translateY(16px);transition:opacity .6s .65s ease,transform .6s .65s ease,background .2s}
.hslide.active .hslide-btn{opacity:1;transform:translateY(0)}
.hslide-btn:hover{background:var(--gold-light);color:var(--brown)}
@media(max-width:767px){.hslide-content{padding:0 1.5rem 10rem}}

/* Page Banner (all inner pages) */
.page-banner-wrap{position:relative;height:50vh;min-height:320px;overflow:hidden}
.page-banner-wrap img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.page-banner-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(61,31,10,.78))}
.page-banner-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:2.5rem 3rem;z-index:2}
.page-breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:.78rem;color:rgba(255,255,255,.75);margin-bottom:.7rem;flex-wrap:wrap}
.page-breadcrumb a{color:rgba(255,255,255,.75);transition:color .2s}.page-breadcrumb a:hover{color:var(--gold)}
.page-breadcrumb span{color:var(--gold)}
.page-banner-content h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.2rem);color:#fff;margin-bottom:.4rem;line-height:1.2}
.page-banner-content>p{color:rgba(255,255,255,.85);font-size:1rem}

/* =====================
   SERVICES & ACTIVITY SECTION
   (Icon grid - like thournatureresorts.com)
   ===================== */
.amenities-icon-sec {
  background: #fff;
  padding: 5rem 1.5rem;
  border-top: 1px solid var(--border);
}
.amenities-icon-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--brown);
  text-align: center;
  margin-bottom: 1rem;
  font-style: italic;
}
.amenities-icon-desc {
  color: var(--text-light);
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3rem;
  font-size: .93rem;
  line-height: 1.8;
}

/* 6-column icon grid */
.amenities-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem 1rem;
  margin-bottom: 3rem;
}
@media(max-width: 1024px) { .amenities-icon-grid { grid-template-columns: repeat(4, 1fr); } }
@media(max-width: 640px)  { .amenities-icon-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width: 400px)  { .amenities-icon-grid { grid-template-columns: repeat(2, 1fr); } }

.amenity-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  transition: transform .2s;
  padding: .5rem;
}
.amenity-icon-card:hover { transform: translateY(-4px); }

.amenity-icon-wrap {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #e0d8cc;
  border-radius: 50%;
  color: var(--brown);
  font-size: 1.6rem;
  transition: background .2s, color .2s, border-color .2s;
  background: #fff;
}
.amenity-icon-card:hover .amenity-icon-wrap {
  background: var(--brown);
  color: var(--gold);
  border-color: var(--brown);
}

.amenity-icon-card span {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.4;
}

/* CTA Button */
.amenities-icon-cta {
  text-align: center;
  margin-top: 1rem;
}
.amenities-see-all-btn {
  display: inline-block;
  background: var(--brown);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .9rem 2.5rem;
  border-radius: 4px;
  transition: background .2s, transform .2s;
}
.amenities-see-all-btn:hover {
  background: var(--gold);
  color: var(--brown);
  transform: translateY(-2px);
}

/* =====================
   WHY CHOOSE US — Icon Style
   (like thournatureresorts.com)
   ===================== */
.why-choose-icon-sec {
  background: #fff;
  padding: 5rem 1.5rem;
  border-top: 1px solid var(--border);
}
.why-choose-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--brown);
  text-align: center;
  margin-bottom: 1rem;
  font-style: italic;
}
.why-choose-desc {
  color: var(--text-light);
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.5rem;
  font-size: .93rem;
  line-height: 1.8;
}
.why-choose-icon-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}
.wc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 160px;
  text-align: center;
  cursor: pointer;
  transition: transform .2s;
}
.wc-item:hover { transform: translateY(-5px); }
.wc-icon-wrap {
  width: 100px;
  height: 100px;
  border: 1.5px solid #c8b89a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown);
  transition: background .25s, color .25s, border-color .25s;
  background: #fff;
}
.wc-item:hover .wc-icon-wrap {
  background: var(--brown);
  color: var(--gold);
  border-color: var(--brown);
}
.wc-item span {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}
@media(max-width:640px){
  .wc-item { width: 130px; }
  .wc-icon-wrap { width: 80px; height: 80px; }
}

/* =====================
   GOOGLE REVIEWS SECTION
   ===================== */
.google-reviews-sec {
  background: var(--muted);
  padding: 5rem 1.5rem;
  border-top: 1px solid var(--border);
}

/* Header */
.gr-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 3rem;
}
.gr-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--brown);
  font-style: italic;
  margin-bottom: .5rem;
}
.gr-subtitle {
  color: var(--text-light);
  font-size: .92rem;
  line-height: 1.7;
  max-width: 520px;
}
.gr-rating-summary {
  text-align: center;
  flex-shrink: 0;
}
.gr-score {
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--brown);
  line-height: 1;
  margin-bottom: .3rem;
}
.gr-stars-big {
  color: #fbbc05;
  font-size: 1.1rem;
  margin-bottom: .3rem;
}
.gr-total {
  font-size: .8rem;
  color: var(--text-light);
  margin-bottom: .8rem;
}
.gr-badges {
  display: flex;
  gap: .8rem;
  justify-content: center;
  align-items: center;
}
.gr-badges img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* Slider */
.gr-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.gr-viewport {
  overflow: hidden;
  flex: 1;
}
.gr-track {
  display: flex;
  gap: 1.2rem;
  transition: transform .5s ease;
}
.gr-card {
  flex: 0 0 calc(33.333% - .8rem);
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 3px 15px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-width: 0;
  border: 1px solid rgba(0,0,0,.06);
}
@media(max-width:900px) { .gr-card { flex: 0 0 calc(50% - .7rem); } }
@media(max-width:580px) { .gr-card { flex: 0 0 calc(90% - .5rem); } }

.gr-card-top {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.gr-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.gr-name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--brown);
  margin-bottom: .15rem;
}
.gr-stars { color: #fbbc05; font-size: .78rem; }
.gr-time  { font-size: .75rem; color: #999; margin-top: .1rem; }

.gr-text {
  color: #555;
  font-size: .85rem;
  line-height: 1.7;
  flex: 1;
}

.gr-source {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: #888;
  border-top: 1px solid #f0f0f0;
  padding-top: .7rem;
  margin-top: auto;
}

/* Arrows */
.gr-arrow {
  background: var(--brown);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.gr-arrow:hover { background: var(--gold); color: var(--brown); }

/* Dots */
.gr-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.5rem;
}
.gr-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(53,65,20,.25);
  border: none;
  cursor: pointer;
  transition: background .3s, width .3s;
  padding: 0;
}
.gr-dot.active {
  background: var(--brown);
  width: 24px;
  border-radius: 5px;
}

/* Write review button */
.gr-write-btn {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--brown);
  border: 2px solid var(--brown);
  padding: .65rem 1.8rem;
  border-radius: 25px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .05em;
  transition: background .2s, color .2s;
}
.gr-write-btn:hover {
  background: var(--brown);
  color: #fff;
}

/* =====================
   FOOTER 4-COLUMN LAYOUT
   ===================== */
.footer-cols-4 {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  padding-top: 2rem;
}
@media(max-width:1024px) { .footer-cols-4 { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media(max-width:560px)  { .footer-cols-4 { grid-template-columns: 1fr; } }

/* Map in footer */
.footer-map-wrap {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  height: 180px;
}
.footer-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  filter: invert(0.1) sepia(0.1);
}

/* Get Directions button */
.footer-dir-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.2);
  padding: .5rem 1.1rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  transition: background .2s, color .2s;
}
.footer-dir-btn:hover {
  background: var(--gold);
  color: var(--brown);
  border-color: var(--gold);
}
.footer-dir-btn i { color: var(--gold); }
.footer-dir-btn:hover i { color: var(--brown); }

/* =====================
   NEARBY ATTRACTIONS
   ===================== */
.nearby-sec {
  background: var(--brown);
  padding: 5rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.nearby-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(200,144,42,0.06)" stroke-width="1"/></svg>') center/cover;
  pointer-events: none;
}
.nearby-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--gold);
  text-align: center;
  margin-bottom: .6rem;
  font-style: italic;
}
.nearby-subtitle {
  color: rgba(255,255,255,.72);
  text-align: center;
  font-size: .92rem;
  margin-bottom: 3rem;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}
.nearby-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  position: relative;
  z-index: 1;
}
@media(max-width:1024px) { .nearby-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:540px)  { .nearby-grid { grid-template-columns: 1fr; } }

.nearby-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(200,144,42,.2);
  border-radius: 12px;
  padding: 1.4rem 1.2rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: background .25s, border-color .25s, transform .25s;
  cursor: default;
}
.nearby-card:hover {
  background: rgba(200,144,42,.12);
  border-color: rgba(200,144,42,.5);
  transform: translateY(-3px);
}
.nearby-icon {
  width: 44px;
  height: 44px;
  background: rgba(200,144,42,.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--gold);
  flex-shrink: 0;
  transition: background .25s;
}
.nearby-card:hover .nearby-icon {
  background: var(--gold);
  color: var(--brown);
}
.nearby-info h4 {
  font-family: var(--serif);
  font-size: .95rem;
  color: #fff;
  margin-bottom: .3rem;
  line-height: 1.3;
}
.nearby-info p {
  font-size: .78rem;
  color: rgba(255,255,255,.62);
  line-height: 1.5;
  margin-bottom: .5rem;
}
.nearby-dist {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .02em;
}
.nearby-dist i { font-size: .7rem; }

/* =====================
   SIDE PANEL (Book Stay / Safari)
   ===================== */
.side-panel {
  position: fixed;
  right: -420px;
  top: 0;
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 9000;
  box-shadow: -6px 0 30px rgba(0,0,0,.2);
  transition: right .4s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.side-panel.open { right: 0; }

.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  flex-shrink: 0;
}
.sp-header h3 {
  color: #fff;
  font-family: var(--serif);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
.sp-header-green  { background: #354114; }
.sp-header-orange { background: #FFA534; }
.sp-header-orange h3 { color: #1a1a1a; }

.sp-close {
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  line-height: 1;
}
.sp-header-orange .sp-close { color: #1a1a1a; }
.sp-close:hover { background: rgba(255,255,255,.35); }

.sp-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.4rem 1.5rem;
}

.sp-field {
  margin-bottom: 1rem;
}
.sp-field label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brown);
  margin-bottom: .3rem;
}
.sp-field label i { color: var(--gold); font-size: .7rem; }
.sp-field input,
.sp-field select,
.sp-field textarea {
  width: 100%;
  border: 1.5px solid #ddd;
  border-radius: 7px;
  padding: .55rem .85rem;
  font-size: .88rem;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  transition: border-color .2s;
  background: #fafafa;
}
.sp-field input:focus,
.sp-field select:focus,
.sp-field textarea:focus {
  border-color: var(--gold);
  background: #fff;
}
.sp-field textarea { resize: none; }

.sp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}

.sp-submit {
  width: 100%;
  border: none;
  padding: .9rem;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: filter .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: .6rem;
}
.sp-submit:hover { filter: brightness(1.08); }
.sp-submit-green  { background: #354114; color: #fff; }
.sp-submit-orange { background: #FFA534; color: #1a1a1a; }

.sp-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .75rem;
  background: #25D366;
  color: #fff;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 700;
  transition: background .2s;
}
.sp-wa-btn:hover { background: #1da851; color: #fff; }
.sp-wa-btn i { font-size: 1.1rem; }

/* Overlay */
.sp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 8999;
}
.sp-overlay.show { display: block; }

@media(max-width:440px) {
  .side-panel { width: 100vw; right: -100vw; }
}