:root{--brand:#236a3b;--brand-2:#8bbf5a;--ink:#1b1b1b;--muted:#636a72;--bg:#ffffff;--cream:#faf7ef}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:20}
.site-header .wrap{display:flex;align-items:center;gap:18px}
.logo img{height:56px;display:block}
.main-nav ul{display:flex;flex-wrap:wrap;gap:14px;list-style:none;padding:0;margin:0}
.main-nav a{display:block;padding:16px 10px;border-radius:8px;color:var(--ink);font-weight:600}
.main-nav a.active,.main-nav a:hover{background:var(--cream)}
.cta{margin-left:auto;display:flex;gap:10px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--brand);font-weight:700}
.btn.whatsapp{background:#25D366;color:#000;border-color:#25D366}
.btn.enquire{background:var(--brand);color:#fff;border-color:var(--brand)}
.hero{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.45)),url('../images/hero.jpg') center/cover no-repeat;color:#fff;padding:120px 0}
.hero .wrap{display:grid;gap:14px}
.hero h1{font-size:44px;margin:0}
.hero p{font-size:18px;max-width:720px}
.section{padding:60px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:#fff;border:1px solid #eee;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:180px;object-fit:cover;display:block}
.card .pad{padding:14px}
.card h3{margin:4px 0 8px;font-size:18px}
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:var(--cream);font-size:12px;color:var(--muted)}
.kicker{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800}
.split{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.split img{border-radius:12px;border:1px solid #eee}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.category-hero{display:grid;gap:10px;padding:32px;background:var(--cream);border-radius:14px;border:1px solid #eee}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.notice{background:#f1f7ed;border-left:6px solid var(--brand);padding:12px;border-radius:8px}
.site-footer{background:#0d1a10;color:#e9f5e9;margin-top:40px}
.site-footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:28px 18px}
.site-footer a{color:#e9f5e9;text-decoration:underline}
.footer-brand img{height:44px}
.form{display:grid;gap:12px}
input,select,textarea{width:100%;padding:12px;border:1px solid #dcdcdc;border-radius:10px}
label{font-weight:700}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.small{font-size:14px;color:var(--muted)}

/* === Logo sizing (desktop + mobile) === */
.logo img{
  height:72px;            /* was 56px */
  max-height:72px;
  width:auto;
  display:block;
}
@media (max-width:900px){
  .logo img{ height:56px; max-height:56px; }
}

/* === Hero fix: remove background text bleed + improve legibility === */
/* Replace gradient-in-background with a clean image + overlay layer */
.hero{
  position: relative;
  color:#fff;
  padding:120px 0;
  background-image: url('../images/hero.jpg');  /* keep your image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Dark overlay above the image (stronger than before) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.62));
  backdrop-filter: blur(1.5px); /* optional: softens any baked-in text */
}

/* Ensure hero content is above the overlay */
.hero > .wrap{
  position: relative;
  z-index: 1;
}

/* Legibility tweaks for headings & body in hero */
.hero h1{
  margin:0 0 8px;
  font-size: clamp(28px, 3.2vw + 16px, 48px); /* responsive */
  line-height:1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.hero p{
  font-size: clamp(14px, 1.2vw + 10px, 20px);
  max-width:720px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.hero-cta{ position:relative; z-index:1; }

/* === HEADER/NAV LAYOUT FIX === */
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:nowrap;                 /* keep everything on one line (desktop) */
}

.logo{ flex:0 0 auto; }
.main-nav{ flex:1 1 auto; }         /* nav takes the middle space */
.cta{ flex:0 0 auto; margin-left:0; }

/* Keep nav items on one line and centered */
.main-nav ul{
  display:flex;
  align-items:center;
  justify-content:center;           /* center the links between logo and CTAs */
  gap:22px;                         /* reduce gap to avoid wrapping */
  flex-wrap:nowrap;                 /* no wrap on desktop */
  white-space:nowrap;               /* prevent individual items breaking */
  margin:0;
  padding:0;
}

/* Slightly tighter link padding for more room */
.main-nav a{
  padding:14px 8px;
  font-weight:600;
}

/* Make the buttons align with the baseline of links */
.cta .btn{
  padding:10px 14px;
  line-height:1;
}

/* === RESPONSIVE BEHAVIOUR === */
/* When space is tight, allow wrapping but keep it tidy */
@media (max-width: 1180px){
  .main-nav ul{ gap:16px; }
  .main-nav a{ padding:12px 8px; }
  .logo img{ height:64px; }
}

@media (max-width: 1024px){
  .site-header .wrap{ flex-wrap:wrap; }
  .logo{ order:1; width:100%; display:flex; justify-content:center; }
  .main-nav{ order:2; width:100%; }
  .main-nav ul{ flex-wrap:wrap; justify-content:center; }
  .cta{ order:3; width:100%; display:flex; justify-content:center; gap:10px; }
}

/* Optional: slightly smaller nav text on narrow tablets to avoid wrap */
@media (max-width: 900px){
  .main-nav a{ font-size:15px; }
}

/* Optional: mobile-first stacking if needed */
@media (max-width: 640px){
  .main-nav a{ padding:10px 6px; font-size:14px; }
  .logo img{ height:56px; }
}