Nav colour not correct when rolled over - appears lighter

Hi
I am currently developing a site and through Custom Css we have applied a colour onto the rollover. We are having problems with the colour showing differently in different areas. For example, in the navigation on the home page the colour renders correctly when you rollover. When you go into a page, Shop, for example, the red is lighter when you rollover. Throughout the site where we have a hyperlink the red is lighter, it's as if it has an opacity to it. The css we are using is:

a:not(.sqs-block-button-element) {
    color: #101820 !important; // standard link color
    &:hover {
        color: #9d2235  !important; // hover color
    }
    &:active {
        color: #c1c638  !important; // color link goes when clicked
    }
}
 

The three screen grabs show the darker colour on the nav which is correct and the lighter colour. The thrid shows the lighter rollover when used in a hyperlink.

Can anyone help with this or suggest a better method?

Thanks.