@if ($page->children->count() > 1)
    @php
        $secondPage = $page->children[1];
    @endphp
    <section class="bg-solitude-blue pb-0">
        <div class="container">
            <div class="row justify-content-center mb-4">
                <div class="col-xl-7 col-lg-9 col-md-10 text-center">
                    <h3 class="alt-font text-dark-gray fw-600 ls-minus-1px"
                        data-anime='{"translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad"}'>
                        {{ $secondPage->short_description }}
                    </h3>
                </div>
            </div>

            <div class="row align-items-center"
                data-anime='{"el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 150, "staggervalue": 300, "easing": "easeOutQuad"}'>

                <!-- Left-side nav items -->
                <div class="col-xl-3 col-lg-4 col-md-12 tab-style-05 md-mb-30px sm-mb-20px">
                    <ul class="nav nav-tabs justify-content-center border-0 text-left fw-500 fs-18 alt-font">
                        @foreach ($services as $service)
                            <li class="nav-item">
                                <a href="{{ route('service.single', $service->slug) }}"
                                    class="nav-link d-flex align-items-center active">
                                    <i
                                        class="bi bi-check-circle icon-extra-medium text-dark-gray"></i><span>{{ $service->title }}</span>
                                </a>
                            </li>
                            @break($loop->index == 3)
                        @endforeach
                    </ul>
                </div>

                <!-- Center image -->
                <div class="col-xl-6 col-lg-4 col-md-12 text-center">
                    <img src="{{ $secondPage->image }}" alt="{{ $secondPage->title }}"
                        class="border-radius-6px w-100" />
                </div>

                <!-- Right-side nav items -->
                <div class="col-xl-3 col-lg-4 col-md-12 tab-style-05 md-mb-30px sm-mb-20px">
                    <ul class="nav nav-tabs justify-content-center border-0 text-left fw-500 fs-18 alt-font">
                        @foreach ($services->skip(4) as $service)
                            <li class="nav-item">
                                <a data-bs-toggle="tab" href="{{ route('service.single', $service->slug) }}"
                                    class="nav-link d-flex align-items-center active">
                                    <i
                                        class="bi bi-check-circle icon-extra-medium text-dark-gray"></i><span>{{ $service->title }}</span>
                                </a>
                                @break($loop->index == 7)
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section>

    @isset ($secondPage->custom)
        <section class="py-0 border-top lg-border-top-0 border-color-medium-gray bg-very-light-gray position-relative">
            <div class="container">
                <div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 g-0"
                    data-anime="{&quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [40, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">

                    @foreach ($secondPage->custom as $item)
                        <div class="col process-step-style-06 hover-box lg-mb-50px md-mb-0 xs-mb-50px">
                            <div class="process-step-icon-box position-relative top-minus-14px">
                                <span class="progress-step-separator bg-medium-gray w-100 separator-line-1px"></span>
                                <div
                                    class="step-box d-flex align-items-center justify-content-center bg-base-color border-radius-100 w-25px h-25px">
                                    <span class="w-9px h-9px bg-white border-radius-100"></span>
                                </div>
                            </div>
                            <span class="d-block fs-19 text-dark-gray fw-600 mt-20px mb-5px">{{ $item['key'] ?? '' }}</span>
                            <p class="w-80 xl-w-90 md-w-80 xs-w-100 mb-20px">{{ $item['value'] ?? '' }}</p>
                        </div>
                        @break($loop->index == 4)
                    @endforeach
                </div>
            </div>
        </section>
    @endisset
@endif