{% set header = header | default(value="") %}

<div class="max-w-3xl">
    <h2 id="typing-text" class="mx-auto fade-in">
    </h2>
</div>        
     
  <style>
    /* Fade-in animation for the grid items */
    .fade-in-box {
      opacity: 0;
      animation: fadeIn 2.2s ease-in-out forwards;
    }
  
    /* Fading in each grid item with a slight delay */
    .fade-in-box:nth-child(1) { animation-delay: 0s; }
    .fade-in-box:nth-child(2) { animation-delay: 0.2s; }
    .fade-in-box:nth-child(3) { animation-delay: 0.4s; }
    .fade-in-box:nth-child(4) { animation-delay: 0.6s; }
    .fade-in-box:nth-child(5) { animation-delay: 0.8s; }
    .fade-in-box:nth-child(6) { animation-delay: 1s; }
    .fade-in-box:nth-child(7) { animation-delay: 1.2s; }
    .fade-in-box:nth-child(8) { animation-delay: 1.4s; }
    .fade-in-box:nth-child(9) { animation-delay: 1.6s; }
    .fade-in-box:nth-child(10) { animation-delay: 1.8s; }
    .fade-in-box:nth-child(11) { animation-delay: 2s; }
    .fade-in-box:nth-child(12) { animation-delay: 2.2s; }
  
    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }
  </style>
  
  <script>
    document.addEventListener("DOMContentLoaded", function () {
        const text = "Take Control of Your AI Future";
        const textElement = document.getElementById("typing-text");
        let loopCount = 0;
        const maxLoops = 1;
  
        function typeText(i, callback) {
            if (i < text.length) {
                textElement.textContent += text.charAt(i);
                setTimeout(() => typeText(i + 1), 100);
            } else {
                setTimeout(callback, 2000);
            }
        }
  


  
        function loopTyping() {
            if (loopCount < maxLoops) {
                typeText(0, () => {
                    deleteText(() => {
                        loopCount++;
                        loopTyping();
                    });
                });
            } else {
                typeText(0, () => {}); // Final typing with no delete
            }
        }
  
        loopTyping();
    });
  </script>