/* Navbar megamenu padding */


.navbar .megamenu {
   padding: 1rem;
}

/* Desktop view */
@media (min-width: 992px) {
   .navbar .has-megamenu {
      position: static !important;
   }

   .navbar .megamenu {
      left: 0;
      right: 0;
      width: 100%;
      margin-top: 0;
   }
}

/* Mobile view */
@media (max-width: 991px) {

   .navbar.fixed-top .navbar-collapse,
   .navbar.sticky-top .navbar-collapse {
      overflow-y: auto;
      max-height: 90vh;
      margin-top: 10px;
   }

   /* Ensuring submenus are indented and easy to view */
   .dropdown-menu .dropdown-menu {
      margin-left: 0.7rem;
      margin-right: 0.7rem;
      margin-bottom: 0.5rem;
   }
}

/* Dropdown hover and smooth transitions */
.navbar-nav>li:hover>.dropdown-menu {
   display: block;
   transition: opacity 0.3s ease, visibility 0.3s ease;
   opacity: 1;
}

.dropdown-menu>li:hover>.submenu {
   display: block;
   transition: opacity 0.3s ease, visibility 0.3s ease;
   opacity: 1;
}

/* Desktop submenu positioning */
@media (min-width: 992px) {
   .dropdown-menu li {
      position: relative;
   }

   .dropdown-menu .submenu {
      display: none;
      position: absolute;
      left: 100%;
      top: -7px;
      opacity: 0;
      visibility: hidden;
   }

   .dropdown-menu .submenu-left {
      right: 100%;
      left: auto;
   }

   .dropdown-menu>li:hover .submenu {
      display: block;
      opacity: 1;
      visibility: visible;
   }

   .dropdown-menu>li:hover {
      background-color: #f1f1f1;
   }
}

/* Small devices submenu */
@media (max-width: 991px) {
   .dropdown-menu .dropdown-menu {
      margin-left: 0.7rem;
      margin-right: 0.7rem;
      margin-bottom: 0.5rem;
   }
}

/* Smooth hover transitions */
.navbar-nav>li:hover>.dropdown-menu,
.dropdown-menu>li:hover>.submenu {
   transition: all 0.3s ease;
}



/* Desktop view adjustments */
@media (min-width: 992px) {
   .logo-search {
      flex: 0 0 20%;
   }

   .navbar-collapse {
      flex: 0 0 100%;
   }

   .search-bar {
      text-align: center;
   }

   .search-bar input {
      width: 100%;
      max-width: 250px;
      /* Adjust as needed */
   }
}

/* Mobile view adjustments */
@media (max-width: 991px) {
   .navbar-brand {
      flex: 1;
      /* Logo on the start */
      text-align: left;
   }

   .navbar-toggler {
      flex: 1;
      text-align: right;
   }

   .search-bar input {
      width: 80%;
      max-width: none;
      margin-left: 30px;
   }

   .navbar-toggler {
      margin-left: auto;
   }
}