Custom CSS Almost Working

The website I am working on is still behind a ‘Coming Soon’ page so I can’t provide a link to it… but I can point to what I’m trying to do from another website I have created.

The issue: I am trying to create a button on the main navigation menu by defining a css class in the Custom CSS section and then adding it to the menu item in the menus section.

It ALMOST works – in that the menu item is the correct colour, but the text colour hasn’t changed to white.

I have it working on another website (https://NavigatingHealthcare.ca) where you can see the ‘Book a Consultation’ is a red button with white text.

Here’s the CSS I used:

.menu-btn {
background-color: #9d213c;
border-radius: 20px;
color: white;
}

And the CSS class in the menu section is: menu-btn.

EXCEPT the font remains black in the Astra theme and is difficult to read.

Is there somewhere else I need to tweak to get this to work in Astra? Thanks.