<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>OneAfrica Foundation — Education, Wellness, Nutrition for the African Child</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
:root {
  --green:#0D4A4A; --green-dark:#062E2E; --green-mid:#0a3c3c;
  --orange:#FF8A00; --orange-light:#ffA030; --orange-dark:#e07800;
  --white:#FFFFFF; --light-gray:#F5F5F5; --dark:#1A1A1A;
  --gray:#6B7280; --gray-light:#9CA3AF;
  --bg:#FFFFFF; --bg-alt:#F5F5F5; --bg-card:#FFFFFF;
  --text:#1A1A1A; --text-muted:#6B7280;
  --border:rgba(0,0,0,0.08);
  --shadow:0 4px 32px rgba(0,0,0,0.08);
  --shadow-lg:0 12px 60px rgba(0,0,0,0.12);
  --nav-bg:rgba(255,255,255,0.96);
  --nav-border:rgba(0,0,0,0.08);
  --transition:0.3s cubic-bezier(0.4,0,0.2,1);
  --radius:16px; --radius-sm:8px; --radius-lg:24px;
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Outfit',system-ui,sans-serif;
}
[data-theme="dark"] {
  --bg:#062E2E; --bg-alt:#0a3838; --bg-card:#0D4A4A;
  --text:#FFFFFF; --text-muted:#9CA3AF;
  --border:rgba(255,255,255,0.08);
  --shadow:0 4px 32px rgba(0,0,0,0.3);
  --shadow-lg:0 12px 60px rgba(0,0,0,0.4);
  --nav-bg:rgba(6,46,46,0.97);
  --nav-border:rgba(255,255,255,0.06);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);overflow-x:hidden;transition:background var(--transition),color var(--transition);line-height:1.6;max-width:100vw;}
img{max-width:100%;display:block;} a{text-decoration:none;color:inherit;} ul{list-style:none;} button{border:none;background:none;cursor:pointer;font-family:inherit;} input,textarea{font-family:inherit;}
::-webkit-scrollbar{width:5px;} ::-webkit-scrollbar-track{background:var(--bg);} ::-webkit-scrollbar-thumb{background:var(--orange);border-radius:3px;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:50px;font-size:.95rem;font-weight:600;letter-spacing:.02em;transition:all var(--transition);position:relative;overflow:hidden;white-space:nowrap;}
.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.15);transform:translateX(-100%) skewX(-20deg);transition:transform .4s;}
.btn:hover::before{transform:translateX(100%) skewX(-20deg);}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 4px 20px rgba(255,138,0,.35);}
.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 8px 30px rgba(255,138,0,.45);}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-2px);}
.btn-lg{padding:18px 40px;font-size:1rem;} .btn-block{width:100%;justify-content:center;}

/* SECTION HEADERS */
.section-header{text-align:center;margin-bottom:64px;}
.section-tag{display:inline-block;background:rgba(255,138,0,.12);color:var(--orange);font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:6px 16px;border-radius:50px;margin-bottom:16px;border:1px solid rgba(255,138,0,.25);}
.section-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.15;margin-bottom:16px;color:var(--text);}
.section-title em{color:var(--orange);font-style:italic;}
.section-subtitle{font-size:1.05rem;color:var(--text-muted);max-width:600px;margin:0 auto;line-height:1.7;}
.section-header.light .section-title{color:#fff;} .section-header.light .section-subtitle{color:rgba(255,255,255,.75);}

/* NAVBAR */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--nav-bg);border-bottom:1px solid var(--nav-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:all var(--transition);}
.navbar.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.12);}
.nav-container{max-width:1300px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px;}
.nav-logo{flex-shrink:0;display:flex;align-items:center;gap:10px;}
.nav-logo-icon{width:40px;height:40px;background:var(--orange);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;font-weight:900;font-family:var(--font-display);}
.nav-logo-text{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--text);}
.nav-logo-text span{color:var(--orange);}
.nav-links{display:flex;align-items:center;gap:0;flex:1;justify-content:center;}
.nav-link{padding:7px 10px;border-radius:8px;font-size:.82rem;font-weight:500;color:var(--text);transition:all var(--transition);position:relative;white-space:nowrap;}
.nav-link::after{content:'';position:absolute;bottom:2px;left:10px;right:10px;height:2px;background:var(--orange);transform:scaleX(0);transition:transform var(--transition);border-radius:2px;}
.nav-link:hover,.nav-link.active{color:var(--orange);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.theme-toggle{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:50px;background:var(--bg-alt);border:1px solid var(--border);transition:all var(--transition);cursor:pointer;}
.theme-toggle:hover{border-color:var(--orange);}
.theme-icon{font-size:.85rem;transition:all var(--transition);}
[data-theme="dark"] .theme-icon.sun{display:none;}
[data-theme="dark"] .theme-icon.moon{display:inline;color:#818cf8;}
[data-theme="light"] .theme-icon.moon{display:none;}
[data-theme="light"] .theme-icon.sun{display:inline;color:#f59e0b;}
.theme-icon.sun{color:#f59e0b;display:none;}
.theme-icon.moon{color:#818cf8;display:inline;}
.toggle-track{width:30px;height:16px;background:var(--orange);border-radius:50px;position:relative;transition:background var(--transition);}
.toggle-track::after{content:'';position:absolute;width:10px;height:10px;background:#fff;border-radius:50%;top:3px;left:3px;transition:transform var(--transition);}
[data-theme="dark"] .toggle-track::after{transform:translateX(14px);}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:8px;transition:background var(--transition);cursor:pointer;}
.hamburger:hover{background:var(--bg-alt);}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s;}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:1080px){
  .hamburger{display:flex;}
  .nav-links{display:flex;position:fixed;top:72px;left:0;right:0;background:var(--nav-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);flex-direction:column;padding:12px 16px 24px;gap:4px;border-bottom:1px solid var(--nav-border);transform:translateY(-110%);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s;pointer-events:none;z-index:999;box-shadow:0 16px 48px rgba(0,0,0,.18);}
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-link{padding:13px 16px;border-radius:10px;font-size:.95rem;width:100%;display:block;text-align:left;}
}
.nav-mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:998;opacity:0;transition:opacity .3s;}
.nav-mobile-overlay.show{opacity:1;}

/* HERO */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;width:100%;}
.hero-slider{position:relative;width:100%;height:100%;}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .1s;display:flex;align-items:center;}
.hero-slide.active{opacity:1;z-index:1;}
.hero-bg{position:absolute;inset:0;top:-72px;left:-5%;right:-5%;bottom:-5%;background-size:cover;background-position:center;background-repeat:no-repeat;will-change:transform;}
.hero-overlay{position:absolute;inset:0;top:-72px;background:linear-gradient(160deg,rgba(6,46,46,.55) 0%,rgba(6,46,46,.92) 70%,rgba(6,46,46,.97) 100%);}
.hero-content{position:relative;z-index:2;color:#fff;padding:100px 8% 80px;width:100%;max-width:820px;}
.hero-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);background:rgba(255,138,0,.15);border:1px solid rgba(255,138,0,.4);padding:6px 16px;border-radius:50px;margin-bottom:24px;}
.hero-title{font-family:var(--font-display);font-size:clamp(2rem,3.8vw,4.2rem);font-weight:900;line-height:1.05;margin-bottom:20px;color:#fff;}
.hero-title em{color:var(--orange);font-style:italic;}
.hero-subtitle{font-size:clamp(.95rem,1.5vw,1.15rem);color:rgba(255,255,255,.82);margin-bottom:36px;max-width:520px;line-height:1.7;}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;}
.hero-controls{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:20px;}
.hero-arrow{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition);backdrop-filter:blur(10px);}
.hero-arrow:hover{background:var(--orange);border-color:var(--orange);transform:scale(1.1);}
.hero-dots{display:flex;gap:8px;align-items:center;}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s;border:none;}
.dot.active{background:var(--orange);width:24px;border-radius:4px;}
.scroll-indicator{position:absolute;right:40px;bottom:40px;z-index:10;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.6);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;}
.scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,rgba(255,138,0,.8),transparent);animation:scrollPulse 2s ease-in-out infinite;}
@keyframes scrollPulse{0%,100%{transform:scaleY(1);opacity:1;}50%{transform:scaleY(.7);opacity:.5;}}

/* TAGLINE STRIP */
.tagline-strip{background:var(--orange);padding:14px 0;overflow:hidden;}
.tagline-inner{display:flex;gap:60px;width:max-content;animation:stripScroll 20s linear infinite;}
@keyframes stripScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.tagline-item{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.tagline-item i{font-size:.7rem;opacity:.7;}

/* PROBLEM SECTION */
.problem-section{padding:100px 0;background:var(--green-dark);color:#fff;}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.problem-text .section-header{text-align:left;margin-bottom:32px;}
.problem-text .section-header .section-title{color:#fff;}
.problem-text .section-header .section-subtitle{color:rgba(255,255,255,.7);margin:0;}
.problem-lead{font-size:1.05rem;color:rgba(255,255,255,.8);line-height:1.8;margin-bottom:32px;}
.problem-list{display:flex;flex-direction:column;gap:14px;}
.problem-item{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;background:rgba(255,255,255,.05);border-radius:12px;border:1px solid rgba(255,255,255,.1);}
.problem-item i{color:var(--orange);font-size:1.1rem;margin-top:2px;flex-shrink:0;}
.problem-item p{font-size:.92rem;color:rgba(255,255,255,.8);line-height:1.6;}
.problem-item p strong{color:#fff;display:block;margin-bottom:2px;}
.problem-visual{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.problem-stat-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:28px 24px;text-align:center;transition:all var(--transition);}
.problem-stat-card:hover{background:rgba(255,138,0,.12);border-color:rgba(255,138,0,.3);}
.problem-stat-card .stat-num{font-family:var(--font-display);font-size:2.2rem;font-weight:900;color:var(--orange);line-height:1;}
.problem-stat-card .stat-label{font-size:.8rem;color:rgba(255,255,255,.65);margin-top:6px;line-height:1.4;}
.problem-quote{grid-column:1/-1;background:rgba(255,138,0,.12);border:1px solid rgba(255,138,0,.3);border-radius:var(--radius);padding:24px;border-left:4px solid var(--orange);}
.problem-quote p{font-size:.95rem;color:rgba(255,255,255,.85);font-style:italic;line-height:1.7;}

/* MISSION/VISION/VALUES */
.mission-section{padding:120px 0;background:var(--bg);}
.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.mission-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px 36px;position:relative;overflow:hidden;transition:all var(--transition);box-shadow:var(--shadow);}
.mission-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--orange);}
.mission-card.featured{background:var(--green);border-color:var(--green);}
.mission-card.featured h3,.mission-card.featured p{color:#fff;}
.mission-card.featured .card-icon{background:rgba(255,138,0,.2);color:var(--orange);}
.card-icon{width:60px;height:60px;border-radius:var(--radius-sm);background:rgba(255,138,0,.1);color:var(--orange);font-size:1.4rem;display:flex;align-items:center;justify-content:center;margin-bottom:24px;}
.mission-card h3{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:14px;color:var(--text);}
.mission-card p{color:var(--text-muted);line-height:1.75;font-size:.95rem;}
.mission-card.featured p{color:rgba(255,255,255,.8);}
.card-accent{position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange-light));transform:scaleX(0);transition:transform .4s;transform-origin:left;}
.mission-card:hover .card-accent{transform:scaleX(1);}

