/* ╔══════════════════════════════════════════════════════════════╗
   ║  home.css — Styles specific to the HOME PAGE (index.html)   ║
   ╠══════════════════════════════════════════════════════════════╣
   ║  BEGINNER TIPS:                                             ║
   ║  • Hero background colors → find @keyframes gradShift      ║
   ║  • Stats card colors → find .stat-box                      ║
   ║  • Program preview cards → find .pp                        ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* ── Hero ── */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  background: linear-gradient(-45deg, #073520, #1a6b3c, #0d5c30, #22883e);
  background-size: 400% 400%; animation: gradShift 12s ease infinite;
  position: relative; overflow: hidden; padding-top: var(--nav-h);
}
.hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='3' fill='%23fff' fill-opacity='.04'/%3E%3C/svg%3E"); }
.hero-blob { position: absolute; border-radius: 50%; opacity: .1; background: var(--gold2); animation: fl 7s ease-in-out infinite; }
.hero-blob:nth-child(1) { width: 420px; height: 420px; top: -120px; right: -100px; }
.hero-blob:nth-child(2) { width: 260px; height: 260px; bottom: 40px; left: -60px; animation-delay: 3s; }

/* ── Hero background photo slideshow ── */
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; z-index: 0;
  animation: heroFade 24s ease-in-out infinite;
}
.hero-slide::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(5, 35, 18, 0.70);
}
.hero-slide.s1 {
  background-image: url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=1600&q=80');
  animation-delay: 0s;
}
.hero-slide.s2 {
  background-image: url('https://images.unsplash.com/photo-1559757175-5700dde675bc?auto=format&fit=crop&w=1600&q=80');
  animation-delay: 8s;
}
.hero-slide.s3 {
  background-image: url('https://images.unsplash.com/photo-1584515933487-779824d29309?auto=format&fit=crop&w=1600&q=80');
  animation-delay: 16s;
}
@keyframes heroFade {
  0%, 5%   { opacity: 0; }
  12%, 30% { opacity: 1; }
  38%, 100% { opacity: 0; }
}

.hero-inner { max-width: 1160px; margin: 0 auto; padding: 80px 5%; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); color: #fff; padding: 6px 14px; border-radius: 50px; font-size: .78rem; font-weight: 600; margin-bottom: 22px; border: 1px solid rgba(255,255,255,.2); }
.hero-h { font-family: 'Playfair Display', serif; font-size: clamp(2rem,4.5vw,3.4rem); line-height: 1.15; color: #fff; }
.hero-h span { color: var(--gold2); }
.hero-tag { font-size: 1.1rem; color: rgba(255,255,255,.85); margin: 10px 0 16px; line-height: 1.6; }
.hero-p { color: rgba(255,255,255,.7); line-height: 1.75; margin-bottom: 34px; font-size: .93rem; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Stats (hero) ── */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-box { background: rgba(255,255,255,.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); border-radius: 15px; padding: 24px 18px; text-align: center; }
.stat-n { font-size: 2.1rem; font-weight: 800; color: var(--gold2); }
.stat-l { font-size: .75rem; color: rgba(255,255,255,.75); margin-top: 4px; }

/* ── Impact grid ── */
.impact-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.imp { background: #fff; border-radius: 15px; padding: 28px 22px; box-shadow: var(--shadow); text-align: center; transition: all .3s; border-top: 4px solid var(--green); }
.imp:hover { transform: translateY(-5px); }
.imp-icon { width: 58px; height: 58px; border-radius: 14px; background: var(--gl); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 16px; }
.imp h3 { font-size: .95rem; font-weight: 700; margin-bottom: 8px; }
.imp p  { font-size: .82rem; color: var(--gray); line-height: 1.6; }

/* ── Programs preview ── */
.prog-prev { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.pp { background: #fff; border-radius: 14px; padding: 26px; box-shadow: var(--shadow); display: flex; gap: 16px; align-items: flex-start; transition: all .3s; }
.pp:hover { transform: translateY(-4px); }
.pp-ico { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; }
.pp h3 { font-size: .95rem; font-weight: 700; margin-bottom: 6px; }
.pp p  { font-size: .82rem; color: var(--gray); line-height: 1.6; }

/* ── Testimonials ── */
.t-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.t-card { background: #fff; border-radius: 14px; padding: 28px; box-shadow: var(--shadow); }
.t-q { font-size: 2rem; color: var(--green); line-height: 1; margin-bottom: 10px; }
.t-card p { font-size: .85rem; color: var(--gray); line-height: 1.7; font-style: italic; margin-bottom: 16px; }
.t-author { display: flex; align-items: center; gap: 10px; }
.t-av { width: 44px; height: 44px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: #fff; flex-shrink: 0; letter-spacing: .05em; }
.t-name { font-weight: 700; font-size: .85rem; }
.t-role { font-size: .74rem; color: var(--gray); }

/* ── Partners ── */
.partners-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.partner-chip { background: #fff; border: 2px solid #e5e5e5; border-radius: 50px; padding: 10px 22px; font-size: .82rem; font-weight: 600; color: var(--gray); transition: all .2s; }
.partner-chip:hover { border-color: var(--green); color: var(--green); }

/* ── About snapshot (home) ── */
.about-snap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.img-ph { width: 100%; padding-bottom: 72%; background: linear-gradient(135deg, var(--green), var(--green2)); border-radius: 20px; position: relative; overflow: hidden; }
.img-ph::after { content: '🌍'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 76px; opacity: .45; }
.about-img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; aspect-ratio: 4 / 3; }
.img-block { position: relative; }
.img-badge { position: absolute; bottom: -18px; right: -18px; background: var(--gold); border-radius: 14px; padding: 14px 18px; text-align: center; box-shadow: var(--shadow); }
.img-badge b { font-size: 1.4rem; font-weight: 800; display: block; color: var(--dark); }
.img-badge small { font-size: .7rem; font-weight: 700; color: var(--dark); }

@media (max-width: 1024px) {
  .impact-grid { grid-template-columns: repeat(2,1fr); }
  .t-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .hero { min-height: auto; padding-bottom: 48px; }
  .hero-inner { grid-template-columns: 1fr; padding: 28px 5% 32px; }
  .impact-grid, .prog-prev, .t-grid, .about-snap { grid-template-columns: 1fr; }
  .img-badge { bottom: -10px; right: 10px; }
  .hero-h { font-size: clamp(1.5rem, 5vw, 2.2rem); }
  .stat-n { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .hero-btns { flex-direction: column; align-items: flex-start; }
  .hero-h { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
  .hero-p { font-size: .85rem; }
  .hero-tag { font-size: .95rem; }
}