.main-menu {
  position: relative;
}
.main-menu ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
  text-align: left;
  margin-right: -18px;

  li {
    display: inline-block;
    position: relative;

    &.has-megamenu {
      position: static;
    }

    a {
      display: flex;
      text-transform: capitalize;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      padding: 16px 12px;
      color: var(--gray-500);
      .icon-box {
        font-size: 20px;
        margin-right: 10px;
      }

      &:hover {
        text-decoration: none;
      }
    }
  }
}

.main-menu a:foucs {
  outline: none;
  text-decoration: none;
}
.main-menu > ul > li {
  &:first-child {
    > a {
      padding-left: 0px;
    }
  }
}

.main-menu > ul > li.current-menu-item > a,
.main-menu ul li a.active {
  color: var(--primary-500);
}

.main-menu > ul > li:hover > a {
  color: var(--primary-500);
}

/*li dot hover change*/

/*men item carve icon*/

.main-menu > ul > li.menu-item-has-children > a:after {
  content: "\f101";
  margin-left: 8px;
  font-family: "flaticon";
  font-size: 12px;
  @include rt-trs(0.24s);
  @include breakpoint(md) {
    margin-left: 0;
    position: absolute;
    right: 15px;
  }
}

.main-menu > ul > li.menu-item-has-children:hover > a:after {
  color: var(--primary-500);
}

.main-menu > ul > li.menu-item-has-children.open > a:after {
  content: "\f103";
}

/*sub menu*/

.main-menu > ul > li.menu-item-has-children > ul.sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  z-index: 999;
  color: #fff;
  text-align: left;
  border-radius: 4px;
  min-width: 248px;
  transition: all 0.24s ease-in-out;
  padding-top: 12px;
  padding-bottom: 12px;
  border: 1px solid var(--gray-100);
  box-shadow: 0px 4px 24px rgba(25, 27, 28, 0.16);
  @include hidden();
}

.main-menu > ul > li.menu-item-has-children:hover > ul.sub-menu {
  @include vis();
  top: 74%;
}

.main-menu > ul > li.menu-item-has-children:hover > .rt-mega-menu {
  @include vis();
  top: 74%;
}

.main-menu > ul > li.menu-item-has-children > ul.sub-menu > li,
.main-menu ul ul li {
  display: block;
}

.main-menu > ul > li.menu-item-has-children > ul.sub-menu > li > a,
.main-menu ul ul li a {
  display: block;
  padding: 6px 20px;
  line-height: 20px;
  border-bottom: 1px solid rgba(#ccc, 0);
  text-transform: capitalize;
  color: var(--gray-500);
  font-weight: 400;
  @include afterparent();
  font-size: 14px;
}

.main-menu > ul > li.menu-item-has-children > ul.sub-menu > li:last-child > a,
.main-menu ul ul li:last-child > a {
  border-bottom: 1px solid transparent !important;
}

.main-menu > ul > li.menu-item-has-children > ul.sub-menu > li:hover > a,
.main-menu ul ul > li:hover > a {
  // padding-left: 25px;
  color: white;

  background: var(--primary-500);
}

/*// drop menu cart*/

.main-menu ul ul li.menu-item-has-children > a:after {
  content: "\f105";
  position: absolute;
  font-family: "flaticon";
  right: 15px;
  font-size: 12px;
}

.main-menu ul ul li.menu-item-has-children.open > a:after {
  content: "\f103";
}

.main-menu ul ul {
  position: absolute;
  left: 240px;
  top: 0px;
  background: #fff;
  border: none;
  z-index: 999;
  text-align: left;
  border-radius: 8px;
  min-width: 248px;
  transition: all 0.24s ease-in-out;
  padding-top: 12px;
  padding-bottom: 12px;
  border: 1px solid var(--gray-100);
  box-shadow: 0px 4px 24px rgba(25, 27, 28, 0.16);
  @include hidden();
}

.main-menu
  > ul
  > li.menu-item-has-children
  > ul.sub-menu
  > li.menu-item-has-children:hover
  > ul.sub-menu,
.main-menu
  > ul
  > li.menu-item-has-children
  > ul.sub-menu
  > li.menu-item-has-children
  > ul.sub-menu
  > li.menu-item-has-children:hover
  > ul.sub-menu {
  left: 248px;
  @include vis();
}

.mobile-menu {
  display: none;
}

.menu-click {
  margin-left: 15px;
  cursor: pointer;
  i {
    font-size: 23px;
    color: var(--gray-100);
  }
}

.menu-icon {
  cursor: pointer;
  margin-left: 15px;
  position: relative;
  height: 21px;
  span {
    display: block;
    background: var(--gray-900);
    height: 2px;
    width: 25px;
    margin-bottom: 5px;
    transition: all 0.24s ease-in-out;
    &:first-child {
      margin-top: 10px;
    }
    &:last-child {
      margin-bottom: 0px;
    }
    &:nth-child(2) {
      width: 15px;
    }
    &:nth-child(3) {
      width: 20px;
    }
  }
}

.mblnav-close {
  position: absolute;
  right: 30px;
  top: 30px;
  @include hw(35px);
  border-radius: 50%;
  text-align: center;
  background: var(--primary-500);
  cursor: pointer;
  color: #fff;
}

.mobile-menu {
  display: none;
}
.mblbrand-logo {
  display: none;
  padding-left: 15px;
  margin-bottom: 30px;
  @include breakpoint(lg) {
    display: block;
  }
}

.rt-mobile-menu-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  @include hidden();
  @include rt-trs(0.24s);
  &.active {
    z-index: 7;
    @include vis();
  }
}

