/* ================================
   DARK ROYAL SHINING GREEN THEME
   Updated : featured cards side-by-side, centered
================================ */

:root{
  --green-royal-1: #002f1d;
  --green-royal-2: #005e3a;
  --green-glow: #00ffae;
  --white-95: rgba(255,255,255,0.95);
  --white-muted: rgba(255,255,255,0.75);
  --glass-border: rgba(255,255,255,0.08);
}

/* HERO SECTION */
.hero-section {
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    color: var(--white-95);
    background:
       radial-gradient(circle at 15% 20%, rgba(0, 255, 170, 0.12), transparent 40%),
       radial-gradient(circle at 85% 65%, rgba(0, 255, 150, 0.08), transparent 50%),
       linear-gradient(160deg, var(--green-royal-1) 0%, #004d5e 100%);
}
.hero-bg-gradient { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; z-index: 0;
    background:
      radial-gradient(800px 300px at 20% 30%, rgba(0,255,170,0.10), transparent 60%),
      radial-gradient(700px 250px at 90% 80%, rgba(0,255,200,0.06), transparent 60%);
}
.hero-section .container { position: relative; z-index: 2; }

/* ---- left text area ---- */
.hero-slide-wrap { position: relative; min-height: 320px; display: block; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; will-change: opacity, transform; pointer-events: none; padding-right: 1rem; }
.hero-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hero-title { font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 900; color: #ffffff; margin: 0 0 .8rem 0; line-height: 1.02; text-shadow: 0 6px 20px rgba(0,0,0,0.45); }
.hero-subtitle { font-size: clamp(1rem,1.35vw,1.2rem); color: var(--white-muted); max-width: 60ch; margin: 0 0 1.25rem 0; line-height: 1.7; }

/* CTA buttons */
.btn-hero-primary { background: linear-gradient(180deg,#00d084 0%,#009f63 100%); color: #fff; font-weight: 700; padding: .7rem 1.2rem; border-radius: .6rem; border: none; box-shadow: 0 8px 18px rgba(0,0,0,0.35); text-decoration: none; display: inline-block; }
.btn-hero-outline { background: transparent; border: 2px solid rgba(255,255,255,0.16); color: #ffffff; padding: .65rem 1.15rem; border-radius: .6rem; text-decoration: none; display: inline-block; backdrop-filter: blur(2px); }

/* hero dots */
.hero-dots-wrapper { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hero-dot { width: 12px; height: 12px; border-radius: 50%; border: none; background: rgba(255,255,255,0.16); transition: .25s transform, .25s box-shadow, .25s background; cursor: pointer; }
.hero-dot.active { background: var(--green-glow); transform: scale(1.25); box-shadow: 0 0 18px 3px rgba(0,255,170,0.12); }

/* right image card for desktop */
.hero-image-card { width: 100%; max-width: 680px; padding: 28px; border-radius: 18px; margin: 0 auto; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border: 1px solid var(--glass-border); box-shadow: 0 30px 60px rgba(0,0,0,0.45); backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: center; }
.hero-image-card img { width: 100%; max-width: 520px; height: auto; display: block; border-radius: 12px; object-fit: cover; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }

/* Mobile adjustments */
@media (max-width: 991.98px) {
    .hero-section { padding: 2.2rem 0 3.2rem; }
    .hero-slide { position: static; display: none; opacity: 1; transform: none; transition: none; pointer-events: auto; padding-right: 0; }
    .hero-slide.active { display: block; }
    .hero-slide-image-wrap { width: 100%; display: block; }
    .hero-slide-image { width: 100%; display: block; max-width: 100%; height: auto; border-radius: 12px; object-fit: cover; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
    .hero-image-card { display: none !important; }
    .hero-dots-wrapper { justify-content: center; margin-top: 18px; }
    .hero-title { font-size: clamp(1.6rem, 7vw, 2.4rem); margin-top: .4rem; }
    .hero-subtitle { max-width: 100%; font-size: 1rem; line-height: 1.6; }
}

/* accessibility focus */
.hero-dot:focus, .btn-hero-primary:focus, .btn-hero-outline:focus { outline: 3px solid rgba(0,255,170,0.12); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0,255,170,0.06); }

/* utilities */
.mt-4 { margin-top: 1rem !important; }
.me-2 { margin-right: 0.5rem !important; }

/* -----------------------
   Features + news styles
   ----------------------- */

#features-news { background: #fff; color: #333; }
#features-news .section-heading { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; text-align: center; margin: 0 auto 1.5rem; color: #1f2b2a; }
.feature { padding: 18px 12px; min-height: 150px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.feature-icon { width:68px; height:68px; color: var(--green-royal-2); margin-bottom: 16px; }
.feature-text { font-size: .95rem; color:#666; line-height:1.6; max-width: 26rem; margin: 0 auto; }

/* Promo card */
.promo-card { position: relative; overflow: hidden; border-radius: 6px; min-height: 460px; display:flex; align-items:stretch; box-shadow: 0 18px 40px rgba(20,20,20,0.06); }
.promo-card .promo-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(.85) contrast(.95); transform: scale(1.03); }
.promo-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(3,83,42,0.85) 5%, rgba(3,83,42,0.92) 95%); mix-blend-mode: normal; }
.promo-content { position: relative; z-index: 2; padding: 48px 36px; color: #fff; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.promo-content .eyebrow { font-size: .9rem; letter-spacing: .12em; color: rgba(255,255,255,0.9); opacity:.95; border-left:4px solid rgba(255,255,255,0.12); padding-left:12px; width: fit-content; }
.promo-title { font-size: clamp(2rem, 3.5vw, 3rem); font-weight:900; margin:0; line-height:1.02; text-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.promo-desc { color: rgba(255,255,255,0.92); max-width: 36ch; line-height:1.6; }
.btn-promo { display:inline-block; margin-top: 6px; background: #f6a61a; color:#fff; font-weight:700; padding:.6rem .9rem; border-radius:4px; text-decoration:none; }

/* News cards */
.news-card { background: #fff; padding: 28px; border-radius:6px; box-shadow: 0 18px 40px rgba(20,20,20,0.06); min-height: 180px; display:flex; flex-direction:column; justify-content:space-between; }
.news-card .card-meta { color:#9aa0a0; letter-spacing:.18em; font-size:.78rem; margin-bottom:10px; }
.news-card .card-title { margin:0 0 10px; font-size:1.3rem; color:#222; font-weight:800; }
.news-card .card-desc { color:#666; line-height:1.6; margin-bottom:14px; }
.btn-card { display:inline-block; text-decoration:none; background:#222; color:#fff; padding:.5rem .9rem; border-radius:3px; font-weight:700; }
.btn-card--accent { background:#f2a623; color:#fff; }
.btn-card--green { background: var(--green-royal-2); color:#fff; }

@media (max-width: 991.98px) {
  .promo-card { min-height: 360px; margin-bottom: 8px; }
  .promo-content { padding: 30px 20px; }
  .promo-title { font-size: 2rem; }
}

/* -----------------------
   Plans / Donation packages
   ----------------------- */

#plans { background: #fff; color: #20302d; padding-top: 4.5rem; padding-bottom: 4.5rem; }
#plans .small-eyebrow { color: #2f6b3f; font-size: .95rem; letter-spacing: .12em; margin-bottom: .6rem; padding-left: 6px; border-left: 4px solid #2f6b3f; display:inline-block; }
.plan-heading { font-size: clamp(2.2rem, 4.2vw, 3rem); font-weight: 900; margin-bottom: 1rem; color: #162b28; }
.plan-lead { color: #6b7874; line-height: 1.7; max-width: 44ch; }
.btn-details {    margin-bottom: 20px; background: #f2a623; color: #fff; padding: .6rem 1rem; border-radius: 6px; font-weight:700; display:inline-block; text-decoration:none; box-shadow: 0 8px 18px rgba(0,0,0,0.06); }

/* Plans wrapper */
.plans-wrap { display: flex; align-items: center; justify-content: flex-end; min-height: 0; padding-right: 0; }

/* Base plan card */
.plan-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(20,20,20,0.06);
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease;
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* header area */
.plan-header { height: 160px; color: #fff; text-align: center; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; }
.plan-header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,18,8,0.18), rgba(6,18,8,0.06)); pointer-events: none; }
.plan-header--grad { background-image: linear-gradient(180deg,#5fb21b,#3c9d12); }

/* body */
.plan-body { padding: 10px; background: #fff; display:flex; flex-direction:column; gap:1px; }
.plan-type { font-size: 1.2rem; color: #1b3d33; font-weight: 700; }
.plan-price { font-size: 2rem; font-weight: 900; line-height: 1; color: #14302b; }
.plan-sub {visibility: hidden; font-size: .85rem; letter-spacing: .18em; color: #6b7773; }
.plan-desc { color: #4f5b57; line-height: 1.6; margin: 0; font-size: .95rem; }

/* NEW: description container & "Read more" */
.plan-desc-wrap {
  display: block;
  min-height: 86px;
  max-height: 240px;
  overflow: hidden;
}
.plan-more {
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  color: #1b3d33;
  font-weight: 700;
  background: transparent;
}

/* buttons */
.plan-btn { display:inline-block; padding: .6rem 1rem; border-radius: 6px; text-decoration: none; font-weight:800; margin-top: 6px; text-align: center; }
.plan-btn--green { background: #47a51d; color: #fff; box-shadow: 0 8px 18px rgba(71,165,29,0.12); }
.plan-btn--outline { background: transparent; border: 1px solid #dfeee0; color: #1b3d33; }

/* hover lift */
.plan-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(20,20,20,0.12); }

/* ---------- Side-by-side featured cards (no overlap), centered vertically ---------- */

.plans-stack {
  display: flex;
  flex-direction: row;
  gap: 28px;
  align-items: center;          /* vertical center within the col */
  justify-content: flex-end;    /* right align inside the right column */
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Featured card sizing — both equal height so they align */
.plans-stack .plan-card {
  width: 330px;
  max-width: 330px;
  height: 420px;                /* fixed height to keep both cards same vertical size */
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* make header proportionate inside fixed height */
.plans-stack .plan-header { height: 190px; }

/* ensure no transforms from previous rules */
.plans-stack .plan-card--behind,
.plans-stack .plan-card--front,
.plans-stack .plan-card { transform: none !important; }

/* Grid cards (remaining) */
.plans-grid .plan-card.grid-card { width: 100%; max-width: none; height: auto; border-radius: 8px; box-shadow: 0 18px 45px rgba(20,20,20,0.06); }
.plans-grid .plan-header { height: 140px; }
.plans-grid .plan-body { padding: 18px; margin-top: 14px; }

/* small spacing tweak */
.plans-grid { margin-top: 18px; }

/* Responsive: stack featured cards vertically on narrow screens */
@media (max-width: 991.98px) {
  .plans-wrap { justify-content: center; }
  .plans-stack { flex-direction: column; gap: 16px; align-items: stretch; }
  .plans-stack .plan-card { width: 100%; max-width: none; height: auto; }
  .plans-stack .plan-header { height: 140px; }
}

/* mobile */
@media (max-width: 575.98px) {
    mar
  .plans-stack .plan-header {margin-top: 10px; height: 120px; }
  .plan-price { font-size: 1.4rem; }
}

/* === Mobile responsiveness fix for hero/slider ===
   Forces slide layout into flow on small screens,
   hides desktop-only image card, prevents overflow.
================================================== */

@media (max-width: 991.98px) {

  /* make sure hero section uses box-sizing so padding doesn't create overflow */
  .hero-section, .hero-section * { box-sizing: border-box; }

  /* Hide the desktop-only fixed image card reliably */
  .hero-image-card,
  .hero-image-card * {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
  }

  /* Convert absolutely positioned slides into normal stacked blocks */
  .hero-slide {
    position: static !important;    /* remove absolute positioning */
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    display: none !important;      /* hide all by default; show only active */
    pointer-events: auto !important;
    padding-right: 0 !important;
    margin-bottom: 14px;
  }
  .hero-slide.active {
    display: block !important;
  }

  /* Make slide images responsive and full width */
  .hero-slide-image-wrap { display: block !important; width: 100% !important; }
  .hero-slide-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 12px;
    object-fit: cover;
  }

  /* Reduce hero paddings on small screens to avoid big gaps */
  .hero-section { padding: 1.8rem 0 2.6rem !important; }

  /* Scale down title & subtitle for mobile */
  .hero-title { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; line-height: 1.08 !important; margin-bottom: .6rem !important; }
  .hero-subtitle { font-size: 0.96rem !important; max-width: 100% !important; margin-bottom: .9rem !important; }

  /* Make CTA buttons wrap and fit */
  .hero-ctas .btn-hero-primary,
  .hero-ctas .btn-hero-outline {
    display: inline-block !important;
    width: auto !important;
    margin-right: .5rem !important;
    margin-bottom: .5rem !important;
    padding-left: .8rem !important;
    padding-right: .8rem !important;
  }

  /* Make sure dots center below slides */
  .hero-dots-wrapper { justify-content: center !important; margin-top: 10px !important; }

  /* Prevent horizontal scroll from any inner element */
  .hero-section, .container, .row { overflow-x: hidden !important; -webkit-overflow-scrolling: touch; }

  /* If your header/navbar is fixed, add top padding to hero so content doesn't hide under it */
  header.fixed-top + .hero-section { padding-top: calc(1.8rem + 60px) !important; } /* adjust 60px to header height */
}

/* Small extra: prevent large hero images from overflowing at any width */
.hero-image-card img, .hero-slide-image {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ===========================================
   FULL SCREEN STATIC BANNER (ABOVE PLANS)
=========================================== */

.full-banner-section {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Full screen */
    background: url('banner.png') center/cover no-repeat;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0;
    overflow: hidden;
}

.full-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 47, 29, 0.70) 0%,
        rgba(0, 47, 29, 0.55) 40%,
        rgba(0, 47, 29, 0.75) 100%
    );
    z-index: 1;
}

.full-banner-section .container {
    position: relative;
    z-index: 2;
}

.full-banner-title {
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    font-weight: 900;
    max-width: 14ch;
    line-height: 1.1;
    text-shadow: 0 4px 22px rgba(0,0,0,0.35);
}

.full-banner-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    max-width: 50ch;
    margin: 1rem 0 2rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
}

.full-banner-btn {
    background: #00b76a;
    color: #fff;
    padding: .8rem 1.4rem;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.28);
    transition: .25s ease;
}

.full-banner-btn:hover {
    background: #009d5a;
    transform: translateY(-3px);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .full-banner-section {
        min-height: 80vh;
        padding: 2.5rem 0;
    }
    .full-banner-title { font-size: 2rem; }
    .full-banner-subtitle { font-size: 1rem; }
}
/* ----------------------
   TEAM: responsive grid + modal
   ---------------------- */
/* ------------------------------
   TEAM: modal (kept) + seamless slider
   Replace your old team-related CSS with this single block
   ------------------------------ */

/* ---------------- Modal (team modal used for expanded view) ---------------- */
.team-empty { padding: 1.25rem; text-align: center; color: rgba(0,0,0,0.6); }

.team-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1200;
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s ease, visibility .18s;
}
.team-modal[aria-hidden="false"] { visibility: visible; opacity: 1; }

.team-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.team-modal-panel {
  position: relative;
  max-width: 920px;
  width: calc(100% - 32px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(8,15,12,0.35);
  z-index: 2;
  overflow: hidden;
  padding: 1rem;
}

.team-modal-close {
  position: absolute;
  right: 10px;
  top: 6px;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: rgba(0,0,0,0.6);
}

.team-modal-body {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.team-modal-body img {
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  background: #f8f8f8;
}
.team-modal-meta { padding: 0.25rem 0.5rem; }
.team-modal-meta h4 { margin: 0 0 .35rem 0; font-size: 1.15rem; }
.team-modal-meta div { color: rgba(0,0,0,0.65); }

.team-modal-open { overflow: hidden; height: 100%; }

/* ---------- Seamless single-item slider (final cleaned version) ---------- */

.team-slider-wrap {
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content: center;
  margin: 0 auto;
  max-width: 1100px;
  padding: 0 8px;
}

.team-viewport {
  overflow: hidden;
  width: 100%;
}

.team-track {
  display: flex;
  transition: transform 420ms cubic-bezier(.22,.9,.36,1);
  will-change: transform;
}

.team-slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  display: flex;
  justify-content: center;
}

.team-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(8,15,12,0.06);
  border: 1px solid rgba(12,20,10,0.04);
  max-width: 460px;
  width: 100%;
  display: flex;
  flex-direction: column;
  transform: translateZ(0); /* improve GPU compositing */
}

.team-thumb-wrap { width: 100%; background: #f6f6f6; }
.team-thumb { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 4 / 3; }

/* card info */
.team-info { padding: 1.1rem; }
.team-name { margin: 0; font-size: 1.06rem; font-weight: 700; color: #0b2b1a; letter-spacing: .01em; }
.team-designation { margin-top: .35rem; color: rgba(0,0,0,0.6); font-size: .92rem; }

/* nav buttons */
.team-nav {
  background: #fff;
  border: 1px solid rgba(12,20,10,0.06);
  width: 46px;
  height: 46px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(8,15,12,0.06);
  font-size: 18px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.team-nav:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(8,15,12,0.09); }
.team-prev { margin-right: 10px; }
.team-next { margin-left: 10px; }
.team-nav[disabled] { opacity: .45; cursor: default; pointer-events: none; }

/* responsiveness */
@media (max-width: 1100px) { .team-card { max-width: 420px; } }
@media (max-width: 900px)  { .team-card { max-width: 360px; } }
@media (max-width: 540px)  {
  .team-card { max-width: 320px; border-radius:12px; }
  .team-nav  { width:40px; height:40px; font-size:16px; }
}

/* small helpers (if any leftover selectors referenced elsewhere) */
.team-empty, .team-thumb, .team-info, .team-name, .team-designation { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }