@if ($page->children->count() > 1)
    @php
        $servicepage = $page->children[1];
        $totalServices = $services->count(); // total number of service items
    @endphp
    <!--Services One Start -->
    <section class="services-one section-pd">
        <div class="container">
            <div class="section-title text-center">
                <div class="section-title__tagline-box">
                    <span class="section-title__tagline">{{ $servicepage->title }}</span>
                </div>
                <h2 class="section-title__title">
                    {!! implode(' ', array_slice(explode(' ', $servicepage->short_description), 0, 4)) . '<br>' .
                        implode(' ', array_slice(explode(' ', $servicepage->short_description), 4)) !!}
                </h2>
            </div>
            <div class="services-one__inner">
                <div class="owl-carousel thm-owl__carousel--range owl-theme services-one__carousel"
                     data-owl-options='{
                         "loop": false,
                         "nav": true,
                         "autoWidth": false,
                         "navText": ["<span class=\"icon-prev\"></span>","<span class=\"icon-next\"></span>"],
                         "dots": false,
                         "margin": 30,
                         "items": {{ $totalServices >= 3 ? 3 : $totalServices }},
                         "smartSpeed": 700,
                         "responsive": {
                             "0": { "items": 1, "margin": 20 },
                             "768": { "items": {{ $totalServices >= 2 ? 2 : 1 }}, "margin": 20 },
                             "992": { "items": {{ $totalServices >= 2 ? 2 : 1 }}, "margin": 30 },
                             "1200": { "items": {{ $totalServices >= 3 ? 3 : $totalServices }}, "margin": 30 }
                         }
                     }'>
                    @foreach ($services as $service)
                        <div class="item">
                            <div class="services-one__single">
                                <div class="services-one__img-box">
                                    <div class="services-one__img">
                                        <img class="service1-img" src="{{ $service->image }}" alt="">
                                    </div>
                                </div>
                                <div class="services-one__content">
                                    <div class="services-one__icon">
                                        <span class="{{ $service->icon_class }}"></span>
                                    </div>
                                    <h3 class="services-one__title">
                                        <a href="{{ route('service.single', $service->slug) }}">{{ $service->title }}</a>
                                    </h3>
                                    <div class="services-one__hover-content">
                                        <h3 class="services-one__hover-title">
                                            <a href="{{ route('service.single', $service->slug) }}">{{ $service->title }}</a>
                                        </h3>
                                        <p class="services-one__hover-text">
                                            {{ \Illuminate\Support\Str::words($service->short_description, 30, '...') }}
                                        </p>
                                        <a href="{{ route('service.single', $service->slug) }}" class="services-one__btn">
                                            <span class="icon-right-arrow-11"></span>Read More
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                @if($totalServices > 3)
                    <div class="thm-owl__carousel--range__input">
                        <input type="text" value="" name="range">
                    </div>
                @endif
            </div>
        </div>
    </section>
    <!--Services One End -->
@endif