@if ($page->children->count() > 0)
    @php
        $firstCourse = $page->children[2];
    @endphp

    <section class="course-section">


        <div class="container mb-20 scroll-section" id="course" data-name="Course">
            <div class="w-full block mb-35 section">
                <div class="w-500 sm:w-full flex flex-col mx-auto text-center p-10">
                    <div class="ld-fancy-heading relative mb-20 animation-element">
                        <h2 class="ld-fh-element inline-block relative mt-0/5em mb-0 section-heading-sec">
                            Courses
                        </h2>
                    </div>

                </div>
            </div>
            <div class="row ">
                @foreach ($firstCourse->custom as $index => $data)
                    <div class=" col col-md-3">
                        <a href="course-finder.php" class=" course-box  rounded-10 ">
                            <div class="w-100">
                                <img class="w-full " src="{{ asset($firstCourse->images[$index]) }}" alt="">
                            </div>
                            <div class="pt-10">
                                <p class=" text-16 text-white m-0">{{ $data['key'] ?? '' }}</p>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
            <div class="flex justify-center mt-30">
                <a class="button-hover px-10 py-5 bg-sec text-16 text-white rounded-30" href="/course-finder">Apply
                    Now</a>
            </div>

        </div>
    </section>
@endif