:root{
  --bg:#ffffff;
  --muted:#5c6b6f;
  --accent:#034b8c;      /* deep teal-ish */
  --accent-2:#f2b84b;    /* warm gold accent */
  --card:#fdfcdc;
  --radius:12px;
  --container:1100px;
  --max-width:1100px;
  --txt:#062b33;
  --btn-radius:10px;
  --gap:20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
}

.nav{
  border-bottom:1px solid #eee;
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
  position:sticky;
  top:0;
  z-index:30;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap);
  padding:14px 0;
}
/* === Logo === */
.brand img {
  height: 80px;       /* adjust size */
  width: auto;        /* keep proportions */
  display: block;
}

/* Align brand + nav vertically */
.nav-inner {
  display: flex;
  align-items: center;     /* vertical center */
  justify-content: space-between;
  gap: 32px;
}

/* === Nav Links === */
.nav-links {
  display: flex;
  gap: 24px;
  align-items: center;     /* keeps button inline with text links */
}

/* === Get Involved Button === */
.nav-links .btn-cta {
  background: #034b8c;   /* match your accent */
  color: #fff;
  padding: 8px 16px;     /* smaller padding to match text size */
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 2;        /* fixes tall height */
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s ease;
}

.nav-links .btn-cta:hover {
  background:  #09444e;   /* darker hover */
}
.hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;          /* optional rounded corners */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08); /* soft shadow */
}

@media (max-width: 900px) {
  .hero-media {
    margin-top: 24px;
  }
  .hero-img {
    width: 80%;
  }
}
.nav-links{display:flex;gap:16px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none}
.nav-links .btn-cta{
  background:var(--accent);
  color:white;
  padding:8px 12px;
  border-radius:8px;
  text-decoration:none;
}

.nav-toggle{display:none;background:none;border:0;font-size:20px}

.hero{
  padding:80px 0;
}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
.hero-copy h1{font-size:2rem;margin:0 0 12px}
.lead{color:var(--muted);margin-bottom:18px}
.hero-actions{display:flex;gap:12px;margin-bottom:10px}
.btn-primary{
  background:var(--accent);
  color:white;
  padding:12px 18px;
  border-radius:var(--btn-radius);
  text-decoration:none;
  display:inline-block;
}

/* Vision & Mission*/
.Vision {
  text-align: center;
}
/* === Impact & Reach === */
#impact {
  text-align: center;         /* center text + stats */
}

#impact h2 {
  font-size: 2rem;            /* bigger heading */
  margin-bottom: 12px;
}

#impact .muted {
  max-width: 700px;           /* limit paragraph width */
  margin: 0 auto 32px;        /* center it with spacing */
  font-size: 1.05rem;
}

.stats {
  display: flex;
  justify-content: center;    /* center align the stats */
  gap: 40px;                  /* more space between boxes */
  flex-wrap: wrap;            /* wrap on smaller screens */
  margin-top: 24px;
}