/* VALUES */
.values-section{padding:80px 0 100px;background:var(--bg);}
.values-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:48px;}
.value-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 20px;text-align:center;transition:all var(--transition);box-shadow:var(--shadow);}
.value-card:hover{transform:translateY(-6px);border-color:var(--orange);}
.value-icon{width:52px;height:52px;border-radius:50%;background:rgba(255,138,0,.1);color:var(--orange);font-size:1.2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.value-card h4{font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:8px;color:var(--text);}
.value-card p{font-size:.82rem;color:var(--text-muted);line-height:1.6;}

/* PILLARS / PROGRAMS */
.programs-section{padding:120px 0;background:var(--bg-alt);}
.pillars-intro{max-width:700px;margin:0 auto 60px;text-align:center;font-size:1.05rem;color:var(--text-muted);line-height:1.8;}
.programs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.program-card{background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);transition:all var(--transition);}
.program-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
.program-img-wrap{position:relative;height:220px;overflow:hidden;}
.program-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1);}
.program-card:hover .program-img-wrap img{transform:scale(1.08);}
.program-img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,74,74,.7),transparent);}
.program-pillar-badge{position:absolute;top:16px;left:16px;background:var(--orange);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:50px;}
.program-body{padding:28px 28px 32px;}
.program-icon{width:44px;height:44px;background:rgba(255,138,0,.1);color:var(--orange);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:16px;}
.program-body h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin-bottom:10px;color:var(--text);}
.program-body p{font-size:.9rem;color:var(--text-muted);line-height:1.7;margin-bottom:16px;}
.program-outcomes{list-style:none;margin-bottom:20px;}
.program-outcomes li{font-size:.85rem;color:var(--text-muted);padding:5px 0;display:flex;align-items:flex-start;gap:8px;border-bottom:1px solid var(--border);}
.program-outcomes li:last-child{border-bottom:none;}
.program-outcomes li::before{content:'→';color:var(--orange);flex-shrink:0;font-weight:700;}
.program-link{font-size:.85rem;font-weight:700;color:var(--orange);display:flex;align-items:center;gap:6px;transition:gap var(--transition);}
.program-link:hover{gap:10px;}

/* DIGNITY TO LEARN */
.dignity-section{padding:100px 0;background:var(--green-dark);color:#fff;}
.dignity-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.dignity-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,138,0,.2);border:1px solid rgba(255,138,0,.4);color:var(--orange);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 16px;border-radius:50px;margin-bottom:20px;}
.dignity-title{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;line-height:1.1;color:#fff;margin-bottom:16px;}
.dignity-title em{color:var(--orange);font-style:italic;}
.dignity-tagline{font-size:1.05rem;color:rgba(255,255,255,.7);margin-bottom:32px;line-height:1.7;}
.dignity-features{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;}
.dignity-feature{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;background:rgba(255,255,255,.05);border-radius:12px;border:1px solid rgba(255,255,255,.08);}
.dignity-feature i{color:var(--orange);font-size:1.1rem;margin-top:2px;flex-shrink:0;}
.dignity-feature div h4{font-size:.9rem;font-weight:700;color:#fff;margin-bottom:4px;}
.dignity-feature div p{font-size:.85rem;color:rgba(255,255,255,.65);line-height:1.5;}
.dignity-visual{position:relative;}
.dignity-img-main{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.dignity-img-main img{width:100%;height:400px;object-fit:cover;}
.dignity-motto{position:absolute;bottom:-24px;left:24px;right:24px;background:var(--orange);border-radius:var(--radius);padding:20px 24px;text-align:center;box-shadow:0 8px 30px rgba(255,138,0,.4);}
.dignity-motto h4{font-family:var(--font-display);font-size:1.1rem;font-weight:900;color:#fff;margin-bottom:4px;}
.dignity-motto p{font-size:.8rem;color:rgba(255,255,255,.85);font-weight:600;}

/* IMPACT */
.impact-section{padding:120px 0;background:var(--bg);}
.impact-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:64px;}
.impact-stat{text-align:center;padding:36px 24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:all var(--transition);}
.impact-stat:hover{transform:translateY(-6px);border-color:var(--orange);}
.impact-stat .num{font-family:var(--font-display);font-size:2.8rem;font-weight:900;color:var(--orange);line-height:1;}
.impact-stat .label{font-size:.85rem;color:var(--text-muted);margin-top:8px;line-height:1.4;}
.impact-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.impact-pillar-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow);transition:all var(--transition);}
.impact-pillar-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.pillar-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;}
.pillar-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.pillar-icon.edu{background:rgba(59,130,246,.12);color:#3b82f6;}
.pillar-icon.well{background:rgba(16,185,129,.12);color:#10b981;}
.pillar-icon.nutr{background:rgba(255,138,0,.12);color:var(--orange);}
.pillar-header h3{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--text);}
.impact-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.impact-list li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--text-muted);line-height:1.5;}
.impact-list li .check{width:20px;height:20px;border-radius:50%;background:var(--orange);color:#fff;font-size:.65rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}

/* BENEFICIARIES */
.beneficiaries-section{padding:100px 0;background:var(--bg-alt);}
.bene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.bene-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow);transition:all var(--transition);}
.bene-card:hover{transform:translateY(-6px);border-color:var(--orange);}
.bene-location{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:12px;}
.bene-card h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:10px;}
.bene-card p{font-size:.88rem;color:var(--text-muted);line-height:1.65;}
.bene-tag{display:inline-block;background:rgba(255,138,0,.1);color:var(--orange);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:50px;margin-top:12px;}

/* FUTURE VISION */
.future-section{padding:120px 0;background:var(--green-dark);color:#fff;}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;margin-top:20px;}
.timeline::before{content:'';position:absolute;top:36px;left:calc(16.66% + 20px);right:calc(16.66% + 20px);height:2px;background:linear-gradient(90deg,var(--orange),rgba(255,138,0,.3));}
.timeline-item{text-align:center;padding:0 20px;}
.timeline-dot{width:72px;height:72px;border-radius:50%;background:var(--orange);border:4px solid rgba(255,138,0,.3);color:#fff;font-family:var(--font-display);font-size:1.2rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;position:relative;z-index:1;box-shadow:0 0 0 8px rgba(255,138,0,.1);}
.timeline-item h3{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:12px;}
.timeline-item ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.timeline-item ul li{font-size:.88rem;color:rgba(255,255,255,.7);display:flex;align-items:flex-start;gap:8px;text-align:left;}
.timeline-item ul li::before{content:'✦';color:var(--orange);flex-shrink:0;font-size:.7rem;margin-top:3px;}

/* GOVERNANCE */
.governance-section{padding:100px 0;background:var(--bg);}
.gov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.gov-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;text-align:center;box-shadow:var(--shadow);transition:all var(--transition);}
.gov-card:hover{transform:translateY(-6px);border-color:var(--orange);}
.gov-icon{width:64px;height:64px;border-radius:50%;background:rgba(255,138,0,.1);color:var(--orange);font-size:1.5rem;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.gov-card h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:12px;}
.gov-card p{font-size:.88rem;color:var(--text-muted);line-height:1.7;}

/* ══════════════════════════════════════════════════
   TEAM SECTION
══════════════════════════════════════════════════ */
.team-section{padding:120px 0;background:var(--bg-alt);overflow:hidden;}
.team-slider-outer{position:relative;overflow:hidden;margin:0 -8px;padding:12px 8px 20px;}
.team-track{display:flex;gap:24px;transition:transform 0.55s cubic-bezier(0.4,0,0.2,1);will-change:transform;cursor:grab;user-select:none;}
.team-track.dragging{cursor:grabbing;transition:none;}
.team-card{flex:0 0 calc(25% - 18px);min-width:260px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);position:relative;}
.team-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--orange);}
.team-photo-wrap{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--bg-alt);}
.team-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);display:block;}
.team-card:hover .team-photo-wrap img{transform:scale(1.06);}
.team-photo-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,74,74,.85) 0%,rgba(13,74,74,.2) 45%,transparent 65%);opacity:0;transition:opacity 0.4s ease;}
.team-card:hover .team-photo-overlay{opacity:1;}
.team-socials{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:10px;opacity:0;transform:translateY(12px);transition:opacity 0.35s ease,transform 0.35s ease;z-index:2;}
.team-card:hover .team-socials{opacity:1;transform:translateY(0);}
.team-socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;backdrop-filter:blur(8px);transition:background var(--transition),border-color var(--transition),transform var(--transition);text-decoration:none;}
.team-socials a:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px);}
.team-pillar-badge{position:absolute;top:14px;left:14px;background:var(--orange);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:50px;z-index:2;}
.team-body{padding:20px 22px 24px;position:relative;}
.team-body::before{content:'';position:absolute;top:0;left:22px;right:22px;height:2px;background:linear-gradient(90deg,var(--orange),transparent);transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease;border-radius:2px;}
.team-card:hover .team-body::before{transform:scaleX(1);}
.team-name{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.25;}
.team-role{font-size:.78rem;font-weight:600;color:var(--orange);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;}
.team-bio{font-size:.82rem;color:var(--text-muted);line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.team-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:40px;}
.team-arrow{width:48px;height:48px;border-radius:50%;background:var(--bg-card);border:1.5px solid var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:.85rem;cursor:pointer;transition:all var(--transition);flex-shrink:0;}
.team-arrow:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:scale(1.08);}
.team-arrow:disabled{opacity:.3;pointer-events:none;}
.team-dots{display:flex;gap:8px;align-items:center;}
.team-dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:1.5px solid var(--orange);cursor:pointer;transition:all 0.3s ease;padding:0;}
.team-dot.active{background:var(--orange);width:24px;border-radius:4px;}
@media(max-width:1199px){.team-card{flex:0 0 calc(33.333% - 16px);min-width:240px;}}
@media(max-width:991px){.team-card{flex:0 0 calc(50% - 12px);min-width:220px;}}
@media(max-width:640px){.team-card{flex:0 0 calc(85% - 8px);min-width:0;max-width:320px;}.team-section{padding:80px 0;}}
@media(max-width:420px){.team-card{flex:0 0 88%;}}

/* SUPPORT */
.support-section{padding:120px 0;background:var(--bg-alt);position:relative;overflow:hidden;}
.support-bg{position:absolute;top:-50%;right:-20%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(13,74,74,.12) 0%,transparent 70%);pointer-events:none;}
.support-content{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.support-text .section-title{text-align:left;margin-bottom:20px;}
.support-text>p{color:var(--text-muted);line-height:1.75;margin-bottom:36px;font-size:1rem;}
.support-ways{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:36px;}
.support-way{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center;transition:all var(--transition);}
.support-way:hover{border-color:var(--orange);transform:translateY(-3px);}
.support-way i{font-size:1.5rem;color:var(--orange);margin-bottom:10px;display:block;}
.support-way h4{font-weight:700;font-size:.9rem;color:var(--text);margin-bottom:6px;}
.support-way p{font-size:.8rem;color:var(--text-muted);line-height:1.5;}
.bank-details{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-bottom:36px;}
.bank-details h4{font-size:.9rem;font-weight:700;color:var(--orange);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.bank-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:.9rem;}
.bank-row:last-child{border-bottom:none;}
.bank-row span{color:var(--text-muted);} .bank-row strong{color:var(--text);}
.support-btns{display:flex;gap:16px;flex-wrap:wrap;}
.support-btns .btn-outline{color:var(--text);border-color:var(--border);}
.support-btns .btn-outline:hover{border-color:var(--orange);color:var(--orange);}
.support-img-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.support-img-wrap img{width:100%;height:500px;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1);}
.support-img-wrap:hover img{transform:scale(1.04);}
.support-img-badge{position:absolute;bottom:24px;left:24px;background:var(--orange);color:#fff;border-radius:var(--radius);padding:16px 20px;text-align:center;box-shadow:0 8px 30px rgba(255,138,0,.4);}
.badge-number{font-family:var(--font-display);font-size:1.8rem;font-weight:900;line-height:1;}
.badge-text{font-size:.75rem;font-weight:600;letter-spacing:.08em;opacity:.9;}

/* GALLERY */
.gallery-section{padding:100px 0;background:var(--bg);}
.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.gallery-item{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:1/1;cursor:pointer;}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-item-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,46,46,.75),transparent 55%);opacity:0;transition:opacity .35s;display:flex;align-items:flex-end;padding:14px;}
.gallery-item:hover .gallery-item-overlay{opacity:1;}
.gallery-item-overlay span{color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.gallery-see-more{text-align:center;margin-top:40px;}
.gallery-page{display:none;position:fixed;inset:0;z-index:2000;background:var(--bg);overflow-y:auto;}
.gallery-page.open{display:block;}
.gallery-page-inner{max-width:1280px;margin:0 auto;padding:100px 24px 80px;}
.gallery-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:48px;}
.gallery-page-header h2{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;color:var(--text);}
.gallery-page-header h2 em{color:var(--orange);font-style:italic;}
.gallery-page-close{width:48px;height:48px;border-radius:50%;background:var(--orange);color:#fff;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition);}
.gallery-page-close:hover{transform:rotate(90deg) scale(1.1);}
.gallery-full-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.gallery-full-item{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:1/1;cursor:pointer;}
.gallery-full-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.gallery-full-item:hover img{transform:scale(1.07);}
.gallery-full-item-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,46,46,.7),transparent 55%);opacity:0;transition:opacity .35s;display:flex;align-items:flex-end;padding:14px;}
.gallery-full-item:hover .gallery-full-item-overlay{opacity:1;}
.gallery-full-item-overlay span{color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.05em;}
.lightbox{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.93);align-items:center;justify-content:center;}
.lightbox.open{display:flex;}
.lightbox-img{max-width:90vw;max-height:88vh;border-radius:12px;object-fit:contain;box-shadow:0 24px 80px rgba(0,0,0,.6);}
.lightbox-close{position:fixed;top:24px;right:28px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition);}
.lightbox-close:hover{background:var(--orange);}
.lightbox-prev,.lightbox-next{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition);}
.lightbox-prev{left:20px;} .lightbox-next{right:20px;}
.lightbox-prev:hover,.lightbox-next:hover{background:var(--orange);}

