.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
}

/* Adjust font size of logo for smaller screens */
@media (max-width: 767px) {
  #nav-logo {
    font-size: 1.5rem; /* Adjust the font size as needed */
  }
}

#nav-gen-back {
  background-color: white; /* Default color */
  transition: background-color 0.3s ease; /* 0.5 seconds transition with easing */
}

.nav-link {
  padding: 0.2rem 0.5rem;
  color: #000;
  font-size: 1.2rem;
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
  color: grey !important;
}

.navbar-nav {
  display: flex;  /* Ensure flexbox is used */
  flex-direction: row;  /* Align elements horizontally */
  gap: 1rem;  /* Set the spacing between elements */
}

.nav-item {
  position: relative;
  display: inline-block; /* Make sure each item behaves like inline block */
  width: auto; /* Limit the width to its content */
  color: grey !important;

}

.nav-item.hover-effect::before { 
  content: '';
  position: absolute;
  width: 100%; /* This ensures that the underline stays within the nav item */
  height: 2px;
  border-radius: 4px;
  background-color: #18272F;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.nav-item {
  flex-direction: row; /* Ensure items are aligned horizontally */
  justify-content: space-around; /* Space items evenly */

  text-align: left; /* Align text within nav items */
  width: auto; /* Ensure the width is auto */
}


.nav-item.hover-effect:hover::before { 
  transform-origin: left;
  transform: scaleX(1);
}