.stat {
  background: #f8fbfc;
  padding: 24px 32px;
  border-radius: 12px;
  min-width: 230px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.stat:hover {
  transform: translateY(-4px); /* subtle hover effect */
}

.stat-value {
  font-weight: 700;
  font-size: 2.2rem;          /* bolder, larger numbers */
  color: #034b8c;             /* accent color */
  margin-bottom: 6px;
}

.stat-label {
  color: #5c6b6f;
  font-size: 0.95rem;
}

.btn-outline{
  border:1px solid var(--accent);
  color:var(--accent);
  padding:12px 18px;border-radius:var(--btn-radius);
  text-decoration:none;
  display:inline-block;
}

.small-note{font-size:13px;color:var(--muted);margin-top:10px}

.card-illustration{border-radius:12px;box-shadow:0 8px 24px rgba(11,85,99,0.06);overflow:hidden;display:flex;align-items:center;justify-content:center;height:260px;background:linear-gradient(180deg,#f6fbff,#eaf6f8)}

.section{padding:56px 0}
.alt-bg{background:#fbfeff}

.cards{display:flex;gap:18px;margin-top:18px}
.card{background:var(--card);padding:18px;border-radius:10px;flex:1}

.program-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.program{background:white;padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(6,43,51,0.03)}

.stats{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap}
.stat{background:var(--card);padding:18px;border-radius:10px;min-width:140px; text-align:center}
.stat-value{font-weight:700;font-size:1.6rem;color:var(--accent)}
.stat-label{color:var(--muted);font-size:13px}

.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;margin-top:18px}
.team-member{background:white;padding:18px;border-radius:10px;text-align:center;box-shadow:0 6px 18px rgba(6,43,51,0.03)}
.photo-placeholder{width:72px;height:72px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#eaf6f8,#fff);color:var(--accent);font-weight:700}

.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:start}
.contact-form{background:white;padding:18px;border-radius:10px;box-shadow:0 6px 24px rgba(6,43,51,0.04)}
.contact-form label{display:block;margin-bottom:12px;font-size:14px}
.contact-form span{display:block;margin-bottom:6px;color:var(--muted)}
.contact-form input, .contact-form textarea{
  width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef0;font-size:14px;
}
.form-msg{margin-top:12px;color:#034b8c}

.footer{border-top:1px solid #f0f2f3;padding:18px 0;margin-top:28px}
.footer .container{display:flex;justify-content:space-between;align-items:center}

/* === TEAM SECTION WITH LINKEDIN ICONS === */
.team-member {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(6, 43, 51, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}

.team-member:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(6, 43, 51, 0.08);
}

.team-member .photo {
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: #f3f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-member .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-member h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0b5563;
  margin: 0;
}

.team-member .role {
  font-size: 0.95rem;
  color: #5c6b6f;
  font-weight: 500;
  margin: 4px 0 8px;
}

.team-member .bio {
  font-size: 0.9rem;
  color: #5c6b6f;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* LinkedIn icon styles */
.social-links {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.icon-linkedin {
  width: 24px;
  height: 24px;
  color: #0a66c2; /* LinkedIn blue */
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-links a:hover .icon-linkedin {
  color: #004182;
  transform: scale(1.1);
}

/* Responsive grid adjustments */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}


/* Responsive adjustments */
@media (max-width: 600px) {
  .team-member {
    padding: 18px;
  }
  .team-member .photo {
    width: 100px;
    height: 100px;
  }
}


/* responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-toggle{display:block}
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 480px; /* left info / right form */
  gap: 32px;
  align-items: start;
}

/* Contact info column */
.contact-info h2 {
  margin: 0 0 12px;
  font-size: 1.6rem;
  color: var(--txt);
}
.contact-info .muted {
  color: var(--muted);
  margin-bottom: 16px;
  max-width: 560px;
}
.contact-list {
  list-style: disc;
  padding-left: 20px;
  color: var(--txt);
}
.contact-list a { color: var(--accent); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* ===== Form styling (matching the HTML classes exactly) ===== */
.contact-form {
  background: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(6,43,51,0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Row with two fields side-by-side */
.form-row {
  display: flex;
  gap: 12px;
}
.form-row .field { flex: 1; }

/* Label + field */
.field {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.95rem;
}
.field span { margin-bottom: 6px; color: var(--muted); font-weight:600; }
.contact-form input,
.contact-form textarea {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e6eef0;
  background: #fbfeff;
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* focus state */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(11,85,99,0.08);
  background: #fff;
}

/* Submit area */
.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 700;
}
.btn-primary:hover { background: #09444e; }

/* form message text */
.form-msg { color: #0b5563; font-size: .95rem; margin:0; }

/* ===== Responsive: stack on smaller screens ===== */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;  /* stack vertically */
  }
  .form-row { flex-direction: column; }
  .contact-form { width: 100%; }
}


/* ====== Global Responsive Styles ====== */

/* Small tablets and below (≤ 900px) */
@media (max-width: 900px) {
  /* NAVIGATION */
  .nav-links {
    display: none; /* hidden by default on small screens */
    flex-direction: column;
    gap: 16px;
    background: #fff;
    position: absolute;
    top: 60px;        /* just below nav bar */
    right: 20px;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  }

  .nav-links.show {
    display: flex; /* toggle this class with JS */
  }

  .nav-toggle {
    display: block; /* show hamburger button */
    cursor: pointer;
    font-size: 24px;
    background: none;
    border: none;
  }

  /* HERO SECTION */
  .hero-grid {
    grid-template-columns: 1fr; /* stack text and image */
    text-align: center;
  }

  .hero-copy {
    order: 1;
  }

  .hero-media {
    order: 2;
    margin-top: 20px;
  }

  .hero-actions {
    justify-content: center;
  }

  /* IMPACT STATS */
  .stats {
    flex-direction: column;
    gap: 20px;
  }

  .stat {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  /* TEAM GRID */
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile phones (≤ 600px) */
@media (max-width: 600px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 1.8rem;
  }

  .hero-actions {
    flex-direction: column;
    gap: 12px;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }
}