Can you please remove the relevant snippets from your functions.php (save them to your desktop) and insert this instead?

function change_logo_with_screenwidth(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
	(function($){
		
		// this is for loading the page on smaller screen-width 
		if ($(window).width() < 1025) {
			$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
		}
		else {
			$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo.png');
		}

		function b() {
			if ($(window).width() < 1025) {
				$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
			}
			else {
				$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo.png');
			}
		}

		$(window).on('debouncedresize', function() {
			b();
		});

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

we had to see if the srcset inserted images will follow that script …

The if(wp_is_mobile()) { is a check if you are watching it on a mobile device ! : Link

is that what you try to do – or do you always want to change the logo if the header turns to header top posiiton – even for desktop screens lower than a given value (1024px)

this maybe a quick and dirty way – and please test if it works on other browsers – and mobile browsers too:
( in that case – you do not need those functions.php entries – but i will look if there is a solution for that too)

@media only screen and (max-width: 1024px) {
    .av-logo-container img {
        content: url('https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
    }
}

i’m participant as you are- so no private content is readable for me.
But maybe it is enough to see the single frontend page.

btw. as an interim solution, you can use the Quick CSS rule:

#top #footer-page .av-section-color-overlay {
  opacity: 0.5;
  background-color: #185cc5;
}

PS : what if you just go to enfold footer settings and remove the settings on “Default Footer & Socket Settings” to default behaviour. Then open that page – edit – save – and switch then back to footer page setting.

i hope – if Günter or Ismael knows a much easier way to obtain that. ;)

i think that the above mentioned transition to show the text disturbs a bit the whole timing.
but try with a bit more delay

#top .avia-icon-circles-icon-text {
  transition: all 1s cubic-bezier(.175,.885,.32,1.275);
}

for child-theme functions.php:

function rotation_of_active_circle_icons(){
?>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
    const parent = document.querySelector('.avia-icon-circles-inner');
    const icons = parent.querySelectorAll('.avia-icon-circles-inner .avia-icon-circles-icon');
    const texts = parent.querySelectorAll('.avia-icon-circles-inner .avia-icon-circles-icon-text');
    let currentIndex = 0;
    let intervalId;

    function updateActiveClass() {
        // Remove the 'active' class from all elements
        icons.forEach(icon => icon.classList.remove('active'));
        texts.forEach(text => text.classList.remove('active'));

        // Add the 'active' class to the current index
        setTimeout(() => {
			icons[currentIndex].classList.add('active');
			texts[currentIndex].classList.add('active');
		}, 1500);

        // Update the index to the next element (loop back to 0 if at the end)
        currentIndex = (currentIndex + 1) % icons.length;
    }

    function startIntervalWithDelay() {
        // Add a delay before starting the interval
        setTimeout(() => {
            updateActiveClass(); // Ensure the first activation happens after the delay
            intervalId = setInterval(updateActiveClass, 6000);
        }, 3000); // 3-second delay before starting the interval
    }

    function stopInterval() {
        clearInterval(intervalId);
    }

    // Start the interval with delay
    startIntervalWithDelay();

    // Pause on hover and resume on mouse leave
    parent.addEventListener('mouseenter', stopInterval);
    parent.addEventListener('mouseleave', startIntervalWithDelay);
});
</script>
<?php
}
add_action('wp_footer', 'rotation_of_active_circle_icons');

here is the result for that script and your “home” page:
https://webers-testseite.de/circle-rotator.mp4

or with a background-image on your text:

#top .avia-icon-circles-icon-text {
  background-image: url(https://coachcristina.com/wp-content/uploads/2024/12/WhatsApp-Image-2024-12-11-at-11.09.04.jpeg) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transition: all 1s cubic-bezier(.175,.885,.32,1.275);
}

#top .avia-icon-circles-icon-text-inner * {
  color: #FFF
}

ok on github the filter has on top the comment: link

 * Allows to modify the default shortcode values if an attribute is missing in shortcode.
 * This will not change set attributes in shortcode.

so it is clear now – but why then the separator could be set on that example?

i guess the reason for that changing of default values is that you like all default hr’s change to those new values – so the css solution did that job.

#top .hr.hr-default {
  height: 30px;
}
#top .hr.hr-default .hr-inner {
  border: none !important;
}

but I also understand your desire to make it possible via that filter.

PS: that delay comes from the default transition timing:

.avia-icon-circles-icon-text {
  transition:all .8s cubic-bezier(.175,.885,.32,1.275);
}

it you set it to none – there will be no delay – see example page. But then not center image is shown.

#top .avia-icon-circles-icon-text {
  transition: none;
}

i do not know why the filter does not work in this case – and even if you use it as in the github example:

