@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Montserrat:wght@400;600;700;800;900&family=Open+Sans:wght@400;600&display=swap');

:root {
    --orange: #FF6A00;
      --blue: #0065F2;
      --green: #00B312;
      --dark-green: #002601;
      --white: #ffffff;
      --light-gray: #EFF4FF;
      --text-dark: #1a1a1a;
      --text-mid: #444;
  --nav-gray: #BABABA;
  --nav-active: #FFFBFB;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* ==========================================
   SMOOTH SCROLL ANIMATIONS
   ========================================== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-delay-100 { transition-delay: 100ms; }
.animate-delay-200 { transition-delay: 200ms; }
.animate-delay-300 { transition-delay: 300ms; }
.animate-delay-400 { transition-delay: 400ms; }

body {
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
}

/* ── NAV ── */
nav {

   position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 30px;
 /*  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 60px !important;
  max-width: 100% !important;
  margin: 0 !important; */
}

/* .nav-left {
  flex: 1;
  display: flex;
  justify-content: flex-start;
} */

.nav-center {
  flex:5;
  display: flex;
  justify-content: center;
}

.nav-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.nav-logo {

   display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    text-decoration: none;


  /* display: flex;
  align-items: center; */
}

.nav-logo img {
  width: 146px;
  height: 146px;
  filter: brightness(0) invert(1); /* Saturated to white */
  object-fit: contain;
}

.nav-links {
 display: flex;
      align-items: center;
     width: 80%;
      list-style: none;
      justify-content: space-between;
      gap:100px;
       margin: 0;                    
      padding: 0;  

  
 /*  display: flex;
  align-items: center;
  list-style: none;
  gap: 60px;
  margin: 0;
  padding: 0; */
}

.nav-links a {

font-family: 'Montserrat', sans-serif;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 2px;
      color: var(--nav-gray);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 20%;


  /* font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--nav-gray);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s ease; */
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--nav-active);
}

.btn-donate-nav {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--white  ) !important;
  background: transparent;
  border: 2px solid var(--orange);
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
  letter-spacing: 20%;
}

.btn-donate-nav:hover {
  background: var(--orange);
  color: var(--white) !important;
}


.nav-burger {
  display: none; 
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 22px;
  padding: 0;
  z-index: 1000; /* Ensure it stays on top of everything */
}




/* ── NAV SOLID (For Blog/Pages without overlap) ── */
.nav-solid {
  position: relative !important;
  background: var(--white);
}

.nav-solid .nav-logo img {
  filter: none;
}

.nav-solid .nav-links a {
  color: var(--text-dark);
}

.nav-solid .nav-links a:hover,
.nav-solid .nav-links a.active {
  color: #B5A6A6; /* Matches the tan/grey active state in screenshot */
}

.nav-solid .btn-donate-nav {
  background: transparent;
  color: var(--green) !important;
  border: 2px solid var(--green);
}

.nav-solid .btn-donate-nav:hover {
  background: var(--green);
  color: var(--white) !important;
}

/* ── HERO ── */
.hero {
  position: relative;
  height: 800px; /* As per documentation.txt */
  width: 100%;
  display: flex;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url(assets/annie-spratt-cVEOh_JJmEE-unsplash.jpg) center/cover no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(89.84deg, rgba(0, 0, 0, 0.82) 27%, rgba(1, 43, 1, 0.82) 40.91%, rgba(7, 103, 7, 0.3116) 62.96%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 60px !important;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.hero-text-wrapper {
  max-width: 537px; /* As per documentation.txt */
  margin-left: 20px;
}

.hero-title {
  font-family: 'Poppins', sans-serif;
  font-size: 46px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: 5%; /* -5% as per documentation.txt */
  color:var(--white);
}

.hero-title .hope { color: var(--orange); }
.hero-title .opportunity { color: var(--blue); }
.hero-title .transformation { color: var(--green); }

.hero-subtitle {
  font-size: 25px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.6;
  margin-bottom: 40px;
}

h1, h2, h3, h4, h5, h6, p, a, span, div {
  /* Prevent long unbroken strings from destroying layouts */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

p {
  line-height: 1.6;
  margin-bottom: 15px;
}

.btn-volunteer {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--white);
  padding-bottom: 6px;
  transition: opacity 0.3s;
}

.btn-volunteer:hover {
  opacity: 0.8;
}

.btn-volunteer svg {
  width: 24px;
  height: 24px;
  color: var(--orange);
}

.hero-socials {
  position: absolute;
  right: 60px;
  bottom: 90px;
  display: flex;
  gap: 20px;
}

.hero-socials a {
  color: var(--white);
  transition: color 0.3s;
}

.hero-socials a:hover {
  color: var(--orange);
}

/* ── SERVICES ── */
.services {
  max-width: 100% !important;
  margin: -50px 0 40px 0 !important;
  position: relative;
  z-index: 10;
  padding: 0 60px !important;
  height: 640px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 60px;
  background: var(--white);
  border-radius: 0 !important;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25) !important;
  padding: 50px 60px !important;
}

.service-card {
  text-align: center;
  transition: transform 0.3s;
}

/* .service-card:hover {
  transform: translateY(-5px);
} */

.service-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
}

.service-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 12px;
  color: var(--text-dark);
}

.service-desc {
  font-size: 15px !important;
  color: var(--text-mid);
  margin-bottom: 24px !important;
}

.read-more {
  position: relative;
  display: inline-block;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--text-dark) !important;
  text-decoration: none;
  /* border-bottom: 2px solid var(--orange) !important; */
  padding-bottom: 4px !important;
}


.read-more::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0; /* Starts at 0 width (hidden) */
  height: 1px; /* Thickness of your line */
  background-color: var(--orange) !important;
  transition: width 0.5s ease; /* This handles the smooth transition */
}

/* 2. Expand the line to 100% when the link is hovered */
.read-more:hover::after {
  width: 100%; /* Spans across the full width of the text on hover */
}


/* ── EMPOWER ── */
.empower {
  background: #F4F7FB;
 min-height: auto;
  padding: 60px 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 30px;
}

.empower-left {
  flex: 1.5;
  max-width: none;
}

.empower-left h2 {
font-size: 36px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 20px;
  color: var(--text-dark);
}

.empower-tagline {
  font-size: 18px;
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 10px;
}

.empower-body {
  font-size: 20px;
  color: var(--text-mid);
  margin-bottom: 40px;
  line-height: 1.7;
}

.btn-donate-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--orange);
  background: transparent;
  border: 1px solid var(--text-dark);
  padding: 16px 50px;
  letter-spacing: 2px;
  text-decoration: none;
  transition: all 0.3s;
}

.btn-donate-outline:hover {
  background: var(--text-dark);
  color: var(--orange);
}

.empower-images {
  flex: 1;
  position: relative;
  height: 380px; /* Increased height to allow nice overlap */
  max-width: 550px;
  margin: 0 auto;
}

