; (function ($) {
    'use strict';
    $(window).on('elementor/frontend/init', function () {

        
        // Service Box
        elementorFrontend.hooks.addAction('frontend/element_ready/techbizservicebox.default', function ($scope) {

            if ($('[data-bg-src]').length > 0) {
                $('[data-bg-src]').each(function () {
                    var src = $(this).attr('data-bg-src');
                    $(this).css('background-image', 'url(' + src + ')');
                    $(this).removeAttr('data-bg-src').addClass('background-image');
                });
            };
        });

        // Service Slider
        elementorFrontend.hooks.addAction('frontend/element_ready/techbizserviceslider.default', function ($scope) {

            let $slickcarousels = $scope.find('.vs-carousel');
            $slickcarousels.not('.slick-initialized').slick({
                dots: $slickcarousels.data('slick-dots'),
                infinite: true,
                arrows: $slickcarousels.data('slick-arrows'),
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: $slickcarousels.data('slick-autoplay'),
                autoplaySpeed: 6000,
                fade: false,
                speed: 1000,
                slidesToShow: $slickcarousels.data('slide-to-show'),
                slidesToScroll: 1,
                responsive: [{
                    breakpoint: 1200,
                    settings: {
                        slidesToShow: 3,
                        arrows: false,
                    }
                }, {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                        arrows: false,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                        arrows: false,
                    }
                }
                ]
            });

            if ($('[data-bg-src]').length > 0) {
                $('[data-bg-src]').each(function () {
                    var src = $(this).attr('data-bg-src');
                    $(this).css('background-image', 'url(' + src + ')');
                    $(this).removeAttr('data-bg-src').addClass('background-image');
                });
            };

        });

        // Testimonial Area Slider
        elementorFrontend.hooks.addAction('frontend/element_ready/techbiztestimonialarea.default', function ($scope) {

            // Function For Custom Arrow Btn
            $('[data-slick-next]').each(function () {
                $(this).on('click', function (e) {
                    e.preventDefault()
                    $($(this).data('slick-next')).slick('slickNext');
                })
            })

            $('[data-slick-prev]').each(function () {
                $(this).on('click', function (e) {
                    e.preventDefault()
                    $($(this).data('slick-prev')).slick('slickPrev');
                })
            })

            let $slickcarousels = $scope.find('.vs-carousel');
            $slickcarousels.not('.slick-initialized').slick({
                dots: false,
                infinite: true,
                arrows: false,
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: false,
                autoplaySpeed: 6000,
                fade: false,
                speed: 1000,
                slidesToShow: 3,
                slidesToScroll: 1,
                responsive: [{
                    breakpoint: 1200,
                    settings: {
                        slidesToShow: 3,
                    }
                }, {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
                ]
            });

            if ($('[data-bg-src]').length > 0) {
                $('[data-bg-src]').each(function () {
                    var src = $(this).attr('data-bg-src');
                    $(this).css('background-image', 'url(' + src + ')');
                    $(this).removeAttr('data-bg-src').addClass('background-image');
                });
            };



        });

        // Project Slider
        elementorFrontend.hooks.addAction('frontend/element_ready/techbizprojectslider.default', function ($scope) {

            // Function For Custom Arrow Btn
            $('[data-slick-next]').each(function () {
                $(this).on('click', function (e) {
                    e.preventDefault()
                    $($(this).data('slick-next')).slick('slickNext');
                })
            })

            $('[data-slick-prev]').each(function () {
                $(this).on('click', function (e) {
                    e.preventDefault()
                    $($(this).data('slick-prev')).slick('slickPrev');
                })
            })

            let $slickcarousels = $scope.find('.vs-carousel');
            $slickcarousels.not('.slick-initialized').slick({
                dots: false,
                infinite: true,
                arrows: $slickcarousels.data('slick-arrows'),
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: $slickcarousels.data('slick-autoplay'),
                autoplaySpeed: 6000,
                fade: false,
                speed: 1000,
                slidesToShow: $slickcarousels.data('slide-to-show'),
                slidesToScroll: 1,
                responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
                ]
            });

        });

        // Project Filter
        elementorFrontend.hooks.addAction('frontend/element_ready/techbizprojectfilter.default', function ($scope) {

            /*----------- 13. Filter ----------*/
            $('.filter-active').imagesLoaded(function () {
                var $filter = '.filter-active',
                    $filterItem = '.filter-item',
                    $filterMenu = '.filter-menu-active';

                if ($($filter).length > 0) {
                    var $grid = $($filter).isotope({
                        itemSelector: $filterItem,
                        filter: '*',
                        masonry: {
                            // use outer width of grid-sizer for columnWidth
                            columnWidth: 1
                        }
                    });
                };
            });

        });

        // Project Filter Two
        elementorFrontend.hooks.addAction('frontend/element_ready/techbizprojectfiltertwo.default', function ($scope) {

            $('.filter-active, .filter-active2').imagesLoaded(function () {
                var $filter = '.filter-active',
                    $filter2 = '.filter-active2',
                    $filterItem = '.filter-item',
                    $filterMenu = '.filter-menu-active';

                if ($($filter).length > 0) {
                    var $grid = $($filter).isotope({
                        itemSelector: $filterItem,
                        filter: '*',
                        masonry: {
                            // use outer width of grid-sizer for columnWidth
                            columnWidth: 1
                        }
                    });
                };

                if ($($filter2).length > 0) {
                    var $grid = $($filter2).isotope({
                        itemSelector: $filterItem,
                        filter: '*',
                        masonry: {
                            // use outer width of grid-sizer for columnWidth
                            columnWidth: $filterItem
                        }
                    });
                };

                // Menu Active Class
                $($filterMenu).on('click', 'button', function (event) {
                    event.preventDefault();
                    var filterValue = $(this).attr('data-filter');
                    $grid.isotope({
                        filter: filterValue
                    });
                    $(this).addClass('active');
                    $(this).siblings('.active').removeClass('active');
                });
            });

        });

        // Pricing Slider
        elementorFrontend.hooks.addAction('frontend/element_ready/techbizpricingtable.default', function ($scope) {

            if ($('[data-bg-src]').length > 0) {
                $('[data-bg-src]').each(function () {
                    var src = $(this).attr('data-bg-src');
                    $(this).css('background-image', 'url(' + src + ')');
                    $(this).removeAttr('data-bg-src').addClass('background-image');
                });
            };

            let $slickcarousels = $scope.find('.vs-carousel');
            $slickcarousels.not('.slick-initialized').slick({
                dots: false,
                infinite: true,
                arrows: $slickcarousels.data('slick-arrows'),
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: $slickcarousels.data('slick-autoplay'),
                autoplaySpeed: 6000,
                fade: false,
                speed: 1000,
                slidesToShow: $slickcarousels.data('slide-to-show'),
                slidesToScroll: 1,
                centermode: true,
                responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
                ]
            });

        });

        // Blog Slider
        elementorFrontend.hooks.addAction('frontend/element_ready/techbizblogpost.default', function ($scope) {

            let $slickcarousels = $scope.find('.vs-carousel');
            $slickcarousels.not('.slick-initialized').slick({
                dots: false,
                infinite: true,
                arrows: false,
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: true,
                autoplaySpeed: 6000,
                fade: false,
                speed: 1000,
                slidesToShow: $slickcarousels.data('slide-to-show'),
                slidesToScroll: 1,
                responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
                ]
            });

        });

        // Faq Area
        elementorFrontend.hooks.addAction('frontend/element_ready/techbizfaqarea.default', function ($scope) {

            if ($('[data-bg-src]').length > 0) {
                $('[data-bg-src]').each(function () {
                    var src = $(this).attr('data-bg-src');
                    $(this).css('background-image', 'url(' + src + ')');
                    $(this).removeAttr('data-bg-src').addClass('background-image');
                });
            };

        });

        // Team Slider
        elementorFrontend.hooks.addAction('frontend/element_ready/techbizteammember.default', function ($scope) {

            let $slickcarousels = $scope.find('.vs-carousel');
            $slickcarousels.not('.slick-initialized').slick({
                dots: true,
                infinite: true,
                arrows: $slickcarousels.data('slick-arrows'),
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: $slickcarousels.data('slick-autoplay'),
                autoplaySpeed: 6000,
                fade: false,
                speed: 1000,
                slidesToShow: $slickcarousels.data('slide-to-show'),
                slidesToScroll: 1,
                responsive: [{
                    breakpoint: 1200,
                    settings: {
                        slidesToShow: 3,
                        arrows: false,
                    }
                }, {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                        arrows: false,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                        arrows: false,
                    }
                }
                ]
            });

        });

        // Testimonial Slider
        elementorFrontend.hooks.addAction('frontend/element_ready/techbiztestimonialslider.default', function ($scope) {

            // Function For Custom Arrow Btn
            $('[data-slick-next]').each(function () {
                $(this).on('click', function (e) {
                    e.preventDefault()
                    $($(this).data('slick-next')).slick('slickNext');
                })
            })

            $('[data-slick-prev]').each(function () {
                $(this).on('click', function (e) {
                    e.preventDefault()
                    $($(this).data('slick-prev')).slick('slickPrev');
                })
            })


            let $slickcarousels = $scope.find('.style-one.vs-carousel');
            $slickcarousels.not('.slick-initialized').slick({
                dots: false,
                infinite: true,
                arrows: false,
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: $slickcarousels.data('slick-autoplay'),
                autoplaySpeed: 6000,
                fade: false,
                speed: 1000,
                slidesToShow: $slickcarousels.data('slide-to-show'),
                slidesToScroll: 1,
                responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
                ]
            });

            let $slickcarouselsfour = $scope.find('.style-four.vs-carousel');
            $slickcarouselsfour.not('.slick-initialized').slick({
                dots: false,
                infinite: true,
                arrows: false,
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: $slickcarouselsfour.data('slick-autoplay'),
                autoplaySpeed: 6000,
                fade: false,
                speed: 1000,
                slidesToShow: $slickcarouselsfour.data('slide-to-show'),
                slidesToScroll: 1,
                responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
                ]
            });

            let $img_box6 = $scope.find('.img-box6.vs-carousel');
            $img_box6.not('.slick-initialized').slick({
                dots: false,
                infinite: true,
                arrows: false,
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: false,
                autoplaySpeed: 6000,
                fade: true,
                speed: 1000,
                slidesToShow: 1,
                slidesToScroll: 1,
                asNavFor: ".testi-text-slide, .testi-author-slide"
            });

            let $testitextslide = $scope.find('.testi-text-slide.vs-carousel');
            $testitextslide.not('.slick-initialized').slick({
                dots: false,
                infinite: true,
                arrows: false,
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: false,
                autoplaySpeed: 6000,
                fade: true,
                speed: 1000,
                slidesToShow: 1,
                slidesToScroll: 1,
                asNavFor: ".img-box6, .testi-author-slide"
            });

            let $testiauthorslide = $scope.find('.testi-author-slide.vs-carousel');
            $testiauthorslide.not('.slick-initialized').slick({
                dots: false,
                infinite: true,
                arrows: false,
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: false,
                autoplaySpeed: 6000,
                fade: false,
                speed: 1000,
                slidesToShow: 2,
                slidesToScroll: 1,
                asNavFor: ".testi-text-slide, .img-box6",
                focusOnSelect: true,
                responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
                ]
            });

            let $slickcarouselstwo = $scope.find('.testi-style2-slide.vs-carousel');
            $slickcarouselstwo.not('.slick-initialized').slick({
                dots: false,
                infinite: true,
                arrows: false,
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: false,
                autoplaySpeed: 6000,
                fade: false,
                speed: 1000,
                slidesToShow: $slickcarouselstwo.data('slide-to-show'),
                slidesToScroll: 1,
                responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
                ]
            });


            $('.testi-nav').each(function () {
                var tabBtnIndex = 0;
                $(this).find('.tab-btn').each(function () {
                    var btnCurrent = $(this);
                    btnCurrent.attr('data-goto', tabBtnIndex)
                    tabBtnIndex++;
                    btnCurrent.on('click', function () {
                        $('#testislide2').slick('slickGoTo', btnCurrent.data('goto'));
                    })
                });
            });

            let testiSlide = $scope.find('#testislide2');

            testiSlide.on('init', function (event, slick, currentSlide) {
                var cur = $(slick.$slides[slick.currentSlide]);
                var currentIndex = cur.data('slick-index');
                var prevIndex = cur.prev().data('slick-index');
                var nextIndex = cur.next().data('slick-index');
                $(`.testi-nav .tab-btn[data-goto="${currentIndex}"]`).addClass('active');
                $(`.testi-nav .tab-btn[data-goto="${nextIndex}"]`).addClass('next');
                $(`.testi-nav .tab-btn[data-goto="${prevIndex}"]`).addClass('prev');
                slick.$prevIndex = prevIndex;
                slick.$nextIndex = nextIndex;
            }).on('beforeChange', function (event, slick, currentSlide, nextSlide) {
                var cur = $(slick.$slides[nextSlide]);
                var currentIndex = cur.data('slick-index');
                $(`.testi-nav .tab-btn[data-goto="${slick.$prevIndex}"]`).removeClass('prev');
                $(`.testi-nav .tab-btn[data-goto="${slick.$nextIndex}"]`).removeClass('next');
                var prevIndex = cur.prev().data('slick-index');
                var nextIndex = cur.next().data('slick-index');
                $(`.testi-nav .tab-btn[data-goto="${nextIndex}"]`).addClass('next');
                $(`.testi-nav .tab-btn[data-goto="${prevIndex}"]`).addClass('prev');
                slick.$prevIndex = prevIndex;
                slick.$nextIndex = nextIndex;
                $(`.testi-nav .tab-btn[data-goto="${currentIndex}"]`).addClass('active').removeClass('next').removeClass('prev').siblings().removeClass('active');
            });

            testiSlide.not('.slick-initialized').slick({
                speed: 600,
                arrows: false,
                fade: true,
                dots: false,
                slidesPerRow: 1,
                slidesToShow: 1,
                slidesToScroll: 1,
                infinite: false, // Infinite should set be false
                responsive: [{
                    breakpoint: 992,
                    settings: {
                        dots: false
                    }
                }
                ]
            });

        });

        // Counter Animation
        elementorFrontend.hooks.addAction('frontend/element_ready/techbizcounter.default', function ($scope) {

            function animateCounter(counter) {
                const targetValue = parseInt(counter.getAttribute("data-counter"));
                const animationDuration = 1000; // Set the desired animation duration in milliseconds
                const startTimestamp = performance.now();

                function updateCounter(timestamp) {
                    const elapsed = timestamp - startTimestamp;
                    const progress = Math.min(elapsed / animationDuration, 1);

                    const currentValue = Math.floor(targetValue * progress);
                    counter.textContent = currentValue;

                    if (progress < 1) {
                        requestAnimationFrame(updateCounter);
                    }
                }

                requestAnimationFrame(updateCounter);
            }

            function startCounterAnimation(entries, observer) {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        const counter = entry.target.querySelector(".counter-media__number");
                        animateCounter(counter);
                        // observer.unobserve(entry.target);
                    }
                });
            }

            const counterObserver = new IntersectionObserver(startCounterAnimation, {
                rootMargin: "0px",
                threshold: 0.2, // Adjust the threshold value as needed (0.2 means 20% visibility)
            });

            const counterBlocks = document.querySelectorAll(".counter-media");
            counterBlocks.forEach((counterBlock) => {
                counterObserver.observe(counterBlock);
            });
        });

        // Circle Animation
        elementorFrontend.hooks.addAction('frontend/element_ready/techbizskill.default', function ($scope) {
            function handleIntersection(entries, observer) {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        // Your existing code to animate the circle percent
                        var $this = $(entry.target),
                            $dataV = $this.data("percent"),
                            $dataDeg = $dataV * 3.6,
                            $round = $this.find(".round_per");

                        $round.css("transform", "rotate(" + parseInt($dataDeg + 180) + "deg)");
                        $this.append(
                            '<div class="circle_inbox"><span class="percent_text"></span></div>'
                        );

                        $this.prop("Counter", 0).animate(
                            { Counter: $dataV },
                            {
                                duration: 2000,
                                easing: "swing",
                                step: function (now) {
                                    $this.find(".percent_text").text(Math.ceil(now) + "%");
                                },
                            }
                        );

                        if ($dataV >= 51) {
                            $round.css("transform", "rotate(" + 360 + "deg)");
                            setTimeout(function () {
                                $this.addClass("percent_more");
                            }, 1000);
                            setTimeout(function () {
                                $round.css(
                                    "transform",
                                    "rotate(" + parseInt($dataDeg + 180) + "deg)"
                                );
                            }, 1000);
                        }
                        // Disconnect the observer after triggering the animation
                        observer.unobserve(entry.target);
                    }
                });
            }
            var circleObserver = new IntersectionObserver(handleIntersection, {
                threshold: 0.5, // Adjust the threshold as needed
            });
            $(".circle_percent").each(function () {
                circleObserver.observe(this);
            });
        });
        elementorFrontend.hooks.addAction('frontend/element_ready/techbizmarqueeslider.default', function ($scope) {
            $('.marquee').marquee({
                //duration in milliseconds of the marquee
                duration: 25000,
                //gap in pixels between the tickers
                gap: 50,
                //time in milliseconds before the marquee will start animating
                delayBeforeStart: 1,
                //'left' or 'right'
                direction: 'left',
                //true or false - should the marquee be duplicated to show an effect of continues flow
                duplicated: true
            });

            $('.marquee2').marquee({
                //duration in milliseconds of the marquee
                duration: 25000,
                //gap in pixels between the tickers
                gap: 50,
                //time in milliseconds before the marquee will start animating
                delayBeforeStart: 1,
                //'left' or 'right'
                direction: 'left',
                //true or false - should the marquee be duplicated to show an effect of continues flow
                duplicated: true
            });
        });

        elementorFrontend.hooks.addAction('frontend/element_ready/techbizslider.default', function ($scope) {
            /*----------- 08. Global Slider ----------*/
            let $slickcarousels = $scope.find('.vs-carousel');
            $slickcarousels.not('.slick-initialized').slick({
                dots: $slickcarousels.data('dots'),
                infinite: true,
                arrows: $slickcarousels.data('slick-arrows'),
                prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
                autoplay: $slickcarousels.data('slick-autoplay'),
                autoplaySpeed: 6000,
                fade: false,
                speed: 1000,
                slidesToShow: $slickcarousels.data('slide-to-show'),
                slidesToScroll: 1,
                responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
                ]
            });
        });

        
    });

}(jQuery));