/* Basic Styles */
html { scroll-behavior: smooth; }
body { font-family: Arial, sans-serif; margin:0; padding:0; }

/* Header + Navigation */
header { background:#003366; color:white; padding:10px 20px; position:sticky; top:0; z-index:1000; }
.nav-container { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.logo-container { display:flex; align-items:center; gap:10px; }
.logo { width:60px; height:60px; }

/* Navigation Menu */
nav ul { list-style:none; margin:0; padding:0; display:flex; gap:20px; }
nav a { color:white; text-decoration:none; font-weight:bold; transition:color 0.3s; }
nav a:hover { color:#66ccff; }

/* Hamburger Menu */
.hamburger { display:none; font-size:28px; cursor:pointer; }
@media(max-width:768px) {
  .hamburger { display:block; }
  nav { width:100%; display:none; background:#003366; }
  nav.active { display:block; }
  nav ul { flex-direction:column; text-align:center; padding:10px 0; gap:10px; }
}

/* Hero Section + Overlay */
.hero {
  position:relative;
  height:320px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:white;
  background-size:cover;
  background-position:center;
}

.hero::after {
  content:'';
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.4);
  z-index:1;
}

.hero-text { position:relative; z-index:2; }

/* Gallery Carousel */
.gallery-carousel { position:relative; overflow:hidden; max-width:100%; margin:20px auto; }
.carousel-track { display:flex; transition:transform 0.5s ease-in-out; }
.carousel-item { min-width:100%; height:200px; object-fit:cover; }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5); border:none; color:white; font-size:2rem; padding:0 10px; cursor:pointer; z-index:10; }
.carousel-btn.prev { left:10px; }
.carousel-btn.next { right:10px; }

/* Membership & Events */
.membership-content, .events-content { padding:20px; }
.membership-content ul, .events-content ul { list-style: disc; margin-left:20px; }

/* Signup Form */
form { display:flex; flex-direction:column; gap:10px; max-width:400px; margin:auto; }
form input, form textarea { padding:10px; font-size:1rem; width:100%; }
form button { padding:10px; font-size:1rem; background:#003366; color:white; border:none; cursor:pointer; }
form button:hover { background:#0066cc; }

/* Contact & Footer */
#contact { padding:20px; text-align:center; }
footer { background:#003366; color:white; text-align:center; padding:10px; }

/* Fade-in animation */
section { opacity:0; animation:fadeIn 1s ease forwards; }
@keyframes fadeIn { to { opacity:1; } }
.fade-in, .slide-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.fade-in.visible,
.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.highlight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.highlight-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  text-align: center;
}

.highlight-card span {
  font-size: 2rem;
  display: block;
  margin-bottom: .5rem;
}