<!-- =============================footer============================= -->
<footer class="footer">
    <div class="container">
        <!-- Contact Info Row -->
        <!-- <div class="row text-center text-md-start mb-5 contact-border">
            <div class="col-md-4 contact-info">
                <i class="fas fa-map-marker-alt"></i>
                <span><strong>Address:</strong>63 Rafi Ahmed street, Kolkata</span>
            </div>

            <div class="col-md-4 contact-info">
                <i class="fas fa-phone"></i>
                <span><strong>Phone:</strong>(00) 875 784 568</span>
            </div>

            <div class="col-md-4 contact-info">
                <i class="fas fa-envelope"></i>
                <span><strong>Email:</strong>info@gmail.com</span>
            </div>
        </div> -->
        <div class="top-margin">
            <!-- Footer Main Row -->
            <div class="row">
                <!-- Logo + About -->
                <div class="col-lg-3 col-md-6 mb-4 footer-logo">
                    <img src="images/logo.png" alt="Logo">
                    <p class="mt-2">Discover durable designs for Australian weather</p>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-pinterest-p"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div class="col-lg-2 col-md-6 mb-4">
                    <h5>Quick Links</h5>
                    <ul class="list-unstyled mt-3">
                        <li><a class="menu-link" href="index.php">Home</a></li>
                        <li><a class="menu-link" href="#">About Us</a></li>
                        <li><a class="menu-link" href="#">Products</a></li>
                        <li><a class="menu-link" href="#">Video</a></li>
                        <li><a class="menu-link" href="#">Specials</a></li>
                    </ul>
                </div>

                <!-- Others -->
                <div class="col-lg-2 col-md-6 mb-4">
                    <h5>Others Link</h5>
                    <ul class="list-unstyled mt-3">
                        <li><a class="menu-link" href="#">Contact Us</a></li>
                        <li><a class="menu-link" href="#">Blog</a></li>
                        <li><a class="menu-link" href="#">Privacy Policy</a></li>
                        <li><a class="menu-link" href="#">Shipping Policy</a></li>
                        <li><a class="menu-link" href="#">Terms & Conditions</a></li>
                    </ul>
                </div>


                <div class="col-lg-2 col-md-6 mb-4">
                    <h5>Products</h5>
                    <ul class="list-unstyled mt-3">
                        <li><a class="menu-link" href="#">Seating</a></li>
                        <li><a class="menu-link" href="#">Dining</a></li>
                        <li><a class="menu-link" href="#">Lounges</a></li>
                        <li><a class="menu-link" href="#">Chairs</a></li>
                        <li><a class="menu-link" href="#">Tables</a></li>
                    </ul>
                </div>

                <!-- Contact Us -->
                <div class="col-lg-3 col-md-6 mb-4">
                    <h5>Contact Us</h5>
                    <ul class="list-unstyled mt-3">
                        <li><a class="menu-link" href="#"><i class="fas fa-phone"></i> 0394297458</a></li>
                        <li><a class="menu-link" href="#"><i class="fas fa-map-marker-alt"></i> 609 Bridge Road Richmond
                                Vic 3121</a></li>
                        <li><a class="menu-link" href="#"><i class="fas fa-envelope"></i>
                                sales@plumindustries.com.au</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <p>© Copyright Onqanet Technologies. All right reserved</p>
    </div>
</footer>


<!-- ===============================popup content================================ -->

<div class="custom-model-main">
    <div class="custom-model-inner">
        <div class="close-btn">×</div>
        <div class="custom-model-wrap">
            <div class="pop-up-content-wrap">
                <div class="contact-page-form" method="post">
                    <h2>Request a Quote</h2>
                    <form action="contact-mail.php" method="post">
                        <div class="row">
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <input type="text" placeholder="Full Name" name="full_name" required>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <input type="text" placeholder="Company / Business Name" name="company_name">
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <input type="email" placeholder="Email Address" name="email" required>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <input type="text" placeholder="Phone Number" name="phone" required>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <select name="product_type" required>
                                        <option value="">Select Product Type</option>
                                        <option value="dry_ice_pellets">Dry Ice Pellets</option>
                                        <option value="dry_ice_blocks">Dry Ice Blocks</option>
                                        <option value="custom_quantity">Custom Quantity</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <input type="text" placeholder="Required Quantity (kg)" name="quantity">
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <select name="industry">
                                        <option value="">Select Industry</option>
                                        <option value="logistics">Transport & Logistics</option>
                                        <option value="hospitality">Hospitality</option>
                                        <option value="food_production">Food Production</option>
                                        <option value="medical">Medical / Hospitals</option>
                                        <option value="cleaning">Dry Ice Blasting / Cleaning</option>
                                        <option value="education">Education / Research</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <input type="date" name="delivery_date">
                                </div>
                            </div>

                            <div class="col-md-12 message-input">
                                <div class="single-input-field">
                                    <textarea placeholder="Additional Requirements / Message" name="message"></textarea>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="single-input-fieldsbtn">
                                    <input type="submit" value="Request a Quote">
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-overlay"></div>
</div>



