{% set id = id | default(value="") %}
{% set description = description | default(value="") %}


    <p id="{{ id }}" class="mt-0 mb-10 lg:mt-8 fade-in-up text-left lg:text-3xl text-lg leading-snug font-light tracking-tight text-black px-4 lg:px-10">
        {{ description }}
    </p>
    

<style>
    .fade-in-up {
        opacity: 0;
        transform: translateY(20px);
        position: absolute;
        transition: opacity 1s ease-out, transform 1s ease-out;
    }

    .fade-in-up.show {
        opacity: 1;
        transform: translateY(0);
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const paragraphs = document.querySelectorAll(".fade-in-up");
        let index = 0;
  
        function showNextParagraph() {
            paragraphs.forEach((p, i) => {
                p.classList.remove("show");
            });

            paragraphs[index].classList.add("show");

            index = (index + 1) % paragraphs.length; // Loop back to the first paragraph
            setTimeout(showNextParagraph, 5000); // Change paragraph every 5 seconds
        }
  
        showNextParagraph();
    });
</script>