Burger menu colour change on mobile with transparent menu

Hello everyone!
I have a following problem, that I could not workout solution to.

On my website aparthotel.czterywiatry.pl I have a burger menu on mobile with transparent and sticky menu.
I achieved that results based on custom CSS code from various forums.

/* Transparent Header For Mobile & Tablet */
@media only screen and (max-width: 1200px) {
    #top #wrap_all .av_header_transparency, 
    .av_header_transparency #advanced_menu_toggle { 
        background-color: transparent; 
    }
    .responsive #top #wrap_all #header { 
        position: fixed; /* Ensure this is fixed for sticky behavior */
        z-index: 1000; /* Add a high z-index to keep it above other elements */
        top: 0; /* Position it at the top of the viewport */
        left: 0;
        width: 100%; /* Ensure it spans the full width */
    }
}

/* Hide regular menu items and display burger menu */
@media only screen and (max-width: 1200px) {
    .menu-item {
        display: none!important;
    }
    .main_menu {
        display: block !important;
    }
    .av-burger-menu-main.menu-item-avia-special {
        display: block!important;
    }
}

/* Transparent Logo on Header */
@media only screen and (max-width: 1200px) {
    .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
        opacity: 0;
    }
    .responsive #top .av_header_transparency .logo img.alternate {
        display: block;
    }
}

The problem is the colour of the burger menu. I wish to set it to white when the menu is transparent and to #161f5c when user scrolls down and the menu background becomes white. I tried using option both in Theme Options -> Transparency Menu Color and in Main Menu -> Burger Menu Styling. In both cases I can only set one colour that would not change with scrolling.

What is interesting this problem only appears on screens with resolution less than 768 px. On wider screens when the burger menu popups it is styled correctly.