@extends('web.layouts.app')
@section('title') {{companyName()}}  @endsection
@section('meta_description')@endsection

@section('css')
    <style>
        .bg-light-white{
            background: #77726299;
        }
    </style>
@endsection

@section('content')
    <section class="py-5 bg-light-white">
        <div class="container">
            <div class="section-title text-center mb-5">
                <h1>Our <span class="text-warning">Services</span></h1>
                <p class="text-center text-strong letter-space-4">Our Best Services</p>
            </div>
            <div class="row mb-4">

                @foreach($services as $service)
                    <div class="col-md-6 col-lg-4 mb-5">
                        <div class="service-card">
                            <div class="service-card-img box-ratio ratio-16x9 bg-cover" style="background-image: url({{asset($service->thumbnail)}})">
                                <div class="box-ratio-content">
                                    <a href="{{url('service/'.$service->slug)}}" class="btn btn-sm btn-crusta service-card-btn">View Details</a>
                                </div>
                            </div>
                            <div class="service-card-content">
                                <a href="{{url('service/'.$service->slug)}}" class="d-block text-strong text-center mb-3">
                                    <h3 style="font-size: 15px; font-weight: 600; color: #222;">{{$service->title}}</h3>
                                </a>
                                <p class="text-center text-muted">{{str_limit($service->short_description, 110)}}</p>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>

        </div>
    </section>
@endsection

@section('js')
@endsection