Instructions

This template uses Saddle naming convention. Please check out the documentation for more information.
To get started, check out in depth tutorial videos and documentation from Webflow University.
This template uses SVG for the icons. To change the icons, edit the embed and add your icon's SVG code. Get free SVG icons from Boxicons.

Svg Icons

Check out these two videos below to learn how to easily edit or add new SVGs using the Webflow Embed Component. They provide a step-by-step guide on how to achieve this.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Webflow Template Support

The website was constructed on Webflow with a focus on implementing optimal techniques to ensure that modifying the template and adapting it to your specifications is a hassle-free process.

However, if you ever find any issue, need help, or just want to say hi, feel free to send us an email at — contact.airdokan@gmail.com We will be happy to help you.

Custom Design & Development

Alternatively, if you require assistance in constructing a distinct and customized iteration of this templates, or simply a stunning website created and programmed entirely on Webflow, we can provide aid, feel free to get in touch with our Webflow design & development agency.

GSAP Code Customization

We've added a number counter animation using GSAP. To use it, add the [data-counter-number] attribute to any number you want animated. Make sure to add this GSAP code below is in the page settings for each page where you want this effect.

<script>
(function() {
  function initCounter() {
    gsap.registerPlugin(ScrollTrigger);

    const numbers = document.querySelectorAll("[data-counter-number]");

    numbers.forEach((el) => {
      const rawText = el.textContent.trim();
      const match = rawText.match(/^([^0-9]*)([0-9][0-9,]*\.?[0-9]*)(.*)$/);
      if (!match) return;

      const prefix = match[1];
      const rawNumber = match[2].replace(/,/g, "");
      const targetValue = parseFloat(rawNumber);
      const suffix = match[3];

      const useCommas = match[2].includes(",");
      const decimalPlaces = rawNumber.includes(".")
        ? rawNumber.split(".")[1].length
        : 0;

      const format = (val) => {
        const fixed = parseFloat(val.toFixed(decimalPlaces));
        return useCommas
          ? fixed.toLocaleString("en-US", {
              minimumFractionDigits: decimalPlaces,
              maximumFractionDigits: decimalPlaces
            })
          : fixed.toFixed(decimalPlaces);
      };

      el.textContent = prefix + format(0) + suffix;

      const counter = { value: 0 };

      gsap.to(counter, {
        value: targetValue,
        duration: 2,
        ease: "power1.out",
        snap: { value: decimalPlaces === 0 ? 1 : 0.1 },
        scrollTrigger: {
          trigger: el,
          start: "top 80%",
          toggleActions: "play none none none"
        },
        onUpdate() {
          el.textContent = prefix + format(counter.value) + suffix;
        }
      });
    });
  }

  // Run inside Webflow if available, otherwise fallback
  if (typeof Webflow !== "undefined" && Webflow.push) {
    Webflow.push(initCounter);
  } else {
    document.addEventListener("DOMContentLoaded", initCounter);
  }
})();
</script>