body {
      font-family: 'Poppins', sans-serif;
    }
      .navbar {
      transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
      background: transparent !important;
      position: absolute;
      width: 100%;
      z-index: 10;
       padding: 1.5rem 0;
    }
    .navbar-brand {
  position: relative;
}

.logo {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: opacity 0.3s ease;
 
}

.logo-top {
  opacity: 1;
}

.logo-scroll {
  opacity: 0;
}

.navbar.scrolled .logo-top {
  opacity: 0;
}

.navbar.scrolled .logo-scroll {
  opacity: 1;
}
/* Navbar */
.navbar {
  position: fixed;
  width: 100%;
  z-index: 1000; /* High z-index so toggler is clickable */
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
  background: transparent;
}

/* Logo container */
.navbar-brand {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 10; /* Make sure logos are above navbar background but below toggler */
}

/* Logos stacked */
.logo {
  max-height: 80px;
  width: auto;
  transition: opacity 0.4s ease;
  pointer-events: none; /* Allow clicks to pass through */
}

/* Opacity swap on scroll */
.logo-top { opacity: 1; }
.logo-scroll { opacity: 0; }

.navbar.scrolled .logo-top { opacity: 0; }
.navbar.scrolled .logo-scroll { opacity: 1; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .logo { max-height: 50px; }
}

    .navbar.scrolled {
      position: fixed;
      background: #fff !important;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .navbar .nav-link { color: white; transition: color 0.3s; }
    .navbar.scrolled .nav-link { color: black !important; }
    .navbar-brand img { height: 80px; }
    .navbar-toggler-icon { filter: invert(1); }
    .navbar.scrolled .navbar-toggler-icon { filter: invert(0); }
 
    /* Navbar */
       /* Navbar */
    
    .dropdown-menu {
      border-radius: 0.5rem;
      border: none;
      box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    }
    .dropdown-item:hover {
      background-color: #2EC2DF;
      color: white;
    }
    .navbar .dropdown-item:hover {
      background-color: #2EC2DF;
      color: #fff;
    }
    .navbar.scrolled {
      background: white !important;
      box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    }
    .navbar.scrolled .nav-link {
      color: #333 !important;
    }
    .navbar-brand img {
      height: 50px;
    }

    /* Hero Section (No BG image, just box) */
 .hero {
      height: 50vh;
      background: url(whoweare.jpg) center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      position: relative;
 }
 .hero h1 {
      color: #fee904;
      padding: 20px 40px; border-radius: 12px;
      font-weight: 800; text-transform: uppercase;
      margin-top: 60px;
    }
.hero-box {
  background: rgba(0,0,0,0.7); /* dark overlay box */
  color: white;
  padding: 20px 40px;
  border-radius: 12px;
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
}


    /* Leadership Cards */
    .leader-img {
      width: 150px;
      height: 150px;
      object-fit: cover;
      margin: 0 auto;
    }
    .about-card {
      border: none;
      transition: transform 0.3s;
    }
    .about-card:hover {
      transform: translateY(-5px);
    }
    .about-card h5 {
      font-weight: 600;
      margin-top: 10px;
    }

    /* Section Separator */
    .section-separator {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 50px 0;
      position: relative;
    }
    .section-separator span {
      background: #2EC2DF;
      color: white;
      padding: 8px 20px;
      font-weight: 600;
      border-radius: 30px;
      z-index: 1;
    }
    .section-separator::before,
    .section-separator::after {
      content: "";
      flex: 1;
      border-bottom: 2px solid #2EC2DF;
      margin: 0 10px;
    }

/* Chairman image larger */
.leader-img.chairman {
  max-width: 250px;
  transition: transform 0.5s ease;
}

/* Zoom-out hover for other members */
.zoom-img {
  max-width: 150px;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}

.zoom-img:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Center chairman row */
#board .row.justify-content-center {
  text-align: center;
}
.leader-img.ceo {
  max-width: 220px;
  transition: transform 0.5s ease;
}

/* Other members zoom-in animation */
.zoom-img {
  max-width: 150px;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}

.zoom-img:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Scroll-triggered fade-in animation */
.fade-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
          @keyframes fadeZoomIn {
      to { opacity: 1; transform: rotate(0deg) scale(1); }
    }
/* Dropdown menu styling */
    .dropdown-menu a { color: black; 
   
    }
    .dropdown-menu a:hover { background-color: #f8f9fa; }
       /* Dropdown hover animation */
    .dropdown-menu {
      display: none;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.3s ease;
      border-radius: 10px;
    }
    .nav-item:hover .dropdown-menu {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }


.fade-in.show {
  opacity: 1;
  transform: scale(1);
}
/* Minimal outline-style buttons */
.leadership-btn {
  background: transparent;
  color: #111;
  border: 1px solid #2EC2DF;
  border-radius: 10px;
  padding: 1px 10px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.leadership-btn:hover {
  background: #2EC2DF;
  color: #fff;
  transform: translateY(-2px);
}

     /* Footer */
    footer {
      background: #44B64A;
      color: white;
      text-align: center;
      padding: 25px;
      margin-top: 60px;
    }
    /* Smooth Expand/Collapse Animation */
.collapsible-section {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: all 0.6s ease-in-out;
}

.collapsible-section.show {
  max-height: 5000px; /* big enough for all content */
  opacity: 1;
}
/* Animation for sections */
.collapsible-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  overflow: hidden;
  max-height: 0;
}

.collapsible-section.show {
  opacity: 1;
  transform: translateY(0);
  max-height: 5000px; /* enough to show full content */
}