CSS <content> is overwriting my SVG logo

Hi, I have inputted an SVG logo in my header, however only on certain pages the "visibility: hidden !important;" code isn't hiding the original PNG logo. It seems there's some CSS "content: url(…)" that is overwriting the visibility hidden. Resulting in 2 overlapping logos. This content code is tagged as !important and it's proving difficult to target.

How do I hide the image here so only the svg shows?

Site: https://mrwatt.co.uk/work (it works here)

Site issue: https://mrwatt.co.uk/puregym-pride-2019 (overlapping logo)

password: 2121

Thanks

Hi, those are CSS styling code, you can put them here Website -> Website Tools -> Custom CSS. Without the style tags, like below.

Also, not sure if it's just copy and paste error, you're missing the closing } at the end of your code.

/*Hide PNG Logo*/
.header-title-logo img, .header-mobile-logo img{
      visibility: hidden !important;
  }
  
/*Replace with SVG Logo*/
div.header-title-logo a, .header-mobile-logo a{
    content: url('/file.svg') !important;
      max-width: 290px;
    margin-left: auto;
    margin-right: auto;
}