change color of mobile toggle menu on scroll

I have this css on my site and the desktop part works great. All colors change and so does the logo. Only the hamburger menu on mobile won’t change color on scroll. I want it to turn red, but it stays white. What am I missing here?

thanks for any tips/solution

frank

++++++++++++

/* Change the Background Colour on Scroll */
.elementor-sticky--effects {
background: #ffffff!important;
transition: background 0.5s ease-in-out;
}

/* The scroll-logo is currently off./ .scroll-logo { display: none; } / Shut this logo off and activate the other logo after scroll*/
.elementor-sticky--effects .scroll-logo {
display: inline-block;
transition: display 0.5s ease-in-out, max-width 0.5s ease-in-out;
}

.elementor-sticky--effects .original-logo {
display: none;
transition: display 0.5s ease-in-out;
}

/* Change Text Colour and Links colour */
.elementor-sticky--effects .menutextcolours ul li a {
color: #000!important;
transition: color 0.5s ease-in-out, font-size 0.5s ease-in-out, line-height 0.5s ease-in-out;
}

/* Change the color of mobile menu toggle icon / .elementor-sticky--effects .elementor-menu-toggle__icon { color: #ff0000!important; / Change to the color you desire */
transition: color 0.5s ease-in-out;
}