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

when creating these svgs for the dividers – the opaque area must cover the entire width and be at the top of the svg.
if you have responsive svgs, then the following should be at the top of the svg tag : preserveAspectRatio="none"

if you look at the silouette of my home town on my example page, it would be awful if the width remained at 100% but the height could be set variably. in this case i have set: xml:space="preserve" preserveAspectRatio="xMidYMin meet"

and by colour is meant the background colour of the header – as Mike already suspected?

you can look what selectors the background-color of the header is for. and change it via that page-id of your single page.

#top.page-id-46970 .header_color .header_bg {
  background-color: green
}

#top.page-id-46970 .header_color .container_wrap_meta {
  background-color: green
}

____________________________

or you can change f.e. the variable that is set by enfold options ( like mike above shows )
these colors are for header:
–enfold-header-color-bg
–enfold-header-color-bg2

where bg is header background-color – and bg2 is header_meta background-color

you can change these settings via filter for one single page only by:

( because the page / post ID goes to the html as class: html_entry_id_12345 we can use that as selector )

function my_avf_dynamic_css_after_vars($output = ''){
  $output .= "\n";
  /*** Override a defined var for a specific page id*/
  $output .= "html.html_entry_id_46970  {\n";
  $output .=    "--enfold-header-color-bg: #aaa;\n";
  $output .=    "--enfold-header-color-bg2: #aaa;\n";
  $output .= "}\n";
  return $output;
}
add_filter( 'avf_dynamic_css_after_vars', 'my_avf_dynamic_css_after_vars', 10, 1 );

replace the color #aaa to your wanted values.

Once the code snippet has been successfully entered, the page/browser caching must be refreshed.

you find the page-id-xyz or postid-xyz on the body tag. You had to adjust the codes above to your id and wanted colors.

by the way: you can animate your existing wave by:
but i recommend using my svg files from above – and as custom svg dividers!
because your replaced the mountains svg by your wave:

@keyframes move-forever {
  0% {
    transform: translate3d(-100px, 0, 0);
  }
  100% {
    transform: translate3d(100px, 0, 0);
  }
}

.avia-divider-svg.avia-divider-svg-mountains path:nth-of-type(1) {
  animation: move-forever 15s linear infinite;
}
.avia-divider-svg.avia-divider-svg-mountains path:nth-of-type(2) {
  animation: move-forever 25s linear infinite;
}
.avia-divider-svg.avia-divider-svg-mountains path:nth-of-type(3) {
  animation: move-forever 5s linear infinite;
}

there are different ways to animate an svg – but you had to prepare the svg first.
my approach on that is to include everything inside the svg itself.

The basis of the Enfold separators (but Divi, Elementor etc are no different) is to have a cover area within the svg that forms the connection to the next/previous section. This is then filled with #000 by default, and then replaced with a different colour using the element option.

On your example page, it is set in motion from outside using keyframe animation.

PS : did you switch in this moment to hamburger from the beginning – a few minutes ago – there was the normal desktop navigation seen.?

PPS: i see now the reason – you have a switch rule for 2000px – my recommendation is to only have hamburger for your navigation:
Enfold Options – Main Menu – Menu Items For Desktop : “Display as Icon”

and remove then the rules concerning to that switch point.

After doing this we will see if the problem is solved so far. because your rules do set all menu items to display none – even the #menu-item-search

it is all well documented in the docu. You can download the child at docu too: https://kriesi.at/documentation/enfold/child-theme/
If you feel unsure about this, please ask a mod to help you.

Maybe backup your page first – to have a fallback option.
After that we can start to have our own custom svg shape dividers.