.empower-images img {
  position: absolute;
  border-radius: 8px; /* Smooth corners */
  object-fit: cover;
  object-position: center;
  border: 8px solid var(--white); /* Solid white border like image 2 */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* Deep shadow */
  outline: none; /* Remove old stroke */
}

.img-top {
  top: 0;
  left: 0;
  width: 420px;
  height: 280px;
  z-index: 1;
}

.img-bottom {
  bottom: 0;
  right: auto;
  left: 180px; /* Creates the overlap */
  width: 340px;
  height: 240px;
  z-index: 2;
}

/* ── EVENTS ── */
.events {
  padding: 100px 60px;
  background: var(--white);
}

.events h2 {
  font-size: 32px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 60px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #000;
}

.events-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.event-card {
  border: 2px solid #E5E5E5;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  flex: 1 1 calc(33.333% - 40px); 
  max-width: 400px;
}
/* Selects any event card starting from the 4th one all the way to 50, and vanishes them */
.event-card:nth-child(n+4) {
  display: none !important;
}

.event-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: top;
}

.event-card-body {
  padding: 30px 20px;
  background: var(--white);
}

.event-card-title {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 15px;
  color: #000;
}

.event-card-desc {
  font-size: 18px;
  color: var(--text-mid);
  margin-bottom: 24px;
  line-height: 1.6;
  text-align: left;
}

.event-read-more {
  display: inline-block;
  font-size: 13px;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
  font-weight: 600;
}

/* ── FOOTER ── */
footer {
  background: var(--dark-green);
  color: var(--white);
  padding: 40px 20px 0;
  position: relative;
  overflow: hidden;
  height: fit-content;
}

.footer-brand .nav-logo {
  display: block;
  width: fit-content;
  margin-bottom: 12px; /* Controlled vertical spacing above the text */
  
  /* Pushes the entire visual bounding box to the left. 
     Adjust this number if you need it to pull left even further! */
  transform: translateX(-18px); 
}

.footer-brand .nav-logo img {
  display: block;
  width: 150px;       
  height: 150px;      
  object-fit: contain; 
  filter: brightness(0) invert(1);
}



footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  transform: translateX(-90%);
  width: 100px;
  height: 100px;
  background-color: var(--orange);
  border-radius: 50%;
  z-index: 1;
}

footer::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 20%;
  transform: translateX(80%);
  width: 100px;
  height: 100px;
  background-color: var(--orange);
  border-radius: 50%;
  z-index: 1;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 80px;
  padding-bottom: 30px;
  position: relative;
  z-index: 2;
}

.footer-brand p {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  margin: -10px 0 30px 0;
  max-width: 500px;
  text-align: left;
}

.footer-socials {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background 0.3s;
}

.footer-socials a:hover {
  background: var(--orange);
}

.footer-col h4 {
  font-size: 20px;
  margin-bottom: 25px;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 8px;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 15px;
}

.footer-col a:hover {
  color: var(--white);
}

.footer-bottom {
  background: var(--orange);
  margin: 0 -60px;
  padding: 10px 10px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}
.footer-top > div:not(.footer-brand) {
  padding-top: 100px; /* Adjust this number to push them down more or less */
}

/* ── SUB-PAGE HERO ── */
.about-hero {
  /* 1. Set your base solid background color */
  background-color: #013917 !important;

  /* 2. Load your exported Figma noise file here */
  background-image: url('assets/Rectangle\ 8.png') !important; /* <-- Change this to your exact filename */
  
  /* 3. This repeats the noise texture seamlessly across the entire hero width/height */
  background-repeat: repeat;
  
  /* 4. Controls how the noise blends with your background color */
  background-blend-mode: normal; 
  
  /* Layout setup */
  padding: 100px 60px;
  position: relative;
  overflow: hidden;
}

/* This subtle safety layer ensures the hard contrast doesn't wash out your green */
/* .about-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(1, 57, 23, 0.15); 
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
} */


.hero-small {
  height: 400px;
}

.hero-small .hero-title {
  font-size: 48px;
}

/* ==========================================================================
   ── CORRECTED ABOUT PAGE STYLES ──
   ========================================================================== */

/* 1. HERO BACKGROUND WITH FIGMA RECTANGLE NOISE OVERLAY */
.about-hero {
  background-image: url('assets/Rectangle\ 8.png') !important;
  background-size: cover; /* Ensures your Figma background element spans nicely */
  background-position: center;
  padding: 100px 60px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
 
  min-height: 800px;
}

/* ── NEW: Splits the text and the image block side-by-side ── */
.about-hero-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* Text gets slightly more room, images get the right */
  gap: 90px;
  align-items: center; /* Vertically centers text and image stack */
  max-width: 1200px;
  margin: 5px auto;
  
 
    padding: 0 10px;
    width: 100%;
}

/* Modifying Hero Font Sizes and Weights */
.about-hero .hero-title {
  font-size: 35px; 
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 24px;
}

.about-hero .hero-description {
  color: var(--white);
  font-size: 18px; 
  line-height: 1.7;
  font-weight: 500;
  margin-bottom: 40px;
  text-align: justify;
}

/* The Anchored Box Frame */
.about-hero .about-hero-right {
  position: relative;
  height: 400px; /* Snug box height to hold your 280px and 240px image stack */
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
}

/* Shared image parameters */
.about-hero-right img {
  position: absolute;
  object-fit: cover;   
  border-radius: 8px;
  border: 8px solid var(--white);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); 
}

/* FIXED SELECTOR: Top Image Placement */
.about-hero-right .about-img-top {
  width: 420px;
  height: 280px;
  top: 0;
  left: 0;
  z-index: 1;          /* Sits cleanly on top */
}

/* FIXED SELECTOR: Bottom Image Placement */
.about-hero-right .about-img-bottom {
  width: 340px;
  height: 240px;
  bottom: 0;
  right: auto;
  left: 180px;         /* Overlaps perfectly */
  z-index: 2;          /* Tucks neatly behind the top image */
}

/* Quick hover interaction */

/* 2. FOCUS AREAS CONTAINER Layout Setup */
.focus-areas-container {
  background: var(--white);
  padding: 100px 60px !important; /* Overriding your inline 50px spacing */
}

/* Base side-by-side grid container layout rule for focus blocks */
.focus-row {
  grid-template-columns: 1.2fr 1fr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 90px;
  padding: 100px 60px;
  margin: 0 auto;
  border-bottom: 1px solid #E5E5E5;
}
.focus-row .focus-img {
  position: relative;
  display: block;
  max-width: 390px;
  max-height: 280px;
  border-radius: 20px;
  /* Traps the inside border corners cleanly within the image radius */
  overflow: hidden; 
/*   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);  */
}

/* Flips alternating rows automatically (Rows 2, 4, 6) */
.focus-row.reverse {
  grid-template-columns: 1fr 1.2fr; /* Flips track widths: Image left, Text right */
  flex-direction: row-reverse;
}


