.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  border: none; /* Remove border */
  border-radius: 0; /* Remove rounded corners */
  box-shadow: none; /* Remove shadow */
  list-style: none;
  padding: 0; /* Remove extra padding */
  margin: 0; /* No margin */
  min-width: 250px; /* Maintain consistent width */
  z-index: 50;
}

/* Submenu Items */
.sub-menu li {
  position: relative;
  border-bottom: 1px solid #eceef3; /* Add light gray dividers between items */
}
.sub-menu li:last-child {
  border-bottom: none; /* Remove the border for the last item */
}

/* Submenu Links */
.sub-menu li a {
  color: #3c4250; /* Subtle dark text color */
  padding: 15px 20px; /* Spacing for better touch targets */
  display: block;
  text-decoration: none;
  font-size: 15px; /* Standard readable size */
  white-space: nowrap; /* Prevent text wrapping */
  background-color: transparent; /* Default background */
  transition: background-color 0.2s ease, color 0.2s ease; /* Smooth hover effect */
  text-align: left; /* Align text to the left */
}

/* Submenu Links Hover Effect */
.sub-menu li a:hover {
  background-color: #f1f1f1; /* Light gray hover background */
  color: #000000; /* Darker text on hover for contrast */
}

/* Submenu Links Hover Effect */
.sub-menu li a:hover {
  background-color: #f8f9fa; /* Light gray background on hover */
}

@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;
    border: none;
  }

  .sub-menu li {
    border-bottom: none;
  }
}