/* =========================
   THEME COLORS (Green/Teal)
========================= */
:root {
  --green-700:#14532d;
  --green-600:#047857;
  --green-200:#e6f7f0;
  --green-100:#f3fcf8;
  --ink:#1e2a33;
  --muted:#5b678d;
  --radius-lg:20px;
}

:root{
  --blue-700:#1e3c72;
  --blue-600:#2a5298;
  --blue-200:#eaf1ff;
  --blue-100:#f3f7ff;
  --ink:#1e2a55;
  --muted:#3b4b73;
  --radius-lg:20px;
}

/* =========================
   BASE
========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Poppins",sans-serif;
  color:var(--ink);
  background:#f8fbff;
  line-height:1.65;
}
h1,h2,h3{margin:0 0 .6rem}
p{margin:.25rem 0 0}
section{padding:72px 7vw}

/* Section titles */
h2{
  text-align:center;
  font-size:clamp(1.6rem,2.2vw,2.2rem);
  color:var(--blue-700);
  position:relative;
}
h2::after{
  content:"";
  display:block;
  width:84px;height:4px;
  margin:10px auto 0;
  border-radius:6px;
  background:linear-gradient(90deg,var(--blue-700),var(--blue-600));
}

/* Buttons */
.btn-1{
  display:inline-block;
  padding:12px 22px;
  background:#fff;
  color:var(--blue-700);
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 6px 16px rgba(20,83,45,.18);
  transition:.3s;
}
.btn-1:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,83,45,.22)}

/* =========================
   HERO
========================= */
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:40px;
  padding-block:72px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue-700),var(--blue-600));
}
.hero-text h1{font-size:clamp(1.8rem,3.2vw,2.8rem)}
.hero-text p{max-width:640px;opacity:.95}
.hero-img img{
  width:min(320px,35vw);
  display:block;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.25));
  animation:float 4s ease-in-out infinite;
  margin: auto;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* =========================
   WHY US
========================= */
.why-us{background:#fff}
.why-us .cards{
  margin-top:38px;
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.why-us .card{
  background:var(--blue-100);
  border:1px solid rgba(20,83,45,.12);
  border-radius:16px;
  padding:26px;
  text-align:center;
  transition:.3s;
}
.why-us .card i{
  font-size:32px; color:#fff;
  width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:12px;
  background:linear-gradient(135deg,var(--blue-700),var(--blue-600));
  box-shadow:0 6px 16px rgba(20,83,45,.25);
}
.why-us .card:hover{transform:translateY(-8px);box-shadow:0 14px 28px rgba(20,83,45,.18)}

/* =========================
   ROADMAP
========================= */
.roadmap{background:#fdfdfd;text-align:center}
.timeline{
  display:flex;flex-direction:column;gap:22px;margin-top:30px;
  max-width:700px;margin-inline:auto;
  border-left:4px solid var(--blue-600);padding-left:24px;
}
.timeline-item{position:relative;text-align:left;padding-left:10px;background:var(--blue-100);border-radius:12px;padding:16px;transition:.3s}
.timeline-item::before{
  content:"";position:absolute;left:-14px;top:20px;width:14px;height:14px;
  background:var(--blue-600);border-radius:50%;
}
.timeline-item span{font-weight:700;color:var(--blue-700);margin-bottom:6px;display:block}
.timeline-item:hover{transform:translateX(6px);box-shadow:0 10px 22px rgba(20,83,45,.18)}

/* =========================
   CAREER
========================= */
.career{background:linear-gradient(180deg,#f3f7ff 0%, #eef3ff 100%)}
.career-cards{
  margin-top:32px;
  display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.career-card{
  background:#fff;border:1px solid rgba(20,83,45,.12);
  border-radius:18px;padding:26px 22px;text-align:center;
  transition:.3s;position:relative;overflow:hidden;
}
.career-card i{
  font-size:32px;color:#fff;
  width:58px;height:58px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:12px;
  background:linear-gradient(135deg,var(--blue-700),var(--blue-600));
  box-shadow:0 10px 20px rgba(20,83,45,.18);
}
.career-card:hover{transform:translateY(-8px);box-shadow:0 18px 34px rgba(20,83,45,.18)}

/* =========================
   PROGRAMS
========================= */
.programs{background:#fff}
.programs .program-list{
  margin-top:26px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
.programs .program{
  background:var(--blue-100);
  border:1px solid rgba(20,83,45,.15);
  color:var(--ink);
  padding:10px 16px;border-radius:999px;
  font-weight:600;font-size:.95rem;
  transition:.3s;
}
.programs .program:hover{background:#fff;color:var(--blue-700);transform:translateY(-2px);box-shadow:0 10px 18px rgba(20,83,45,.14)}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:880px){
  .hero{grid-template-columns:1fr;text-align:left}
  .hero-img{order:-1;display:flex;justify-content:center}
}