if you look at the svg i offer to you – with a texteditor. you can see the structure i gave to it.
The xml structure of a svg file is similar to a html page – there is a heading area with info to the svg file and maybe some styling settings.
then there are groups / path etc. some vectorbased graphic elements.
your whole logo has an ID – the brand got an own ID and your subline too.
you now can change the fill information of those path by adressing those ID’s
(The dotted rectangles indicate that I have only hidden the paths within the groups.)

so if you set the blue svg logo to enfold logo options – you can change the fill to white by quick css via some css rules. Thats all.
now you got your white svg logo – but filling the path with blue if the header had no transparency – it will show the blue svg.

html:not(.html_header_transparency) #header .logo svg path {
  fill: #173F6B !important;
}

ok then do it the other way round .

for your non transparent pages use:

html:not(.html_header_transparency) #header .logo svg path {
  fill: #173F6B !important;
}

but my comment is : look with a good texteditor to your svg and inside my reconstructed. i do not see a need to use clip-path inside.

you have this css :

.avia-table-1 td:nth-child(2) {
  width: 70%;
}

and that only influences the first table!

btw.: This is the by intention:

@media only screen and (max-width: 767px) {
  .responsive .avia_responsive_table .avia-data-table .avia-button-row, .responsive .avia_responsive_table .avia-data-table tr:first-child th {
    display: none;
  }
}

This rule hides the first header.

aber es ist doch genau das, das der Content dem Inhalt hinzugefügt werden soll. Daher eben auch mit dem Wrapper <style> … </style> damit es als inline css wirken kann – und damit hatte ich nie Probleme auf die Schnelle css nur für die entsprechende Seite einzubinden:
________
but it is exactly that, to add the content to the content. Hence the wrapper <style> ... </style> so that it can act as inline css – and I’ve never had any problems quickly integrating css just for the corresponding page:

see the inline css from my example page above:

irgendwie muss doch unterschieden werden, ob ich styles oder scripte einfüge. Das geht ja auch mittels des code block elements.
_______
Somehow it has to be differentiated whether I insert styles or scripts. This is also possible using the code block element.

if it is only a matter of opacity – you can work with transition

but best would be to see the site you like to have that to give better advice.
f.e.:

#header .logo img,
#header.header-scrolled .logo img {
  transition : opacity 1s ease;
}

why did you set this rule?

.parent-pageid-3375 .mfp-arrow, 
.parent-pageid-3375 .mfp-container {
    display: none!important;
}

is that a trial to not show the enfold lightbox?

how do you embed this Essential Grid gallery to your pages?

Enfold has some triggers to hamper lightbox showing on standard enfold lightbox elements like images.
F.e.: if the gallery is inside a container with custom class: noLightbox

On your current website, I can’t find out exactly what is set as the logo color in your CD. So if it’s not #173F6B, just change it in a good text editor before you upload the svg.

good text editors f.e.: on windows: notepad++ – on OSX : sublime text

you have both rulesets of mine in your quick css.
The blur effect only goes to background-color – because there is the gradient instead – it does not take effect.
see the background-image above and on the bottom – when i switch off the gradient

PS i would then work with transparency on that only by rgba value and set the opacity of header_bg to 1

so at the end only this rules the header_bg:

#top .av_header_transparency .header_bg {
  opacity: 1;
  filter: alpha(opacity=100);
}

html.html_header_transparency #top #header:not(.av_header_transparency) .header_bg {
  background-color: rgba(0,0,0,0.7) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html.html_header_transparency #top .av_header_transparency .header_bg {
  background-color: rgba(0,0,0,0.4) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

play with blur values and rgba ( the a ) value

you can increase your font-size for that.

#avia2-menu .menu-item a {
  font-size: 14px;
}

Yes – that’s right, the rule set will not be able to override other rules, but whether it is applied itself depends on the specificity. For CSS, it’s important that the selector you want to work has more specificity.
Your custom class is unique, but if there is a rule with an ID, and it concerns to the same element, it will win the competition.
more points – higher Selectivity.
here is a calculator : https://specificity.keegan.st/

• !important always wins, unless several selectors have received an !important.
• Inline styles (e.g. <h1 style=”color: red;”></h1>) = 1000 points
• CSS IDs (e.g. #container, #header) = 100 points
• Pseudo-classes/elements (e.g. :nth-of-type) = 10 points
• CSS classes (e.g. .alert, .js) = 10 points
• HTML elements (e.g. h1, p, blockquote ) = 1 point

f.e. : here is a usage of pseudocontainer after – and combination of outline and inset shadow

https://webers-testseite.de/grid-rows/

This looks like a frame around a painting that casts a shadow on the picture.

For someone who has only started 8 topics, I probably wrongly assumed that I was dealing with a newbie. I apologise for that. Some users come here as beginners , others are very experienced – so there is no need to be snarky here, as no one posts an expertise of their skills here, we can never know at what level we must answer. My question about the selectors used in the rule you applied also went unanswered, so unfortunately I can’t help you further.

or try :
remove the background-image – and your settings for: #top .av_header_transparency .header_bg

html.html_header_transparency #top #header:not(.av_header_transparency) .header_bg {
  background-color: rgba(0,0,0,0.7) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html.html_header_transparency #top .av_header_transparency .header_bg {
  background-color: rgba(0,0,0,0.4) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

this is a kind of frosted glas effect – it blurs the background with a given overlay color.

PS : maybe you give that a chance?
Test:

html #top  #menu-item-search a {
  transform: translateX(25px) scale(0.6);
  transform-origin: right;
  width: 85px !important;
}

html #top  #menu-item-search a {
  border: 1px solid #FFF !important;
  font-size: 40px !important;
  color: #8FCCF7 !important;
  text-align: center !important;
  padding: 0px !important;
  position: relative;
  top:1px;
}

html.av-burger-overlay-active #top #menu-item-search a {
  position: relative;
  color: #19304D !important;
  background-color: #27868E !important;
  border: 1px solid #e1e1e1 !important;
}

html #top  #menu-item-search:hover a {
  color: #FFF!important;
  background-color: #237299 !important;
  border: 1px solid #FFF !important;
}

html.av-burger-overlay-active #top #menu-item-search:hover a {
  color: #333!important;
  background-color: #27868E !important;
}

#top .avia-search-tooltip .avia-arrow-wrap {
  top: -20px;
  right: 35px;
}

#top .header_color #menu-item-search .avia-tt {
	background: #237299 !important;
}

#top .header_color #menu-item-search  #searchsubmit {
  background-color: #399bcb;
}