header button and icon not changing colour when scroll

Ive tried to create an adaptive header, however when I scroll ive gotten the nav menu to change colour, however when I apply the same method to the icon and button nothing changes, any help is greatly appreciated!

all have css class as header-text

teamsood.com

here is the css used

.logo img {
max-width: 140px;
height: auto;
transition: all 1s ease;
}
.elementor-sticky--effects .logo img {
max-width: 120px;
height: auto;
}


.scrolling-header {
 transition: all .5s ease!important;
}

selector.elementor-sticky--effects{
background-color: rgba(255,255,255)!important
}

selector.elementor-sticky--effects >.elementor-container{
min-height: 90px;
}

.elementor-sticky--effects .logo img {
max-width: 120px;
height: auto;
}

.elementor-sticky--effects .header-text ul li a {
 color: #7a7a7a!important;
}