@extends('web.layouts.layout')

@section('content')

    <main class="mt-100">
        <!-- vision & mission-->
        <section class="services_pg vision-section section_padding">
            <div class="container">
                <div class="row">
                    @php
                        $classesArr = ['wow slow fadeInUp', 'wow slow fadeInDown', 'wow slow fadeInUp'];
                    @endphp
                    @foreach($services as $service)
                        <div
                            class="col-md-6 col-lg-4 col-sm-12 col-xs-12 {{ $classesArr[$loop->index] ?? 'wow slow fadeInUp' }}">
                            <a href="{{ route('web.services.show', $service->id) }}">
                                <div class="card text-center no-border box-shadow px-4 py-5">
                                    <div class="px-2 icon">
                                        <img data-src="{{ getImage($service->image) }}"
                                             src="{{ getImage($service->image) }}"
                                             class="lazyload img_contain"
                                             alt="{{ $service->title }}"
                                             width="58px"
                                             height="58px"/>
                                    </div>
                                    <div class="card-body">
                                        <h2 class="card-title size-2 blue-color fw-bold mb-0">{{ $service->title }}</h2>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')

@endpush