.nav-list-item::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 10px;
    } 
.menu-list{
      display: none;
      position:absolute;
      top: 45px;
      width: 100%;
      min-width: 10rem;
      background-color: #F6F6F6;
      border-top: 2px solid  rgb(66, 192, 187);
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      transform-origin: top center;
      animation: dropShow .1s linear;
      -moz-animation: dropShow .1s linear;
      -webkit-animation: dropShow .1s linear;
    }
    
.menu-list::before{
      position: absolute;
      content: "";
      border-width: 6px;
      border-style: solid;
      border-color: transparent transparent  rgb(66, 192, 187) transparent;
      top: -13px;
      left: 20px;
    }
    
.nav-item:hover .menu-list{
      display: block;
    }
.menu-list-item{
      position: relative;
      padding: 10px 10px;
      border: 1px solid #fff;
      cursor: pointer;
    }
.menu-list-item-link{
      font-size: 0.925rem;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.45);
    }
.menu-list-item-link:hover{
     color: rgb(66, 192, 187) !important;
} 
.sub-menu{
      position:absolute;
      left: 100%;
      top: 0px;
      min-width: max-content;
      background-color: #F6F6F6;
      display: none;
      transform-origin: left center;
      animation: dropShowLeft .1s linear;
      -moz-animation: dropShowLeft .1s linear;
      -webkit-animation: dropShowLeft .1s linear;
    }
.menu-list-item:hover .sub-menu{
      display: block;
    }
.nav-item:hover> a{
      color: rgb(66, 192, 187);
    }

.navbar-toggler:focus{
    box-shadow: none;
}

@media not all, (hover: hover) and (pointer: fine), not all
    {
    
      .menu-list-item:hover>a {
        color: #66c9c5;
    }
    }
@keyframes dropShow{
    0% {
        transform: scaleY(0)
    }
    100% {
        transform: scaleY(1)
    }
    }
    @keyframes dropShowLeft{
    0% {
        transform: scaleX(0)
    }
    100% {
        transform: scaleX(1)
    }
    }