/* body{
  background-color: #1b1b1b;
} */
#navigation-container {
    width: 4%;
    transition: width 0.3s ease-in-out;
    overflow: hidden; /* Hide overflowing content during transition */
  }
  
  #navigation-container:hover {
    width: 15%;
  }
  
  /* Initially hide nav-item-name */
  .nav-icon {
    width: 26px;
    height: 26px;
    transition: all 0.3s ease-in-out;
  }
  
  .nav-item-name {
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease-in-out;
    white-space: nowrap;
  }
  
  #navigation-container:hover .nav-item-name {
    opacity: 1;
    display: inline;
  }
  
  .search-input {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out; /* Add opacity transition */
  }
  
  #navigation-container:hover .search-input {
    display: block;
    opacity: 1;
  }
  
  #navigation-container:hover .search-icon {
    display: none;
    transition: opacity 0.2s ease-in-out; /* Add opacity transition */
  }

  /* Fix for login/register buttons */
  .auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .auth-buttons .nav-item-name {
    margin-left: 1rem;
  }

@media (max-width: 1023px) {
  .nav-item-name {
    display: block !important;
    opacity: 1 !important;
  }
}

/* Dropdown styles */
.auth-buttons .relative {
  width: 100%;
}

#navigation-container:hover .auth-buttons .relative {
  width: 100%;
}

.auth-buttons .absolute {
  min-width: 150px;
  z-index: 50;
}

/* Ensure dropdown is visible when nav is expanded */
#navigation-container:hover .auth-buttons .absolute {
  left: 0;
  width: 100%;
}