@extends('layouts.frontend-layout')
@section('content')

    <section class="title-bar">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="left-title-text">
                        <h3>How To Orders</h3>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="right-title-text">
                        <ul>
                            <li class="breadcrumb-item"><a href="{{ route('main-site.index') }}">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">How To Orders</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="how-to-orders">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="new-heading">
                        <h1> How To Order? </h1>
                    </div>
                </div>
            </div>
            <div class="order-steps">
                <div class="row justify-content-md-center">
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <div class="order-img">
                            <div class="order-bg" style="background-image: url({{ asset('frontend/images/how-to-orders/order-bg.jpg') }})"></div>
                            <div class="order-i">
                                <div class="icon">
                                    <img src="frontend/images/how-to-orders/icon_1.svg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                        <div class="order-text">
                            <span>Step 01</span>
                            <h4>{{ $how_to_order->title1 }}</h4>
                            <p>{{ $how_to_order->short_description1 }}</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <div class="order-img">
                            <div class="order-bg" style="background-image: url({{ asset('frontend/images/how-to-orders/order-bg.jpg') }})"></div>
                            <div class="order-i">
                                <div class="icon">
                                    <img src="frontend/images/how-to-orders/icon_2.svg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                        <div class="order-text">
                            <span>Step 02</span>
                            <h4>{{ $how_to_order->title2 }}</h4>
                            <p>{{ $how_to_order->short_description2 }}</p>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="order-img">
                            <div class="order-bg" style="background-image: url({{ asset('frontend/images/how-to-orders/order-bg.jpg') }})"></div>
                            <div class="order-i">
                                <div class="icon">
                                    <img src="frontend/images/how-to-orders/globe-solid.svg"  alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                        <div class="order-text">
                            <span>Step 03</span>
                            <h4>{{ $how_to_order->title3 }}</h4>
                            <p>{{ $how_to_order->short_description3 }}</p>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="order-img">
                            <div class="order-bg" style="background-image: url({{ asset('frontend/images/how-to-orders/order-bg.jpg') }})"></div>
                            <div class="order-i">
                                <div class="icon">
                                    <img src="frontend/images/how-to-orders/icon_3.svg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                        <div class="order-text">
                            <span>Step 04</span>
                            <h4>{{ $how_to_order->title4 }}</h4>
                            <p>{{ $how_to_order->short_description4 }}</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <div class="order-img">
                            <div class="order-bg" style="background-image: url({{ asset('frontend/images/how-to-orders/order-bg.jpg') }})"></div>
                            <div class="order-i">
                                <div class="icon">
                                    <img src="frontend/images/how-to-orders/icon_4.svg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                        <div class="order-text">
                            <span>Step 05</span>
                            <h4>{{ $how_to_order->title5 }}</h4>
                            <p>{{ $how_to_order->short_description5 }}</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <div class="order-img">
                            <div class="order-bg" style="background-image: url({{asset('frontend/images/how-to-orders/order-bg.jpg')}})"></div>
                            <div class="order-i">
                                <div class="icon">
                                    <img src="frontend/images/how-to-orders/icon_5.svg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                        <div class="order-text">
                            <span>Step 06</span>
                            <h4>{{ $how_to_order->title6 }}</h4>
                            <p>{{ $how_to_order->short_description6 }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


@endsection