@use "../../utils" as *;

/*----------------------------------------*/
/*  3.1 Header Style 1
/*----------------------------------------*/
//  sticky
.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--mt-common-black);
  -webkit-animation: 0.7s ease-in-out 0s normal none 1 running mtfadeInDown;
  animation: 0.7s ease-in-out 0s normal none 1 running mtfadeInDown;
  box-shadow: 0px 20px 30px rgba(167, 167, 167, 0.1);
  z-index: 888;

  &.mt-sticky-theme {
    background-color: var(--mt-theme-1);
  }

  &.mt-sticky-theme-2 {
    background-color: #fff;
  }
}

.mtheader__border {
  border: 1px solid var(--mt-border-1);

  &-bottom {
    border-bottom: 1px dashed var(--mt-grey-1);
  }

  &-top {
    border-top: 1px dashed var(--mt-grey-1);
  }
}

.mtheader__top-border {
  &-bottom {
    border-bottom: 1px solid var(--mt-border-4);
    padding: 11px 0;

    &-2 {
      border-bottom: 1px solid var(--mt-border-3);
      padding: 11px 0;
    }
  }
}

.mt-transparent-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

.mtheader {
  &__top {
    &-wrapper {
      padding-left: 213px;
    }

    &-left {
      & a {
        color: #595a61;
        font-size: 16px;
        font-weight: 500;
        margin: 0 8px;

        & span {
          margin-left: 7px;
        }

        &:hover {
          color: var(--mt-common-black);
        }
      }
    }

    &-social {
      & a {
        color: var(--mt-common-black);
        border: 1px solid var(--mt-border-4);
        border-radius: 100%;
        display: inline-block;
        font-size: 15px;
        margin: 0 2px;
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        @include transition(0.3s);

        &:hover {
          color: var(--mt-common-black);
          background-color: var(--mt-theme-1);
        }
      }
    }

    // style 2
    &-2 {
      & .mtheader__top-left {
        & a {
          color: rgba(255, 255, 255, 0.6);

          &:hover {
            color: var(--mt-common-white);
          }
        }
      }

      & .mtheader__top-social {
        & a {
          color: #fff;
          border: 1px solid rgba(255, 255, 255, 0.6);
          transition: 0.3s;

          &:hover {
            color: var(--mt-common-black);
          }
        }
      }
    }

    // style 3
    &-5 {
      & .mtheader__top-left {
        & a {
          color: var(--mt-common-black);
        }
      }

      & .mtheader__top-social {
        & a {
          transition: 0.3s;

          &:hover {
            background-color: var(--mt-common-white);
          }
        }
      }
    }
  }
}

.mtheader {
  &__logo {
    position: relative;

    &-2 {
      margin-top: -60px;

      @media #{$md, $xs} {
        margin-top: 0px;
      }
    }
  }

  &__menu {
    & ul {
      & li {
        display: inline-block;
        margin-right: 45px;
        position: relative;

        &.has-dropdown {
          &::after {
            content: "\f0dd";
            font-family: var(--mt-ff-fontawesome);
            font-weight: 700;
            position: absolute;
            top: 50%;
            right: -18px;
            @include transform(translateY(-65%));
            @include transition(0.3s);
          }
        }

        & > a {
          color: var(--mt-common-white);
          font-family: var(--mt-ff-body);
          font-size: 16px;
          padding: 36px 0;
          display: block;
          font-weight: 700;
        }

        & .sub-menu {
          position: absolute;
          top: 100%;
          width: 230px;
          left: 0;
          background: #fff;
          transform-origin: top center;
          padding: 20px 0;
          opacity: 0;
          visibility: hidden;
          @include transition(0.3s);
          @include transform(scaleY(0));
          box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
          text-align: start;
          z-index: 6;

          & li {
            margin-right: 0;
            display: block;

            &.has-dropdown {
              &::after {
                right: 10px;
              }
            }

            & a {
              color: #000;
              display: block;
              padding: 8px 25px;
              font-size: 17px;
            }

            & .sub-menu {
              left: 100%;
              top: 105%;
              opacity: 0;
              visibility: hidden;
            }

            &:hover {
              & > a {
                color: var(--mt-theme-1);
              }

              & > .sub-menu {
                opacity: 1;
                visibility: visible;
                @include transform(scaleY(1));
              }
            }
          }
        }

        &:hover {
          &.has-dropdown {
            &::after {
              @include transform(translateY(-36%) rotate(180deg));
              color: var(--mt-theme-1);
            }
          }

          & > a {
            color: var(--mt-theme-1);
          }

          & .sub-menu {
            opacity: 1;
            visibility: visible;
            @include transform(scaleY(1));
          }
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    &-2 {
      & ul {
        & li {
          & > a {
            color: #030303;
            padding: 28px 0;
          }
        }
      }
    }

    &-3 {
      & ul {
        & li {
          & > a {
            color: #fff;
            padding: 28px 0;
          }
        }
      }
    }
  }

  &__search {
    & .mtsearch {
      border: 2px solid var(--mt-border-2);
      border-radius: 50px;
      display: inline-block;
      width: 48px;
      height: 48px;
      line-height: 48px;
      text-align: center;

      & i {
        font-size: 18px;
        color: #fff;
        font-weight: 500;
      }
    }
  }

  &__right {
    &-bar {
      border: 1px solid var(--mt-border-3);
      border-radius: 30px;
      padding: 10px 25px;
      display: inline-block;
      color: #fff;
      font-size: 25px;
    }

    &-2 {
      & .mtheader__btn-wrap {
        & .mt-btn-border {
          border: 1px solid var(--mt-border-1);
          color: var(--mt-common-white);

          &:hover {
            color: var(--mt-common-black);
          }
        }
      }
    }
  }

  &__3 {
    & .mtheader__right-bar {
      color: black;
    }

    & .header-sticky {
      background-color: #fff;

      & .mtheader__logo-2 {
        margin-top: 0px;
      }
    }
  }

  &__4 {
    & .header-sticky {
      & .mtheader__logo-2 {
        margin-top: 0px;

        & img {
          @media #{$lg,$md, $xs} {
            width: 100px;
            object-fit: cover;
          }
        }
      }
    }

    & .mtheader__logo-2 {
      & img {
        @media #{$md,$xs} {
          width: 100px;
          object-fit: cover;
        }
      }
    }
  }
}

• [F] _header-1.scss
  Delete
• [F] index.scss
  Delete