
.mobile-menu-button {
    display: none;
}

@media (max-width: 850px) {

    .mobile-menu-button {
        display: flex !important;
        position: fixed !important;

        top: 12px !important;
        right: 12px !important;

        width: 44px !important;
        height: 44px !important;

        padding: 0 !important;

        border: 1px solid rgba(84,37,184,.18) !important;
        border-radius: 12px !important;

        background: #ffffff !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        z-index: 999999 !important;

        box-shadow:
            0 5px 18px
            rgba(0,0,0,.12) !important;

        cursor: pointer !important;
    }

    .mobile-menu-button span {
        display: block !important;

        width: 22px !important;
        height: 2px !important;

        background: #5425b8 !important;

        border-radius: 10px !important;

        transition:
            transform .25s ease,
            opacity .2s ease;
    }

    .language-switcher {
        margin-right: 52px !important;
    }

    .navbar nav {
        display: flex !important;

        position: fixed !important;

        top: 68px !important;
        left: 12px !important;
        right: 12px !important;

        width: auto !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 4px !important;

        padding: 12px !important;

        background: #ffffff !important;

        border:
            1px solid
            rgba(84,37,184,.14) !important;

        border-radius: 16px !important;

        box-shadow:
            0 15px 40px
            rgba(37,16,82,.20) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform:
            translateY(-8px) !important;

        transition:
            opacity .2s ease,
            transform .2s ease,
            visibility .2s ease !important;

        z-index: 999998 !important;

        max-height:
            calc(100vh - 90px) !important;

        overflow-y: auto !important;
    }

    .navbar.mobile-menu-open nav {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform:
            translateY(0) !important;
    }

    .navbar nav a {
        display: block !important;

        width: 100% !important;

        padding:
            13px 15px !important;

        border-radius:
            10px !important;

        color:
            #2b125e !important;

        font-size:
            14px !important;

        font-weight:
            700 !important;

        text-decoration:
            none !important;

        text-align:
            left !important;
    }

    .navbar nav a:active {
        background:
            #f0eaff !important;
    }

    .navbar.mobile-menu-open
    .mobile-menu-button
    span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .navbar.mobile-menu-open
    .mobile-menu-button
    span:nth-child(2) {
        opacity: 0;
    }

    .navbar.mobile-menu-open
    .mobile-menu-button
    span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }
}
