/* Add your custom CSS styling here */
.navbar {
  #border:2px solid blue;
  max-height: 40px; /* Adjust the value as needed */
  display: flex;
  justify-content: center; /* Center the content horizontally */
}

/* For spreading items equally */
.navbar-nav {
  #border:2px solid red;
  max-height: 40px;
  display: flex;
  justify-content: space-between;
}

/* Custom styling for each menu item */
.nav-item {
  max-height: 40px;
  position: relative;
  padding: 0px 27px 10px 27px;
  border-right: 3px solid white;
  border-radius: 4px;
  margin-left:-15px;
  font-weight:bold;
}

/* Hover effect on menu items */
.nav-item:hover {
  background-color: cyan;
}

/* Styling for submenu links */
.dropdown-menu a.dropdown-item {
  background-color: #ffccb3;
  #color: white;
  transition: background-color 0.5s; /* Adding a transition */
}

/* Change background color on hover */
.dropdown-menu a.dropdown-item:hover {
  background-color: #cc4400;
}

/* Correct the positioning of the submenus */
.dropdown-menu {
  top: 100%;
  left: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: none;
  transition: opacity 1s, transform 1s, top 1s; /* Adding transitions for opening and closing */
  opacity: 0;
  transform: translateY(-10px);
}

/* Show dropdown on hover */
.nav-item:hover .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
  top: 100%; /* Reset the top value to allow opening transition */
  transition: opacity 0.4s, transform 1s, top 1s; /* Adding 1-second transition */

  /* Adding animation for submenu items with delay */
  animation: fadeInDown 1s ease forwards;
}

/* Animation for submenu items with delay */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Adding delay to submenu items
.nav-item:hover .dropdown-menu a.dropdown-item:nth-child(1) { animation-delay: 0.2s; }
.nav-item:hover .dropdown-menu a.dropdown-item:nth-child(2) { animation-delay: 0.4s; }
.nav-item:hover .dropdown-menu a.dropdown-item:nth-child(3) { animation-delay: 0.6s; }
.nav-item:hover .dropdown-menu a.dropdown-item:nth-child(3) { animation-delay: 0.8s; }
.nav-item:hover .dropdown-menu a.dropdown-item:nth-child(3) { animation-delay: 0.10s; }
.nav-item:hover .dropdown-menu a.dropdown-item:nth-child(3) { animation-delay: 0.12s; }
.nav-item:hover .dropdown-menu a.dropdown-item:nth-child(1) { animation-delay: 0.14s; }
.nav-item:hover .dropdown-menu a.dropdown-item:nth-child(2) { animation-delay: 0.16s; }
.nav-item:hover .dropdown-menu a.dropdown-item:nth-child(3) { animation-delay: 0.18s; }
.nav-item:hover .dropdown-menu a.dropdown-item:nth-child(3) { animation-delay: 0.20s; }
.nav-item:hover .dropdown-menu a.dropdown-item:nth-child(3) { animation-delay: 0.22s; }
.nav-item:hover .dropdown-menu a.dropdown-item:nth-child(3) { animation-delay: 0.24s; }
 Add more delay declarations for additional submenu items */