<?php
include 'includes/header.php';
$page = 'home';
?>
<main>
    <section class="inner-banner-wrap">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                    <div class="content">
                        <h2>Product Detail</h2>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                    <div class="content">
                        <ul>
                            <li>
                                <a href="javascript:;">Home</a>
                            </li>
                            <li>
                                <i class="fa-solid fa-pipe"></i>
                            </li>
                            <li>
                                <a href="javascript:;">Product Detail</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="product-detail-sec">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                    <div class="head-breadcrum">
                        <ul>
                            <li><a href="javascript:;">Home</a></li>
                            <li><i class="fa-solid fa-angle-right"></i></li>
                            <li><a href="javascript:;">Featured Products</a></li>
                            <li><i class="fa-solid fa-angle-right"></i></li>
                            <li><a href="javascript:;">Terra baking powder</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                    <div class="main-slider-box">
                        <div id="slider" class="owl-carousel product-slider">
                            <div class="item">
                                <div class="img_producto_container" data-scale="1.6">
                                    <a class="dslc-lightbox-image img_producto" href="images/pd-1.webp" target="_self"
                                        style="background-image:url('images/pd-1.webp')">
                                    </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="img_producto_container" data-scale="1.6">
                                    <a class="dslc-lightbox-image img_producto" href="images/pd-2.avif" target="_self"
                                        style="background-image:url('images/pd-2.avif')">
                                    </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="img_producto_container" data-scale="1.6">
                                    <a class="dslc-lightbox-image img_producto" href="images/pd-3.avif" target="_self"
                                        style="background-image:url('images/pd-3.avif')">
                                    </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="img_producto_container" data-scale="1.6">
                                    <a class="dslc-lightbox-image img_producto" href="images/pd-4.avif" target="_self"
                                        style="background-image:url('images/pd-4.avif')">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div id="thumb" class="owl-carousel product-thumb">
                            <div class="item">
                                <img src="images/pd-1.webp" alt="img" class="img-fluid" />
                            </div>
                            <div class="item">
                                <img src="images/pd-2.avif" alt="img" class="img-fluid" />
                            </div>
                            <div class="item">
                                <img src="images/pd-3.avif" alt="img" class="img-fluid" />
                            </div>
                            <div class="item">
                                <img src="images/pd-4.avif" alt="img" class="img-fluid" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                    <div class="product-info">
                        <div class="desc-main">
                            <h2>Terra baking powder</h2>
                            <!-- <div class="reviews-count">
                                <ul>
                                    <li><i class="fa-solid fa-star"></i></li>
                                    <li><i class="fa-solid fa-star"></i></li>
                                    <li><i class="fa-solid fa-star"></i></li>
                                    <li><i class="fa-solid fa-star"></i></li>
                                    <li><i class="fa-solid fa-star"></i></li>
                                </ul>
                                <p>(1.234 reviews)</p>
                            </div> -->
                            <div class="brand-discount">
                                <div class="discount-box">
                                    <ul>
                                        <li><span class="new-price">$350.00</span></li>
                                        <li><i class="fa-solid fa-tilde"></i></li>
                                        <li><span class="old-price">$399.00</span></li>
                                        <li><span class="discount-price">-19%</span></li>
                                    </ul>
                                </div>
                                <div class="brand-info">
                                    <ul>
                                        <li>
                                            <h4>Brand:</h4>
                                            <p>MBRP</p>
                                        </li>
                                        <li>
                                            <h4>Availability:</h4> <span class="inStock success">In stock <i
                                                    class="fa-solid fa-check"></i></span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!-- <div class="content-dtl">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                            </div> -->

                            <div class="size-color-chart">
                                <div class="item-box">
                                    <ul>
                                        <li><h4>Color:</h4></li>
                                        <li><span>Red</span></li>
                                    </ul>
                                    <div class="selec-value">
                                        <label for="radio-card-color1" class="radio-card img-card">
                                            <input type="radio" value="Red" name="radio-card" id="radio-card-color1" class="step-1-radios" />
                                            <div class="card-content-wrapper">
                                                <span class="check-icon"></span>
                                                <div class="card-content">
                                                    <div class="main-img">
                                                        <img src="images/pd-1.webp" alt="img" class="img-fluid" />
                                                    </div>
                                                </div>
                                            </div>
                                        </label>
                                        <label for="radio-card-color2" class="radio-card img-card">
                                            <input type="radio" value="Green" name="radio-card" id="radio-card-color2" class="step-1-radios" />
                                            <div class="card-content-wrapper">
                                                <span class="check-icon"></span>
                                                <div class="card-content">
                                                    <div class="main-img">
                                                        <img src="images/pd-2.avif" alt="img" class="img-fluid" />
                                                    </div>
                                                </div>
                                            </div>
                                        </label>
                                        <label for="radio-card-color3" class="radio-card img-card">
                                            <input type="radio" value="Yed" name="radio-card" id="radio-card-color3" class="step-1-radios" />
                                            <div class="card-content-wrapper">
                                                <span class="check-icon"></span>
                                                <div class="card-content">
                                                    <div class="main-img">
                                                        <img src="images/pd-3.avif" alt="img" class="img-fluid" />
                                                    </div>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="item-box">
                                    <ul>
                                        <li><h4>Size:</h4></li>
                                        <li><span>100 ML</span></li>
                                    </ul>
                                    <div class="selec-value">
                                        <label for="radio-card-size1" class="radio-card">
                                            <input type="radio" value="100 ML" name="radio-card" id="radio-card-size1" class="step-1-radios" />
                                            <div class="card-content-wrapper">
                                                <span class="check-icon"></span>
                                                <div class="card-content">
                                                    <h6>100 ML</h6>
                                                </div>
                                            </div>
                                        </label>
                                        <label for="radio-card-size2" class="radio-card">
                                            <input type="radio" value="250 ML" name="radio-card" id="radio-card-size2" class="step-1-radios" />
                                            <div class="card-content-wrapper">
                                                <span class="check-icon"></span>
                                                <div class="card-content">
                                                    <h6>250 ML</h6>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="range-cart">
                                <div class="input-group numberone">
                                    <span class="input-group-btn">
                                        <button type="button" class="quantity-left-minus btn btn-quant btn-number"
                                            data-type="minus" data-field="">
                                            <i class="fal fa-minus"></i>
                                        </button>
                                    </span>
                                    <input type="text" id="quantity" name="quantity" class="form-control input-number"
                                        value="1" min="1" max="20">
                                    <span class="input-group-btn">
                                        <button type="button" class="quantity-right-plus btn btn-quant btn-number"
                                            data-type="plus" data-field="">
                                            <i class="fal fa-plus"></i>
                                        </button>
                                    </span>
                                </div>
                                <div class="btn-box">
                                    <a href="javascript:;" class="btn btn-primary btn-wh">ADD TO CART</a>
                                </div>
                            </div>
                            <div class="btn-box buy-itNow">
                                <a href="javascript:;" class="btn btn-primary btn-wh">Buy now</a>
                            </div>
                        </div>
                        <div class="poduct-foot">
                            <div class="top-skss">
                                <div class="pro-sku">
                                    <ul>
                                        <li>
                                            <h5>SKU:</h5>
                                            <p>01133-9-9</p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pro-sku">
                                    <ul>
                                        <li>
                                            <h5>Share:</h5>
                                            <ul class="share-icons">
                                                <li><a href="javascript:;"><i class="fa-brands fa-facebook-f" style="color: #3b5999;"></i></a></li>
                                                <li><a href="javascript:;"><i class="fa-brands fa-twitter" style="color: #55acee;"></i></a></li>
                                                <li><a href="javascript:;"><i class="fa-brands fa-pinterest" style="color: #bd081c;"></i></a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="botom-card">
                                <ul>
                                    <li>
                                        <a href="javascript:;">
                                            <img src="images/card-1.png" alt="img" class="img-fluid">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <img src="images/card-2.png" alt="img" class="img-fluid">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <img src="images/card-3.png" alt="img" class="img-fluid">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <img src="images/card-4.png" alt="img" class="img-fluid">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="productDetailSec-two">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                    <div class="desc-box">
                        <div class="head">
                            <h2>Description</h2>
                        </div>
                        <div class="info">
                            <h3>More Detail</h3>
                            <ul>
                                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry</li>
                                <li>Lorem Ipsum has been the ‘s standard dummy text. Lorem Ipsumum is simply dummy text.
                                </li>
                                <li>type here your detail one by one li more add</li>
                                <li>has been the industry’s standard dummy text ever since. Lorem Ips</li>
                                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                    Ipsum has been the ‘s standard dummy text. Lorem Ipsum has been the industry’s
                                    standard dummy text ever since. Lorem Ipsum is simply dummy text.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                    <div class="desc-box">
                        <div class="head">
                            <h2>Additional information</h2>
                        </div>
                        <div class="info">
                            <div class="table-responsive">
                                <table class="table main-table table-striped" id="example">
                                    <tbody>
                                        <tr>
                                            <th>
                                                <h4>Vendor:</h4>
                                            </th>
                                            <td>
                                                <a href="javascript:;">MBRP</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>
                                                <h4>Type:</h4>
                                            </th>
                                            <td>
                                                <a href="javascript:;"> Accessories</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>
                                                <h4>Color:</h4>
                                            </th>
                                            <td>
                                                <p>Red, Pink, Green</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>
                                                <h4>Size:</h4>
                                            </th>
                                            <td>
                                                <p>100 ML, 250 ML</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>
                                                <h4>SKU:</h4>
                                            </th>
                                            <td>
                                                <p>01133-9-9</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="comments-sec">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                    <div class="main-box">
                        <div class="top-content">
                            <div class="head">
                                <h2>Customer Review</h2>
                                <!-- <div class="btn-box">
                                    <a href="javascript:;" class="btn btn-primary hvr-bounce-to-right btn-wh">Write
                                        Reviews</a>
                                </div> -->
                            </div>
                            <div class="rating-box">
                                <div class="rating-card">
                                    <div class="main-text">
                                        <h4>4.8</h4>
                                    </div>
                                    <div class="info-txt">
                                        <ul>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                        </ul>
                                        <p>(1,968 Ratings)</p>
                                    </div>
                                </div>
                                <div class="rating-bar"></div>
                            </div>
                        </div>
                        <div class="clients-riview-list">
                            <div class="client-card">
                                <div class="imgs-box">
                                    <div class="main-img">
                                        <a href="images/user.jpg" data-fancybox="gallery">
                                            <img src="images/user.jpg" alt="img" class="img-fluid">
                                        </a>
                                    </div>
                                    <div class="info">
                                        <h4>Tony Nguyen</h4>
                                        <p>1 days ago</p>
                                    </div>
                                </div>
                                <div class="coment-box">
                                    <ul>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                    </ul>
                                    <h2>Unbeatable Style and Quality</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                        nostrud exercitation.</p>
                                </div>
                            </div>
                        </div>
                        <div class="review-form">
                            <h2>Leave A comment</h2>
                            <form action="javascript:;" method="post">
                                <div class="row">
                                    <div class="col-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                        <div class="rating">
                                            <h5>Your rating :</h5>
                                            <fieldset class="rating-new">
                                                <input type="radio" id="star5" name="rating" value="5" />
                                                <label class="full" for="star5"></label>
                                                <input type="radio" id="star4half" name="rating" value="4 and a half" />
                                                <label class="half" for="star4half"></label>
                                                <input type="radio" id="star4" name="rating" value="4" />
                                                <label class="full" for="star4"></label>
                                                <input type="radio" id="star3half" name="rating" value="3 and a half" />
                                                <label class="half" for="star3half"></label>
                                                <input type="radio" id="star3" name="rating" value="3" />
                                                <label class="full" for="star3"></label>
                                                <input type="radio" id="star2half" name="rating" value="2 and a half" />
                                                <label class="half" for="star2half"></label>
                                                <input type="radio" id="star2" name="rating" value="2" />
                                                <label class="full" for="star2"></label>
                                                <input type="radio" id="star1half" name="rating" value="1 and a half" />
                                                <label class="half" for="star1half"></label>
                                                <input type="radio" id="star1" name="rating" value="1" />
                                                <label class="full" for="star1"></label>
                                                <input type="radio" id="starhalf" name="rating" value="half" />
                                                <label class="half" for="starhalf"></label>
                                            </fieldset>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                                        <div class="input-main">
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="Your Name*"
                                                    required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                                        <div class="input-main">
                                            <div class="form-group">
                                                <input type="email" class="form-control" placeholder="Your Email*"
                                                    required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                        <div class="input-main">
                                            <textarea class="form-control" id="" rows="6" placeholder="Your Message*"
                                                name="" required></textarea>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="review">
                                            <label class="form-check-label" for="review">
                                                Save my name, email, and website in this browser for the next time I
                                                comment.
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                        <div class="btn-box">
                                            <button type="submit" class="btn btn-primary btn-wh">
                                                Submit Reviews
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="products-wrap">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                    <div class="head">
                        <h2>Related product</h2>
                    </div>
                </div>
            </div>
            <div class="products-slider owl-carousel owl-theme">
                <div class="item">
                    <div class="product-card">
                        <a href="product-detail.php">
                            <div class="main-img">
                                <img src="images/product-1.webp" alt="img" class="img-fluid">
                                <div class="ab-img">
                                    <img src="images/product-01.webp" alt="img" class="img-fluid">
                                </div>
                            </div>
                        </a>
                        <div class="product-content">
                            <div class="info">
                                <h2>
                                    <a href="product-detail.php">Terra baking powder</a>
                                </h2>
                                <ul>
                                    <li><span class="new-price">$350.00</span></li>
                                    <li><i class="fa-solid fa-tilde"></i></li>
                                    <li><span class="old-price">$399.00</span></li>
                                </ul>
                            </div>
                            <div class="product-action">
                                <div class="btn-box">
                                    <a href="javascript:;" class="btn btn-icon"><i class="fa-regular fa-eye"></i></a>
                                    <a href="javascript:;" class="btn btn-primary btn-wh">Add to cart</a>
                                    <a href="javascript:;" class="btn btn-icon"><i class="fa-regular fa-heart"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="product-card">
                        <a href="product-detail.php">
                            <div class="main-img">
                                <img src="images/product-1.webp" alt="img" class="img-fluid">
                                <div class="ab-img">
                                    <img src="images/product-01.webp" alt="img" class="img-fluid">
                                </div>
                            </div>
                        </a>
                        <div class="product-content">
                            <div class="info">
                                <h2>
                                    <a href="product-detail.php">Terra baking powder</a>
                                </h2>
                                <ul>
                                    <li><span class="new-price">$350.00</span></li>
                                    <li><i class="fa-solid fa-tilde"></i></li>
                                    <li><span class="old-price">$399.00</span></li>
                                </ul>
                            </div>
                            <div class="product-action">
                                <div class="btn-box">
                                    <a href="javascript:;" class="btn btn-icon"><i class="fa-regular fa-eye"></i></a>
                                    <a href="javascript:;" class="btn btn-primary btn-wh">Add to cart</a>
                                    <a href="javascript:;" class="btn btn-icon"><i class="fa-regular fa-heart"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="product-card">
                        <a href="product-detail.php">
                            <div class="main-img">
                                <img src="images/product-1.webp" alt="img" class="img-fluid">
                                <div class="ab-img">
                                    <img src="images/product-01.webp" alt="img" class="img-fluid">
                                </div>
                            </div>
                        </a>
                        <div class="product-content">
                            <div class="info">
                                <h2>
                                    <a href="product-detail.php">Terra baking powder</a>
                                </h2>
                                <ul>
                                    <li><span class="new-price">$350.00</span></li>
                                    <li><i class="fa-solid fa-tilde"></i></li>
                                    <li><span class="old-price">$399.00</span></li>
                                </ul>
                            </div>
                            <div class="product-action">
                                <div class="btn-box">
                                    <a href="javascript:;" class="btn btn-icon"><i class="fa-regular fa-eye"></i></a>
                                    <a href="javascript:;" class="btn btn-primary btn-wh">Add to cart</a>
                                    <a href="javascript:;" class="btn btn-icon"><i class="fa-regular fa-heart"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="product-card">
                        <a href="product-detail.php">
                            <div class="main-img">
                                <img src="images/product-1.webp" alt="img" class="img-fluid">
                                <div class="ab-img">
                                    <img src="images/product-01.webp" alt="img" class="img-fluid">
                                </div>
                            </div>
                        </a>
                        <div class="product-content">
                            <div class="info">
                                <h2>
                                    <a href="product-detail.php">Terra baking powder</a>
                                </h2>
                                <ul>
                                    <li><span class="new-price">$350.00</span></li>
                                    <li><i class="fa-solid fa-tilde"></i></li>
                                    <li><span class="old-price">$399.00</span></li>
                                </ul>
                            </div>
                            <div class="product-action">
                                <div class="btn-box">
                                    <a href="javascript:;" class="btn btn-icon"><i class="fa-regular fa-eye"></i></a>
                                    <a href="javascript:;" class="btn btn-primary btn-wh">Add to cart</a>
                                    <a href="javascript:;" class="btn btn-icon"><i class="fa-regular fa-heart"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="product-card">
                        <a href="product-detail.php">
                            <div class="main-img">
                                <img src="images/product-1.webp" alt="img" class="img-fluid">
                                <div class="ab-img">
                                    <img src="images/product-01.webp" alt="img" class="img-fluid">
                                </div>
                            </div>
                        </a>
                        <div class="product-content">
                            <div class="info">
                                <h2>
                                    <a href="product-detail.php">Terra baking powder</a>
                                </h2>
                                <ul>
                                    <li><span class="new-price">$350.00</span></li>
                                    <li><i class="fa-solid fa-tilde"></i></li>
                                    <li><span class="old-price">$399.00</span></li>
                                </ul>
                            </div>
                            <div class="product-action">
                                <div class="btn-box">
                                    <a href="javascript:;" class="btn btn-icon"><i class="fa-regular fa-eye"></i></a>
                                    <a href="javascript:;" class="btn btn-primary btn-wh">Add to cart</a>
                                    <a href="javascript:;" class="btn btn-icon"><i class="fa-regular fa-heart"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<?php
include 'includes/footer.php';
$page = 'home';
?>