:root {
  --primary: #2e8b57;
  /* Sea Green */
  --secondary: #3cb371;
  /* Medium Sea Green */
  --accent: #20b2aa;
  /* Light Sea Green */
  --light: #f8f9fa;
  --dark: #2f4f4f;
  /* Dark Slate Gray */
  --gray: #6c757d;
  --transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f5f7fa;
  color: var(--dark);
  line-height: 1.6;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Styles */
header {
  background: linear-gradient(135deg, var(--primary), #1e6b46);
  color: white;
  padding: 1rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo img {
  height: 50px;
  border-radius: 5px;
}

.logo .site-title {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.logo span {
  color: #e0f7fa;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 25px;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.95rem;
  white-space: nowrap;
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.auth-buttons {
  display: flex;
  gap: 15px;
}

.btn {
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  display: inline-block;
  cursor: pointer;
  text-align: center;
  font-size: 0.95rem;
}

.btn-outline {
  border: 2px solid white;
  color: white;
  background: transparent;
}

.btn-outline:hover {
  background: white;
  color: var(--primary);
}

.btn-primary {
  background: var(--accent);
  color: white;
  border: 2px solid var(--accent);
}

.btn-primary:hover {
  background: #1a9c95;
  border-color: #1a9c95;
}

/* Hero Section */
.hero {
  padding: 5rem 0;
  background: linear-gradient(rgba(46, 139, 87, 0.85), rgba(46, 139, 87, 0.75)), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
}

.hero h2 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.hero p {
  font-size: 1.3rem;
  max-width: 700px;
  margin: 0 auto 2.5rem;
  opacity: 0.95;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Features Section */
.features {
  padding: 5rem 0;
  background-color: white;
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title h2 {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1rem;
  font-weight: 700;
}

.section-title p {
  color: var(--gray);
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.6;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.feature-card {
  background: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  text-align: center;
  border-top: 4px solid var(--accent);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white;
  font-size: 1.8rem;
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--primary);
  font-weight: 600;
}

.feature-card p {
  color: var(--gray);
  line-height: 1.6;
}

/* School Section (replaced Institutions) */
.institutions {
  padding: 5rem 0;
  background-color: #f8f9fa;
}

.institutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.institution-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
}

.institution-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.institution-img {
  height: 160px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 3rem;
}

.institution-content {
  padding: 20px;
}

.institution-content h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--primary);
  font-weight: 600;
}

.institution-content p {
  color: var(--gray);
  margin-bottom: 15px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.institution-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

.institution-link:hover {
  color: var(--primary);
  gap: 8px;
}

/* Events Section */
.events {
  padding: 5rem 0;
  background-color: white;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.event-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.event-date {
  background: var(--secondary);
  color: white;
  padding: 15px;
  text-align: center;
}

.event-date .day {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.event-date .month {
  font-size: 1.1rem;
  font-weight: 500;
}

.event-content {
  padding: 20px;
}

.event-content h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--primary);
  font-weight: 600;
}

.event-content p {
  color: var(--gray);
  margin-bottom: 15px;
  line-height: 1.6;
}

/* Footer */
footer {
  background: var(--dark);
  color: white;
  padding: 4rem 0 2rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 3rem;
}

.footer-column h3 {
  font-size: 1.3rem;
  margin-bottom: 20px;
  color: var(--accent);
  font-weight: 600;
}

.footer-column p,
.footer-column li {
  line-height: 1.6;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.footer-column ul li i {
  margin-right: 10px;
  color: var(--accent);
}

.footer-column a {
  color: #adb5bd;
  text-decoration: none;
  transition: var(--transition);
}

.footer-column a:hover {
  color: white;
}

.social-links {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: var(--transition);
}

.social-links a:hover {
  background: var(--accent);
  transform: translateY(-3px);
}

.copyright {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #adb5bd;
  font-size: 0.9rem;
}

/* Mobile Responsiveness */
.menu-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: white;
}

@media (max-width: 1024px) {
  nav ul {
    gap: 15px;
  }

  nav a {
    font-size: 0.9rem;
    padding: 6px 10px;
  }
}

@media (max-width: 900px) {
  .header-content {
    flex-wrap: wrap;
    /* Allow wrapping */
    gap: 10px;
  }

  .menu-toggle {
    display: block;
    order: 1;
    /* Keep it near logo if possible, or adjust order */
    margin-left: auto;
    /* Push to right if flex */
  }

  nav {
    width: 100%;
    order: 3;
    /* Move below logo and toggle */
    display: none;
    /* Hidden by default */
  }

  nav.active {
    display: block;
  }

  nav ul {
    flex-direction: column;
    width: 100%;
    gap: 0;
    background-color: rgba(0, 0, 0, 0.1);
    /* Slight background for menu items */
    border-radius: 8px;
    padding: 10px 0;
  }

  nav a {
    display: block;
    padding: 12px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  nav a:last-child {
    border-bottom: none;
  }

  .auth-buttons {
    display: none;
    /* Hide auth buttons on mobile for now to save space, or move them into nav? User didn't specify, but simpler is better for "strict checklist" launch. Let's keep them but maybe adjust. Actually, keeping them visible might be crowded. Let's hide them in the nav or keep them next to toggle? */
    /* Let's keep them but make them smaller or put them in the nav? */
    /* For now, let's keep them visible but maybe stacked? */
    /* actually, let's put auth buttons in the nav for mobile or just hide them if not critical. 
       "Register" is in the nav often. 
       Let's keep them visible for now but ensure they don't break layout. */
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    order: 4;
  }

  .auth-buttons {
    /* If we want them in the menu, we'd need to move them in HTML. 
         If we keep them outside, they take space. 
         Let's just center them below the nav when active? 
         Or keep them visible next to logo? 
         Let's try to keep them visible but maybe smaller. */
    display: flex;
    width: auto;
    margin-top: 0;
    order: 2;
    /* Right after toggle? */
  }

  /* Adjusting header layout for mobile */
  .header-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    flex: 1;
  }

  .auth-buttons {
    display: none;
    /* Hiding for simplicity as requested "mobile optimization is key" - usually means decluttering. 
                        Users can use the "Register" link in the hero or footer or we can add it to nav links dynamically? 
                        The nav links has "Register" (registration.html) in the list? No, it has "Contact". 
                        The list is: Home, About, Members, Board, Exec, Committees, Events, Projects, Contact.
                        Register is separate. 
                        Let's hide auth buttons on mobile to prevent clutter, as "Register" is a primary call to action in Hero too. 
                        OR, better, make the menu full screen and include them. 
                        For this task, I'll stick to a simple toggle for the existing nav. */
  }

  .hero h2 {
    font-size: 2.2rem;
  }

  .hero p {
    font-size: 1.1rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 250px;
    text-align: center;
  }

  .section-title h2 {
    font-size: 2rem;
  }

  .section-title p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .logo h1 {
    font-size: 1.2rem;
    /* Smaller font for logo text */
  }

  .logo img {
    height: 40px;
    /* Smaller logo */
  }

  nav ul {
    gap: 5px;
  }

  nav a {
    font-size: 0.85rem;
    padding: 10px;
    /* Larger touch target vertical */
  }

  .auth-buttons {
    gap: 10px;
  }

  .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}

/* Additional Styles from about.html and others */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  z-index: 1;
  top: 100%;
  left: 0;
}

.dropdown-content a {
  color: var(--dark);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #f1f1f1;
}

.dropdown-content a:hover {
  background-color: rgba(46, 139, 87, 0.1);
  color: var(--primary);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover>a {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Page Header */
.page-header {
  padding: 4rem 0 2rem;
  background: linear-gradient(rgba(46, 139, 87, 0.9), rgba(46, 139, 87, 0.8)), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
}

.page-header h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 800;
}

.page-header p {
  font-size: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
  opacity: 0.95;
  font-weight: 600;
}

/* About Section */
.about {
  padding: 5rem 0;
  background-color: white;
}

.mission-statement {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border-left: 5px solid var(--accent);
}

.mission-statement h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--primary);
  font-weight: 600;
}

.mission-statement p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--dark);
  font-style: italic;
}

.about-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.about-text {
  flex: 1;
  min-width: 300px;
}

.about-text h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--primary);
  font-weight: 600;
}

