@if ($page->children->count() > 2)
    @php
        $thirdPage = $page->children[2];
    @endphp
    <section class="overflow-hidden bg-gradient-very-light-gray">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-4 col-lg-5 md-mb-50px sm-mb-35px">
                    <span class="fs-20 d-inline-block mb-15px text-base-color">Preparation classes with Raffles</span>
                    <h3 class="alt-font fw-500 text-dark-gray ls-minus-1px w-90 xl-w-100 shadow-none"
                        data-shadow-animation="true" data-animation-delay="700">{{ $thirdPage->short_description }}<span
                            class="bg-base-color h-10px bottom-1px opacity-3 separator-animation"></span></h3>
                    <p class="mb-30px w-90 md-w-100">
                        {!! $thirdPage->description !!}
                    </p>
                    <div class="d-flex">
                        <div
                            class="slider-one-slide-prev-1 swiper-button-prev slider-navigation-style-04 bg-white box-shadow-large">
                            <i class="fa-solid fa-arrow-left icon-small text-dark-gray"></i>
                        </div>
                        <div
                            class="slider-one-slide-next-1 swiper-button-next slider-navigation-style-04 bg-white box-shadow-large">
                            <i class="fa-solid fa-arrow-right icon-small text-dark-gray"></i>
                        </div>

                    </div>
                </div>
                <div class="col-xl-8 col-lg-7">
                    <div class="outside-box-right-20 sm-outside-box-right-0"
                        data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                        <div class="swiper magic-cursor slider-one-slide"
                            data-slider-options="{ &quot;slidesPerView&quot;: 3, &quot;spaceBetween&quot;: 30, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-three-slide-pagination&quot;, &quot;clickable&quot;: true, &quot;dynamicBullets&quot;: true }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-1&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-1&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1200&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 2 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 1 } }, &quot;effect&quot;: &quot;slide&quot; }">
                            <div class="swiper-wrapper">

                                @foreach ($classes as $class)
                                  <div class="swiper-slide">
                                      <div class="col interactive-banner-style-05">
                                          <figure
                                              class="m-0 hover-box overflow-hidden position-relative border-radius-6px">
                                              <a href="{{ route('service.single', ['alias' => 'test-preparation']) }}">
                                                  <img src="{{ $class->image }}" class="w-100 border-radius-6px"
                                                      alt="{{ $class->title }}" />
                                                  <div
                                                      class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent">
                                                  </div>
                                              </a>
                                          </figure>
                                      </div>
                                  </div>
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif