/* ========== Responsive Styles ========== */

/* 1. General adjustments for large tablets and below (max-width: 1024px) */
@media (max-width: 1024px) {
    .container {
      padding: 0 12px;
    }
  
    .about-content,
    .contact-content,
    .donate-gallery,
    .footer-container {
      gap: 24px; /* Reduce gap between items */
    }
  
    .values-grid,
    .give-options,
    .testimonials-grid {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust grid items */
    }
  }
  
  /* 2. Stack columns for tablets and smaller (max-width: 900px) */
  @media (max-width: 900px) {
    .about-content,
    .contact-content,
    .footer-container {
      flex-direction: column;
      align-items: center; /* Center items in columns */
    }
  
    .about-text,
    .about-image,
    .contact-details,
    .contact-map,
    .contact-form,
    .footer-column {
      min-width: 0;
      width: 100%;
      max-width: 600px; /* Limit column width */
    }
  
    .donate-gallery {
      flex-direction: column;
      align-items: center;
    }
  }
  
  /* 3. Mobile navigation and layout adjustments (max-width: 768px) */
  @media (max-width: 768px) {
    .header-container {
      flex-direction: row;
      padding: 12px 0;
    }
  
    .main-nav {
      position: absolute;
      top: 70px;
      right: 0;
      background: #222;
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
      display: none;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
      z-index: 999;
      padding: 24px 0;
      border-top: 2px solid #6bb7ff;
    }
  
    .main-nav.active {
      display: flex;
    }
  
    .nav-links {
      flex-direction: column;
      gap: 18px;
      width: 100%;
      padding-left: 24px;
    }
  
    .burger {
      display: block;
    }
  
    .hero-content h1 {
      font-size: 2.4rem;
    }
  
    .hero-content p {
      font-size: 1.1rem;
    }
  
    .section {
      padding: 50px 0 40px 0; /* Adjust section padding */
    }
  }
  
  /* 4. Small mobile optimizations (max-width: 600px) */
  @media (max-width: 600px) {
    h1 {
      font-size: 2rem;
    }
  
    h2 {
      font-size: 1.6rem;
    }
  
    .container {
      padding: 0 10px;
    }
  
    .footer-column {
      padding: 0 10px;
    }
  
    .social-icons {
      flex-direction: column;
      align-items: center;
    }
  
    .social-icons a {
      margin-bottom: 10px;
    }
  
    .site-title {
      font-size: 1.1rem; /* Adjust site title size */
    }
  
    .logo {
      height: 50px; /* Adjust logo height */
    }
  
    .btn-primary,
    .btn-secondary {
      font-size: 0.95rem;
      padding: 0.8em 1.8em;
    }
  
    .footer-bottom {
      font-size: 0.9rem; /* Adjust footer font size */
    }
  }
  
  /* 5. Micro adjustments for tiny screens (max-width: 400px) */
  @media (max-width: 400px) {
    .hero-content h1 {
      font-size: 2rem;
    }
  
    .hero-content p {
      font-size: 1rem;
    }
  
    .btn-primary,
    .btn-secondary {
      font-size: 0.9rem;
      padding: 0.8em 1.8em;
    }
  }
  
  /* 6. Ensure sections don't hide behind sticky header */
  .section {
    scroll-margin-top: 80px;
  }