/* -------------------------
   Variables & Base
   ------------------------- */
:root{
  --primary-green: #2d7a3e;
  --light-green: #4CAF50;
  --lighter-green: #e8f5e9;
  --dark-green: #1b5e20;
  --white: #ffffff;
  --muted: #6b6b6b;
  --bg: #fbfbfb;
  --container: 1200px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-sm: 0 4px 18px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color:#222;
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Container */
.container{
  width:90%;
  max-width:var(--container);
  margin:0 auto;
}

/* Header / Nav */
.site-header{
  position:sticky;
  top:0;
  z-index:1200;
  background:var(--white);
  border-bottom:1px solid rgba(0,0,0,0.04);
  backdrop-filter: blur(4px);
}
.nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:90%;
  max-width:var(--container);
  margin:0 auto;
  padding:0.8rem 0;
}

/* Logo */
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--primary-green);font-weight:700}
.logo-img{height:48px;width:auto;border-radius:8px}
.brand{font-size:1.05rem}

/* Desktop nav links */
.nav-links ul{display:flex;gap:1.6rem;list-style:none;align-items:center}
.nav-links a{color:#222;text-decoration:none;font-weight:600;padding:.45rem .25rem;border-radius:6px;transition:all .18s}
.nav-links a:hover{color:var(--light-green);transform:translateY(-2px)}

/* Menu toggle for mobile */
.menu-toggle{
  display:none;
  border:0;
  background:transparent;
  font-size:1.35rem;
  color:var(--primary-green);
  cursor:pointer;
}
.menu-toggle:focus{outline:2px solid rgba(45,122,62,0.15);border-radius:6px}

/* HERO */
.hero{background:linear-gradient(135deg,var(--primary-green),var(--light-green));color:white;padding:3.5rem 0}
.hero-inner{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:center}
.hero-text .tagline{opacity:.95;font-weight:600}
.hero-text h1{font-size:2.25rem;margin:.6rem 0;line-height:1.05}
.lead{opacity:.95;margin-bottom:1.25rem}
.hero-card{background:rgba(255,255,255,0.08);border-radius:12px;padding:1.25rem;backdrop-filter: blur(6px)}
.card-inner h4{margin-bottom:.6rem}
.mini-list{list-style:none;padding-left:0;margin:0 0 0.6rem 0}
.mini-list li{margin:.35rem 0;font-weight:600}
.small{font-size:.9rem;opacity:.95}

/* Buttons */
.btn{display:inline-block;padding:.75rem 1.1rem;border-radius:999px;text-decoration:none;font-weight:700;cursor:pointer}
.btn-primary{background:white;color:var(--primary-green;);border:0}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn-secondary{background:transparent;border:2px solid rgba(255,255,255,0.18);color:white;font-weight:700}
.btn-secondary:hover{background:white;color:var(--primary-green);transform:translateY(-3px)}

.btn-whatsapp{background:#25D366;color:white;border:0}

/* SECTIONS */
section{padding:3.25rem 0}
.section-title{font-size:1.8rem;color:var(--primary-green);text-align:center;margin-bottom:1.7rem}
.section-title::after{content:'';display:block;width:72px;height:4px;background:var(--light-green);margin:0.85rem auto 0;border-radius:4px}

/* ABOUT / MV */
.intro{max-width:900px;margin:0 auto 1.5rem;text-align:center;color:var(--muted)}
.mission-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.mv-card{background:white;padding:1.25rem;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:transform .22s}
.mv-card h3{color:var(--primary-green);margin-bottom:.5rem}
.mv-card:hover{transform:translateY(-6px)}

/* COURSES */
.courses-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.course-card{background:white;border-radius:var(--radius-md);padding:1rem;box-shadow:var(--shadow-sm);border-top:4px solid var(--light-green)}
.course-item{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px dashed #f0f0f0}
.note{background:var(--lighter-green);padding:.6rem;border-radius:10px;margin-top:.6rem;color:var(--primary-green);font-weight:700}

/* FEATURES */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;align-items:stretch}
.feature-item{background:white;padding:1rem;border-radius:12px;display:flex;gap:1rem;align-items:center;box-shadow:var(--shadow-sm);transition:transform .18s}
.feature-item:hover{transform:translateY(-6px)}
.feature-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--light-green),var(--primary-green));color:white}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.service-card{background:white;padding:1rem;border-radius:12px;box-shadow:var(--shadow-sm)}

/* FAQ */
.faq-container{max-width:820px;margin:0 auto}
.faq-item{background:white;border-radius:10px;margin-bottom:.8rem;overflow:hidden;box-shadow:var(--shadow-sm)}
.faq-question{width:100%;padding:1rem;border:0;background:white;text-align:left;font-weight:700;color:var(--primary-green);display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .28s ease;background:var(--bg);color:var(--muted);padding:0 1rem}
.faq-answer p{padding:1rem 0}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:1.4rem;align-items:start}
.contact-form{background:white;padding:1rem;border-radius:12px;box-shadow:var(--shadow-sm)}
.contact-info .info-card{background:white;padding:1rem;border-radius:12px;box-shadow:var(--shadow-sm);margin-bottom:1rem}
.info-item{display:flex;gap:.8rem;align-items:flex-start;color:var(--muted);margin-bottom:.6rem}
.info-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--lighter-green);color:var(--primary-green);font-weight:700}

/* FORM */
.form-row{margin-bottom:.8rem}
label{display:block;font-weight:700;margin-bottom:.35rem}
input[type="text"], input[type="tel"], select, textarea{
  width:100%;padding:.65rem;border-radius:10px;border:2px solid #f0f0f0;font-size:1rem;transition:border-color .15s
}
input:focus, select:focus, textarea:focus{outline:none;border-color:var(--light-green)}
textarea{min-height:110px;resize:vertical}

/* ALERT */
.alert{padding:.8rem;border-radius:10px;margin-bottom:1rem;display:none}
.alert.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.alert.show{display:block}

/* Footer */
.footer{background:var(--dark-green);color:white;padding:1.2rem 0;text-align:center}

/* Social icons */
.social-links a{font-size:20px;color:var(--primary-green);margin-right:.6rem;text-decoration:none}
.social-links a:hover{color:var(--light-green)}

/* SMALL SCREENS */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;gap:1rem}
  .contact-grid{grid-template-columns:1fr;gap:1rem}
  .nav-container{width:94%}
  .nav-links ul{gap:1rem}
}

/* MOBILE NAV */
@media (max-width: 768px){
  .menu-toggle{display:block}
  .nav-links{
    position:fixed;
    inset:70px 0 0 auto;
    right:-100%;
    width:320px;
    height:calc(100vh - 70px);
    background:white;
    box-shadow: -8px 12px 40px rgba(0,0,0,0.12);
    transition:right .28s ease;
    padding:1.25rem;
    z-index:1500;
  }
  .nav-links.open{right:0}
  .nav-links ul{flex-direction:column;gap:1rem}
  .nav-links a{padding:.8rem 0;font-size:1.05rem}
  body.nav-open{overflow:hidden}
}

/* Small phones */
@media (max-width:420px){
  .logo-img{height:42px}
  .hero-text h1{font-size:1.6rem}
  .section-title{font-size:1.4rem}
}