@extends('cliente.layout.menu')

@section('footer')
    @include('cliente.layout.footer')
@endsection

@section('css')
    <style>
        .btn-fazer-pedido{
            color: #fff !important;
            font-size: 25px;
            width: 100%;
        }
    </style>
@endsection

@section('content')
    <section class="home-slider owl-carousel img">
        <div class="slider-item">
            <div class="overlay"></div>
            <div class="container">
                <div class="row slider-text align-items-center" data-scrollax-parent="true">

                    <div class="col-md-6 col-sm-12 ftco-animate text-center justify-content-center">
                        <center><img src="{{ asset('img/logo.png') }}" alt="logo" style="width: 50% !important"></center>
                        <p class="mb-4 mb-md-5">Da nossa para a sua casa</p>
                            <p>
                                <a href="{{ route('cardapio') }}" class="btn btn-primary p-3 px-xl-4 py-xl-3 btn-fazer-pedido">Fazer Pedido</a>
                            </p>
                    </div>
                    <div class="col-md-6 ftco-animate">
                        <img src="images/bg_1.png" class="img-fluid" alt="">
                    </div>

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

        <div class="slider-item">
            <div class="overlay"></div>
            <div class="container">
                <div class="row slider-text align-items-center" data-scrollax-parent="true">
                    <div class="col-md-6 col-sm-12 order-md-last ftco-animate text-center justify-content-center" style="text-align: center !important;">
                        <center><img src="{{ asset('img/logo.png') }}" alt="logo" style="width: 50% !important"></center>
                        <p class="mb-4 mb-md-5">Da nossa para a sua casa</p>
                        <p>
                            <a href="{{ route('cardapio') }}" class="btn btn-primary p-3 px-xl-4 py-xl-3 btn-fazer-pedido">Fazer Pedido</a>
                        </p>
                    </div>
                    <div class="col-md-6 ftco-animate">
                        <img src="images/bg_2.png" class="img-fluid" alt="">
                    </div>

                </div>
            </div>
        </div>
    </section>
@endsection