</body>

</html>

<!-- ====================================category slider=============================== -->
<script>
    $('.category-slider').slick({
        dots: true,
        arrows: true,
        infinite: false,
        speed: 300,
        slidesToShow: 2,
        slidesToScroll: 2,
        responsive: [{
                breakpoint: 1024,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });
</script>

<!-- ====================================perticle================================== -->

<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script>
    particlesJS('particles-js', {
        particles: {
            number: {
                value: 80,
                density: {
                    enable: true,
                    value_area: 800
                }
            },
            color: {
                value: '#1e6bff'
            },
            shape: {
                type: 'circle',
                stroke: {
                    width: 0,
                    color: '#000000'
                },
            },
            opacity: {
                value: 0.5,
                random: false,
            },
            size: {
                value: 3,
                random: true,
            },
            line_linked: {
                enable: true,
                distance: 150,
                color: '#1e6bff',
                opacity: 0.4,
                width: 1
            },
            move: {
                enable: true,
                speed: 6,
                direction: 'none',
                random: false,
                straight: false,
                out_mode: 'out',
                attract: {
                    enable: false
                }
            }
        },
        interactivity: {
            detect_on: 'canvas',
            events: {
                onhover: {
                    enable: true,
                    mode: 'repulse'
                },
                onclick: {
                    enable: true,
                    mode: 'push'
                },
                resize: true
            },
            modes: {
                repulse: {
                    distance: 100,
                    duration: 0.4
                },
                push: {
                    particles_nb: 4
                }
            }
        },
        retina_detect: true
    });
</script>
<!-- ===========================header========================================= -->

<script>
    const toggler = document.querySelector('.navbar-toggler');
    const nav = document.querySelector('#main_nav');
    const overlay = document.querySelector('.menu-overlay');

    toggler.addEventListener('click', () => {
        overlay.classList.toggle('active');
    });

    overlay.addEventListener('click', () => {
        nav.classList.remove('show');
        overlay.classList.remove('active');
    });
</script>

<script>
    window.addEventListener("scroll", function() {
        var navbar = document.querySelector(".navbar");
        navbar.classList.toggle("scrolled", window.scrollY > 100);
    });
</script>

<!-- ================================category slider============================== -->
<script>
    $('.category-slide').slick({
        dots: false,
        arrows: true,
        infinite: false,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 4,
        responsive: [{
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: false
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });
</script>


<!-- ============================text animation=========================== -->

<script>
    // Wrap every letter in a span
    var textWrapper = document.querySelector('.ml3');
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

    anime.timeline({
            loop: false
        })
        .add({
            targets: '.ml3 .letter',
            opacity: [0, 1],
            easing: "easeInOutQuad",
            duration: 1000,
            delay: (el, i) => 30 * (i + 1)
        }).add({
            targets: '.ml3',
            opacity: 1,
            duration: 1000,
            easing: "easeOutExpo",
            delay: 1000
        });
</script>
<script>
    // Wrap every letter in a span
    var textWrapper = document.querySelector('.ml4');
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

    anime.timeline({
            loop: false
        })
        .add({
            targets: '.ml4 .letter',
            opacity: [0, 1],
            easing: "easeInOutQuad",
            duration: 1000,
            delay: (el, i) => 30 * (i + 1)
        }).add({
            targets: '.ml4',
            opacity: 1,
            duration: 1000,
            easing: "easeOutExpo",
            delay: 1000
        });
</script>

<script>
    // Wrap every letter in a span
    var textWrapper = document.querySelector('.ml5');
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

    anime.timeline({
            loop: false
        })
        .add({
            targets: '.ml5 .letter',
            opacity: [0, 1],
            easing: "easeInOutQuad",
            duration: 1000,
            delay: (el, i) => 30 * (i + 1)
        }).add({
            targets: '.ml5',
            opacity: 1,
            duration: 1000,
            easing: "easeOutExpo",
            delay: 1000
        });
</script>

<!-- =============================all heading======================== -->
<script>
    document.querySelectorAll('.ml10').forEach((heading) => {

        const lettersWrapper = heading.querySelector('.letters');

        // Wrap each letter in span
        lettersWrapper.innerHTML = lettersWrapper.textContent.replace(/\S/g,
            "<span class='letter'>$&</span>"
        );

        // Create animation (autoplay false)
        const animation = anime.timeline({
                autoplay: false
            })
            .add({
                targets: heading.querySelectorAll('.letter'),
                rotateY: [-90, 0],
                duration: 1300,
                delay: (el, i) => 45 * i
            });

        // Scroll Trigger
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    animation.play();
                    observer.unobserve(entry.target); // run once
                }
            });
        }, {
            threshold: 0.5
        });

        observer.observe(heading);

    });
