:root{
  --bg:#0b1220;
  --surface:#111a2e;
  --text:#e8eefc;
  --muted:#b7c3e6;
  --gold:#f2b705;
  --green:#0b6a44;
  --line:rgba(255,255,255,.12);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(242,183,5,.12), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(11,106,68,.12), transparent 50%),
    var(--bg);
  line-height:1.65;
}
img{max-width:100%; display:block}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}

/* =========================================================
   TOPBAR (matches Home page) 
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:60;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:18px;
}
.logo-wrap{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo-img{
  width:100px; height:56px;
  border-radius:0px;
  background:transparent url("../images/logo.webp") center/contain no-repeat;
}
.brand-lines .t{
  font-weight:900;
  color:#111;
  letter-spacing:.35px;
  text-transform:uppercase;
  font-size:14px;
}
.brand-lines .s{
  font-size:12px;
  color:#555;
  margin-top:2px;
}

.menu{display:flex; gap:14px; align-items:center}
/* NAV LINKS + OUR WORK BUTTON */
.menu a,
.menu .submenu-toggle {
  text-decoration: none;
  color: var(--green);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

/* Hover background for links AND Our Work */
.menu a:hover,
.menu .submenu-toggle:hover {
  background: rgba(11,106,68,.08);
}

/* Active/current page highlight
   (Our Work is active when its parent has .active) */
.menu a.active,
.menu .has-submenu.active > .submenu-toggle {
  background: rgba(242,183,5,.18);
  border-color: rgba(242,183,5,.35);
}

.menu .cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--green);
  color:#fff;
  border-radius:999px;
  padding:10px 14px;
  border:0;
  white-space:nowrap;
}
.menu .cta:hover{filter:brightness(1.03)}
/* Hover background for links AND Our Work */


/* Remove browser styling on button (details already handled above) */
.submenu-toggle {
  border: none;
  background: transparent;
  font: inherit;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
}


.burger{
  display:none;
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.15);
  padding:10px 12px;
  border-radius:12px;
}

/* --- OUR WORK DROPDOWN --- */

.menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

/* Container for dropdown */
.menu-group.has-submenu {
  position: relative;
}

/* Button that looks like a normal nav link */
.submenu-toggle {
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.submenu-toggle:focus-visible {
  outline: 2px solid #0b6a44;
  outline-offset: 2px;
}

.submenu-toggle .chevron {
  font-size: 0.75rem;
}

/* Dropdown panel */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  padding: 0.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 20;
}

.submenu a {
  padding: 0.45rem 1rem;
  white-space: nowrap;
  font-size: 0.9rem;
}

.submenu a:hover,
.submenu a.active {
  background: rgba(11,106,68,0.06);
}

/* Show on hover (desktop) */
.menu-group.has-submenu:hover .submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* When opened with JS (mobile) */
.menu-group.has-submenu.open .submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Mobile behaviour */
@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .menu-group.has-submenu {
    width: 100%;
  }

  .submenu-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .submenu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    padding-left: 0.75rem;
    margin-top: 0.35rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: none;
    transition: max-height .18s ease, opacity .18s ease;
  }

  .menu-group.has-submenu.open .submenu {
    max-height: 200px; /* big enough for 2–3 items */
    opacity: 1;
  }
}

/* Mobile menu */
@media (max-width: 860px){
  .burger{display:inline-flex}
  .menu{
    display:none;
    position:absolute;
    left:18px; right:18px; top:74px;
    flex-direction:column;
    padding:12px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
  }
  .menu.is-open{display:flex}
}

/* =========================================================
   HERO (Home)
   ========================================================= */
.hero{
  position:relative;
  min-height:72vh;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  padding-bottom: 120px;
}
/* HERO background slideshow */
.slideshow {
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index: 0;
}

/* Every slide */
.slide {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  animation: fade 24s infinite;
}

/* Change the images here */
.slide.s1 { background-image:url("../images/hero.jpg"); }
.slide.s2 { background-image:url("../images/africa.webp"); animation-delay:6s; }
.slide.s3 { background-image:url("../images/slide3.jpg"); animation-delay:12s; }
.slide.s4 { background-image:url("../images/savannah.webp"); animation-delay:18s; }

/* Fade-in animation */
@keyframes fade {
  0%, 100% { opacity:0; }
  8%, 33% { opacity:1; }
}

/* Green overlay on top of slideshow */
.slideshow::after {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,106,68,.78), rgba(11,106,68,.42));
  pointer-events:none;
  z-index: 1;
}

