.nav-div-underline-gradient {
  position: sticky;
  top: 0;
  width: 100%;
  transition: top 0.3s ease; /* smooth transition */
  z-index: 999; /* ensure it stays on top */
}

.custom-navbar-wrapper {
  position: sticky;
  display: flex;
  justify-content: center;
  z-index: 999;
}

.custom-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(10px);
  padding: 0px 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  max-width: 100%;
  width: 100%;
  color: #000;
  background: linear-gradient(90deg, rgba(255, 128, 128, 1), rgba(255, 132, 169, 1), rgba(241, 145, 206, 1), rgba(216, 161, 235, 1), rgba(182, 178, 254, 1), rgba(147, 193, 255, 1), rgba(120, 205, 255, 1), rgba(112, 214, 245, 1));
}

.nav-div-underline-gradient::after {
  content: "";
  background: linear-gradient(90deg, rgba(255, 54, 54, 1), rgba(255, 50, 118, 1), rgba(253, 79, 175, 1), rgba(221, 114, 223, 1), rgba(174, 144, 253, 1), rgba(117, 167, 255, 1), rgba(59, 185, 255, 1), rgba(39, 197, 245, 1));
  height: 3px;
  display: flex;
}

.nav-left {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: auto;
  margin-top: 2px;
}

.nav-item {
  position: relative;
}

.nav-item:hover .nav-bar-dropdown {
  display: flex;
}

.nav-bar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 30px);
  left: -125px;
  background: white;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
  flex-direction: column;
  animation: NavdropdownFade 0.35s ease;
  min-width: 400px;
  padding: 10px;
  border: 1px solid #e1e1e1;
}

.nav-item.nav-item-submenu-present:hover::after {
  content: "";
  z-index: 3;
  top: 120%;
  left: -85.4%;
  position: absolute;
  width: 420px;
  height: 30px;
  opacity: 0;
  position: absolute;
}

.nav-item:hover::after .nav-bar-dropdown {
  display: flex;
}

@keyframes NavdropdownFade {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.nav-bar-dropdown-description {
  font-weight: 400;
  color: #222;
}

.nav-item a {
  display: ruby;
  text-shadow: 0 1px 3px rgb(0 0 0 / 40%), 0 8px 13px rgb(0 0 0 / 10%), 0 18px 23px rgb(0 0 0 / 10%);
  font-weight: 600;
  color: #fff;
  border-radius: 15px;
  padding: 8px 12px;
  transition: background-color 0.2s ease-in-out;
}

.nav-bar-dropdown a {
  display: flex;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  gap: 10px;
  color: #222;
  background-color: rgba(255, 255, 255, 1);
  text-shadow: none;
  transition: background-color 0.3s ease-in-out;
}

.nav-bar-dropdown a:hover {
  background-color: rgb(248, 245, 255);
  border-radius: 6px;
  transition: background-color 0.1s ease-in-out;
}

.nav-bar-dropdown-title {
  color: #1eaedb;
}

.nav-bar-dropdown img {
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e1e1e1;
}

.nav-bar-search input {
  border: 1px solid rgba(255, 255, 255, 0.81);
  padding: 8px 12px;
  height: 34px;
  width: 140px;
  border-radius: 20px;
  outline: none;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.3s ease-in-out;
  transform: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  moz-box-shadow: none;
  margin-left: 8px;
  color: rgba(255, 255, 255);
}

.nav-bar-search input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

.nav-bar-search input:hover::placeholder {
  color: rgba(255, 255, 255, 1);
}

.nav-bar-search input:hover, .nav-bar-search input:focus {
  transform: none;
  background-color: rgb(255, 255, 255, 0.1);
  transition: background-color 0.3s ease-in-out;
  -webkit-box-shadow: none;
  box-shadow: none;
  moz-box-shadow: none;
  color: rgba(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.81);
}

.nav-item:hover > a {
  background-color: rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease-in-out;
}

.nav-bar-dropdown {
  background: rgba(255, 255, 255, 1);
}

.nav-toggle {
  display: none;
  font-size: 24px;
  color: inherit;
  cursor: pointer;
  padding: 10px;
}

.nav-bar-title-batched-lookup { color: #00ec07; }
.nav-bar-title-single-lookup { color: #b159d9; }

.nav-bar-title-plugins { color: #1eaedb; }
.nav-bar-title-code-examples { color: #b25dff; }
.nav-bar-title-api-documentation { color: #32f038; }

.nav-bar-title-status-page { color: #4ad912; }
.nav-bar-title-contact-us-page { color: #2acdff; }

.nav-bar-mobile {
  display: none;
}

@media (max-width: 1000px) { .nav-left { gap: 10px; } .nav-bar-search input { width: 139px; } }
@media (max-width: 995px) { .nav-left { gap: 9px; } .nav-bar-search input { width: 138px; } }
@media (max-width: 990px) { .nav-left { gap: 8px; } .nav-bar-search input { width: 137px; } }
@media (max-width: 985px) { .nav-left { gap: 7px; } .nav-bar-search input { width: 136px; } }
@media (max-width: 980px) { .nav-left { gap: 5px; } .nav-bar-search input { width: 135px; } }
@media (max-width: 975px) { .nav-left { gap: 4px; } .nav-bar-search input { width: 134px; } }
@media (max-width: 970px) { .nav-left { gap: 3px; } .nav-bar-search input { width: 132px; } }
@media (max-width: 965px) { .nav-left { gap: 2px; } .nav-bar-search input { width: 131px; } }
@media (max-width: 960px) { .nav-left { gap: 1px; } .nav-bar-search input { width: 130px; } }
@media (max-width: 955px) { .nav-left { gap: 0px; } .nav-bar-search input { width: 129px; } }

@media (max-width: 900px) {
  
  .nav-bar-desktop {
    display: none;
  }
  
  .nav-bar-mobile {
    display: block;
  }

  .nav-bar-dropdown {
    min-width: 200px;
    left: -70px;
  }

  .nav-left {
    gap: 5px;
  }
  
  .nav-bar-search {
    opacity: 0;
    width: 0px;
  }

}