@primary_color: #2E83D0;
@secondary_color: #242424;
@white: #fff;
@black: #000;
@gray: #F9F9F9;

/* # Mobile Menu
-------------------------------------------------------------- */
.mobile-menu-toggle {
  .hamburger {
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;

    &:hover {
      .hamburger__line.middle {
        width: 100%;
      }

      .hamburger__line.bottom {
        width: 100%;
      }
    }
  }

  .hamburger__line {
    background-color: var(--theme-yellow);
    height: 2px;
    width: 100%;
    display: block;
  }

  .hamburger__line.middle {
    margin: 7px 0 7px auto;
    width: 75%;
    transition: 0.3s all;
  }

  .hamburger__line.bottom {
    margin-left: auto;
    width: 45%;
    transition: 0.6s all;
  }
}

.mobile-menu__bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 99;
}

.mobile-menu.is-open {
  .mobile-menu__bg {
    display: block;
  }

  transform: translate3d(0, 0, 0);
}

.mobile-menu {
  position: fixed;
  right: 0;
  top: 0;
  width: 320px;
  height: 100vh;
  transform: translate3d(100%, 0, 0);
  transition: all 0.5s ease;
  z-index: 99;
  background-color: #464a7094;
  backdrop-filter: blur(5px);
}

.header-main-menu .mobile-menu__nav li.menu-item a {
  color: var(--primary-color);
}


.mobile-menu__top {
  padding: 20px 15px;
  position: relative;
  width: 100%;
  margin-bottom: 40px;
}

.mobile-menu-side-logo .header-logo a {
  display: block;
  margin-bottom: 70px;
  padding: 15px 30px;
}

.menu-item-has-children ul.sub-menu {
  display: none;
  margin-bottom: 20px;
}

.mobile-header-logo {
  width: 80%;

  img {
    max-height: 60px;
  }
}

.menu-close {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  cursor: pointer;
  right: 20px;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 14px;
    right: 0;
    width: 20px;
    height: 2px;
    background-color: var(--secondary-color);
    transform: rotate(45deg);
  }

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 14px;
    right: 0;
    width: 20px;
    height: 2px;
    background-color: var(--secondary-color);
    transform: rotate(-45deg);
  }
}

.mobile-menu__panel {
  padding: 0 0 50px;
  position: relative;
  width: 320px;
  height: 100vh;
  overflow: auto;
  margin-left: auto;
  background-color: @primary_color;
}

.mobile-menu__nav {
  padding: 0;

  ul {
    padding: 0;
  }

  li {
    list-style: none;
    position: relative;
    color: @black;
    margin-bottom: 0;

    .arrow.is-open {
      &:after {
        transform: rotate(0deg);
        opacity: 0;
      }
    }

    a {
      color: @white;
      padding: 10px 15px;
      display: block;

      &:hover {
        color: @white;
        background-color: @secondary_color;
      }
    }
  }

  .arrow {
    position: absolute;
    right: 0;
    top: 5px;
    width: 44px;
    height: 44px;
    cursor: pointer;

    &:before {
      content: "";
      position: absolute;
      left: 50%;
      transition: all 0.3s ease;
      top: 50%;
      width: 20px;
      height: 2px;
      background-color: var(--secondary-color);
      margin: -1px 0 0 -10px;
    }

    &:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transition: all 0.3s ease;
      width: 20px;
      height: 2px;
      background-color: var(--secondary-color);
      margin: -1px 0 0 -10px;
      transform: rotate(90deg);
    }

  }

  >li {
    &:first-child {
      border-top: 1px solid rgba(255, 255, 255, 0.5);
    }

    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }

  li.menu-item-has-children {
    a {
      padding-right: 45px;
    }
  }

  .dropdown-menu {
    padding: 0 0 0 10px;
    position: static;
    background: transparent;
    border: none;
  }

  .sub-menu {
    li {
      a {
        color: @white;
        padding: 10px 15px;
        display: block;
      }
    }
  }

  li.current-menu-ancestor {
    >a {
      color: @white;
      background-color: @secondary_color;
    }
  }

  li.current-menu-item {
    >a {
      color: @white;
      background-color: @secondary_color;
    }
  }
}

.mobile-menu__inner {
  height: 100%;
  padding-top: 30px;
}

.header-main-menu .mobile-menu__nav li.menu-item {
  border-bottom: 1px solid var(--secondary-color);
}

.header-main-menu .mobile-menu__nav li.menu-item a {
  color: var(--secondary-color);
  padding: 14px 20px;
}

.header-main-menu .mobile-menu__nav li.menu-item.current-menu-item a {
  color: var(--theme-yellow);
}

.header-main-menu .mobile-menu__nav .sub-menu li.menu-item {
  border-bottom: 0;
  transition: all 0.3s ease;
}

.header-main-menu .mobile-menu__nav li.menu-item a:hover {
  color: var(--theme-yellow);
}

.header-main-menu .mobile-menu__nav li.menu-item a:hover+.arrow::after,
.header-main-menu .mobile-menu__nav li.menu-item a:hover+.arrow::before {
  background-color: var(--primary-color);
}

.mobile-menu .mobile-menu__panel .mobile-contact-header {
  flex-direction: column;
  justify-content: center;
  row-gap: 20px;
  height: 100%;
}