<style>

    :root{
        --toggle-background-color: #0071E3;
        --dont-color: #ee4444;
    }

    @keyframes cfadeInRight {
        from {
            opacity: 0;
            transform: translate3d(15px, 0, 0); /* Adjust the distance as needed */
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
    
    @keyframes dfadeInRight {
        from {
            opacity: 0;
            transform: translate3d(30px, 0, 0); /* Adjust the distance as needed */
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    .anim {
        opacity: 0;
        animation: cfadeInRight 0.3s forwards;
    
    }
    .anim2 {
        opacity: 0;
        animation: dfadeInRight 0.3s forwards;
    
    }


    .do{
        wwill-change: transform;
        transition: all 0.2s ease;
    }
    .toggle, .toggle-slider{
        cursor: pointer;
    }
    .toggle{
        will-change: transform;
        transition: all 0.3s ease;
    }
    .toggle-slider{
        transition: all 0.3s ease;
        will-change: transform;
    }
    .d-none{
        display: none;
    }
    .on.toggle{
        background: var(--toggle-background-color) !important;
    }
    .on.toggle-mobile{
        background: var(--toggle-background-color) !important;
    }
    .on .toggle-slider{
        transform:translateX(35px) !important;
    }
    
    .toggle-mobile.on .toggle-slider{
        transform:translateX(22px) !important;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const toggle = document.querySelector(".toggle");
        const toggleMobile = document.querySelector(".toggle-mobile");
        const toggleSlider = document.querySelector(".toggle-slider");
        const sec1 = document.querySelector(".section-1");
        const sec2 = document.querySelector(".section-2");
        const doele = document.querySelector(".do .elementor-heading-title");
        const sec1inners = sec1.querySelectorAll(".delay");
        const sec2inners = sec2.querySelectorAll(".delay");
        sec1inners.forEach((element, index) => {
            const delay = (index % 3) * 0.2; // Cycle through 0s, 0.2s, 0.4s
            element.style.animationDelay = `${delay}s`;
        });
        sec2inners.forEach((element, index) => {
            const delay = (index % 3) * 0.1; // Cycle through 0s, 0.2s, 0.4s
            element.style.animationDelay = `${delay}s`;
        });
        
        
        
        
    toggle.addEventListener("click", function() {
            toggle.classList.toggle("on");
            
            // Toggle the text between "do" and "don't"
            if (doele.innerText === "do") {
                doele.innerText = "don't";
                toggle.style.marginLeft = "56px";
                doele.style.color = "var(--dont-color)";
            } else {
                doele.innerText = "do";
                toggle.style.marginLeft = "0px";
                doele.style.color = "var(--toggle-background-color)";
            }
            
            // Toggle the visibility of the sections
            sec1.classList.toggle("d-none");
            sec2.classList.toggle("d-none");
        });   
    
    toggleMobile.addEventListener("click", function() {
            toggleMobile.classList.toggle("on");
            
            // Toggle the text between "do" and "don't"
            if (doele.innerText === "do") {
                doele.innerText = "don't";
                
                doele.style.color = "var(--dont-color)";
            } else {
                doele.innerText = "do";
                doele.style.color = "var(--toggle-background-color)";
            }
            
            // Toggle the visibility of the sections
            sec1.classList.toggle("d-none");
            sec2.classList.toggle("d-none");
        });   
    });
</script>