header bg in a transparent header

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.

one of the logo graphic could not be found:
…/wp-content/uploads/2024/07/Logo-xyz-350x85px_w.png

why don’t you use a svg for that too?

then the knife:

#top .avia-menu.av_menu_icon_beside {
  border: none !important;
}

ps : i’m a bit confused about the used white svg logo – there is a lot of code inside ( working with clip-path inside is not necessary )
if you use your standard blue logo ( i optimized a bit the code ) you do not need a logo for transparency headers at all.
Because inline svg files can be ruled from outside css.
download it and use it
https://webers-testseite.de/strokmatic-logo.svg

you then can change fill page-wise for header scrolled or not etc.
(this rule works with the svg above – just insert it to your logo – and erase the transparency logo from enfold options.

.html_header_transparency #header:not(.header-scrolled) .logo svg > g {
  fill: #FFF;
}

in your case for home : you got a lot of dark backgrounds ( with that header_bg settings)
so it would be nice to have here the white filled logo too.
so if all transparency header pages have dark background – that rule only will work – because you have on header scrolled and not scrolled the white fill:

.html_header_transparency #header .logo svg > g {
  fill: #FFF;
}

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.

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;
}