/* General styles for the navigation bar */
.desktop-nav {
  background-color: #f7f7f7; /* Light background for the navbar */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  z-index: 9999;
}

.navigation {
  max-width: 1200px; /* Maximum width for better content alignment */
  margin: 0 auto; /* Center-aligns the navbar */
  padding: 15px 0; /* Adds padding around the navigation */
  display: flex;
  justify-content: center; /* Centers the nav items horizontally */
  align-items: center; /* Aligns items vertically */
}

.navigation ul {
  list-style: none; /* Removes default list styling */
  margin: 0;
  padding: 0;
  display: flex; /* Flexbox layout for horizontal navigation */
  gap: 30px; /* Adds spacing between links */
}

.navigation ul li {
  position: relative; /* For positioning hover effects */
}

.navigation ul li a {
  text-decoration: none; /* Removes the underline from links */
  font-size: 16px; /* Slightly larger font size */
  font-weight: bold; /* Bold font for emphasis */
  color: #333; /* Default text color */
  padding: 10px 20px; /* Padding to create clickable areas */
  border-radius: 5px; /* Rounded corners for smooth edges */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  display: inline-block;
}

.navigation ul li a:hover {
  color: white; /* White text color on hover */
  transform: translateY(-3px); /* Slight upward movement on hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
}

.navigation ul li a:active {
  transform: translateY(1px); /* Simulates button press on click */
}

.navigation ul li a::after {
  content: ""; /* Adds a bottom border on hover */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #f1c40f; /* Gold color */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.navigation ul li a:hover::after {
  opacity: 1; /* Shows the bottom border when hovered */
}


@media (max-width: 768px) {
  .navigation ul {
      flex-direction: column; /* Stack items vertically */
      gap: 10px; /* Smaller gap for vertical items */
  }

  .navigation ul li a {
      padding: 10px; /* Reduce padding on smaller screens */
  }
}