next comment to your navigation area.
if you get rid with :

.logo {
    margin-top: -100px;
    margin-left: -200px;
}

on Enfold there is on : Header – Header Behavior : ” Let logo and menu position adapt to browser window ”
Guess that this will fit better for your layout!

you could do this instead : https://webers-testseite.de/brighter/
if you like it – i’ll show you how to.

btw: after you have seen the test-page i delete your images!
it’s just to show you how it could look like.

well if you put in quick css this – you will see that it could work this manner you started.
But : there’s too much else wrong. Have a look at your navigation and the logo behaviour on small screens. Mobile devices so to speak.
I think one should first dedicate oneself to this topic. And then go to Borderstyling.

#av_section_2.test3 {
 position:relative !important;
 z-index:1 !important;
 background:transparent url(https://bright.itsomimedia.nl/wp-content/uploads/Rand_Bright_lichtgrijs.png) !important;
 height: 340px;
 margin: -300px auto 0;
 background-size: 100% 100% !important;
 background-repeat: no-repeat !important;
 background-clip:padding-box
}

https://kriesi.at/documentation/enfold/child-theme/

On default there is no child-theme present. But you can download a predefined one from link above.
A lot of those snippets here on board only work good with a child-theme.
You can update the parent theme without the risk of lost the made adjustments to the theme.

If you are not familiar with child-theme – read that carefully – and read my tutorial on that linked page above carefully too.

for the menu links : maybe you set for all links the content of the menu as alt attribute
this comes as the code above to child-theme functions.php:

function set_menu_text_as_alt(){
?>
<script>
(function($){
		$('#avia-menu .menu-item a').each(function(){
			var menuName = $(this).find('>.avia-menu-text').text();
			$(this).attr('alt', menuName);
		});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'set_menu_text_as_alt');

try first without $(document).ready(function() this must work too

i have to see your site to give advice

and what kind of feature you like to have?

Sorry – i think this will work – but with my method you got that little message posibility in the gradient section and –
you can have all gradients (even images) in that second color-section without making allways another png file for it.

create your layout in this way:
you need for it two color-sections
the first color-section with your image and the content – i give a custom class to it:
background-with-content
the following second color-section – this is only for the gradient ( and maybe one short info text) with custom class:
background-with-message

the image and the gradient could be done in the alb element itself as you know allready.

put this to your quick css:

.avia-section.background-with-content {
  border-bottom-right-radius: 200px;
  z-index: 5;
  position: relative;
}

.avia-section.background-with-message {
  position: relative;
  margin-top: -200px;
  z-index: 0;
}

.avia-section.background-with-message .container {
    height: 300px !important
}

.avia-section.background-with-message .container .content {
    vertical-align: bottom;
    padding-bottom: 20px !important
}

looks this way: https://webers-testseite.de/rounded-background-gradient/

Edit: on very small screens you had to make a rule for that message in the gradient container.
padding-bottom or font-size etc.

if you drag and drop that ALB ( Advanced Layout Builder ) Element ( Columns ) to your layout – the default setting of border is set to : none
click to enlarge:

If there was a setting it will end up in an inline css:
( so open one column set on that page and navigate to that tab called: “Border” and see if there are entries )

and you got this rule:

.main_menu {
    right: 20%;
}

so i guess thats why you believe that content is too small.
Your content width is at 1310px

f.e. if there are media queries – often the closing bracket is missing or there are additional ones:

you have :

.responsive .logo a {
 vertical-align:top
} /*** one curly bracket too much ***/
}

but the opened media query is closed before :

@media only screen and (min-width:990px) {
 .mobile_only {
  display:none !important
 }
}

etc. pp

same as here: https://kriesi.at/support/topic/grid-row-boxes-dont-line-up/

?

by the way a horrible example – not responsive at all

by the way – if this is the mega menu for your blog – each item got his own featured image ?

you can have infront of each mega-menu li your featured image
see here on a test page: https://webers-testseite.de/lepper/
look to “Was wir bieten” Mega Menu

it is a code from ismael that works perfectly – see here:
https://kriesi.at/support/topic/on-mega-menu-show-in-front-of-list-points-the-featured-image/#post-688912

after you only have to style these little images ! : .main_menu .avia_mega_div .attachment-thumbnail.size-thumbnail.wp-post-image
on that line : if ($args->menu->name != 'Main Menu') return $sorted_menu_objects; you must enter the name of your main menu

This method is based on the flex-box modell and the “stickyness” is allways in relation to its parent container.
See testpage here: https://webers-testseite.de/sticky-elements/
So see first if this fits your needs – otherwise you don’t need to read further.

well it will be better to see any live page to give better advice – but here we go.
a good method will be position sticky ( only Opera mini and IE11 do not support position: sticky )

it is important that on this method the default values for these elements are changed to overflow : visible:

.responsive body#top {
    overflow-x: visible;
}

#wrap_all {
    overflow: visible;
}

if you only have that on some pages it might be usefull to limit it to only these pages by f.e.:

.responsive body#top.page-id-123 {
    overflow-x: visible;
}

.page-id-123 #wrap_all {
    overflow: visible;
}

the sticky elements ( columns f.e.) stick if they have a given distance to top – and will scroll when the parent container scrolls out of the scene.
f.e. you can have on that column a menu etc.

A useful setup would be to have a color-section as surrounding container – give to that color-section a custom class:
sticky-parent
Place your columns to this color-section – the columns you like to be sticky give them a custom class:
sticky-element

on responsive case you don’t need that – because columns then stand among each other. – so we can place the css in a media query:

@media only screen and (min-width: 767px){
	.sticky-parent .entry-content-wrapper {
	  display: flex;
	  justify-content: space-between;
	  align-items: flex-start;
	}

	.sticky-parent .entry-content-wrapper:before,
	.sticky-parent .entry-content-wrapper:after {
		display:none
	}

	.sticky-element {
	    position: -webkit-sticky !important;
	    position: sticky !important;
	    top: 140px;
	    align-self: flex-start;
	    min-width: 30%;
	}
}

you can play with top position and min-width here – because even if the columns are 1/3 the flex-model rules here the width !