Safari is adding a black underline on my links

Site URL: https://gardenia-pumpkin-ekbe.squarespace.com/homebuying-incentive

Safari is adding a black underline to my links and that is covering my CSS hyperlink styles (light blue and on hover turns to very dark blue). 

 https://gardenia-pumpkin-ekbe.squarespace.com/homebuying-incentive

code: 1234

I have the links set to light blue in site styles and added "!important" to my code but I can't seem to get rid of that black underline. 

At first I thought my CSS wasn't reading at all for Safari, but when I zoomed in, I could see the light blue was there but it's covered by a black line. 

Current CSS: 

a {
  text-decoration-color: #1ABFDC !important;
  text-decoration-thickness: 2px !important;
}

a:hover {
  text-decoration-color: #07263E !important;
}

Any help is greatly appreciated! 

Hi, try this in your Custom CSS:

span[class^="sqsrte-text-color--"] {
  text-decoration: none
}

Hope that helps.

@Square_Ace - Thank you! That did in fact remove those pesky black lines. It is now giving me my solid light blue color but not achieving my hover effect of turning the line to dark blue. Is there some safari specific code that needs to be included? 

a {
text-decoration-color: #1ABFDC !important;
  text-decoration-thickness: 2px !important;
}

a:hover {
  text-decoration-color: #07263E !important;
}

span[class^="sqsrte-text-color--"] {
  text-decoration: none
}
 

Thank you! It worked on all of the pages except this one. I can't quite figure out why but unfortunately this page is basically all links. They aren't even showing up as light blue underline in edit mode or in Chrome browser. 

https://gardenia-pumpkin-ekbe.squarespace.com/our-partners

code: 1234

OK, actually if I retype each one in a new text block it fixes it. I am guessing this one has something to do with the formatting from where it was copy and pasted. Thanks again for your help!