.navbar-nav .dropdown-menu {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 250px; /* Increase the width */
  background-color: blue; /* Set background color to blue */
}

.navbar-nav .dropdown-menu.show {
  display: block;
  opacity: 1;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: 0; /* Decrease the margin-top to reduce the gap */
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background-color: red; /* Set background color to blue */
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu > .dropdown-menu:hover {
  display: block;
  opacity: 1;
}

.navbar-nav .dropdown:hover > .dropdown-menu,
.navbar-nav .dropdown-menu:hover {
  display: block;
  opacity: 1;
}

.navbar-nav .dropdown-menu .dropdown-item {
  color: white; /* Ensure text color is readable on blue background */
}

.navbar-nav .dropdown-menu .dropdown-item:hover {
  background-color:red; /* Change background color on hover for better visibility */
}