/* Hero Section Styles */
.hero-section {
  text-align: center;
  color: white;
  position: relative;
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 41, 59, 0.45);
  /* dark overlay for text readability */
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  width: 100%;
  transition: transform 0.3s ease;
}

.hero-content h1 {
  font-size: 3rem;
  margin-top: 4rem;
  font-weight: 700;
}

/* --- New Styles for Events Gallery Section --- */

.events-gallery-section {
  padding: 60px 20px;
}

.events-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  /* Allow wrapping for responsive behavior */
  gap: 40px;
}

/* Left Column: Tabs Navigation */
.tabs-nav {
  flex: 0 0 300px;
  /* Flex-grow, flex-shrink, flex-basis */
  border-right: 1px solid #eee;
  font-family: "Inter", sans-serif;
}

.tabs-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.tabs-nav .tab-link {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  padding: 15px 20px;
  cursor: pointer;
  color: #333;
  font-size: 0.8rem;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s, color 0.3s;
}

.tabs-nav .tab-link:hover {
  background-color: #f5f5f5;
}

.tabs-nav .tab-link.active {
  background-color: #a92323;
  /* Dark red color from image */
  color: #ffffff;
  font-weight: 700;
}

/* Right Column: Tab Content */
.tabs-content {
  flex: 1;
  /* Takes up remaining space */
  min-width: 0;
  /* Prevents overflow issues with flexbox */
}

.tab-pane {
  display: none;
  /* Hide all panes by default */
}

.tab-pane.active {
  display: block;
  /* Show only the active pane */
}

.image-grid {
  display: grid;
  /* Create a responsive grid that shows 2 or 3 columns */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0;
  /* Changed from 15px to 0px to remove spacing between images */
  grid-template-rows: repeat(auto-fill, 200px);
  /* Explicitly set row heights */
  align-items: stretch;
  /* Ensure grid items stretch to fill their cells */
}

.image-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  display: block;
}

.image-grid img:hover {
  transform: scale(1.05);
}