.about-text p {
  margin-bottom: 20px;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--dark);
}

.about-image {
  flex: 1;
  min-width: 300px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Values Section */
.values {
  padding: 4rem 0;
  background-color: #f8f9fa;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.value-card {
  background: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  text-align: center;
}

.value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.value-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white;
  font-size: 2rem;
}

.value-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--primary);
  font-weight: 600;
}

.value-card p {
  color: var(--gray);
  line-height: 1.6;
}

/* History Section */
.history {
  padding: 5rem 0;
  background-color: white;
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: var(--accent);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

.timeline-item {
  padding: 10px 40px;
  position: relative;
  width: 50%;
  box-sizing: border-box;
}

.timeline-item:nth-child(even) {
  left: 50%;
}

.timeline-item::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -13px;
  background-color: white;
  border: 4px solid var(--primary);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.timeline-item:nth-child(even)::after {
  left: -13px;
}

.timeline-content {
  padding: 20px 30px;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.timeline-content h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--primary);
  font-weight: 600;
}

.timeline-content p {
  color: var(--gray);
  line-height: 1.6;
}

/* Call to Action */
.cta {
  padding: 4rem 0;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  text-align: center;
}

.cta h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.cta p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 2rem;
  opacity: 0.95;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .page-header h1 {
    font-size: 2.5rem;
  }

  .page-header p {
    font-size: 1.3rem;
  }

  .timeline::after {
    left: 31px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  .timeline-item:nth-child(even) {
    left: 0;
  }

  .timeline-item::after {
    left: 18px;
    right: auto;
  }

  .timeline-item:nth-child(even)::after {
    left: 18px;
  }

  .cta h2 {
    font-size: 1.8rem;
  }

  .cta p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 2rem;
  }

  .page-header p {
    font-size: 1.1rem;
  }

  .about-content {
    flex-direction: column;
  }

  .mission-statement {
    padding: 25px;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* Bylaws Committee Specific */
.committee-detail {
  padding: 4rem 0;
  background: #fff
}

.committee-content {
  max-width: 900px;
  margin: 0 auto
}

.committee-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #f0f0f0
}

