<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plum Industries</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
        integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">

    <!-- ==============================fontawesome==================================== -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
        integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- ==============================bootsrap=============================== -->

    <link rel="stylesheet" href="js/bootstrap-min.css">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="js/swiper-bundle-min.css" />
    <!-- ==============================carousel css============================== -->

    <link rel="stylesheet" href="js/owl-carousel-min.css">
    <link rel="stylesheet" href="js/owl-theme-min.css">

    <!-- ==========================aos css============================= -->
    <link rel="stylesheet" href="js/aos.css">
    <!-- ===================================jquery js===================================== -->
    <script src="js/jquery-min.js"></script>

    <!-- ===================================Bootstrap js===================================== -->
    <script src="js/bootstrap-bundle-min.js"></script>

    <!-- ===================================Carousel js===================================== -->
    <script type="text/javascript" src="js/owl-carousel-min.js"></script>

    <!-- =================================aos js============================== -->
    <script src="js/aos.js"></script>


    <!-- =================================slick slider link============================== -->
    <link rel="stylesheet" href="js/slick-min.css">
    <link rel="stylesheet" href="js/slick-theme-min.css">

    <!-- =============================zoomer======================= -->
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.6.0/css/all.css">
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.6.0/css/sharp-regular.css">
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@100;800&display=swap" rel="stylesheet">

    <!-- =================================slick slider link============================== -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>


    <!-- =================================slick slider js============================== -->
    <script src="js/slick-min.js"></script>


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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

</head>



<body>



    <header>
        <div class="preheader">
            <div class="container-fluid">
                <div class="preheader-con">
                    <div class="pre-email">
                        <div class="pre-close middle-responsive">
                            <p>Free delivery on orders over $1499. Don't miss discount.</p>
                        </div>
                    </div>
                    <div class="pre-email">
                        <a href="contact-us.php" class="pre-close">
                            <img src="images/icon-1.png" alt="">
                            <p>Contact us</p>
                        </a>
                        <a href="#" class="pre-close responsive-display">
                            <img src="images/icon-2.png" alt="">
                            <p>Shipping and Returns</p>
                        </a>
                        <a href="#" class="pre-close responsive-display">
                            <img src="images/icon-3.png" alt="">
                            <p>Privacy</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <nav class="navbar navbar-expand-lg">
            <div class="container-fluid">
                <a class="navbar-brand" href="index.php"><img src="images/logo.png" alt=""></a>
                <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#main_nav">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <div class="navbar-collapse collapse" id="main_nav">

                    <!-- Close Button (Mobile Only) -->
                    <div class="mobile-menu-close d-lg-none text-end p-3">
                        <button type="button" class="btn-close" id="menuCloseBtn"></button>
                    </div>
                    <ul class="navbar-nav">
                        <li class="nav-item active"> <a class="menu-link nav-link" href="index.php">Home </a> </li>
                        <li class="nav-item"><a class="menu-link nav-link" href="about-us.php"> About </a></li>
                        <li class="nav-item dropdown has-megamenu">
                            <a class="nav-link dropdown-toggle " href="#" data-bs-toggle="dropdown">
                                Products Category</a>
                            <div class="dropdown-menu megamenu" role="menu">
                                <div class="row g-3">
                                    <div class="col-lg-2 col-12">
                                        <a href="products-category.php" class="card product-card">
                                            <div class="image-wrapper">
                                                <img class="card-img-top" src="images/pro-1.jpg" alt="Card image cap">
                                            </div>

                                            <div class="product-detail">
                                                <h5 class="card-title heading text-center">Seating </h5>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-lg-2 col-12">
                                        <a href="#" class="card product-card">
                                            <div class="image-wrapper">
                                                <img class="card-img-top" src="images/pro-2.jpg" alt="Card image cap">
                                            </div>

                                            <div class="product-detail">
                                                <h5 class="card-title heading text-center">Dining</h5>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-lg-2 col-12">
                                        <a href="#" class="card product-card">
                                            <div class="image-wrapper">
                                                <img class="card-img-top" src="images/pro-3.jpg" alt="Card image cap">
                                            </div>

                                            <div class="product-detail">
                                                <h5 class="card-title heading text-center">Lounges</h5>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-lg-2 col-12">
                                        <a href="#" class="card product-card">
                                            <div class="image-wrapper">
                                                <img class="card-img-top" src="images/pro-4.jpg" alt="Card image cap">
                                            </div>

                                            <div class="product-detail">
                                                <h5 class="card-title heading text-center">Chairs</h5>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-lg-2 col-12">
                                        <a href="#" class="card product-card">
                                            <div class="image-wrapper">
                                                <img class="card-img-top" src="images/pro-1.jpg" alt="Card image cap">
                                            </div>

                                            <div class="product-detail">
                                                <h5 class="card-title heading text-center">Tables</h5>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-lg-2 col-12">
                                        <a href="#" class="card product-card">
                                            <div class="image-wrapper">
                                                <img class="card-img-top" src="images/pro-2.jpg" alt="Card image cap">
                                            </div>

                                            <div class="product-detail">
                                                <h5 class="card-title heading text-center">Tables </h5>
                                            </div>
                                        </a>
                                    </div>
                                </div><!-- end row -->
                            </div> <!-- dropdown-mega-menu.// -->
                        </li>
                        <li class="nav-item"><a class="menu-link nav-link" href="video.php"> Video</a></li>
                        <li class="nav-item"><a class="menu-link nav-link" href="#"> Specials</a></li>
                        <li class="nav-item"><a class="menu-link nav-link" href="blog.php"> Blog</a></li>
                        <li class="nav-item dropdown">
                            <a class="nav-link  dropdown-toggle" href="#" data-bs-toggle="dropdown"> Shop </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="menu-link dropdown-item" href="#"> Seating</a></li>
                                <li><a class="menu-link dropdown-item" href="#"> Lounges</a></li>
                            </ul>
                        </li>
                    </ul>
                </div> <!-- navbar-collapse.// -->

                <ul class="navbar-icon">
                    <li><a class="nav-link" href="#"><i class="fa-solid fa-magnifying-glass"></i></a></li>
                    <li><a class="nav-link" href="#"><i class="fa-solid fa-cart-arrow-down"></i></a></li>
                    <li><a class="nav-link" href="#"><i class="fa-solid fa-user"></i></a></li>
                </ul>
            </div> <!-- container-fluid.// -->
        </nav>
        <div class="menu-overlay"></div>
    </header>




    <script>
    document.getElementById("menuCloseBtn").addEventListener("click", function() {
        var nav = document.getElementById("main_nav");
        var bsCollapse = new bootstrap.Collapse(nav, {
            toggle: false
        });
        bsCollapse.hide();
    });
    </script>