<?php
include 'include/header.php';
?>

<!-- =====================================inner banner============================== -->
<section class="inner-banner" role="region" aria-label="Page banner">
    <div class="inner-banner__overlay"></div>
    <div class="inner-banner__content">
        <h3>Products</h3>
        <img src="images/banner-4.jpg" alt="">
    </div>
</section>

<!-- ==============================services========================== -->
<section class="products" data-aos="fade-up">
    <div class="container">
        <div class="all-heading">
            <h3 class="ml10">
                <span class="text-wrapper">
                    <span class="letters">Shop By Category</span>
                </span>
            </h3>
            <p class="ml12">Choose quality furniture for modern living</p>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="filter-sidebar">

                    <!-- PRODUCT CATEGORIES -->
                    <div class="filter-section">
                        <div class="filter-title">
                            <h3>PRODUCT CATEGORIES</h3>
                        </div>

                        <ul class="filter-list">
                            <li><label><input type="radio" name="cat"> <span>All</span></label></li>
                            <li><label><input type="radio" name="cat"> <span>Sofa</span></label></li>
                            <li><label><input type="radio" name="cat"> <span>Chairs</span></label></li>
                            <li><label><input type="radio" name="cat"> <span>Decor</span></label></li>
                            <li><label><input type="radio" name="cat"> <span>Furnitures</span></label></li>
                            <li><label><input type="radio" name="cat"> <span>Lighting</span></label></li>
                            <li><label><input type="radio" name="cat"> <span>Sofas</span></label></li>
                            <li><label><input type="radio" name="cat"> <span>Stools</span></label></li>
                            <li><label><input type="radio" name="cat"> <span>Uncategorized</span></label></li>
                        </ul>
                    </div>


                    <!-- FILTER BY COLOR -->
                    <div class="filter-section">
                        <h3 class="section-heading">FILTER BY COLOR</h3>

                        <ul class="filter-list color-filter">
                            <li>
                                <label>
                                    <input type="radio" name="color">
                                    <span class="color-dot black"></span>
                                    Black
                                </label>
                                <span class="count">1</span>
                            </li>

                            <li>
                                <label>
                                    <input type="radio" name="color">
                                    <span class="color-dot white"></span>
                                    White
                                </label>
                                <span class="count">1</span>
                            </li>

                            <li>
                                <label>
                                    <input type="radio" name="color">
                                    <span class="color-dot gray"></span>
                                    Gray
                                </label>
                                <span class="count">1</span>
                            </li>
                        </ul>
                    </div>


                    <!-- FILTER BY PRICE -->
                    <div class="filter-section">
                        <h3 class="section-heading">FILTER BY PRICE</h3>

                        <div class="price-slider">
                            <input type="range" min="100" max="500" value="200">
                        </div>

                        <p class="price-text">Price: $100 — $200</p>
                    </div>

                </div>

            </div>
            <div class="col-md-9 out-lines p-0">
                <div class="row text-center g-4">
                    <div class="col-lg-4 col-md-6">
                        <div>
                            <a href="product-details.php">
                                <div class="furniture-card">

                                    <div class="furniture-image">
                                        <span class="discount-badge">-10%</span>

                                        <img src="images/pro-1.jpg" alt="Green Armchair">

                                        <div class="hover-actions">
                                            <i class="fas fa-heart action-btn"></i>
                                            <i class="fas fa-shopping-cart action-btn"></i>
                                        </div>

                                        <button class="buy-now-btn">Buy Now</button>
                                    </div>

                                    <div class="furniture-details">
                                        <h3>Green Armchair</h3>
                                        <div class="price">
                                            <span class="old-price">$6,950</span>
                                            <span class="new-price">$4,950</span>
                                        </div>
                                    </div>

                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <a href="product-details.php">
                            <div class="furniture-card">

                                <div class="furniture-image">
                                    <span class="discount-badge">-10%</span>

                                    <img src="images/pro-2.jpg" alt="Green Armchair">

                                    <div class="hover-actions">
                                        <i class="fas fa-heart action-btn"></i>
                                        <i class="fas fa-shopping-cart action-btn"></i>
                                    </div>

                                    <button class="buy-now-btn">Buy Now</button>
                                </div>

                                <div class="furniture-details">
                                    <h3>Green Armchair</h3>
                                    <div class="price">
                                        <span class="old-price">$6,950</span>
                                        <span class="new-price">$4,950</span>
                                    </div>
                                </div>

                            </div>
                        </a>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <a href="product-details.php">
                            <div class="furniture-card">

                                <div class="furniture-image">
                                    <span class="discount-badge">-10%</span>

                                    <img src="images/pro-3.jpg" alt="Green Armchair">

                                    <div class="hover-actions">
                                        <i class="fas fa-heart action-btn"></i>
                                        <i class="fas fa-shopping-cart action-btn"></i>
                                    </div>

                                    <button class="buy-now-btn">Buy Now</button>
                                </div>

                                <div class="furniture-details">
                                    <h3>Green Armchair</h3>
                                    <div class="price">
                                        <span class="old-price">$6,950</span>
                                        <span class="new-price">$4,950</span>
                                    </div>
                                </div>

                            </div>
                        </a>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <a href="product-details.php">
                            <div class="furniture-card">

                                <div class="furniture-image">
                                    <span class="discount-badge">-10%</span>

                                    <img src="images/pro-4.jpg" alt="Green Armchair">

                                    <div class="hover-actions">
                                        <i class="fas fa-heart action-btn"></i>
                                        <i class="fas fa-shopping-cart action-btn"></i>
                                    </div>

                                    <button class="buy-now-btn">Buy Now</button>
                                </div>

                                <div class="furniture-details">
                                    <h3>Green Armchair</h3>
                                    <div class="price">
                                        <span class="old-price">$6,950</span>
                                        <span class="new-price">$4,950</span>
                                    </div>
                                </div>

                            </div>
                        </a>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <a href="product-details.php">
                            <div class="furniture-card">

                                <div class="furniture-image">
                                    <span class="discount-badge">-10%</span>

                                    <img src="images/pro-5.jpg" alt="Green Armchair">

                                    <div class="hover-actions">
                                        <i class="fas fa-heart action-btn"></i>
                                        <i class="fas fa-shopping-cart action-btn"></i>
                                    </div>

                                    <button class="buy-now-btn">Buy Now</button>
                                </div>

                                <div class="furniture-details">
                                    <h3>Green Armchair</h3>
                                    <div class="price">
                                        <span class="old-price">$6,950</span>
                                        <span class="new-price">$4,950</span>
                                    </div>
                                </div>

                            </div>
                        </a>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <a href="product-details.php">
                            <div class="furniture-card">

                                <div class="furniture-image">
                                    <span class="discount-badge">-10%</span>

                                    <img src="images/pro-6.jpg" alt="Green Armchair">

                                    <div class="hover-actions">
                                        <i class="fas fa-heart action-btn"></i>
                                        <i class="fas fa-shopping-cart action-btn"></i>
                                    </div>

                                    <button class="buy-now-btn">Buy Now</button>
                                </div>

                                <div class="furniture-details">
                                    <h3>Green Armchair</h3>
                                    <div class="price">
                                        <span class="old-price">$6,950</span>
                                        <span class="new-price">$4,950</span>
                                    </div>
                                </div>

                            </div>
                        </a>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <a href="product-details.php">
                            <div class="furniture-card">

                                <div class="furniture-image">
                                    <span class="discount-badge">-10%</span>

                                    <img src="images/pro-7.jpg" alt="Green Armchair">

                                    <div class="hover-actions">
                                        <i class="fas fa-heart action-btn"></i>
                                        <i class="fas fa-shopping-cart action-btn"></i>
                                    </div>

                                    <button class="buy-now-btn">Buy Now</button>
                                </div>

                                <div class="furniture-details">
                                    <h3>Green Armchair</h3>
                                    <div class="price">
                                        <span class="old-price">$6,950</span>
                                        <span class="new-price">$4,950</span>
                                    </div>
                                </div>

                            </div>
                        </a>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <a href="product-details.php">
                            <div class="furniture-card">

                                <div class="furniture-image">
                                    <span class="discount-badge">-10%</span>

                                    <img src="images/pro-8.jpg" alt="Green Armchair">

                                    <div class="hover-actions">
                                        <i class="fas fa-heart action-btn"></i>
                                        <i class="fas fa-shopping-cart action-btn"></i>
                                    </div>

                                    <button class="buy-now-btn">Buy Now</button>
                                </div>

                                <div class="furniture-details">
                                    <h3>Green Armchair</h3>
                                    <div class="price">
                                        <span class="old-price">$6,950</span>
                                        <span class="new-price">$4,950</span>
                                    </div>
                                </div>

                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<?php
include 'include/footer.php';
?>