.committee-header h2 {
  font-size: 2.2rem;
  color: var(--primary);
  margin-bottom: .5rem
}

.committee-header .subtitle {
  font-weight: 600;
  color: var(--accent)
}

.members-section h3 {
  font-size: 1.6rem;
  color: var(--primary);
  text-align: center;
  margin: 1.5rem 0
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px
}

.member-card {
  background: #f8f9fa;
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease
}

.member-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .08)
}

.member-card h4 {
  color: var(--primary);
  margin-bottom: 6px
}

.role {
  color: var(--accent);
  font-weight: 600
}

.description {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 22px;
  margin-top: 22px
}

.back-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 22px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600
}

.back-link:hover {
  color: var(--primary)
}

/* Committees Page Specific */
.committees-section {
  padding: 5rem 0;
  background-color: white;
}

.committees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.committee-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  border-top: 4px solid var(--accent);
}

.committee-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.committee-header {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  padding: 25px;
  text-align: center;
}

.committee-header h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.committee-header p {
  opacity: 0.9;
  font-size: 1rem;
}

.committee-content {
  padding: 25px;
}

.committee-content h4 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: var(--primary);
  font-weight: 600;
}

.committee-members {
  list-style: none;
  margin-bottom: 20px;
}

.committee-members li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
}

.committee-members li:last-child {
  border-bottom: none;
}

.committee-members i {
  color: var(--accent);
  margin-right: 10px;
  font-size: 0.9rem;
}

.committee-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  margin-top: 15px;
}

.committee-link:hover {
  color: var(--primary);
  gap: 12px;
}

/* Contact Page Specific */
.contact {
  padding: 5rem 0;
  background-color: white;
}

