/* =====================================================
   SINERGI EVENT ORGANIZER — MAIN STYLESHEET
   Palet: Dark Charcoal (#111111) + Amber/Oren (#E0A96D / #F39C12)
   Font: Montserrat (heading) + Poppins (body)
===================================================== */

:root{
    --dark: #111111;
    --dark-soft: #1b1b1b;
    --dark-card: #1e1e1e;
    --amber: #F39C12;
    --amber-soft: #E0A96D;
    --white: #ffffff;
    --grey-light: #d9d9d9;
    --grey: #9a9a9a;
    --grey-dark: #555555;
    --radius: 10px;
    --shadow: 0 10px 30px rgba(0,0,0,.25);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.35);
    --transition: all .3s ease;
    --maxw: 1200px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    font-family:'Poppins', sans-serif;
    color:#2b2b2b;
    background:var(--white);
    line-height:1.65;
    overflow-x:hidden;
}

h1,h2,h3,h4,h5{
    font-family:'Montserrat', sans-serif;
    font-weight:800;
    line-height:1.2;
    color:var(--dark);
}

a{ text-decoration:none; color:inherit; transition:var(--transition); }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.container{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 24px;
}

.section{ padding:90px 0; }
.section-tight{ padding:60px 0; }
.bg-dark{ background:var(--dark); color:var(--grey-light); }
.bg-dark h2, .bg-dark h3, .bg-dark h4{ color:var(--white); }
.bg-soft{ background:#f7f5f2; }

.section-head{ text-align:center; max-width:680px; margin:0 auto 50px; }
.section-tag{
    display:inline-block; color:var(--amber); font-weight:700; letter-spacing:2px;
    text-transform:uppercase; font-size:13px; margin-bottom:12px;
}
.section-head h2{ font-size:clamp(28px,4vw,40px); margin-bottom:14px; }
.section-head p{ color:var(--grey-dark); font-size:16px; }
.bg-dark .section-head p{ color:var(--grey); }

.btn{
    display:inline-flex; align-items:center; gap:8px; justify-content:center;
    padding:14px 30px; border-radius:50px; font-weight:700; font-size:14px;
    letter-spacing:.5px; text-transform:uppercase; border:2px solid transparent;
    transition:var(--transition); cursor:pointer;
}
.btn-primary{ background:var(--amber); color:var(--dark); }
.btn-primary:hover{ background:var(--amber-soft); transform:translateY(-3px); box-shadow:0 10px 25px rgba(243,156,18,.35); }
.btn-outline{ border-color:var(--white); color:var(--white); background:transparent; }
.btn-outline:hover{ background:var(--white); color:var(--dark); transform:translateY(-3px); }
.btn-dark{ background:var(--dark); color:var(--white); }
.btn-dark:hover{ background:var(--amber); color:var(--dark); transform:translateY(-3px); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 22px; font-size:12px; }

/* =====================================================
   TOP BAR
===================================================== */
.topbar{
    background:var(--dark);
    color:var(--grey-light);
    font-size:13px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 24px; flex-wrap:wrap; gap:8px;
}
.topbar-left{ display:flex; gap:22px; flex-wrap:wrap; }
.topbar-left a, .topbar-address{ color:var(--grey-light); display:inline-flex; align-items:center; gap:6px; }
.topbar-left a:hover{ color:var(--amber); }
.ti-icon{ font-size:13px; }
.topbar-right{ display:flex; gap:14px; }
.topbar-right a{
    width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
    display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700;
    color:var(--grey-light);
}
.topbar-right a:hover{ background:var(--amber); color:var(--dark); border-color:var(--amber); }

/* =====================================================
   NAVBAR
===================================================== */
.navbar{
    position:sticky; top:0; z-index:1000;
    background:transparent;
    transition:var(--transition);
    padding:14px 0;
}
.navbar.scrolled{
    background:rgba(17,17,17,.97);
    box-shadow:0 4px 20px rgba(0,0,0,.25);
    padding:8px 0;
}
.navbar-inner{ display:flex; align-items:center; justify-content:space-between; }
.navbar-brand{ display:flex; align-items:center; }
.brand-logo{ height:44px; width:auto; transition:var(--transition); }
.navbar.scrolled .brand-logo{ height:38px; }

.navbar-menu{ display:flex; align-items:center; gap:30px; }
.navbar-menu a{
    color:var(--white); font-weight:600; font-size:14.5px; position:relative; padding:6px 0;
}
.navbar-menu a:not(.btn-nav-cta)::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--amber);
    transition:var(--transition);
}
.navbar-menu a:not(.btn-nav-cta):hover::after,
.navbar-menu a.active::after{ width:100%; }
.navbar-menu a.active{ color:var(--amber); }
.btn-nav-cta{
    background:var(--amber); color:var(--dark) !important; padding:10px 22px; border-radius:50px;
    font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.5px;
}
.btn-nav-cta:hover{ background:var(--white); transform:translateY(-2px); }

