@section('seo')
    @include('layouts._front_includes._seo', ['seo' => $page->seo])
@endsection
@extends('layouts.frontend_master')

@section('content')
    @php
        isset($page->short_description) ? $page->short_description : ($page->short_description = '');
    @endphp

    @include('web._partials.page-banner', ['short_description' => $page->short_description])



    <!-- content Section -->
    <section class="travel-deals py-5">
        <div class="container">
            <p class="text-secondary fs-6 fw-medium font-family-Onest  m-0 px-5 py-2">
                {!! $page->description !!}
            </p>
        </div>
    </section>

    <!--service we provide-->
    <section class="container-fluid py-5 bg-light">
        <!-- Section Heading -->
        <div class="row justify-content-center mb-4">
            <div class="col-12 text-center">
<h2 class="fs-1 fw-medium font-family-Onest mb-0">
  <span class="text-dark">
    Services that we
  </span>
  <span class="text-warning">
    Provide
  </span>
</h2>
                <p class="fs-6 text-secondary fw-medium font-family-Onest">Try a variety of benefits when using our services
                </p>
            </div>
        </div>

        <!-- Cards Grid -->
        <div class="row g-4 px-5">
            <!-- Card 1 -->
            @foreach ($services as $service)
                <div class="col-md-6 col-lg-6">
                    <a href="{{ route('service-detail', $service->slug) }}" class="text-decoration-none d-block h-100">
                        <div
                            class="p-4 bg-white rounded-4 shadow-sm h-100 d-flex flex-column align-items-center text-center card-hover">
                            <img src="{{ $service->feature_image->getPath() }}" class="mb-3" loading="lazy" style="width: 40px;"
                                alt="{{ $service->title }}">
                            <h5 class="fw-medium text-dark">{{ $service->title }}</h5>
                            <p class="text-secondary fs-6">
                                {{ \Illuminate\Support\Str::words(strip_tags($service->description), 20, '...') }}
                            </p>
                            <span class="btn mt-auto">&rarr;</span>
                        </div>
                    </a>
                </div>

            @endforeach


        </div>
    </section>
@endsection