@extends('layouts.app')

@section('title', 'Serviços')

@section('content')
    <style>
        .lg-mnu-sec {background: rgba(0, 0, 0, .8); }
    </style>
    <section class="mt-5">
        <div class="gap">
            <div class="container">
                <div class="abt-sec style-edit">
                    <div class="row">
                        <div class="col-md-7 col-sm-12 col-lg-7">
                            <div class="abt-cnt">
                                <div class="sec-tl">
                                    <span>{!! $service->subtitle !!}</span>
                                    <h2 itemprop="headline" class="text-dark">{!! $service->title !!}</h2>
                                </div><!-- Sec Title -->
                                <h4 class="col-md-10 text-danger">{{ $service->excerpt }}</h4><!-- Sec Title -->

                                <div class="abt-desc">
                                    {!! $service->description !!}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-5 col-sm-12 col-lg-5">
                            <div class="abt-img style2">
                                <img src="{{ asset('storage/' . $service->image) }}" alt="" itemprop="image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <x-service title="" :services="$services" :showMoreButton="true" />

@endsection