/*----------------------------------------*/
/*  08. MENU CSS START
/*----------------------------------------*/

.main-menu {
  >ul {
    display: flex;

    >li {
      position: relative;

      >a {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 18px;
        line-height: 1.4;
        color: #212121;
        padding: 15px 15px;
        text-transform: capitalize;

        @media #{$xxl} {
          font-size: 16px;
          padding: 15px 10px;
        }

        @media #{$xl} {
          padding: 15px 15px;
        }
      }

      &:hover {
        >a {
          color: var(--primary);
        }

        >ul {
          opacity: 1;
          pointer-events: all;
          left: 0;

          &.dp-menu li {
            &:hover {
              >ul {
                opacity: 1;
                pointer-events: all;
                left: 100%;
              }
            }
          }
        }
      }
    }
  }

  .dp-menu {
    background-color: #232529;
    padding: 18px 0px;
    width: 250px;
    position: absolute;
    left: 10px;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: all 0.5s;

    ul {
      background: var(--black-2);
      padding: 18px 0px;
      width: 300px;
      position: absolute;
      left: calc(100% + 10px);
      top: 0;
      opacity: 0;
      z-index: 10;
      transition: all 0.5s;
    }

    li {
      position: relative;
      padding: 0 25px;

      &:hover {
        >a {
          color: var(--primary);
          background-color: transparent;
        }

        >ul {
          opacity: 1;
          transform: none !important;
          pointer-events: all;
        }
      }

      a {
        font-size: 16px;
        font-weight: 500;
        color: #999999;
        padding: 5px 0;
        border-radius: 8px;
        display: inline-block;
        text-transform: capitalize;

        &:hover {
          letter-spacing: 0.5px;
        }

        &:after {
          transform: rotate(-90deg);
          margin-left: auto;
        }

      }
    }
  }

}

.bg-transparent {
  .main-menu>ul>li>a {
    color: #fff;
  }
}

.mean-container .mean-nav ul li a{
  margin-bottom: 1px;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  justify-content: center;
}