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
}

maybe this gives you some hints how it could be obtained: https://kriesi.at/support/topic/the-website-loads-invisible-elements/#post-1490800

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.

see my edit above – posting the same time

try:

#top picture.avia_image {
  display: flex !important;
}

and maybe you like to have more contrast on hovering the images:

#top a.avia_image .av-image-caption-overlay-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display:  grid;
  margin: 5px 25px;
  font-size: 1.2em
}

#top a.avia_image:hover .av-image-caption-overlay-center {
  color: #940000;
  background-color: rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
}

#top .av-image-caption-overlay-center p {
  margin: 10px 0 !important;
}

the filter avf_logo_subtext is nice to have both Logo Image and Text

try instead:

function use_text_logo_only($logo){
  $link = apply_filters( 'avf_logo_link', home_url( '/' ) );
  $logo_tag = "h1";
  $logo_heading = "Wayne Anderson";
  $alt = get_bloginfo( 'name' );    
  $title = get_bloginfo( 'name' );

  $logo = '<a class="logo text-logo" href="'.$link.'" alt="'.$alt.'" title="'.$title.'"><'.$logo_tag.'>'  .$logo_heading.'</'.$logo_tag.'></a>';
  return $logo;
}
add_filter('avf_logo_final_output','use_text_logo_only');

and on quick css:
(maybe with your header setting – you had to adjust the css a little bit )

#top .logo.text-logo  {
  display: flex;
  justify-content: left;
  align-items: center;
  width: auto;
}
#top .logo.text-logo h1  {
  margin: 0 !important;
  font-size: 30px;  /* adjust to your needs */
  text-transform: uppercase !important;
}

PS: if you like to have different alt and title tags replace in the snippet above with hardcoded strings

$alt = "your alt attribute";    
$title = "your title attribute";

and if you do not like to have a h1 – just replace to a different tag ( h2, div, span etc. ) but then you had to adjust the css to that tag

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

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/

PS: Nice side effect: you could equip two sections on the same page (each loop) – you would then only have to place it in one color section:

    <video class="responsive-background-video" 
           autoplay muted loop playsinline
           data-video-mobile="hero-mobile.mp4"
           data-video-desktop="hero-desktop.mp4">
        <source src="" type="video/mp4">
    </video>
    <div class="content">Hero Content</div>

and then in another section:

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

You must then add the corresponding data-video attributes to your video links.

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