window.addEventListener('scroll', function() {
    const navbar = document.getElementById('navbar');
    if (window.scrollY > 0) {
        navbar.style.position = 'fixed';
        navbar.style.top = '0';
    } else {
        navbar.style.position = 'fixed';
        navbar.style.top = '0';
    }
  });
  
  
  document.addEventListener('DOMContentLoaded', function() {
    const elementsToAnimate = document.querySelectorAll('.ag-courses_item');
  
    const observerOptions = {
      root: null,
      rootMargin: '0px',
      threshold: 0.25 // Trigger the animation when 50% of the element is visible
    };
  
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate');
        } else {
          // Optionally, you can remove the animation class if the element is not in view
          // entry.target.classList.remove('animate');
        }
      });
    }, observerOptions);
  
    elementsToAnimate.forEach(el => {
      observer.observe(el);
    });
  });
  
  
  
   
  
  // Function to check if element is in viewport
  function isInViewport(element) {
      const rect = element.getBoundingClientRect();
      return (
          rect.top <= (window.innerHeight || document.documentElement.clientHeight)
      );
  }
  
  // Function to trigger the animation
  function triggerAnimation() {
      const elements = document.querySelectorAll('.responsive-div');
      
      elements.forEach(element => {
          if (isInViewport(element)) {
              element.classList.add('active'); // Add active class when in view
          }
      });
  }
  
  // Trigger the animation on scroll and on page load
  window.addEventListener('scroll', triggerAnimation);
  window.addEventListener('load', triggerAnimation);
  
  
  
  
  // Function to check if element is in viewport
  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    );
  }
  
  // Function to trigger the animation only once
  function triggerAnimation() {
    const elements = document.querySelectorAll('.responsive-div, .left-div, .right-div');
    
    elements.forEach(element => {
        if (isInViewport(element) && !element.classList.contains('active')) {
            element.classList.add('active'); // Add active class when in view
        }
    });
  }
  
  // Trigger the animation on scroll and on page load
  window.addEventListener('scroll', triggerAnimation);
  window.addEventListener('load', triggerAnimation);
  
  
  
  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
  });