.focus-text {
  flex: 1;
}

.focus-row.reverse .focus-img {
  direction: ltr; 
  width: 100%;
  height: 450px;
}

/* Custom styling for your target images */
.focus-areas-container .focus-img img {
  max-width: 390px;
  max-height: 280px;
  border-radius: 20px;
  object-fit: cover;
  display: block;

}
.focus-row .focus-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* Keeps the image clickable/interactive underneath */
  
  /* MATCHED FIGMA SPECS: */
  /* - inset: forces the stroke inside */
  /* - 10px: sets the stroke weight */
  /* - rgba(255, 255, 255, 0.5): sets white color at 50% opacity */
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.5);
  
  border-radius: 20px; /* Matches the container curve radius */
}

/* Focus headings and tags typography configurations */
.focus-text .focus-tagline {
  font-size: 14px;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.program__divider {
  width: 438px;
  height: 1px;
  background: var(--orange);
  border-radius: 2px;
  margin-top: 24px;
}

.focus-text .focus-title {
  font-size: 36px;
  margin-bottom: 24px;
  color: var(--text-dark, #1a1a1a);
  font-weight: 800;
  line-height: 1.2;
}

.focus-text .focus-body {
  font-size: 17px;
  color: var(--text-mid, #666666);
  line-height: 1.7;
}


/* ── BLOG PAGE ── */
.blog-hero-container {
  width: 100%;
  padding: 40px 60px;
  display: flex;
  justify-self: center;
}

/* CHANGED: Matches <div class="blog-hero-featured"> */
.blog-hero-container .blog-hero-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  background: var(--light-gray);
  border-radius: 24px;
  overflow: hidden;
  align-items: center;
  position: relative; 
  width: 100%;
  height: 550px;
 
}

/* CHANGED: Targets the image inside your featured container */
.blog-hero-container .blog-hero-featured > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  position: absolute;
}


.blog-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 100%);
  z-index: 2;
}

/* CHANGED: Matches <div class="blog-hero-content"> */
.blog-hero-container .blog-hero-content {
  padding: 60px;
  top: 190px;
  width: 900px;
  position: relative;
  z-index: 3;
  color: var(--white);
  max-width: 800px;
}

.blog-hero-container .blog-hero-content h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

/* Styles for your overlay, arrow, and socials within the HTML */
.blog-hero-container .blog-hero-read-more {
  display: inline-block;
  margin-top: 15px;
  color: var(--orange);
  font-weight: 600;
  text-decoration: none;
}

.blog-hero-container .blog-hero-arrow {
  position: absolute;
  bottom: 120px;
  right: 90px;
  color: var(--white);
  z-index: 3;
}

.blog-hero-socials {
  position: absolute;
  display: flex;
  gap: 20px;
  right: 80px;
  bottom: 60px;
  z-index: 3;
}

.blog-hero-socials a {
  color: var(--white);
  text-decoration: none;
}


/* ── RECENT BLOG CARDS LAYOUT SECTION ── */

/* CHANGED: Matches <section class="recent-blog-section"> */
.recent-blog-section {
  padding: 80px 60px 100px;
}
.recent-blog-section .recent-blog-grid .recent-blog-card:nth-child(n+7) {
  display: none !important;
}

.recent-blog-section h2 {
  font-size: 28px;
  margin-bottom: 40px;
}

/* CHANGED: Matches <div class="recent-blog-grid"> */
.recent-blog-section .recent-blog-grid {
  display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  justify-content: center; 
  
  width: 100%;
}

/* CHANGED: Matches <div class="recent-blog-card"> */
.recent-blog-section .recent-blog-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
 /*  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: transform 0.3s; */
  display: flex;
  flex-direction: column;
  padding-bottom: 25px;
  max-width: 390px; 
  
  /* Forces cards to sit perfectly centered in their grid track allocations */
  margin: 0 auto; 
  width: 100%;
}

/* .recent-blog-card:hover {
  transform: translateY(-10px);
} */

.recent-blog-section .recent-blog-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: top;
  border-radius: 20px;
  margin-bottom: 24px;
}

/* Typography styles for your actual card content */
.recent-blog-section .recent-blog-card h3 {
  font-size: 20px;
  margin: 20px 25px 10px;
  font-weight: 800;
  text-align: left;
}

.recent-blog-section .recent-blog-card p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 25px 20px;
  color: var(--text-mid, #666666);
  text-align: left;
}

.recent-blog-section .recent-blog-read-more {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  text-decoration: none;

  margin-left: 25px;
  margin-top: auto; /* Forces the read-more link to the card baseline */
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
}

/* CHANGED: Matches <span class="recent-blog-date"> */
.recent-blog-section .recent-blog-date {
  font-size: 13px;
  color: var(--text-mid);
  font-weight: 600;
  text-transform: uppercase;
}

/* PAGINATION SYSTEM */
.recent-blog-section .blog-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
}

.recent-blog-section .pagination-dot {
/*   width: 10px;
  height: 10px; */
  /* background: #ccc; */
  border-radius: 50%;
  width: 12px;
  height: 12px;
  /* border-radius: 50%; */
  background: #E5E5E5;
}

.recent-blog-section .pagination-dot.active {
  background: var(--orange);
}


/* BLOG DETAIL */
.blog-detail-hero {
  width: 100%;
  height: 550px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.blog-detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.blog-detail-content {
  max-width: none;
  margin: 0;
  padding: 40px 60px 80px;
}

.blog-detail-content h1 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 40px;
  line-height: 1.3;
  color: #000;
}

.blog-detail-content p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-mid);
  margin-bottom: 24px;
}

.blog-detail-socials {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 600;
  color: var(--text-dark);
}

.blog-detail-socials a {
  color: var(--orange);
}

.btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
  margin: 80px 0 0;
  width: max-content;
}



/* ── EVENTS PAGE ── */
.event-search-wrapper {
  display: flex;
  border-radius: 50px;
  width: 100%;
  max-width: 1102px;
  margin: 0 auto 60px; /* Centers search block beautifully */
  border: 2px solid black;
  max-width: 800px;
  position: relative;
  background: #FFF9F2; 
 
}

.event-search-wrapper input {
  flex: 1;
  border: none;
  font-size: 16px;
  outline: none;
  background: #FFF9F2; 
  border-radius: 30px;
  padding: 15px 30px;
  font-size: 16px;
  font-family: inherit;
}

.event-search-wrapper .event-search-btn {
  background: var(--orange);
  color: var(--white, #fff);
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
 /*  transition: background 0.2s ease; */
 width: 150px;
}

.event-search-btn:hover {
  background: #e05a00;
}

.events-page-title {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  margin: 60px 0 40px;
  color: var(--text-dark);
}


/* ── 2. TIMELINE WRAPPER & YEAR SEPARATOR ── */
.event-timeline-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px 100px;
}

