document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll('img.lazy');
  
    if ("IntersectionObserver" in window) {
      let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            let img = entry.target;
            img.src = img.dataset.src; // Move data-src to src
            img.classList.remove("lazy");
            img.classList.add("fade-in"); // Optional: add a CSS animation
            observer.unobserve(img);
          }
        });
      });
  
      lazyImages.forEach(img => observer.observe(img));
    }
  });