/* RESET */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Arial, sans-serif;
      }

      /* Chrome, Edge, Safari */
      body::-webkit-scrollbar {
        width: 0px;
        background: transparent;
      }

      /* Firefox */
      html {
        scrollbar-width: none;
      }

      /* Internet Explorer / old Edge */
      body {
        -ms-overflow-style: none;
      }

      /* SPLASH SCREEN */
      #splash {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        animation:
          disapear 0.25s ease forwards 0.75s;
      }

      #logo {
        font-size: 48px;
        font-weight: bold;
        animation: breathe 0.5s ease-in-out;
      }
      

      @keyframes disapear {
        to {
          top:-100%;
        }
      }

      @keyframes breathe {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.15);
        }
        100% {
          transform: scale(1);
        }
      }

      /* HERO / SLIDESHOW */
      #hero {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }

      .slides {
        display: flex;
        width: 300%;
        height: 100%;
        transition: transform 0.8s ease;
      }

      .slide {
        position: relative;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
      }

      /* DARK TINT */
      .slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
      }

      /* TEXT */
      .hero-text {
        position: absolute;
        z-index: 2;
        color: white;
        font-size: 48px;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /* NAV BUTTONS */
      .nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        font-size: 32px;
        padding: 10px 18px;
        cursor: pointer;
      }

      #prev {
        left: 20px;
      }
      #next {
        right: 20px;
      }

      .nav-btn:hover {
        background: rgba(0, 0, 0, 0.8);
      }
      .navbar {
        position: sticky;
        top: 0;
        width: 100%;
        height: 70px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        z-index: 100;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      }

      /* LEFT */
      .logo {
        height: 40px;
      }

      /* CENTER */
      .nav-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      .nav-link {
        text-decoration: none;
        color: black;
        font-weight: 500;
        font-size: 18px;
      }

      /* RIGHT */
      .nav-right {
        position: relative;
      }

      .menu-btn {
        background: none;
        border: none;
        font-size: 28px;
        cursor: pointer;
      }

      /* DROPDOWN */
      .dropdown {
        position: absolute;
        right: 0;
        top: 60px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        display: none;
        flex-direction: column;
        min-width: 160px;
        overflow: hidden;
      }

      .dropdown a {
        padding: 12px 16px;
        text-decoration: none;
        color: black;
        white-space: nowrap;
      }

      .dropdown a:hover {
        background: #f2f2f2;
      }

      /* MOBILE */
      @media (max-width: 768px) {
        .nav-center {
          display: none;
        }
      }
      .intro {
        padding: 100px 20px;
        background: #f8f8f8;
        display: flex;
        justify-content: center;
      }

      .intro-content {
        max-width: 800px;
        text-align: center;
      }

      .intro h2 {
        font-size: 40px;
        margin-bottom: 20px;
      }

      .intro p {
        font-size: 18px;
        line-height: 1.7;
        color: #333;
        margin-bottom: 16px;
      }
      .leaders {
        padding: 100px 20px;
        background: white;
        text-align: center;
      }

      .leaders h2 {
        font-size: 40px;
        margin-bottom: 50px;
      }

      .leader-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 30px;
        max-width: 1000px;
        margin: 0 auto;
      }

      .leader-card {
        background: #f4f4f4;
        border-radius: 16px;
        padding: 30px 20px;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;
      }

      .leader-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      }

      .leader-card img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 15px;
      }

      .leader-card h3 {
        font-size: 20px;
        margin-bottom: 6px;
      }

      .leader-card span {
        color: #666;
        font-size: 16px;
      }
    .site-footer {
  background: #f3f7f5;
  border-top: 1px solid #dbe7e2;
  padding: 40px 60px;
  color: #333;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 40px;
}

.footer-logo {
  height: 50px;
}

.footer-top h2 {
  font-weight: 500;
  letter-spacing: 0.5px;
}

.footer-main {
  display: flex;
  margin-bottom: 25px;
}

.footer-left {
  width: 25%;
  margin-right:5%;
  font-size: 0.9rem;
  color: #555;
}

.footer-right {
  width: 70%;
}

.footer-right h1 {
  font-size: 1.6rem;
  font-weight: 500;
}

.footer-motto {
  text-align: center;
  font-style: italic;
  margin: 30px 0;
  color: #666;
}

.footer-bottom {
  text-align: center;
  font-size: 0.85rem;
  color: #777;
}