@extends('layouts.master')
@section('page')
    <title>{{$service->title}} | {{setting('site.title')}}</title>
@endsection
@section('content')
   <div class="cm-page-header overlay-dark bg-cover" style="background-image: url({{ Voyager::image($service->image) }}); max-width:100%">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                </div>
            </div>
        </div>
    </div>
    <section class="section page-content pt-50 pb-50">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="row">
                        <div class="col-md-12 mt-4 mt-md-0">
                            <h2 class="h1 text-dark mb-25">{{$service->title}}</h2>
                            <p>{!! $service->description !!}</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mt-5 mt-lg-0 mobileHide">
                    <div class="widget widget-categoty mt-0">
                        <div class="widget-heading">Services</div>
                        <ul class="category-list list-unstyled p-4">
                            @foreach ($services as $service)
                                <li>
                                    <span class="fas fa-caret-right mr-2"></span>
                                    <a href="{{ route('services', ['slug' => $service->slug]) }}" class="text-reset1 {{ (url()->current() == route('services', ['slug' => $service->slug]))?'active_link':'' }}">
                                        {{$service->title}}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection()
@push('styles')
    <style>
        .text-reset1{color: #595959;}
        a:hover,a.active_link{color: #d33733;}
    </style>
@endpush()