// header one

// header top
.header-top {
    background-color: var(--gray-50);
}
.header-top-right{
    width: 100%;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    @media (max-width: 991px) {
        justify-content: center;
    }
}
a.contact-info{
    font-weight: 500;
    font-size: 14px;
    color: var(--gray-900);
    margin-right: 24px;
    img{
        margin-right: 3px;
    }
}
.main-menu{
    position: relative;
}
.main-menu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    // text-align: center;
    // margin-right: -18px;
    // @include breakpoint(xxl){
    //     margin-right: -14px;
    // }

    li {
        display: inline-block;
        position: relative;
        &.has-megamenu {
            position: static;
        }
        a {
            color: var(--gray-600);
            display: block;
            font-family: $body-font;
            font-size: 14px;
            @include rt-trs(.24s);
            padding: 12px 20px;
            font-weight: 400;
            &:first-child{
                padding-left: 0;
            }
            &:last-child{
                padding-right: 0;
            }
            @include breakpoint(xxl){
                padding: 0 14px;
            }

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

}

.main-menu a:foucs {
    outline: none;
    text-decoration: none;
}

.main-menu>ul>li.current-menu-item>a,
.main-menu ul li a.active

{
    color: var(--primary-500);
}


/*change hover color*/
.main-menu>ul>li>a{
    // line-height: 104px;
    @include breakpoint(lg){
        line-height: 1.9;
    }
}

.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(.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: '\eab9';
}


/*sub menu*/

.main-menu>ul>li.menu-item-has-children>ul.sub-menu {
    position: absolute;
    left: 0;
    top: 80%;
    background: #fff;
    z-index: 999;
    color: #fff;
    text-align: left;
    border-radius: 8px;
    min-width: 248px;
    transition: all 0.24s ease-in-out;
    padding: 12px;
    margin-top: 12px;
    border: 1px solid var(--gray-100);
    box-shadow: 0px 12px 32px rgba(25, 31, 51, 0.08);
    @include hidden();
    // &:before {
    //     content: "";
    //     position: absolute;
    //     top: 2px;
    //     left: 45px;
    //     box-sizing: border-box;
    //     border: 7px solid #495057;
    //     border-color: transparent transparent #ffffff #ffffff;
    //     transform-origin: 0 0;
    //     transform: rotate(135deg);
    //     box-shadow: -2px 2px 2px -1px rgba(60, 72, 88, 0.15);
    //     @include breakpoint(md) {
    //         display: none
    //     }
    // }
}

.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: 8px 15px;
    border-bottom: 1px solid rgba(#ccc, 0.0);
    text-transform: capitalize;
    color:var(--gray-700);
    font-weight: 400;
    @include afterparent();
    font-size: 14px;
    border-radius: 4px;
}

.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: var(--primary-500);

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


/*// 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;
    @include breakpoint(md) {
        content: '\eab2';
        right: 15px;
    }
}

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

.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: 12px;
    margin-top: 12px;
    border: 1px solid var(--gray-100);
    box-shadow: 0px 12px 32px rgba(25, 31, 51, 0.08);
    @include hidden();
    // &:before {
    //     content: "";
    //     position: absolute;
    //     top: 14px;
    //     left: 2px;
    //     box-sizing: border-box;
    //     border: 7px solid #495057;
    //     border-color: transparent transparent #ffffff #ffffff;
    //     transform-origin: 0 0;
    //     transform: rotate(44deg);
    //     box-shadow: -2px 2px 2px -1px rgba(60, 72, 88, 0.15);
    //     @include breakpoint(md) {
    //         display: none;
    //     }
    // }
}

.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: 242px;
    @include vis();
}
.sub-menu ul li a {
    padding: 8px 15px !important;
  }
.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;
    @extend .mblnav-close;
    @include hw(30px);
    right: 10px;
    font-size: 12px;
    @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 {
    position: relative;
    display: flex;
    align-items: center;
    &__form {
      display: none;
    }

    &__button {
      width: 100%;
      overflow: hidden;
      position: relative;
      white-space: nowrap;
      border-radius: 0;
      text-overflow: ellipsis;
      transition: all 0.4s;
      border: none;
      padding: 0;
      padding-right: 20px;
      .icon {
        height: 10px;
        width: 13px;
        background-image: url("../images/svg/arrow-bottom.svg");
        background-repeat: no-repeat;
        position: absolute;
        right: 0;
        transition: all 0.4s;
        top: 5px;
        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-600);
      em {
        font-style: normal;
        line-height: 1;
      }
      &::before {
        display: inline-block;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        content: "";
        height: 16px;
        width: 24px;
        margin-right: 12px;
        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);
          }
        }
      }
    }
  }

  ul.language-picker__list{
      margin: 0;
      padding: 0;
      list-style: none;
  }

  .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;
  }

  p#language-picker-select-description {
    display: none;
}

// country flag
