hm – if so – then it had to be a part of your layerslider – because on my testpage i got an advanced layerslider too on top – but ajax search acts normal.
https://webers-testseite.de
or https://webers-testseite.de/advanced-layerslider/

sorry Typo in link

css depends on the place where you show it – f.e. in the top header:

#top #wrap_all .av-social-link-bluesky:hover a {
    color: #fff;
    background-color: #1185fe;
}
#top #wrap_all .av-social-link-bluesky a svg * {
    fill: var(--enfold-header_replacement_menu_color);
}
#top #wrap_all .av-social-link-bluesky a:hover svg * {
    fill: #FFF
}

now – thanks for the admin permissions.

i did what i mentioned above: for the thumbs in grid i take the portfolio size (495×400)
using that snippet to have original images in the ajax preview image ( on imagify you have choosen to have no compression – so original image might be of less file-size than the recalculated large image-size )
and disabeling the enfold option to use lazyloading ( maybe the option of wp-rocket is better )

but with these changings – you can see a much better loading performance.

in additon – i decided to show on lightbox the full image ( because your large recalculated images are much bigger in file-size than the full one )
and to have no scroll on background – on opend lightbox.

you know that and how you can add your own social media icons to the enfold system.

open that page on editor – see on the right side inside “Layout” box : “Header visibility and transparency” – choose your option

Edited – because there is that existing filter to influence the shown image in preview …

you can find the defintions of standard icons on enfold/includes/config-enfold/init-base-data.php

Easy Slider is on default using:

'svg__next_big'  	=> array( 'font' => 'svg_entypo-fontello', 'icon' => 'right-open-big' ),
'svg__prev_big'  	=> array( 'font' => 'svg_entypo-fontello', 'icon' => 'left-open-big' ),

The Filter you can use to change these icons is: avf_default_icons

you can use it like this in your child-theme functions.php:

function avia_replace_default_icons($icons){
// e.g.: changed by uploaded svg files - using the ID's and the font-name is svg_wp-media-library
	$icons['svg__prev_big'] =  array( 'font' =>'svg_wp-media-library', 'icon' => '50913');
	$icons['svg__next_big'] =  array( 'font' =>'svg_wp-media-library', 'icon' => '50591');     
	return $icons;
}
add_filter('avf_default_icons','avia_replace_default_icons', 10, 1);

but: What is the font-name of your uploaded icon-set

you find that information on :

now f.e. if you like to replace these standard icons by icons of the iconset : medical

function avia_replace_default_icons($icons){
	$icons['svg__prev_big'] =  array( 'font' =>'medical', 'icon' => 'uf101');
	$icons['svg__next_big'] =  array( 'font' =>'medical', 'icon' => 'uf135');     
	return $icons;
}
add_filter('avf_default_icons','avia_replace_default_icons', 10, 1);

you can find those font icon codes f.e. on trying to place that icon you like to have and hover it :
( it is the value inside the brackets – without that backslash)

you can try:

#top .avia-featureimage-slideshow .avia-caption-title a {
  display: inline-block;
  line-height: 1.4em;
  background-color: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  padding: 5px 8px;
  border: 2px solid #FFF;
  border-radius: 5px
}

Just leave out the border styling if you don’t like to have it. I’ve now adjusted it so that it fits the button.

the position of those arrows is set in testimonials.css by:

#top .av-large-testimonial-slider .avia-slideshow-arrows a {
  margin-top: -1px
}

so if you like them above the content area – try:

@media only screen and (max-width:767px) {
  #top .avia-testimonial-wrapper {
    overflow: visible !important;
  }
  #top #wrap_all .av-large-testimonial-slider .avia-slideshow-arrows a {
    margin-top: -50px;
    opacity: 0.5;
  }
}

but you had to be shure that the content from above the testimonials does not come into conflict with that area.

Perhaps the developers should set this setting to this value (“Block and Hide reset all options button”) by default after Enfold Activation. Too many people have accidentally pressed this button despite a warning pop-up.

Where can we inspect that issue?
– ok i found your page tabijapon –
do you have a webp plugin installed? if i place an image element with enfold only and set the animation to “slightly zoom the image” – i do not have these bars.
Now i try to find out where it comes from…

or – if you only miss those icons – you can find them in the docu as downloadable zip files : https://kriesi.at/documentation/enfold/icon/#download-fontello-or-flaticon-icons-included-in-enfold-demos

for medical : https://kriesi.at/documentation/enfold/wp-content/uploads/sites/22/2022/08/medical.zip

Edit: here is the solution with working separators on those color-sections

the color-section that should react like this:
give a custom class to it: av-video-section
give a background-color to it that does not disturb your video switch (not white – something that fits to your video content
place a codeblock element on top of your color-section ( codeblock to content – not as codesnippet)

<video class="responsive-background-video" 
        autoplay muted loop playsinline
        data-video-mobile="path/to/mobile.mp4"
        data-video-desktop="path/to/desktop.mp4">
    <source src="" type="video/mp4">
</video>

this to your quick css:

.responsive #top #wrap_all .avia-section.av-video-section {
  position: relative;
  overflow: hidden; 
  min-height: initial; /* taken from Enfold section setting  */
}
.responsive #top #wrap_all .avia-section.av-video-section .container {
  position: relative;
  z-index: 1;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}  
.responsive #top #wrap_all .avia-section.av-video-section .responsive-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  z-index: 0;
  min-height: inherit; /* transfer from Enfold section setting  */
}
.responsive #top #wrap_all .avia-section.av-video-section .avia-divider-svg {
  z-index:2;
}
.responsive #top #wrap_all .avia-section.av-video-section .avia-divider-svg.avia-to-front {
  z-index:100;
}

the snippet for child-theme functions.php

function custom_responsive_background_video_script() {
?>
<script>
(function($) {
    "use strict";

    $(document).ready(function() {
        $('.responsive-background-video').each(function() {
            const video = this;
            const $video = $(video);
            const source = video.querySelector('source');
            const win = $(window);
            
            // Get video paths from data attributes
            const mobileVideo = $video.data('video-mobile');
            const desktopVideo = $video.data('video-desktop');
            
            if (!mobileVideo || !desktopVideo) return;
            
            function updateVideoSource() {
                const isMobile = win.width() < 768;
                const newSrc = isMobile ? mobileVideo : desktopVideo;
                
                if (source.src.indexOf(newSrc) === -1) {
                    source.src = newSrc;
                    video.load();
                }
            }
            
            // Initial load
            updateVideoSource();
            
            // Resize handling
            win.on('debouncedresize', updateVideoSource);
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_responsive_background_video_script', 999);

see example page with divider : https://webers-testseite.de/background-video/

what you can do – ( not with enfold specific tools )!

do not set the background-image with enfold color-section settings.
put into the color-section on top a code-block element with this content
(adjust to your path and videos):

See Solution on next posts

Theory and practice: I cannot see any improvement in performance. Unfortunately.