document.addEventListener('DOMContentLoaded', () => {
      const fade_elements= document.querySelectorAll('.fade-in-out');
      const fade_left_elements = document.querySelectorAll('.fade-in-out-left');
      const fade_right_elements = document.querySelectorAll('.fade-in-out-right');
      const fade_position_elements = document.querySelectorAll('.fade-in-out-position');
      handleFadeScroll();
      window.addEventListener('scroll', handleFadeScroll);


      function handleFadeScroll() {
        if (fade_elements) {
          fade_elements.forEach(content => {
            const position = content.getBoundingClientRect();
            if (position.top + window.pageYOffset < window.scrollY + window.innerHeight - 150) {
              content.classList.add('fade-in');
            }
          });
        }
  
        if (fade_left_elements) {
          fade_left_elements.forEach(content => {
            const position = content.getBoundingClientRect();
            if (position.top + window.pageYOffset < window.scrollY + window.innerHeigh  - 150) {
              content.classList.add('fade-in-left');
            }
          });
        }
  
        if (fade_right_elements) {
          fade_right_elements.forEach(content => {
            const position = content.getBoundingClientRect();
            if (position.top + window.pageYOffset < window.scrollY + window.innerHeight - 150) {
              content.classList.add('fade-in-right');
            } 
          });
        }
  
        if (fade_position_elements) {
          fade_position_elements.forEach(content => {
            const position = content.getBoundingClientRect();
            if (position.top + window.pageYOffset < window.scrollY + window.innerHeight - 150) {
              content.classList.add('fade-in-position');
            } 
          });
        }
      }
    });