/* Target the main menu list */
.custom-menu ul {
  list-style: none; /* Remove default bullet points */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

/* Style main menu items */
.custom-menu li {
  display: inline-block; /* Display menu items horizontally */
  margin-right: 20px; /* Add spacing between items */
}

/* Style main menu links */
.custom-menu li a {
  text-decoration: none; /* Remove underline */
  color: #000; /* Set link color */
}

/* Style submenus */
.custom-menu li ul {
  position: absolute; /* Position submenus absolutely */
  display: none; /* Hide submenus initially */
  background-color: #fff; /* Set submenu background color */
  padding: 10px; /* Add padding to submenus */
  border-radius: 5px; /* Add rounded corners */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
  z-index: 1; /* Ensure submenus appear above other content */
}

/* Style submenu items */
.custom-menu li ul li {
  display: block; /* Display submenu items as blocks */
  margin: 0; /* Remove default margin */
  padding: 5px; /* Add padding to submenu items */
}

/* Style submenu links */
.custom-menu li ul li a {
  color: #333; /* Set submenu link color */
}

/* Show submenus on hover (optional) */
.custom-menu li:hover > ul {
  display: block; /* Show submenu on hover over parent item (optional) */
}

/* Toggle submenus on click (preferred for touch devices) */
.custom-menu li a[onclick] {
  cursor: pointer; /* Indicate clickable element */
}