@media (max-width: 767px) {
    .main_menu.desktop {
        display: none;
    }

    .main_menu.mobile {
        display: block;
        padding: 17px 0;
    }

    .main_menu-popup {
        position: fixed;
        max-height: calc(100vh - 125px);
        height: fit-content;
        border: 8px;
        bottom: 60px;
        top: -1000vh;
    }

    .main_menu-popup.open {
        top: 50%;
    }

    .main_menu-btn {
        display: grid !important;
        grid-template-columns: 28px 1fr 28px;
        align-items: center;
        padding: 8px 12px !important;
        height: auto !important;
        text-transform: capitalize;
        border-radius: 8px;
        width: 100%;
    }

    .main_menu-btn span {
        font-size: 20px;
        line-height: 20px;
        font-style: normal;
        font-weight: 700;
    }

    .main_menu-btn .action_icon {
        display: unset;
        width: 28px;
        height: 28px;
    }

    .main_menu-popup {
        background-color: var(--main-color)
    }

    .main_menu-category-btn {
        display: grid;
        grid-template-columns: 30px auto 30px;
        background-color: #fff;
        padding: 7px;
        height: auto;
        border-radius: 5px;
        margin-bottom: 25px;
        text-align: center;
        align-items: center;
    }

    .main_menu-category-btn::before {
        content: "";
        height: 30px;
    }

    .main_menu-category-btn .link {
        color: var(--main-color);
        line-height: 21px;
        font-weight: 700;
        font-size: 18px;
        margin: auto;
    }

    .main_menu-category-btn .expand {
        border: none;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.83333 22L20.1667 22C20.6529 22 21.1192 21.8068 21.463 21.463C21.8068 21.1192 22 20.6529 22 20.1667L22 1.83333C22 1.3471 21.8068 0.880787 21.463 0.53697C21.1192 0.193153 20.6529 0 20.1667 0L1.83333 0C1.3471 0 0.880787 0.193153 0.53697 0.53697C0.193153 0.880787 0 1.3471 0 1.83333L0 20.1667C0 20.6529 0.193153 21.1192 0.53697 21.463C0.880787 21.8068 1.3471 22 1.83333 22ZM6.68479 9.43479L10.3515 5.76812C10.4366 5.6829 10.5377 5.61528 10.649 5.56915C10.7603 5.52302 10.8795 5.49928 11 5.49928C11.1205 5.49928 11.2397 5.52302 11.351 5.56915C11.4623 5.61528 11.5634 5.6829 11.6485 5.76812L15.3152 9.43479C15.4872 9.6068 15.5838 9.84008 15.5838 10.0833C15.5838 10.3266 15.4872 10.5599 15.3152 10.7319C15.1432 10.9039 14.9099 11.0005 14.6667 11.0005C14.4234 11.0005 14.1901 10.9039 14.0181 10.7319L11.9167 8.62927L11.9167 15.5833C11.9167 15.8264 11.8201 16.0596 11.6482 16.2315C11.4763 16.4034 11.2431 16.5 11 16.5C10.7569 16.5 10.5237 16.4034 10.3518 16.2315C10.1799 16.0596 10.0833 15.8264 10.0833 15.5833L10.0833 8.62927L7.98188 10.7319C7.80987 10.9039 7.57658 11.0005 7.33333 11.0005C7.09008 11.0005 6.8568 10.9039 6.68479 10.7319C6.51279 10.5599 6.41616 10.3266 6.41616 10.0833C6.41616 9.84008 6.51279 9.6068 6.68479 9.43479Z' fill='%23000000'/%3E%3C/svg%3E%0A");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 30px;
        height: 30px;
        transform: scaleY(-1);
        transition: 0ms;
    }

    .main_menu-category-btn .expand.active {
        transform: scaleY(1);
    }

    .main_menu-category-list {
        position: static;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        transition: 250ms max-height, 250ms margin-bottom;
        overflow: hidden;
        max-height: 0;
        padding: 0 10px;
    }

    .main_menu-category-list.open {
        max-height: 300vh;
        margin-bottom: 25px;
    }

    .main_menu-subcategory-btn, .main_menu-subcategory-btn-link {
        display: flex;
        justify-content: space-between;
        background-color: transparent;
        text-align: left;
        border: none;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        color: #fff;
        padding: 5px 4px;
        margin-bottom: 5px;
    }

    .main_menu-subcategory-btn::after {
        content: "";
        width: 22px;
        height: 22px;
        display: block;
        background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.83333 22L20.1667 22C20.6529 22 21.1192 21.8068 21.463 21.463C21.8068 21.1192 22 20.6529 22 20.1667L22 1.83333C22 1.3471 21.8068 0.880787 21.463 0.53697C21.1192 0.193153 20.6529 0 20.1667 0L1.83333 0C1.3471 0 0.880787 0.193153 0.53697 0.53697C0.193153 0.880787 0 1.3471 0 1.83333L0 20.1667C0 20.6529 0.193153 21.1192 0.53697 21.463C0.880787 21.8068 1.3471 22 1.83333 22ZM6.68479 9.43479L10.3515 5.76812C10.4366 5.6829 10.5377 5.61528 10.649 5.56915C10.7603 5.52302 10.8795 5.49928 11 5.49928C11.1205 5.49928 11.2397 5.52302 11.351 5.56915C11.4623 5.61528 11.5634 5.6829 11.6485 5.76812L15.3152 9.43479C15.4872 9.6068 15.5838 9.84008 15.5838 10.0833C15.5838 10.3266 15.4872 10.5599 15.3152 10.7319C15.1432 10.9039 14.9099 11.0005 14.6667 11.0005C14.4234 11.0005 14.1901 10.9039 14.0181 10.7319L11.9167 8.62927L11.9167 15.5833C11.9167 15.8264 11.8201 16.0596 11.6482 16.2315C11.4763 16.4034 11.2431 16.5 11 16.5C10.7569 16.5 10.5237 16.4034 10.3518 16.2315C10.1799 16.0596 10.0833 15.8264 10.0833 15.5833L10.0833 8.62927L7.98188 10.7319C7.80987 10.9039 7.57658 11.0005 7.33333 11.0005C7.09008 11.0005 6.8568 10.9039 6.68479 10.7319C6.51279 10.5599 6.41616 10.3266 6.41616 10.0833C6.41616 9.84008 6.51279 9.6068 6.68479 9.43479Z' fill='white'/%3E%3C/svg%3E%0A");
        transform: scaleY(-1);
    }

    .main_menu-subcategory-btn.active::after {
        transform: scaleY(1);
    }

    .main-menu-subcategory-list {
        position: static;
        margin-left: 5px;
        margin-bottom: 0;
        border-left: 1px dashed #fff;
        transition: max-height 250ms, margin-bottom 250ms;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
    }

    .main-menu-subcategory-list.open {
        max-height: 150vh;
        margin-bottom: 10px;
        transition-timing-function: ease-out;
    }

    .main_menu-link {
        display: block;
        color: #fff;
        border-radius: 0 10px 10px 0;
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
        padding: 10px 18px;
    }
}