/* Add responsive meta tag */
@media (max-width: 768px) {
  .navbar-nav {
    flex-direction: column;
  }
  
  .hero-content {
    padding: 2rem 1rem;
  }
  
  .hero-content h1 {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .card {
    margin-bottom: 1.5rem;
  }
  
  .footer-content {
    flex-direction: column;
  }
  
  .footer-section {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  
  .contact-info {
    padding: 1rem;
  }
  
  .donation-options {
    flex-direction: column;
  }
  
  .donation-button {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Improve performance with hardware acceleration */
.animated, .card, .btn, .nav-link {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Optimize transitions */
* {
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

/* Preconnect to external resources */
/* Add to HTML head: 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
*/