Is it possible to animate automatically the Icon Circles?

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');

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
}

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');