.overlay-menu {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: flex-start;
     z-index: 2;
}

menu {
     background-color: #fff;
     box-shadow: 0rem 0.4rem 1.4rem rgba(0, 0, 0, 0.09);
     padding-bottom: 2.1rem;
     z-index: 1;
     list-style-type: unset;
     margin-block-start: 0;
     margin-block-end: 0;
     margin-inline-start: 0;
     margin-inline-end: 0;
     padding-inline-start: 0;
     min-height: 69vh;
}

.menu-nav {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
     grid-column-start: 1;
     grid-column-end: 101;
}

.menu-nav--main {
     display: flex;
     flex-direction: row;
     align-content: center;
     justify-content: center;
     align-items: center;
     text-align: center;
     cursor: pointer;
     background-color: #fff;
}

.menu-nav--wrap {
     display: none;
     position: relative;
     width: 100%;
     min-height: 56vh;
     padding: 2rem 3rem;
     border-radius: 0.5rem;
     grid-column-start: 4;
     grid-column-end: 98;
     overflow-y: auto;
     overflow-x: hidden;
}

.menu-nav--wrap.active { display: grid; }

.lavel-one {
     width: 39.5rem;
     border-radius: 0.5rem;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     grid-column-start: 1;
     grid-column-end: 41;
     list-style: none;
}

.menu-li {
     position: relative;
     width: 100%;
     padding: 0.7rem 1rem;
     border-radius: 0.5rem;
}

.menu-li--link {
     width: fit-content;
     height: 4rem;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
     grid-column-start: 2;
     grid-column-end: 41;
     cursor: pointer;
}

.multi > .menu-li--link:after {
     content: '';
     align-self: center;
     width: 1.2rem;
     height: 1.4rem;
     margin-left: 1rem;
     background-image: url(/local/templates/ventluki/img/menu-icon--next.svg);
     z-index: 1;
}

.menu-li--name {
     display: flex;
     height: 100%;
     text-align: left;
     flex-direction: row;
     align-content: center;
     justify-content: flex-start;
     align-items: center;
     color: #131313;
     font-family: Inter;
     font-weight: 400;
     font-size: 1.7rem;
     line-height: 2.4rem;
     margin-left: 0.7rem;
}

menu a { text-decoration: none; }

.lavel-one--icon {
     width: 4rem;
     height: 4rem;
}

.lavel-two, .lavel-three {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     position: absolute;
     width: fit-content;
     border-radius: 0.5rem;
     grid-column-start: 43;
     grid-column-end: 68;
     list-style: none;
     opacity: 0;
     z-index: -1;
}

.lavel-three {
     grid-column-start: 70;
     grid-column-end: 95;
}

.lavel-two--item {
     margin-left: 3rem;
}

.lavel-three--item {
     margin-left: 6rem;
}

@media (min-width: 600px) {
    menu, .menu-nav--main { min-width: 82rem; }
     .overlay-menu {
          transform: translateY(-100vw);
     }
     
     .menu-close, .menu-title, .catalog-nav--close { display: none; }
     
     .menu-nav {
          justify-content: start;
          width: fit-content;
     }
     
     .menu-nav--main {
          padding: 2rem;
          font-family: InterBold;
          font-weight: 700;
          font-size: 2rem;
          line-height: 2.4rem;
          color: #131313;
     }
     
     .menu-nav--main.active {
          background-color: #131313;
          color: #fff;
     }
     
     .menu-nav--main:hover {
          background-color: #FA601A;
          color: #fff;
     }
     
     .menu-nav--main.active:hover {
          background-color: #131313;
          color: #fff;
     }
     .menu-li--name {
          width: fit-content;
     }
     
     .menu-li:hover {
          background-color: #F6F6F6;
     }
     
     li:hover > ul, ul:hover {
          opacity: 1;
          z-index: 2;
     }
     
     .lavel-two, .lavel-three {
          top: 0rem;
          left: 35.5rem;
         white-space: nowrap;
     }
     
     .lavel-three {
          top: 0;
          left: 20rem;
          width: 28rem;
     }
     
     .lavel-two--item {
          margin-left: 3rem;
     }
     
     .lavel-three--item {
          margin-left: 6rem;
     }
}

@media (max-width: 599px) {
     .overlay-menu {
          transform: translateY(-100vh);
     }
     
     .catalog-nav--close {
          position: absolute;
          top: 2.6rem;
          right: 2rem;
          width: 1.5rem;
          height: 1.5rem;
          background-image: url('/local/templates/ventluki/img/close.svg');
          z-index: 1;
     }
     
     .menu-title {
          display: inline-block;
          width: 36rem;
          margin-top: 2rem;
          margin-left: calc((100% - 39rem) / 2);
          font-family: InterMedium;
          font-weight: 500;
          color: #131313;
          text-transform: uppercase;
          font-size: 2.2rem;
          text-align: left;
          line-height: 2.6rem;
     }
     
     .menu-nav {
          width: 39rem;
          margin-top: 14.7rem;
          margin-left: calc((100% - 39rem) / 2);
          justify-content: space-evenly;
     }
     
     .menu-nav--main {
          padding-bottom: 0.1rem;
          font-family: InterSemiBold;
          font-weight: 700;
          font-size: 1.8rem;
          line-height: 2rem;
          color: #9B9A9A;
     }
     
     .menu-nav--main.active {
          color: #131313;
          border-bottom: 0.1rem solid #131313;
     }
     
     .multi > .menu-li--link:after {
          position: absolute;
          right: 0;
     }
     
     .menu-li.active {
          background-color: #F6F6F6;
     }
     
     li.active > ul {
          position: relative;
          opacity: 1;
          z-index: 2;
     }
     
     .lavel-two--item, .lavel-three--item {
          margin-left: 3rem;
     }

     .menu-nav--wrap { min-height: fit-content!important; }
     menu { min-height: fit-content!important; }
}