.navbar { 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position:fixed;
    overflow-x: hidden;
}

.nav-link {
  position: relative;
  overflow: hidden;
  z-index: 0;
  font-weight: 500;
}

.nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.375rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.nav-item:nth-child(1) .nav-link::before { background: var(--gradient-yellow); }
.nav-item:nth-child(2) .nav-link::before { background: var(--gradient-purple); }
.nav-item:nth-child(3) .nav-link::before { background: var(--gradient-blue); }
.nav-item:nth-child(4) .nav-link::before { background: var(--gradient-green); }

.nav-link:hover::before { 
    /* transform: scaleX(1);  */
    opacity: 1;
}