.menuItem {
    margin: 0;
    border-bottom: 1px solid var(--menu-border-color);
  
    @include min(desktop) {
      cursor: pointer;
      
      &:hover {
        > .subMenuList {
          display: block;
  
          &:not(.hasChildWithSubmenu) {
            max-height: 56rem;
            overflow-y: auto;
          }
        }
      }
    }
  }

  .megaContainer {
    max-width: var(--main-container-max);

    @include min(desktop) {
      margin: 0 auto;

      @include flex-align(center, space-between);

      height: 35rem;
    }

    background-color: transparent;
  }

  .megaItems {
    width: 100%;

    @include min(desktop) {
      padding: 4rem 0;
      width: 60%;
      flex-wrap: wrap;
      display: flex;
      column-gap: 3rem;
    }

    li {
      border-bottom: 1px solid #AFAFB0;
      color: #1B1B1C;

      @include min(desktop) {
        width: 28rem;
      }
    }
  }
  
  .subMenuList {
    display: none;
    opacity: 0;

    
    &.show {
      display: block;
      opacity: 1;
    }
  
    
  
    @include min(desktop) {
      background-color: var(--levelTwo-bg-color, var(--nav-background-color));
      backdrop-filter: blur(50px);
      opacity: .5;
      position: absolute;
      top: calc(100% + 1px);
      right: 0;
      width: 100%;
      perspective: 1000px;
      z-index: -1;
      transform-origin: top center;
      animation: rotate-x 900ms 200ms ease-in-out forwards;
      border-top: 0;
  
      &.show {
        display: none;
      }
    }
  }
  
  .level1 {
    @include flex-direction(column);
    @include flex-align(stretch, center);

    background-color: var(--levelOne-btn-bg-color, var(--levelOne-bg-color));
    
    @include min(tablet) {
      border: 0;
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      background-color: var(--levelOne-desktop-bg-color, var(--levelOne-bg-color));
      
      &:hover {
        background-color: var(--levelOne-hover-bg-color, var(--nav-background-color));
    
        > a,
        > span {
          color: var(--levelOne-hover-text-color, var(--menu-text-color));
          background-color: var(--levelOne-hover-bg-color, var(--nav-background-color));
        }
      }
    }

    > a,
    > span {
      color: var(--levelOne-text-color, var(--menu-text-color));
      background-color: var(--levelOne-bg-color, var(--nav-background-color));

      @include min(desktop) {
        background-color: var(--levelOne-desktop-bg-color, var(--nav-background-color));
      }
    }
  }
  
  .level2 {  
    background-color: var(--levelTwo-btn-bg-color, var(--levelTwo-bg-color));
  
    > a,
    > span {
      background-color: var(--levelTwo-bg-color, var(--nav-background-color));
      color: var(--levelTwo-text-color, var(--menu-text-color));
    }
  
    @include min(desktop) {
      background-color: var(--levelTwo-desktop-bg-color, var(--levelTwo-bg-color));
  
      > a,
      > span {
        background-color: var(--levelTwo-desktop-bg-color, var(--levelTwo-bg-color));
      }
  
      &:hover {  
        background-color: var(--levelTwo-hover-bg-color, var(--nav-background-color));
  
        > a,
        > span {
          background-color: var(--levelTwo-hover-bg-color, var(--nav-background-color));
          color: var(--levelTwo-hover-text-color, var(--menu-text-color));
        }
      }
    }
  }

  .hasChildren {
    > a, > span {
      position: relative;

      &:hover {
        @include arrow-rotate(0);
      }

      &::after {
        transition: 0.2s;

        @include arrow(var(--menu-text-color), 0.7rem, down, false);

        position: absolute;
        top: 2.4rem;
        right: 2.6rem;
      }
    }
  }

  @keyframes rotate-x {
    0% {
      opacity: 0;
      transform: rotateX(-90deg);
    }

    50% {
      transform: rotateX(-20deg);
    }

    100% {
      opacity: 1;
      transform: rotateX(0deg);
    }
  }