body{font-family:sans-serif;margin:0} .header-inner{display:flex;justify-content:space-between;align-items:center;padding:10px;background:green;color:#fff} 
.nav-list{display:none;flex-direction:column;background:#065;border:1px solid #000;padding:10px}
.nav-list.show{display:flex}
.nav-toggle{background:#fff;border:none;font-size:22px}
.container{padding:20px}
/* GENERAL */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
}

/* HEADER */
.site-header {
  background: #008000;
  color: #fff;
  padding: 10px 0;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand h1 {
  margin: 0;
  font-size: 20px;
}

.nav-toggle {
  background: none;
  border: none;
  color: white;
  font-size: 26px;
  display: none;
}

/* NAV DESKTOP */
.nav-list {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-list a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

/* MOBILE NAV */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }

  .nav-list {
    display: none;
    flex-direction: column;
    background: #006400;
    padding: 10px;
  }

  .nav-list.open {
    display: flex;
  }
}

/* HERO */
.hero {
  background: white;
  padding: 50px 0;
}

/* CARDS */
.highlights {
  display: flex;
  gap: 20px;
  margin: 40px 0;
}

.card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  flex: 1;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* GRID (Projects + Gallery) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.proj-card {
  background: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.proj-thumb img {
  width: 100%;
  border-radius: 10px;
}

/* FOOTER */
.site-footer {
  background: #008000;
  color: white;
  text-align: center;
  padding: 20px 0;
  margin-top: 50px;
}
:root{--green:#00A651;--bg:#f7f7f8;--text:#222;--muted:#6b7280}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* HEADER */
.site-header{background:var(--green);color:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px}
.brand h1{margin:0;font-size:1.05rem}.brand .tag{font-size:.85rem;opacity:.95}

/* NAV */
.nav-list{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.nav-list a{color:#fff;text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600}
.nav-list a.active, .nav-list a:hover{background:rgba(255,255,255,.12)}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:22px;padding:6px;border-radius:6px}

/* HERO */
.hero{padding:36px 0;background:linear-gradient(180deg, rgba(0,166,81,0.06), transparent 40%)}
.hero-inner{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.hero-text h2{font-size:1.6rem;margin:0 0 8px}
.img-placeholder{width:260px;height:160px;border-radius:10px;overflow:hidden}

/* GRID + CARDS */
.container{padding:18px 16px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:#fff;padding:16px;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.04)}
.proj-thumb{height:160px;overflow:hidden;border-radius:8px;margin-bottom:10px}
.proj-thumb img{width:100%;height:100%;object-fit:cover}

/* FORMS */
input,textarea,select{padding:10px;border-radius:8px;border:1px solid #e6e6e6;width:100%;font-size:1rem}
textarea{min-height:120px;resize:vertical}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;border:none;cursor:pointer}
.btn.primary{background:var(--green);color:#fff}
.btn.ghost{background:transparent;border:2px solid rgba(0,0,0,.06)}

/* FOOTER */
.site-footer{background:var(--green);color:#fff;padding:18px 0;margin-top:36px;text-align:center}

/* GALLERY THUMBS */
.thumb{height:140px;overflow:hidden;border-radius:8px;background:#e9e9e9}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* RESPONSIVE */
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav-list{display:none;position:absolute;top:64px;right:12px;background:var(--green);padding:10px;border-radius:8px;flex-direction:column;min-width:180px;box-shadow:0 10px 30px rgba(0,0,0,.15)}
  .nav-list.open{display:flex}
  .nav-list a{display:block}
  .hero-inner{flex-direction:column}
}