if i go more responsive than this the buttons and text wont show correctly
https://snipboard.io/olD0uW.jpg

I saw that there was a fix here: https://github.com/KriesiMedia/enfold-library/commit/944318e25cb1336935c0f8850db94ec4436a6ace

tried to add the content to wp-content
themes/enfold/config-templatebuilder/avia-shortcodes/slideshow/slideshow.js
but that didnt fix the issue

Next – big advantage of that inline svg logo.
What if you got a transparent dark header ? You can have now white letters for it – just by quick css.
You only had to know that enfold sets on header classes for that : av_header_transparency

#top.page-id-3228 #header:not(.header-scrolled).av_header_transparency .mir1,
#top.page-id-3228 #header:not(.header-scrolled).av_header_transparency .mir2 {
  fill: #FFF;
}

see: https://enfold.webers-webdesign.de/dark-header/

Edit : i switched back a logo of mine. But with the info above and the download of the svg i provided it has to work now.

how to prepare the svg file:
Layout it in a vectorbased graphic program of your choice. Most will do it with Adobe Illustrator.
Group to your needs parts of the logo – in your case i have three first level groups – and i named the level as you can see ( icon, miretta, interior ).
The level names are transformed from illustrator to group ID’s.
you see the structure of that svg – and i set the fill-opacity to the icon inside to zero:

Since Enfold supports for the logo inline svg we now can address the ID’s and Classes via CSS Rules.
Only some properties are svg specific ( fill for the background-color, fill-opacity etc. pp. – you can google that )

ok now the font – do you have from the letters an info. …
The Miretta Letters i do not find but we have a good png file of it to vectorize – see your footer.
the Interiors Letter fits well with Mrs Eaves Font.

see now the Logo: https://enfold.webers-webdesign.de/wp-content/uploads/Miretta-Logo.svg

We had one thing to do before you put in as logo file.
Enfold adds this preserveAspectRatio attribute to the logo, because that’s what few people know about svg creation. However, they set it so that x and y value shrink to the left center. But we don’t want to overwrite our statement inside the svg. Therefore Günter set a filter to avoid this overwriting. This comes as a snippet in the child theme functions.php
( if you like to shrink the logo to the left – then you don’t need that snippet – the position of the icon in the middle of the logo will be untouched of that )

function custom_svg_images_get_html( $svg, $attachment_id, $url, $preserve_aspect_ratio, aviaSVGImages $obj_svg_img, $svg_original ){
  $return_default_svg = false;
  if($return_default_svg){
    return $svg;
  }
  return $svg_original;
}
add_filter( 'avf_svg_images_get_html', 'custom_svg_images_get_html', 10, 6 );

#header.header-scrolled #icon {
  fill-opacity: 1 !important;
  transition: 1s all ease;
}

#header.header-scrolled #miretta,
#header.header-scrolled #interiors {
  fill-opacity: 0 !important;
  transition: 1s all ease;
}

#header:not(.header-scrolled) #icon,
#header:not(.header-scrolled) #miretta,
#header:not(.header-scrolled) #interiors {
  transition: 1s all ease;
}

/*** only if you like to see that the logo is shrinking inside its container to the middle ***/
.av-contains-svg, .av-contains-svg svg {
  width: 500px !important;
}

I have now rebuilt this in a quick procedure (very unprecise: Link ). Of course, it is better to have the original layout template. And the font would be good to know, then you can save the part of rebuilding already times. It is only meant as a demo.
Look again at the svg in the DOM.

#header.header-scrolled #icon {
  fill-opacity: 1 !important;
  transition: 1s all ease;
}
#header.header-scrolled #miretta,
#header.header-scrolled #interiors {
  fill-opacity: 0 !important;
  transition: 1s all ease;
}
#header:not(.header-scrolled) #icon,
#header:not(.header-scrolled) #miretta,
#header:not(.header-scrolled) #interiors {
  transition: 1s all ease;
}

and you see each group got his own class – so your can colorize it you like by fill option – and to see the preserveaAspectRatio Effect you had to hamper width shrinking of logo and logo container