.navbar-toggle{
    display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;
}
.navbar-toggle span{ width:26px; height:2.5px; background:var(--white); border-radius:2px; }

/* Page (non-home) top spacing since navbar isn't overlaying a hero */
.page-hero{
    position:relative; padding:130px 0 70px; text-align:center; color:var(--white);
    background:linear-gradient(rgba(17,17,17,.82), rgba(17,17,17,.88)), var(--dark);
    background-size:cover; background-position:center;
}
.page-hero h1{ color:var(--white); font-size:clamp(30px,5vw,46px); margin-bottom:14px; }
.page-hero p{ color:var(--grey-light); max-width:640px; margin:0 auto; }
.breadcrumb{ margin-top:18px; font-size:13px; color:var(--amber-soft); }
.breadcrumb a{ color:var(--grey-light); }
.breadcrumb a:hover{ color:var(--amber); }

/* =====================================================
   HERO (HOME) — video background
===================================================== */
.hero{
    position:relative; min-height:100vh; display:flex; align-items:center;
    overflow:hidden; margin-top:-90px; padding-top:90px; color:var(--white);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{
    width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
}
.hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,.65) 50%, rgba(17,17,17,.92) 100%);
    z-index:1;
}
.hero-content{ position:relative; z-index:2; text-align:center; max-width:820px; margin:0 auto; padding:60px 24px 140px; }
.hero-content .section-tag{ background:rgba(243,156,18,.15); padding:8px 18px; border-radius:50px; border:1px solid rgba(243,156,18,.4); }
.hero-content h1{
    color:var(--white); font-size:clamp(34px,6vw,64px); margin:20px 0 18px; letter-spacing:-.5px;
}
.hero-content h1 span{ color:var(--amber); }
.hero-content p{ font-size:18px; color:var(--grey-light); max-width:600px; margin:0 auto 34px; }
.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-scroll{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
    color:var(--grey-light); font-size:12px; text-align:center; letter-spacing:1px;
}
.hero-scroll .arrow{ display:block; margin-top:6px; animation:bounce 1.8s infinite; }
@keyframes bounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }

