/************************ mobile menu start ****************/
.mobile-menu {
  width: 300px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -310px;
  background-color: var(--white-color);
  z-index: 60;
  padding: 60px 24px;
  overflow-y: scroll;
  -webkit-transition: var(--transition-base);
  -o-transition: var(--transition-base);
  transition: var(--transition-base); }
  .mobile-menu .close {
    position: absolute;
    right: 20px;
    top: 20px;
    color: var(--primary-color); }
    .mobile-menu .close:hover {
      color: var(--secondary-color); }
  .mobile-menu .logo {
    width: 100%;
    display: block;
    background-color: var(--primary-color);
    text-align: center; }
  .mobile-menu .mobile-nav-menu {
    margin-top: 32px; }
    .mobile-menu .mobile-nav-menu li {
      display: block; }
      .mobile-menu .mobile-nav-menu li + li {
        border-top: 1px solid var(--light-stroke); }
      .mobile-menu .mobile-nav-menu li a {
        display: block;
        color: var(--primary-color);
        padding: 10px 0; }
      .mobile-menu .mobile-nav-menu li.has-submenu {
        position: relative; }
        .mobile-menu .mobile-nav-menu li.has-submenu > i {
          position: absolute;
          right: 0;
          top: 6px;
          padding: 8px;
          -webkit-transition: var(--transition-base);
          -o-transition: var(--transition-base);
          transition: var(--transition-base); }
          .mobile-menu .mobile-nav-menu li.has-submenu > i.icon-rotate {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
        .mobile-menu .mobile-nav-menu li.has-submenu > .submenu-wrapper {
          padding-left: 15px;
          display: none; }
  .mobile-menu .mobile-search input {
    width: 100%; }
  .mobile-menu .mobile-search button span {
    padding: 0;
    width: 50px;
    height: 50px; }
  .mobile-menu.active {
    left: 0; }