body {
  font-family: "Inria Sans", Helvetica;
  color: #222;
  background-color: #fff;
}

h1, h2, h3, h4, h5 {
  font-family: "Inria Sans", Helvetica;
  font-weight: 700;
}

/* Navbar */
.navbar {
  background-color: #000 !important;
}

/* Brand */
.navbar-brand {
  color: #fff !important;
  font-weight: 700;
  font-size: 1.25rem;
}

/* Nav Wrapper */
.navbar-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* your original gap */
  border-radius: 20px;
  border: 1px solid #ffffff;
  padding: 2px 15px; /* your original padding */
  background-color: transparent;
}

/* Nav Item — make each one occupy equal height and handle full hover area */
.nav-item {
  padding: 2px 15px;
  border-radius: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover/Active: fill full area with color (no flicker) */
.nav-item:hover,
.nav-item:focus-within {
  background-color: #ffffff;
}

/* Nav Link */
.navbar .nav-link {
  color: #fff !important;
  font-weight: 500;
  border-radius: 20px;
  padding: 8px 20px; /* consistent */
  display: block;
  width: 100%;
  text-align: center;
  transition: color 0.3s ease;
}

/* Change text color on hover via parent */
.nav-item:hover .nav-link,
.nav-item:focus-within .nav-link {
  color: #000000 !important;
}

/* Active Page State */
.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:active {
  /* background-color: #00a5ff !important;
  color: #fff !important; */
}
.landing-page {
  padding: 50px ;
  position: relative;
  overflow: hidden;
}

.ellipse {
  width: 1500px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(
    50% 50% at 55% 50%,
    rgba(0, 111, 255, 0.5) 0%,
    rgba(145, 0, 153, 0) 100%
  );
  position: absolute;
  top: -300px;
  left: -400px;
  z-index: 0;
}

.text-wrapper-2 {
  font-family: "Sora", sans-serif;
  font-weight: 400;
  color: #00a5ff;
  font-size: 24px;
  position: relative;
  z-index: 1;
}

.where-science-meet {
  font-family: "Sora", sans-serif;
  font-weight: 400;
  font-size: 42px;
  color: transparent;
  position: relative;
  z-index: 1;
}

.text-wrapper-10 {
  color: #ffffff;
}

.text-wrapper-11 {
  color: #008cff;
  font-weight: 700;
}

.text-wrapper-12 {
  font-family: "Sora", sans-serif;
  font-weight: 300;
  color: #ffffff;
  font-size: 21px;
  position: relative;
  z-index: 1;
}

.text-wrapper-13 {
  font-family: "Sora", sans-serif;
  font-weight: 300;
  color: #ffffff;
  font-size: 21px;
  position: relative;
  z-index: 1;
}

.open-repository {
  border: 1px solid #ffffff4c;
  border-radius: 90px;
  padding: 6px 18px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.open-repository:hover {
  background-color: #00a5ff;
}

.open-repository-2 {
  font-family: "Inria Sans", sans-serif;
  font-weight: 400;
  color: #fff9f9;
  font-size: 20px;
  white-space: nowrap;
}
 /* //UPCOMING EVENTS// */

.line {
        width: 60px;
        height: 3px;
        background-color: #00a5ff;
        display: block;
        margin-bottom: 10px;
      }
.events-container {
        padding-top: 5rem;   /* ~80px */
        padding-bottom: 5rem;
      }
      .upcoming-events {
        font-size: 42px;
        font-weight: 400;
      }
      .upcoming-events .span {
        font-weight: 600;
        color: #000;
      }
      .upcoming-events .text-wrapper-4 {
        color: #00a5ff;
      }

      .rectangle-3 {
        background-color: #ffffffcc;
        border-radius: 15px;
        border: 15px solid #f8fafc;
        box-shadow: 0px 4px 6px #0000001a;
        overflow: hidden;
        transition: transform 0.3s ease;
      }

      .rectangle-3:hover {
        transform: translateY(-5px);
      }

      .p {
        font-size: 20px;
        font-weight: 400;
        color: #000;
      }

      .element-september,
      .text-wrapper-6 {
        color: #4c4c4c;
        font-size: 14px;
      }

      .depression-wrapper {
        background-color: #5097df;
        color: #fff;
        border-radius: 6px;
        padding: 8px 20px;
        display: inline-block;
        text-align: center;
        font-weight: 600;
        transition: 0.3s;
        text-decoration: none;
      }

      .depression-wrapper:hover {
        background-color: #007bff;
        text-decoration: none;
      }

 /* //HIGHLIGHTS// */

      /* Landing section with subtle gradient */
    .landing-page-2 {
      background: linear-gradient(0deg, rgba(0, 53, 123, 100) 0%, rgba(0, 0, 0, 1) 30%);
      padding: 60px 0;
    }

    /* Heading styles */
    .highlights-from-past {
      font-family: "Sora", Helvetica, sans-serif;
      font-size: 42px;
      font-weight: 400;
      line-height: normal;
      color: transparent;
      margin-bottom: 40px;
    }
    .text-wrapper-5 { font-weight: 600; color: #ffffff; }
    .text-wrapper-4 { color: #00a5ff; }

    /* Continuous scroll container */
    .component-wrapper {
      overflow: hidden;
      position: relative;
    }

    .component {
      display: flex;
      width: max-content;
      animation: scroll-left 20s linear infinite;
    }

    /* Event cards (responsive) */
    .event-card {
      width: 220px;
      height: 258px;
      background-size: cover;
      background-position: center;
      margin-right: 20px;
      flex-shrink: 0;
    }

    /* Make event cards smaller on mobile */
    @media (max-width: 768px) {
      .event-card {
        width: 150px;
        height: 180px;
        margin-right: 15px;
      }
      .highlights-from-past {
        font-size: 28px;
      }
    }

    @media (max-width: 480px) {
      .event-card {
        width: 120px;
        height: 150px;
        margin-right: 10px;
      }
      .highlights-from-past {
        font-size: 22px;
      }
    }

    /* Continuous scroll animation */
    @keyframes scroll-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }


    /* Footer */
.footer {
  background: #000;
}

.footer .icon-wrapper {
  width: 50px;
  height: 50px;
  background-color: #000;
  border-radius: 10px;
}

.footer a:hover {
  text-decoration: underline;
}

.footer p,
.footer li {
  color: #ffffffcc;
}