<!--Footer section start-->
<footer class="footer-section section bg-brown">

<!--Footer Top start-->
<div
    class="footer-top section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-60 pb-lg-40 pb-md-30 pb-sm-15 pb-xs-5">
    <div class="container">
        <div class="row">

            <!--Footer Widget start-->
            <div class="footer-widget col-lg-6 col-md-6 col-sm-6 col-12 mb-40 mb-xs-35">
                <div class="footer-logo">
                    <a href="index.php"><img src="assets/images/logo.webp" alt=""></a>
                </div>
                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
                    vel illum dolore eu feugiat nulla facilisis.</p>
                <div class="f-social-title">
                    <h3>Follow Us On Social:</h3>
                </div>
                <div class="footer-social">
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-instagram"></i></a>
                    <a href="#"><i class="fa fa-youtube"></i></a>
                </div>
            </div>
            <!--Footer Widget end-->


            <!--Footer Widget start-->
            <div class="footer-widget col-lg-2 col-md-6 col-sm-6 col-12 mb-40 mb-xs-35">
                <h4 class="title"><span class="text">Store Time</span></h4>
                <p class="mb-15">Mon – Fri: 8AM – 10PM</p>
                <p class="mb-15">Sat: 9AM-8PM</p>
                <p class="mb-15">Sun: Closed</p>
            </div>
            <!--Footer Widget end-->


            <!--Footer Widget start-->
            <div class="footer-widget col-lg-2 col-md-6 col-sm-6 col-12 mb-40 mb-xs-35">
                <h4 class="title"><span class="text">My Account</span></h4>
                <ul class="ft-menu">
                    <li><a href="#">My account</a></li>
                    <li><a href="#">Order Tracking</a></li>
                    <li><a href="#">Terms & Condition</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
            <!--Footer Widget end-->

            <!--Footer Widget start-->
            <div class="footer-widget col-lg-2 col-md-6 col-sm-6 col-12 mb-40 mb-xs-35">
                <h4 class="title"><span class="text">About Us</span></h4>
                <ul class="ft-menu">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
            <!--Footer Widget end-->
        </div>
    </div>
</div>
<!--Footer Top end-->

<!--Footer bottom start-->
<div class="footer-bottom section">
    <div class="container">
        <div class="row g-0">
            <div class="col-12 pb-25">
                <div class="row justify-content-between align-items-center">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="copyright text-start">
                            <p>Copyright &copy;2025 <a href="#">Naavya</a>. All rights reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Footer bottom end-->

</footer>
<!--Footer section end-->

<!-- Modal Area Strat -->
<div class="modal fade quick-view-modal-container" id="quick-view-modal-container" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="col-xl-12 col-lg-12">
                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <!-- Product Details Left -->
                        <div class="product-details-left">
                            <div class="product-details-images slider-lg-image-1 tf-element-carousel"
                                data-slick-options='{
                                    "slidesToShow": 1,
                                    "slidesToScroll": 1,
                                    "infinite": true,
                                    "asNavFor": ".slider-thumbs-1",
                                    "arrows": false,
                                    "prevArrow": {"buttonClass": "slick-btn slick-prev", "iconClass": "fa fa-angle-left" },
                                    "nextArrow": {"buttonClass": "slick-btn slick-next", "iconClass": "fa fa-angle-right" }
                                    }'>
                                <div class="lg-image">
                                    <img src="assets/images/product/large-product/l-product-1.jpg" alt="">
                                    <a href="assets/images/product/large-product/l-product-1.jpg"></a>
                                </div>
                                <div class="lg-image">
                                    <img src="assets/images/product/large-product/l-product-2.jpg" alt="">
                                    <a href="assets/images/product/large-product/l-product-2.jpg"></a>
                                </div>
                                <div class="lg-image">
                                    <img src="assets/images/product/large-product/l-product-3.jpg" alt="">
                                    <a href="assets/images/product/large-product/l-product-3.jpg"></a>
                                </div>
                                <div class="lg-image">
                                    <img src="assets/images/product/large-product/l-product-4.jpg" alt="">
                                    <a href="assets/images/product/large-product/l-product-4.jpg"></a>
                                </div>
                                <div class="lg-image">
                                    <img src="assets/images/product/large-product/l-product-5.jpg" alt="">
                                    <a href="assets/images/product/large-product/l-product-5.jpg"></a>
                                </div>
                            </div>
                            <div class="product-details-thumbs slider-thumbs-1 tf-element-carousel"
                                data-slick-options='{
                                    "slidesToShow": 4,
                                    "slidesToScroll": 1,
                                    "infinite": true,
                                    "focusOnSelect": true,
                                    "asNavFor": ".slider-lg-image-1",
                                    "arrows": false,
                                    "prevArrow": {"buttonClass": "slick-btn slick-prev", "iconClass": "fa fa-angle-left" },
                                    "nextArrow": {"buttonClass": "slick-btn slick-next", "iconClass": "fa fa-angle-right" }
                                    }' data-slick-responsive='[
                                    {"breakpoint":991, "settings": {
                                        "slidesToShow": 3
                                    }},
                                    {"breakpoint":767, "settings": {
                                        "slidesToShow": 4
                                    }},
                                    {"breakpoint":479, "settings": {
                                        "slidesToShow": 2
                                    }}
                                ]'>
                                <div class="sm-image"><img
                                        src="assets/images/product/small-product/s-product-1.jpg"
                                        alt="product image thumb"></div>
                                <div class="sm-image"><img
                                        src="assets/images/product/small-product/s-product-2.jpg"
                                        alt="product image thumb"></div>
                                <div class="sm-image"><img
                                        src="assets/images/product/small-product/s-product-3.jpg"
                                        alt="product image thumb"></div>
                                <div class="sm-image"><img
                                        src="assets/images/product/small-product/s-product-4.jpg"
                                        alt="product image thumb"></div>
                                <div class="sm-image"><img
                                        src="assets/images/product/small-product/s-product-5.jpg"
                                        alt="product image thumb"></div>
                            </div>
                        </div>
                        <!--Product Details Left -->
                    </div>
                    <div class="col-lg-8 col-md-6">
                        <!--Product Details Content Start-->
                        <div class="product-details-content">
                            <!--Product Nav Start-->
                            <div class="product-nav">
                                <a href="#"><i class="fa fa-angle-left"></i></a>
                                <a href="#"><i class="fa fa-angle-right"></i></a>
                            </div>
                            <!--Product Nav End-->
                            <h2>Aliquam lobortis est turpis mauris egestas eget</h2>
                            <div class="single-product-reviews">
                                <i class="fa fa-star active"></i>
                                <i class="fa fa-star active"></i>
                                <i class="fa fa-star active"></i>
                                <i class="fa fa-star active"></i>
                                <i class="fa fa-star-o"></i>
                                <a class="review-link" href="#">(1 customer review)</a>
                            </div>
                            <div class="single-product-price">
                                <span class="price new-price">$66.00</span>
                                <span class="regular-price">$77.00</span>
                            </div>
                            <div class="product-description">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                                    veniam, quis nostrud exercitation ullamco,Proin lectus ipsum, gravida et
                                    mattis vulputate, tristique ut lectus</p>
                            </div>
                            <div class="single-product-quantity">
                                <form class="add-quantity" action="#">
                                    <div class="product-quantity">
                                        <input value="1" type="number">
                                    </div>
                                    <div class="add-to-link">
                                        <button class="btn"><i class="ion-bag"></i>add to cart</button>
                                    </div>
                                </form>
                            </div>
                            <div class="wishlist-compare-btn">
                                <a href="#" class="wishlist-btn">Add to Wishlist</a>
                                <a href="#" class="add-compare">Compare</a>
                            </div>
                            <div class="product-meta">
                                <span class="posted-in">
                                    Categories:
                                    <a href="#">Accessories</a>,
                                    <a href="#">Electronics</a>
                                </span>
                            </div>
                            <div class="single-product-sharing">
                                <h3>Share this product</h3>
                                <ul>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                    <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa fa-vimeo"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <!--Product Details Content End-->
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</div>
<!-- Modal Area End -->

