.nav-demo {
  display: flex;
  gap: 0;
  background: #f8f9fa;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.nav-item {
  padding: 0.75rem 1rem;
  color: #6c757d;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: all 0.3s ease;
  position: relative;
  font-weight: 500;
}
.nav-item:hover {
  background: rgba(108, 117, 125, 0.1);
  color: #495057;
}
.nav-item.active {
  color: #007bff;
  background: rgba(0, 123, 255, 0.1);
}
.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.nav-item:hover::after,
.nav-item.active::after {
  width: 80%;
}