@if($mainPage->services == 1)
<!--====== services TWO PART STARTS ======-->
<section class="st-service pb-5">
    <div class="container">
        <!--====== h2 row .start ======-->
        <div class="row wow fadeInUp" data-wow-delay=".1s">
            <div class="col-lg-12">
                <div class="ud-section-title mb-4">
                    <span>{{ trans('front.services.our_services') }}</span>
                    <h2>{{ trans('front.services.index_h2') }}</h2>
                    <p>{{ trans('front.services.description') }}</p>
                </div>
            </div>
        </div>
        @foreach($serviceCategory->take(20) as $category)
            @if($category->services->count() > 0)
                <!--====== h3 row .section ======-->
                <div class="row wow fadeInUp" data-wow-delay=".15s">
                    <div class="col-lg-12">
                        <div class="ud-section-title mb-4">
                            <h3 class="st-befor-h position-relative">{{ $category->title }}</h3>
                            <p>{{ $category->perex }}</p>
                        </div>
                    </div>
                </div>

                <!--====== cards .section ======-->
                <div class="owl-carousel wow fadeInUp" data-wow-delay=".2s">
                    @foreach($category->services->take(20) as $service)
                        <div class="item col-10 col-sm-auto m-auto h-100">
                            <div class="grid-content card h-100 pb-1">
                                <div class="grid-image ratio ratio-4x3">
                                    <div class="card-img-overlay d-flex align-items-center justify-content-center h-100 w-100 portfolio-content">
                                        <div class="grid-icon d-inline-block position-relative">
                                            <a class="stretched-link-st" href="{{ route('services/service', ['services' => trans('route.frontend.services'), 'categorySlug' => $category->slug, 'slug' => $service->slug ]) }}">
                                                <i class="lni lni-link fw-bold"></i>
                                                <div class="gradient-mask-2"></div>
                                            </a>
                                        </div>
                                    </div>
                                    @if($serviceThumbImage = $service->getFirstMediaUrlTraitAttribute('cover', 'thumb_768x432'))
                                        <img class="card-img-top" src="{{ $serviceThumbImage }}" alt="{{ $service->slug }} card image">
                                    @else
                                        <img width="255" height="191" src="{{ fallbackImageUrl() }}" alt="no images">
                                    @endif
                                </div>
                                <div class="card-body w-100 d-grid">
                                    <h4 class="card-title st-card-title limit-line-3">{{ $service->title }}</h4>
                                    <a class="stretched-link st-befor position-relative" href="{{ route('services/service', ['services' => trans('route.frontend.services'), 'categorySlug' => $category->slug, 'slug' => $service->slug ]) }}">
                                        <p class="card-text limit-line-3">{{ $service->perex }}</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        @endforeach

    </div> <!-- container -->
</section>
<!--====== services TWO PART ENDS ======-->
    @section('head')
        <style>
            /*(1) owl-stage box*/
            .owl-carousel .owl-stage { display: flex; flex-wrap: wrap; }
        </style>
        @parent
    @endsection
@endif