first : i think the layerslider shortcodes will only work in different places – if you got the standalone layerslider registered.
but even if you got one – i wouldn’t do that on performance reasons.

But you can insert f.e. the shortcode for easy slider. You know how to style this easy slider on a page and get the enfold shortcode for that?

Next idea is : use the enfold option to show a page as footer. Then you can style that page with all the enfold elements – and with sliders too.

try inside your child-theme functions.php:

// Inject the HTML overlay into the body
add_action('ava_after_body_opening_tag', function() {
    echo '<div id="fullscreen-overlay"></div>';
});

function timed_overlay_fullscreen_image(){
?>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        var overlay = document.getElementById('fullscreen-overlay');
        if (overlay) {
            overlay.classList.add('hidden');
        }
    }, 5000); // 5000 milliseconds = 5 seconds
  });
</script>
<?php
}
add_action('wp_footer', 'timed_overlay_fullscreen_image');

and in quick css:

#fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; 
    background-image: url(/wp-content/uploads/2016/07/corporate-buildings-m.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 9999;
    opacity: 1;
   transition: opacity 1s ease-in-out, visibility 0s linear 1s;
}

#fullscreen-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Disable interaction when hidden */
}

see: https://basis.webers-testseite.de/

if you just want to have that on your front page – than we had to adjust those snippets.

Admittedly, this is a very specific replacement for the usual \e869 icon. But that is probably what is meant by a CSS (not CMS) solution. For a simpler replacement, \e80e does not look quite as complicated.

https://webers-testseite.de/popup-gallery/

but i think now these icons are svg ones – so the simple method to replace the font-icon by just doing:

#top .image-overlay .image-overlay-inside::before {
  content: "\E80E" !important;
  font-family: entypo-fontello;
  font-size: 42px;
  font-weight: 400;
}

you know the absolute url of your svgs – what if you do open it in your browser – can you see them?

e.g.
https://your-domain.com/wp-content/uploads/avia_custom_shapes/waves-in-motion.svg

By the way, I now always upload these SVG files through the media library. In list view, I determine the ID of the attachment and add it to the array. As far as I know, neither the key nor the name needs to be specified then in the snippet.
SVG files in WordPress and Enfold are not converted to other sizes when uploaded to the media library. There are no disadvantages in this regard.

function custom_avf_custom_svg_shapes( array $custom_shapes ) {
  $custom_shapes = array(
    'waves-in-motion'       => array(
              'title'       => __( 'Waves in motion', 'avia_framework' ),
              'has_flip'    => true,
              'has_width'   => false,
              'attachment'  => 1562,
              ),
    'waves-in-motion-2' => array(
              'title'       => __( 'Waves in motion 2', 'avia_framework' ),
              'has_flip'    => true,
              'has_width'   => false,
              'attachment'  => 1565,
              ),
    );
    return $custom_shapes;
}
add_filter( 'avf_custom_svg_shapes', 'custom_avf_custom_svg_shapes', 10, 1 );

here on that page you can achieve this by:
(the old way – because using font-icons)

#top .main_menu {
  right: 145px;    /* === A correction value for the now broader social_bookmarks === */
  padding-right: 10px;
}

#header_main .social_bookmarks {
  margin: 0;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
}

#top .social_bookmarks li {
  width: 36px;
}

#top .social_bookmarks li a {
  width: 40px;
  line-height: 40px;
  min-height: 40px;
}

#top .social_bookmarks li a:before {
  font-size: 24px
}

Perhaps it needs to be adapted for your website. As a participant, I cannot see any private content, so I’m afraid I can’t offer any better advice.

NEXT: now the bookmarks are svg icons – so the css had to be different.
But i do not find an example page to do so. I had to look on one of my installatons to have that different css.

#top .avia-menu.av_menu_icon_beside {
  border-right: none;
  padding-right: 10px;
  margin-right: 10px;
}

#top nav .social_bookmarks {
  position: relative;
  transform: translateY(-50%);
  margin: 0 !important;
  height: 40px !important;
}

#top .social_bookmarks li {
  width: 40px;
  margin-left: 3px
}

#top .social_bookmarks li a {
  width: 40px !important;
  line-height: 40px;
  border-radius: 10px !important;
  min-height: 40px;
}

#top .social_bookmarks li.avia-svg-icon img[is-svg-img="true"], 
#top .social_bookmarks li.avia-svg-icon svg:first-child {
  height: 1.5em;
  width: auto;
  margin-top: 5px;
}

