Struggling to apply custom colors to social media icons via CSS

I'm using the "Circle - Solid" style of social media icon in the body (as opposed to the footer) of a page, using the Bedford template. You can see it here: https://seahorse-tulip-rfst.squarespace.com

Specifically, I would like to apply #D62028 as the default color and #BA1227 as the rollover color.

Having searched for this subject, I found a couple of answers, but none that worked for me. Can any codemasters point the way?

Cheers

past this code in custom css box

.social-icons-color-black.social-icons-style-solid .sqs-svg-icon--wrapper {
   background-color: #D62028;
}

Thanks mdhanjal — that sort of works. But the rollover state fades to black and then to gray (check it out here: https://seahorse-tulip-rfst.squarespace.com). Do you have any further ideas to remove the black and gray as well as to get the #BA1227 to be the rollover color?

Many thanks