@extends('frontend.layouts.master')
@section('title') Services @endsection
@section('main-content')

<section class="page_breadcrumbs ds parallax section_padding_top_65 section_padding_bottom_65">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center">
                <h2 class="highlight">Services</h2>
                <ol class="breadcrumb darklinks">
                    <li>
                        <a href="{{route('home')}}">
                            Home
                        </a>
                    </li>
                    <li class="active">Services</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="ls section_padding_top_100 section_padding_bottom_100">
    <div class="container">
        <div class="row topmargin_30 columns_margin_bottom_20">
            @if($services)
                @foreach($services as $service)
                    <div class="col-md-4 col-sm-6">
                        <article class="vertical-item content-padding with_background text-center rounded overflow-hidden">
                            <div class="item-media">
                                @php
                                    $photo=explode(',',$service->photo);
                                @endphp
                                <img src="{{ Storage::url($service->photo) }}" alt="">
                            </div>
                            <div class="item-content">
                                <h4 class="entry-title">
                                    <a href="{{route('service.detail',$service->slug)}}"> {{$service->title}}</a>
                                </h4>
                                <p class="margin_0">
                                    {!! substr($service->description, 0, 100) !!}
                                </p>
                                <a href="{{route('service.detail',$service->slug)}}" class="read-more"></a>
                            </div>
                        </article>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</section>

@endsection