.hero-content{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:40px 0;
  z-index: 2;
}
.hero-center{
  text-align:center;
  color:#fff;
  max-width:900px;
  margin-top: 20px;
}
.hero-logo{
  width:240px;
  height:130px;
  background:url("../images/logo.webp") center/contain no-repeat;
  margin:0 auto 20px;
}
.hero-center h1{
  margin:0 0 10px;
  font-size:clamp(30px, 4vw, 52px);
  line-height:1.08;
  font-weight:900;
}
.hero-center p{
  margin:0 auto;
  max-width:820px;
  font-size:clamp(15px, 1.7vw, 18px);
  line-height:1.8;
  opacity:.96;
}

/* =========================================================
   PAGE HERO (All inner pages)
   ========================================================= */
.page-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.page-hero .page-hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,106,68,.80), rgba(11,18,32,.75)),
    url("../images/hero.jpg");
  background-size:cover;
  background-position:center;
}
.page-hero .page-hero-inner{
  position:relative;
  padding:64px 0 40px;
}
.page-hero-card{
  max-width:860px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  padding:22px 22px 20px;
  box-shadow:0 14px 35px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.kicker{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(242,183,5,.22);
  border:1px solid rgba(242,183,5,.35);
  color:#fff;
  font-weight:900;
  letter-spacing:.3px;
  font-size:12px;
  text-transform:uppercase;
}
.page-hero-card h1{
  margin:12px 0 10px;
  font-size:clamp(26px, 3.5vw, 42px);
  line-height:1.12;
  color:#fff;
}
.page-hero-card p{
  margin:0;
  color:rgba(255,255,255,.92);
  font-size:16px;
  line-height:1.8;
}

/* =========================================================
   SECTIONS (Light like screenshots)
   ========================================================= */
.section{padding:54px 0}
.section.light{background:#fff; color:#111}
.section.light p{color:#333}
.title-center{text-align:center; margin-bottom:26px}
.title-center h2{
  margin:0;
  font-size:clamp(24px, 3vw, 36px);
  font-weight:900;
  color:#111;
}
.title-center h2 span{color:var(--green)}
.center-text{
  text-align:center;
  max-width:820px;
  margin:0 auto;
  line-height:1.95;
  font-size:16px;
  color:#333;
}

/* Grid */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
@media (max-width: 960px){ .grid{grid-template-columns:1fr} }

/* Cards (light) */
.card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
}
.card-pad{padding:18px}
.card h2, .card h3{margin:0 0 8px; color:#111}
.card p{margin:0 0 12px; color:#333}

.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.badge{
  font-size:12px;
  color:#222;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  background:#f7f7f7;
}
.icon{
  width:40px; height:40px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(242,183,5,.18);
  border:1px solid rgba(242,183,5,.30);
  margin-bottom:10px;
}

/* Media block */
.media{
  min-height:280px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background:
    linear-gradient(180deg, rgba(11,18,32,.20), rgba(11,18,32,.58)),
    url("../images/about.jpeg");
  background-size:contain;
  background-position:center;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
}

/* Quote band */
.quote-band{
  background:var(--green);
  color:#fff;
  padding:56px 0;
}
.quote-inner{text-align:center; max-width:900px; margin:0 auto}
.quote-inner .qmark{
  font-size:50px;
  opacity:.35;
  font-weight:900;
  display:block;
  margin-bottom:12px;
}
.quote-inner blockquote{
  margin:0;
  font-size:18px;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
}

/* History (images + director) */
.history-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
  margin-top:26px;
  align-items:stretch;
}

@media (max-width: 980px){
  .history-grid{ grid-template-columns:1fr; }
}

.history-card{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
  height:360px;                 /* uniform height */
  background:#000;              /* fallback only (won’t show normally) */
}

/* Image fills entire card */
/* For history images: keep full-width cover but keep heads visible */
.history-card .history-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center top; /* 🔑 keeps the head */
  display:block;
}
/* ===============================
   DIRECTOR LETTER BOX (FIXED)
   =============================== */

.history-info {
  background: linear-gradient(180deg, var(--green), #083e2a);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}

/* Inner spacing */
.history-info-inner {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Executive Director label */
.history-info .badge {
  align-self: flex-start;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .4px;
}

/* Name */
.history-info h3 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

/* Pills */
.history-info .pill {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-weight: 800;
}

/* === THE LETTER BOX === */
.history-info .letterbox {
  background: rgba(255,255,255,0.92);   /* strong contrast */
  color: #111;
  border-radius: 14px;
  padding: 16px 16px;
  line-height: 1.8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6),
              0 6px 18px rgba(0,0,0,.12);
}

/* Text inside letter box */
.history-info .letterbox p {
  margin: 0 0 10px;
  color: #222;
}

.history-info .letterbox p:last-child {
  margin-bottom: 0;
}
/* Make the history grid items stretch but allow content to grow */
.history-grid{
  align-items: stretch;
}

/* Director card should NOT have a fixed height */
.history-card.history-info{
  height: auto !important;
}

/* The inner should expand naturally */
.history-info-inner{
  height: auto !important;
}

/* Letterbox must NOT have fixed height or hidden overflow */
.history-info .letterbox{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Ensure text wraps nicely */
.history-info .letterbox p{
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.85;
}

.director-card{
  background:linear-gradient(180deg, var(--green), #083e2a);
  color:#fff;
  border-radius:16px;
  padding:22px 18px;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
}
.director-card .label{ font-weight:900; font-size:16px; margin-bottom:10px; }
.director-card .name{ font-size:18px; font-weight:900; margin-bottom:14px; }
.director-card .line{ opacity:.95; margin:6px 0; font-weight:800; }
.director-card .desc{ margin-top:12px; opacity:.92; line-height:1.7; font-size:14.5px; }
.director-card a{ color:#fff; text-decoration:underline; font-weight:900; }

/* Board cards */
.board-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:26px;
}
@media (max-width: 980px){ .board-grid{ grid-template-columns:1fr; } }
.board-card{
  border-radius:18px;
  overflow:hidden;
  border:6px solid var(--green);
  background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.board-photo{height:240px; background:#e9e9e9 center/cover no-repeat}
.board-info{
  background:var(--green);
  color:#fff;
  padding:16px 16px 18px;
}
.board-info .role{ font-weight:900; font-size:14px; opacity:.95; }
.board-info .name{ font-weight:900; font-size:18px; margin-top:8px; line-height:1.2; }
.safe-strip{
  background:var(--green);
  color:#fff;
  padding:24px 0;
  text-align:center;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  margin-top:34px;
}

/* Forms */
.form{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 820px){ .form{grid-template-columns:1fr} }
.form input, .form textarea, .form select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
  outline:none;
}
.form textarea{grid-column:1/-1; min-height:130px; resize:vertical}
.form .full{grid-column:1/-1}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(242,183,5,.45);
  background:rgba(242,183,5,.18);
  color:#111;
  font-weight:900;
  cursor:pointer;
}
.btn:hover{background:rgba(242,183,5,.24)}
.notice{color:#444; font-size:13px}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:#0b0b0b;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
  padding:26px 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:18px;
}
@media (max-width: 960px){ .footer-grid{grid-template-columns:1fr} }
.brand-title{font-weight:900}
.small{font-size:13px; color:rgba(255,255,255,.75)}
.footer a{color:#fff; text-decoration:underline}


/* =========================================================
   HOME-SPECIFIC SECTIONS
   ========================================================= */
.affg-panel-wrap{ margin-top:-90px; position:relative; z-index:5; }
.affg-panel{
  max-width:820px;
  margin:0 auto;
  background:linear-gradient(180deg, var(--green), #083e2a);
  color:#fff;
  text-align:center;
  padding:26px 18px;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.affg-panel h2{
  margin:0 0 10px;
  font-size:20px;
  font-weight:900;
  letter-spacing:.8px;
}
.affg-panel p{ margin:0; line-height:1.7; color:#fff; }

/* Values cards (two-column) */
.values-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
  margin-top:28px;
}
@media (max-width: 860px){ .values-grid{ grid-template-columns:1fr; } }

.value-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.10);
}
.value-topline{ height:6px; background:var(--gold); }
.value-body{
  padding:26px 22px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  color:#111;
}
.value-icon{
  width:44px; height:44px; border-radius:12px;
  background:#f6f6f6;
  display:grid; place-items:center;
  font-size:20px;
}
.value-body h3{ margin:0 0 8px; font-size:18px; }
.value-body ul{ margin:0; padding-left:18px; color:#333; line-height:1.9; }
.value-body p{ margin:0; color:#333; line-height:1.8; }

.gallery-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.gallery-item img{width:100%;border-radius:12px;object-fit:cover;}

.partners-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.partner img{max-height:60px;width:auto;filter:grayscale(.1);}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
  align-items: stretch;
}

/* generic card already in your design, but just in case: */
.card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.card-body h2 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  line-height: 1.3;
  color: #0b1220;
}

.card-body p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #333;
}

.card-media {
  width: 100%;
}

/* ==========================
   PLAY YOUR PART – DONATE CARD
   ========================== */

/* Right-hand card: softer background + subtle border */
.donate-card-side {
  background: radial-gradient(circle at top, rgba(242,183,5,.08), transparent 55%),
              #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 32px rgba(0,0,0,.06);
}

/* Tighten top spacing */
.donate-card-side h3:first-of-type {
  margin-top: 0;
}

/* List of suggested amounts */
.donate-amount-list p {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: .25rem 0;
  font-size: .95rem;
}

.donate-amount-list p strong {
  min-width: 4rem;
  font-weight: 800;
  color: #0b6a44;
}

/* Divider between suggested giving and PayPal area */
.donate-divider {
  margin: 1.1rem 0 1.2rem;
  border: 0;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Helper text + labels */
.donate-help-text {
  font-size: .9rem;
  color: #444;
  margin-bottom: .75rem;
}

.donate-label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .25rem;
}

/* Amount input styling to match your forms */
.donate-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  font-size: .95rem;
  outline: none;
}

.donate-input:focus {
  border-color: rgba(11,106,68,.6);
  box-shadow: 0 0 0 1px rgba(11,106,68,.15);
}

/* Space above PayPal button */
.donate-paypal {
  margin-top: .7rem;
}

/* Small notes */
.donate-note {
  margin-top: .9rem;
  font-size: .8rem;
  line-height: 1.6;
  color: #555;
}

.donate-alt {
  margin-top: .6rem;
  font-size: .85rem;
  color: #444;
}

.donate-alt a {
  color: var(--green);
  font-weight: 900;
  text-decoration: underline;
}
/* ==========================================
   PLAY YOUR PART – LEFT DONATION CARD
   ========================================== */

.donate-card-main {
  background: radial-gradient(circle at top left, rgba(242,183,5,.12), transparent 60%),
              #ffffff;
  border-left: 6px solid var(--green);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 24px 24px 28px;
}

/* Title bigger and more confident */
.donate-card-main h2 {
  margin-top: 0;
  font-size: 1.6rem;
  font-weight: 900;
  color: #0b1220;
}

/* Soft paragraph weight */
.donate-card-main p {
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
}

/* Make badges look cleaner */
.donate-card-main .badges {
  margin-top: 1rem;
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}

.donate-card-main .badge {
  background: rgba(11,106,68,.1);
  color: #0b6a44;
  border-color: rgba(11,106,68,.18);
  font-weight: 700;
  font-size: .78rem;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Optional hover sparkle */
.donate-card-main .badge:hover {
  background: rgba(11,106,68,.18);
  cursor: pointer;
}

/* 16:9 videos */
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* Make the cards light on the Activities page only */
.section.light .card {
  background: #ffffff;
  color: #0b1220; /* dark text */
  border-color: rgba(0,0,0,.08);
}

/* Card body text color fix */
.section.light .card-body,
.section.light .card-body p {
  color: #333;
}

/* Make headings stand out */
.section.light .card-body h2 {
  color: #0b1220;
}

.partners-strip {
  padding: 3rem 0 3.5rem;
  margin-top: 2.5rem;          /* pulls it away from the section above */
  margin-bottom: 2.5rem;       /* pulls it away from the footer */
  background: #050b16;
}

.partners-strip-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  background: radial-gradient(circle at top,
              rgba(242,183,5,.12), transparent 55%)
              ,rgba(0,0,0,.55);
  border-radius: 20px;
  padding: 1.75rem 2rem 2rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
}

.partners-strip-title {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffffff;
}

.partners-strip-link {
  margin: 0;
}

.partners-strip-link a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(242,183,5,.6);
}

.partners-strip-link a:hover {
  color: #ffd95c;
  border-bottom-color: #ffd95c;
}


.partners-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.75rem;
  align-items: center;
  margin: 0 0 1.25rem;

}

.partners-row img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
  filter: grayscale(35%);
  opacity: 0.85;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.partners-row img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-3px);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.75rem;
}

.partner-logo-wrap {
  padding: 1.5rem 1.5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.partner-logo-wrap img {
  max-height: 70px;
  width: auto;
  object-fit: contain;
  filter: grayscale(10%);
}

/* Partners hero styling */
.partners-hero {
  background: linear-gradient(180deg, #f7fbf8 0%, #ffffff 65%);
  border-bottom: 1px solid rgba(0,0,0,.04);
  padding-top: 4rem;
  padding-bottom: 3rem;
}

.partners-hero-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2rem;
}

/* Small pill above the eyebrow */
.pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(11,106,68,0.08);
  color: #0b6a44;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Logo strip under intro text */
.partners-hero-logos {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.partners-hero-logos img {
  max-height: 52px;
  width: auto;
  object-fit: contain;
  filter: grayscale(40%);
  opacity: 0.7;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.partners-hero-logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-2px);
}