Do you use any plugin that transforms your jpg to webp – and then uses these webp instead.
see :

supposedly it is a jpg according to the file extension – in fact it is a webp. The conversion may be the reason for the color shift.

Inspecting your original “jpg” : https://chappledesign.com/wp-content/uploads/2024/12/64_TR6_Triumph_05.jpg

photoshop does not open it as jpg – renaming it to webp – opens in Photoshop!

But can you please link to an image that shows the unwanted effect.

if you got different content height the arrows will adjust because of 50% position – maybe it is best to have an absolute value for the top position.
Next i think they should not lay over content
Because the demo ( Link ) only got smallarrow setting and no headings – this is a interims solution:

#top .avia-smallarrow-slider-heading {
  height: 100%;
  position: absolute;
}

#top .avia-smallarrow-slider .avia-slideshow-arrows {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3
}

#top .avia-smallarrow-slider .avia-slideshow-arrows .prev-slide {
  left: -35px
}

#top .avia-smallarrow-slider .avia-slideshow-arrows .next-slide {
  right: -35px
}

add to your css of first post :

.av-frame:before,
.av-frame:after {
  pointer-events: none;
}

i do not see your site – but with the demo : “Enfold Hotel” i made some tests in dev tools.
There is always a shift of bottom lines. Some browsers have that border/height 1px difference – so mybe it would be better to position all in relation to the top position.

i answered to the other topic: https://kriesi.at/support/topic/adding-google-tag-manager-in-enfold/

or try this ( replacing your GTM-IDs ) with copy&paste:

i think it is ok to have both in head section

function ava_g_tag_custom_script() { 
?>
<!-- Google Tag Manager -->
<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');
</script>
<!-- End Google Tag Manager -->  

<!-- Google Tag Manager (noscript) -->
<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) --> 
<?php
}
add_action('wp_head', 'ava_g_tag_custom_script');

but if you like to have the noscript in body tag:

function ava_g_tag_custom_script() { 
?>
<!-- Google Tag Manager -->
<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');
</script>
<!-- End Google Tag Manager -->  

<!-- Google Tag Manager (noscript) -->
<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) --> 
<?php
}
add_action('wp_head', 'ava_g_tag_custom_script');

did you compare the htaccess files – if there are differences between those who work and those which do not work?

espacially look for : application/octet-stream

by the way for Enfold Download Button – fill out only the Use File Input field

well there is on element itself on adanced tab – link setting – choose manual:

Doing this – will end on a wrap all inside that element with an anchor tag.
This anchor tag is displayed as block – so the whole width of the element ( if it is inside a 1/1 column it will have active click for the whole width.

if you only like to have the active click area on that element:

put this to quick css:

.avia-animated-number {
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

your welcome – but if you like send me the link anyway.

have a look inside your svg code – i guess both will have the same st classes ( these are former illustrator standard classes) in the mean-time it is cls. But different name same shit.
if you inspect my test page: https://webers-testseite.de/
i only use my colored svg logo – have unique classes set and the transparency logo isn’t a different one but just different fill:

.html_header_transparency #header:not(.header-scrolled) .buchstabe {
  fill: #FFF;
}

may i see your page it concerns?

well – put your code block just inside a color-section – that color section set custom class to: special-vids
inside you got your html structure like:

<section id="scrubs" class="vid">
	<div class="holder">
		<video src="/wp-content/uploads/Time-Lapse.mp4" autoplay muted loop playsinline></video>
	</div>

	<div class="story">
		<div>
			<h3>In the heart of Wildrise…</h3>
		</div>
		<div>
			<h3>…where the breezes play.</h3>
		</div>
		<div>
			<h3>We embrace the call of the wild each day.</h3>
		</div>
		<div>
			<h3>Untamed places stretch,</h3>
		</div>
		<div>
			<h3>vast and wide.</h3>
		</div>
		<div>
			<h3>Whispering secrets of a world outside.</h3>
		</div>
	</div>
</section>

put this to your child-theme functions.php:

function scrub_preparation_of_color_section() { 
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
	(function($){
		$('.avia-section.special-vids ').each(function() {
			var vids = $(this).find('.vid').detach().html();
			$(vids).prependTo($(this));
			$(this).addClass('vid').find('.container').remove();
		});
	})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'scrub_preparation_of_color_section');

see: https://webers-testseite.de/scrubbing-videos/

my css on that page is:

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

#wrap_all {
    overflow: visible;
}

.avia-section.vid {
  height: 600vh;
  position: relative;
}

.avia-section.vid div.holder {
  position: sticky;
  top: var(--enfold-header-height);
}

.avia-section.vid video {
  width: 100%;
  height: 100vh;
  object-fit: cover !important;
}

.avia-section.vid div.story {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.avia-section.vid div.story div {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

but i do not want to style it till the end. have a look how that is made in that video. – and how to handle the other .avia-section
Edit: you had to adopt now the scrubbing script to its selectors. And perhaps a debounce and resize will be needed.

you can use the embedded debounce function of enfold:

function ava_add_custom_script(){
?>
<script>
(function($){
  function b() {
      // here comes the script …
  }

  $(window).on('debouncedresize', function() {
    b();
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_add_custom_script');

i do not see any white gap on the bottom – neither on dev tools nor on my iPhone.

I usually use this type of notation using a function name to help me remember what the function is supposed to do. However, this also requires a meaningful function name. Something like : insert_widget_before_footer
Note that the function names are separated by an underscore.

You can also use a notation that makes a function name superfluous:

add_action('ava_before_footer', function() {
	if (is_page(3416)) {
		dynamic_sidebar( 'maps' );
	}
	dynamic_sidebar( 'CTA-Footer' );
});

Incidentally, there are plugins that build conditional logic into widgets. The standard plugin is complex but powerful; another small plugin is more intuitive to use: https://wordpress.org/plugins/widget-options/
but all these rules the widgets itself and not the widget areas. But f.e. if you have one widget area – you can put in the cta-button and maps widget and determine that the maps widget only is shown on contact page.

And maybe you decide to have the burger-menu on top:

#top #header #av-burger-menu-ul {
  vertical-align: top;
  padding: 125px 0 !important;
}

Well enfold provided the option to only show submenu items on hover or on click.

If you choose click we can edit that to only show one toggle open.
then put this to your child-theme functions.php:

function only_one_submenu_open_on_burger(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
  (function($) {
    $('body').on( 'click touch', '.av-active-burger-items > a', function () {
      $(this).parent('li').siblings().removeClass('av-show-submenu');
      $(this).parent('li').siblings().find('ul').slideUp( "fast");
    });
    $('body').on( 'click touch', '.av-active-burger-items .av-width-submenu > a', function () {
      $(this).closest('.sub-menu').siblings().find('li').removeClass('av-show-submenu');
      $(this).closest('.sub-menu').siblings().find('ul').slideUp( "fast");
    });
  })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'only_one_submenu_open_on_burger');

after doing that i will have a look to your site to optimize if needed.