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

<div class="main-content app-content">
            <div class="container-fluid page-container main-body-container">

                <!-- Start::page-header -->
                <div class="page-header-breadcrumb mb-3">
                    <div class="d-flex align-center justify-content-between flex-wrap">
                        <h1 class="page-title fw-medium fs-18 mb-0">Services</h1>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboards</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Services</li>
                        </ol>
                    </div>
                </div>
                <!-- End::page-header -->

                <!-- Start:: row-1 -->
                <div class="row">
                    <div class="col-xxl-9">
                        <div class="row">
                          
                            <div class="col-xl-12">
                                <div class="row list-wrapper" style="position: relative; height: 1437.5px;">
                                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 card-item Soups" data-category="Soups" style="position: absolute; left: 0px; top: 0px;">
                                        <div class="card custom-card">
                                            <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/pos-system/16.png" class="card-img-top bg-light" alt="...">
                                            <div class="card-body">
                                                <div class="mb-1">
                                                    <a href="javascript:void(0);" class="fw-medium fs-16">Velvety Tomato Soup</a>
                                                </div>
                                                <div class="d-flex align-items-end justify-content-between flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <h5 class="fw-semibold mb-0">$14.99</h5>
                                                        <span class="text-muted fs-13 text-decoration-line-through">$24.99</span>
                                                    </div>
                                                    <div>
                                                        <button class="btn btn-primary btn-sm btn-wave d-inline-flex align-items-center justify-content-center waves-effect waves-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Item">Add Item<i class="ti ti-plus ms-1"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 card-item Salads" data-category="Salads" style="position: absolute; left: 322.328px; top: 0px;">
                                        <div class="card custom-card out-of-stock">
                                            <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/pos-system/17.png" class="card-img-top bg-light" alt="...">
                                            <div class="card-body">
                                                <div class="mb-1">
                                                    <a href="javascript:void(0);" class="fw-medium fs-16">Crispy Garden Medley</a>
                                                </div>
                                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <h5 class="fw-semibold mb-0">$8.49</h5>
                                                        <span class="text-muted fs-13 text-decoration-line-through">$18.49</span>
                                                    </div>
                                                    <div>
                                                        <button class="btn btn-primary btn-sm btn-wave d-inline-flex align-items-center justify-content-center waves-effect waves-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Item">Add Item<i class="ti ti-plus ms-1"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 card-item Desserts" data-category="Desserts" style="position: absolute; left: 644.656px; top: 0px;">
                                        <div class="card custom-card">
                                            <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/pos-system/19.png" class="card-img-top bg-light" alt="...">
                                            <div class="card-body">
                                                <div class="mb-1">
                                                    <a href="javascript:void(0);" class="fw-medium fs-16">Frosty Dream Parfait</a>
                                                </div>
                                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <h5 class="fw-semibold mb-0">$6.99</h5>
                                                        <span class="text-muted fs-13 text-decoration-line-through">$12.99</span>
                                                    </div>
                                                    <div>
                                                        <button class="btn btn-primary btn-sm btn-wave d-inline-flex align-items-center justify-content-center waves-effect waves-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Item">Add Item<i class="ti ti-plus ms-1"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 card-item Salads" data-category="Salads" style="position: absolute; left: 0px; top: 359.375px;">
                                        <div class="card custom-card">
                                            <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/pos-system/18.png" class="card-img-top bg-light" alt="...">
                                            <div class="card-body">
                                                <div class="mb-1">
                                                    <a href="javascript:void(0);" class="fw-medium fs-16">Zesty Caesar</a>
                                                </div>
                                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <h5 class="fw-semibold mb-0">$6.99</h5>
                                                        <span class="text-muted fs-13 text-decoration-line-through">$14.99</span>
                                                    </div>
                                                    <div>
                                                        <button class="btn btn-primary btn-sm btn-wave d-inline-flex align-items-center justify-content-center waves-effect waves-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Item">Add Item<i class="ti ti-plus ms-1"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 card-item Beverages" data-category="Beverages" style="position: absolute; left: 322.328px; top: 359.375px;">
                                        <div class="card custom-card">
                                            <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/pos-system/11.png" class="card-img-top bg-light" alt="...">
                                            <div class="card-body">
                                                <div class="mb-1">
                                                    <a href="javascript:void(0);" class="fw-medium fs-16">Citrus Breeze</a>
                                                </div>
                                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <h5 class="fw-semibold mb-0">$4.99</h5>
                                                        <span class="text-muted fs-13 text-decoration-line-through">$6.99</span>
                                                    </div>
                                                    <div>
                                                        <button class="btn btn-primary btn-sm btn-wave d-inline-flex align-items-center justify-content-center waves-effect waves-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Item">Add Item<i class="ti ti-plus ms-1"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 card-item Soups" data-category="Soups" style="position: absolute; left: 644.656px; top: 359.375px;">
                                        <div class="card custom-card">
                                            <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/pos-system/15.png" class="card-img-top bg-light" alt="...">
                                            <div class="card-body">
                                                <div class="mb-1">
                                                    <a href="javascript:void(0);" class="fw-medium fs-16">Creamy Corn Bisque</a>
                                                </div>
                                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <h5 class="fw-semibold mb-0">$5.49</h5>
                                                        <span class="text-muted fs-13 text-decoration-line-through">$12.49</span>
                                                    </div>
                                                    <div>
                                                        <button class="btn btn-primary btn-sm btn-wave d-inline-flex align-items-center justify-content-center waves-effect waves-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Item">Add Item<i class="ti ti-plus ms-1"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 card-item Appetizers" data-category="Appetizers" style="position: absolute; left: 0px; top: 718.75px;">
                                        <div class="card custom-card">
                                            <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/pos-system/8.png" class="card-img-top bg-light" alt="...">
                                            <div class="card-body">
                                                <div class="mb-1">
                                                    <a href="javascript:void(0);" class="fw-medium fs-16">Cheddar Poppers</a>
                                                </div>
                                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <h5 class="fw-semibold mb-0">$7.29</h5>
                                                        <span class="text-muted fs-13 text-decoration-line-through">$14.99</span>
                                                    </div>
                                                    <div>
                                                        <button class="btn btn-primary btn-sm btn-wave d-inline-flex align-items-center justify-content-center waves-effect waves-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Item">Add Item<i class="ti ti-plus ms-1"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 card-item Desserts" data-category="Desserts" style="position: absolute; left: 322.328px; top: 718.75px;">
                                        <div class="card custom-card">
                                            <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/pos-system/13.png" class="card-img-top bg-light" alt="...">
                                            <div class="card-body">
                                                <div class="mb-1">
                                                    <a href="javascript:void(0);" class="fw-medium fs-16">Frosty Dream Parfait</a>
                                                </div>
                                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <h5 class="fw-semibold mb-0">$6.99</h5>
                                                        <span class="text-muted fs-13 text-decoration-line-through">$9.99</span>
                                                    </div>
                                                    <div>
                                                        <button class="btn btn-primary btn-sm btn-wave d-inline-flex align-items-center justify-content-center waves-effect waves-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Item">Add Item<i class="ti ti-plus ms-1"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 card-item Main-Course" data-category="Main-Course" style="position: absolute; left: 644.656px; top: 718.75px;">
                                        <div class="card custom-card">
                                            <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/pos-system/10.png" class="card-img-top bg-light" alt="...">
                                            <div class="card-body">
                                                <div class="mb-1">
                                                    <a href="javascript:void(0);" class="fw-medium fs-16">Classic Prans Parmesan</a>
                                                </div>
                                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <h5 class="fw-semibold mb-0">$14.99</h5>
                                                        <span class="text-muted fs-13 text-decoration-line-through">$24.99</span>
                                                    </div>
                                                    <div>
                                                        <button class="btn btn-primary btn-sm btn-wave d-inline-flex align-items-center justify-content-center waves-effect waves-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Item">Add Item<i class="ti ti-plus ms-1"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 card-item Desserts" data-category="Desserts" style="position: absolute; left: 0px; top: 1078.12px;">
                                        <div class="card custom-card">
                                            <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/pos-system/14.png" class="card-img-top bg-light" alt="...">
                                            <div class="card-body">
                                                <div class="mb-1">
                                                    <a href="javascript:void(0);" class="fw-medium fs-16">Sugar Rush Pie</a>
                                                </div>
                                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <h5 class="fw-semibold mb-0">$5.99</h5>
                                                        <span class="text-muted fs-13 text-decoration-line-through">$11.99</span>
                                                    </div>
                                                    <div>
                                                        <button class="btn btn-primary btn-sm btn-wave d-inline-flex align-items-center justify-content-center waves-effect waves-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Item">Add Item<i class="ti ti-plus ms-1"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 card-item Appetizers" data-category="Appetizers" style="position: absolute; left: 322.328px; top: 1078.12px;">
                                        <div class="card custom-card">
                                            <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/pos-system/7.png" class="card-img-top bg-light" alt="...">
                                            <div class="card-body">
                                                <div class="mb-1">
                                                    <a href="javascript:void(0);" class="fw-medium fs-16">Golden Crisps</a>
                                                </div>
                                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <h5 class="fw-semibold mb-0">$5.99</h5>
                                                        <span class="text-muted fs-13 text-decoration-line-through">$7.99</span>
                                                    </div>
                                                    <div>
                                                        <button class="btn btn-primary btn-sm btn-wave d-inline-flex align-items-center justify-content-center waves-effect waves-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Item">Add Item<i class="ti ti-plus ms-1"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 card-item Main-Course" data-category="Main-Course" style="position: absolute; left: 644.656px; top: 1078.12px;">
                                        <div class="card custom-card">
                                            <img src="https://sprukomarket.com/products/html/bootstrap/vyzor/dist/assets/images/pos-system/9.png" class="card-img-top bg-light" alt="...">
                                            <div class="card-body">
                                                <div class="mb-1">
                                                    <a href="javascript:void(0);" class="fw-medium fs-16">GrillMaster Steak</a>
                                                </div>
                                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <h5 class="fw-semibold mb-0">$18.99</h5>
                                                        <span class="text-muted fs-13 text-decoration-line-through">$27.99</span>
                                                    </div>
                                                    <div>
                                                        <button class="btn btn-primary btn-sm btn-wave d-inline-flex align-items-center justify-content-center waves-effect waves-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add Item">Add Item<i class="ti ti-plus ms-1"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End:: row-1 -->
                
            </div>
        </div>


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