
#appPrimaryNavToggle{
    
    color:#fff; background:transparent; border:1px solid #333; border-radius:5px;visibility: hidden; font-size:20px;
}

.app-primary-nav {
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 12px 20px;
  position: relative;
}

.app-primary-nav__brand {
  font-size: 20px;
  font-weight: 600;
}

.app-primary-nav__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  font-weight:600;
}

.app-primary-nav__menu {
  list-style: none;
  display: flex;
  gap: 20px;
  margin-left: auto;
  margin-top:20px;
}

.app-primary-nav__menu a{
  color: #fff;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  text-align: left;
}


.app-primary-nav__dropdown-toggle,
.app-primary-nav__submenu-toggle {
  color: #fff;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  width: 100%;
  text-align: left;
}

.app-primary-nav__dropdown,
.app-primary-nav__submenu {
  position: relative;
}

.app-primary-nav__dropdown-menu,
.app-primary-nav__submenu-menu {
  position: absolute;
  background: rgb(1, 35, 104);
  list-style: none;
  min-width: 250px;
  display: none;
  z-index: 1000;
  padding-inline-start: 0px !important;
  

}
.app-primary-nav__submenu-menu{
      overflow-y:scroll;
      max-height:400px;
}

.app-primary-nav__submenu-menu::-webkit-scrollbar {
    width: 8px;
}

.app-primary-nav__submenu-menu::-webkit-scrollbar-track {
    background: rgba(0, 32, 91, 0.1); /* Very light blue */
    border-radius: 10px;
}

.app-primary-nav__dropdown-menu {
  top: 100%;
  left: 0;
  border-radius:10px;
}

.app-primary-nav__submenu-menu {
  top: 0;
  left: 100%;
  border-radius:10px;
}

.app-primary-nav__dropdown-menu a,
.app-primary-nav__submenu-menu a,
.app-primary-nav__submenu-toggle {
  display: block;
  padding:10px 15px;
  font-size:14px;
  font-weight:100;
}

.app-primary-nav__dropdown-menu a:hover,
.app-primary-nav__submenu-menu a:hover,
.app-primary-nav__submenu-toggle:hover {
  background: rgb(1, 29, 87);
}

.app-primary-nav__dropdown.is-open > .app-primary-nav__dropdown-menu {
  display: block;
  margin-top:20px;
}

.app-primary-nav__submenu.is-open > .app-primary-nav__submenu-menu {
  display: block;
}


/* Responsive */

@media screen and (max-width: 991px) {
    #appPrimaryNavToggle{
        color:#fff; background:rgba(0,0,0,0); border:1px solid #333; border-radius:5px;visibility: visible;
    }
    .app-primary-nav__toggle {
        display: block;
      }
    .app-primary-nav__menu {
    flex-direction: column;
    position: absolute;
    background: #012368;
    top: 50%;
    left: 0;
    width: 100%;
    padding-top:50px;
    padding-bottom:20px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease-in-out, opacity 0.2s ease;
  
  }

  .app-primary-nav__menu.is-open {
    max-height: 800px; /* Set to a value larger than your content */
  opacity: 1;
  }
  
    .app-primary-nav__dropdown-menu,
    .app-primary-nav__submenu-menu {
        border:1px solid #fff;
        position:static;
        padding-inline-start: initial !important; 
        max-width:calc(100% - 35px);
    }
    
    .app-primary-nav__submenu-menu{
        margin-left:20px;
    }
}

@media (max-width: 768px) {
  

  

  .app-primary-nav__dropdown-menu,
  .app-primary-nav__submenu-menu {
    position: static;
  }
}
