.mobile-nav-button {
    cursor: pointer;
    padding: 0;
    border: none;
    background: transparent;
    position: relative;
    z-index: 199;
    width: 40px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-nav-button__icon {
    display: none;
    position: relative;
    width: 40px;
    height: 3px;
    background-color: #01996D;
}

@media (max-width: 991px) {
    .mobile-nav-button__icon {
        display: block;
    }
}

@media (max-width: 500px) {
    .mobile-nav-button__icon {
        display: block;
    }
}

.mobile-nav-button__icon::after,
.mobile-nav-button__icon::before {
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    background-color: #01996D;

    /* трансформация при закрывании */

    transition: transform .15s ease-in, top .15s ease-in .15s;
}

.mobile-nav-button__icon::before {
    left: 0;
    top: -10px;
}

.mobile-nav-button__icon::after {
    left: 0;
    top: 10px;
}

.mobile-nav-button__icon.active {
    background-color: transparent;
}

.mobile-nav-button__icon.active::before {
    transform: rotate(45deg);
    top: 0;

    /* трансформация при открывании */

    transition: top .15s linear, transform .15s ease-in .15s;
}

.mobile-nav-button__icon.active::after {
    transform: rotate(-45deg);
    top: 0;

    /* трансформация при закрывании */

    transition: top .15s linear, transform .15s ease-in .15s;
}

.