:root { --primary:#0B7A4B; --accent:#FF8A00; --dark:#0E1F1A; --light:#F5F7F6; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--dark); }
a { color: inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { max-width:1240px; margin:0 auto; padding:0 16px; }
.header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #eef2f7; }
.header-inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; height:76px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:900; }
.brand img { width:72px; height:72px; border-radius:10px; }
.nav { display:flex; gap:18px; justify-content:center; }
.nav a { padding:10px 12px; border-radius:10px; }
.nav a:hover { background:#f3f4f6; }
.menu-btn { display:none; background:transparent; border:none; font-size:26px; }
.mobile-nav { display:none; flex-direction:column; padding:12px 16px; gap:8px; border-bottom:1px solid #eef2f7; }
.hero { background: linear-gradient(120deg, rgba(11,122,75,0.8), rgba(255,138,0,0.65)), url('../img/tentimg/home.jpeg') center/cover no-repeat; color:white; }
.hero .inner { min-height: 64vh; display:grid; place-items:center; text-align:center; padding: 56px 0; }
.hero .badge { display:inline-block; background: rgba(255,255,255,0.18); padding:8px 12px; border-radius:999px; font-weight:700; }
.hero h1 { font-size: 44px; line-height:1.08; margin:14px 0 8px; }
.searchbar { margin-top:18px; background:white; border:1px solid #e5e7eb; border-radius:16px; padding:10px; display:grid; grid-template-columns: 1fr 180px 160px auto; gap:8px; box-shadow:0 10px 30px rgba(0,0,0,0.08); }
.searchbar input, .searchbar select { border:none; background:#f3f4f6; border-radius:12px; padding:10px 12px; outline:none; }
.section { padding:56px 0; }
.section h2 { font-size:28px; margin:0 0 8px; }
.muted { color:#667085; }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.grid-2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.card { border:1px solid #e6eaf0; border-radius:18px; overflow:hidden; background:white; box-shadow:0 1px 0 rgba(0,0,0,0.02); transition:transform .15s; }
.card:hover { transform: translateY(-2px); }
.card .content { padding:14px; }
.price { font-weight:900; }
.footer { background: #0E1F1A; color:white; margin-top:40px; }
.footer .inner { padding:40px 0; }
.footer a { color:#bfe7d3; }
.breadcrumb { font-size: 14px; color:#94a3b8; margin: 12px 0; }
.breadcrumb a { color:#64748b; }
/* Detail */
.hero-detail { background:#f7faf9; border-bottom:1px solid #eef2f7; }
.hero-detail .title { padding:22px 0; }
.info-grid { display:grid; grid-template-columns: 2fr 1fr; gap:24px; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.gallery img { border-radius:12px; cursor:pointer; }
.amenities { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; list-style:none; padding:0; }
.badge-list span { display:inline-block; margin: 4px 6px 0 0; padding:6px 10px; background:#f3f4f6; border-radius:999px; font-size:12px; }
/* Lightbox */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; z-index:100; }
.lightbox.show { display:flex; }
.lightbox img { max-width:92vw; max-height:88vh; border-radius:12px; }
.lightbox .close { position:absolute; top:18px; right:18px; font-size:28px; background:white; border:none; border-radius:999px; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; }
@media (max-width:980px){
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .searchbar { grid-template-columns:1fr 1fr auto; }
  .info-grid { grid-template-columns:1fr; }
}
@media (max-width:720px){
  .grid-3, .grid-4, .grid-2 { grid-template-columns:1fr; }
  .nav { display:none; }
  .menu-btn { display:inline-block; }
  .searchbar { grid-template-columns:1fr; }
}

.footer .container.inner {
  display: flex;
  justify-content: space-between; /* pushes items to edges */
  align-items: flex-start; /* aligns top */
  flex-wrap: wrap; /* handles mobile responsiveness */
}

.footer .container.inner > div {
  flex: 1;
  min-width: 250px; /* keeps spacing on small screens */
}