How to change phone info links, to white when transparent header is used.

Hi i have tried a lot of different code but i cannot seem to figure it out. I am wanting to change my header extra info “links” to be white font when it is a transparent header and a darker font once a person scrolls.

This is the code in the quick css i was trying to change, does not seem to be doing anything

#top .av_header_transparency #header_meta a:hover a:link {
color: #fff;
}

This below is changing the padding and font size of the extra info for mobile etc, not sure if this is having some effect on it.
/***Extra info above menu changes****/

/* Add your Mobile Styles here */
@media only screen and (max-width: 640px){
.av_phone_active_left .phone-info {
font-size: 14px;
letter-spacing: 0.05em;
padding: 3%!important;
}}

/* Add your Tablet Styles here */
@media only screen and (min-width: 641px) and (max-width: 1023px) {
.av_phone_active_left .phone-info {
font-size: 15px;
letter-spacing: 0.05em;
padding: 2%!important;
}}

/* Add your Laptop Styles here */
@media only screen and (min-width: 1024px) and (max-width: 1679px) {
.av_phone_active_left .phone-info {
font-size: 16px;
letter-spacing: 0.05em;
padding: 1%!important;
}
.social_bookmarks li {
margin: 4px;
}}

/* Add your Desktop Styles here */
@media only screen and (min-width: 1680px) {

.av_phone_active_left .phone-info {
font-size: 17px;
letter-spacing: 0.05em;
padding: 1%!important;
}
.social_bookmarks li {
margin: 8px; important
}}