@if ($page->children->count() > 0)
    @php
        $firstPage = $page->children[0];
        $words = explode(' ', $firstPage->title);
        $last_word = array_pop($words);
        $new_title = implode(' ', $words);
    @endphp
    
    <section class="background-repeat"
        style="background-image:url('{{ asset('raffles/assets/images/home-bg-1.jpg') }}');">
        <div class="container">
            <div class="row align-items-center mb-10 md-mb-17 xs-mb-25">
                <div class="col-xl-5 col-lg-6 md-mb-70px sm-mb-45px">
                    <span class="fs-15 mb-15px text-base-color fw-500 d-block text-uppercase ls-2px"
                        data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                        Raffles EduCare
                    </span>
                    <h3 class="alt-font ls-minus-1px text-dark-gray w-80 xl-w-90 md-w-100"
                        data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 0, &quot;duration&quot;: 600, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                        {{ $firstPage->short_description }}</h3>
                    <p class="w-80 md-w-100 mb-40px"
                        data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 200, &quot;duration&quot;: 600, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                        {!! $firstPage->description !!}.

                    </p>
                    <div class="d-inline-block w-100"
                        data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1],  &quot;delay&quot;:300, &quot;duration&quot;: 600, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                        <a href="{{ $firstPage->button_url }}"
                            class="btn btn-small btn-double-border btn-border-base-color me-25px xs-me-15px">
                            <span>
                                <span class="btn-double-text"
                                    data-text="Explore more">{{ $firstPage->button_text }}</span>
                                <span><i class="fa-solid fa-arrow-right"></i></span>
                            </span>
                        </a>
                        <div class="fw-500 d-inline-block align-middle text-dark-gray fs-18 xs-mt-20px xs-mb-20px"><i
                                class="bi bi-telephone-outbound icon-small me-10px"></i><a
                                href="tel:{{ setting('mobile') }}">{{ setting('mobile') }}</a></div>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-5 position-relative offset-lg-1 offset-md-2">
                    <span
                        class="position-absolute fs-75 left-20px top-80px text-dark-gray fw-600 z-index-1 ls-minus-4px lg-top-40px"
                        data-anime="{ &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 1000, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }"><span
                            class="fs-15 d-table lh-16 text-uppercase text-medium-gray fw-500 ls-1px">{{ $new_title }}</span>{{ $last_word }}</span>
                    <div class="w-80 overflow-hidden position-relative md-w-90 border-radius-6px float-end"
                        data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;color&quot;: &quot;#F4866E&quot;, &quot;direction&quot;:&quot;rl&quot;, &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 600, &quot;delay&quot;:500}">
                        <img class="w-100" src="{{ $firstPage->image }}" alt>
                    </div>

                    <div class="position-absolute left-minus-70px bottom-minus-30px w-60 overflow-hidden md-left-minus-100px sm-left-15px"
                        data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)"
                        data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;color&quot;: &quot;#36332e&quot;, &quot;direction&quot;:&quot;lr&quot;, &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 600, &quot;delay&quot;:500}">
                        <img class="w-100 border-radius-6px" src="{{ asset(setting('other_image')) }}" alt>
                    </div>

                </div>
            </div>

            @isset ($firstPage->custom) 
                <div class="row row-cols-1 row-cols-md-4 row-cols-sm-2 text-center text-sm-start"
                    data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;:300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                    @foreach ($firstPage->custom as $item)
                        <div class="col last-paragraph-no-margin sm-mb-30px">
                            <h2 class="fw-600 ls-minus-3px text-dark-gray m-0">{{ $item['key'] ?? '' }}<sup><i
                                        class="bi bi-arrow-up-short icon-medium text-base-color animation-float"></i></sup>
                            </h2>
                            <p class="text-dark-gray lh-28">{{ $item['value'] ?? '' }}</p>
                        </div>
                    @endforeach
                </div>
            @endisset
        </div>
    </section>
@endif