/* Styles for events.php (moved out of the page) */
.hero-section {
  background: url('../../our-story/our-events.webp') center center / cover no-repeat;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem; /* Mobile padding */
  background-size: cover;
  background-position: center;
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 80vh;
    background-position: top center;
    background-image: url('../../our-story/mobile-event.webp'); /* Mobile image */
  }
}