function custom_avf_sync_sc_defaults_array( $defaults, $sc_class, $is_modal_item, $content ){
	if( $sc_class instanceof avia_sc_hr ){
		$defaults['height'] = '30';
		$defaults['class'] = 'invisible';
	}
	return $defaults;
}
add_filter( 'avf_sync_sc_defaults_array', 'custom_avf_sync_sc_defaults_array', 10, 4 );

it does not change the allready set default hr’s

you can change them to that value via css :

#top .hr.hr-default {
  height: 30px;
}
#top .hr.hr-default .hr-inner {
  border: none !important;
}

you can see here a trial:
https://guenterweber.com/

if you hover the circle the animation stops (mouseenter) if you leave the circle – animation starts again.
Why there is a small delay – between icon and icon-text – i do not know

put this to your child-theme functions.php

function rotation_of_active_circle_icons(){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 

  // Select the parent element
  const parentElement = document.querySelector('.avia-icon-circles-inner'); // Parent

  // The classes to target and toggle
  const targetClasses = ['avia-icon-circles-icon', 'avia-icon-circles-icon-text']; // children
  const activeClass = 'active';

  // Function to rotate the active class among children with specific classes
  function rotateActiveClassPair(parent, targetClasses, activeClass, interval) {
      // Get children for each target class
      const childrenGroups = targetClasses.map(cls => Array.from(parent.querySelectorAll(<code>.${cls}</code>)));
      const maxLength = Math.max(...childrenGroups.map(group => group.length));
      let currentIndex = 0;
      let rotationInterval;

      // Ensure there are children to rotate
      if (maxLength === 0) return;

      // Function to remove all active classes
      function removeAllActiveClasses() {
          childrenGroups.flat().forEach(child => child.classList.remove(activeClass));
      }

      // Start the rotation
      function startRotation() {
          rotationInterval = setInterval(() => {
              // Remove the active class from the current pair
              childrenGroups.forEach(group => {
                  if (group[currentIndex]) {
                      group[currentIndex].classList.remove(activeClass);
                  }
              });

              // Move to the next index (loop back to the start if at the end)
              currentIndex = (currentIndex + 1) % maxLength;

              // Add the active class to the new pair
              childrenGroups.forEach(group => {
                  if (group[currentIndex]) {
                      group[currentIndex].classList.add(activeClass);
                  }
              });
          }, interval);
      }

      // Start rotating initially
      startRotation();

      // Pause the rotation and remove all active classes on hover
      parent.addEventListener('mouseenter', () => {
          clearInterval(rotationInterval); // Stop the rotation
          removeAllActiveClasses(); // Remove all active classes
      });

      // Resume the rotation when the mouse leaves the parent
      parent.addEventListener('mouseleave', () => {
          startRotation(); // Restart the rotation
      });
  }

  // Start rotating the active class every 3 seconds
  rotateActiveClassPair(parentElement, ['avia-icon-circles-icon', 'avia-icon-circles-icon-text'], 'active', 3000);

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

with your logo this might work.

remove that one rule :

.logo.avia-svg-logo svg {
  height: 220px;
  max-height: 175% !important;
  overflow: visible;
  top: 10px;
  left: calc((1510px/2) - 50vw);
  right: auto;
}

and insert instead:

.logo, .logo a {
  overflow: visible;
}

.logo.avia-svg-logo svg {
  height: 150px;
  max-height: 200% !important;
  overflow: visible;
  overflow: visible;
  left: -30px !important;
  top: 5px !important;
}

to see my converted svg – look: https://webers-testseite.de/tribal/
Advantage – you can influence inside the svg by external events

on your mockup it looks to me if the logo only moves down ( lower than the navigation)
now i looked better to that image – so you have a header with unchecked setting of : “Let Logo And Menu Position Adapt To Browser Window”

because i do not see your page – you know better your setting for container width – on my test page it is 1510px

.logo.avia-svg-logo svg {
  height: 220px;
  max-height: 175% !important;
  overflow: visible;
  top: 10px;
  left: calc((1510px/2) - 50vw);
  right: auto;
}

@media only screen and (max-width: 1509px) {
  .logo.avia-svg-logo svg {
    left: 0px;
    right: auto;
  }
}

btw: – see again test page and code for header_bg – i set in calculated height for it – because this is better to understand how it works. https://webers-testseite.de/tribal/

maybe there had to be adjustments for responsive case in addition.

PS : i think you can have a png as masking image too
https://www.w3schools.com/css/css3_masking.asp

Unfortunately, I cannot inspect the page in question. I think I could also help with your query: Link . But without the page it’s just a guess what it might look like. Maybe the link to masking images will help you.