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

    //HERO-ANIMATION
    const heroSection = document.querySelector(".section_hero");
    const heroNav = document.querySelector(".navbar");
    const heroBg = heroSection.querySelector(".hero-bg");
    const heroHeading1 = heroSection.querySelector("h1");
    const heroHeading2 = heroSection.querySelector("h2");
    const heroForm = heroSection.querySelector(".form-container");

    let initialHeroAnimation = gsap.timeline();

    initialHeroAnimation
      .fromTo(heroBg, { scale: 0.9, autoAlpha: 0 }, { scale: 1, autoAlpha: 1, duration: durationSlowly, ease: easing })
      .fromTo(heroNav, { autoAlpha: 0 }, { autoAlpha: 1, duration: durationNormal, ease: easing })
      .fromTo(heroHeading1, { y: "-2.5rem", autoAlpha: 0 }, { y: "0rem", autoAlpha: 1, duration: durationNormal, ease: easing }, "<")
      .fromTo(heroHeading2, { y: "2.5rem", autoAlpha: 0 }, { y: "0rem", autoAlpha: 1, duration: durationNormal, ease: easing }, "<")
      .fromTo(heroForm, { autoAlpha: 0 }, { autoAlpha: 1, duration: durationNormal, ease: easing });

    const lottieAnimation = lottie.loadAnimation({
      container: document.querySelector("#lottie-container"),
      renderer: "svg",
      loop: false,
      autoplay: false,
      path: "https://cdn.prod.website-files.com/674ef9d136dd964c75aa7165/676422e54969c4640b7b33bb_data-optimize.json",
    });

    lottieAnimation.addEventListener("DOMLoaded", () => {
      const svgElement = document.querySelector("#lottie-container svg");
      if (svgElement) {
        svgElement.setAttribute("preserveAspectRatio", "xMidYMid slice");
        svgElement.style.height = "100vh";
        svgElement.style.width = "100%";
      }
    });

    lottieAnimation.addEventListener("DOMLoaded", () => {
      lottieAnimation.goToAndStop(0, true);
    });

    let scrollHeroAnimation = gsap.timeline({
      scrollTrigger: {
        trigger: heroSection,
        pin: true,
        scrub: 2,
        start: "top top",
        end: "+=200%",
        //markers: true,
      },
    });

    scrollHeroAnimation
      .set(heroBg, { scale: 1 })
      .set(heroHeading1, { y: "0rem", opacity: 1 })
      .set(heroHeading2, { y: "0rem", opacity: 1 })
      .set(heroForm, { opacity: 1 })
      .to(heroBg, { scale: 1.5, duration: durationNormal, ease: easing })
      .to(heroHeading1, { y: "-2.5rem", opacity: 0, duration: durationNormal, ease: easing }, "<")
      .to(heroHeading2, { y: "2.5rem", opacity: 0, duration: durationNormal, ease: easing }, "<")
      .to(heroForm, { opacity: 0, duration: durationNormal, ease: easing }, "<")
      .to(
        {},
        {
          duration: 1,
          onUpdate: () => {
            let progress = scrollHeroAnimation.progress();
            let frame = progress * (lottieAnimation.totalFrames - 1);
            lottieAnimation.goToAndStop(frame, true);
          },
        },
        "<"
      );

    //services-ANIMATION
    const servicesSection = document.querySelector(".section_services");
    const servicesLogo = servicesSection.querySelector(".icon-height-small");
    const servicesHeading = servicesSection.querySelector("h2");
    const servicesBg = servicesSection.querySelector(".scale-bg");

    let initialServicesAnimation = gsap.timeline({
      scrollTrigger: {
        trigger: servicesSection,
        start: "top -10%",
      },
    });

    initialServicesAnimation
      .fromTo(servicesLogo, { autoAlpha: 0 }, { autoAlpha: 1, duration: durationSlowly, ease: easing })
      .fromTo(servicesHeading, { y: "-2.5rem", autoAlpha: 0 }, { y: "0rem", autoAlpha: 1, duration: durationSlowly, ease: easing });

    ScrollTrigger.refresh();

    let scrollServicesAnimation = gsap.timeline({
      scrollTrigger: {
        trigger: servicesSection,
        pin: true,
        scrub: 2,
        start: "top top",
        end: "+=120%",
        //markers: true,
        onEnter: () => {
          gsap.fromTo(servicesBg, { scale: 1 }, { scale: 1.2, duration: durationSlowly, ease: easing });
        },
        onLeave: () => {
          gsap.to(servicesBg, { scale: 1, duration: durationSlowly, ease: easing });
        },
        onEnterBack: () => {
          gsap.fromTo(servicesBg, { scale: 1 }, { scale: 1.2, duration: durationSlowly, ease: easing });
        },
        onLeaveBack: () => {
          gsap.to(servicesBg, { scale: 1, duration: durationSlowly, ease: easing });
        },
      },
    });

    // Services - section
    const sectionServicesFull = document.querySelector(".section_services-full");
    const sectionServicesRental = document.querySelector(".section_services-rental");
    const sectionServicesFlights = document.querySelector(".section_services-flights");
    const sectionServicesEmptylegs = document.querySelector(".section_services-emptylegs");

    const servicesNumber = document.querySelectorAll(".services-number-descktop>.text-style-num-medium");

    // Рлементы для анимации 1 sec
    const servicesTitleItemsRental = sectionServicesRental.querySelectorAll(".services-anim");
    const servicesDividersRental = sectionServicesRental.querySelectorAll(".services-title .divider");
    const servicesTabsRental = sectionServicesRental.querySelectorAll(".services-title .button");
    const servicesTabRental = sectionServicesRental.querySelector(".services-tabs");

    const servicesCtaBtnRental = sectionServicesRental.querySelector(".services-cta .button");
    const servicesCtaDividerRental = sectionServicesRental.querySelector(".services-cta .divider");
    const servicesPreviewImgRental = sectionServicesRental.querySelector(".services-cta .preview-img");
    const servicesPreviewTitleRental = sectionServicesRental.querySelectorAll(".services-cta p");
    const servicesImgRental = sectionServicesRental.querySelector(".services-img");

    // Рлементы для анимации 2 sec
    const servicesTitleItemsFlights = sectionServicesFlights.querySelectorAll(".services-anim");
    const servicesDividersFlights = sectionServicesFlights.querySelectorAll(".services-title .divider");

    const servicesCtaBtnFlights = sectionServicesFlights.querySelector(".services-cta .button");
    const servicesCtaDividerFlights = sectionServicesFlights.querySelector(".services-cta .divider");
    const servicesPreviewImgFlights = sectionServicesFlights.querySelector(".services-cta .preview-img");
    const servicesPreviewTitleFlights = sectionServicesFlights.querySelectorAll(".services-cta p");
    const servicesImgFlights = sectionServicesFlights.querySelector(".services-video");

    // Рлементы для анимации 3 sec
    const servicesTitleItemsEmptylegs = sectionServicesEmptylegs.querySelectorAll(".services-anim");
    const servicesDividersEmptylegs = sectionServicesEmptylegs.querySelectorAll(".services-title .divider");

    const servicesCtaBtnEmptylegs = sectionServicesEmptylegs.querySelector(".services-cta .button");
    const servicesImgEmptylegs = sectionServicesEmptylegs.querySelector(".services-img");
    const servicesPreviewTitleEmptylegs = sectionServicesEmptylegs.querySelectorAll(".services-cta p");

    const servicesNumbers = Array.from(servicesNumber);

    function activateNumber(index) {
      servicesNumbers.forEach((num, i) => {
        if (i === index) {
          num.classList.add("active-number");
        } else {
          num.classList.remove("active-number");
        }
      });
    }

    let sectionServicesFullAnimation = gsap.timeline({
      scrollTrigger: {
        trigger: sectionServicesFull,
        pin: true,
        scrub: 1,
        start: "top top",
        end: "+=200%",
        invalidateOnRefresh: true,
      },
    });

    sectionServicesFullAnimation
      .to({}, { duration: durationSlowly })
      .fromTo(sectionServicesFlights, { yPercent: 0 }, { yPercent: -100 })
      .to({}, { duration: durationSlowly })
      .fromTo(sectionServicesEmptylegs, { yPercent: 0 }, { yPercent: -200 })
      .to({}, { duration: durationSlowly });

    ScrollTrigger.refresh();

    //первая секция
    const getSectionServicesRental = gsap.timeline({
      scrollTrigger: {
        trigger: sectionServicesRental,
        start: "top center",
        //toggleActions: "play none none none",
        //markers: true,
        onEnter: () => {
          gsap.to(servicesNumber[0], { color: "#41ced0", duration: durationNormal });
        },
        onLeave: () => {
          gsap.to(servicesNumber[0], { color: "#aeaeae", duration: durationNormal });
        },
        onEnterBack: () => {
          gsap.to(servicesNumber[0], { color: "#41ced0", duration: durationNormal });
        },
        onLeaveBack: () => {
          gsap.to(servicesNumber[0], { color: "#aeaeae", duration: durationNormal });
        },
      },
    });

    getSectionServicesRental

      .fromTo(servicesNumber, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 })
      .fromTo(servicesTitleItemsRental, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 }, "<")
      .fromTo(servicesImgRental, { autoAlpha: 0, scale: 0.8 }, { autoAlpha: 1, scale: 1, ease: easing, duration: durationNormal }, "<")
      .fromTo(servicesDividersRental, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(servicesTabRental, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(servicesTabsRental, { autoAlpha: 0, y: "2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationQuickly, stagger: 0.2 })
      .fromTo(servicesCtaBtnRental, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(servicesCtaDividerRental, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(servicesPreviewImgRental, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(servicesPreviewTitleRental, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 });

    //вторая секция
    const getSectionServicesFlights = gsap.timeline({
      scrollTrigger: {
        trigger: ".first-trigger",
        start: "top center",
        //toggleActions: "play none none none",
        //markers: true,
        onEnter: () => {
          gsap.to(servicesNumber[1], { color: "#41ced0", duration: durationNormal });
          gsap.to(servicesNumber[0], { color: "#aeaeae", duration: durationNormal });
        },
        onLeave: () => {
          gsap.to(servicesNumber[1], { color: "#aeaeae", duration: durationNormal });
        },
        onEnterBack: () => {
          gsap.to(servicesNumber[1], { color: "#41ced0", duration: durationNormal });
        },
        onLeaveBack: () => {
          gsap.to(servicesNumber[1], { color: "#aeaeae", duration: durationNormal });
        },
      },
    });

    getSectionServicesFlights

      .fromTo(servicesTitleItemsFlights, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 }, "<")
      .fromTo(servicesImgFlights, { autoAlpha: 0, scale: 0.8 }, { autoAlpha: 1, scale: 1, ease: easing, duration: durationNormal }, "<")
      .fromTo(servicesDividersFlights, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(servicesCtaBtnFlights, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(servicesCtaDividerFlights, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(servicesPreviewImgFlights, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(servicesPreviewTitleFlights, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 });

    //третья секция
    const getSectionServicesEmptylegs = gsap.timeline({
      scrollTrigger: {
        trigger: ".second-trigger",
        start: "top center",
        //toggleActions: "play none none none",
        //markers: true,
        onEnter: () => {
          gsap.to(servicesNumber[2], { color: "#41ced0", duration: durationNormal });
          gsap.to(servicesNumber[1], { color: "#aeaeae", duration: durationNormal });
        },
        onLeave: () => {
          gsap.to(servicesNumber[2], { color: "#aeaeae", duration: durationNormal });
        },
        onEnterBack: () => {
          gsap.to(servicesNumber[2], { color: "#41ced0", duration: durationNormal });
        },
        onLeaveBack: () => {
          gsap.to(servicesNumber[2], { color: "#aeaeae", duration: durationNormal });
        },
      },
    });

    getSectionServicesEmptylegs

      .fromTo(servicesTitleItemsEmptylegs, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 }, "<")
      .fromTo(servicesImgEmptylegs, { autoAlpha: 0, scale: 0.8 }, { autoAlpha: 1, scale: 1, ease: easing, duration: durationNormal }, "<")
      .fromTo(servicesDividersEmptylegs, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(servicesCtaBtnEmptylegs, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(servicesPreviewTitleEmptylegs, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 });

    //HOVER-TAG
    const hoverTag = document.querySelectorAll(".is-small-tag");
    const hoverTagItem = document.querySelectorAll(".services-model-item");

    gsap.set(hoverTagItem, { autoAlpha: 0 });

    hoverTag.forEach((hoverElement, index) => {
      const targetTagItem = hoverTagItem[index];

      if (targetTagItem) {
        hoverElement.addEventListener("mouseenter", () => {
          gsap.to(targetTagItem, { autoAlpha: 1, duration: durationSlowly, ease: easing });
        });

        hoverElement.addEventListener("mouseleave", () => {
          gsap.to(targetTagItem, { autoAlpha: 0, duration: durationSlowly, ease: easing });
        });
      }
    });

    //advantages-ANIMATION
    const advantagesSection = document.querySelector(".section_advantages");
    const advantagesLogo = advantagesSection.querySelector(".icon-height-small");
    const advantagesHeading = advantagesSection.querySelector("h2");
    const advantagesBg = advantagesSection.querySelector(".scale-bg");

    let initialAdvantagesAnimation = gsap.timeline({
      scrollTrigger: {
        trigger: advantagesSection,
        start: "top -10%",
      },
    });

    initialAdvantagesAnimation
      .fromTo(advantagesLogo, { autoAlpha: 0 }, { autoAlpha: 1, duration: durationSlowly, ease: easing })
      .fromTo(advantagesHeading, { y: "-2.5rem", autoAlpha: 0 }, { y: "0rem", autoAlpha: 1, duration: durationSlowly, ease: easing });

    ScrollTrigger.refresh();

    let scrollAdvantagesAnimation = gsap.timeline({
      scrollTrigger: {
        trigger: advantagesSection,
        pin: true,
        scrub: 2,
        start: "top top",
        end: "+=120%",
        //markers: true,
        onEnter: () => {
          gsap.fromTo(advantagesBg, { scale: 1 }, { scale: 1.2, duration: durationSlowly, ease: easing });
        },
        onLeave: () => {
          gsap.to(advantagesBg, { scale: 1, duration: durationSlowly, ease: easing });
        },
        onEnterBack: () => {
          gsap.fromTo(advantagesBg, { scale: 1 }, { scale: 1.2, duration: durationSlowly, ease: easing });
        },
        onLeaveBack: () => {
          gsap.to(advantagesBg, { scale: 1, duration: durationSlowly, ease: easing });
        },
      },
    });

    // Advantages - section
    const sectionAdvantagesFull = document.querySelector(".section_advantages-full");
    const sectionAdvantagesApproach = sectionAdvantagesFull.querySelector(".section_advantages-approach");
    const sectionAdvantagesSecurity = sectionAdvantagesFull.querySelector(".section_advantages-security");
    const sectionAdvantagesComfort = sectionAdvantagesFull.querySelector(".section_advantages-comfort");
    const sectionAdvantagesFlexibility = sectionAdvantagesFull.querySelector(".section_advantages-flexibility");

    const advantagesNumber = document.querySelectorAll(".advantages-number-descktop>.text-style-num-medium");

    // Рлементы для анимации 1 sec APPROACH
    const advantagesTitleItemsApproach = sectionAdvantagesApproach.querySelectorAll(".advantages-anim");
    const advantagesDividersApproach = sectionAdvantagesApproach.querySelectorAll(".services-title .divider");

    const advantagesCtaFormApproach = sectionAdvantagesApproach.querySelector(".form-anim");
    const advantagesCtaBtnApproach = sectionAdvantagesApproach.querySelectorAll(".advantages-cta .button");
    const advantagesCtaDividerApproach = sectionAdvantagesApproach.querySelector(".advantages-cta .divider");
    const advantagesPreviewImgApproach = sectionAdvantagesApproach.querySelector(".advantages-cta .preview-img");
    const advantagesPreviewTitleApproach = sectionAdvantagesApproach.querySelectorAll(".advantages-cta p");
    const advantagesImgApproach = sectionAdvantagesApproach.querySelector(".advantages-img");

    // Рлементы для анимации 2 sec SECURITY
    const advantagesTitleItemsSecurity = sectionAdvantagesSecurity.querySelectorAll(".advantages-anim");
    const advantagesDividersSecurity = sectionAdvantagesSecurity.querySelectorAll(".services-title .divider");

    const advantagesCtaBtnSecurity = sectionAdvantagesSecurity.querySelector(".advantages-cta .button");
    const advantagesCtaDividerSecurity = sectionAdvantagesSecurity.querySelector(".advantages-cta .divider");
    const advantagesPreviewImgSecurity = sectionAdvantagesSecurity.querySelector(".advantages-cta .preview-img");
    const advantagesPreviewTitleSecurity = sectionAdvantagesSecurity.querySelectorAll(".advantages-cta p");
    const advantagesImgSecurity = sectionAdvantagesSecurity.querySelector(".advantages-img");

    // Рлементы для анимации 3 sec COMFORT
    const advantagesTitleItemsComfort = sectionAdvantagesComfort.querySelectorAll(".advantages-anim");
    const advantagesDividersComfort = sectionAdvantagesComfort.querySelectorAll(".services-title .divider");

    const advantagesCtaBtnComfort = sectionAdvantagesComfort.querySelector(".advantages-cta .button");
    const advantagesCtaDividerComfort = sectionAdvantagesComfort.querySelector(".advantages-cta .divider");
    const advantagesPreviewImgComfort = sectionAdvantagesComfort.querySelector(".advantages-cta .preview-img");
    const advantagesPreviewTitleComfort = sectionAdvantagesComfort.querySelectorAll(".advantages-cta p");
    const advantagesImgComfort = sectionAdvantagesComfort.querySelector(".advantages-img");

    // Рлементы для анимации 4 sec FLEXIBILITY
    const advantagesTitleItemsFlexibility = sectionAdvantagesFlexibility.querySelectorAll(".advantages-anim");
    const advantagesDividersFlexibility = sectionAdvantagesFlexibility.querySelectorAll(".services-title .divider");

    const advantagesCtaFormFlexibility = sectionAdvantagesFlexibility.querySelector(".form-anim");
    const advantagesCtaBtnFlexibility = sectionAdvantagesFlexibility.querySelectorAll(".advantages-cta .button");
    const advantagesImgFlexibility = sectionAdvantagesFlexibility.querySelector(".advantages-img");

    // анимация секций
    let sectionAdvantagesFullAnimation = gsap.timeline({
      scrollTrigger: {
        trigger: sectionAdvantagesFull,
        pin: true,
        scrub: 1,
        start: "top top",
        end: "+=300%",
        invalidateOnRefresh: true,
      },
    });

    const advantagesNumbers = Array.from(advantagesNumber);

    function activateNumber(index) {
      advantagesNumbers.forEach((num, i) => {
        if (i === index) {
          num.classList.add("active-number");
        } else {
          num.classList.remove("active-number");
        }
      });
    }

    sectionAdvantagesFullAnimation
      .to({}, { duration: durationSlowly })
      .fromTo(sectionAdvantagesSecurity, { yPercent: 0 }, { yPercent: -100 })
      .to({}, { duration: durationSlowly })
      .fromTo(sectionAdvantagesComfort, { yPercent: 0 }, { yPercent: -200 })
      .to({}, { duration: durationSlowly })
      .fromTo(sectionAdvantagesFlexibility, { yPercent: 0 }, { yPercent: -300 })
      .to({}, { duration: durationSlowly });

    ScrollTrigger.refresh();

    // анимации 1 sec APPROACH
    const getSectionAdvantagesApproach = gsap.timeline({
      scrollTrigger: {
        trigger: sectionAdvantagesApproach,
        start: "top center",
        //toggleActions: "play none none none",
        //markers: true,
        onEnter: () => {
          gsap.to(advantagesNumber[0], { color: "#41ced0", duration: durationNormal });
        },
        onLeave: () => {
          gsap.to(advantagesNumber[0], { color: "#aeaeae", duration: durationNormal });
        },
        onEnterBack: () => {
          gsap.to(advantagesNumber[0], { color: "#41ced0", duration: durationNormal });
        },
        onLeaveBack: () => {
          gsap.to(advantagesNumber[0], { color: "#aeaeae", duration: durationNormal });
        },
      },
    });

    getSectionAdvantagesApproach

      .fromTo(advantagesNumber, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 })
      .fromTo(advantagesTitleItemsApproach, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 }, "<")
      .fromTo(advantagesImgApproach, { autoAlpha: 0, scale: 0.8 }, { autoAlpha: 1, scale: 1, ease: easing, duration: durationNormal }, "<")
      .fromTo(advantagesDividersApproach, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(advantagesCtaFormApproach, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal }, "<")
      .fromTo(advantagesCtaBtnApproach, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal }, "<")
      .fromTo(advantagesCtaDividerApproach, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(advantagesPreviewImgApproach, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(advantagesPreviewTitleApproach, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 });

    ScrollTrigger.refresh();

    // анимации 2 sec SECURITY
    const getSectionAdvantagesSecurity = gsap.timeline({
      scrollTrigger: {
        trigger: sectionAdvantagesSecurity,
        start: "top center",
        //toggleActions: "play none none none",
        //markers: true,
        onEnter: () => {
          gsap.to(advantagesNumber[1], { color: "#41ced0", duration: durationNormal });
          gsap.to(advantagesNumber[0], { color: "#aeaeae", duration: durationNormal });
        },
        onLeave: () => {
          gsap.to(advantagesNumber[1], { color: "#aeaeae", duration: durationNormal });
        },
        onEnterBack: () => {
          gsap.to(advantagesNumber[1], { color: "#41ced0", duration: durationNormal });
        },
        onLeaveBack: () => {
          gsap.to(advantagesNumber[1], { color: "#aeaeae", duration: durationNormal });
        },
      },
    });

    getSectionAdvantagesSecurity

      .fromTo(advantagesTitleItemsSecurity, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 }, "<")
      .fromTo(advantagesImgSecurity, { autoAlpha: 0, scale: 0.8 }, { autoAlpha: 1, scale: 1, ease: easing, duration: durationNormal }, "<")
      .fromTo(advantagesDividersSecurity, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(advantagesCtaBtnSecurity, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(advantagesCtaDividerSecurity, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(advantagesPreviewImgSecurity, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(advantagesPreviewTitleSecurity, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 });

    // анимации 3 sec COMFORT
    const getSectionAdvantagesComfort = gsap.timeline({
      scrollTrigger: {
        trigger: sectionAdvantagesComfort,
        start: "top center",
        //toggleActions: "play none none none",
        //markers: true,
        onEnter: () => {
          gsap.to(advantagesNumber[2], { color: "#41ced0", duration: durationNormal });
          gsap.to(advantagesNumber[1], { color: "#aeaeae", duration: durationNormal });
        },
        onLeave: () => {
          gsap.to(advantagesNumber[2], { color: "#aeaeae", duration: durationNormal });
        },
        onEnterBack: () => {
          gsap.to(advantagesNumber[2], { color: "#41ced0", duration: durationNormal });
        },
        onLeaveBack: () => {
          gsap.to(advantagesNumber[2], { color: "#aeaeae", duration: durationNormal });
        },
      },
    });

    getSectionAdvantagesComfort

      .fromTo(advantagesTitleItemsComfort, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 }, "<")
      .fromTo(advantagesImgComfort, { autoAlpha: 0, scale: 0.8 }, { autoAlpha: 1, scale: 1, ease: easing, duration: durationNormal }, "<")
      .fromTo(advantagesDividersComfort, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(advantagesCtaBtnComfort, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(advantagesCtaDividerComfort, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(advantagesPreviewImgComfort, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(advantagesPreviewTitleComfort, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 });

    // анимации 4 sec FLEX
    const getSectionAdvantagesFlexibility = gsap.timeline({
      scrollTrigger: {
        trigger: sectionAdvantagesFlexibility,
        start: "top center",
        //toggleActions: "play none none none",
        //markers: true,
        onEnter: () => {
          gsap.to(advantagesNumber[3], { color: "#41ced0", duration: durationNormal });
          gsap.to(advantagesNumber[2], { color: "#aeaeae", duration: durationNormal });
        },
        onLeave: () => {
          gsap.to(advantagesNumber[3], { color: "#aeaeae", duration: durationNormal });
        },
        onEnterBack: () => {
          gsap.to(advantagesNumber[3], { color: "#41ced0", duration: durationNormal });
        },
        onLeaveBack: () => {
          gsap.to(advantagesNumber[3], { color: "#aeaeae", duration: durationNormal });
        },
      },
    });

    getSectionAdvantagesFlexibility

      .fromTo(advantagesTitleItemsFlexibility, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 }, "<")
      .fromTo(advantagesImgFlexibility, { autoAlpha: 0, scale: 0.8 }, { autoAlpha: 1, scale: 1, ease: easing, duration: durationNormal }, "<")
      .fromTo(advantagesDividersFlexibility, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(advantagesCtaBtnFlexibility, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal }, "<")
      .fromTo(advantagesCtaFormFlexibility, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal }, "<");

    // COVERAGE-SECTION-ANIMATION
    const sectionCoverage = document.querySelector(".section_coverage");
    const sectionCoverageHeading = sectionCoverage.querySelector("h3");
    const sectionCoverageParagraph = sectionCoverage.querySelector("p");
    const sectionCoverageDivider = sectionCoverage.querySelector(".divider");
    const sectionCoverageImg = sectionCoverage.querySelector(".coverage-img");

    const getSectionCoverage = gsap.timeline({
      scrollTrigger: {
        trigger: sectionCoverage,
        start: "top center",
        toggleActions: "play none none none",
        //markers: true,
      },
    });

    getSectionCoverage

      .fromTo(sectionCoverageHeading, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 })
      .fromTo(sectionCoverageParagraph, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 })
      .fromTo(sectionCoverageDivider, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(sectionCoverageImg, { autoAlpha: 0, scale: 0.8 }, { autoAlpha: 1, scale: 1, ease: easing, duration: durationNormal });

    // CATALOG-SECTION-ANIMATION
    const sectionCatalog = document.querySelector(".section_catalog");
    const sectionCatalogHeading = sectionCatalog.querySelector("h2");
    const sectionCatalogDivider = sectionCatalog.querySelector(".divider");
    const sectionCatalogThumbs = sectionCatalog.querySelector(".swiper-container-thumbs-1");
    const sectionCatalogSlide = sectionCatalog.querySelector(".swiper-container-1");

    const getSectionCatalog = gsap.timeline({
      scrollTrigger: {
        trigger: sectionCatalog,
        start: "top center",
        toggleActions: "play none none none",
        //markers: true,
      },
    });

    getSectionCatalog

      .fromTo(sectionCatalogHeading, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 })
      .fromTo(sectionCatalogDivider, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal })
      .fromTo(sectionCatalogThumbs, { autoAlpha: 0, y: "2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 })
      .fromTo(sectionCatalogSlide, { autoAlpha: 0, y: "2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 });

    // DROPDOWN-CATALOG-ANIMATION
    const catalogButton = sectionCatalogThumbs.querySelector(".button");
    const catalogButtonArrow = catalogButton.querySelector(".icon-embed-xsmall");
    const catalogModelList = sectionCatalogThumbs.querySelector(".swiper-wrapper");

    catalogButton.addEventListener("click", () => {
      const isHidden = catalogModelList.classList.contains("is-hide");

      if (isHidden) {
        catalogModelList.classList.remove("is-hide");
        showElement(catalogModelList, catalogButtonArrow);
      } else {
        catalogModelList.classList.add("is-hide");
        hideElement(catalogModelList, catalogButtonArrow);
      }
    });

    //HOW-WE-WORK-ANIMATION
    const sectionWework = document.querySelector(".section_how-we-work");
    const weworkHeading = sectionWework.querySelector("h2");
    const weworkDivider = sectionWework.querySelectorAll(".divider");
    const weworkPoint = sectionWework.querySelectorAll(".circle");
    const weworkItems = sectionWework.querySelectorAll(".wework-item");
    const weworkItemsImg = sectionWework.querySelectorAll(".wework-img");

    const getSectionWework = gsap.timeline({
      scrollTrigger: {
        trigger: sectionWework,
        start: "top center",
        toggleActions: "play none none none",
        //markers: true,
      },
    });

    getSectionWework

      .fromTo(weworkHeading, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal })
      .fromTo(weworkDivider, { width: "0%" }, { width: "100%", ease: easing, duration: durationQuickly, stagger: 0.3 }, "<")
      .fromTo(weworkPoint, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationQuickly, stagger: 0.2 }, "<")
      .fromTo(weworkItems, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal, stagger: 0.2 }, "<")
      .fromTo(weworkItemsImg, { autoAlpha: 0, scale: 0.8 }, { autoAlpha: 1, scale: 1, ease: easing, duration: durationNormal, stagger: 0.2 }, "<");

    //approach-ANIMATION
    const approachSection = document.querySelector(".section_approach");
    const approachLogo = approachSection.querySelector(".icon-height-small");
    const approachHeading = approachSection.querySelector("h2");
    const approachBg = approachSection.querySelector(".scale-bg");

    let initialApproachAnimation = gsap.timeline({
      scrollTrigger: {
        trigger: approachSection,
        start: "top -10%",
      },
    });

    initialApproachAnimation
      .fromTo(approachLogo, { autoAlpha: 0 }, { autoAlpha: 1, duration: durationSlowly, ease: easing })
      .fromTo(approachHeading, { y: "-2.5rem", autoAlpha: 0 }, { y: "0rem", autoAlpha: 1, duration: durationSlowly, ease: easing });

    ScrollTrigger.refresh();

    let scrollApproachAnimation = gsap.timeline({
      scrollTrigger: {
        trigger: approachSection,
        pin: true,
        scrub: 2,
        start: "top top",
        end: "+=120%",
        //markers: true,
        onEnter: () => {
          gsap.fromTo(approachBg, { scale: 1 }, { scale: 1.2, duration: durationSlowly, ease: easing });
        },
        onLeave: () => {
          gsap.to(approachBg, { scale: 1, duration: durationSlowly, ease: easing });
        },
        onEnterBack: () => {
          gsap.fromTo(approachBg, { scale: 1 }, { scale: 1.2, duration: durationSlowly, ease: easing });
        },
        onLeaveBack: () => {
          gsap.to(approachBg, { scale: 1, duration: durationSlowly, ease: easing });
        },
      },
    });

    //APPROACH SECTION ANIMATION
    const approachFull = document.querySelector(".section_approach-full");
    const approachTransparency = approachFull.querySelector(".section_approach-transparency");
    const approachFocus = approachFull.querySelector(".section_approach-focus");

    function initSectionApproachFullAnimation() {
      let sectionApproachFullAnimation = gsap.timeline({
        scrollTrigger: {
          trigger: approachFull,
          pin: true,
          scrub: 1,
          start: "top top",
          end: "+=200%",
          invalidateOnRefresh: true,
        },
      });

      sectionApproachFullAnimation.to({}, { duration: durationSlowly }).fromTo(approachFocus, { yPercent: 0 }, { yPercent: -100 }).to({}, { duration: durationSlowly });

      return sectionApproachFullAnimation;
    }

    function checkScreenSize() {
      if (window.matchMedia("(min-width: 768px)").matches) {
        return initSectionApproachFullAnimation();
      }
    }

    let activeAnimation = checkScreenSize();

    window.addEventListener("resize", () => {
      if (activeAnimation && !window.matchMedia("(min-width: 768px)").matches) {
        activeAnimation.scrollTrigger.kill();
        activeAnimation.kill();
        activeAnimation = null;
      } else if (!activeAnimation && window.matchMedia("(min-width: 768px)").matches) {
        activeAnimation = checkScreenSize();
      }
    });

    //APPROACH-HOVER-ANIMATION
    const hoverElements = document.querySelectorAll(".approach-hover");
    const videoElements = document.querySelectorAll(".approach-video");

    function setupHoverAnimation() {
      const isDesktop = window.matchMedia("(min-width: 801px)").matches;

      if (isDesktop) {
        gsap.set(videoElements, { autoAlpha: 0 });

        hoverElements.forEach((hoverElement, index) => {
          const targetVideo = videoElements[index];

          if (targetVideo) {
            hoverElement.addEventListener("mouseenter", () => {
              gsap.to(targetVideo, { autoAlpha: 1, duration: durationSlowly, ease: easing });
            });

            hoverElement.addEventListener("mouseleave", () => {
              gsap.to(targetVideo, { autoAlpha: 0, duration: durationSlowly, ease: easing });
            });
          }
        });
      } else {
        gsap.set(videoElements, { autoAlpha: 1 });

        hoverElements.forEach((hoverElement, index) => {
          const targetVideo = videoElements[index];
          if (targetVideo) {
            hoverElement.replaceWith(hoverElement.cloneNode(true));
          }
        });
      }
    }

    setupHoverAnimation();

    window.addEventListener("resize", setupHoverAnimation);

    // OUR-EXPERT-ANIMATION
    const sectionExpert = document.querySelector(".section_our-expert");
    const sectionExpertHeading = sectionExpert.querySelector("h3");
    const sectionExpertForm = sectionExpert.querySelector(".contact-form");
    const sectionExpertFormImg = sectionExpert.querySelector(".img-96x96");
    const sectionExpertFormTitle = sectionExpert.querySelectorAll(".padding-left>p");
    const sectionExpertFormLogoSmall = sectionExpert.querySelector(".icon-height-small");
    const sectionExpertFormLogoLarge = sectionExpert.querySelector(".icon-height-large");

    const getSectionExpert = gsap.timeline({
      scrollTrigger: {
        trigger: sectionExpert,
        start: "top center",
        toggleActions: "play none none none",
        //markers: true,
      },
    });

    getSectionExpert

      .fromTo(sectionExpertHeading, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal, stagger: 0.3 })
      .fromTo(sectionExpertForm, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(sectionExpertFormImg, { autoAlpha: 0, scale: 0.9 }, { autoAlpha: 1, scale: 1, ease: easing, duration: durationNormal })
      .fromTo(sectionExpertFormTitle, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationQuickly, stagger: 0.15 })
      .fromTo(sectionExpertFormLogoSmall, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal })
      .fromTo(sectionExpertFormLogoLarge, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal, stagger: 0.3 });

    // REVIEW-ANIMATION
    const sectionReview = document.querySelector(".section_reviews");
    const reviewHeading = sectionReview.querySelector("h2");
    const reviewDivider = sectionReview.querySelectorAll(".divider");
    const reviewArrow = sectionReview.querySelector(".swiper-button-container");
    const reviewNumbers = sectionReview.querySelectorAll(".swiper-wrapper .text-style-num-medium");
    const reviewLogo = sectionReview.querySelector(".icon-height-medium");
    const reviewSlide = sectionReview.querySelector(".reviews-right-col");

    const getSectionReview = gsap.timeline({
      scrollTrigger: {
        trigger: sectionReview,
        start: "top center",
        toggleActions: "play none none none",
        //markers: true,
      },
    });

    getSectionReview

      .fromTo(reviewHeading, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationNormal })
      .fromTo(reviewDivider, { width: "0%" }, { width: "100%", ease: easing, duration: durationNormal, stagger: 0.3 })
      .fromTo(reviewArrow, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(reviewNumbers, { autoAlpha: 0, y: "-2rem" }, { autoAlpha: 1, y: "0rem", ease: easing, duration: durationQuickly, stagger: 0.1 })
      .fromTo(reviewLogo, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal })
      .fromTo(reviewSlide, { autoAlpha: 0 }, { autoAlpha: 1, ease: easing, duration: durationNormal });
  }); //Completion of DOMContentLoaded