/* GLOBAL STYLES (Keep existing styles) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    scroll-behavior: smooth;
}

body {
  max-width: 100vw;
}

.spacing {
  margin-top: 80px;
}

@media (max-width: 768px) {
  .spacing {
    margin-top: 120px;
  }
}

/* --- HEADER STYLES --- */
header {
    /* Base padding */
    padding: 0 1rem; /* Adjusted for better mobile padding */
    height: auto; /* Allow height to adjust for stacked content */
    min-height: 80px;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on small screens */
    align-items: center;
    justify-content: space-between; /* Better alignment than space-evenly */
    background: white;
    border-bottom: 1px solid #e0e0e0a5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 9999999;
}

/* Header Content Wrapper for mobile stacking */
.header-hero {
    /* REMOVED fixed width: 600px; */
    width: auto; /* Allow it to shrink/grow */
    max-width: 100%;
    /* On mobile, this takes up one line */
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
}

.header-hero img {
    width: 50px;
    height: 50px;
    display: block;
    margin-right: 1rem;
}

.header-hero-text {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.header-hero-text h1 {
    font-size: 18px;
    color: hsl(220, 43%, 11%);
    font-weight: 500;
}

.header-hero-text p {
    font-size: 12px;
    color: hsl(216, 15%, 34%);
}

/* Navigation - Mobile Default */
nav {
    /* On small screens, force nav to a new line and span full width */
    width: 100%;
    order: 2; /* Ensures nav appears below the logo group on small screens */
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between; /* Distribute links evenly */
    align-items: center;
    gap: 0.5rem; /* Reduced gap for smaller screens */
    padding-bottom: 0.75rem;
}

nav a {
    text-decoration: none;
    outline: none;
    color: #030213;
    padding-block: calc(0.25rem * 2);
    padding-inline: 0.5rem; /* Reduced horizontal padding for mobile links */
    border-radius: calc(0.625rem - 2px);
    transition: 0.2s;
    text-align: center;
    flex-grow: 1; /* Allow links to share space evenly */
}

/* Button specific adjustments */
.nav-button-green {
    margin-left: 0; /* Remove fixed margin-left on mobile */
}

/* --- Media Query for Larger Screens (e.g., Tablet/Desktop) --- */
@media (min-width: 768px) {
    header {
        padding: 0 1.5rem;
        height: 80px; /* Restore fixed height */
        flex-wrap: nowrap; /* Prevent wrapping */
        justify-content: space-between; /* Keep logo and nav separate */
    }

    .header-hero {
        /* Remove padding added for mobile */
        padding: 0;
        /* Restore a larger size/width constraint if desired, but flexible is better */
        width: auto; 
    }
    
    /* Navigation - Desktop Reset */
    nav {
        width: auto; /* Allow nav to take only necessary space */
        order: initial; /* Reset order */
        justify-content: flex-start; /* Align links to the left of the nav container */
        gap: 1rem; /* Restore larger gap */
        padding-bottom: 0;
    }

    nav a {
        flex-grow: 0; /* Links don't need to stretch */
        padding-inline: calc(0.25rem * 4); /* Restore original padding */
    }
    
    .nav-button-green {
        margin-left: 1rem; /* Restore desktop margin-left */
    }
}

/* --- REMAINING NAV STYLES (Kept as is) --- */
nav i {
    margin-left: 0.5rem;
}

.nav-hover:hover {
    background: #e0e0e0a5;
}

.nav-button-black {
    color: white;
    background: #030213;
}

.nav-button-black:hover {
    background: #030213e0;
}

.nav-button-green {
    color: white;
    background: rgb(0, 166, 62);
}

.nav-button-green:hover {
    background: rgb(1, 128, 47);
}

.footer-container {
  background-color: #1a202c; /* Equivalent of bg-gray-900 */
  color: #ffffff;
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.max-width-wrapper {
  max-width: 80rem; /* Equivalent of max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem; /* Equivalent of px-4 */
  padding-right: 1.5rem;
}

/* Main Grid */
.footer-grid {
  display: grid;
  gap: 2rem; /* Equivalent of gap-8 */
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .foundation-info {
    grid-column: span 2 / span 2; /* Equivalent of md:col-span-2 */
  }
}

/* Foundation Info Section */
.foundation-logo {
  display: flex;
  align-items: center;
  margin-bottom: 1rem; /* Equivalent of mb-4 */
  gap: 0.75rem; /* Equivalent of space-x-3 */
}

.foundation-logo img {
  height: 3rem; /* Equivalent of h-12 */
  width: 3rem; /* Equivalent of w-12 */
  border-radius: 9999px; /* Equivalent of rounded-full */
}

.foundation-logo-text h3 {
  font-size: 1.125rem; /* Equivalent of text-lg */
  font-weight: 600; /* Equivalent of font-semibold */
  margin: 0;
}

.foundation-logo-text p {
  color: #a0aec0; /* Equivalent of text-gray-400 */
  font-size: 0.875rem; /* Equivalent of text-sm */
  margin: 0;
}

.foundation-description {
  color: #d1d5db; /* Equivalent of text-gray-300 */
  margin-bottom: 1rem; /* Equivalent of mb-4 */
  max-width: 28rem; /* Equivalent of max-w-md */
  text-align: justify;
}

.foundation-established {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Equivalent of space-x-2 */
  font-size: 0.875rem; /* Equivalent of text-sm */
  color: #a0aec0; /* Equivalent of text-gray-400 */
}

.foundation-established .icon {
  font-size: 1rem; /* Equivalent of h-4 w-4 */
}

/* Quick Links & Contact Info Sections */
.section-heading {
  font-weight: 600; /* Equivalent of font-semibold */
  margin-bottom: 1rem; /* Equivalent of mb-4 */
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Equivalent of space-y-2 */
}

.link-list li a {
  color: #d1d5db; /* Equivalent of text-gray-300 */
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition-property: color;
  transition-duration: 300ms;
}

.link-list li a:hover {
  color: #ffffff;
}

.link-list li span {
  color: #d1d5db; /* Equivalent of text-gray-300 */
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Equivalent of space-y-3 */
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem; /* Equivalent of space-x-2 */
}

.contact-item a {
  text-decoration: none;
  outline: none;
}

.contact-item-text:hover {
  color: #ffffff;
}


.contact-item .icon {
  font-size: 1rem;
  margin-top: 0.25rem; /* Equivalent of mt-1 */
  color: #a0aec0; /* Equivalent of text-gray-400 */
}

.contact-item-text {
  font-size: 0.875rem; /* Equivalent of text-sm */
  color: #d1d5db; /* Equivalent of text-gray-300 */
}

/* Our Programs Section */
.programs-section {
  margin-top: 3rem; /* Equivalent of mt-12 */
  padding-top: 2rem; /* Equivalent of pt-8 */
  border-top: 1px solid #2d3748; /* Equivalent of border-t border-gray-800 */
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  ); /* Equivalent of grid-cols-2 */
  gap: 1rem; /* Equivalent of gap-4 */
  font-size: 0.875rem; /* Equivalent of text-sm */
}

@media (min-width: 768px) {
  .programs-grid {
    grid-template-columns: repeat(
      5,
      minmax(0, 1fr)
    ); /* Equivalent of md:grid-cols-5 */
  }
}

.programs-grid a {
  color: #d1d5db; /* Equivalent of text-gray-300 */
  cursor: pointer;
  transition-property: color;
  transition-duration: 300ms;
  text-decoration: none;
}

.programs-grid a:hover {
  color: #ffffff;
}

/* Bottom Section */
.bottom-section {
  margin-top: 3rem; /* Equivalent of mt-12 */
  padding-top: 2rem; /* Equivalent of pt-8 */
  border-top: 1px solid #2d3748; /* Equivalent of border-t border-gray-800 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.copyright, .copyright a {
  color: #a0aec0; /* Equivalent of text-gray-400 */
  font-size: 0.875rem; /* Equivalent of text-sm */
  transition: 0.1s;
  text-decoration: none;
}

.copyright a:hover {
  text-decoration: underline;
  color: #ffffff;
}

.join-mission {
  display: flex;
  align-items: center;
  gap: 1rem; /* Equivalent of space-x-4 */
  margin-top: 1rem; /* Equivalent of mt-4 */
}

.join-mission span {
  color: #a0aec0; /* Equivalent of text-gray-400 */
  font-size: 0.875rem; /* Equivalent of text-sm */
}

.donate-button {
  text-decoration: none;
  outline: none;
  background-color: rgb(0, 166, 62); /* Equivalent of bg-green-600 */
  color: #ffffff;
  border: none;
  padding: 0.5rem 1rem; /* Equivalent of size="sm" padding */
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.375rem; /* Equivalent of rounded-md */
  cursor: pointer;
  transition-property: background-color;
  transition-duration: 300ms;
}

.donate-button:hover {
  background-color: rgb(1, 128, 47); /* Equivalent of hover:bg-green-700 */
}

@media (min-width: 768px) {
  .bottom-section {
    flex-direction: row;
    text-align: left;
  }
  .join-mission {
    margin-top: 0; /* Equivalent of md:mt-0 */
  }
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 999999999999;
}

#preloader:before {
  content: "";
  position: absolute;
  /* Centering the pseudo-element */
  top: 50%;
  left: 50%;
  margin-top: -25px; /* Half of the element's height */
  margin-left: -25px; /* Half of the element's width */
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #2d3748;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

.hidden {
  display: none;
}