document.addEventListener('DOMContentLoaded', function() {
    const imageContainer = document.querySelector('.image-container');
    const textContainer = document.querySelector('.text-container');
    
    // Add animation class to elements when page loads
    imageContainer.classList.add('animate');
    textContainer.classList.add('animate');
  });
  
  document.addEventListener('DOMContentLoaded', function() {
    const section = document.querySelector('.responsive-container4');

    function checkVisibility() {
        const rect = section.getBoundingClientRect();
        const windowHeight = window.innerHeight || document.documentElement.clientHeight;
        
        if (rect.top <= windowHeight && rect.bottom >= 0) {
            section.classList.add('active');
            window.removeEventListener('scroll', checkVisibility); // Remove listener after animation
        }
    }

    window.addEventListener('scroll', checkVisibility);
    checkVisibility(); // Check visibility on page load
});