/* CONTACT */
.contact-section{padding:120px 0;background:var(--bg-alt);}
.contact-grid{display:grid;grid-template-columns:1fr 1.8fr;gap:60px;align-items:start;}
.contact-info{padding-top:8px;}
.contact-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:32px;}
.contact-icon{width:48px;height:48px;min-width:48px;border-radius:var(--radius-sm);background:rgba(255,138,0,.1);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:1rem;}
.contact-item h4{font-weight:700;margin-bottom:4px;font-size:.95rem;color:var(--text);}
.contact-item p{font-size:.9rem;color:var(--text-muted);}
.contact-item a{color:var(--text-muted);transition:color var(--transition);}
.contact-item a:hover{color:var(--orange);}
.contact-socials{display:flex;gap:10px;margin-top:8px;}
.contact-socials a{width:40px;height:40px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:all var(--transition);}
.contact-socials a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-2px);}
.contact-form{background:var(--bg-card);border-radius:var(--radius-lg);padding:48px;border:1px solid var(--border);box-shadow:var(--shadow);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;}
.form-group label{font-size:.85rem;font-weight:600;color:var(--text);}
.form-group input,.form-group textarea{padding:14px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg-alt);color:var(--text);font-size:.95rem;transition:all var(--transition);resize:vertical;}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--orange);background:var(--bg);box-shadow:0 0 0 3px rgba(255,138,0,.1);}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted);}
.form-error{font-size:.78rem;color:#ef4444;font-weight:500;}
.form-success{display:none;margin-top:16px;padding:14px 20px;border-radius:var(--radius-sm);background:rgba(16,185,129,.1);color:#10b981;font-size:.9rem;font-weight:600;align-items:center;gap:8px;border:1px solid rgba(16,185,129,.2);}
.form-success.show{display:flex;}

/* FOOTER */
.footer{background:var(--green-dark);color:#fff;}
.footer-top{padding:80px 0 60px;}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.4fr;gap:48px;}
.footer-brand-name{font-family:var(--font-display);font-size:1.3rem;font-weight:900;color:#fff;margin-bottom:12px;}
.footer-brand-name span{color:var(--orange);}
.footer-brand-tag{font-size:.75rem;color:rgba(255,255,255,.5);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;}
.footer-brand p{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:24px;}
.footer-socials{display:flex;gap:10px;}
.footer-socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:all var(--transition);}
.footer-socials a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-2px);}
.footer-col h4{font-size:.9rem;font-weight:700;margin-bottom:20px;color:#fff;letter-spacing:.05em;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{font-size:.88rem;color:rgba(255,255,255,.55);transition:color var(--transition);}
.footer-col ul li a:hover{color:var(--orange);}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:rgba(255,255,255,.55);margin-bottom:12px;}
.footer-contact li i{color:var(--orange);margin-top:2px;flex-shrink:0;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:24px 0;}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-bottom p{font-size:.85rem;color:rgba(255,255,255,.4);}
.footer-tagline{font-size:.8rem;color:rgba(255,138,0,.7);font-style:italic;}

.back-to-top{position:fixed;bottom:32px;right:32px;z-index:500;width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;font-size:.9rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(255,138,0,.4);opacity:0;transform:translateY(20px);pointer-events:none;transition:all var(--transition);}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.back-to-top:hover{transform:translateY(-3px);}

