/* General Styles */
.top-menu {
  list-style-type: none;
  margin: 0;
  padding: 10px 15px;
  display: flex;
  background-color: white; /* Natural white background */
}

.menu-item {
  position: relative;
}

.menu-item > .main-link {
  padding: 10px 20px;
  display: block;
  color: #5E6266; /* gray text */
  text-decoration: none;
  font-size: 17px; /* Font size for the top menu links */
}

/* Submenu Hidden by Default */
.submenu {
  list-style-type: none;
  position: absolute;
  top: 100%;
  left: 0;
  display: none; /* Hidden initially */
  background-color: white; /* Natural white background */
  border: 1px solid #ddd; /* Soft border */
  border-radius: 8px; /* Rounded corners */
  padding: 10px;
  margin: 0;
  white-space: nowrap; /* Prevent wrapping */
  /* flex-wrap: nowrap; Ensure horizontal layout */
  margin-bottom: 40px;
  z-index: 1000;
}

/* Horizontal Layout for Submenu Items */
/* .submenu li { */
  /* display: inline-block; Horizontal layout for each submenu item */
  /* margin-right: 10px; Add spacing between submenu links */
/* } */

.submenu li a {
  color: #5E6266; /* gray text */
  text-decoration: none;
  padding: 5px 10px;
  font-size: 15px;
}

/* Show the Submenu on Parent Menu Click */
.menu-item.active .submenu {
  /* display: flex; Display submenu horizontally when active */
  display: block; /* Show submenu on active parent menu */
}

.menu-item > .main-link:hover {
  background-color: #fff; /* Navy blue for hover */
  color: #004080; /* White text */
}

.menu-item.active > .main-link {
  color: #004080;; /* White text when active */
  background-color: #fff; /* Navy blue background for active items */
}

.submenu {
  border-top: 1px solid #ddd; /* Light gray border */
}

.menu-item {
  position: relative;
}

.menu-item a {
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  color: #000;
  font-weight: bold;
}

.menu-item a:hover {
  background-color: #e9ecef;
  border-radius: 4px;
}