it is this snippet:

add_action('wp_head', 'enfold_customization_add_scripts');
function enfold_customization_add_scripts() {
    ?>
    <link rel="stylesheet" href="https://use.typekit.net/rww4dia.css">
    <?php
}

that my comment is for. On my htaccess file i do not allow loading from different sources than my own domain.
If i would place such a snippet – it will not be loaded – allthough the snippet might be correct.

if that is not the reason for not loading – try to enqueue that css file:

function enqueue_external_css() {
   wp_enqueue_style( 'adobe_typekit', 'https://use.typekit.net/rww4dia.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_external_css', 20 );

_______________

i do not know if your first snippet do run with newest enfold. This code snippet has been valid for half an eternity.
For my installations i use now instead:

function my_output_google_webfonts_script( $activate ){
  return false;
}
add_filter( 'avf_output_google_webfonts_script', 'my_output_google_webfonts_script', 10, 1 );

Or perhaps your security settings (htacces file, etc.) prevent you from using URLs other than those of your own domain. So loading from https://use.typekit.net/rww4dia.css is not allowed.

first: You then no longer need to change the svg code to make further settings regarding the dimensions.

#top .logo svg {
  padding: 5px 0;
}

(although I think it’s actually good if everything remains legible even when it’s shrunk)

in your case – i picked up your svg code from your site and open it in a good vectorbased Program. ( Adobe Illustrator or for Mac from Apple: Affinity

btw. that Affinity Suite : With three programs, they offer at least as much functionality as the Adobe programs and currently cost 90 euros (one-off payment | incl. tax) for all three programs.

In your case, I can see that a lot of unnecessary groups have been created. So I first ungroup all the existing groups and removed several clipping masks. I then created some meaningful groups (the branding is a group, and the subliner is a group).

Unfortunately, these programs (Adobe Illustrator etc.) always create meta data that has no need to be placed in the actual vector code. I remove such code manually. For multi-colored or even gradient-filled areas, the different classes on the paths make sense, but if groups or even the whole svg only have one color, I manually delete this information and only add it back to the groups. This sounds very time-consuming, but with a good text editor it can easily be done in one go using search and replace.

you see that i replace even one space behind the class and replaced it with nothing – Replace All will do the job then.

PS: my personal preference with svg is to leave only the viewbox in the svg-tag and remove widths and heights.

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.