/* adds some margin below the link sets  */
.navbar .dropdown-menu div[class*="col"] {
   margin-bottom:1rem;
}

.navbar-collapse {
  max-height: 80vh;
  overflow-y: scroll;
}

.nav-logo {
  margin-bottom: 10px !important;
}

.navbar .dropdown-menu {
  border:none;
  background-color: #fafafa !important;
}

.nav-section-title {
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: bold;
  color: #2c2c2c;
  margin: 1rem 0;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  border-bottom: solid 2px #05b89e;
}

@media (max-width: 992px) {
  .nav-item .nav-link {
    padding: 0.2em !important;
  }
  .navbar {
    padding: 1rem !important;
  }
  .nav-section-title {
    margin: 1rem 0;
  }
}

/* breakpoint and up - mega dropdown styles */
@media screen and (min-width: 992px) {
  
  /* remove the padding from the navbar so the dropdown hover state is not broken */
.navbar {
  padding-top:0px;
  padding-bottom:0px;
}

.nav-bar-links .nav-item {
  padding: 0.2rem !important;
}

/* remove the padding from the nav-item and add some margin to give some breathing room on hovers */
.navbar .nav-item {
  padding: .5rem .5rem;
  margin: 0;
}

/* makes the dropdown full width  */
.navbar .dropdown {position:static;}

.navbar .dropdown-menu {
  width:100%;
  left:0;
  right:0;
/*  height of nav-item  */
  top: 75px;
  
  display:block;
  visibility: hidden;
  opacity: 0;
  
}
  
.nav-item .nav-link {
  transition: none !important;
}

  
  /* shows the dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover {
  display:block;
  visibility: visible;
  opacity: 1;
}
  
  .navbar .dropdown-menu {
    border: none;
    border-radius: 0;
    background-color: #fff;
    box-shadow: -21.213px 21.213px 30px 0px rgb(158 158 158 / 30%);
  }

}