<x-website.layout>

    <!-- start banner -->
    @foreach ($sections as $section)
        @if ($section->key == 'services')
            @include('Website.partials._banner', ['page_title' => $section->name])
        @endif
    @endforeach
    <!-- end banner -->

    <!--==========================Services==========================-->
    <section class="services py-md-5 py-0 animate-section">
        <div class="container py-5">
            <!-- Tabs Navigation -->
            <div class="row g-5">
                @foreach ($services as $service)
                <!-- Slide 1 -->
                <div class="col-lg-4">
                    <div class="content-services">
                        <a href="{{ $service->link }}">
                            <img src="{{ $service->image_path }}" loading="lazy" class="slide-img" alt="{{ $service->name }}" />
                            <div class="p-4">
                                {{-- <p class="num">{{ $service->name }}</p> --}}
                                <h1>{{ $service->name }}</h1>
                                <p class="desc">
                                    {!! $service->short_desc !!}
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--==========================Services==========================-->
</x-website.layout>