how did you insert those full_sliders ? because they are twice on your site as your told us above.
some are out of wrap_all ? so your footer is there – but over these copied sliders!

see your footer here: https://eustasis.com/#footer

upload that svg to your media library: Cookie SVG

and put this to your quick css:

#av-cookie-consent-badge:before {
  display: block;
  position: relative;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left:0;
  background-image: url("/wp-content/uploads/cookie.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

adjust the url with your path

i did not check your selectors if they are correct but in your media query

@media only screen and (max-width: 767px) {
  .avia-data-table.avia_pricing_minimal td, 
  .avia-data-table.avia_pricing_minimal th {
  padding: 0px;
  }
} /* === here is one missing curly bracket === */

do not forget the closing bracket ( two opening brackets – only one closing )

___________

Next : if you got a pricing-table – there are no table layouts (body, th, td etc) these are created as lists!
so if you got a pricing table – then the selectors are not o.k.

PS: i didn’t know that even minimal data tables – got that class: avia_pricing_minimal
so with that one missing closing bracket your codes seems to working.

you have mixed two elements here on your page – the one is the tab-section
and the images belong to these av-section-tab-title

the other element is inside your content of the tab-section element. (Tabs) – and indeed they only have the option to show icons!
but – if you got svg images – you could place these files by choosing wordpress media library as source for your icons.

next hint: no one hampers you to insert left to the tab title :
<img class="alignleft" src="/wp-content/uploads/globe-color.png" alt="" width="40" height="40" />

you can horizontally center these images with the tab-titles by:

.tabcontainer .tab_titles .tab {
  display: flex;
  align-items: center;
}

there will be warnings – but you can ignore them – it works!

maybe it is a working way to have an explicite mobile menu – because the other solution is to have a child-theme avia-snippet-hamburger-menu.js file.

____________________________________________

you have to look for this part inside:

if( cur_menu.length )
{
  if( cur_menu.get(0).hash == '#' || 'undefined' == typeof cur_menu.attr('href') || cur_menu.attr('href') == '#' )
  {
    // eventhandler conflict 'click' by megamenu (returns false) - ignore all handlers
    if( subitems.length > 0 || megacolumns.length > 0 )
    {
      clone_events = false;
    }
  }
}

and replace it by:

// AVOID CONFLICT: Keep events for the GTranslate menu item
if( ! current.hasClass('menu-item-gtranslate') )
{
  if( cur_menu.length )
  {
    if( cur_menu.get(0).hash == '#' || 'undefined' == typeof cur_menu.attr('href') || cur_menu.attr('href') == '#' )
    {
      // eventhandler conflict 'click' by megamenu (returns false) - ignore all handlers
      if( subitems.length > 0 || megacolumns.length > 0 )
      {
        clone_events = false;
      }
    }
  }
}

All seems to work now!
but please: https://kriesi.at/support/topic/use-code-tag-for-posting-snippets-e-g-implementing-google-tag-script/

to check your code it would be easier if you use the code tag here on the board.

It would be helpful to determine whether the issue is specific to Enfold or if it is a more widespread problem. I suggest temporarily activating one of the standard WordPress themes and checking whether these replacement characters are still displayed in the editor.

on #main you set the padding-top to zero for all headers – so add that rule in your media query setting

@media only screen and (max-width:1024px) {
  .responsive .logo img,
  .responsive .logo svg {
    max-height:120px
  }
  .responsive #top #wrap_all .main_menu {
    height:120px
  }
  .responsive #top #header_main>.container .main_menu .av-main-nav>li>a,
  .responsive #top #wrap_all .av-logo-container {
    height:120px;
    line-height:120px
  }
  .responsive.html_header_transparency #top #main {
    padding-top: 0 !important
  }
  .responsive:not(.html_header_transparency) #top #main {
    padding-top: 120px !important
  }
}

It’s a shame not to use the Advanced Layout Builder (ALB) with an Enfold installation. The ALB is what makes Enfold attractive. I always use the ALB with the Classic Editor (Theme Options > Select Your Editor). However, I know some users here who use the block editor and still use Enfold’s layout elements. Giving up the ALB means giving up all its advantages.

Such an error, in which text is displayed in square blocks with question marks (so-called “tofu characters” or “replacement characters”), almost always indicates a problem with the character encoding or the fonts used.

Can you take a screenshot of what it looks like?