/* Responsive, improved styles for desktop and mobile */
:root{
 --brand: #e9892a;
 --brand-2: #1f6feb;
 --ink: #0c1730;
 --text: #334155;
 --bg: #ffffff;
 --muted: #68748a;
 --line: #e6edf5;
 --chip: #f7fafc;
 --shadow:012px30px rgba(16,24,40,.08);
 --r:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
/* responsive base font size */
html{font-size:clamp(14px,1.2vw,16px)}
body{
 margin:0;
 background:var(--bg);
 color:var(--text);
 font:1rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial;
}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:018px}

.topbar{background:#0f172a;color:#e2e8f0;font-size:.92rem}
.topbar .row{display:flex;justify-content:space-between;align-items:center;padding:6px0;gap:12px}
.topbar a{color:#f8fafc;text-decoration:none}

header.site{position:sticky;top:0;z-index:60;background:#ffffff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:60px;height:60px;object-fit:contain}
.brand-text{display:flex;flex-direction:column}
.brand h1{margin:0;font-size:1.4rem;color:var(--ink);letter-spacing:.2px;line-height:1.2}
.brand .slogan{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:600}

/* Footer brand adjustments */
.footer .brand-text{gap:2px}
.nav-right{display:flex;align-items:center;gap:14px}

nav{position:relative}
nav ul{display:flex;gap:10px;list-style:none;margin:0;padding:0}
nav a{color:var(--ink);padding:10px12px;border-radius:10px}
nav a.active, nav a:hover{background:var(--chip)}
.dropdown{position:relative}
.dropdown > a::after{content:"▾";margin-left:.35rem;font-size:.8rem}
.dropdown-menu{position:absolute;top:110%;left:0;display:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);min-width:240px;padding:8px}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:10px;border-radius:10px}
.dropdown-menu a:hover{background:var(--chip)}

.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem1.1rem;border:none;border-radius:999px;cursor:pointer;font-weight:800}
.btn.primary{background:linear-gradient(135deg,var(--brand),#ffb469);color:#2b1707;box-shadow:var(--shadow)}
.btn.secondary{background:linear-gradient(135deg,var(--brand-2),#66a5ff);color:#081326;box-shadow:var(--shadow)}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}

.mobile-toggle{display:none;padding:.5rem .7rem;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink)}
@media (max-width:960px){
 /* mobile nav becomes overlay for easier tapping */
 nav ul{display:none;position:fixed;right:0;left:0;top:58px;background:#fff;border-top:1px solid var(--line);border-radius:12px12px00;box-shadow:var(--shadow);flex-direction:column;min-height:calc(100vh -58px);padding:12px;overflow:auto}
 nav ul.open{display:flex}
 nav ul a{padding:14px16px;border-radius:12px}
 nav ul .dropdown-menu{position:static;display:block;border:none;box-shadow:none;padding:0}
 .mobile-toggle{display:inline-flex}
}

.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1;padding:40px 0;width:100%;text-align:center}
.hero-slider{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease-in-out}
.hero-slide.active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
.hero-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:8px}
.hero-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .3s}
.hero-dot.active{background:rgba(255,255,255,1)}

/* better hero sizing for mobile and desktop */
.hero{min-height:50vh}
@media (min-width:1100px){.hero{min-height:65vh}}

@media (max-width:960px){
 .hero .wrap{padding:60px 0 30px}
}
@media (max-width:600px){
 .hero .wrap{padding:50px 0 24px}
 /* larger tap targets */
 .btn{padding:12px16px}
}

.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.45),rgba(2,6,23,.65));}

.hero h2,.hero p{color:#f8fafc}
.kicker{display:inline-block;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);color:#fff;padding:.3rem .7rem;border-radius:999px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.title{font-size:clamp(1.4rem,2.8vw,2.8rem);line-height:1.2;margin:.6rem01rem}

.section{padding:50px0}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* responsive grids:4->2->1,3->1 */
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.grid-3{grid-template-columns:1fr} .grid-4{grid-template-columns:1fr}}

.tour-card{display:flex;flex-direction:column;gap:.5rem}
/* fixed image aspect to avoid layout shift and improve visual balance */
.tour-card img{border-radius:12px;border:1px solid var(--line);aspect-ratio:16/10;object-fit:cover;width:100%}
.tour-meta{display:flex;gap:10px;flex-wrap:wrap;color:#64748b;font-size:.92rem}
.tour-card .btn{margin-top:auto}

.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why .item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px}
.why .icon{font-size:28px}

.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:960px){.guide-grid{grid-template-columns:1fr}}

.testimonials{position:relative}
.slider{display:flex;gap:16px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.slide{min-width:320px;scroll-snap-align:start}
.newsletter{display:flex;gap:10px;flex-wrap:wrap}
.input, select, textarea{width:100%;padding:12px14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text)}

footer{background:#0f172a;color:#cbd5e1;margin-top:40px}
.footer .grid{display:grid;grid-template-columns:2fr1fr1fr1fr;gap:18px;padding:40px0}
@media (max-width:960px){.footer .grid{grid-template-columns:1fr}}
.footer a{color:#e2e8f0}
.footer .brand img{width:36px;height:36px}
.copy{border-top:1px solid rgba(255,255,255,.08);padding:12px0;font-size:.92rem;text-align:center}

/* toast and floating WA adjustments for mobile */
.toast{position:fixed;right:16px;bottom:16px;background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px12px;box-shadow:var(--shadow);display:none;max-width:360px}
.toast.show{display:block}
@media (max-width:480px){.toast{left:16px;right:16px;max-width:none}}
.float-wa{position:fixed;right:18px;bottom:78px;z-index:40;display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#25d366,#5df48a);color:#083b1a;font-weight:900;box-shadow:var(--shadow)}

/* small utility spacing for container on very small devices */
@media (max-width:420px){.container{padding:012px}}