First :
Cross-Origin Resource Sharing (CORS)
Safari often blocks media if it is loaded from a different domain (including a subdomain or a CDN proxy such as usercontent.one), unless the server explicitly sends the correct CORS headers.
If the main page is hosted on rootsandjazz.dk but the video comes from usercontent.one, Safari treats this as a “cross-origin” request.
If the HTTP header is missing an Access-Control-Allow-Origin: *, Safari will block the content, while other browsers are often more lenient.

…
Second:
Byte-Range Requests (The Prime Suspect)
Safari requires that the server support byte-range requests for video files. This means that Safari does not request the entire file at once, but rather in small chunks.
Proxies or CDNs (such as the usercontent.one system) are sometimes configured to deliver files only as “whole” units.
If the server does not respond with a 206 Partial Content status code, Safari simply aborts the loading process.

________

Next:
Check the file format: Make sure the video is encoded as H.264 MP4. Safari often has issues with unusual encodings when served via a CDN.

Trial:
.htaccess configuration: If you have access to the .htaccess file, you could try explicitly allowing CORS:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

But:
There is a 90% chance that this is due to the way usercontent.one delivers the file (byte-range support). The user should try disabling the “Performance Cache” or “CDN” for the media library in the One.com dashboard.
_____________
Here’s a quick tip: You can test this yourself by opening Safari’s Web Developer Tools (Cmd + Option + I) and checking the “Network” tab. If the status code for the video file shows as 200 OK but Safari doesn’t play the video, then support for 206 Partial Content is definitely missing.

yes – but you can add a class to the accordion element itself.

then you can select by:

.togglecontainer.custom-class  .av_toggle_section:nth-child(9) .toggler.activeTitle {
  background-color: #5b9bd4;
  color: #003247; 
}

so you can address even if you got multiple accordions on one page.

btw. you can select by that ID:

#toggle-my-special-toggler.activeTitle – the ID : my-special-toggler goes directly to the toggler

FOIT – Flash of Invisible Text Effect

To give it a name for the sake of clarity, the effect is called “Flash of Invisible Text.” This means our text content flashes briefly after the web font has loaded. Of course, the abbreviation sounds better: FOIT (“Flash Of Invisible Text”).

The normal process is that while the font is still loading, text is automatically displayed in the system font after 3 seconds. We can speed this up using the CSS directive font-display: swap;.

However, what is intended for fonts prevents icon fonts from loading correctly—because they have no browser fallback equivalent.

Or read here for more info: https://css-tricks.com/almanac/properties/f/font-display/

if you look the rule:

#top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont="entypo-fontello"]::before {
  font-family: 'entypo-fontello';
}

you see what is the crux: no fallback Font – so if you swap those icon-fonts – the browser does not know what to show.

here you see the wanted behaviour by swap:

h1 {
  font-family:'opensans-flex',Helvetica,Arial,sans-serif
}

if the browser is still loading the opensans-flex files – it will show your content with Helvetica instead.

EDIT: It is incredibly difficult to transfer the size from the left side of the TinyMCE editor to the preview on the right, depending on the SVG property. And all while preserving the “floating” property.

how did you “when i add a SVG icon to a page,”

if it is an Enfold Element like image or image with hotspot ect. – Enfold actually has CSS rules within avia-builder.css / avia-builder.min.css for these cases.
if you like to influence the preview inside textblock and backend:

you can set via child-theme functions.php that preview size.

function admin_head_mod(){
echo '<style type="text/css">
  .wp-admin .avia_textblock img[src*=".svg"] {width: 80px !important;height: auto !important;}
</style>';
}
add_action('admin_head', 'admin_head_mod');

the point is the even not inline svgs need an absolute dimension ( % and auto will not work )

but:

this part where enfold loads this css for the preview window is inside: class-template-builder.php
there are filters we can use to influence the preview now.

place a file custom-preview-fix.css inside enfold-child/css/

add_filter('avf_preview_window_css_files', function($css) {
    $css[ get_stylesheet_directory_uri() . '/css/custom-preview-fix.css' ] = 1;
    return $css;
}, 999);

and have inside custom-preview-fix.css:

#av-admin-preview img[src*=".svg"]:not([is-svg-img="true"]) {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}

#av-admin-preview .alignleft { float: left; margin: 0 20px 20px 0; }
#av-admin-preview .alignright { float: right; margin: 0 0 20px 20px; }
#av-admin-preview .aligncenter { display: block; margin-left: auto; margin-right: auto; }

Edit: something new to me – yes Mike is right – it is the “different” mobile menue – and you choose the same menue as the desktop menue.

______________
For me a mobile Menue is always the hamburger one on enfold –

But even then – there is no conflict because what is id in text-menu ist a class on hamburger menue.
My suggestion is that you use a footer-menue in this way:

this will end in duplicate ID’s

understanding that flexbox layout:
https://webers-testseite.de/flex-columns-understanding/

Not really—don’t use the “equal-height” option; instead, set the “align-items: stretch” option for the flex container.
Take another look at the example page.
By the way: “align-items: stretch” is the default value on flex containers — so you don’t need to specify it explicitly.