/* Floating feature cards overlapping hero */
.feature-float{
    position:relative; z-index:3; margin-top:-110px; margin-bottom:0;
}
.feature-float .grid4{
    display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.feature-card{
    background:var(--white); border-radius:var(--radius); padding:30px 22px;
    box-shadow:var(--shadow-lg); text-align:center; transition:var(--transition);
    border-bottom:4px solid var(--amber);
}
.feature-card:hover{ transform:translateY(-8px); }
.feature-icon{
    width:64px; height:64px; border-radius:50%; background:rgba(243,156,18,.12);
    display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 16px;
}
.feature-card h4{ font-size:16px; margin-bottom:8px; }
.feature-card p{ font-size:13.5px; color:var(--grey-dark); }

/* =====================================================
   ABOUT PREVIEW
===================================================== */
.about-preview{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-media{ position:relative; }
.about-media img{ border-radius:var(--radius); box-shadow:var(--shadow); width:100%; height:460px; object-fit:cover; }
.about-media .img-badge{
    position:absolute; bottom:-24px; right:-24px; background:var(--amber); color:var(--dark);
    padding:22px 26px; border-radius:var(--radius); box-shadow:var(--shadow);
    text-align:center;
}
.about-media .img-badge strong{ display:block; font-size:32px; font-family:'Montserrat',sans-serif; }
.about-media .img-badge span{ font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.about-text p{ color:var(--grey-dark); margin-bottom:16px; }
.about-list{ margin:24px 0; }
.about-list li{ display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; font-weight:600; color:var(--dark); }
.about-list li .chk{
    flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--amber);
    color:var(--dark); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
}

/* =====================================================
   CARDS GRID (PAKET / LAYANAN)
===================================================== */
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }

.filter-bar{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }
.filter-btn{
    padding:10px 22px; border-radius:50px; border:1.5px solid #e2e2e2; background:var(--white);
    font-weight:600; font-size:13.5px; color:var(--grey-dark); transition:var(--transition);
}
.filter-btn:hover, .filter-btn.active{ background:var(--dark); color:var(--white); border-color:var(--dark); }

.card-paket{
    background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
    transition:var(--transition); display:flex; flex-direction:column;
}
.card-paket:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.card-media{ position:relative; height:210px; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card-paket:hover .card-media img{ transform:scale(1.08); }
.card-badge{
    position:absolute; top:14px; left:14px; background:var(--amber); color:var(--dark);
    padding:6px 14px; border-radius:50px; font-size:11.5px; font-weight:700; text-transform:uppercase;
}
.card-loc{
    position:absolute; bottom:14px; left:14px; background:rgba(17,17,17,.75); color:var(--white);
    padding:5px 12px; border-radius:50px; font-size:12px; display:flex; align-items:center; gap:5px;
}
.card-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.card-body h3{ font-size:19px; margin-bottom:10px; }
.card-body p.desc{ color:var(--grey-dark); font-size:13.5px; margin-bottom:16px; flex:1; }
.card-facilities{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.card-facilities span{
    background:#f4f1ec; color:var(--grey-dark); font-size:11px; padding:5px 10px; border-radius:6px;
}
.card-footer{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid #eee; padding-top:16px; }
.card-price{ font-family:'Montserrat',sans-serif; font-weight:800; color:var(--dark); font-size:18px; }
.card-price span{ font-size:12px; color:var(--grey-dark); font-weight:400; }

/* Layanan (service) cards */
.card-layanan{
    background:var(--dark-card); border-radius:var(--radius); overflow:hidden; transition:var(--transition);
    box-shadow:var(--shadow);
}
.card-layanan:hover{ transform:translateY(-6px); }
.card-layanan .card-media{ height:190px; }
.card-layanan .lay-body{ padding:22px; color:var(--grey-light); }
.card-layanan .lay-icon{ font-size:26px; margin-bottom:8px; display:block; }
.card-layanan h3{ color:var(--white); font-size:17px; margin-bottom:8px; }
.card-layanan p{ font-size:13px; color:var(--grey); margin-bottom:14px; }
.card-layanan a.link-more{ color:var(--amber); font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.card-layanan a.link-more:hover{ gap:10px; }

/* =====================================================
   WHY US / STATS STRIP
===================================================== */
.stats-strip{ background:var(--dark); padding:50px 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stats-grid .num{ font-family:'Montserrat',sans-serif; font-size:clamp(30px,4vw,44px); font-weight:800; color:var(--amber); }
.stats-grid .lbl{ color:var(--grey-light); font-size:13.5px; text-transform:uppercase; letter-spacing:1px; margin-top:6px; }

/* =====================================================
   TESTIMONIAL
===================================================== */
.testi-wrap{ position:relative; max-width:800px; margin:0 auto; }
.testi-slide{ display:none; background:var(--dark-card); border-radius:var(--radius); padding:44px; text-align:center; color:var(--grey-light); }
.testi-slide.active{ display:block; animation:fadeIn .5s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.testi-slide .quote{ font-size:40px; color:var(--amber); font-family:'Montserrat',sans-serif; line-height:0; }
.testi-slide p.txt{ font-size:17px; margin:18px 0 24px; color:var(--grey-light); font-style:italic; }
.testi-avatar{
    width:56px; height:56px; border-radius:50%; background:var(--amber); color:var(--dark);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; margin:0 auto 12px;
}
.testi-slide h5{ color:var(--white); font-size:15px; }
.testi-slide span{ color:var(--amber-soft); font-size:12.5px; }
.testi-dots{ display:flex; justify-content:center; gap:10px; margin-top:24px; }
.testi-dots button{
    width:10px; height:10px; border-radius:50%; border:none; background:rgba(255,255,255,.25);
}
.testi-dots button.active{ background:var(--amber); width:26px; border-radius:6px; }

/* Client logos */
.klien-strip{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.klien-item{
    padding:16px 26px; background:var(--white); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.06);
    font-weight:700; color:var(--grey-dark); font-size:13.5px; letter-spacing:.3px;
}

/* =====================================================
   HOTEL SECTION
===================================================== */
.card-hotel{ background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); }
.card-hotel:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.card-hotel .card-media{ height:200px; }
.hotel-body{ padding:20px; }
.hotel-body .tipe{ color:var(--amber); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:1px; }
.hotel-body h3{ font-size:18px; margin:6px 0 8px; }
.hotel-body .loc{ color:var(--grey-dark); font-size:13px; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.hotel-body .kap{ font-size:12.5px; color:var(--grey-dark); margin-bottom:16px; }

.hotel-detail-gallery{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:12px; margin-bottom:40px; border-radius:var(--radius); overflow:hidden; }
.hotel-detail-gallery img{ width:100%; height:100%; object-fit:cover; cursor:pointer; }
.hotel-detail-gallery a:first-child img{ height:100%; }
.hotel-detail-gallery a:nth-child(1){ grid-row:1 / span 2; }

/* =====================================================
   GALLERY
===================================================== */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.gallery-item{ position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer; aspect-ratio:1/1; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover img{ transform:scale(1.1); }
.gallery-overlay{
    position:absolute; inset:0; background:linear-gradient(0deg, rgba(17,17,17,.75), transparent 60%);
    display:flex; align-items:flex-end; padding:14px; opacity:0; transition:var(--transition);
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-overlay span{ color:var(--white); font-weight:600; font-size:13px; }

.lightbox{
    display:none; position:fixed; inset:0; background:rgba(10,10,10,.94); z-index:3000;
    align-items:center; justify-content:center; padding:30px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{
    position:absolute; top:24px; right:32px; color:var(--white); font-size:34px; background:none; border:none;
    line-height:1;
}
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:none;
    color:var(--white); font-size:26px; width:50px; height:50px; border-radius:50%; }
.lightbox-prev{ left:24px; }
.lightbox-next{ right:24px; }
.lightbox-nav:hover{ background:var(--amber); color:var(--dark); }

/* =====================================================
   ARTICLE / BLOG
===================================================== */
.card-artikel{ background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); }
.card-artikel:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.card-artikel .card-media{ height:200px; }
.artikel-body{ padding:22px; }
.artikel-meta{ font-size:12px; color:var(--amber); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.artikel-body h3{ font-size:17.5px; margin-bottom:10px; }
.artikel-body p{ color:var(--grey-dark); font-size:13.5px; margin-bottom:16px; }
.artikel-body a.link-more{ color:var(--dark); font-weight:700; font-size:13px; border-bottom:2px solid var(--amber); padding-bottom:2px; }

.article-full{ max-width:800px; margin:0 auto; }
.article-full img.cover{ width:100%; height:380px; object-fit:cover; border-radius:var(--radius); margin-bottom:30px; }
.article-full h1{ font-size:clamp(26px,4vw,36px); margin-bottom:14px; }
.article-full .meta{ color:var(--grey-dark); font-size:13.5px; margin-bottom:28px; }
.article-full p{ color:#3a3a3a; margin-bottom:18px; font-size:16px; }

/* =====================================================
   CONTACT PAGE
===================================================== */
.contact-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; }
.contact-info-card{ background:var(--dark); color:var(--grey-light); border-radius:var(--radius); padding:40px; }
.contact-info-card h3{ color:var(--white); margin-bottom:20px; }
.contact-info-item{ display:flex; gap:16px; margin-bottom:24px; }
.contact-info-item .ic{
    width:46px; height:46px; border-radius:50%; background:rgba(243,156,18,.15); color:var(--amber);
    display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;
}
.contact-info-item h5{ color:var(--white); font-size:14.5px; margin-bottom:4px; }
.contact-info-item p, .contact-info-item a{ font-size:13.5px; color:var(--grey); }
.contact-map{ margin-top:26px; border-radius:8px; overflow:hidden; }
.contact-map iframe{ width:100%; height:220px; border:0; display:block; }

.form-card{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:40px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; color:var(--dark); }
.form-group input, .form-group select, .form-group textarea{
    width:100%; padding:13px 16px; border:1.5px solid #e2e2e2; border-radius:8px; font-family:inherit;
    font-size:14px; transition:var(--transition); background:#fafafa;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
    outline:none; border-color:var(--amber); background:var(--white);
}
.form-group textarea{ resize:vertical; min-height:120px; }

.alert{ padding:16px 20px; border-radius:8px; margin-bottom:24px; font-size:14px; font-weight:600; }
.alert-success{ background:#e6f7ec; color:#1c7a3e; border:1px solid #bfe9cd; }
.alert-error{ background:#fdecec; color:#b32828; border:1px solid #f5c2c2; }

/* =====================================================
   CTA STRIP
===================================================== */
.cta-strip{
    background:linear-gradient(120deg, var(--dark) 0%, #262019 100%);
    color:var(--white); border-radius:var(--radius); padding:60px 50px;
    display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-strip h3{ color:var(--white); font-size:26px; margin-bottom:8px; }
.cta-strip p{ color:var(--grey-light); }
.cta-strip .cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* =====================================================
   PAGE HELPERS
===================================================== */
.tim-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.tim-card{ text-align:center; }
.tim-photo{
    width:150px; height:150px; border-radius:50%; margin:0 auto 16px; overflow:hidden;
    border:4px solid var(--amber);
}
.tim-photo img{ width:100%; height:100%; object-fit:cover; }
.tim-card h4{ font-size:16px; }
.tim-card span{ color:var(--amber); font-size:12.5px; font-weight:600; }

.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.value-card{ background:var(--white); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); text-align:center; }
.value-card .vi{ font-size:34px; margin-bottom:14px; }
.value-card h4{ margin-bottom:10px; font-size:17px; }
.value-card p{ font-size:13.5px; color:var(--grey-dark); }

/* =====================================================
   FOOTER
===================================================== */
.site-footer{ background:#0b0b0b; color:var(--grey); padding:70px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px; }
.footer-logo{ height:42px; margin-bottom:16px; }
.footer-brand p{ font-size:13.5px; line-height:1.8; margin-bottom:20px; }
.footer-social{ display:flex; gap:10px; }
.social-icon{
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.06);
    display:flex; align-items:center; justify-content:center; color:var(--grey-light);
}
.social-icon:hover{ background:var(--amber); color:var(--dark); transform:translateY(-3px); }
.footer-col h4{ color:var(--white); font-size:15px; margin-bottom:20px; }
.footer-col ul li{ margin-bottom:12px; font-size:13.5px; }
.footer-col ul li a{ color:var(--grey); }
.footer-col ul li a:hover{ color:var(--amber); padding-left:4px; }
.footer-contact li{ display:flex; gap:0; align-items:flex-start; color:var(--grey); }
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08); padding:22px 0; text-align:center;
    font-size:12.5px; color:var(--grey-dark);
}

/* =====================================================
   FLOATING WHATSAPP BUTTON
===================================================== */
.wa-float{
    position:fixed; bottom:26px; right:26px; width:60px; height:60px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center; z-index:2000;
    box-shadow:0 8px 24px rgba(37,211,102,.5); animation:pulse 2.4s infinite;
}
@keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); }
    70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
    100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1024px){
    .grid4{ grid-template-columns:repeat(2,1fr); }
    .grid3{ grid-template-columns:repeat(2,1fr); }
    .feature-float .grid4{ grid-template-columns:repeat(2,1fr); }
    .about-preview{ grid-template-columns:1fr; }
    .contact-wrap{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .tim-grid, .value-grid{ grid-template-columns:repeat(2,1fr); }
    .gallery-grid{ grid-template-columns:repeat(3,1fr); }
    .hotel-detail-gallery{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
    .hotel-detail-gallery a:first-child{ grid-column:1 / span 2; grid-row:auto; }
}

@media (max-width: 768px){
    .topbar-left span.topbar-address{ display:none; }
    .navbar-menu{
        position:fixed; top:0; right:-100%; height:100vh; width:78%; max-width:320px;
        background:var(--dark); flex-direction:column; justify-content:center; align-items:flex-start;
        padding:40px; gap:22px; transition:right .35s ease; z-index:1001;
    }
    .navbar-menu.open{ right:0; }
    .navbar-toggle{ display:flex; }
    .navbar.scrolled, .navbar{ background:rgba(17,17,17,.97); padding:12px 0; }
    .hero{ margin-top:0; padding-top:0; min-height:auto; padding:120px 0 70px; }
    .feature-float{ margin-top:40px; }
    .feature-float .grid4{ grid-template-columns:1fr; }
    .grid3, .grid4, .grid2{ grid-template-columns:1fr; }
    .stats-grid{ grid-template-columns:repeat(2,1fr); gap:30px; }
    .footer-grid{ grid-template-columns:1fr; }
    .tim-grid, .value-grid{ grid-template-columns:1fr; }
    .gallery-grid{ grid-template-columns:repeat(2,1fr); }
    .cta-strip{ flex-direction:column; text-align:center; }
    .form-row{ grid-template-columns:1fr; }
    .hotel-detail-gallery{ grid-template-columns:1fr; }
    .hotel-detail-gallery a:first-child{ grid-column:auto; }
    .about-media img{ height:320px; }
    .section{ padding:60px 0; }
}