@extends('layouts.front_app')
@section('content')

    <div class="innerBan">
        <img src="{{ asset('images/innerbnr1.png') }}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6">
                        <div class="slideOne text-center">
                            <h1 class="mainHeading" data-swiper-parallax="-200">Services</h1>

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

    <section class="careSec">
        <div class="lineCenter innerline">
            <span class="mainLine"></span>
            <span class="circleTop"></span>
            <span class="circleTop circle1"></span>
            <span class="circleTop circle2"></span>
            <span class="circleTop circle3"></span>
            <span class="circleTop circle4"></span>
            <span class="circleTop circle5"></span>
            <span class="circleTop circle6"></span>
            <span class="circleTop circle7"></span>
            <span class="circleTop circle8"></span>
            <span class="circleTop circle9"></span>
        </div>
        <div class="container">
            <h2 class="mainHeading text-center mb-5" data-aos="fade-up">Dog Care</h2>
            @forelse($services as $service)
                <div class="row justify-content-between {{ $loop->even ? 'flex-row-reverse' : '' }}">

                    <div class="col-md-5">
                        <div class="careContent" data-aos="{{ $loop->even ? 'fade-right' : 'fade-left' }}">
                            <h3>{{ $service->title }}</h3>
{{--                            <p class="w-100">{!! html_entity_decode($service->detail) !!}</p> --}}
{{--                            <p class="w-100"><p class="w-100">{!! nl2br(strip_tags($service->detail)) !!}</p>--}}
{{--                            <p class="w-100">{!! htmlspecialchars_decode($service->detail) !!}</p>--}}
                            <p class="w-100"><p class="w-100">{!! $service->detail !!}</p></p>
                            <a href="{{ route('front.contact') }}" class="themeBtn2">Get InTouch</a>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="careImg care__img" data-aos="{{ $loop->even ? 'fade-right' : 'fade-left' }}">
                            <img src="{{ $service->image }}" class="img-fluid w-100" alt="">
                        </div>
                    </div>

                </div>
            @empty
                <h3 class="text-center">Services Not Found</h3>
            @endforelse
        </div>
    </section>

    @include('front.include.contact-form')

@endsection