@extends('template-layout.app')
@section('content')
    @include('header')


    <!-- Page Header Start -->
    <div class="page-header dark-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <!-- Page Header Box Start -->
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3" data-cursor="-opaque">Our services</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('index') }}">home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">services</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->
    <h1 class="text-center mt-5">{{ $meta_data->meta_title }}</h1>

    <!-- Page Services Start -->
    <div class="page-services">
        <div class="container">
            <div class="row">

                @foreach ($care_services as $care_service)
                    <div class="col-lg-4 col-md-6">
                        <!-- Service Item Start -->
                        <div class="service-item wow fadeInUp" data-wow-delay="0.6s">
                            <!-- Service Image Start -->
                            <div class="service-image">
                                <a href="{{ route('care.details', [
                                    'name' => Str::slug($care_service->CS_Name),
                                      'keyword' => Str::slug($care_service->keyword ?? 'Careservice'),
                                    'cs_id' => $care_service->CS_Id,
                                ]) }}"
                                    data-cursor-text="View">
                                    <figure class="image-anime">
                                        <img src="{{ asset('/uploads/care-services/' . $care_service->CS_Img) }}"
                                            alt="{{ $care_service->CS_Img_Alt }}"title="{{ $care_service->CS_Img_Title }}">
                                    </figure>
                                </a>
                            </div>
                            <!-- Service Image End -->

                            <!-- Icon Box Start -->
                            <div class="icon-box">
                                <img src="{{ asset('/uploads/care-services/' . $care_service->CS_Icon) }}" alt="">
                            </div>
                            <!-- Icon Box End -->

                            <!-- Service Body Start -->
                            <div class="service-body">
                                <!-- Service Content Start -->
                                <div class="service-content">
                                    <h3><a
                                            href="{{ route('care.details', [
                                                'name' => Str::slug($care_service->CS_Name),
                                                'keyword' => Str::slug($care_service->keyword ?? 'Careservice'),
                                                'cs_id' => $care_service->CS_Id,
                                            ]) }}">{{ $care_service->CS_Name }}</a>
                                    </h3>
                                </div>
                                <!-- Service Content End -->

                                <!-- Service Readmore Button Start -->
                                <div class="service-readmore-btn">
                                    <a href="{{ route('care.details', [
                                        'name' => Str::slug($care_service->CS_Name),
                                       'keyword' => Str::slug($care_service->keyword ?? 'Careservice'),
                                        'cs_id' => $care_service->CS_Id,
                                    ]) }}"
                                        class="readmore-btn">read more</a>
                                </div>
                                <!-- Service Readmore Button End -->
                            </div>
                            <!-- Service Body End -->
                        </div>
                        <!-- Service Item End -->
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- Page Services End -->


    <!-- Our FAQs Section End -->
    @include('footer')
@endsection