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


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pacific Trading Company</title>
    <!-- Favicon img -->
    <link rel="shortcut icon" href="assets/images/logo.png">
    <!-- Bootstarp min css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Mean menu css -->
    <link rel="stylesheet" href="assets/css/meanmenu.css">
    <!-- All min css -->
    <link rel="stylesheet" href="assets/css/all.min.css">
    <!-- Swiper bundle min css -->
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
    <!-- Magnigic popup css -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!-- Animate css -->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!-- Nice select css -->
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <!-- Style css -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

</head>
<?php include 'database.php' ?>


<body>

    <!-- Preloader area start -->
     <div class="loading">
        <span class="text-capitalize">L</span>
        <span>o</span>
        <span>a</span>
        <span>d</span>
        <span>i</span>
        <span>n</span>
        <span>g</span>
    </div>
    <div id="preloader">
    </div> 
    <!-- Preloader area end -->

    <div class="whatsapp">
        <a href="https://api.whatsapp.com/send/?phone=918820875999&amp;text&amp;type=phone_number&amp;app_absent=0"
            target="_blank"><img src="assets/images/whatsapp.png"
                class="whatsapp-img animate__animated animate__bounce animate__repeat-3 3 " alt=""></a>
    </div>

    <!-- Header area start here -->
    <header class="header-area header-two-area">
        <div class="container header__container">
            <div class="header__main">
                <a href="index.php" class="logo">
                    <img src="assets/images/logo.png" style="width:120px; padding-left:20px" class="" alt="logo">
                </a>
                <div class="main-menu">
                    <nav>
                        <ul>
                            <li class="">
                                <a href="index.php">Home</a>

                            </li>
                            <li><a href="about.php">About Us</a></li>

                            <li>
                                <a href="#0">Products</a>
                                <ul class="sub-menu">
                                    
                                    <?php
                                    $sql = "SELECT DISTINCT category.category_name
                                            FROM product INNER JOIN category ON product.category_name = category.category_name
                                             ORDER BY category.category_name ASC;";


                                    $result = mysqli_query($con, $sql);
                                    if ($result) {
                                        foreach ($result as $key) {
                                            $category_name = $key['category_name'];
                                            $ifun = str_replace(" ", "-", $category_name);
                                            $sm = strtolower($ifun);
                                            ?>


                                            <li><a href="product.php?product=<?php echo $sm ?>">
                                                    <?php echo $category_name ?>
                                                </a></li>

                                        <?php }
                                    }

                                    ?>
                                </ul>
                            </li>


                            <li><a href="industries.php">Industries We Serve</a></li>


                            <li><a href="contact.php">Contact Us</a></li>

                        </ul>
                    </nav>
                </div>
                <div class="d-none d-xl-flex gap-4">
                    <a href="contact.php" class="btn-one">Get A Quote <i class="fa-regular fa-arrow-right-long"></i></a>
                    <div class="about-three__left-item d-flex flex-wrap gap-2 align-items-center">
                        <div class="about-call-icon">
                            <span>
                                <svg width="26" height="26" viewBox="0 0 26 26" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_918_1337)">
                                        <path
                                            d="M5.41667 4.33337H9.75L11.9167 9.75004L9.20833 11.375C10.3685 13.7275 12.2725 15.6315 14.625 16.7917L16.25 14.0834L21.6667 16.25V20.5834C21.6667 21.158 21.4384 21.7091 21.0321 22.1154C20.6257 22.5218 20.0746 22.75 19.5 22.75C15.2742 22.4932 11.2885 20.6987 8.2949 17.7051C5.3013 14.7115 3.5068 10.7258 3.25 6.50004C3.25 5.9254 3.47827 5.3743 3.8846 4.96798C4.29093 4.56165 4.84203 4.33337 5.41667 4.33337Z"
                                            stroke="white" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round"></path>
                                        <path
                                            d="M16.25 7.58337C16.8246 7.58337 17.3757 7.81165 17.7821 8.21798C18.1884 8.6243 18.4167 9.1754 18.4167 9.75004"
                                            stroke="white" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round"></path>
                                        <path
                                            d="M16.25 3.25C17.9739 3.25 19.6272 3.93482 20.8462 5.15381C22.0652 6.37279 22.75 8.02609 22.75 9.75"
                                            stroke="white" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round"></path>
                                    </g>
                                    <defs>
                                        <clipPath>
                                            <rect width="26" height="26" fill="white"></rect>
                                        </clipPath>
                                    </defs>
                                </svg>
                            </span>
                        </div>
                        <div class="info">
                            <span class="sm-font fw-600 text-white">Call Now</span>
                            <h5 class="text-white"><a href="tel:+91 8820875999" class="call-text-white">+91
                                    88208 75999</a></h5>
                        </div>
                    </div>
                </div>
                <div class="bars d-block d-lg-none">
                    <i id="openButton" class="fa-solid fa-bars"></i>
                </div>
            </div>
        </div>
    </header>
    <!-- Header area end here -->

    <!-- Sidebar area start here -->
    <div id="targetElement" class="sidebar-area sidebar__hide">
        <div class="sidebar__overlay"></div>
        <a href="index.php" class="logo mb-40">
            <img src="assets/images/logo.png" style="width:100px" alt="logo">
        </a>

        <div class="mobile-menu overflow-hidden"></div>
        <ul class="info pt-40">

            <li class="py-2"><i class="fa-solid primary-color fa-phone-volume"></i> <a href="tel:+91 97411 55473">+91
                    97411 55473</a>
            </li>
            <li><i class="fa-solid primary-color fa-paper-plane"></i> <a href="#0">info@pacifictrading.com</a></li>
        </ul>
        <div class="social-icon mt-20">
            <a href="#0"><i class="fa-brands fa-facebook-f"></i></a>
            <a href="#0"><i class="fa-brands fa-twitter"></i></a>
            <a href="#0"><i class="fa-brands fa-linkedin-in"></i></a>
            <a href="#0"><i class="fa-brands fa-youtube"></i></a>
        </div>
        <button id="closeButton" class="text-white"><i class="fa-solid fa-xmark"></i></button>
    </div>
    <!-- Sidebar area end here -->