@extends('frontend-layout.main')

@section('content')
    <section class="banner-section text-center">
        <div class="container-fluid">
            <h2>How it Works</h2>
            <p class="heading">To know how it works you come to the right place just check the process and procedure</p>
        </div>
    </section>
    <section class="hw-it-2">
        <div class="container-fluid pd-0 ">
            <div class="col-sm-6 float-left bg-light-cxtm">
                <h3>Firstly Get Started</h3>
                <p>By clicking on the button get started you are ready to go to start our process by sharing your information by which we will contact you for further process</p>
            </div>
            <div class="col-sm-6 float-left bg-green">
                <h3>Get the Package</h3>
                <p>Our Team will contact you for further process and finalize the package and guide you about our process and packages so that you can choose the right choice for you</p>
            </div>
        </div>
    </section>
    <section class="hw-it-wrks">
        <div class="container-fluid px-md-5 px-xlg-2">
            <div class="row">
                <div class="col-sm-6 float-left ">
                    <img class="img-fluid d-block mx-auto" src="/frontend-assets/images/doc.png" alt="nutritionist">
                </div>
                <div class="col-sm-6 float-left pd-50 ">
                    <h3>Expert Nutritionist</h3>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur quam magnam, enim omnis voluptates ad magni sunt sit? Excepturi voluptas modi cum id nostrum, non voluptate officia et. Dolorem, dolorum.</p>
                </div>
            </div>
            <div class="row">
                
                <div class="col-sm-6 float-left pd-50 order-2 order-sm-1">
                    <h3>Chef</h3>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque culpa voluptatum minima, perferendis cum molestias obcaecati architecto recusandae sit in? Voluptates nisi vitae, commodi unde ea labore suscipit laboriosam est?</p>
                </div>
                <div class="col-sm-6 float-left order-1 order-sm-2">
                    <img class="img-fluid d-block mx-auto" src="/frontend-assets/images/chef.png" alt="Chef">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 float-left ">
                    <img class="img-fluid d-block mx-auto" src="/frontend-assets/images/van.png" alt="Van">
                </div>
                <div class="col-sm-6 float-left pd-50 ">
                    <h3>Delivery</h3>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident voluptatum sunt ab at quia a assumenda doloremque id quam tempore neque nam, cupiditate rerum, temporibus deleniti hic sint nisi quisquam?</p>
                </div>
            </div>
            <div class="row">
                
                <div class="col-sm-6 float-left pd-50 order-2 order-sm-1">
                    <h3>At your Door Step</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque eligendi veritatis alias molestias a iusto, consequuntur omnis perspiciatis quos tempore asperiores impedit eveniet aut, quibusdam nostrum doloribus mollitia soluta atque?</p>
                </div>
                <div class="col-sm-6 float-left order-1 order-sm-2">
                    <img class="img-fluid d-block mx-auto" src="/frontend-assets/images/home.png" alt="place">
                </div>
            </div>
            <div class="row"> 
            <div class="col-sm-6 float-left ">
                    <img class="img-fluid d-block mx-auto" src="/frontend-assets/images/box.png" alt="place">
                </div>
                <div class="col-sm-6 float-left pd-50 ">
                    <h3>Enjoy the Meal</h3>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit iure omnis assumenda aut impedit! Incidunt ut autem vero totam ducimus nam, minima molestias quasi quidem nulla odio nesciunt porro nemo.</p>
                </div>
                
            </div>
        </div>
    </section>
    <section class="mob-sect">
        <div class="container-fluid px-md-5 px-xlg-2">
            <div class="col-sm-6 float-left">
                <h2>Bring to you Our Mobile App</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, molestiae. Quasi laborum debitis sapiente fugiat sed aut perspiciatis dignissimos. Commodi obcaecati itaque id ullam a possimus ipsa ea molestias eos.</p>
                <footer>
                    <a href="#" class="btn btn-app"><i class="fab fa-android"></i> available<br> on app store</a>
                    <a href="#" class="btn btn-app"><i class="fab fa-apple"></i> available<br> on app store</a>
                </footer>
            </div>
            <div class="col-sm-6 float-left mv">
                <img src="/frontend-assets/images/mobile.png" alt="">
            </div>
        </div>
    </section>
    <div class="clearfix"></div>
@endsection