/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Typography */
body {
  font-family: 'Roboto Condensed', sans-serif;
  color: #000000;
}

h1, h2, h3, h4 {
  font-family: 'Oswald', sans-serif;
  color: #0c910b;
}

p, a, button {
  font-family: 'Montserrat', sans-serif;
}
}
a {
  text-decoration: none;
  color: inherit;
}

  /* Header */
#header-forum {
  background: #0da8ee;
  color: #fff;
}
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.logo {
  font-size: 1.5rem;
  font-weight: bold;
}
/* Navigation */
.nav-menu a {
  color: #fff;
}
.nav-menu a:hover {
  color: #c80ec9;
}
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
}

/* Hero Section */
#hero-section {
  background: linear-gradient(to right, #0da8ee, #c80ec9);
}

}
/* Buttons & CTA */
.cta-button {
  background-color: #f3e329;
  color: #000;
  border: 2px solid #0c910b;
}
.cta-button:hover {
  background-color: #0c910b;
  color: #fff;
}


/* Sections */
.section-wrapper {
  padding: 3rem 2rem;
  max-width: 1100px;
  margin: auto;
}

/* Topics Grid */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
/* Topic Cards */
.topic-card {
  background: #fff;
  border-left: 5px solid #0c910b;
}
.topic-card h3 {
  color: #c80ec9;
}

/* Icons */
.topic-card i {
  color: #0da8ee;
}


/* Members */
.members-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
/* Member Cards */
.member-card h4 {
  color: #0c910b;
}
.member-card p {
  color: #c80ec9;
}


/* About Section */
#about {
  background: #f3e32920;
  border-top: 3px solid #0da8ee;
}

/* Footer */
#footer-section {
  background: #0c910b;
  color: #fff;
}
/* Animations */
.fade-in {
  animation: fadeIn 1s ease-in-out;
}
.fade-in-delay {
  animation: fadeIn 1.5s ease-in-out;
}
.bounce {
  animation: bounce 2s infinite;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px);}
  to { opacity: 1; transform: translateY(0);}
}
@keyframes bounce {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-8px);}
}

/* Responsive Nav */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    background: #333;
    position: absolute;
    top: 60px;
    right: 0;
    padding: 1rem;
  }
  .nav-menu.active {
    display: flex;
  }
  .nav-toggle {
    display: block;
  }
}