@if ($services->isNotEmpty())

        <!-- Services -->
    <section class="section-padding pt_150 gray-bg">
        <div class="auto-container">
            <div class="section_heading text-center mb_60">
                @foreach ($sections->where('key','services') as $section)
                    <span class="section_heading_title_small">{{ $section->name }}</span>
                    <h2 class="section_heading_title_big">{{ $section->title }}</h2>
                  @break
                @endforeach
            </div>
            <div class="swiper-container four-item-carousel">
                <div class="swiper-wrapper">
                    <!-- Slide Item -->
                    @foreach ($services as $service)
                    <div class="swiper-slide">
                        <div class="service-1-block text-center wow fadeInLeft" data-wow-delay=".2s"
                            data-wow-duration=".8s">
                            <div class="service-1-image hvr-img-zoom-1">
                                <img src="{{ $service->image_path }}" alt="{{ $service->name }}">
                            </div>
                            <div class="service-1-link">
                                <a class="service-1-link-btn hvr-zoom-1 hvr-zoom-1-primary" href="{{ $service->link }}">
                                    <i class="icon-9"></i>
                                </a>
                            </div>
                            <h4 class="service-1-title">{{ $service->name }}</h4>
                            <div class="service-1-block-overlay text-center">
                                <div class="service-1-link"><a class="service-1-link-btn hvr-zoom-1 hvr-zoom-1-primary"
                                        href="{{ __('website.read_more') }}"><i class="icon-3"></i></a></div>
                                <h4 class="service-1-title">{{ $service->name }}</h4>
                                <p class="service-1-text">{{ \Illuminate\Support\Str::limit($service->short_desc, 100) }}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="mt_40"></div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="text-center">
                <div class="cta-1-link-bt mt_30"><a href="{{ Path::AppUrl('services') }}" class="btn-1 alt">@lang('website.all_services')<span
                            style="top: 337.016px; left: 83.4375px;"></span></a></div>
            </div>
        </div>
    </section>
@endif