</script>



<script>
    document.querySelectorAll('.ml12').forEach((textWrapper) => {

        // Wrap every letter
        textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g,
            "<span class='letter'>$&</span>"
        );

        // Create animation (no autoplay)
        const animation = anime.timeline({
                autoplay: false
            })
            .add({
                targets: textWrapper.querySelectorAll('.letter'),
                translateX: [40, 0],
                opacity: [0, 1],
                easing: "easeOutExpo",
                duration: 1200,
                delay: (el, i) => 30 * i
            });

        // Scroll Trigger
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    animation.play();
                    observer.unobserve(entry.target); // run once
                }
            });
        }, {
            threshold: 0.5
        });

        observer.observe(textWrapper);

    });
</script>


<!-- ===================================counter=================================== -->
<script>
    $(function() {
        var triggered = false;
        var $section = $('.counter-sec'); // check the whole section
        if ($section.length === 0) return; // nothing to do

        function runCounters() {
            $('.counter-number').each(function() {
                var $this = $(this);
                var countTo = parseInt($this.attr('data-count'), 10) || 0;
                $({
                    countNum: 0
                }).animate({
                    countNum: countTo
                }, {
                    duration: 8000,
                    easing: 'linear',
                    step: function(now) {
                        $this.text(Math.floor(now) + 'K+');
                    },
                    complete: function() {
                        $this.text(countTo + 'K+');
                    }
                });
            });
        }

        function checkScroll() {
            var winHeight = $(window).height();
            var scrollTop = $(window).scrollTop();
            var sectionTop = $section.offset().top;

            // trigger when section enters viewport
            if (!triggered && (scrollTop + winHeight) >= sectionTop) {
                triggered = true;
                runCounters();
            }
        }

        // initial check in case section is already in view
        checkScroll();
        $(window).on('scroll', checkScroll);
    });
</script>



<!-- =====================================category==================================== -->

<script>
    const cards = document.querySelectorAll('.electro-card');

    cards.forEach((card, index) => {
        const arrow = document.createElement('div');
        arrow.classList.add('electro-btn');
        arrow.innerHTML = '→';
        card.appendChild(arrow);

        arrow.addEventListener('click', () => {
            // Reset all cards to default
            cards.forEach((c) => {
                c.classList.remove('active');
                c.querySelector('.electro-more')?.style.setProperty('display', 'none');
                c.querySelector('.electro-btn')?.style.setProperty('display', 'flex');
            });

            // Activate clicked card
            card.classList.add('active');
            arrow.style.display = 'none';
            card.querySelector('.electro-more').style.display = 'block';
        });
    });

    // Hide arrow and show 'READ MORE' on the first active card by default
    const activeCard = document.querySelector('.electro-card.active');
    if (activeCard) {
        activeCard.querySelector('.electro-btn').style.display = 'none';
        activeCard.querySelector('.electro-more').style.display = 'block';
    }
</script>


<!-- ===========================loader============================ -->
<script>
    window.addEventListener("load", function() {
        const loader = document.querySelector(".lux-loader");
        loader.style.transition = "opacity .5s ease";
        loader.style.opacity = "0";
        setTimeout(() => {
            loader.style.display = "none";
        }, 1000);
    });
</script>


<!-- ==============================testimonial============================== -->
<script>
    $(document).ready(function() {
        $("#testimonial-slider").owlCarousel({
            items: 2,
            itemsDesktop: [1024, 2],
            itemsDesktopSmall: [980, 2],
            itemsTablet: [768, 2],
            itemsMobile: [650, 1],
            pagination: true,
            navigation: false,
            slideSpeed: 1000,
            autoPlay: true
        });
    });
</script>


<!-- =================================aos============================== -->

<script>
    AOS.init({
        duration: 2000
    });
</script>