.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.contact-info {
  flex: 1;
  min-width: 300px;
}

.contact-form {
  flex: 1;
  min-width: 300px;
}

.info-card {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.info-card h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-card h3 i {
  color: var(--accent);
}

.contact-details {
  list-style: none;
}

.contact-details li {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.contact-details i {
  color: var(--accent);
  margin-top: 3px;
  min-width: 20px;
}

.contact-details strong {
  display: block;
  margin-bottom: 5px;
  color: var(--dark);
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--dark);
}

.form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  transition: var(--transition);
}

.form-control:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(32, 178, 170, 0.2);
}

textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

.form-row {
  display: flex;
  gap: 20px;
}

.form-row .form-group {
  flex: 1;
}

.faq {
  padding: 4rem 0;
  background-color: #f8f9fa;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: white;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: var(--transition);
}

.faq-item:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.faq-question {
  padding: 20px 25px;
  background: white;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
}

.faq-question:hover {
  background: rgba(46, 139, 87, 0.05);
}

.faq-question i {
  transition: var(--transition);
}

.faq-answer {
  padding: 0 25px;
  max-height: 0;
  overflow: hidden;
  transition: var(--transition);
  color: var(--gray);
  line-height: 1.6;
}

.faq-item.active .faq-answer {
  padding: 0 25px 25px;
  max-height: 500px;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
}

.map {
  padding: 4rem 0;
  background-color: white;
}

.map-container {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  height: 400px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}

.map-placeholder {
  text-align: center;
  color: var(--gray);
}

.map-placeholder i {
  font-size: 3rem;
  color: var(--accent);
  margin-bottom: 15px;
}

/* Events Page Specific */
.events-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}

.tab-button {
  padding: 12px 25px;
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: var(--transition);
  border-bottom: 3px solid transparent;
}

.tab-button.active {
  color: var(--primary);
  border-bottom: 3px solid var(--primary);
}

.tab-button:hover {
  color: var(--primary);
}

.event-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  font-size: 0.9rem;
  color: var(--gray);
}

/* Board & Executive Specific Styles matching Members Grid */
.board-section,
.executive-section {
  padding: 4rem 0;
  background-color: #f8f9fa;
}

.board-grid,
.executive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 2rem;
}

.board-member,
.executive-member {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  /* Soft premium shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.board-member:hover,
.executive-member:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.member-img {
  height: 320px;
  /* Taller specifically for portraits */
  width: 100%;
  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
  /* Placeholder bg */
  position: relative;
  overflow: hidden;
}

.member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Focus on faces */
  display: block;
  transition: transform 0.5s ease;
  /* Protection */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.board-member:hover .member-img img,
.executive-member:hover .member-img img {
  transform: scale(1.03);
  /* Subtle zoom on hover */
}

/* Fallback icon centering */
.member-img i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  color: #cbd5e1;
}

.member-content {
  padding: 25px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: white;
}

.member-content h3 {
  color: var(--primary);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.member-role {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.member-content p {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: auto;
  /* Push to bottom if needed, or just flow */
}

/* Badge/Tag styling to match the screenshot 'Board / Committee' feel if we add them */
.member-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(46, 139, 87, 0.9);
  /* Primary with opacity */
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
}


.event-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  margin-top: 10px;
}

.event-link:hover {
  color: var(--primary);
  gap: 8px;
}

.event-highlight {
  border: 2px solid var(--accent);
  position: relative;
}

.event-highlight.featured::before {
  content: "Featured";
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--accent);
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 1;
}

.paypal-button {
  margin-top: 15px;
  text-align: center;
}

.paypal-button form {
  display: inline-grid;
  justify-items: center;
  align-content: start;
  gap: 0.5rem;
  margin-top: 10px;
}

.paypal-button input[type="submit"] {
  text-align: center;
  border: none;
  border-radius: 0.25rem;
  min-width: 11.625rem;
  padding: 0 2rem;
  height: 2.625rem;
  font-weight: bold;
  background-color: #FFD140;
  color: #000000;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.25rem;
  cursor: pointer;
  transition: var(--transition);
}