</div>

<!-- Placed js at the end of the document so the pages load faster -->

<!-- All jquery file included here -->
<script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
<script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
<script src="assets/js/vendor/jquery-migrate-3.3.2.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>

<script>
$(document).ready(function() {
     //product custom next button
    //  $('#next2').hide();
     $('#next3').hide();
     $('#next4').hide();
     $('#next5').hide();
     $('#next6').hide();
     $('#next7').hide();
     $('#next1result').hide();
     $('#next2result').hide();
     $('#next3result').hide();
     $('#next4result').hide();
     $('#next5result').hide();
     $('#next6result').hide();
     $('#next7result').hide();
     
     $('#next1btn').on('click', function(e) {
        e.preventDefault();
        $('#next1').hide();
        $('#next1result').show();
        $('#next2').show();
     });

     $('#next2btn').on('click', function(e) {
        e.preventDefault();
        $('#next2').hide();
        $('#next2result').show();
        $('#next3').show();
     });

     $('#next3btn').on('click', function(e) {
        e.preventDefault();
        $('#next3').hide();
        $('#next3result').show();
        $('#next5').show();
     });

     $('#next5btn').on('click', function(e) {
        e.preventDefault();
        $('#next5').hide();
        $('#next5result').show();
        $('#next6').show();
     });

     $('#next6btn').on('click', function(e) {
        e.preventDefault();
        $('#next6').hide();
        $('#next6result').show();
        $('#next7').show();
     }); 

     $('#next7btn').on('click', function(e) {
        e.preventDefault();
        $('#next7').hide();
        $('#next7result').show();
        $('#next4').show();
     });
});
</script>

 <!-- JavaScript for header scroll functionality -->
 <script>
    document.addEventListener('DOMContentLoaded', function() {
        const headerTop = document.getElementById('headerTop');
        const headerScroll = document.getElementById('headerScroll');
        
        // Check if elements exist
        if (!headerTop || !headerScroll) {
            console.error('Header elements not found');
            return;
        }
        
        // Function to handle scroll event
        function handleScroll() {
            const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

            if (window.innerWidth > 992) {
                if (scrollPosition > 100) {
                    headerTop.style.setProperty('display', 'none', 'important');
                    headerScroll.style.setProperty('display', 'block', 'important');
                } else {
                    headerTop.style.setProperty('display', 'block', 'important');
                    headerScroll.style.setProperty('display', 'none', 'important');
                }
            } else {
                // Remove inline styles to let CSS media query take over
                headerTop.style.removeProperty('display');
                headerScroll.style.removeProperty('display');
            }
        }
        
        // Add scroll event listener
        window.addEventListener('scroll', handleScroll);
        window.addEventListener('resize', handleScroll);
        
        // Call once on page load to set initial state
        handleScroll();
        
        // For debugging
        console.log('Scroll script loaded');
        console.log('Initial scroll position:', window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
    });
</script>

</body>

</html>