<!-- ====================================gallery============================== -->
<script>
    // $('.portfolio-item').isotope({
    //  	itemSelector: '.item',
    //  	layoutMode: 'fitRows'
    //  });

    $('.portfolio-menu ul li').click(function() {
        $('.portfolio-menu ul li').removeClass('active');
        $(this).addClass('active');

        var selector = $(this).attr('data-filter');
        $('.portfolio-item').isotope({
            filter: selector
        });
        return false;
    });
    $(document).ready(function() {
        var popup_btn = $('.popup-btn');
        popup_btn.magnificPopup({
            type: 'image',
            gallery: {
                enabled: true
            }
        });
    });
</script>


<!-- =====================================faq================================= -->
<script>
    document.querySelectorAll(".qna__item").forEach((item) => {
        const minimizeSiblings = true;
        const question = item.querySelector(".qna__question");
        const answer = item.querySelector(".qna__answer");
        const cssDuration = getComputedStyle(answer).getPropertyValue(
            "--qna-animation-duration"
        );
        const animationDuration = Number.parseInt(
            Number.parseFloat(cssDuration) * (/\ds$/.test(cssDuration) ? 1000 : 1)
        );
        const setHeight = () =>
            answer.style.setProperty(
                "--qna-details-height",
                `${answer.scrollHeight}px`
            );

        item.classList.add("js-details");

        const onClick = (event) => {
            setHeight();

            let isAnimating = true;
            item.classList.toggle("is-open");
            item.classList.add("is-animating");

            setTimeout(() => {
                item.classList.remove("is-animating");
            }, animationDuration);

            if (item.open) {
                event.preventDefault();
                if (isAnimating) return;
                setTimeout(() => {
                    item.open = false;
                    isAnimating = false;
                }, animationDuration);
            }

            if (!minimizeSiblings) return;

            const siblings = [...item.parentNode.children]
                .filter((el) => el.classList.contains("js-details"))
                .filter((el) => el !== event.target.parentNode);

            for (const el of siblings) {
                el.classList.remove("is-open");
                setTimeout(() => {
                    el.open = false;
                }, animationDuration);
            }
        };

        question.addEventListener("click", onClick);
    });

    // By default, when an answer is expanded, the neighboring ones collapse. This behavior can be disabled by setting the JS variable minimizeSiblings to false.
</script>



<!-- ===================================pop up================================ -->
<script>
    $(".Click-here").on("click", function() {
        $(".custom-model-main").addClass("model-open");
    });

    $(".close-btn, .bg-overlay").on("click", function() {
        $(".custom-model-main").removeClass("model-open");
    });
</script>



<!-- ===========================product details============================== -->
<script>
    let productImages = document.querySelectorAll(".productPageImagesBar .image");
    let productFullImage = document.querySelector(".productPageFullImage img");
    let productDots = document.querySelectorAll(".imgDots i");

    /* product images */
    productImages.forEach((productImage, index) => {
        productImage.addEventListener("click", (event) => {

            productImages.forEach((img) => {
                img.classList.remove("selected");
            })
            productDots.forEach((i) => {
                i.classList.remove("selected");
            })

            productDots[index].classList.add("selected");
            productImage.classList.add("selected");

            productFullImage.src = productImage.children[0].src;
            productFullImage.parentElement.style.setProperty("--img", "url(" + productFullImage.src + ")");

        });
    });
    productImages[0].click();

    /* product dots */
    productDots.forEach((productDot, index) => {
        productDot.addEventListener("click", (event) => {
            productImages[index].click();
        });
    })


    /* distingush color & size prefered */
    var sizes = document.querySelectorAll(".productSizes span");
    var colors = document.querySelectorAll(".colorsAvailable span");

    sizes.forEach((size) => {
        size.addEventListener("click", (e) => {
            sizes.forEach((size) => {
                size.classList.remove("choosedSize");
            });
            size.classList.add("choosedSize");
        });
    });
    colors.forEach((color) => {
        color.addEventListener("click", (e) => {
            colors.forEach((color) => {
                color.classList.remove("choosedColor");
            });
            color.classList.add("choosedColor");
        });
    })
    /* */


    /* zoom in & out */
    let imgZoom = productFullImage.parentElement;
    imgZoom.addEventListener("mousemove", (e) => {
        imgZoom.style.setProperty("--display", "block");
        imgZoom.style.setProperty("--zoom-x", `${e.offsetX / imgZoom.offsetWidth * 100}%`);
        imgZoom.style.setProperty("--zoom-y", `${e.offsetY / imgZoom.offsetHeight * 100}%`);
    })
    imgZoom.addEventListener("mouseout", (e) => {
        imgZoom.style.setProperty("--display", "none");
    })
</script>