/* --- Dropdown Menu Styles (Slightly adjusted for the new structure) --- */
.dropdown { position: relative; display: block; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 100; }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.dropdown-content a:hover { background-color: #ddd; }
.dropdown:hover .dropdown-content { display: block; }
/* The main link inside a dropdown needs styling too */
.dropdown .dropbtn {
  display: block;
  width: 100%;
  height: 100%;
}


/* --- Centered Main Navigation Bar Styles --- */

/* The <nav> element we created */
.menu-container {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  padding: 0.25rem 0; /* A little vertical padding */
}

/* The main <ul> list */
.menu {
  display: flex;
  justify-content: center; /* This is what centers the items */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each menu item's link (<li><a>) */
.menu-item a {
  display: block;
  padding: 0.75rem 1.5rem; /* Nice, clickable area */
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: background-color 0.2s ease-in-out;
}

/* Hover effect for all menu links */
.menu-item a:hover {
  background-color: #f5f5f5;
  color: #000;
}