_____________ just for info ______________

/* === flex container settings (default values):  === */
flex-direction: row	  /* === Side by side, not one below the other. === */
flex-wrap: nowrap   /* === Everything on a single line, no line breaks. === */
justify-content: flex-start  /* === Everything left-aligned (on the vertical axis). === */
align-items: stretch  /* === Full height (on the horizontal axis). === */

/* === Items Settings (default values):   === */
flex-grow: 0   /* === No automatic filling of empty space. === */
flex-shrink: 1  /* === Shrinking is permitted if space is limited. === */

see my post above.

Are you using any caching tools ? They mostly got an option to clear the cache, if you edit (update) a post/page.
Next: Browser do also Cache Pages. Sometimes they deliver the cached Content. etc.

btw. : have a look what happens to your top divider on home page if you add this to your quick css:

#top.home #av_section_1 .avia-divider-svg.avia-divider-svg-top {
  transform: scaleY(-1);
  top: -39px;
}

#top.home #av_section_1 .avia-divider-svg.avia-divider-svg-top svg {
  fill: #FFF !important;
}

#top.home #av_section_1 .scroll-down-link {
  bottom: 25px;
}

you see on the first two images the position where you can enter a custom value:
https://kriesi.at/support/topic/making-the-logo-bigger-2/#post-1496110

if you enter 200px there on “header custom height” ( i guess you are now back to “large” ) you had to synchronise that max-height value on #top #menu-item-logo img rule to 200px too.

@media only screen and (min-width: 990px) {
  #top #menu-item-logo a {
    display: inline-block;
    transform-origin: center top;
  }

  #top #menu-item-logo img {
    max-height: 150px;
    height: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}

synchronise the max-height : 150px to what you have determined in the header enfold start height options.

Even with a vector-based SVG logo, this font (the smaller one in your logo) would no longer be legible.

You could make the header area larger overall, but then let it shrink so it doesn’t take up too much space.

_________________
Another option would be to display the logo larger at first and then have it move to the desired position inside navigation as the page is scrolled.
this for child-theme functions.php:

function logo_shrink_navigation(){
?>
<script type="text/javascript">
(function($) {
    function initLogoScrollAnimation() {
        // ===== CONFIGURATION =====
        var config = {
            maxScroll: 100,
            scaleStart: 2.3,
            scaleEnd: 1,
            translateYStart: 80,    // Starting point shifted in the Y direction (e.g. 80px for down shift)
            translateYEnd: 0,       // End point (must be 0 for the final position)
            translateXStart: -230,  // Starting point shifted in the X direction (e.g. -100px for the left)
            translateXEnd: 0        // End point (must be 0 for the final position)
        };
        // =========================
        
        var ticking = false;
        var $menuLogo = $('#menu-item-logo');
        var $menuLogoLink = $menuLogo.find('a');
        var $menuLogoImg = $menuLogo.find('img');
        var logoWidth;
        
        function updateLogo(scrollTop) {
            var progress = Math.min(scrollTop / config.maxScroll, 1);
            
            // Skalierung berechnen
            var scaleDiff = config.scaleStart - config.scaleEnd;
            var scale = config.scaleStart - (scaleDiff * progress);
            
            // Y-Verschiebung berechnen
            var translateYDiff = config.translateYStart - config.translateYEnd;
            var translateY = config.translateYStart - (translateYDiff * progress);

            // X-Verschiebung berechnen (NEU)
            var translateXDiff = config.translateXStart - config.translateXEnd;
            var translateX = config.translateXStart - (translateXDiff * progress);
            
            var extraSpace = (scale - 1) * logoWidth / 4;
            
            // Transform mit translateX ergänzt
            $menuLogoLink.css('transform', 'translateX(' + translateX + 'px) scale(' + scale + ') translateY(' + translateY + 'px)');
            
            $menuLogo.css({
                'margin-left': -extraSpace + 'px',
                'margin-right': -extraSpace + 'px',
                'z-index' : '19'
            });

            $menuLogoImg.css({
                'background-color': 'rgba(255,255,255,0.8)',
                'backdrop-filter': 'blur(5px)',
                'border-radius': '25px',
                'border': '1px solid #FFF'
            });
        }
        
        $(window).on('scroll', function() {
            var scrollTop = $(window).scrollTop();
            
            if (!ticking) {
                window.requestAnimationFrame(function() {
                    updateLogo(scrollTop);
                    ticking = false;
                });
                ticking = true;
            }
        });
        
        // Logo-Breite messen und initial setzen
        logoWidth = $menuLogoLink.outerWidth();
        updateLogo($(window).scrollTop()); // Initialen Scrollwert beim Laden berücksichtigen
    }
    
    $(document).ready(function() {      
        setTimeout(function() {
            initLogoScrollAnimation();
        }, 300);
    });  
})(jQuery);

</script>
<?php
}
add_action('wp_footer', 'logo_shrink_navigation');

the confic section is for the starting look of your logo (scale, shift x and y-axis etc)

look at start this way:

after scroll it is in the center of your nav.