document.addEventListener('DOMContentLoaded', () => {

    const VisibleHeading2 = document.querySelectorAll('.Heading2');
    const VisibleHeadingInRightSide = document.querySelectorAll(".Heading-In-Right-Side");
    const VisibleTextInRightSide = document.querySelectorAll(".Text-In-Right-Side");
    const VisibleHeading3 = document.querySelectorAll(".Heading3");
    const VisibleHeadingInLeftSide2 = document.querySelectorAll(".Heading-In-Left-Side2");
    const VisibleTextInFourthBlock = document.querySelectorAll(".Text-In-Fourth-Block");
    const VisibleTextInLeftSide2 = document.querySelectorAll(".Text-In-Left-Side2");

    const VisibleTextInSeventhBlock = document.querySelectorAll(".Text-In-Seventh-Block");
    const VisibleProposal = document.querySelectorAll(".Proposal");
    const VisibleFirstBottomSideCardInSixthBlock  = document.querySelectorAll(".First-Bottom-Side-Card-In-Sixth-Block");
    const VisibleSecondBottomSideCardInSixthBlock  = document.querySelectorAll(".Second-Bottom-Side-Card-In-Sixth-Block");
    const VisibleThirdBottomSideCardInSixthBlock  = document.querySelectorAll(".Third-Bottom-Side-Card-In-Sixth-Block");
    const VisibleFourthBottomSideCardInSixthBlock  = document.querySelectorAll(".Fourth-Bottom-Side-Card-In-Sixth-Block");
    const VisibleHeading4 = document.querySelectorAll(".Heading4");
    const VisibleHeading5 = document.querySelectorAll(".Heading5");
    const VisibleTextInTenthBlock = document.querySelectorAll(".Text-In-Tenth-Block")

    const observerOptions = {
        root: null, 
        threshold: 0.9
    };

    const observerCallback = (entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('is-visible'); 
                observer.unobserve(entry.target); 
            }
        });
    };

    const observer = new IntersectionObserver(observerCallback, observerOptions);

    VisibleHeading2.forEach(element => {observer.observe(element);});
    VisibleHeadingInRightSide.forEach(element => {observer.observe(element);});
    VisibleTextInRightSide.forEach(element => {observer.observe(element);});
    VisibleHeading3.forEach(element => {observer.observe(element);});
    VisibleHeadingInLeftSide2.forEach(element => {observer.observe(element);});
    VisibleTextInFourthBlock.forEach(element => {observer.observe(element)});
    VisibleTextInLeftSide2.forEach(element => {observer.observe(element);});
    VisibleTextInSeventhBlock.forEach(element => {observer.observe(element);});
    VisibleProposal.forEach(element => {observer.observe(element);});
    VisibleFirstBottomSideCardInSixthBlock.forEach(element => {observer.observe(element);});
    VisibleSecondBottomSideCardInSixthBlock.forEach(element => {observer.observe(element);});
    VisibleThirdBottomSideCardInSixthBlock.forEach(element => {observer.observe(element);});
    VisibleFourthBottomSideCardInSixthBlock.forEach(element => {observer.observe(element);});
    VisibleHeading4.forEach(element => {observer.observe(element);});
    VisibleHeading5.forEach(element => {observer.observe(element);});
    VisibleTextInTenthBlock.forEach(element => {observer.observe(element);});
}); 

document.addEventListener('DOMContentLoaded', function() {

            const Burger = document.querySelector('.Burger');
            const Sidebar = document.querySelector('.Sidebar');
            const Overlay = document.querySelector('.Overlay');
            
            
            Burger.addEventListener('click', function() {
                this.classList.toggle('active');
                Sidebar.classList.toggle('open');
                Overlay.classList.toggle('open');
            });

            Overlay.addEventListener('click', function() {
                this.classList.remove('active');
                Sidebar.classList.remove('open');
                Overlay.classList.remove('open');

            })
        
});