the section itself is set to : av-small-hide av-mini-hide.
those flex_columns with .scroll-reveal trigger are set on visibility : av-hide-on-mobile
look at the column advanced tab under responsive. Your added Class could not work on that – because it is set to display : none by your responsive settings.

is it because you are working with the other option to show that animation?

if this section and the columns are set to be there on responsive case the class “active” is added.

_____________________

by the way – this is my observer sccript to get a new class added to flex-columns that comes into viewport.
( i do not stop observing, because i like the animation on scroll-in/out again and again ;)

function observe_columns() {
?>
<script type="text/javascript">	
	document.addEventListener("DOMContentLoaded", function() {
	  var flexcolumns = [].slice.call(document.querySelectorAll(".flex_column"));
		
		if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){
			let flexcolumnObserver = new IntersectionObserver(function(entries, observer) {
				entries.forEach(function(entry) {
					if (entry.isIntersecting) {
						entry.target.classList.add("visible");

					}
					else {
						entry.target.classList.remove("visible");
					}  
				});

			}, {
				root: null,
				threshold: 0.1,
				rootMargin: "20px 0px -10px 0px",
			});
			
			flexcolumns.forEach(function(flexcolumn) {
				flexcolumnObserver.observe(flexcolumn);
			});
	  	}
	});
</script>
<?php
}
add_action( 'wp_footer', 'observe_columns' );

see in action f.e. under “Dienstleistungen”
https://webers-web.info/

Do you prevent the hover for first level menu items? By default, these are available for the desktop menu.
This is the reason – why i had to click (including load of that extra page) to see the sublevel menu-items.

and the answers on https://kriesi.at/support/topic/vertical-align-of-images-in-portfolio-grid/ do not fit ;)

click to enlarge:

the variable regular font of hankengrotesk got 60kb !
loog to those other fonts with over 1MB ! This comes from all the non latin fonts in there.
Think of your performance of the website.

Half-Time in Cologne ;)

we could talk about using the HankenGrotesk Variable font – to have a good fallback solution it might be good to have those static font in the background.
Enfold even supports those varible fonts
see here on firefox developer tools how they can be used:
https://player.vimeo.com/video/748702665

here are both zip files for download:
HankenGrotesk and HankenGrotesk-Variable

The trick will be to have for modern browsers the variable font and for those not supporting variable fonts the static one.

The crux is to activate on general settings the static font – and then have this in your child-theme quick css to force for all browser the variable font:

@supports (font-variation-settings: normal) {
  :root {
    --enfold-font-family-heading:'hankengrotesk-variable',Helvetica,Arial,sans-serif;
    --enfold-font-family-body: 'hankengrotesk-variable',Helvetica,Arial,sans-serif;
  }
  body.roboto {
    font-family:'hankengrotesk-variable'  !important;
  }
  h1,h2,h3,h4,h5,h6,
  #top .title_container .main-title,
  tr.pricing-row td,
  #top .portfolio-title,
  .callout .content-area,
  .avia-big-box .avia-innerbox,
  .av-special-font,
  .av-current-sort-title,
  .html_elegant-blog #top .minor-meta,
  #av-burger-menu-ul li {
    font-family: 'hankengrotesk-variable' !important;
 }
}

The first address to change is on General Styling – Fonts (Tab)
____

on the alb itself you got on styling options all you need : even the font color – and font-size.

The trick is that you can now use this class with different settings (backgrounds, font sizes and colours).

By the way – you are planning to use a chineese translation ? I do not really know why you are using such a performance hungry font for your page. I would at least set the English sentences in a similar Latin font.

For example from your page the comparison of zenkakugothicnew to (on Google Fonts) Hanken Grotesk:

alb : advanced layout builder element – or avia layout builder element.

open your image element – on content : at the bottom – choose to show a caption: “Display a caption overlay?” : enter your text there.

if you entered a text there – than you will have on styling tab an options dialog with some settings for that caption.

with overlay color your desired color (blue) and overlay opacity 1!

see here a solution for image alb element that uses the caption (your text) – with overlay color your desired color (blue) and overlay opacity 1!
css code on that example page:
https://webers-testseite.de/blue-bar-above-image/

i just look now what happens to that code if a link is on the image (external or lightbox) …

On first load – just klick one of the images of the slider – it will open a different link than the title or read-more link.
navigating with the arrows to the nex three links and go back to it than – the link of images and the rest will be ok.

well the hook : ava_main_header is just under the header_meta – it is the first child inside header_main.
Position is perfect. The rest is styling and positioning.

you can create a widget area there – or insert directly just your button:
f.e.:

function custom_func() {
?>
<div class="spezial"><div class="avia-button-wrap avia-button-right"><a href="#" class="avia-button av-link-btn avia-icon_select-yes-left-icon avia-size-medium avia-position-center avia-color-theme-color"><span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="fontelico"></span><span class="avia_iconbox_title">call to action …</span></a></div></div>
<?php
}
add_action('ava_main_header' , 'custom_func');

sorry – no private Content for me – you had to wait til mods are here.

How can I explicitly test whether it is loaded – here, for example, I can’t find anything in the network analysis.

https://kriesi.at/themes/enfold-construction/contact/

i think that the dotlottie is using some polyfill features. And some older parallax scripts do too.

For your reference, attached is a list of your projects where we have detected Maps Javascript API usage. Please check all sites associated with these projects.

thanks for the info – and these projects are Enfold Sites?