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

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

.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;
}


.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;
}

 /* //start// */
.search-container{
  padding-top: 5rem;
    padding-bottom: 5rem; ;
}


.section-title {
      font-weight: 600;
      font-size: 24px;
      text-align: center;
      margin-bottom: 20px;
    }

    .search-box {
      max-width: 600px;
      margin: 0 auto 0px;
      padding: 10px 15px;
      border-radius: 15px;
      border: 1px solid #f8fafc;
      background-color: #ffffffcc;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
       border-radius: 10px;
    }

    .search-box input {
      border: none;
      outline: none;
      width: 100%;
      font-size: 16px;
    }
    .search-box:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
  background-color: #f8f9fa; /* subtle light hover color */
}

    .app-card {
      border-radius: 15px;
      border: 1px solid #f8fafc;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      background-color: #ffffffcc;
      padding: 20px;
      margin-bottom: 20px;
    }

    .app-title {
      font-family: "Instrument Sans", Helvetica, sans-serif;
      font-weight: 500;
      font-size: 24px;
      color: #545454;
    }

    .app-category {
      font-family: "Inria Sans", Helvetica, sans-serif;
      font-size: 20px;
      color: #545454;
      margin-top: 5px;
      white-space: nowrap;
    }

    .app-description {
      font-family: "Inria Sans", Helvetica, sans-serif;
      font-size: 15px;
      color: #545454;
      margin-top: 10px;
    }



.app-card {
  border-radius: 20px; /* All-round corners */
  border: 1px solid #f8fafc;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  background-color: #ffffffcc;
  min-height: 120px;
}

.rectangle-19 {
  width: 93px;
  height: 87px;
  border-radius: 15px;
  background: linear-gradient(
    180deg,
    rgba(164, 189, 225, 1) 0%,
    rgba(76, 139, 233, 1) 100%
  );
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
}

.text-wrapper-25 {
  font-family: "Itim", Helvetica, sans-serif;
  font-size: 64px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1;
}
.btn-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px; /* ensures buttons are similar size */
  height: 36px;
  border-radius: 15px;
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: 0 0 5px rgba(0,0,0,0.49);
  font-family: "Sora", Helvetica, sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: #000;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  padding: 10px;
}

.btn-frame:hover {
  background-color: #4c8be9;
  color: #fff;
  border-color: #4c8be9;
}
.divider-line {
  width: 100%;       /* set the width you want */
  border: 2px solid #000000; /* solid black */
  margin-left: 0;     /* left-align */
  margin-right: auto; /* ensures it stays on the left */
}
.results-title {
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 10px;
  text-align: left; /* left-aligned */
}
legend.h6 {
  font-weight: 600 !important;
}
fieldset.mb-3 legend {
  font-weight: 600 !important; /* keep it bold */
  margin-bottom: 18px; /* adds space below legend */
  display: block; /* ensures margin works properly */
}
.form-check-input:hover {
  border-color: #4c8be9; /* blue border on hover */
}

.form-check-input:focus {
  box-shadow: 0 0 3px rgba(76, 139, 233, 0.5);
  border-color: #4c8be9;
}
.form-check-input {
  border: .5px solid #8b8b8b !important; /* solid black border */
}











    /* 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;
}