.paypal-button input[type="submit"]:hover {
  background-color: #FFC20F;
}

.paypal-button section {
  font-size: 0.75rem;
  color: var(--gray);
}

.paypal-button img[alt="paypal"] {
  height: 0.875rem;
  vertical-align: middle;
}

.info-note {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--gray);
  background: rgba(226, 232, 240, 0.85);
  border-radius: 0.9rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--primary);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Members Page Specific */
.controls {
  padding: 1.2rem 0;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.controls .row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.search {
  flex: 1;
  min-width: 240px;
  display: flex;
  gap: 10px;
}

.search input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.search button {
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}

.badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.badge {
  background: #eef8f6;
  color: var(--primary);
  border: 1px solid #d3efe9;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .92rem;
  cursor: pointer;
}

.badge.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.grid {
  padding: 2rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #ecf0f3;
  transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, .06);
}

.thumb {
  height: 220px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.4rem;
  position: relative;
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb .init {
  user-select: none;
}

.chip {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .8rem;
}

.body {
  padding: 14px 16px;
}

.name {
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2px;
}

/* .role reused from common */
/* .meta reused from common or new? members has .meta {font-size:.92rem;color:var(--gray)} */
.meta {
  font-size: .92rem;
  color: var(--gray);
}

.empty {
  padding: 2rem;
  text-align: center;
  color: var(--gray);
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

/* .backlink reused from common (back-link vs backlink?) members uses .backlink */
.backlink {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 14px;
}

.backlink:hover {
  color: var(--primary);
}

/* Projects Page Specific */
.projects {
  padding: 5rem 0;
  background: #fff;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.projects-section-header {
  grid-column: 1 / -1;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary);
  color: var(--primary);
  font-size: 1.8rem;
}

.projects-section-header:first-of-type {
  margin-top: 0;
}

/* .card reused but might need specific tweaks? No, seems generic card style but let's check for conflicts. 
   Members page also has .card but with different styling?
   Members: .card { background:#fff; border-radius:14px; overflow:hidden; border:1px solid #ecf0f3... }
   Projects: .card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,.06); border-top:4px solid var(--accent); ... }
   Conflict! .card is used in both with different styles. 
   I should namespace the project card or member card. 
   Since member card is already in style.css, I will prefix projects styles or rename class in projects.html.
   I'll rename .card to .project-card in the CSS here and will need to update HTML. 
*/
.project-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .06);
  border-top: 4px solid var(--accent);
  display: flex;
  flex-direction: column;
}

.project-card .card-header {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  padding: 18px 24px;
  min-height: 70px;
  display: flex;
  align-items: center;
}

.project-card .card-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.project-card .card-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

/* .meta conflict? Members: .meta {font-size:.92rem;color:var(--gray)} 
   Projects: .meta {display:flex;gap:12px;align-items:center;font-size:.9rem;color:var(--gray)}
   Conflict! I'll scope .meta to .project-card
*/
.project-card .meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: .9rem;
  color: var(--gray);
}

.project-card .meta i {
  color: var(--accent);
  width: 16px;
  text-align: center;
}

.list {
  padding-left: 1.2rem;
}

.list li {
  margin: 6px 0;
}

/* .badge conflict? Members: .badge {background:#eef8f6...}
   Projects: .badge {display:inline-block;background:#eaf9f7...}
   Slightly different. I'll scope .badge to .project-card or rename to .status-badge
*/
.status-badge {
  display: inline-block;
  background: #eaf9f7;
  color: #138d7e;
  border: 1px solid #bfeae6;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .8rem;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 8px;
}

.status-badge.completed {
  background: #e2f0d9;
  color: #385723;
  border-color: #c5e0b4;
}

.status-badge.completed i {
  margin-right: 4px;
  color: #385723;
}

.muted {
  color: var(--gray);
}

.status-badge.completed i {
  margin-right: 4px;
  color: #385723;
}

/* Registration Page Specific */
.registration {
  padding: 5rem 0;
  background-color: white;
}

