/* ==============
 ========= js documentation ==========================

 * template name: Charifund
 * version: 1.0
 * description: Nonprofit NGO Fundraising HTML5 Template
 * author: wowtheme7
 * author-url: https://themeforest.net/user/wowtheme7

    ==================================================

     01. preloader
     -------------------------------------------------
     02. background image
     -------------------------------------------------
     03. custom cursor
     -------------------------------------------------
     04. scroll to top with progress
     -------------------------------------------------
     05. add active class to the current link
     -------------------------------------------------
     06. open search box
     -------------------------------------------------
     07. mobile menu
     -------------------------------------------------
     08. fixed header on scroll
     -------------------------------------------------
     09. nice select
     -------------------------------------------------
     10. open sidebar info
     -------------------------------------------------
     11. off canvas cart
     -------------------------------------------------
     12. banner one slider
     -------------------------------------------------
     13. banner two slider
     -------------------------------------------------
     14. banner three slider
     -------------------------------------------------
     15. partner slider
     -------------------------------------------------
     16. difference slider
     -------------------------------------------------
     17. video popup
     -------------------------------------------------
     18. cause slider
     -------------------------------------------------
     19. donate amount
     -------------------------------------------------
     20. testimonial slider
     -------------------------------------------------
     21. cause two slider content
     -------------------------------------------------
     22. difference tab
     -------------------------------------------------
     23. odometer counter
     -------------------------------------------------
     24. testimonial two slider
     -------------------------------------------------
     25. testimonial three slider
     -------------------------------------------------
     26. coming soon
     -------------------------------------------------
     27. countdown
     -------------------------------------------------
     28. product details slider
     -------------------------------------------------
     29. product details tab
     -------------------------------------------------
     30. social link active on hover
     -------------------------------------------------
     31. footer copyright year
     -------------------------------------------------
     32. aos initialization
     -------------------------------------------------
     33. vanilla tilt animation
     -------------------------------------------------
     34. register gsap
     -------------------------------------------------
     35. gsap null config
     -------------------------------------------------
     36. target section with gsap
     -------------------------------------------------
     37. parallax image with gsap
     -------------------------------------------------
     38. title animation
     -------------------------------------------------
     39. banner three image animation
     -------------------------------------------------
     40. progress bar
     -------------------------------------------------
     41. circular progress bar
     -------------------------------------------------
     42. banner animation

    ==================================================
============== */

