.navbar {
  background-color: #000000;
  padding: 10px;
  margin-top: 10px; /* Adjusted margin */
  width: 100%; /* Full width */
  display: flex;
  justify-content: left; /* Centers the navbar content */
  box-sizing: border-box; /* Ensures padding is included in the width */
}

.navbar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex; /* Flexbox layout for centering */
  justify-content: left; /* Centers the items horizontally */
  width: 100%;
}

.navbar ul li {
  position: relative;
  margin: 0 10px; /* Adds space between navbar items */
}

/* Styling for navbar items */
.navbar ul li a {
  display: block;
  color: rgb(161, 159, 159);
  text-align: center;
  font-size: 22px;
  padding: 14px 20px;
  text-decoration: none;
  background-color: black;
  text-transform: uppercase;
}

.navbar ul li a:hover {
  background-color: black;
  color: #e60073;
}

/* Styling for first-level submenus with responsive width */
.navbar ul li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: black;
  min-width: min-content; /* Make submenu width responsive to content */
  white-space: nowrap; /* Prevent submenu items from breaking into multiple lines */
  z-index: 1;
  padding: 10px; /* Add padding to ensure the text isn't touching edges */
}

/* Add 5px between each item in the submenu */
.navbar ul li ul li {
  margin-bottom: 5px;
}

.navbar ul li ul li:last-child {
  margin-bottom: 0; /* No margin on the last item */
}

/* Show first-level submenus on hover */
.navbar ul li:hover > ul {
  display: block;
}

/* Styling for second-level submenus (open to the right with better responsiveness) */
.navbar ul li ul li ul {
  left: 100%;
  top: 0;
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: min-content; /* Make second-level submenu width responsive */
  white-space: nowrap; /* Prevent text wrapping in submenus */
}

/* Show second-level submenus on hover */
.navbar ul li ul li:hover > ul {
  display: block;
}

.navbar ul li ul li {
  float: none;
}

.navbar ul li ul li a {
  color: black;
  font-size: 12px;
  text-align: left;
  background-color: lightgray;
  border-radius: 10px;
  /*text-transform: none;*/
}

.navbar ul li ul li a:hover {
  background-color: #e60073;
  color: black;
}

/* Clearfix for floating elements */
.navbar::after {
  content: "";
  clear: both;
  display: table;
}

/* Media query to handle overflow and position submenus to the left if they overflow */
@media (max-width: 768px) {
  .navbar ul li ul li ul {
    left: auto;
    right: 100%; /* Position the submenu to the left if the screen is too narrow */
  }
}