/* RESPONSIVE */
@media(max-width:1199px){
  .mission-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .programs-grid{grid-template-columns:repeat(2,1fr);}
  .values-grid{grid-template-columns:repeat(3,1fr);}
  .impact-stats-row{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:991px){
  .problem-grid{grid-template-columns:1fr;}
  .problem-visual{grid-template-columns:repeat(2,1fr);}
  .dignity-grid{grid-template-columns:1fr;}
  .dignity-visual{margin-top:40px;}
  .support-content{grid-template-columns:1fr;gap:48px;}
  .support-visual{order:-1;}
  .contact-grid{grid-template-columns:1fr;}
  .timeline{grid-template-columns:1fr;gap:32px;}
  .timeline::before{display:none;}
  .gov-grid{grid-template-columns:1fr 1fr;}
  .bene-grid{grid-template-columns:1fr 1fr;}
  .impact-pillars{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .hero-content{padding:88px 20px 90px;max-width:100%;}
  .hero-title{font-size:clamp(1.9rem,8.5vw,2.8rem);}
  .hero-btns{flex-direction:column;align-items:stretch;}
  .hero-btns .btn{width:100%;justify-content:center;}
  .scroll-indicator{display:none;}
  .mission-grid{grid-template-columns:1fr;}
  .programs-grid{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .contact-form{padding:28px 20px;}
  .form-row{grid-template-columns:1fr;}
  .support-btns{flex-direction:column;}
  .support-ways{grid-template-columns:1fr;}
  .bene-grid{grid-template-columns:1fr;}
  .gov-grid{grid-template-columns:1fr;}
  .impact-stats-row{grid-template-columns:1fr 1fr;}
  .problem-visual{grid-template-columns:1fr 1fr;}
  section{padding:80px 0 !important;}
  .section-header{margin-bottom:48px;}
}
@media(max-width:480px){
  .values-grid{grid-template-columns:1fr;}
  .impact-stats-row{grid-template-columns:1fr;}
  .hero-title{font-size:clamp(1.7rem,9vw,2.2rem);}
  .hero-content{padding:80px 16px 80px;}
}
@media(max-width:1024px){.gallery-grid,.gallery-full-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:768px){.gallery-grid,.gallery-full-grid{grid-template-columns:repeat(3,1fr);gap:8px;}}
@media(max-width:480px){.gallery-grid,.gallery-full-grid{grid-template-columns:repeat(2,1fr);gap:6px;}}
</style>
</head>
<body>

<!-- NAVIGATION -->
<nav class="navbar" id="navbar">
  <div class="nav-container">
    <a href="#home" class="nav-logo">
      <img src="afrilogoz.png" alt="OneAfrica Foundation" style="height:48px;width:auto;object-fit:contain;"/>
    </a>
    <ul class="nav-links" id="navLinks">
      <li><a href="#home" class="nav-link active">Home</a></li>
      <li><a href="#problem" class="nav-link">The Problem</a></li>
      <li><a href="#mission" class="nav-link">Mission</a></li>
      <li><a href="#programs" class="nav-link">Programs</a></li>
      <li><a href="#dignity" class="nav-link">Dignity Initiative</a></li>
      <li><a href="#impact" class="nav-link">Impact</a></li>
      <li><a href="#team" class="nav-link">Our Team</a></li>
      <li><a href="#future" class="nav-link">Future Vision</a></li>
      <li><a href="#support" class="nav-link">Support Us</a></li>
      <li><a href="#contact" class="nav-link">Contact</a></li>
    </ul>
    <div class="nav-right">
      <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
        <span class="theme-icon sun"><i class="fas fa-sun"></i></span>
        <span class="theme-icon moon"><i class="fas fa-moon"></i></span>
        <span class="toggle-track"></span>
      </button>
      <button class="hamburger" id="hamburger" aria-label="Menu">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>
</nav>
<div class="nav-mobile-overlay" id="navOverlay"></div>

<!-- HERO -->
<section class="hero" id="home">
  <div class="hero-slider" id="heroSlider">
    <div class="hero-slide active" data-index="0">
      <div class="hero-bg" style="background-image:url('slide2.jpg')"></div>
      <div class="hero-overlay"></div>
      <div class="hero-content">
        <span class="hero-tag">From Hope to Impact</span>
        <h1 class="hero-title">Investing in the<br/><em>Future of the</em><br/>African Child</h1>
        <p class="hero-subtitle">One Africa Foundation improves the lives of African children through practical, community-based programmes in Education, Wellness, and Nutrition.</p>
        <div class="hero-btns">
          <a href="#programs" class="btn btn-primary">Our Three Pillars</a>
          <a href="#support" class="btn btn-outline">Support the Mission</a>
        </div>
      </div>
    </div>
    <div class="hero-slide" data-index="1">
      <div class="hero-bg" style="background-image:url('https://images.unsplash.com/photo-1497486751825-1233686d5d80?w=1920&q=80')"></div>
      <div class="hero-overlay"></div>
      <div class="hero-content">
        <span class="hero-tag">Education Pillar</span>
        <h1 class="hero-title">No Child<br/><em>Left Behind</em><br/>in Learning</h1>
        <p class="hero-subtitle">We provide structured tutorial support for students preparing for WAEC and JAMB, plus scholarships to open the doors of tertiary education.</p>
        <div class="hero-btns">
          <a href="#programs" class="btn btn-primary">Education Programme</a>
          <a href="#impact" class="btn btn-outline">See Our Impact</a>
        </div>
      </div>
    </div>
    <div class="hero-slide" data-index="2">
      <div class="hero-bg" style="background-image:url('img/slide1.jpg')"></div>
      <div class="hero-overlay"></div>
      <div class="hero-content">
        <span class="hero-tag">Dignity to Learn Initiative</span>
        <h1 class="hero-title">No Girl Should<br/><em>Miss School</em><br/>Because of Her Period</h1>
        <p class="hero-subtitle">Our Dignity to Learn Initiative provides menstrual care packages, hygiene education, and awareness sessions — keeping girls in school every month.</p>
        <div class="hero-btns">
          <a href="#dignity" class="btn btn-primary">Learn More</a>
          <a href="#support" class="btn btn-outline">Support This Cause</a>
        </div>
      </div>
    </div>
    <div class="hero-slide" data-index="3">
      <div class="hero-bg" style="background-image:url('slide2.jpg')"></div>
      <div class="hero-overlay"></div>
      <div class="hero-content">
        <span class="hero-tag">Nutrition Pillar</span>
        <h1 class="hero-title">Nourished<br/><em>Children Learn</em><br/>Better</h1>
        <p class="hero-subtitle">We have adopted Faithworks Orphanage, providing monthly food supply and long-term nutrition support so every child can grow and thrive.</p>
        <div class="hero-btns">
          <a href="#programs" class="btn btn-primary">Nutrition Programme</a>
          <a href="#contact" class="btn btn-outline">Partner With Us</a>
        </div>
      </div>
    </div>
    <div class="hero-slide" data-index="4">
      <div class="hero-bg" style="background-image:url('https://images.unsplash.com/photo-1529390079861-591de354faf5?w=1920&q=80')"></div>
      <div class="hero-overlay"></div>
      <div class="hero-content">
        <span class="hero-tag">Together We Rise</span>
        <h1 class="hero-title">Empowering<br/><em>Africa's Children</em><br/>Together</h1>
        <p class="hero-subtitle">Your donation, partnership, or volunteer time creates real and lasting change. Join us as we build a stronger future for African children — one community at a time.</p>
        <div class="hero-btns">
          <a href="#support" class="btn btn-primary">Join the Movement</a>
          <a href="#impact" class="btn btn-outline">Impact So Far</a>
        </div>
      </div>
    </div>
  </div>
  <div class="hero-controls">
    <button class="hero-arrow prev" id="heroPrev" aria-label="Previous slide"><i class="fas fa-chevron-left"></i></button>
    <div class="hero-dots" id="heroDots">
      <span class="dot active" data-index="0"></span>
      <span class="dot" data-index="1"></span>
      <span class="dot" data-index="2"></span>
      <span class="dot" data-index="3"></span>
      <span class="dot" data-index="4"></span>
    </div>
    <button class="hero-arrow next" id="heroNext" aria-label="Next slide"><i class="fas fa-chevron-right"></i></button>
  </div>
  <div class="scroll-indicator"><span>Scroll</span><div class="scroll-line"></div></div>
</section>

<!-- TAGLINE STRIP -->
<div class="tagline-strip">
  <div class="tagline-inner">
    <span class="tagline-item"><i class="fas fa-star"></i> Education for Every Child</span>
    <span class="tagline-item"><i class="fas fa-star"></i> Dignity to Learn Initiative</span>
    <span class="tagline-item"><i class="fas fa-star"></i> Nutrition Support</span>
    <span class="tagline-item"><i class="fas fa-star"></i> Scholarships &amp; Tutorials</span>
    <span class="tagline-item"><i class="fas fa-star"></i> Period Poverty Eliminated</span>
    <span class="tagline-item"><i class="fas fa-star"></i> Orphanage Adoption</span>
    <span class="tagline-item"><i class="fas fa-star"></i> From Hope to Impact</span>
    <span class="tagline-item"><i class="fas fa-star"></i> Education for Every Child</span>
    <span class="tagline-item"><i class="fas fa-star"></i> Dignity to Learn Initiative</span>
    <span class="tagline-item"><i class="fas fa-star"></i> Nutrition Support</span>
    <span class="tagline-item"><i class="fas fa-star"></i> Scholarships &amp; Tutorials</span>
    <span class="tagline-item"><i class="fas fa-star"></i> Period Poverty Eliminated</span>
    <span class="tagline-item"><i class="fas fa-star"></i> Orphanage Adoption</span>
    <span class="tagline-item"><i class="fas fa-star"></i> From Hope to Impact</span>
  </div>
</div>

<!-- THE PROBLEM -->
<section class="problem-section" id="problem">
  <div class="container">
    <div class="problem-grid">
      <div class="problem-text">
        <div class="section-header" style="text-align:left;margin-bottom:32px;">
          <span class="section-tag">Why We Exist</span>
          <h2 class="section-title" style="color:#fff;">The Problem<br/><em>We're Solving</em></h2>
          <p class="section-subtitle" style="color:rgba(255,255,255,.7);margin:0;">Millions of children across Africa face overlapping barriers that keep them from growing, learning, and thriving.</p>
        </div>
        <div class="problem-list">
          <div class="problem-item"><i class="fas fa-book-open"></i><p><strong>Limited Access to Quality Education</strong>Overcrowded classrooms, limited teacher contact time, and the inability to afford private tutorials leave academically capable students far behind.</p></div>
          <div class="problem-item"><i class="fas fa-female"></i><p><strong>Period Poverty Affecting Girls' Attendance</strong>Many girls miss school every month due to inadequate access to sanitary products. Girls with disabilities face even greater vulnerability.</p></div>
          <div class="problem-item"><i class="fas fa-utensils"></i><p><strong>Malnutrition in Orphanages &amp; Communities</strong>Children in institutional care often face nutritional instability. Hunger directly affects physical development, emotional well-being, and academic concentration.</p></div>
          <div class="problem-item"><i class="fas fa-link"></i><p><strong>These Challenges Are Interconnected</strong>A child who is malnourished cannot learn effectively. A child who is unhealthy misses school. A child who misses school falls behind.</p></div>
        </div>
      </div>
      <div class="problem-visual">
        <div class="problem-stat-card"><div class="stat-num">10M+</div><div class="stat-label">Nigerian children out of school or at risk of dropping out</div></div>
        <div class="problem-stat-card"><div class="stat-num">1 in 3</div><div class="stat-label">Girls in sub-Saharan Africa miss school during menstruation</div></div>
        <div class="problem-stat-card"><div class="stat-num">40%</div><div class="stat-label">Of children in Nigerian public schools attend class hungry</div></div>
        <div class="problem-stat-card"><div class="stat-num">Ages 5–17</div><div class="stat-label">Our primary focus — the most critical window for intervention</div></div>
        <div class="problem-quote"><p>"A child cannot thrive if education, health, and nutrition are treated separately. One Africa Foundation was built on this single, powerful belief."</p></div>
      </div>
    </div>
  </div>
</section>

<!-- MISSION, VISION, GOALS -->
<section class="mission-section" id="mission">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">Who We Are</span>
      <h2 class="section-title">Rooted in Purpose,<br/><em>Driven by Impact</em></h2>
      <p class="section-subtitle">One Africa Foundation is built around a simple but powerful belief: that every African child deserves a fair opportunity to succeed.</p>
    </div>
    <div class="mission-grid">
      <div class="mission-card"><div class="card-icon"><i class="fas fa-eye"></i></div><h3>Our Vision</h3><p>An Africa where every child has a fair opportunity to succeed in life — where children are able to attend school consistently, learn effectively, remain healthy, and receive adequate nutrition.</p><div class="card-accent"></div></div>
      <div class="mission-card featured"><div class="card-icon"><i class="fas fa-bullseye"></i></div><h3>Our Mission</h3><p>To improve the lives of African children through practical, community-based programmes that strengthen education, promote wellness, and improve nutrition. Nigeria is our starting point — Africa is our horizon.</p><div class="card-accent"></div></div>
      <div class="mission-card"><div class="card-icon"><i class="fas fa-flag"></i></div><h3>Our Approach</h3><p>We focus on three integrated pillars: Education, Wellness, and Nutrition. Each programme is deliberately targeted, with defined beneficiaries and measurable outcomes — ensuring depth, accountability, and real impact.</p><div class="card-accent"></div></div>
    </div>
  </div>
</section>

<!-- VALUES -->
<section class="values-section" id="values">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">What We Stand For</span>
      <h2 class="section-title">Our Core<br/><em>Values</em></h2>
      <p class="section-subtitle">Every decision we make, every programme we run, every partnership we form is guided by these five values.</p>
    </div>
    <div class="values-grid">
      <div class="value-card"><div class="value-icon"><i class="fas fa-balance-scale"></i></div><h4>Equity</h4><p>We prioritise the most disadvantaged children — those from low-income households and marginalised groups.</p></div>
      <div class="value-card"><div class="value-icon"><i class="fas fa-heart"></i></div><h4>Dignity</h4><p>All interventions are delivered in ways that respect the dignity of children and their families, especially in sensitive areas like hygiene.</p></div>
      <div class="value-card"><div class="value-icon"><i class="fas fa-chart-line"></i></div><h4>Accountability</h4><p>Funds, materials, and programmes are carefully tracked, documented, and reported to donors and Board members.</p></div>
      <div class="value-card"><div class="value-icon"><i class="fas fa-seedling"></i></div><h4>Sustainability</h4><p>We focus on strengthening local capacity, reducing dependency, and building long-term resilience within communities.</p></div>
      <div class="value-card"><div class="value-icon"><i class="fas fa-hands-helping"></i></div><h4>Collaboration</h4><p>We work closely with schools, parents, community leaders, local organisations, and government institutions.</p></div>
    </div>
  </div>
</section>

<!-- THREE PILLARS / PROGRAMS -->
<section class="programs-section" id="programs">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">What We Do</span>
      <h2 class="section-title">Three Integrated<br/><em>Programme Pillars</em></h2>
      <p class="section-subtitle">Each pillar reinforces the others. Tutorials are more effective when children are well-fed. Girls attend school consistently when menstrual needs are met.</p>
    </div>
    <div class="programs-grid">
      <div class="program-card">
        <div class="program-img-wrap"><img src="https://images.unsplash.com/photo-1544717305-2782549b5136?w=600&q=80" alt="Education" loading="lazy"/><div class="program-img-overlay"></div><span class="program-pillar-badge">Pillar 1 — Education</span></div>
        <div class="program-body">
          <div class="program-icon"><i class="fas fa-graduation-cap"></i></div>
          <h3>Academic Tutorial Support</h3>
          <p>Structured tutorial classes focused on core WAEC and JAMB subjects for students from Government Secondary School, Sabo, and children from our adopted orphanage.</p>
          <ul class="program-outcomes"><li>Small-group teaching with qualified tutors &amp; volunteers</li><li>Past examination questions &amp; exam technique coaching</li><li>Ongoing support — not one-off sessions</li><li>Scholarships for WAEC/JAMB exam sittings</li><li>University scholarship programme for qualifying students</li></ul>
          <a href="support.php" class="program-link">Get Involved <i class="fas fa-arrow-right"></i></a>
        </div>
      </div>
      <div class="program-card">
        <div class="program-img-wrap"><img src="https://images.unsplash.com/photo-1516627145497-ae6968895b74?w=600&q=80" alt="Wellness" loading="lazy"/><div class="program-img-overlay"></div><span class="program-pillar-badge">Pillar 2 — Wellness</span></div>
        <div class="program-body">
          <div class="program-icon"><i class="fas fa-female"></i></div>
          <h3>Dignity to Learn Initiative</h3>
          <p>Menstrual hygiene is a silent driver of school absenteeism. Our initiative provides sanitary pads, hygiene education, and awareness sessions every single month.</p>
          <ul class="program-outcomes"><li>Monthly menstrual care packages for girls in need</li><li>Sensitisation &amp; age-appropriate hygiene education</li><li>Targeted outreach to girls with special needs, Kaduna</li><li>Awareness sessions to reduce stigma and shame</li><li>Encouraging consistent school attendance for girls</li></ul>
          <a href="#dignity" class="program-link">Full Initiative Details <i class="fas fa-arrow-right"></i></a>
        </div>
      </div>
      <div class="program-card">
        <div class="program-img-wrap"><img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=600&q=80" alt="Nutrition" loading="lazy"/><div class="program-img-overlay"></div><span class="program-pillar-badge">Pillar 3 — Nutrition</span></div>
        <div class="program-body">
          <div class="program-icon"><i class="fas fa-utensils"></i></div>
          <h3>Orphanage Nutrition Support</h3>
          <p>We have adopted Faithworks Orphanage, providing consistent food supply and nutrition support to ensure children in institutional care can grow, concentrate, and thrive.</p>
          <ul class="program-outcomes"><li>Monthly food supply assistance to Faithworks Orphanage</li><li>Structured nutrition support programmes</li><li>Strengthening long-term care systems</li><li>Holistic child development — education, nutrition &amp; wellbeing</li><li>Building toward a comprehensive sustainable care model</li></ul>
          <a href="support.php" class="program-link">Partner With Us <i class="fas fa-arrow-right"></i></a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- DIGNITY TO LEARN -->
<section class="dignity-section" id="dignity">
  <div class="container">
    <div class="dignity-grid">
      <div class="dignity-text">
        <span class="dignity-badge"><i class="fas fa-ribbon"></i> Signature Initiative</span>
        <h2 class="dignity-title">Dignity to Learn<br/><em>Initiative</em></h2>
        <p class="dignity-tagline">"Dignity. Education. Every Month." — No girl should miss school because of her period.</p>
        <p style="color:rgba(255,255,255,.75);line-height:1.8;margin-bottom:28px;font-size:.95rem;">Menstrual hygiene remains one of the most underaddressed barriers to girls' education in Nigeria. Our Dignity to Learn Initiative was created to change this — permanently.</p>
        <div class="dignity-features">
          <div class="dignity-feature"><i class="fas fa-comments"></i><div><h4>Sensitisation &amp; Hygiene Talks</h4><p>Age-appropriate education sessions that break down stigma and equip girls with knowledge about their bodies and menstrual health.</p></div></div>
          <div class="dignity-feature"><i class="fas fa-box-heart"></i><div><h4>Monthly Menstrual Care Packages</h4><p>Discreet, dignified distribution of sanitary pads and hygiene materials every month to girls who need them most.</p></div></div>
          <div class="dignity-feature"><i class="fas fa-school"></i><div><h4>School Attendance Focus</h4><p>By removing the barrier of period poverty, we encourage girls to stay in school — confident, healthy, and ready to learn.</p></div></div>
          <div class="dignity-feature"><i class="fas fa-star"></i><div><h4>Priority Target Groups</h4><p>Girls at the School of Special Needs, Kaduna, and girls reached through the Asaba menstrual hygiene intervention.</p></div></div>
        </div>
        <div style="display:flex;gap:16px;flex-wrap:wrap;"><a href="support.php" class="btn btn-primary btn-lg"><i class="fas fa-heart"></i> Support This Initiative</a></div>
      </div>
      <div class="dignity-visual">
        <div class="dignity-img-main"><img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=700&q=80" alt="Dignity to Learn Initiative"/></div>
        <div class="dignity-motto"><h4>"No Girl Should Miss School Because of Her Period"</h4><p>Launched: 26th February 2026 — Growing Every Month</p></div>
      </div>
    </div>
  </div>
</section>

<!-- IMPACT -->
<section class="impact-section" id="impact">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">Proof of Work</span>
      <h2 class="section-title">Impact<br/><em>So Far</em></h2>
      <p class="section-subtitle">Real numbers. Real people. Real transformation. Here is what One Africa Foundation has achieved since our founding.</p>
    </div>
    <div class="impact-stats-row">
      <div class="impact-stat"><div class="num">1,000+</div><div class="label">Students received tables, books &amp; stationery through our Children's Day Outreach</div></div>
      <div class="impact-stat"><div class="num">5,000+</div><div class="label">Sanitary pads distributed to girls across our Annual World Girl Child Day</div></div>
      <div class="impact-stat"><div class="num">500+</div><div class="label">Students received food donations within two years of operations</div></div>
      <div class="impact-stat"><div class="num">432%</div><div class="label">Growth in programme reach under our Dignity to Learn Initiative</div></div>
    </div>
    <div class="impact-pillars">
      <div class="impact-pillar-card">
        <div class="pillar-header"><div class="pillar-icon edu"><i class="fas fa-graduation-cap"></i></div><h3>Education Pillar Achievements</h3></div>
        <ul class="impact-list">
          <li><span class="check"><i class="fas fa-check"></i></span>100 students enrolled for extra classes preparing for SSCE exams</li>
          <li><span class="check"><i class="fas fa-check"></i></span>3 students offered scholarships to sit for WAEC/JAMB examinations</li>
          <li><span class="check"><i class="fas fa-check"></i></span>4 students on full university scholarship projects</li>
          <li><span class="check"><i class="fas fa-check"></i></span>Organised educational programmes and seminars for school children</li>
          <li><span class="check"><i class="fas fa-check"></i></span>Tutors and volunteers delivering small-group, personalised learning</li>
        </ul>
      </div>
      <div class="impact-pillar-card">
        <div class="pillar-header"><div class="pillar-icon well"><i class="fas fa-female"></i></div><h3>Wellness Pillar Achievements</h3></div>
        <ul class="impact-list">
          <li><span class="check"><i class="fas fa-check"></i></span>Outreach to 266+ students through the Dignity to Learn Initiative</li>
          <li><span class="check"><i class="fas fa-check"></i></span>2,660 sanitary pads distributed directly to girls in need</li>
          <li><span class="check"><i class="fas fa-check"></i></span>432% growth in programme reach since launch</li>
          <li><span class="check"><i class="fas fa-check"></i></span>Awareness sessions conducted to reduce menstrual stigma</li>
          <li><span class="check"><i class="fas fa-check"></i></span>Over 500 students reached through World Girl Child Day outreach</li>
          <li><span class="check"><i class="fas fa-check"></i></span>Borehole reconstruction at Special Needs School, Kaduna State</li>
        </ul>
      </div>
      <div class="impact-pillar-card">
        <div class="pillar-header"><div class="pillar-icon nutr"><i class="fas fa-utensils"></i></div><h3>Nutrition Pillar Achievements</h3></div>
        <ul class="impact-list">
          <li><span class="check"><i class="fas fa-check"></i></span>Faithworks Orphanage adopted — ongoing nutritional support provided</li>
          <li><span class="check"><i class="fas fa-check"></i></span>Monthly food supply assistance consistently maintained</li>
          <li><span class="check"><i class="fas fa-check"></i></span>500+ students received food donations within two years</li>
          <li><span class="check"><i class="fas fa-check"></i></span>Nutrition support programmes actively strengthening care systems</li>
          <li><span class="check"><i class="fas fa-check"></i></span>Long-term vision: replicating Agahozo Shalom Youth Village model</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- BENEFICIARIES -->
<section class="beneficiaries-section" id="beneficiaries">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">Who We Serve</span>
      <h2 class="section-title">Our Target<br/><em>Beneficiaries</em></h2>
      <p class="section-subtitle">One Africa Foundation focuses on children between the ages of 5 and 17. We prioritise those who face the greatest structural barriers.</p>
    </div>
    <div class="bene-grid">
      <div class="bene-card"><div class="bene-location"><i class="fas fa-map-marker-alt"></i> Kaduna State, Nigeria</div><h3>School of Special Needs, Kaduna</h3><p>Girls with disabilities and special needs face compounded barriers to menstrual hygiene support. This school is a priority site for our Dignity to Learn Initiative.</p><span class="bene-tag">Wellness Initiative</span></div>
      <div class="bene-card"><div class="bene-location"><i class="fas fa-map-marker-alt"></i> Kaduna State, Nigeria</div><h3>Government Secondary School, Sabo</h3><p>Public secondary school students preparing for WAEC and JAMB. Our tutorial programme targets final-year students with structured, exam-focused classes.</p><span class="bene-tag">Education Programme</span></div>
      <div class="bene-card"><div class="bene-location"><i class="fas fa-map-marker-alt"></i> Nigeria</div><h3>Faithworks Orphanage (Adopted)</h3><p>One Africa Foundation has adopted Faithworks Orphanage as our nutrition partner site. We provide monthly food supply assistance and structured nutrition support.</p><span class="bene-tag">Nutrition Programme</span></div>
      <div class="bene-card"><div class="bene-location"><i class="fas fa-map-marker-alt"></i> Delta State, Nigeria</div><h3>Asaba Menstrual Hygiene Outreach</h3><p>Through our Annual World Girl Child Day campaigns in Asaba, we have reached 500+ students with sanitary pad distributions and health talks.</p><span class="bene-tag">Wellness Initiative</span></div>
      <div class="bene-card"><div class="bene-location"><i class="fas fa-users"></i> Cross-Programme</div><h3>Girls Across Public Schools</h3><p>Girls are a priority group across all our programmes. Our integrated approach targets girls specifically within education, wellness, and nutrition interventions.</p><span class="bene-tag">All Pillars</span></div>
      <div class="bene-card"><div class="bene-location"><i class="fas fa-users"></i> Cross-Programme</div><h3>Low-Income Households &amp; At-Risk Youth</h3><p>Children from low-income households and those at risk of dropping out are prioritised across our education programme. Early intervention has the greatest long-term impact.</p><span class="bene-tag">Education Programme</span></div>
    </div>
  </div>
</section>

<!-- ══════════════════════════════════════════════════
     TEAM SECTION
══════════════════════════════════════════════════ -->
<section class="team-section" id="team">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">The People Behind the Work</span>
      <h2 class="section-title">Meet Our<br/><em>Team</em></h2>
      <p class="section-subtitle">Passionate, purpose-driven individuals united by one conviction — that every African child deserves a fair chance to grow, learn, and thrive.</p>
    </div>

    <div class="team-slider-outer">
      <div class="team-track" id="teamTrack">

        <!-- CARD 1 — Replace photo src, name, role & bio with real data -->
        <div class="team-card">
          <div class="team-photo-wrap">
            <img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=600&q=80" alt="Gift Ndubuisi" loading="lazy"/>
            <div class="team-photo-overlay"></div>
            <span class="team-pillar-badge">Founder</span>
            <div class="team-socials">
              <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
              <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
              <a href="mailto:oneafricafdn@gmail.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
            </div>
          </div>
          <div class="team-body">
            <h3 class="team-name">Gift Ndubuisi</h3>
            <p class="team-role">Founder &amp; Executive Director</p>
            <p class="team-bio">Visionary leader and driving force behind One Africa Foundation. Gift built the organisation on the belief that education, wellness, and nutrition are inseparable pillars of child development.</p>
          </div>
        </div>

        <!-- CARD 2 -->
        <div class="team-card">
          <div class="team-photo-wrap">
            <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=600&q=80" alt="Amara Okonkwo" loading="lazy"/>
            <div class="team-photo-overlay"></div>
            <span class="team-pillar-badge">Education</span>
            <div class="team-socials">
              <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
              <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
              <a href="#" aria-label="Email"><i class="fas fa-envelope"></i></a>
            </div>
          </div>
          <div class="team-body">
            <h3 class="team-name">Amara Okonkwo</h3>
            <p class="team-role">Head of Education Programmes</p>
            <p class="team-bio">Oversees the tutorial programme and scholarship initiatives. Amara works closely with tutors, volunteers, and school coordinators to maximise student outcomes.</p>
          </div>
        </div>

        <!-- CARD 3 -->
        <div class="team-card">
          <div class="team-photo-wrap">
            <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=600&q=80" alt="Ngozi Eze" loading="lazy"/>
            <div class="team-photo-overlay"></div>
            <span class="team-pillar-badge">Wellness</span>
            <div class="team-socials">
              <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
              <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
              <a href="#" aria-label="Email"><i class="fas fa-envelope"></i></a>
            </div>
          </div>
          <div class="team-body">
            <h3 class="team-name">Ngozi Eze</h3>
            <p class="team-role">Dignity to Learn Programme Lead</p>
            <p class="team-bio">Champions the menstrual hygiene initiative across Kaduna and Delta States. Ngozi leads sensitisation sessions and ensures dignified, consistent distribution to every girl we serve.</p>
          </div>
        </div>

        <!-- CARD 4 -->
        <div class="team-card">
          <div class="team-photo-wrap">
            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80" alt="Emmanuel Bello" loading="lazy"/>
            <div class="team-photo-overlay"></div>
            <span class="team-pillar-badge">Nutrition</span>
            <div class="team-socials">
              <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
              <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
              <a href="#" aria-label="Email"><i class="fas fa-envelope"></i></a>
            </div>
          </div>
          <div class="team-body">
            <h3 class="team-name">Emmanuel Bello</h3>
            <p class="team-role">Nutrition &amp; Orphanage Coordinator</p>
            <p class="team-bio">Manages ongoing nutrition support at Faithworks Orphanage and drives our long-term vision of a comprehensive care model inspired by Agahozo Shalom Youth Village.</p>
          </div>
        </div>

        <!-- CARD 5 -->
        <div class="team-card">
          <div class="team-photo-wrap">
            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&q=80" alt="Chidinma Oke" loading="lazy"/>
            <div class="team-photo-overlay"></div>
            <span class="team-pillar-badge">Operations</span>
            <div class="team-socials">
              <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
              <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
              <a href="#" aria-label="Email"><i class="fas fa-envelope"></i></a>
            </div>
          </div>
          <div class="team-body">
            <h3 class="team-name">Chidinma Oke</h3>
            <p class="team-role">Operations &amp; Partnerships Manager</p>
            <p class="team-bio">Coordinates day-to-day operations, donor relations, and strategic partnerships — ensuring the Foundation's resources translate into maximum, measurable impact on the ground.</p>
          </div>
        </div>

        <!-- CARD 6 -->
        <div class="team-card">
          <div class="team-photo-wrap">
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=600&q=80" alt="David Adeleke" loading="lazy"/>
            <div class="team-photo-overlay"></div>
            <span class="team-pillar-badge">Finance</span>
            <div class="team-socials">
              <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
              <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
              <a href="#" aria-label="Email"><i class="fas fa-envelope"></i></a>
            </div>
          </div>
          <div class="team-body">
            <h3 class="team-name">David Adeleke</h3>
            <p class="team-role">Finance &amp; Accountability Officer</p>
            <p class="team-bio">Oversees financial management, reporting, and accountability. David ensures every donation is tracked, deployed responsibly, and reported transparently to the Board and our donors.</p>
          </div>
        </div>

      </div><!-- /team-track -->
    </div><!-- /team-slider-outer -->

    <!-- Slider controls -->
    <div class="team-nav">
      <button class="team-arrow" id="teamPrev" aria-label="Previous"><i class="fas fa-chevron-left"></i></button>
      <div class="team-dots" id="teamDots"></div>
      <button class="team-arrow" id="teamNext" aria-label="Next"><i class="fas fa-chevron-right"></i></button>
    </div>

  </div>
</section>

<!-- FUTURE VISION -->
<section class="future-section" id="future">
  <div class="container">
    <div class="section-header light">
      <span class="section-tag">Looking Ahead</span>
      <h2 class="section-title" style="color:#fff;">Our Three-Year<br/><em>Growth Vision</em></h2>
      <p class="section-subtitle" style="color:rgba(255,255,255,.7);">Over the next three years, One Africa Foundation aims to expand its impact by strengthening and scaling its core programmes.</p>
    </div>
    <div class="timeline">
      <div class="timeline-item">
        <div class="timeline-dot">Y1</div>
        <h3>Year One — Deepen</h3>
        <ul>
          <li>Reach 50,000 students within Kaduna State with high-quality education support</li>
          <li>Raise the Dignity to Learn Initiative's impact by 10,000%</li>
          <li>Scale tutorial programme to cover additional schools and subjects</li>
          <li>Strengthen orphanage nutrition systems with structured meal programmes</li>
        </ul>
      </div>
      <div class="timeline-item">
        <div class="timeline-dot">Y2</div>
        <h3>Year Two — Expand</h3>
        <ul>
          <li>Expand outreaches to more states across Nigeria</li>
          <li>Launch the Dignity to Learn Initiative in 5 additional states</li>
          <li>Grow university scholarship programme to cover more students</li>
          <li>Establish formal partnerships with state government education bodies</li>
        </ul>
      </div>
      <div class="timeline-item">
        <div class="timeline-dot">Y3</div>
        <h3>Year Three — Scale</h3>
        <ul>
          <li>Reach 500,000+ learners globally through schools, partnerships, and online channels</li>
          <li>Begin expansion into other African countries</li>
          <li>Pilot the Agahozo Shalom-inspired comprehensive care model</li>
          <li>Establish One Africa Foundation as a continental impact organisation</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- GOVERNANCE -->
<section class="governance-section" id="governance">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">How We Operate</span>
      <h2 class="section-title">Governance &amp;<br/><em>Accountability</em></h2>
      <p class="section-subtitle">One Africa Foundation is committed to transparent, responsible, and evidence-based operations at every level.</p>
    </div>
    <div class="gov-grid">
      <div class="gov-card"><div class="gov-icon"><i class="fas fa-shield-alt"></i></div><h3>Board of Trustees</h3><p>The Board provides strategic oversight, policy direction, and fiduciary responsibility — ensuring all resources are deployed with integrity toward our mission.</p></div>
      <div class="gov-card"><div class="gov-icon"><i class="fas fa-tasks"></i></div><h3>Executive Management</h3><p>The Executive Management Team oversees programme implementation, partnership development, and financial management — translating strategy into measurable field impact.</p></div>
      <div class="gov-card"><div class="gov-icon"><i class="fas fa-hands"></i></div><h3>Field Delivery</h3><p>Programme Officers, qualified tutors, volunteers, and community partners deliver interventions on the ground — directly in schools, orphanages, and communities.</p></div>
    </div>
    <div style="margin-top:40px;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;max-width:800px;margin-left:auto;margin-right:auto;text-align:center;">
      <h3 style="font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--text);margin-bottom:14px;">Monitoring, Learning &amp; Accountability</h3>
      <p style="color:var(--text-muted);line-height:1.75;font-size:.95rem;">We track student attendance and examination outcomes, distribution records for pads and nutrition support, and beneficiary participation and feedback. Regular reports are submitted to the Board and all partners to ensure full transparency.</p>
    </div>
  </div>
</section>

<!-- SUPPORT -->
<section class="support-section" id="support">
  <div class="support-bg"></div>
  <div class="container">
    <div class="support-content">
      <div class="support-text">
        <span class="section-tag">Make a Difference</span>
        <h2 class="section-title">Support Our<br/><em>Mission Today</em></h2>
        <p>Every contribution — no matter the size — creates real, lasting change in the lives of children across Nigeria and Africa. Your support goes directly to tutorials, sanitary pads, and food that nourishes orphaned children.</p>
        <div class="support-ways">
          <div class="support-way"><i class="fas fa-hand-holding-heart"></i><h4>Donation</h4><p>One-time or recurring donations — every naira and every dollar counts.</p></div>
          <div class="support-way"><i class="fas fa-handshake"></i><h4>Partnership</h4><p>Join hands with us to invest in the African child and create lasting impact.</p></div>
          <div class="support-way"><i class="fas fa-child"></i><h4>Sponsorship</h4><p>Sponsor a child's education, examination fees, or monthly hygiene needs.</p></div>
          <div class="support-way"><i class="fas fa-user-friends"></i><h4>Volunteer</h4><p>Join our outreaches, campaigns, and tutorial programmes in the field.</p></div>
        </div>
        <div class="bank-details">
          <h4><i class="fas fa-university"></i> Donation Details</h4>
          <div class="bank-row"><span>Organisation</span><strong>One Africa Foundation</strong></div>
          <div class="bank-row"><span>Email</span><strong>oneafricafdn@gmail.com</strong></div>
          <div class="bank-row"><span>Phone</span><strong>+2348081082263</strong></div>
          <div class="bank-row"><span>Address</span><strong>Dan Ladi 801127, Kaduna, Nigeria</strong></div>
        </div>
        <div class="support-btns">
          <a href="#" class="btn btn-primary btn-lg"><i class="fas fa-heart"></i> Donate Now</a>
          <a href="support.php" class="btn btn-outline btn-lg"><i class="fas fa-hands-helping"></i> Volunteer / Partner</a>
        </div>
      </div>
      <div class="support-visual">
        <div class="support-img-wrap">
          <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=700&q=80" alt="Children supported by One Africa Foundation" loading="lazy"/>
          <div class="support-img-badge"><div class="badge-number">1,000+</div><div class="badge-text">Children Impacted</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- GALLERY -->
<section class="gallery-section" id="gallery">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">Our Moments</span>
      <h2 class="section-title">Life in the<br/><em>Field</em></h2>
      <p class="section-subtitle">Real moments captured across our programmes — classrooms, outreaches, distributions, and the children at the heart of everything we do.</p>
    </div>
    <div class="gallery-grid" id="galleryGrid">
      <div class="gallery-item"><img src="https://images.unsplash.com/photo-1509099836639-18ba1795216d?w=600&q=80" alt="Tutorial class" loading="lazy"/><div class="gallery-item-overlay"><span>Education</span></div></div>
      <div class="gallery-item"><img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=600&q=80" alt="Children's Day Outreach" loading="lazy"/><div class="gallery-item-overlay"><span>Outreach</span></div></div>
      <div class="gallery-item"><img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&q=80" alt="Dignity to Learn" loading="lazy"/><div class="gallery-item-overlay"><span>Dignity Initiative</span></div></div>
      <div class="gallery-item"><img src="https://images.unsplash.com/photo-1497486751825-1233686d5d80?w=600&q=80" alt="WAEC Tutorial" loading="lazy"/><div class="gallery-item-overlay"><span>Tutorials</span></div></div>
      <div class="gallery-item"><img src="https://images.unsplash.com/photo-1584515933487-779824d29309?w=600&q=80" alt="Health talk" loading="lazy"/><div class="gallery-item-overlay"><span>Wellness</span></div></div>
    </div>
    <div class="gallery-see-more">
      <button class="btn btn-primary btn-lg" onclick="openGalleryPage()"><i class="fas fa-images"></i> See Full Gallery</button>
    </div>
  </div>
</section>

<!-- FULL GALLERY PAGE -->
<div class="gallery-page" id="galleryPage">
  <div class="gallery-page-inner">
    <div class="gallery-page-header">
      <div><span class="section-tag">Full Collection</span><h2><em>Our Gallery</em></h2></div>
      <button class="gallery-page-close" onclick="closeGalleryPage()" aria-label="Close gallery"><i class="fas fa-times"></i></button>
    </div>
    <div class="gallery-full-grid" id="galleryFullGrid">
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1509099836639-18ba1795216d?w=800&q=80" alt="Tutorial class" loading="lazy"/><div class="gallery-full-item-overlay"><span>Education</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=800&q=80" alt="Children's Day Outreach" loading="lazy"/><div class="gallery-full-item-overlay"><span>Outreach</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&q=80" alt="Dignity Initiative" loading="lazy"/><div class="gallery-full-item-overlay"><span>Dignity Initiative</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1497486751825-1233686d5d80?w=800&q=80" alt="WAEC Tutorial" loading="lazy"/><div class="gallery-full-item-overlay"><span>Tutorials</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1584515933487-779824d29309?w=800&q=80" alt="Health talk" loading="lazy"/><div class="gallery-full-item-overlay"><span>Wellness</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=800&q=80" alt="Orphanage visit" loading="lazy"/><div class="gallery-full-item-overlay"><span>Nutrition</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1529390079861-591de354faf5?w=800&q=80" alt="World Girl Child Day" loading="lazy"/><div class="gallery-full-item-overlay"><span>Girl Child Day</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=800&q=80" alt="Community leader" loading="lazy"/><div class="gallery-full-item-overlay"><span>Leadership</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=800&q=80" alt="Volunteer" loading="lazy"/><div class="gallery-full-item-overlay"><span>Volunteers</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=800&q=80" alt="Field Work" loading="lazy"/><div class="gallery-full-item-overlay"><span>Field Work</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=800&q=80" alt="Girls outreach" loading="lazy"/><div class="gallery-full-item-overlay"><span>Girls Outreach</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=800&q=80" alt="Women volunteers" loading="lazy"/><div class="gallery-full-item-overlay"><span>Volunteers</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1509099836639-18ba1795216d?w=800&q=80" alt="Classroom visit" loading="lazy"/><div class="gallery-full-item-overlay"><span>Education</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=800&q=80" alt="Community gathering" loading="lazy"/><div class="gallery-full-item-overlay"><span>Community</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1584515933487-779824d29309?w=800&q=80" alt="Medical camp" loading="lazy"/><div class="gallery-full-item-overlay"><span>Health</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1529390079861-591de354faf5?w=800&q=80" alt="Skills training" loading="lazy"/><div class="gallery-full-item-overlay"><span>Training</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=800&q=80" alt="New school" loading="lazy"/><div class="gallery-full-item-overlay"><span>Infrastructure</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=800&q=80" alt="Programme leader" loading="lazy"/><div class="gallery-full-item-overlay"><span>Leadership</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&q=80" alt="Programme leader 2" loading="lazy"/><div class="gallery-full-item-overlay"><span>Leadership</span></div></div>
      <div class="gallery-full-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=800&q=80" alt="Volunteer 2" loading="lazy"/><div class="gallery-full-item-overlay"><span>Volunteers</span></div></div>
    </div>
  </div>
</div>
<div class="lightbox" id="lightbox" onclick="closeLightboxOnBg(event)">
  <button class="lightbox-close" onclick="closeLightbox()" aria-label="Close"><i class="fas fa-times"></i></button>
  <button class="lightbox-prev" onclick="lightboxNav(-1)" aria-label="Previous"><i class="fas fa-chevron-left"></i></button>
  <img class="lightbox-img" id="lightboxImg" src="" alt=""/>
  <button class="lightbox-next" onclick="lightboxNav(1)" aria-label="Next"><i class="fas fa-chevron-right"></i></button>
</div>

<!-- CONTACT -->
<section class="contact-section" id="contact">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">Reach Out</span>
      <h2 class="section-title">Get In<br/><em>Touch With Us</em></h2>
      <p class="section-subtitle">Whether you want to donate, volunteer, partner with us, or simply learn more — we'd love to hear from you.</p>
    </div>
    <div class="contact-grid">
      <div class="contact-info">
        <div class="contact-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h4>Our Office</h4><p>Dan Ladi 801127, Kaduna, Nigeria</p></div></div>
        <div class="contact-item"><div class="contact-icon"><i class="fas fa-phone"></i></div><div><h4>Phone</h4><p><a href="tel:+2348081082263">+2348081082263</a></p></div></div>
        <div class="contact-item"><div class="contact-icon"><i class="fas fa-envelope"></i></div><div><h4>Email</h4><p><a href="mailto:oneafricafdn@gmail.com">oneafricafdn@gmail.com</a></p></div></div>
        <div class="contact-item"><div class="contact-icon"><i class="fas fa-quote-left"></i></div><div><h4>Our Tagline</h4><p><em>"From Hope to Impact: Investing in the Future of the African Child"</em></p></div></div>
        <div class="contact-socials">
          <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
          <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
          <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
          <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
          <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
        </div>
      </div>
      <form class="contact-form" id="contactForm" novalidate>
        <div class="form-row">
          <div class="form-group"><label for="name">Full Name</label><input type="text" id="name" name="name" placeholder="Your full name" required/><span class="form-error" id="nameError"></span></div>
          <div class="form-group"><label for="email">Email Address</label><input type="email" id="email" name="email" placeholder="your@email.com" required/><span class="form-error" id="emailError"></span></div>
        </div>
        <div class="form-group"><label for="subject">How Can We Help?</label><input type="text" id="subject" name="subject" placeholder="Donation / Volunteer / Partnership / General Enquiry" required/><span class="form-error" id="subjectError"></span></div>
        <div class="form-group"><label for="message">Your Message</label><textarea id="message" name="message" rows="5" placeholder="Tell us more about how you'd like to get involved..." required></textarea><span class="form-error" id="messageError"></span></div>
        <button type="submit" class="btn btn-primary btn-block"><span class="btn-text">Send Message</span><i class="fas fa-paper-plane"></i></button>
        <div class="form-success" id="formSuccess"><i class="fas fa-check-circle"></i> Message sent! We'll be in touch soon.</div>
      </form>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer class="footer">
  <div class="footer-top">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <div class="footer-brand-name">One<span>Africa</span> Foundation</div>
          <div class="footer-brand-tag">From Hope to Impact</div>
          <p>Improving the lives of African children through practical, community-based programmes in Education, Wellness, and Nutrition. Nigeria is our starting point — Africa is our horizon.</p>
          <div class="footer-socials">
            <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
            <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
            <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
            <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
          </div>
        </div>
        <div class="footer-col">
          <h4>Navigate</h4>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#problem">The Problem</a></li>
            <li><a href="#mission">Our Mission</a></li>
            <li><a href="#programs">Our Programmes</a></li>
            <li><a href="#dignity">Dignity Initiative</a></li>
            <li><a href="#team">Our Team</a></li>
            <li><a href="#impact">Impact So Far</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>Get Involved</h4>
          <ul>
            <li><a href="#support">Donate</a></li>
            <li><a href="#support">Volunteer</a></li>
            <li><a href="#support">Sponsor a Child</a></li>
            <li><a href="#contact">Partner With Us</a></li>
            <li><a href="#future">Our Future Vision</a></li>
            <li><a href="#contact">Contact Us</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>Contact Info</h4>
          <ul class="footer-contact">
            <li><i class="fas fa-map-marker-alt"></i> Dan Ladi 801127, Kaduna, Nigeria</li>
            <li><i class="fas fa-phone"></i> +2348081082263</li>
            <li><i class="fas fa-envelope"></i> oneafricafdn@gmail.com</li>
            <li><i class="fas fa-user"></i> Presented by Gift Ndubuisi</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-bottom">
    <div class="container">
      <div class="footer-bottom-inner">
        <p>© 2026 One Africa Foundation. All rights reserved. Built with <i class="fas fa-heart" style="color:#FF8A00"></i> for Africa's children.</p>
        <span class="footer-tagline">"Investing in the Future of the African Child"</span>
      </div>
    </div>
  </div>
</footer>

<button class="back-to-top" id="backToTop" aria-label="Back to top"><i class="fas fa-chevron-up"></i></button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
// THEME TOGGLE
const themeToggle = document.getElementById('themeToggle');
const html = document.documentElement;
const savedTheme = localStorage.getItem('oneafrica-theme') || 'dark';
html.setAttribute('data-theme', savedTheme);
themeToggle.addEventListener('click', () => {
  const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
  html.setAttribute('data-theme', next);
  localStorage.setItem('oneafrica-theme', next);
});

// HAMBURGER
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('navLinks');
const navOverlay = document.getElementById('navOverlay');
function openMenu() { hamburger.classList.add('active'); navLinks.classList.add('open'); navOverlay.style.display='block'; setTimeout(()=>navOverlay.classList.add('show'),10); document.body.style.overflow='hidden'; }
function closeMenu() { hamburger.classList.remove('active'); navLinks.classList.remove('open'); navOverlay.classList.remove('show'); setTimeout(()=>{navOverlay.style.display='none';},300); document.body.style.overflow=''; }
hamburger.addEventListener('click',()=>{ navLinks.classList.contains('open')?closeMenu():openMenu(); });
navOverlay.addEventListener('click',closeMenu);
navLinks.querySelectorAll('.nav-link').forEach(link=>link.addEventListener('click',closeMenu));

// NAVBAR SCROLL
const navbar = document.getElementById('navbar');
const backToTop = document.getElementById('backToTop');
window.addEventListener('scroll',()=>{ navbar.classList.toggle('scrolled',window.scrollY>40); backToTop.classList.toggle('visible',window.scrollY>400); updateActiveNav(); },{passive:true});
function updateActiveNav() {
  const sections=document.querySelectorAll('section[id]');
  const scrollY=window.scrollY+100;
  sections.forEach(section=>{ const link=document.querySelector(`.nav-link[href="#${section.id}"]`); if(link) link.classList.toggle('active',scrollY>=section.offsetTop&&scrollY<section.offsetTop+section.offsetHeight); });
}
backToTop.addEventListener('click',()=>window.scrollTo({top:0,behavior:'smooth'}));
document.querySelectorAll('a[href^="#"]').forEach(a=>{ a.addEventListener('click',e=>{ const target=document.querySelector(a.getAttribute('href')); if(target){e.preventDefault();target.scrollIntoView({behavior:'smooth',block:'start'});} }); });

// HERO SLIDER
let currentSlide=0,totalSlides=5,autoSlideTimer=null,isAnimating=false;
const slides=document.querySelectorAll('.hero-slide');
const dots=document.querySelectorAll('.dot');
const prevBtn=document.getElementById('heroPrev');
const nextBtn=document.getElementById('heroNext');
function animateSlideIn(slide) {
  const bg=slide.querySelector('.hero-bg'),tag=slide.querySelector('.hero-tag'),title=slide.querySelector('.hero-title'),subtitle=slide.querySelector('.hero-subtitle'),btns=slide.querySelectorAll('.hero-btns .btn');
  const tl=gsap.timeline({onComplete:()=>{isAnimating=false;}});
  tl.from(bg,{scale:1.12,duration:7,ease:'power2.out'},0).from(tag,{y:30,opacity:0,duration:0.7,ease:'power3.out'},0.1).from(title,{y:80,opacity:0,duration:1.0,ease:'power4.out'},0.2).from(subtitle,{y:40,opacity:0,duration:0.9,ease:'power3.out'},0.45).from(btns,{y:30,opacity:0,scale:0.9,duration:0.7,stagger:0.1,ease:'back.out(1.5)'},0.65);
}
function goToSlide(index,direction=1) {
  if(isAnimating||index===currentSlide) return;
  isAnimating=true;
  const prevSlide=slides[currentSlide],nextSlide=slides[index];
  gsap.to(prevSlide.querySelector('.hero-content'),{opacity:0,y:direction>0?-30:30,duration:0.4,ease:'power2.in',onComplete:()=>{prevSlide.classList.remove('active');prevSlide.querySelector('.hero-content').style.cssText='';}});
  gsap.to(prevSlide,{opacity:0,duration:0.6,delay:0.1});
  currentSlide=index;
  nextSlide.classList.add('active');
  gsap.set(nextSlide,{opacity:0});
  gsap.to(nextSlide,{opacity:1,duration:0.6,delay:0.2,onComplete:()=>{slides.forEach((s,i)=>{if(i!==currentSlide){s.classList.remove('active');gsap.set(s,{opacity:0});}});}});
  animateSlideIn(nextSlide);
  dots.forEach((d,i)=>d.classList.toggle('active',i===currentSlide));
  resetAutoSlide();
}
function nextSlide(){goToSlide((currentSlide+1)%totalSlides,1);}
function prevSlide(){goToSlide((currentSlide-1+totalSlides)%totalSlides,-1);}
nextBtn.addEventListener('click',nextSlide); prevBtn.addEventListener('click',prevSlide);
dots.forEach(dot=>dot.addEventListener('click',()=>{const idx=parseInt(dot.dataset.index);goToSlide(idx,idx>currentSlide?1:-1);}));
function startAutoSlide(){autoSlideTimer=setInterval(nextSlide,5000);}
function resetAutoSlide(){clearInterval(autoSlideTimer);startAutoSlide();}
document.addEventListener('keydown',e=>{if(e.key==='ArrowRight')nextSlide();if(e.key==='ArrowLeft')prevSlide();});
let touchStartX=0;
document.querySelector('.hero').addEventListener('touchstart',e=>{touchStartX=e.changedTouches[0].screenX;},{passive:true});
document.querySelector('.hero').addEventListener('touchend',e=>{const d=touchStartX-e.changedTouches[0].screenX;if(Math.abs(d)>50)d>0?nextSlide():prevSlide();},{passive:true});

// GSAP SCROLL ANIMATIONS
gsap.registerPlugin(ScrollTrigger);
gsap.from('.navbar',{opacity:0,duration:0.6,ease:'power2.out',delay:0.1});
window.addEventListener('load',()=>{animateSlideIn(slides[0]);startAutoSlide();});
gsap.utils.toArray('.mission-card').forEach((card,i)=>{gsap.from(card,{y:60,opacity:0,duration:0.8,delay:i*0.15,ease:'power3.out',scrollTrigger:{trigger:card,start:'top 85%',toggleActions:'play none none none'}});});
gsap.utils.toArray('.value-card').forEach((card,i)=>{gsap.from(card,{y:50,opacity:0,duration:0.7,delay:i*0.1,ease:'power3.out',scrollTrigger:{trigger:card,start:'top 88%',toggleActions:'play none none none'}});});
gsap.utils.toArray('.program-card').forEach((card,i)=>{gsap.from(card,{y:70,opacity:0,duration:0.9,delay:i*0.15,ease:'power3.out',scrollTrigger:{trigger:card,start:'top 88%',toggleActions:'play none none none'}});});
gsap.utils.toArray('.impact-stat').forEach((stat,i)=>{gsap.from(stat,{y:40,opacity:0,duration:0.7,delay:i*0.1,ease:'power3.out',scrollTrigger:{trigger:stat,start:'top 88%',toggleActions:'play none none none'}});});
gsap.utils.toArray('.impact-pillar-card').forEach((card,i)=>{gsap.from(card,{y:60,opacity:0,duration:0.8,delay:i*0.15,ease:'power3.out',scrollTrigger:{trigger:card,start:'top 88%',toggleActions:'play none none none'}});});
gsap.utils.toArray('.bene-card').forEach((card,i)=>{gsap.from(card,{y:50,opacity:0,duration:0.7,delay:i*0.1,ease:'power3.out',scrollTrigger:{trigger:card,start:'top 88%',toggleActions:'play none none none'}});});
gsap.utils.toArray('.timeline-item').forEach((item,i)=>{gsap.from(item,{y:50,opacity:0,duration:0.8,delay:i*0.2,ease:'power3.out',scrollTrigger:{trigger:'.timeline',start:'top 80%',toggleActions:'play none none none'}});});
gsap.from('.dignity-text',{x:-60,opacity:0,duration:1,ease:'power3.out',scrollTrigger:{trigger:'.dignity-grid',start:'top 80%',toggleActions:'play none none none'}});
gsap.from('.dignity-visual',{x:60,opacity:0,duration:1,ease:'power3.out',scrollTrigger:{trigger:'.dignity-grid',start:'top 80%',toggleActions:'play none none none'}});
gsap.from('.support-text',{x:-60,opacity:0,duration:1,ease:'power3.out',scrollTrigger:{trigger:'.support-content',start:'top 80%',toggleActions:'play none none none'}});
gsap.from('.support-visual',{x:60,opacity:0,duration:1,ease:'power3.out',scrollTrigger:{trigger:'.support-content',start:'top 80%',toggleActions:'play none none none'}});
gsap.from('.contact-info',{x:-50,opacity:0,duration:0.9,ease:'power3.out',scrollTrigger:{trigger:'.contact-grid',start:'top 80%',toggleActions:'play none none none'}});
gsap.from('.contact-form',{x:50,opacity:0,duration:0.9,ease:'power3.out',scrollTrigger:{trigger:'.contact-grid',start:'top 80%',toggleActions:'play none none none'}});
gsap.utils.toArray('.section-header').forEach(header=>{
  gsap.from([header.querySelector('.section-tag'),header.querySelector('.section-title'),header.querySelector('.section-subtitle')].filter(Boolean),{y:40,opacity:0,duration:0.85,stagger:0.1,ease:'power3.out',scrollTrigger:{trigger:header,start:'top 85%',toggleActions:'play none none none'}});
});
gsap.from('.footer-grid > *',{y:40,opacity:0,duration:0.8,stagger:0.1,ease:'power3.out',scrollTrigger:{trigger:'.footer-grid',start:'top 90%',toggleActions:'play none none none'}});
gsap.from('#galleryGrid .gallery-item',{scale:0.88,opacity:0,duration:0.6,stagger:0.07,ease:'back.out(1.4)',scrollTrigger:{trigger:'#galleryGrid',start:'top 85%',toggleActions:'play none none none'}});
gsap.utils.toArray('.problem-item').forEach((item,i)=>{gsap.from(item,{x:-40,opacity:0,duration:0.7,delay:i*0.1,ease:'power3.out',scrollTrigger:{trigger:item,start:'top 90%',toggleActions:'play none none none'}});});
gsap.utils.toArray('.problem-stat-card').forEach((card,i)=>{gsap.from(card,{scale:0.9,opacity:0,duration:0.6,delay:i*0.1,ease:'back.out(1.4)',scrollTrigger:{trigger:card,start:'top 90%',toggleActions:'play none none none'}});});

// TEAM SLIDER
(function(){
  const track    = document.getElementById('teamTrack');
  const prevBtn  = document.getElementById('teamPrev');
  const nextBtn  = document.getElementById('teamNext');
  const dotsWrap = document.getElementById('teamDots');
  if(!track) return;
  const cards = Array.from(track.querySelectorAll('.team-card'));
  let currentIdx = 0, autoTimer = null;

  function visibleCount() {
    const w = window.innerWidth;
    if(w>=1200) return 4;
    if(w>=992)  return 3;
    if(w>=641)  return 2;
    return 1;
  }
  function totalPages(){ return Math.max(1, cards.length - visibleCount() + 1); }

  function buildDots(){
    dotsWrap.innerHTML='';
    for(let i=0;i<totalPages();i++){
      const d=document.createElement('button');
      d.className='team-dot'+(i===0?' active':'');
      d.setAttribute('aria-label','Go to team member '+(i+1));
      d.addEventListener('click',()=>goTo(i));
      dotsWrap.appendChild(d);
    }
  }

  function goTo(idx){
    const pages=totalPages();
    currentIdx=Math.max(0,Math.min(idx,pages-1));
    const gap=24;
    const cardW=cards[0].offsetWidth+gap;
    track.style.transform='translateX(-'+currentIdx*cardW+'px)';
    dotsWrap.querySelectorAll('.team-dot').forEach((d,i)=>d.classList.toggle('active',i===currentIdx));
    prevBtn.disabled=(currentIdx===0);
    nextBtn.disabled=(currentIdx>=pages-1);
  }
  function prev(){ goTo(currentIdx-1); resetAuto(); }
  function next(){ goTo(currentIdx+1); resetAuto(); }
  prevBtn.addEventListener('click',prev);
  nextBtn.addEventListener('click',next);

  function startAuto(){ autoTimer=setInterval(()=>goTo(currentIdx+1>=totalPages()?0:currentIdx+1),4000); }
  function resetAuto(){ clearInterval(autoTimer); startAuto(); }

  let dragStartX=0,dragDelta=0,dragging=false;
  track.addEventListener('mousedown',e=>{dragging=true;dragStartX=e.clientX;track.classList.add('dragging');clearInterval(autoTimer);});
  track.addEventListener('touchstart',e=>{dragStartX=e.touches[0].clientX;clearInterval(autoTimer);},{passive:true});
  window.addEventListener('mousemove',e=>{if(!dragging)return;dragDelta=e.clientX-dragStartX;});
  window.addEventListener('mouseup',()=>{if(!dragging)return;dragging=false;track.classList.remove('dragging');if(Math.abs(dragDelta)>50)dragDelta<0?next():prev();else resetAuto();dragDelta=0;});
  track.addEventListener('touchend',e=>{const diff=dragStartX-e.changedTouches[0].clientX;if(Math.abs(diff)>50)diff>0?next():prev();else startAuto();},{passive:true});

  let resizeTimer;
  window.addEventListener('resize',()=>{clearTimeout(resizeTimer);resizeTimer=setTimeout(()=>{buildDots();goTo(0);},200);});

  // GSAP entrance animation for team cards
  if(typeof gsap!=='undefined'&&typeof ScrollTrigger!=='undefined'){
    gsap.from(cards,{y:60,opacity:0,duration:0.75,stagger:0.1,ease:'power3.out',scrollTrigger:{trigger:'#team',start:'top 82%',toggleActions:'play none none none'}});
  }

  buildDots();
  goTo(0);
  startAuto();
})();

// CONTACT FORM
const contactForm = document.getElementById('contactForm');
const formSuccess = document.getElementById('formSuccess');
function showError(id,msg){const el=document.getElementById(id+'Error');if(el)el.textContent=msg;const inp=document.getElementById(id);if(inp)inp.style.borderColor='#ef4444';}
function clearError(id){const el=document.getElementById(id+'Error');if(el)el.textContent='';const inp=document.getElementById(id);if(inp)inp.style.borderColor='';}
['name','email','subject','message'].forEach(id=>{const el=document.getElementById(id);if(el)el.addEventListener('input',()=>clearError(id));});
contactForm.addEventListener('submit',e=>{
  e.preventDefault();
  let valid=true;
  ['name','email','subject','message'].forEach(clearError);
  const name=document.getElementById('name').value.trim();
  const email=document.getElementById('email').value.trim();
  const subject=document.getElementById('subject').value.trim();
  const message=document.getElementById('message').value.trim();
  if(!name||name.length<2){showError('name','Please enter your full name.');valid=false;}
  if(!email||!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){showError('email','Please enter a valid email address.');valid=false;}
  if(!subject||subject.length<3){showError('subject','Please enter a subject.');valid=false;}
  if(!message||message.length<10){showError('message','Message must be at least 10 characters.');valid=false;}
  if(valid){
    const btn=contactForm.querySelector('button[type="submit"]');
    btn.disabled=true;btn.querySelector('.btn-text').textContent='Sending...';
    setTimeout(()=>{
      formSuccess.classList.add('show');
      gsap.from(formSuccess,{y:20,opacity:0,duration:0.5});
      btn.disabled=false;btn.querySelector('.btn-text').textContent='Send Message';
      contactForm.reset();
      setTimeout(()=>formSuccess.classList.remove('show'),6000);
    },1500);
  } else {
    gsap.to(contactForm,{x:[-8,8,-6,6,-4,4,0],duration:0.5,ease:'power2.out'});
  }
});

// GALLERY
function openGalleryPage(){
  const page=document.getElementById('galleryPage');
  page.classList.add('open');document.body.style.overflow='hidden';page.scrollTop=0;
  gsap.from('#galleryFullGrid .gallery-full-item',{scale:0.85,opacity:0,duration:0.5,stagger:0.04,ease:'back.out(1.3)',delay:0.15});
}
function closeGalleryPage(){document.getElementById('galleryPage').classList.remove('open');document.body.style.overflow='';closeLightbox();}

let lightboxImages=[],lightboxIndex=0;
function openLightbox(el){
  const grid=document.getElementById('galleryFullGrid');
  lightboxImages=Array.from(grid.querySelectorAll('.gallery-full-item img'));
  lightboxIndex=lightboxImages.findIndex(img=>img===el.querySelector('img'));
  showLightboxImage();
  document.getElementById('lightbox').classList.add('open');
}
function showLightboxImage(){
  const img=lightboxImages[lightboxIndex];
  const lb=document.getElementById('lightboxImg');
  gsap.to(lb,{opacity:0,duration:0.15,onComplete:()=>{lb.src=img.src;lb.alt=img.alt;gsap.to(lb,{opacity:1,duration:0.25});}});
}
function closeLightbox(){document.getElementById('lightbox').classList.remove('open');}
function closeLightboxOnBg(e){if(e.target===document.getElementById('lightbox'))closeLightbox();}
function lightboxNav(dir){lightboxIndex=(lightboxIndex+dir+lightboxImages.length)%lightboxImages.length;showLightboxImage();}
document.addEventListener('keydown',e=>{
  if(document.getElementById('lightbox').classList.contains('open')){if(e.key==='ArrowRight')lightboxNav(1);if(e.key==='ArrowLeft')lightboxNav(-1);if(e.key==='Escape')closeLightbox();}
  if(document.getElementById('galleryPage').classList.contains('open')&&e.key==='Escape')closeGalleryPage();
});
</script>
</body>
</html>