animations

 <div class="main-sect-first-word">Transforming Businesses 
   </div>
 <div class="main-sect-second-word"> Through     
    <div class="main-switch">
        <div class="switch-wrapper">
        <div class="one switch">
            <div class="one circle"><span></span></div>
            <div class="word">Digitally</div>
        </div>
    </div>
    <div class="switch-wrapper">
        
    <div class="two switch">
            <div class="two circle"><span></span></div>
            <div class="word">Creatively</div>
        </div>
    </div>
    <div class="switch-wrapper">
    
        <div class="three switch">
            <div class="three circle"><span></span></div>
            <div class="word">Strategically</div>
        </div>
    </div>
</div>
</div>



.one.switch:before {
    animation: bgExpand1 2.5s ease-in-out infinite alternate;
  }
  
  .one.circle {
    animation: toggleSwitch1 2.5s ease-in-out infinite alternate;
  }
  
  .two.circle {
    animation: toggleSwitch2 2.5s ease-in-out infinite alternate;
  }
  
  .two.switch:before {
    animation: bgExpand2 2.5s ease-in-out infinite alternate;
  }
  
  .three.circle {
    animation: toggleSwitch3 2.5s ease-in-out infinite alternate;
  }
  
  .three.switch:before {
    animation: bgExpand3 2.5s ease-in-out infinite alternate;
  }
  
  .one.switch:before {
    animation: bgExpand1 2.5s ease-in-out infinite alternate;
  }
  
  .two.switch:before {
    animation: bgExpand2 2.5s ease-in-out infinite alternate;
  }
  
  .three.switch:before {
    animation: bgExpand3 2.5s ease-in-out infinite alternate;
  }
  
  @keyframes toggleSwitch3 {
    0% {
      transform: translateX(0px);
    }
  
    100% {
      transform: translateX(318px);
    }
  }
  
  @keyframes bgExpand3 {
    0% {
      width: 60px;
    }
  
    100% {
      width: 385px;
    }
  }
  
  @keyframes toggleSwitch2 {
    0% {
      transform: translateX(0);
    }
  
    100% {
      transform: translateX(262px);
    }
  }
  
  @keyframes bgExpand2 {
    0% {
      width: 60px;
    }
  
    100% {
      width: 325px;
    }
  }
  
  @keyframes toggleSwitch1 {
    0% {
      transform: translateX(0px);
    }
  
    100% {
      transform: translateX(206px);
    }
  }
  
  @keyframes bgExpand1 {
    0% {
      width: 60px;
    }
  
    100% {
      width: 270px;
    }
  }
  
  .one.switch {
    width: 270px;
  }
  
  .two.switch {
    width: 325px;
  }
  
  .three.switch {
    width: 385px;
  }
  
  .switch {
    position: relative;
    height: 65px;
    border-radius: 100px;
    overflow: hidden;
    background-color: transparent;
    margin-bottom: 20px;
    margin-top: 5px;
  }
  
  .switch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 100px;
    z-index: 0;
    background: linear-gradient(90deg, #89d501 0%, #33b1ad 100%);
    box-shadow: 1.673px -8.366px 41.829px 0px rgba(0, 0, 0, 0.2) inset;
  }
  
  .circle {
    width: 58px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient(90deg, #89d501 0%, #33b1ad 100%);
    padding: 4px;
    box-sizing: border-box;
    position: absolute;
    top: 3px;
    left: 5px;
    z-index: 4;
  }
  
  .circle span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #f2f2f2;
    font-size: 18px;
    font-weight: bold;
  }
  .word {
    position: absolute;
    top: 9%;
    left: 20px;
    opacity: 0;
    transition: opacity 2.2s ease;
    z-index: 2;
    color: #f3f3f3;
    text-align: start;
    font-style: normal;
    line-height: normal;
    font-size: 42px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: expand-collapse 5s ease-in-out infinite;
  }
  
  @keyframes expand-collapse {
    0% {
      width: 0;
      opacity: 0;
    }
  
    45% {
      width: 100%;
      opacity: 1;
    }
  
    100% {
      width: 0;
      opacity: 0;
    }
  }
  
  .main-heading .title {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    line-height: 70px;
    white-space: nowrap;
  }
  <script>
  const items = document.querySelectorAll('.switch-wrapper');
  let currentIndex = 0;
  const animationDuration = 5000;

  function startCycle() {
      items.forEach((item) => {
          item.style.display = 'none';
      });

      function showNextSwitch() {
          items[currentIndex].style.display = 'none';
          const currentItem = items[currentIndex];
          currentItem.querySelectorAll('.circle, .switch:before').forEach((el) => {
              el.style.animation = 'none';
              el.offsetHeight;
              el.style.animation = '';
          });
          currentIndex = (currentIndex + 1) % items.length;
          items[currentIndex].style.display = 'block';
      }
      items[currentIndex].style.display = 'block';
      setInterval(showNextSwitch, animationDuration);
  }
  startCycle();
</script>    

<!-- circle-animtion-end -->






<!DOCTYPE html>
<html lang="en">

<head>
 <style>
    .main-image-wrapper {
  z-index: 0;
}
.mainhomesect .image {
  position: absolute;
  width: 100%;
  max-width: 650px;
  object-fit: contain;
  transition: transform 8s ease-in-out;
}
img#image1 {
  transform: translate(48vw, -30vh);
}

img#image2 {
  transform: translate(-1vw, -30vh);
}

img#image3 {
  transform: translate(-39vw, 20vh);
}

img#image4 {
  transform: translate(-1vw, 72vh);
}

img#image5 {
  transform: translate(48vw, 72vh);
}

img#image6 {
  transform: translate(56vw, 20vh);
}

 </style>
</head>

<body>
  <div class="main-image-wrapper">
    <img src="https://mmcgbl.com/wp-content/uploads/2025/01/aerial.webp" alt="Image 1" class="image" id="image1">
    <img src="https://mmcgbl.com/wp-content/uploads/2025/01/getfit.webp" alt="Image 2" class="image" id="image2">
    <img src="https://mmcgbl.com/wp-content/uploads/2025/01/howwe.webp" alt="Image 3" class="image" id="image3">
        <img src="https://mmcgbl.com/wp-content/uploads/2025/01/aerial.webp" alt="Image 1" class="image" id="image4">
    <img src="https://mmcgbl.com/wp-content/uploads/2025/01/getfit.webp" alt="Image 2" class="image" id="image5">
    <img src="https://mmcgbl.com/wp-content/uploads/2025/01/howwe.webp" alt="Image 3" class="image" id="image6">
  </div>
 <script>
    const positions = [
      { x: 48, y: -30 }, //img1
      { x: -1, y: -30 }, //img2
      { x: -39, y: 20 }, //img 3
      { x: -1, y: 72 }, //img 4
      { x: 48, y: 72 }, //img5
      { x: 56, y: 20 } //img 6
    ];

    const images = [
      document.getElementById('image1'),
      document.getElementById('image2'),
      document.getElementById('image3'),
      document.getElementById('image4'),
      document.getElementById('image5'),
      document.getElementById('image6')
    ];


    const animateImages = () => {
      const lastPosition = positions.pop();
      positions.unshift(lastPosition);
      images.forEach((image, index) => {
        const pos = positions[index];
        image.style.transform = `translate(${pos.x}vw, ${pos.y}vh)`;
      });
    };
      setTimeout(() => {
      setInterval(animateImages, 8000);
      animateImages();
    }, 4000);
  </script>
</body>

</html>