<?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 Details</h3>
        <img src="images/banner-4.jpg" alt="">
    </div>
</section>

<!-- =====================================about us============================== -->

<section class="about-us product-details" data-aos="fade-up">
    <div class="container">
        <div class="row">
            <div class="productPageImgContainer col-md-6">
                <div class="productPageImagesBar">
                    <div class="image selected">
                        <img src="images/pro-1.jpg" alt="">
                    </div>
                    <div class="image">
                        <img src="images/pro-2.jpg" alt="">
                    </div>
                    <div class="image">
                        <img src="images/pro-3.jpg" alt="">
                    </div>
                    <div class="image">
                        <img src="images/pro-4.jpg" alt="">
                    </div>
                </div>
                <div class="productPageFullImage">
                    <img src="images/pro-1.jpg" alt="">
                </div>
                <div class="imgDots">
                    <i class="fa-solid fa-circle selected"></i>
                    <i class="fa-solid fa-circle"></i>
                    <i class="fa-solid fa-circle"></i>
                    <i class="fa-solid fa-circle"></i>
                </div>
            </div>

            <div class="productPageInfoContainer col-md-6">
                <div class="productPageInfo">
                    <h3>Outdoor Lounges</h3>
                    <div class="productPagePrice">
                        <span class="priceBefore">Rs. 2590/-</span>
                        <span class="priceAfter">Rs. 3899/-</span>
                    </div>
                    <div class="productPageDescription">
                        <p>Transform your outdoor space into a stylish and comfortable retreat with our premium Outdoor
                            Lounges. Designed for relaxation and durability, these lounge sets are perfect for patios,
                            gardens, balconies, poolside areas, and outdoor entertaining spaces.</p>
                        <p>Crafted from high-quality materials such as weather-resistant wicker, aluminium, teak, and
                            durable fabrics, our outdoor lounges are built to withstand sun, rain, and daily use. Plush
                            cushions provide superior comfort, while modern and timeless designs complement any exterior
                            décor.</p>
                    </div>
                    <div class="productPageQuantity">
                        <span class="subTitles">quantity</span>
                        <div class="btn-flex">
                            <div class="number-input">
                                <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                                    class="minus"></button>
                                <input class="quantity" min="1" max="" name="quantity" value="1" type="number">
                                <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
                                    class="plus"></button>
                            </div>
                            <div class="productPageButton">
                                <button class="button">Add to cart</button>
                            </div>
                        </div>
                        <div class="oq-wishlist-wrapper">
                            <a href="#" class="oq-wishlist-btn">
                                <span class="oq-wishlist-icon">&#9825;</span>
                                <span class="oq-wishlist-text">Add to wishlist</span>
                            </a>
                        </div>
                    </div>
                    <!-- <div class="productPageSize">
                        <span class="subTitles">size</span>
                        <div class="productSizes">
                            <span>XS</span>
                            <span>S</span>
                            <span>M</span>
                            <span>L</span>
                            <span>XL</span>
                        </div>
                    </div> -->
                    <!-- <div class="productPageColor">
                        <span class="subTitles">color</span>
                        <div class="colorsAvailable">
                            <span style="background-color: white;"></span>
                            <span style="background-color: black;"></span>
                            <span style="background-color: red;"></span>
                            <span style="background-color: blue;"></span>
                        </div>
                    </div> -->

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

<!-- =====================================Product List============================== -->

<section class="out-lines pt-5">
    <div class="container">
        <div class="all-heading">
            <h3 class="ml10">
                <span class="text-wrapper">
                    <span class="letters">Related Products</span>
                </span>
            </h3>
            <p class="ml12">Explore matching pieces to create a cohesive space</p>
        </div>
        <div class="category-slide" data-aos="fade-left">
            <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>
                <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>
                <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>
                <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>
                <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>
                <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>
    </div>
</section>



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