/* Dropdown Menu Styling */
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #eceef3;
  border-radius: 5px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 10px 0;
  margin: 0;
  min-width: 200px;
  z-index: 50;
}

/* Submenu Items */
.sub-menu li {
  position: relative; /* Necessary for nested submenus */
}
.sub-menu li a {
  padding: 10px 15px;
  display: block;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
  white-space: nowrap;
  text-align: left;
}

/* Submenu Links Hover Effect */
.sub-menu li a:hover {
  background-color: #f8f9fa; /* Light gray background on hover */
  //color: #0044cc; /* Highlighted text color */
  border-radius: 4px; /* Add a subtle roundness to hover effect */
}

@media (max-width: 768px) {
  .sub-menu {
    position: relative; /* Remove absolute positioning */
    box-shadow: none; /* Remove shadow for mobile */
    border: none; /* Simplify borders */
    padding-top: 5px; /* Remove padding */
    padding-bottom: 5px; /* Remove padding */
    margin: 0; /* Remove margin */
    width: 100%; /* Full-width for smaller screens */
  }

  .sub-menu li a {
    padding: 0; /* Consistent padding for touch targets */
    text-align: center; /* Keep text aligned for consistency */
    font-size: 1.8rem;
  }
}