/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Inter','Segoe UI',sans-serif;
  background:#f0fdfa;
  color:#1f2937;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Colors */
:root {
  --primary:#0d9488;
  --primary-light:#14b8a6;
  --primary-dark:#0f766e;
  --bg-light:#f0fdfa;
  --white:#ffffff;
  --gray:#6b7280;
  --dark:#1f2937;
}

/* Container */
.container { width:90%; max-width:1200px; margin:0 auto; padding:0 1rem; }

/* ==================== NAVBAR ==================== */
header {
  background:#0b796f;   /* NEW: soft teal background */
  color: var(--white);
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  position:sticky;
  top:0;
  z-index:100;
}
.header-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 0;
}
.logo {
  display:flex;
  align-items:center;
  font-weight:700;
  font-size:1.5rem;
  color:var(--white);
}
.logo-img {
  height:3rem;
  width:3rem;
  /* FIXED LOGO FILTER – works for any logo */
  margin-right:0.75rem;
}
nav { display:none; }
nav a {
  margin-left:2rem;
  color:var(--white);
  font-weight:500;
  text-decoration:none;
  transition:color .3s;
}
nav a:hover { color:#ecfdf5; }
.menu-btn {
  font-size:1.5rem;
  background:none;
  border:none;
  color:var(--white);
  cursor:pointer;
}
.mobile-menu {
  display:none;
  background:var(--primary);
  border-top:1px solid #0d9488;
  padding:1rem 0;
}
.mobile-menu a {
  display:block;
  padding:0.75rem 1rem;
  color:var(--white);
  font-weight:500;
  text-decoration:none;
}
.mobile-menu a:hover { background:#0d9488; }

/* ==================== HERO ==================== */
.hero {
  background:linear-gradient(to right,var(--primary-light),var(--primary));
  color:white;
  text-align:center;
  padding:5rem 1rem;
}
.hero h1 { font-size:2.5rem; margin-bottom:1rem; font-weight:700; }
.hero p { font-size:1.1rem; max-width:700px; margin:0 auto 2rem; }
.btn {
  display:inline-block;
  background:var(--white);
  color:var(--primary);
  padding:0.75rem 2rem;
  border-radius:9999px;
  font-weight:600;
  text-decoration:none;
  transition:all .3s;
}
.btn:hover { background:#ecfdf5; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }

/* ==================== SERVICES ==================== */
.services { padding:4rem 1rem; background:white; text-align:center; }
.services h2 { font-size:2rem; color:var(--primary); margin-bottom:3rem; }
.service-grid { display:grid; gap:2rem; grid-template-columns:1fr; }
.service-card {
  background:var(--bg-light);
  padding:2rem;
  border-radius:1rem;
  box-shadow:0 4px 6px rgba(0,0,0,.05);
  transition:all .3s;
}
.service-card:hover { transform:translateY(-8px); box-shadow:0 12px 20px rgba(0,0,0,.1); }
.service-card i { font-size:3rem; color:var(--primary); margin-bottom:1rem; }
.service-card h3 { font-size:1.5rem; margin-bottom:.75rem; color:var(--dark); }

/* ==================== ABOUT ==================== */
.about { padding:4rem 1rem; background:var(--bg-light); text-align:center; }
.about h2 { font-size:2rem; color:var(--primary); margin-bottom:1.5rem; }
.about p { max-width:800px; margin:0 auto 3rem; font-size:1.1rem; color:#4b5563; }
.features { display:grid; gap:2rem; grid-template-columns:1fr; }
.feature {
  background:var(--white);
  padding:2rem;
  border-radius:1rem;
  box-shadow:0 4px 6px rgba(0,0,0,.05);
}
.feature i { font-size:2.5rem; color:var(--primary); margin-bottom:1rem; }
.feature h4 { font-size:1.25rem; margin-bottom:.5rem; }

/* ==================== FOOTER ==================== */
footer {
  background:var(--primary-dark);
  color:white;
  padding:4rem 1rem 2rem;
}
.footer-grid { display:grid; gap:2rem; grid-template-columns:1fr; margin-bottom:3rem; }
.footer-col h3 {
  font-size:1.5rem;
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  color:var(--primary-light);
}
.footer-col h3 i { margin-right:.75rem; }
.footer-col p { margin-bottom:.75rem; display:flex; align-items:center; }
.footer-col p i { margin-right:.75rem; width:1.2rem; }
.copyright {
  text-align:center;
  padding-top:2rem;
  border-top:1px solid #14b8a6;
  color:#94a3b8;
  font-size:.9rem;
}

/* ==================== RESPONSIVE ==================== */
@media (min-width:768px){
  .header-inner{padding:1.25rem 0;}
  .logo{font-size:1.75rem;}
  .logo-img{height:3.5rem;width:3.5rem;}
  nav{display:block;}
  .menu-btn{display:none;}
  .hero h1{font-size:3.5rem;}
  .service-grid,.features,.footer-grid{grid-template-columns:repeat(3,1fr);}
  .services,.about{padding:5rem 1rem;}
}
@media (max-width:767px){
  .mobile-menu.show{display:block;}
}