@php
    $services = App\Models\Service::where('status', 1)->latest()->take(6)->get();
@endphp
<section class="our-services v2 pt-50 pb-50 pt-md-70 pb-md-70 pt-xl-100 pb-xl-100">
    <div class="container">
        <div class="title-left-right align-xl-end">
            <div class="w-lg-50-0">
                <div class="section-title v1">
                    <h6 class="text-para-1 text-xl-6 text-medium text-upper">Our Services</h6>
                    <h2 class="text-5 text-xl-3 text-bold">A Wide range Of Our Services</h2>
                </div>
            </div>
            <ul class="all-btns">
                <li><a href="{{ route('services') }}" class="link-anime v5 round-border-full text-upper">See All
                        <i class="my-icon icon-arrow-top-right"></i></a>
                </li>
            </ul>
        </div>
        <div class="row justify-content-center mt-50">
            @foreach ($services as $service)
                <div class="col-md-6 col-xl-4">
                    <div class="service-card wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                        data-wow-duration="0.8s">
                        <div class="services-card-img">
                            <img alt="card-img" src="{{ asset('uploads/services/' . $service->image) }}">
                        </div>
                        <div class="services-card-content">
                            <div class="icon-box"><i class="{{ $service->icon }}"></i>
                            </div>
                            <h5 class="text-6 text-xl-5 text-bold text-capital">{{ $service->name }}</h5>
                            <p class="text-para-2 text-para-xl-1 text-reguler">{{ $service->title }}</p><a
                                href="{{ @$settings->enable_service_detail == 1 ? route('services.details', $service->slug) : route('contact') }}"
                                class="link-anime v5 text-upper round-border-full">Read
                                More <i class="my-icon icon-arrow-top-right"></i></a>
                        </div>
                    </div>
                </div>
            @endforeach

        </div>
    </div>
</section>