.event-timeline-container .timeline-year-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.event-timeline-container .timeline-year-row span {
  font-size: 28px;
  font-weight: 900;
  color: var(--text-dark, #1a1a1a);
}

.event-timeline-container .timeline-year-line {
  flex: 1;
  height: 2px;
  background: var(--nav-gray);;
  border-radius: 2px;
}

/* ── 3. INDIVIDUAL TIMELINE GRID ROW ── */
.event-timeline-container .event-list-row {
  display: grid;
  grid-template-columns: 140px 1fr 220px; /* Strict, structured columns */
  gap: 40px;
  background: var(--white, #fff);
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  margin-bottom: 30px;
  align-items: center;
  border: 1px solid #f0f0f0;
}

/* ── 4. LEFT DATE PANEL ── */
.event-timeline-container .event-date-side {
  text-align: center;
  border-right: 2px solid #eeeeee;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-timeline-container .event-date-side .ed-day {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-dark, #1a1a1a);
  line-height: 1.1;
}

.event-date-side .ed-month {
  font-size: 16px;
  font-weight: 700;
  color: var(--orange,);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

/* ── 5. MIDDLE TEXT OBJECT DETAILS ── */
.event-timeline-container .event-content-middle {
  display: flex;
  flex-direction: column;
  min-width: 0; /* Prevents grid blowout from unbroken text */
}

.event-timeline-container .event-content-top {
  display: flex;
  align-items: center;
  gap:-10px;                /* Creates a perfect uniform gap between icons and labels */
  font-size: 13px;
  margin-bottom: 20px;
  width: 100%;             /* Ensures flex layout spans the entire width */
}

/* UNIVERSAL SVG CONTROL: Forces all icons inside this row to behave identically */
.event-timeline-container .event-content-top svg {
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;          /* Prevents the icons from squeezing on small viewports */
}

/* Left Checkmark Icon */
.event-timeline-container .event-content-top .icon {
  color: var(--orange);
  fill: currentColor;      /* Forces the path data to inherit your color variable */
}

/* Right Clock Icon (Targeting the second SVG seamlessly) */
.event-timeline-container .event-content-top svg:not(.icon) {
  color: var(--text-mid, #666666);
  fill: currentColor;
    /* PRESTIGE MOVE: Automatically shoves the time stamp perfectly to the right edge! */
}

/* Premium Badge styling for the 'SUMMIT' text */
.event-timeline-container .event-content-top span:first-of-type {
  font-weight: 800;
  color: var(--text-dark, #1a1a1a);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--light-gray, #f5f5f5);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;         /* Slightly smaller to contrast cleanly with standard text */
}

/* Styling for the '8:00 am' time text stamp */
.event-timeline-container .event-content-top span:last-of-type {
  color: var(--text-mid, #666666);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.event-timeline-container .event-content-middle h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-dark, #1a1a1a);
  margin-bottom: 6px;
  line-height: 1.2;
}

.event-content-middle h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}
.event-content-middle {
  flex: 1;
  border-left:2px solid var(--orange);
  padding-left: 30px;
}

.event-content-middle p {
  font-size: 15px;
  color: var(--text-mid, #666666);
  line-height: 1.6;
  margin-bottom: 20px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Inline action pills spacing */
.event-actions-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.btn-event-free {
  background: #fff3eb;
  color: var(--orange, #ff6b00);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.btn-event-join {
  background: var(--light-gray, #f5f5f5);
  color: var(--text-dark, #1a1a1a);
  padding: 6px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  /* transition: all 0.2s ease; */
}

.btn-event-join:hover {
  background: var(--orange, #ff6b00);
  color: var(--white, #fff);
}

/* ── 6. RIGHT IMAGE DISPLAY AREA ── */
.event-image-side {
  width: 100%;
 
  /* border-radius: 16px; */
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  width: 250px;
  height: 250px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid #ddd;
}

.event-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Event & Blog Card Content Limits */
.event-card-desc, .blog-card-summary, .event-content-middle p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 15px;
}

.event-card img {
  width: 100%;
  object-fit: cover;
  display: block;
}

.blog-card img {
  width: 100%;
  object-fit: contain;
  background-color: #f4f4f4; /* Adds a clean background in case of empty space */
  display: block;
}

/* ── 7. REUSED PAGINATION ALIGNMENT ── */
.event-timeline-container .blog-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
}


/* ── RESPONSIVE DESIGN & MEDIA QUERIES ── */

body.nav-open {
  overflow: hidden;
}

/* Base mobile menu overlay styling */
.nav-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--dark-green);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

.nav-mobile-overlay.active {
  transform: translateY(0);
}

.nav-mobile-links {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav-mobile-links li {
  margin: 30px 0;
}

.nav-mobile-links a {
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.nav-mobile-links a:hover,
.nav-mobile-links a.active {
  color: var(--orange);
}

.btn-donate-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 55px;
  border: 2px solid var(--orange);
  color: var(--orange) !important;
  font-size: 18px !important;
  font-weight: 800;
  border-radius: 4px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.btn-donate-mobile:hover {
  background: var(--orange);
  color: var(--white) !important;
}

/* Tablet & Half Screens Breakpoint */
@media (max-width: 1024px) {
  nav {
    padding: 20px 40px !important;
  }
  .nav-logo img {
    width: 120px !important;
    height: 120px !important;
  }
  .nav-links {
    gap: 25px !important;
  }
  .nav-links a{
    font-size: 20px !important;
  }
  .btn-donate-nav {
    width: 120px !important;
    height: 40px !important;
    font-size: 15px !important;
  }
  .hero-content {
    padding: 0 40px !important;
    
  }
  
  .hero-text-wrapper {
    margin-left: 50px !important;
    max-width: 600px !important;
  }
  
  .hero-title {
    font-size: 35px !important;
  }
  .hero-subtitle {
    font-size: 20px !important;
  }
  .btn-volunteer {
    padding: 12px 30px !important;
    font-size: 15px !important;
  }
  
  .hero-socials {
    right: 60px !important;
    bottom: 100px !important;

  }
  
  .services {
    padding: 0 40px !important;
    margin-bottom: 100px !important;
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 40px !important;
    padding: 40px 40px !important;
  }
  .service-icon {
    width: 40px !important;
    height: 40px !important;
  } 
  .service-title {
    font-size: 15px !important;
  }
  .service-desc {
    font-size: 15px !important;
    margin-bottom: 18px !important;
  }
  .read-more {
    font-size: 14px !important;
  }
  
  .empower {
    padding: 80px 40px !important;
    gap: 40px !important;
  }
  
  .empower-left h2 {
    font-size: 30px !important;
    margin-bottom: 10px !important;
  }
  
  .empower-images {
    height: 330px !important;
  }
  .empower-images img {
    height: 200px !important;
    width: 300px !important;
  }
  
  .events {
    padding: 80px 40px !important;
  }
  
  .events-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
  
  /* About Page */
  .about-hero-container {
    padding: 120px 40px 60px 40px !important;
    gap: 40px !important;
  }
  
  .about-hero-left h1 {
    font-size: 25px !important;
  }
  
  .about-hero-right {
    height: 400px !important;
  }
  
  .focus-row {
    padding: 60px 40px !important;
    gap: 50px !important;
  }
  
  .focus-img img {
    height: 350px !important;
  }
  
  .about-intro {
    padding: 60px 40px !important;
    gap: 40px !important;
  }
  
  .mission-vision {
    padding: 60px 40px !important;
    gap: 30px !important;
  }
  
  .mission-card {
    padding: 40px !important;
  }
  
  .about-detailed {
    padding: 60px 40px !important;
  }
  .focus-text .focus-title {
    font-size: 28px !important;
  }
  
  .detail-row {
    gap: 40px !important;
    margin-bottom: 60px !important;
  }
  
  /* Blog Page */
  .blog-hero-container {
    padding: 0 40px !important;
  }
  
  .blog-hero-container  .blog-hero-featured {
    height: 550px !important;
  }
  
  .blog-hero-container .blog-list {
    padding: 0 40px 80px !important;
  }
  
  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
  
  .recent-blog-section {
    padding: 80px 40px !important;
  }
  
  .recent-blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
  
  /* Event Page List */
  .events-list-container {
    padding: 40px !important;
  }
  
  .event-list-row {
    gap: 30px !important;
  }
}

/* Mobile & Small Devices Breakpoint */
@media (max-width: 768px) {
  /* Navigation Drawer toggle */
  .nav-center,
  .nav-right .btn-donate-nav {
    display: none !important;
  }
  
  .nav-burger {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 100;
  }
  
  .nav-burger span {
    width: 100%;
    height: 3px;
    background-color: var(--white);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  }
  
  /* Adjust burger color for solid navbar */
  .nav-solid .nav-burger span {
    background-color: var(--text-dark);
  }
  
  /* Burger Animation */
  .nav-burger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    background-color: var(--white);
  }
  
  .nav-burger.active span:nth-child(2) {
    opacity: 0;
  }
  
  .nav-burger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    background-color: var(--white);
  }
  
  nav {
    padding: 20px 24px !important;
  }
  
  .nav-logo img {
    width: 100px !important;
    height: 100px !important;
  }
  
  /* Home Hero */
  .hero {
    height: auto !important;
    min-height: 100vh !important;
    padding-top: 140px !important;
    padding-bottom: 60px !important;
  }
  
  .hero-content {
    padding: 0 24px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: justify !important;
    gap: 40px !important;
  }
  
  .hero-text-wrapper {
    margin: 0 auto !important;
    max-width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .hero-title {
    font-size: 40px !important;
    text-align: center !important;
  }
  
  .hero-subtitle {
    font-size: 25px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
  }
  .btn-volunteer {
    padding: 12px 30px !important;
    font-size: 20px !important;
  }
  
  .hero-socials {
    position: relative !important;
    bottom: 0 !important;
    right: 0 !important;
    margin-top: 20px !important;
    align-self: center !important;
  }
  
  /* Services Grid */
  .services {
    padding: 0 20px !important;
    margin-top: -30px !important;
    margin-bottom: 800px !important;
  }
  
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 35px 24px !important;
  }
  
  .service-card {
    padding: 10px 0 !important;
  }
  
  /* Empower Section */
  .empower {
    flex-direction: column !important;
    padding: 60px 24px !important;
    gap: 40px !important;
  }
  
  .empower-left h2 {
    font-size: 26px !important;
  }
  
  .empower-left {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .empower-left .btn-donate-outline {
    align-self: center !important;
    margin: 0 auto !important;
  }
  
  .empower-images {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    margin: 30px 0 0 0 !important;
  }
  
  .empower-images img {
    border: 6px solid var(--white) !important;
  }

  .empower-images .img-top {
    position: relative !important;
    width: 100% !important;
    height: 300px !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    border-radius: 12px !important;
  }

  .empower-images .img-bottom {
    display: none !important;
  }
  
  /* Events Grid (Recent Events) */
  .events {
    padding: 60px 24px !important;
  }
  
  .events h2 {
    font-size: 24px !important;
    margin-bottom: 30px !important;
  }
  .event-card-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }
  .events-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  
  /* About Page */
  .about-hero {
    height: auto !important;
    padding-top: 200px !important;
    padding-bottom: 60px !important;
    flex-direction: column !important;
  }
  
  .about-hero-container {
    flex-direction: column !important;
    padding: 0 24px !important;
    gap: 40px !important;
  }
  
  .about-hero-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .about-hero-left h1 {
    font-size: 20px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
  }
  
  .about-hero-left p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 25px !important;
    text-align: justify !important;
  }
  
  .about-hero-left .btn-volunteer {
    align-self: center !important;
    margin: 0 auto !important;
  }
  
  .about-hero-right {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    margin: 30px 0 0 0 !important;
  }
  
  .about-hero-right img {
    border: 6px solid var(--white) !important;
  }

  .about-img-top {
    position: relative !important;
    width: 100% !important;
    height: 320px !important;
    top: auto !important;
    bottom: 60px !important;
    left: auto !important;
    display: block !important;
    border-radius: 12px !important;
  }

  .about-img-bottom {
    display: none !important;
  }
  
  .about-hero .hero-socials {
    position: relative !important;
    bottom: 0 !important;
    right: 0 !important;
    margin-top: 40px !important;
    justify-content: center !important;
  }
  
  /* Focus Rows */
  .focus-row,
  .focus-row.reverse {
    flex-direction: column !important;
    padding: 60px 24px !important;
    gap: 40px !important;
  }
  
  .focus-text {
    text-align: justify !important;
  }
  
  .focus-tagline {
    font-size: 18px !important;
  }
  
  .focus-title {
    font-size: 22px !important;
    margin-bottom: 16px !important;
    text-align: left !important;
  }
  
  .focus-body {
    font-size: 15px !important;
  }
  
  .focus-img {
    width: 100% !important;
  }
  
  .focus-img img {
    height: 250px !important;
    border-radius: 12px !important;
  }
  .program__divider {
    display: flex !important;
    justify-self: center !important;
    width: 600px !important ;
  }
  .empower-left h2 {
    font-size: 28px !important;
    text-align: justify !important;
  }
  .empower-body {
    font-size: 15px !important;
    text-align: justify !important;
  }

  .about-intro {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 60px 24px !important;
    text-align: center !important;
  }
  
  .mission-vision {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 60px 24px !important;
  }
  
  .mission-card {
    padding: 30px !important;
  }
  
  .about-detailed {
    padding: 60px 24px !important;
  }
  
  .detail-row,
  .detail-row:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    margin-bottom: 60px !important;
  }
  
  .detail-row:nth-child(even) .detail-text {
    order: 1 !important;
  }
  
  .detail-row:nth-child(even) .detail-img {
    order: 2 !important;
  }

  .detail-text {
    text-align: center !important;
  }
  
  .detail-text h2 {
    font-size: 24px !important;
    margin-bottom: 15px !important;
  }
  
  .detail-text p {
    font-size: 15px !important;
  }
  
  /* Blog Page */
  

  /* 1. Main Hero Container Spacing Adjustments */
  .blog-hero-container {
    padding: 0 16px 20px !important; /* Slightly tighter margins for clean mobile edges */
  }

  /* 2. The Featured Post Wrapper Card */
  .blog-hero-container .blog-hero-featured{
    height: 500px !important;             /* Scales down the hero image for mobile */
    border-radius: 12px !important;      /* Maintains consistent rounded corners */
    margin-bottom: 30px !important;       /* Adds breathing room below the hero section */
  }
  
  /* 3. FIXED: The Text Content Box Block */
  .blog-hero-container .blog-hero-content {
    position: relative !important;
    bottom: 5 !important;
  /*   right: 0 !important;
    left: 0 !important; */
    top: 150px !important;
    margin: 0 auto !important;           /* Perfectly centers the content block */
    padding: 20px !important;            /* Adds cozy padding for mobile readability */
    /* background: rgba(0, 0, 0, 0.6) !important; */ /* Semi-transparent background for text legibility */
    border-radius: 12px !important;      /* Matches the hero image's rounded corners */
  }

  /* 4. Balanced Mobile Typography Adjustments */
 .blog-hero-container .blog-hero-content h2 {
    font-size: 24px !important;          /* Crisp headline sizing */
    text-align: left !important;        /* Aligns with container layout engine */
    margin-bottom: 12px !important;
    width: 100% !important;               /* Spans nicely across mobile screens */
    line-height: 1.25;
  }
  
  .blog-hero-content p {
    font-size: 15px !important;
    text-align: left !important;        /* Swaps hard justify layout out for cozy reading look */
    margin-bottom: 5px !important;
    width: 80% !important;               /* Let paragraph breathe edge to edge with padding boundaries */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);    /* Soft contrast optimization */
  }

  /* 5. Hide Layout Noise decoration arrows */
  .blog-hero-arrow {
    display: none !important;
  }
  
  /* 6. Social Icon Bar Navigation Stripping */
  .blog-hero-socials {
    /* position: relative !important; */
    bottom: 30px !important;
    right: 100px !important;
   /*  margin-top: 20px !important;
    justify-content: center !important; */
}

  .blog-list {
    padding: 0 24px 60px !important;
  }

  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  
  .recent-blog-section {
    padding: 60px 24px !important;
  }
  
  .recent-blog-section h2 {
    font-size: 30px !important;
    margin-bottom: 30px !important;
  }
  
  .recent-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .recent-blog-section .recent-blog-card {
    padding: 20px !important;
    max-width: 900px !important;
  }
  
  .recent-blog-card img {
    
    width: 100% !important;
    height: 320px !important;
  }
  .recent-blog-section .recent-blog-card h3 {
    font-size: 25px !important;
    margin: 15px 0 10px 0 !important;
  }
  .recent-blog-section .recent-blog-card p {
    font-size: 20px !important;
    line-height: 1.6 !important;
    margin: 15px 0 10px 0 !important;
  }
  .recent-blog-section .recent-blog-read-more {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 15px 0 10px 0 !important;
  } 
  
  /* Blog Detail Page */
  .blog-detail-hero {
    height: 400px !important;
    border-radius: 12px !important;
  }
  
  .blog-detail-content {
    padding: 40px 24px 60px !important;
  }
  
  .blog-detail-content h1 {
    font-size: 24px !important;
    line-height: 1.4 !important;
    margin-bottom: 25px !important;
    text-align: center !important;
  }
  
  .blog-detail-content p {
    font-size: 15px !important;
  }

  .blog-detail-socials {
    flex-direction: row !important;
    text-align: center !important;
    gap: 15px !important;
    align-items: center !important;
  }

  .blog-detail-content .btn-back {
    margin: 40px auto 0 !important;
  }
  
  /* Events Page List */
  .events-list-container {
    padding: 40px 24px !important;
  }
  
  .events-search-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 20px !important;
    height: fit-content;
    margin-bottom: 40px !important;
  }
  .event-search-wrapper {
    width: 80% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden;
    gap: 16px !important;
  }
  
 .event-search-wrapper input {
    width: 100% !important;   
    height: auto !important;   /* FORCE: Spreads the input beautifully edge-to-edge */
    padding: 15px 20px !important; /* Balanced internal padding for mobile fingers */
    font-size: 16px !important;   /* Crucial: 16px prevents iOS from forcing an ugly auto-zoom */
    box-sizing: border-box !important; /* Ensures padding doesn't push the input out of the screen bounds */
  }
  
  .event-search-wrapper .event-search-btn {
    width:150px !important;
    padding: 12px 0 !important;
    font-size: 16px !important;
    display: flex !important;
    justify-content: center;
    align-items: center!important;
  }
  
  .event-list-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 50px !important;
  }
  
  .event-date-side {
    flex-direction: row !important;
    gap: 15px !important;
    align-items: center !important;
  }
  
  .event-day {
    font-size: 32px !important;
  }
  
  .event-month {
    font-size: 16px !important;
  }
  
  .event-date-side::after {
    display: none !important;
  }
  
  .event-content-side {
    padding-left: 20px !important;
  }
  
  .event-content-side h3 {
    font-size: 20px !important;
  }
  
  .event-image-side {
   display: none !important;
  }
  
  /* Footer */
  .footer-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: left !important;
    text-align: left !important;
    gap: 40px !important;
    padding: 60px 24px !important;
  }
  
  .footer-brand {
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  
  .footer-brand p {
    font-size: 15px !important;
    text-align: left!important;
    margin: 15px auto 25px auto !important;
  }

  .footer-socials {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .footer-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .footer-col h4 {
    font-size: 20px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }
  
  .footer-col ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
  }
  
  .footer-bottom {
    padding: 30px 24px !important;
    font-size: 13px !important;
    text-align: center !important;
  }
  
  footer::before {
    transform: translateX(-90%) !important;
  }
  
  footer::after {
    transform: translateX(85%) !important;
  }
}


/* Very Small Devices & Mobile Phones Breakpoint */
@media screen and (max-width: 480px) {
  .nav-logo img {
    width: 80px !important;
    height: 80px !important;
  }
  nav {
  padding: 10px 16px !important;       /* Drops padding from 18px/30px to close the air gaps */
}
  
  /* 1. Global Padding Adjustments for Narrow Screens */
  nav, 
  .hero-content, 
  .services, 
  .empower, 
  .events, 
  .about-hero-container, 
  .focus-row, 
  .focus-row.reverse, 
  .about-intro, 
  .mission-vision, 
  .about-detailed, 
  .blog-list, 
  .recent-blog-section, 
  .events-list-container, 
  .footer-top, 
  .footer-bottom {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 2. Hero Section Rescaling */
 .hero {
  padding-top: 90px !important;        /* Gives just a tiny, clean clearance below the new slim nav */
  padding-bottom: 40px !important;
  margin-top: 0 !important;
}
  .hero-title{
    font-size: 19px !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 10px;
     /* Scaled down from 40px */
  }
  .hero-title .desktop-only {
    display: none !important;
  }
  
  .hero-subtitle {
    font-size: 15px !important; /* Scaled down from 25px */
    margin-bottom: 25px !important;
    text-align: justify !important;
  }
  
  .btn-volunteer {
    width: 100% !important; /* Full width buttons are easier to tap on phones */
    padding: 14px 20px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  
 .services {
  margin-bottom: 900px !important;
}

/* .empower {
  margin-top: 80px;
} */

  /* 3. Typography & Section Headers */
  .empower-left h2, 
  .focus-title, 
  .detail-text h2, 
  .recent-blog-section h2, 
  .events h2, 
  .blog-hero-content h2 {
    font-size: 20px !important; 
  }
  
  .empower-body, 
  .focus-body, 
  .about-hero-left p, 
  .detail-text p, 
  .blog-detail-content p {
    font-size: 14px !important; /* Slightly smaller for better reading wrap */
  }

  /* 4. Fix Hardcoded Widths (Crucial to prevent horizontal scrolling!) */
  .program__divider {
    width: 100% !important; /* Overrides the 600px from the 768px query */
    max-width: 300px !important; 
    margin: 0 auto !important;
  }

  /* 5. Image Height Reductions */
  .empower-images .img-top, 
  .about-img-top, 
  .recent-blog-card img {
    height: 220px !important; /* Scaled down from 300px+ to save vertical space */
  }
  
  .focus-img img {
    height: 200px !important; 
  }

 .events-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 24px !important;
}
.event-card {
  width: 100%;
  box-sizing: border-box;
}
.program__divider {
  width: 100% !important;
  max-width: 400px !important;
  margin: 5px auto !important;
}


/* ==========================================
   FULL-WIDTH ABOUT HERO MOBILE FIX (480px)
   ========================================== */
.about-hero {
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;          /* CRUCIAL: Kills the desktop 800px minimum height trap */
  height: 700px !important;
  
  /* Tightens top/bottom space near nav, opens up sides completely to flush to edges */
  padding: 150px 0px !important;         
  margin: 0 !important;
}

.about-hero-container {
  grid-template-columns: 1fr !important; /* Stacks layout layers vertically */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  
  /* Adds just a slight horizontal cushion for your inner text columns */
  padding: 0 16px !important;           
  gap: 30px !important;                 /* Reduces vertical gap between your text and image blocks */
  justify-items: center !important; 
}

/* 1. TEXT TYPOGRAPHY SCALE DOWN */
.about-hero .hero-title {
  font-size: 25px !important;            /* Tightens headline font signature */
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
  text-align: left !important;
}

.about-hero .hero-description {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 24px !important;
  text-align: left !important;          /* Swaps out 'justify' to prevent weird text gaps on mobile */
}

/* 2. RESPONSIVE LAYERED IMAGE STACK ENGINE */
/* .about-hero .about-hero-right {
  position: relative !important;
  width: 100% !important;
  max-width: 1000px !important;        
  height: 250px !important;           
  margin: 0 auto !important;           
}
 */
.about-hero-right img {
  display: none !important; /* Hides the decorative bottom image which breaks the mobile layout */
  border: 4px solid var(--white) !important; /* Thinner border accents to save precious pixels */
  border-radius: 12px !important;
}



/* Rescales and shifts the offset bottom image so it doesn't spill off screen */
.about-hero-right .about-img-bottom {
  display: none;            /* Resets the 90px desktop left push which broke the right boundary */
}

.focus-areas-container {
  padding: 40px 16px !important;       /* Removes desktop 60px sides so it spans screen edge-to-edge */
  width: 100% !important;
  max-width: 100% !important;
}

.focus-row {
  display: flex !important;
  flex-direction: column !important;   /* Stacks content vertically */
  padding: 30px 0 !important;          /* Cleans up the desktop inner padding gaps */
  gap: 0px !important;                 /* No image means we don't need a row gap anymore */
  width: 100% !important;
  border-bottom: 0px ;
}

/* HIDES ALL IMAGE BOXES AND DECORATIVE OVERLAYS COMPLETELY */
.focus-row .focus-img,
.focus-row.reverse .focus-img,
.focus-areas-container .focus-img img {
  display: none !important;
}

/* TEXT ELEMENT OVERHAUL */
.focus-text {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

.focus-text .focus-title {
  font-size: 24px !important;          /* Sharp, mobile-friendly heading size */
  margin-bottom: 12px !important;
}

.focus-text .focus-body {
  font-size: 15px !important;          /* Clear readability for small screens */
  line-height: 1.5 !important;
}

/* FIXES THE DIVIDER OVERFLOW TRAP */
.program__divider {
  width: 100% !important;              /* Resets from the desktop 438px width which breaks mobile views */
  max-width: 100% !important;
  margin-top: 16px !important;
}

 .blog-hero-container {
  width: 100% !important;
 }
  
  .blog-hero-container .blog-hero-featured {
    height: 400px !important; /* Scaled down from 500px */
  }

  /* 6. Blog Hero Content Tweaks */
   /* 1. Tighten the outermost container margins */
  /* 1. Tighten the outermost container margins */
  .blog-hero-container {
    padding: 0 16px 20px !important; 
    width: 100% !important;
  }

  /* 2. THE HERO FRAME: Set to 250px and push contents down */
  .blog-hero-container .blog-hero-featured {
    grid-template-columns: 1fr !important; /* Stacks layout layers */
    height: 250px !important;              /* FIXED: Reduced down exactly to your requested height */
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;  /* CRUCIAL: Slams the text container to the bottom floor */
    align-items: flex-start !important;    /* CRUCIAL: Locks the text container to the left wall */
  }

  /* 3. Ensure background image covers the new frame constraints */
  .blog-hero-container .blog-hero-featured > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 4. THE TEXT CONTENT BOX: Left aligned, resting at the absolute bottom */
  .blog-hero-container .blog-hero-content {
    width: 100% !important;               
    max-width: 100% !important;
    padding: 16px !important;             /* Cozy spacing from the absolute bottom-left edge */
    position: absolute !important;
    bottom: 0 !important;                 /* Lock firmly to the bottom */
    left: 0 !important;                   /* Lock firmly to the left */
    top: auto !important;                 /* Clear desktop overrides */
    margin: 0 !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;   /* Locks h2, p, and read more to the left */
    text-align: left !important;          /* Directs text lines to flow from the left */
  }

  /* 5. TYPOGRAPHY: Scaled compact to fit perfectly inside 250px */
  .blog-hero-container .blog-hero-content h2 {
    font-size: 18px !important;           /* Slightly tighter font size so it fits inside a 250px canvas */
    margin-bottom: 6px !important;        /* Tiny gaps so text clusters neatly at the bottom */
    line-height: 1.25 !important;
    text-align: left !important;
  }
  
  .blog-hero-container .blog-hero-content p {
    font-size: 13px !important;           /* Clean, compact size to ensure it doesn't cause text-overflow */
    line-height: 1.4 !important;
    text-align: left !important;
    margin-bottom: 8px !important;        /* Clean baseline gap before the read more anchor link */
    width: 100% !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .blog-hero-container .blog-hero-read-more {
    margin-top: 0 !important;             /* Handled neatly by the paragraph margin-bottom above */
    font-size: 13px !important;
    text-align: left !important;
  }

  /* 6. Strip away absolute decorative clutter */
  .blog-hero-container .blog-hero-arrow,
  .blog-hero-socials {
    display: none !important;             /* Hidden so they don't break or smash into your bottom-left text alignment */
  }
  .recent-blog-section h2 {
    font-size: 22px !important;
    text-align: left !important;
  }
  .recent-blog-section .recent-blog-card {
    padding: 15px !important;
  }
  .recent-blog-section .recent-blog-card h3{
    font-size: 22px !important;
    margin-bottom: 5px !important;
  }
  .recent-blog-section .recent-blog-card p{
    font-size: 15px !important;
  }
  .blog-detail-hero{
  height: 200px !important;
  }
  .blog-detail-content h1{
    text-align: left;
    font-size: 20px !important;
  }
  .blog-detail-content p{
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: justify !important;
  }
  

  /* 7. Stack the Search Bar */
  .event-search-wrapper {
    flex-direction: row !important; /* Stack input and button on small phones */
    width: 80% !important;
    height: auto !important ;
    gap: 12px !important;
  }
  
  .event-search-wrapper .event-search-btn {
    width: 30% !important; /* Make the button span the full width */

  }

  /* 8. Event Date Adjustments */
  .event-timeline-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  
  /* Clears the desktop 60px sides; adds small 16px cushion so cards look premium */
  padding: 0 16px 60px !important; 
}

  .event-timeline-container .event-list-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px !important;
  }

  .event-image-side {
    display: none !important;
  }

  .event-date-side{
    flex-direction: row !important;
    gap: 20px !important;
    align-items: center !important;
  }
  .ed-day {
    font-size: 20px !important;
    font-weight: 800 !important;

  }
  .event-timeline-container .event-content-top .icon,
  .event-timeline-container .event-content-top svg:not(.icon) {
    display: none !important;
  }
  .event-timeline-container .event-content-top{
    gap: 20px !important;
  }
  
  .ed-month {
    font-size: 20px !important;
  }
  
  .event-timeline-container .event-content-middle h3 {
    font-size: 20px !important;
  }
  .event-timeline-container .event-content-middle p {
    font-size: 14px;
    margin-bottom: 25px;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.5 !important;
    text-align: left !important;
  }
  /* ==========================================
   SMART MOBILE FOOTER ADJUSTMENTS (480px)
   ========================================== */
footer {
  padding: 40px 16px 0 !important; 
}

/* 1. STACK LAYOUT CONFIGURATION */
.footer-top {
  display: flex !important;             /* OVERRIDES the desktop grid completely */
  flex-direction: column-reverse !important;    /* FORCES columns to stack vertically on top of each other */
  gap: 40px !important;                 /* Adds spacing between the stacked blocks */
}

/* 2. BRAND & LOGO LEFT ALIGNMENT */
.footer-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;   /* Anchors brand text and links to the left edge */
}

.footer-brand .nav-logo {
  transform: translateX(0) !important;  /* Resets desktop offset shift */
  margin: 0 0 12px 0 !important;        /* Keeps logo aligned left */
}

.footer-brand .nav-logo img {
  width: 120px !important;              /* Slightly smaller logo so it doesn't overpower the screen */
  height: 120px !important;
}

.footer-brand p {
  text-align: left !important;          /* Changed from justify to left for clean mobile reading lines */
  margin: 0 0 24px 0 !important;       
  max-width: 100% !important;
}

.footer-socials {
  display: flex !important;
  justify-content: flex-start !important; /* FIXED: Changed from invalid 'justify' to valid 'flex-start' */
  gap: 15px !important;
}

/* 3. LINK COLUMNS LEFT ALIGNMENT (Matches the Brand Section) */
.footer-col {
  display: none !important;
  flex-direction: column !important;
  align-items: flex-start !important;   /* Changed from center to left to match your brand style */
}

.footer-col h4 {
  margin-bottom: 16px !important;       
  text-align: left !important;
}

.footer-col ul {
  padding: 0 !important;                
  margin: 0 !important;
  text-align: left !important;
}

/* 4. HORIZONTAL SCROLL PROTECTION FIX */
.footer-bottom {
  margin: 20px -16px 0 -16px !important; 
  padding: 12px 10px !important;        
}
  
}

/* ==========================================
   MOBILE OVERFLOW FIXES (Blog & Admin)
   ========================================== */
@media screen and (max-width: 768px) {
  .blog-detail-content, .admin-container, .admin-main, .admin-content {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .blog-detail-hero img {
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  .admin-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================
   SWEETALERT Z-INDEX FIX
   ========================================== */
.swal2-container {
  z-index: 999999 !important;
}



/* Blog Summary Mobile Truncation */
@media (max-width: 768px) {
    .desktop-summary { display: none !important; }
    .mobile-summary { display: inline !important; }
}

/* Fix Blog Detail List Bullet Clipping */
.blog-detail-content ul,
.blog-detail-content ol {
    padding-left: 30px !important;
    margin-left: 15px !important;
    list-style-position: inside !important;
}

/* ==========================================
   DONATION IMPACT SECTION
   ========================================== */
.donation-impact-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.donation-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-impact-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--orange);
  color: var(--orange);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  padding: 16px 30px;
  border-radius: 0; /* Removing border radius to match btn-donate-outline if it doesn't have one */
  transition: all 0.3s;
}

.btn-impact-toggle .icon-chevron {
  transition: transform 0.3s;
}

.btn-impact-toggle.is-open .icon-chevron {
  transform: rotate(180deg);
}

.btn-impact-toggle:hover {
  background: var(--orange);
  color: #fff;
  opacity: 1;
}

.impact-content {
  background: #fff;
  border-left: 4px solid var(--orange);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  margin-top: 10px;
  animation: slideDown 0.3s ease-out;
}

.impact-content h4 {
  margin: 0 0 10px 0;
  color: var(--text-dark);
  font-size: 16px;
}

.impact-text {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.6;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}