#header #miretta .mir0 {
  fill: green
}
.av-contains-svg, .av-contains-svg svg {
  width: 500px !important;
}

see example page: https://enfold.webers-webdesign.de/

does the logo exist in a vector format. svg is one but illustrator etc. too.
We need this.
You don’t need to update – it is pure layout and a bit css.
PS: what is the name of the font
( click the image to enlarge )

if you inspect my logo on that page you see that the xml based notation of a svg graphic is nearby a html programming.
it could have parts like style infos and tags. see 1, 2, 3 i have that “bildmarke” in a group tag and the “letters” in different ones. I can address them with css. so my Groups got ID’s. You see on the inspection – that i set the fill-opacity of that “bildmarke” directly to zero.

This is the look of it all seen without fill-opacity zero inside the svg:

Now i can use the enfold class header-scrolled to switch the visibility.
Css code here is:

.header-scrolled #bildmarke {
  fill-opacity: 1 !important;
  transition: 1s all ease;
}

.header-scrolled #name_1,
.header-scrolled #sub_heading {
  fill-opacity: 0 !important;
  transition: 1s all ease;
}

#header:not(.header-scrolled) #bildmarke,
#header:not(.header-scrolled) #name_1,
#header:not(.header-scrolled) #sub_heading {
  transition: 1s all ease;
}

i would realize it by creating the logo as svg.
Shouldn’t be too difficult with fonts and a figurative mark.
Depending on where you want your image mark to appear after scrolling, I would then place it on the left or in the center directly inside the svg, and set the fill-opacity of this group to zero.
Then you can even change the fill-opacity animated with the class header-scrolled.

By the way – what font is it – i found similar fonts – but not exactly the same.
see here : https://enfold.webers-webdesign.de/

are you familiar with inspecting the DOM? Look what is your portfoliobox-ID

use this to get influence on image source as a snippet in your child-theme functions.php:

function my_avf_newsbox_image_size( $image_size, array $args, array $instance ){
  if( $args['widget_id'] == ( 'portfoliobox-3' || 'newsbox-2' || 'newsbox-4' ) ){
    $image_size = 'full';
  }
  return $image_size;
}
add_filter( 'avf_newsbox_image_size', 'my_avf_newsbox_image_size', 10, 3 );

______________
just for INFO:
change full to what you like to have ( small, medium, large etc. pp.) you can find the names of the enfold image-sizes on functions.php lines 211ff:

$avia_config['imgSize']['widget'] 		= array('width'=>36,  'height'=>36);			// small preview pics eg sidebar news
$avia_config['imgSize']['square'] 		= array('width'=>180, 'height'=>180);		       // small image for blogs
$avia_config['imgSize']['featured'] 		= array('width'=>1500, 'height'=>430 );			// images for fullsize pages and fullsize slider
$avia_config['imgSize']['featured_large'] = array('width'=>1500, 'height'=>630 );			// images for fullsize pages and fullsize slider
$avia_config['imgSize']['extra_large'] 	= array('width'=>1500, 'height'=>1500 , 'crop' => false);	// images for fullscrren slider
$avia_config['imgSize']['portfolio'] 		= array('width'=>495, 'height'=>400 );			// images for portfolio entries (2,3 column)
$avia_config['imgSize']['portfolio_small'] = array('width'=>260, 'height'=>185 );			// images for portfolio 4 columns
$avia_config['imgSize']['gallery'] 		 = array('width'=>845, 'height'=>684 );			// images for portfolio entries (2,3 column)
$avia_config['imgSize']['magazine'] 	= array('width'=>710, 'height'=>375 );			// images for magazines
$avia_config['imgSize']['masonry'] 	= array('width'=>705, 'height'=>705 , 'crop' => false);		// images for fullscreen masonry
$avia_config['imgSize']['entry_with_sidebar'] = array('width'=>845, 'height'=>321);		        // big images for blog and page entries
$avia_config['imgSize']['entry_without_sidebar'] = array('width'=>1210, 'height'=>423 );		// images for fullsize pages and fullsize slider