.registration-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: flex-start;
}

.registration-form {
  flex: 1;
  min-width: 320px;
}

.registration-info {
  flex: 1;
  min-width: 320px;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

fieldset {
  border: 1px solid #ddd;
  padding: 25px;
  border-radius: 8px;
  margin-bottom: 25px;
}

legend {
  padding: 0 10px;
  font-weight: 600;
  color: var(--primary);
  font-size: 1.2rem;
  margin-left: 5px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--dark);
}

.form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  transition: var(--transition);
}

.form-control:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(32, 178, 170, 0.2);
}

.form-row {
  display: flex;
  gap: 20px;
}

.form-row .form-group {
  flex: 1;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 25px;
}

.checkbox-group input {
  margin-top: 5px;
}

.checkbox-group label {
  font-size: 0.9rem;
  line-height: 1.4;
}

.checkbox-group a {
  color: var(--accent);
  text-decoration: none;
}

.checkbox-group a:hover {
  text-decoration: underline;
}

.error-message {
  color: var(--danger);
  font-size: 0.85rem;
  display: none;
  margin-top: 5px;
}

#form-message {
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  display: none;
}

#form-message.success {
  background-color: #d4edda;
  color: #155724;
  display: block;
}

.registration-info h3 {
  color: var(--primary);
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.benefits-list {
  list-style: none;
}

.benefits-list li {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.benefits-list i {
  color: var(--accent);
  margin-top: 4px;
  font-size: 1.1rem;
}

.benefits-list p {
  font-size: 0.95rem;
  color: var(--gray);
}

.registration-note {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid var(--accent);
  margin-top: 30px;
}

.registration-note h4 {
  color: var(--primary);
  margin-bottom: 10px;
}

@media (max-width: 900px) {

  /* .header-content ... handled by common media queries? Check conflicts. Registration handled it explicitly. */
  .form-row {
    flex-direction: column;
    gap: 0;
  }
}

@media (max-width: 480px) {
  .registration-container {
    flex-direction: column;
  }
}

/* Utility for JS filtering performance */
.hidden {
  display: none !important;
}

/* Gallery Section Styles */
.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.gallery-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  background: #fff;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.filter-label {
  color: #888;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

.filter-btn {
  padding: 0.8rem 1.5rem;
  border: none;
  background: #f0f2f5;
  color: #555;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.filter-btn:hover {
  background: #e4e6ea;
  transform: translateY(-2px);
}

.filter-btn.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 5px 15px rgba(46, 139, 87, 0.3);
}

.filter-divider {
  width: 60%;
  height: 1px;
  background: #eee;
  margin: 0.5rem auto;
}

/* Dynamic Grid */
.dynamic-gallery-grid {
  column-count: 3;
  column-gap: 1.5rem;
  display: block;
}

.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  /* Removed aspect-ratio: 1 to allow natural height */
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  break-inside: avoid;
  margin-bottom: 1.5rem;
  display: inline-block;
  width: 100%;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

.member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  /* Protection against copying/dragging */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  /* Disables click/hover/context-menu on the image itself */
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 2rem 1.5rem 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
  transform: translateY(0);
}

.gallery-overlay h4 {
  color: white;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.gallery-overlay p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(5px);
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85vh;
  border-radius: 4px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

.lightbox-caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 20px 0;
  height: 150px;
}

.lightbox-close {
  position: absolute;
  top: 25px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 10000;
}

.lightbox-close:hover,
.lightbox-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .gallery-controls {
    padding: 1.5rem 1rem;
  }

  .filter-group {
    gap: 0.5rem;
  }

  .filter-btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .dynamic-gallery-grid {
    column-count: 2;
    column-gap: 1rem;
  }
}

@media (max-width: 480px) {
  .dynamic-gallery-grid {
    column-count: 1;
  }
}

/* Specific override for JS Toggling */
.hidden {
  display: none !important;
}

/* Back Button Style */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  background: #f0f2f5;
  color: var(--dark);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}

.back-btn:hover {
  background: var(--primary);
  color: white;
  transform: translateX(-5px);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}