.rt-mobile-menu-close {
  display: none;

  // @include hw(30px);
  // background: var(--primary-500);
  // color: white;
  // border-radius: 50%;
  // text-align: center;
  // font-size: 16px;
  cursor: pointer;
  @include breakpoint(lg) {
    display: block;
  }
}

//experintam mobile menu
// white menu css
@media (min-width: 992px) {
  .white-menu {
    .main-menu > ul > li > a {
      color: var(--gray-400);
    }
    .main-menu > ul > li.current-menu-item > a {
      color: #fff;
    }
    .main-menu > ul > li:hover > a {
      color: #fff;
      &:after {
        color: #fff;
      }
    }
  }
}

// language
// language picker
// language picker
.language-picker {
  position: relative;
  display: flex;
  align-items: center;
  &__form {
    display: none;
  }

  &__button {
    width: 116px;
    height: 32px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    border-radius: 4px;
    padding: 6px 12px;
    text-overflow: ellipsis;
    background-color: var(--gray-50);
    transition: all 0.4s;
    &:hover {
      background-color: var(--gray-100);
    }
    .icon {
      height: 10px;
      width: 13px;
      background-image: url("../images/svg/arrow-icon.svg");
      background-repeat: no-repeat;
      position: absolute;
      right: 7px;
      transition: all 0.4s;
      top: 14px;
      polygon {
        display: none;
      }
    }
  }

  &__dropdown {
    position: absolute;
    width: 200px;
    top: 100%;
    z-index: 4;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.2s, opacity 0.2s,
      -webkit-transform 0.2s ease-out;
    transition: visibility 0s 0.2s, opacity 0.2s, transform 0.2s ease-out;
    transition: visibility 0s 0.2s, opacity 0.2s, transform 0.2s ease-out,
      -webkit-transform 0.2s ease-out;
    background: #ffffff;
    border: 1px solid #e5e7e8;
    box-shadow: 0px 4px 24px rgba(25, 27, 28, 0.16);
    border-radius: 6px;
    padding: 8px 0;
    margin-top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }

  &__flag {
    display: block;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    color: var(--gray-900);
    em {
      font-style: normal;
      line-height: 1;
    }
    &::before {
      display: inline-block;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      content: "";
      height: 16px;
      width: 16px;
      margin-right: 6px;
      border-radius: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    &--deutsch::before {
      background-image: url("../images/flags/ger.png");
    }

    &--english::before {
      background-image: url("../images/flags/eng.png");
    }

    &--spanish::before {
      background-image: url("../images/flags/spanish.png");
    }
  }

  &__list {
    li {
      line-height: 1;
      a {
        padding: 9px 13px;
        color: black;
        text-transform: capitalize;
        transition: all 0.4s;
        &:hover{
          color: white;
          background-color: var(--primary-500);
        }
      }
    }
  }
}

.language-picker__button[aria-expanded="true"] + .language-picker__dropdown {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s, transform 0.2s ease-out;
}

.language-picker__item[aria-selected="true"] {
  position: relative;
  color: white;
  background-color: var(--primary-500);
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 15px;
    width: 15px;
    right: 12px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url("../images/svg/check-white.svg");
  }
}

.language-picker__dropdown::before,
.language-picker__dropdown::after {
  content: " ";
  display: block;
  border-style: solid;
  border-width: 0 7px 12px 7px;
  border-color: transparent;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.language-picker__dropdown::before {
  top: -0.8em;
  border-bottom-color: #e6e8ec;
}
.language-picker__dropdown::after {
  top: -0.7em;
  border-bottom-color: #fff;
}

.language-picker__button[aria-expanded="true"] .icon {
  transform: translateY(-50%) rotate(180deg);
}


[data-layout=horizental] .app-header{
  .language-picker__button{
    background-color: var(--gray-800);
  }
  .language-picker__flag{
    color: var(--gray-300)
  }
  .language-picker__item[aria-selected=true]{
    color: white
  }
  .language-picker__list li a{
    color: black;
  }
}