(function ($) {
  "use strict";

  if (!$) {
    return;
  }

  const hasSwiper = typeof window.Swiper === "function";
  const hasAOS =
    typeof window.AOS !== "undefined" && typeof window.AOS.init === "function";
  const hasVanillaTilt =
    typeof window.VanillaTilt !== "undefined" && typeof window.VanillaTilt.init === "function";
  const hasGsap = typeof window.gsap !== "undefined";
  const hasScrollTrigger = typeof window.ScrollTrigger !== "undefined";
  const hasScrollToPlugin = typeof window.ScrollToPlugin !== "undefined";
  const hasSplitText = typeof window.SplitText !== "undefined";

  function createSwiper(selector, options) {
    if (!hasSwiper || !document.querySelector(selector)) {
      return null;
    }

    return new Swiper(selector, options);
  }

  $(function () {
    let device_width = window.innerWidth;
    let initialScroll = $(window).scrollTop();

    /**
     * ======================================
     * 01. preloader
     * ======================================
     */

    if ($(".preloader").length) {
      $(".preloader").delay(300).fadeOut();
    }

    /**
     * ======================================
     * 02. background image
     * ======================================
     */
    $("[data-background]").each(function () {
      var backgroundImages = $(this).attr("data-background").split(",");
      var cssValue = backgroundImages
        .map(function (image) {
          return 'url("' + image.trim() + '")';
        })
        .join(",");

      $(this).css("background-image", cssValue);
    });

    /**
     * ======================================
     * 03. custom cursor
     * ======================================
     */
    if ($(".mouseCursor").length > 0) {
      function itCursor() {
        var myCursor = jQuery(".mouseCursor");
        if (myCursor.length) {
          if ($("body")) {
            const e = document.querySelector(".cursor-inner"),
              t = document.querySelector(".cursor-outer");
            let n,
              i = 0,
              o = !1;
            (window.onmousemove = function (s) {
              o ||
                (t.style.transform =
                  "translate(" + s.clientX + "px, " + s.clientY + "px)"),
                (e.style.transform =
                  "translate(" + s.clientX + "px, " + s.clientY + "px)"),
                (n = s.clientY),
                (i = s.clientX);
            }),
              $("body").on(
                "mouseenter",
                "button, a, .cursor-pointer",
                function () {
                  e.classList.add("cursor-hover"),
                    t.classList.add("cursor-hover");
                }
              ),
              $("body").on(
                "mouseleave",
                "button, a, .cursor-pointer",
                function () {
                  ($(this).is("a", "button") &&
                    $(this).closest(".cursor-pointer").length) ||
                    (e.classList.remove("cursor-hover"),
                    t.classList.remove("cursor-hover"));
                }
              ),
              (e.style.visibility = "visible"),
              (t.style.visibility = "visible");
          }
        }
      }
      itCursor();
    }

    /**
     * ======================================
     * 04. scroll to top with progress
     * ======================================
     */
    if ($(".progress-wrap").length > 0) {
      var progressPath = document.querySelector(".progress-wrap path");
      var pathLength = progressPath.getTotalLength();
      progressPath.style.transition = progressPath.style.WebkitTransition =
        "none";
      progressPath.style.strokeDasharray = pathLength + " " + pathLength;
      progressPath.style.strokeDashoffset = pathLength;
      progressPath.getBoundingClientRect();
      progressPath.style.transition = progressPath.style.WebkitTransition =
        "stroke-dashoffset 10ms linear";
      var updateProgress = function () {
        var scroll = $(window).scrollTop();
        var height = $(document).height() - $(window).height();
        var progress = pathLength - (scroll * pathLength) / height;
        progressPath.style.strokeDashoffset = progress;
      };
      updateProgress();
      $(window).scroll(updateProgress);
      var offset = 50;
      var duration = 1500;
      $(window).on("scroll", function () {
        if ($(this).scrollTop() > offset) {
          $(".progress-wrap").addClass("active-progress");
        } else {
          $(".progress-wrap").removeClass("active-progress");
        }
      });
      $(".progress-wrap").on("click", function (event) {
        event.preventDefault();
        $("html, body")
          .stop()
          .css("scroll-behavior", "auto")
          .animate(
            {
              scrollTop: 0,
            },
            {
              duration: 1500,
              easing: "swing",
              complete: function () {
                $("html, body").css("scroll-behavior", "smooth");
              },
            }
          );
        return false;
      });

      if (initialScroll >= 50) {
        $(".progress-wrap").addClass("active-progress");
      }
    }

    /**
     * ======================================
     * 05. add active class to the current link
     * ======================================
     */
    function dynamicCurrentMenuClass(selector) {
      let FileName = window.location.href.split("/").reverse()[0];

      selector.find("li").removeClass("active");
      selector
        .find(".navbar__dropdown-label")
        .removeClass("navbar__item-active");

      selector.find("li").each(function () {
        let anchor = $(this).find("a");
        if ($(anchor).attr("href") === FileName) {
          $(this).addClass("active");
        }
      });

      const activeDropdownItem = selector.find(".navbar__sub-menu .active");
      if (activeDropdownItem.length) {
        activeDropdownItem.parents("li").addClass("active");
      }

      selector.find("li").each(function () {
        if ($(this).find(".active").length) {
          $(this).addClass("active");
        }
      });

      if (FileName === "") {
        selector.find('li:has(a[href="index.html"])').addClass("active");
      }
    }
    if ($("header").length) {
      dynamicCurrentMenuClass($("header"));
    }

    /**
     * ======================================
     * 06. open search box
     * ======================================
     */
    if ($(".search-popup").length > 0) {
      $(".open-search").on("click", function () {
        $("body").addClass("search-active");
      });

      $(".close-search").on("click", function () {
        $("body").removeClass("search-active");
      });
    }

    /**
     * ======================================
     * 07. mobile menu
     * ======================================
     */
    if ($(".mobile-menu").length > 0) {
      var mobileMenuContent = $(".navbar__menu").html();
      $(".mobile-menu__list").append(mobileMenuContent);

      $(".mobile-menu .navbar__dropdown-label").on("click", function () {
        $(this).parent().siblings().find(".navbar__sub-menu").slideUp(500);
        $(this)
          .parent()
          .siblings()
          .find(".navbar__dropdown-label")
          .removeClass("navbar__item-active");
        $(this).siblings(".navbar__sub-menu").slideToggle(500);
        $(this).toggleClass("navbar__item-active");
      });
    }

    $(".open-offcanvas-nav").on("click", function () {
      $(this).addClass("open-offcanvas-nav-active");
      $(".mobile-menu__backdrop").addClass("mobile-menu__backdrop-active");
      $(".nav-fade").each(function (i) {
        $(this).css("animation-delay", 0.25 * 1 * i + "s");
      });

      $(".mobile-menu").addClass("show-menu");
      $(".mobile-menu__wrapper").removeClass("nav-fade-active");
    });

    $(".close-mobile-menu, .mobile-menu__backdrop").on("click", function () {
      $(".open-offcanvas-nav").removeClass("open-offcanvas-nav-active");
      $(".mobile-menu").removeClass("show-menu");
      $(".mobile-menu__backdrop").removeClass("mobile-menu__backdrop-active");
      $(".mobile-menu__wrapper").addClass("nav-fade-active");
      $(".mobile-menu .navbar__dropdown-label").removeClass(
        "navbar__item-active"
      );
      $(".mobile-menu .navbar__sub-menu").slideUp(0);
    });

    $(".navbar__item.navbar__item--has-children > a").on("click", function (e) {
      e.preventDefault();
    });

    $(window).on("resize", function () {
      // sidebar info
      $(".off-canvas").removeClass("off-canvas-active");
      $(".off-canvas-backdrop").removeClass("off-canvas-backdrop-active");

      // mobile menu
      $(".mobile-menu").removeClass("show-menu");
      $(".mobile-menu__backdrop").removeClass("mobile-menu__backdrop-active");
      $(".mobile-menu__wrapper").addClass("nav-fade-active");
      $(".mobile-menu .navbar__dropdown-label").removeClass(
        "navbar__item-active"
      );
      $(".mobile-menu .navbar__sub-menu").slideUp(0);
      $(".open-offcanvas-nav").removeClass("open-offcanvas-nav-active");
    });

    /**
     * ======================================
     * 08. fixed header on scroll
     * ======================================
     */
    $(window).on("scroll", function () {
      var scroll = $(window).scrollTop();
      if (scroll < 160) {
        $(".header").removeClass("sticky-header");
      } else {
        $(".header").addClass("sticky-header");
      }
    });

    if (initialScroll >= 100) {
      $(".header").addClass("sticky-header");
    }

    /**
     * ======================================
     * 09. nice select
     * ======================================
     */
    if ($.fn.niceSelect) {
      $("select").niceSelect();
    }

    /**
     * ======================================
     * 10. open sidebar info
     * ======================================
     */
    $(".open-sidenav").on("click", function () {
      $(".off-canvas-backdrop").toggleClass("off-canvas-backdrop-active");
      $(".off-canvas").toggleClass("off-canvas-active");
    });

    $(".off-canvas-backdrop, .off-canvas-close").on("click", function () {
      $(".off-canvas").removeClass("off-canvas-active");
      $(".off-canvas-backdrop").removeClass("off-canvas-backdrop-active");
    });

    /**
     * ======================================
     * 11. offcanvas cart
     * ======================================
     */

    $(".cart").on("click", function () {
      $(".sidebar-cart").addClass("sidebar-cart-active");
      $(".cart-backdrop").addClass("cart-backdrop-active");
      $("body").toggleClass("body-active");
    });

    $(".close-cart").on("click", function () {
      $(".sidebar-cart").removeClass("sidebar-cart-active");
      $(".cart-backdrop").removeClass("cart-backdrop-active");
      $("body").removeClass("body-active");
    });

    $(".cart-backdrop").on("click", function () {
      $(".sidebar-cart").removeClass("sidebar-cart-active");
      $(".cart-backdrop").removeClass("cart-backdrop-active");
      $("body").removeClass("body-active");
    });

    $(".sidebar-cart").on("click", function (event) {
      event.stopPropagation();
    });

    function calculateTotalPrice() {
      var totalPrice = 0;
      $(".cart-item-single").each(function () {
        var quantity = Number.parseInt($(this).find(".item-quantity").text(), 10);
        var price = Number.parseFloat($(this).find(".item-price").text());

        if (Number.isNaN(quantity)) {
          quantity = 0;
        }

        if (Number.isNaN(price)) {
          price = 0;
        }

        totalPrice += quantity * price;
      });
      $(".total-price").text(totalPrice.toFixed(2));
    }

    $(".cart-item-single").each(function () {
      var quantity = Number.parseInt($(this).find(".item-quantity").text(), 10);

      if (Number.isNaN(quantity) || quantity < 1) {
        quantity = 1;
      }

      $(this)
        .find(".quantity-increase")
        .click(function () {
          if (quantity < 20) {
            quantity++;
            $(this).siblings(".item-quantity").text(quantity);
            calculateTotalPrice();
          }
        });
      $(this)
        .find(".quantity-decrease")
        .click(function () {
          if (quantity > 1) {
            quantity--;
            $(this).siblings(".item-quantity").text(quantity);
            calculateTotalPrice();
          }
        });
      $(this)
        .find(".delete-item")
        .click(function () {
          $(this).closest(".cart-item-single").hide();
        });
    });

    /**
     * ======================================
     * 12. banner one slider
     * ======================================
     */
    var bannerOne = createSwiper(".banner-two__slider", {
      loop: true,
      speed: 2000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 0,
      effect: "fade",
      fadeEffect: {
        crossFade: true,
      },
      autoplay: {
        delay: 6000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      navigation: {
        nextEl: ".next-banner",
        prevEl: ".prev-banner",
      },
    });

    /**
     * ======================================
     * 13. banner two slider
     * ======================================
     */
    var bannerTwo = createSwiper(".banner__slider", {
      loop: true,
      speed: 2000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 24,
      effect: "fade",
      fadeEffect: {
        crossFade: true,
      },
      autoplay: {
        delay: 6000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
    });

    /**
     * ======================================
     * 14. banner three slider
     * ======================================
     */
    var bannerThree = createSwiper(".banner-three__slider", {
      loop: true,
      speed: 2000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 24,
      effect: "fade",
      fadeEffect: {
        crossFade: true,
      },
      autoplay: {
        delay: 6000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
    });

    /**
     * ======================================
     * 15. partner slider
     * ======================================
     */
    var partners = createSwiper(".partner__slider", {
      loop: true,
      speed: 1000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 24,
      freeMode: true,
      centeredSlides: true,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      breakpoints: {
        420: {
          slidesPerView: 2,
        },
        576: {
          slidesPerView: 3,
        },
        992: {
          slidesPerView: 5,
        },
      },
    });

    /**
     * ======================================
     * 16. difference slider
     * ======================================
     */
    var differenceSlider = createSwiper(".difference__slider", {
      loop: true,
      speed: 1000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 24,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      navigation: {
        nextEl: ".next-difference",
        prevEl: ".prev-difference",
      },
      breakpoints: {
        768: {
          slidesPerView: 2,
        },
        1200: {
          slidesPerView: 3,
        },
      },
    });

    /**
     * ======================================
     * 17. video popup
     * ======================================
     */
    if (document.querySelector(".open-video-popup") !== null) {
      if ($.fn.magnificPopup) {
        $(".open-video-popup").magnificPopup({
          disableOn: 768,
          type: "iframe",
          mainClass: "mfp-fade",
          removalDelay: 160,
          preloader: false,
          fixedContentPos: false,
        });
      }
    }

    /**
     * ======================================
     * 18. cause slider
     * ======================================
     */
    var causeSlider = createSwiper(".cause__slider", {
      loop: true,
      speed: 1000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 24,

      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      navigation: {
        nextEl: ".next-cause",
        prevEl: ".prev-cause",
      },
      pagination: {
        el: ".cause-pagination",
        clickable: true,
      },
      breakpoints: {
        768: {
          slidesPerView: 2,
        },
        992: {
          slidesPerView: 3,
        },
        1400: {
          slidesPerView: 4,
        },
      },
    });

    /**
     * ======================================
     * 19. donate amount
     * ======================================
     */
    if ($("#donationAmount").length > 0) {
      const activeAmount = $(".donation-amount.active").text();
      $("#donationAmount").val(activeAmount);

      $(".donation-amount").on("click", function () {
        $(".donation-amount").removeClass("active");
        $(this).addClass("active");

        if ($(this).hasClass("custom-amount")) {
          $("#donationAmount").val("").focus(); // Clear and focus input for custom amount
        } else {
          const amount = $(this).text();
          $("#donationAmount").val(amount);
        }
      });
    }

    /**
     * ======================================
     * 20. testimonial slider
     * ======================================
     */
    var testimonial = createSwiper(".testimonial__slider", {
      loop: true,
      speed: 1000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 24,

      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      navigation: {
        nextEl: ".next-testimonial",
        prevEl: ".prev-testimonial",
      },

      breakpoints: {
        768: {
          slidesPerView: 2,
        },
        1200: {
          slidesPerView: 3,
        },
      },
    });

    var testimonialFc = createSwiper(".fc-slider", {
      loop: true,
      speed: 1000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 24,
      effect: "coverflow",
      coverflowEffect: {
        rotate: 40,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: false,
      },
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      navigation: {
        nextEl: ".next-test",
        prevEl: ".prev-test",
      },
    });

    /**
     * ======================================
     * 21. cause two slider content
     * ======================================
     */
    var causeTwoSliderThumb = createSwiper(".cause-two__content-slider", {
      loop: true,
      speed: 1000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 24,
      centeredSlides: true,
      watchSlidesProgress: true,
      effect: "fade",

      fadeEffect: {
        crossFade: true,
      },
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      navigation: {
        nextEl: ".next-cause-two",
        prevEl: ".prev-cause-two",
      },
    });

    var causeTwoSlider = createSwiper(".cause-two__slider", {
      loop: true,
      speed: 1000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 24,
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      loopAddBlankSlides: true,
      loopAdditionalSlides: 1,
      slideToClickedSlide: true,
      roundLengths: true,
      coverflowEffect: {
        rotate: 40,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: false,
      },
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      thumbs: {
        swiper: causeTwoSliderThumb,
      },
      navigation: {
        nextEl: ".next-cause-two",
        prevEl: ".prev-cause-two",
      },
      breakpoints: {
        768: {
          slidesPerView: 2,
        },
        1400: {
          slidesPerView: 3,
        },
      },
    });

    /**
     * ======================================
     * 22. difference tab
     * ======================================
     */

    $(".difference-two__content-single").hide();
    $(".difference-two__content-single:first").show();

    $(".difference-two__tab-btn").on("click", function () {
      $(".difference-two__tab-btn").removeClass("active");
      $(this).addClass("active");
      $(".difference-two__content-single").hide();
      var target = $(this).data("target");
      $(target).fadeIn(500);
      return false;
    });

    /**
     * ======================================
     * 23. odometer counter
     * ======================================
     */
    if ($.fn.isInViewport) {
      const odometerElements = document.querySelectorAll(".odometer");

      $(".odometer").each(function () {
        $(this).isInViewport(function (status) {
          if (status === "entered") {
            for (var i = 0; i < odometerElements.length; i++) {
              var el = odometerElements[i];
              el.innerHTML = el.getAttribute("data-odometer-final");
            }
          }
        });
      });
    }

    /**
     * ======================================
     * 24. testimonial two slider
     * ======================================
     */
    var testimonialTwo = createSwiper(".testimonial-two__slider", {
      loop: true,
      speed: 2000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 0,
      effect: "fade",
      fadeEffect: {
        crossFade: true,
      },
      autoplay: {
        delay: 6000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      navigation: {
        nextEl: ".next-testimonial-two",
        prevEl: ".prev-testimonial-two",
      },
    });

    /**
     * ======================================
     * 25. testimonial three slider
     * ======================================
     */
    var testimonialThree = createSwiper(".testimonial-three__slider", {
      loop: true,
      speed: 1000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 24,

      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      navigation: {
        nextEl: ".next-testimonial-three",
        prevEl: ".prev-testimonial-three",
      },

      breakpoints: {
        1400: {
          slidesPerView: 2,
        },
      },
    });

    var testimonialFive = createSwiper(".ff-testimonial-slider", {
      loop: true,
      speed: 1000,
      slidesPerView: 1.1,
      slidesPerGroup: 1,
      spaceBetween: 24,
      centeredSlides: true,

      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      pagination: {
        el: ".ff-test-pagination",
        clickable: true,
      },

      breakpoints: {
        576: {
          slidesPerView: 1.3,
        },
        992: {
          slidesPerView: 2,
        },
        1200: {
          slidesPerView: 2.5,
        },
      },
    });

    var blogSliderFive = createSwiper(".ff-blog-slider", {
      loop: true,
      speed: 1000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 24,
      centeredSlides: true,

      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      pagination: {
        el: ".ff-pagination",
        clickable: true,
      },
      breakpoints: {
        992: {
          slidesPerView: 2,
        },
        1200: {
          slidesPerView: 3,
        },
      },
    });

    var causeSliderFive = createSwiper(".ff-cause-slider", {
      loop: true,
      speed: 1000,
      slidesPerView: 1.1,
      slidesPerGroup: 1,
      spaceBetween: 24,
      centeredSlides: true,

      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      pagination: {
        el: ".ff-pagination",
        clickable: true,
      },
      breakpoints: {
        576: {
          slidesPerView: 1.8,
        },
        992: {
          slidesPerView: 2.5,
        },
        1200: {
          slidesPerView: 3.4,
        },
        1600: {
          slidesPerView: 4.5,
        },
      },
    });

    /**
     * ======================================
     * 26. coming soon
     * ======================================
     */
    if ($(".clock").length > 0) {
      const hourMarkersContainer = document.querySelector(".hour-markers");
      if (hourMarkersContainer) {
        for (let i = 0; i < 12; i++) {
          const marker = document.createElement("div");
          marker.classList.add("hour-marker");
          const rotation = i * 30;
          marker.style.transform = `rotate(${rotation}deg) translateY(-216.25px)`;

          const hourText = document.createElement("span");
          hourText.textContent = i === 0 ? "12" : i;
          hourText.style.transform = `rotate(-${rotation}deg)`;
          marker.appendChild(hourText);

          hourMarkersContainer.appendChild(marker);
        }
      }

      const hourHand = document.querySelector(".hour-hand");
      const minuteHand = document.querySelector(".minute-hand");
      const secondHand = document.querySelector(".second-hand");
      const hasClockHands = hourHand && minuteHand && secondHand;

      function setClock() {
        const now = new Date();
        const seconds = now.getSeconds() + now.getMilliseconds() / 1000;
        const minutes = now.getMinutes() + seconds / 60;
        const hours = (now.getHours() % 12) + minutes / 60;

        const secondsDeg = (seconds / 60) * 360;
        const minutesDeg = (minutes / 60) * 360;
        const hoursDeg = (hours / 12) * 360;

        if (!hasClockHands) {
          return;
        }

        hourHand.style.transform = `rotate(${hoursDeg}deg)`;
        minuteHand.style.transform = `rotate(${minutesDeg}deg)`;
        secondHand.style.transform = `rotate(${secondsDeg}deg)`;
      }

      if (hasClockHands) {
        setInterval(setClock, 50);
        setClock();
      }

      const countdownElement = document.querySelector(".time-countdown");
      const dayElement = countdownElement
        ? countdownElement.querySelector(".day")
        : null;
      const hourElement = countdownElement
        ? countdownElement.querySelector(".hour")
        : null;
      const minuteElement = countdownElement
        ? countdownElement.querySelector(".minute")
        : null;
      const secondElement = countdownElement
        ? countdownElement.querySelector(".second")
        : null;

      const endDate = new Date();
      endDate.setDate(endDate.getDate() + 100);

      function updateCountdown() {
        const now = new Date();
        const timeRemaining = endDate - now;

        if (timeRemaining <= 0) {
          endDate.setDate(endDate.getDate() + 100);
        }

        const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
        const hours = Math.floor(
          (timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        const minutes = Math.floor(
          (timeRemaining % (1000 * 60 * 60)) / (1000 * 60)
        );
        const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

        if (!dayElement || !hourElement || !minuteElement || !secondElement) {
          return;
        }

        dayElement.textContent = days;
        hourElement.textContent = hours < 10 ? `0${hours}` : hours;
        minuteElement.textContent = minutes < 10 ? `0${minutes}` : minutes;
        secondElement.textContent = seconds < 10 ? `0${seconds}` : seconds;
      }

      if (dayElement && hourElement && minuteElement && secondElement) {
        setInterval(updateCountdown, 1000);
        updateCountdown();
      }
    }

    /**
     * ======================================
     * 28. product details slider
     * ======================================
     */
    var productGallery = createSwiper(".product-details-slider-gallery", {
      loop: true,
      speed: 1000,
      slidesPerView: 2,
      slidesPerGroup: 1,
      spaceBetween: 24,
      watchSlidesProgress: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      breakpoints: {
        576: {
          slidesPerView: 3,
        },
        768: {
          slidesPerView: 4,
        },
        1400: {
          slidesPerView: 4,
        },
      },
    });

    var productSlider = createSwiper(".product-details-slider", {
      loop: true,
      speed: 1000,
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 24,
      centeredSlides: true,
      slideToClickedSlide: true,
      roundLengths: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      thumbs: {
        swiper: productGallery,
      },
    });

    /**
     * ======================================
     * 29. product details tab
     * ======================================
     */

    $(".product-tab-content-single").hide();
    $(".product-tab-content-single:first").show();

    $(".product-tab__btn").on("click", function () {
      $(".product-tab__btn").removeClass("active");
      $(this).addClass("active");
      $(".product-tab-content-single").hide();
      var target = $(this).data("target");
      $(target).fadeIn(500);
      return false;
    });

    document.querySelectorAll(".range__slider").forEach(function (el) {
      el.oninput = function () {
        const minValue = Number.parseInt(el.min, 10);
        const maxValue = Number.parseInt(el.max, 10);
        const currentValue = Number.isNaN(el.valueAsNumber)
          ? minValue
          : el.valueAsNumber;
        const range = maxValue - minValue;
        const safeRange = range === 0 || Number.isNaN(range) ? 1 : range;
        var valPercent =
          (currentValue - (Number.isNaN(minValue) ? 0 : minValue)) / safeRange;
        var style =
          "background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(" +
          valPercent +
          ", #ffc107), color-stop(" +
          valPercent +
          ", #505D6A30));";
        el.style = style;
      };
      el.oninput();
    });

    /**
     * ======================================
     * 30. social link active on hover
     * ======================================
     */
    $(".comment-single").each(function () {
      $(this)
        .find(".reply-button button")
        .on("click", function () {
          var $currentComment = $(this).closest(".comment-single");
          $(".comment-single .reply-comment")
            .not($currentComment.find(".reply-comment"))
            .slideUp();
          $currentComment.find(".reply-comment").slideToggle();
          $(".comment-single .reply-button button")
            .not(this)
            .removeClass("active");
          $(this).toggleClass("active");
        });
    });

    $(".commmit-tab-single").hide();
    $(".commmit-tab-single:first").show();

    $(".commit__tab-btn").on("click", function () {
      $(".commit__tab-btn").removeClass("active");
      $(this).addClass("active");
      $(".commmit-tab-single").hide();
      var target = $(this).data("target");
      $(target).fadeIn(500);
      return false;
    });

    $(".fc-profit-single").hide();
    $(".fc-profit-single:first").show();

    $(".profit__tab-btn").on("click", function () {
      $(".profit__tab-btn").removeClass("active");
      $(this).addClass("active");
      $(".fc-profit-single").hide();
      var target = $(this).data("target");
      $(target).fadeIn(500);
      return false;
    });

    /**
     * ======================================
     * 31. footer copyright year
     * ======================================
     */
    if ($("#copyrightYear").length > 0) {
      $("#copyrightYear").text(new Date().getFullYear());
    }

    /**
     * ======================================
     * 32. aos initialization
     * ======================================
     */
    if (hasAOS) {
      AOS.init();
    }

    /**
     * ======================================
     * 33. vanilla tilt animations
     * ======================================
     */

    let Vantilt = document.querySelectorAll(".van-tilt");

    if (hasVanillaTilt && Vantilt.length > 0) {
      VanillaTilt.init(Vantilt, {
        max: 5,
        speed: 3000,
      });
    }

    /**
     * ======================================
     * 34. register gsap
     * ======================================
     */
    if (hasGsap && hasScrollTrigger && hasScrollToPlugin) {
      gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
    }

    /**
     * ======================================
     * 35. gsap null config
     * ======================================
     */
    if (hasGsap) {
      gsap.config({
        nullTargetWarn: false,
      });
    }

    /**
     * ======================================
     * 36. target section with gsap
     * ======================================
     */
    $('a[href^="#"]:not([href="#"])').on("click", function (event) {
      if (!(hasGsap && hasScrollToPlugin)) {
        return;
      }

      var target = $(this).attr("href");

      if (!target || target.charAt(0) !== "#") {
        return;
      }

      if (
        this.pathname !== window.location.pathname ||
        this.hostname !== window.location.hostname ||
        !document.querySelector(target)
      ) {
        return;
      }

      event.preventDefault();

      gsap.to(window, {
        scrollTo: {
          y: target,
          offsetY: 100,
        },
        duration: 1,
        ease: "power3.inOut",
      });
    });

    /**
     * ======================================
     * 37. parallax image with gsap
     * ======================================
     */
    var imageParallax = document.querySelectorAll(".parallax-image");
    if (hasGsap && hasScrollTrigger && imageParallax.length > 0) {
      $(".parallax-image").each(function () {
        $(this).wrap(
          '<div class="parallax-image-wrap"><div class="parallax-image-inner"></div></div>'
        );
        $(".parallax-image-wrap").css({
          overflow: "hidden",
        });

        var $animImageParallax = $(this);
        var $aipWrap = $animImageParallax.parents(".parallax-image-wrap");
        var $aipInner = $aipWrap.find(".parallax-image-inner");

        let tl_ImageParallax = gsap.timeline({
          scrollTrigger: {
            trigger: $aipWrap,
            start: "top bottom",
            end: "bottom top",
            scrub: true,
            onEnter: () => animImgParallaxRefresh(),
          },
        });
        tl_ImageParallax.to($animImageParallax, {
          yPercent: 80,
          ease: "none",
        });

        function animImgParallaxRefresh() {
          tl_ImageParallax.scrollTrigger.refresh();
        }

        let tl_aipZoomIn = gsap.timeline({
          scrollTrigger: {
            trigger: $aipWrap,
            start: "top 99%",
          },
        });
        tl_aipZoomIn.from($aipInner, {
          duration: 1.5,
          autoAlpha: 0,
          scale: 1.3,
          ease: Power2.easeOut,
          clearProps: "all",
        });
      });
    }

    /**
     * ======================================
     * 38. title animation
     * ======================================
     */

    if (hasGsap && hasSplitText && $(".title-animation").length > 0) {
      let char_come = gsap.utils.toArray(".title-animation");
      char_come.forEach((char_come) => {
        let split_char = new SplitText(char_come, {
          type: "chars, words",
          lineThreshold: 0.5,
        });
        const tl2 = gsap.timeline({
          scrollTrigger: {
            trigger: char_come,
            start: "top 90%",
            end: "bottom 60%",
            scrub: false,
            markers: false,
            toggleActions: "play none none none",
          },
        });
        tl2.from(split_char.chars, {
          duration: 0.8,
          x: 40,
          autoAlpha: 0,
          stagger: 0.05,
          ease: "back.out",
        });
      });
    }

    /**
     * ======================================
     * 39. banner three image animation
     * ======================================
     */
    if (hasGsap && $(".move-image").length > 0) {
      let mouse = { x: 0, y: 0, moved: false };

      $(document).mousemove(function (e) {
        mouse.moved = true;
        mouse.x = e.clientX;
        mouse.y = e.clientY;
      });

      gsap.ticker.add(() => {
        if (mouse.moved) {
          parallaxImages(".move-image", -30);
          mouse.moved = false;
        }
      });

      function parallaxImages(selector, movement) {
        $(selector).each(function () {
          const rect = this.getBoundingClientRect();
          const offsetX =
            ((mouse.x - (rect.left + rect.width / 2)) / rect.width) * movement;
          const offsetY =
            ((mouse.y - (rect.top + rect.height / 2)) / rect.height) * movement;

          gsap.to(this, {
            x: offsetX,
            y: offsetY,
            duration: 0.5,
          });
        });
      }
    }
    /**
     * ======================================
     * 40. progress bar
     * ======================================
     */

    if (hasGsap && hasScrollTrigger && $(".progress-bar-single").length > 0) {
      $("[data-percent]").each(function () {
        $(this)
          .find(".progress-bar-percent")
          .css("width", $(this).attr("data-percent"));
        $(this).find(".percent-value").text($(this).attr("data-percent"));
      });

      const ax_progress_bar = document.querySelectorAll(".progress-bar-single");
      ax_progress_bar.forEach((element) => {
        const w = element.querySelector(".progress-bar-percent");
        const p = element.querySelector(".percent-value");

        const target = p.textContent;

        const ax_bartl = gsap.timeline({
          defaults: {
            duration: 2,
          },
          scrollTrigger: {
            trigger: element,
          },
        });

        ax_bartl.fromTo(
          w,
          {
            width: 0,
          },
          {
            width: target,
          }
        );
        ax_bartl.from(
          p,
          {
            textContent: 0 + "%",
            snap: {
              textContent: 5,
            },
          },
          "<"
        );
      });
    }

    /**
     * ======================================
     * 41. circular progress bar
     * ======================================
     */
    if (hasGsap && hasScrollTrigger && $(".difference-progress-single").length > 0) {
      const progressBars = document.querySelectorAll(".progress-bar-single");

      progressBars.forEach((element) => {
        const percentAttr = element.getAttribute("data-percent");

        if (percentAttr) {
          const progress = percentAttr.replace("%", "");
          const percentDisplay = element.querySelector(".percent-value");
          const circle = element.querySelector(".circle-progress");

          if (percentDisplay && circle) {
            const radius = 15.9155;
            const circumference = 2 * Math.PI * radius;

            gsap.fromTo(
              circle,
              {
                strokeDashoffset: circumference,
              },
              {
                strokeDashoffset:
                  circumference - (progress / 100) * circumference,
                duration: 2,
                scrollTrigger: {
                  trigger: element,
                  start: "top 80%",
                  end: "bottom 20%",
                  toggleActions: "play none none none",
                },
              }
            );

            gsap.fromTo(
              percentDisplay,
              {
                textContent: 0,
              },
              {
                textContent: progress,
                duration: 2,
                snap: { textContent: 1 },
                ease: "power1.inOut",
                onUpdate: function () {
                  percentDisplay.textContent =
                    Math.round(percentDisplay.textContent) + "%";
                },
              }
            );
          }
        }
      });
    }

    /**
     * ======================================
     * 42. banner animation
     * ======================================
     */
    if (hasGsap && hasScrollTrigger && $(".banner").length > 0) {
      if (device_width >= 768) {
        var tl = gsap.timeline({
          scrollTrigger: {
            trigger: ".banner",
            start: "center center",
            end: "+=40%",
            scrub: 0.5,
            pin: false,
          },
        });
        tl.to(".circle-shape", {
          duration: 3,
          scale: 1.7,
        });
      }
    }


    // Home 6   Banner
      var slider = createSwiper('.banner-six-slide-active', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        speed: 2500,
        autoplay: true,
        // pagination
        pagination: {
          el: ".banner-six-slide-dot",
          clickable: true,
        },
      });



    // Home 6   testimonial
      var slider = createSwiper('.testimonial-six-active', {
        slidesPerView: 1,
        loop: true,
        effect: "cards",
        grabCursor: true,
        speed: 2500,
        autoplay: true,
        // pagination
        pagination: {
          el: ".testimonial-six-dot",
          clickable: true,
        },
      });


    // Home 7   testimonial
      var slider = createSwiper('.banner-seven-active', {
        loop: true,
        freemode: true,
        slidesPerView: 1.4,
        spaceBetween: 30,
        centeredSlides: false,
        allowTouchMove: false,
        speed: 8000,
        autoplay: {
          delay: 1,
          disableOnInteraction: true,
        },
      });

      // Home 7   testimonial
      var causeSlider = createSwiper(".cause-seven-active", {
        loop: true,
        speed: 1000,
        slidesPerView: 1,
        centeredSlides: true,
        spaceBetween: 24,
  
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        },
        navigation: {
          nextEl: ".next-cause",
          prevEl: ".prev-cause",
        },
        breakpoints: {
          768: {
            slidesPerView: 2,
          },
          992: {
            slidesPerView: 2,
          },
          1400: {
            slidesPerView: 3,
          },
        },
      });


      // Project scroll gsap js
      if (hasGsap && hasScrollTrigger) {
        let pr = gsap.matchMedia();
        pr.add("(min-width: 992px)", () => {

          let tl = gsap.timeline();
          let projectpanels = document.querySelectorAll('.project-panel');
          projectpanels.forEach((section) => {
            tl.to(section, {
              scrollTrigger: {
                trigger: section,
                pin: section,
                scrub: 1,
                start: 'center center',
                end: "bottom 100%",
                endTrigger: '.project-panel-area',
                pinSpacing: false,
                markers: false,
              },
            });
          });
        });
      }



      $('.hover-btn').on('mouseenter', function (e) {
          var x = e.pageX - $(this).offset().left;
          var y = e.pageY - $(this).offset().top;

          $(this).find('.hover-btn-circle-dot').css({
              top: y,
              left: x
          });
      });

      $('.hover-btn').on('mouseout', function (e) {
          var x = e.pageX - $(this).offset().left;
          var y = e.pageY - $(this).offset().top;

          $(this).find('.hover-btn-circle-dot').css({
              top: y,
              left: x
          });
      });


      // Animation
      if (hasGsap && hasSplitText && $('.char-animation').length > 0) {
        let char_come = gsap.utils.toArray(".char-animation");
        char_come.forEach((splitTextLine) => {
          const tl = gsap.timeline({
            scrollTrigger: {
              trigger: splitTextLine,
              start: 'top 90%',
              end: 'bottom 60%',
              scrub: false,
              markers: false,
              toggleActions: 'play none none none'

            }
          });

          const itemSplitted = new SplitText(splitTextLine, { type: "chars, words" });
          gsap.set(splitTextLine, { perspective: 300 });
          itemSplitted.split({ type: "chars, words" });
          tl.from(itemSplitted.chars,
            {
              duration: 1,
              delay: 0.5,
              x: 100,
              autoAlpha: 0,
              stagger: 0.05
            });
        });
      }

	  //  Home 8  Maquee 
    var slider = createSwiper('.maquee-eight-active', {
      slidesPerView: "auto",
      spaceBetween: 65,
      loop: true,
      speed: 7000,
      allowTouchMove: false,
      autoplay: {
        delay: 1,
        disableOnInteraction: true,
      },
      breakpoints: {
        320: {
          spaceBetween: 40,
        },
        768: {
          spaceBetween: 40,
        },
        992: {
          spaceBetween: 40,
        },
        1200: {
          spaceBetween: 65,
        },
      },
    });
  });


  // Home 8  Countdown
  (function () {
    const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24;
    let now = new Date(), year = now.getFullYear(), birthday = new Date(`09/30/${year}`);
    if (now > birthday) birthday = new Date(`09/30/${year + 1}`);

    const headlineEl = document.getElementById("headline");
    const countdownEl = document.getElementById("countdown");
    const contentEl = document.getElementById("content");
    const daysEl = document.getElementById("days");
    const hoursEl = document.getElementById("hours");
    const minutesEl = document.getElementById("minutes");
    const secondsEl = document.getElementById("seconds");

    const x = setInterval(() => {
      const distance = birthday - new Date();
      if (distance < 0) {
        if (headlineEl) headlineEl.innerText = "It's my birthday!";
        if (countdownEl) countdownEl.style.display = "none";
        if (contentEl) contentEl.style.display = "block";
        return clearInterval(x);
      }

      if (daysEl) daysEl.innerText = Math.floor(distance / day);
      if (hoursEl) hoursEl.innerText = Math.floor((distance % day) / hour);
      if (minutesEl) minutesEl.innerText = Math.floor((distance % hour) / minute);
      if (secondsEl) secondsEl.innerText = Math.floor((distance % minute) / second);
    }, 1000);
  })();


  // Home 8 team js
  var slider = createSwiper('.team-eight-active', {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    speed: 2500,
    // autoplay: true,
    breakpoints: {
      380: {
        slidesPerView: 1,
      },
      576: {
        slidesPerView: 2,
      },
      768: {
        slidesPerView: 2,
      },
      992: {
        slidesPerView: 3,
      },
      1200: {
        slidesPerView: 4,
      },
    },
    pagination: {
      el: ".team-eight-dot",
      clickable: true,
    },
    scrollbar: {
        el: ".swiper-scrollbar.one",
    },
  });

  // Home 8 team js
  var slider = createSwiper('.ministrie-eight-active', {
		slidesPerView: "auto",
		spaceBetween: 30,
		loop: true,
		speed: 2500,
		autoplay: true,
		centeredSlides: true,
		breakpoints: {
			'1600': {
				slidesPerView: 2.9,
			},
			'1400': {
				slidesPerView: 2.3,
			},
			'1200': {
				slidesPerView: 2.1,
			},
			'992': {
				slidesPerView: 1.8,
			},
			'768': {
				slidesPerView: 1.6,
			},
			'576': {
				slidesPerView: 1.2,
			},
			'0': {
				slidesPerView: 1,
			},
		},
		// pagination
    pagination: {
      el: ".ministrie-eight-dot",
      clickable: true,
    },
    scrollbar: {
        el: ".swiper-scrollbar.two",
    },
	});







	// Blog 8 active Js
	$(".blog-eight-wrap").on("mouseenter", function () {
		$(this).addClass("active").siblings().removeClass("active");
	});



})(window.jQuery);
