@extends('client.raffles.layouts.app')
@section('content')
    @include('client.raffles.pages.partials.breadcumb')

    <section class="bg-gradient-very-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-12 tab-style-04">
                    <ul
                        class="nav nav-tabs border-0 justify-content-center fw-500 fs-19 md-fs-16 mb-4 md-mb-6 sm-mb-5px alt-font">

                        @isset($tests)
                            @foreach ($tests as $test)
                                <li class="nav-item"><a data-bs-toggle="tab" href="#{{ $test->slug }}"
                                        @class(['nav-link', 'active' => $loop->first])>
                                        {{ $test->title }} Preparation
                                        <span class="tab-border bg-dark-gray"></span></a>
                                </li>
                            @endforeach
                        @endisset
                    </ul>

                </div>
            </div>
        </div>

        <div class="tab-content">
            @foreach ($tests as $test)
                <div class="tab-pane fade in @if ($loop->first) active show @endif" id="{{ $test->slug }}">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12 text-center text-md-start"
                                data-anime="{&quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                <div class="fs-140 xxl-fs-100 sm-fs-60 fw-600 text-dark-gray alt-font ls-minus-8px sm-ls-minus-2px"
                                    data-bottom-top="transform: translate3d(-50px, 0px, 0px);"
                                    data-top-bottom="transform: translate3d(50px, 0px, 0px);">{{ $test->title }}
                                    Preparation
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="row align-items-center align-items-lg-end"
                                    data-bottom-top="transform: translate3d(-30px, 0px, 0px);"
                                    data-top-bottom="transform: translate3d(30px, 0px, 0px);">
                                    <div class="col-lg-2 col-md-4 text-md-end text-center md-mt-30px md-mb-20px"
                                        data-anime="{&quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                        <div class="position-relative">
                                            <img src="{{ asset('raffles/assets/images/demo-branding-agency-about-01.png') }}"
                                                class="animation-rotation position-relative z-index-2" alt>
                                            <div class="absolute-middle-center w-100 z-index-1"><img
                                                    src="{{ asset('raffles/assets/images/demo-branding-agency-about-02.png') }}"
                                                    alt></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 text-center text-md-start text-decoration-underline"
                                        data-anime="{&quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                        <div
                                            class="fs-140 xxl-fs-100 sm-fs-60 fw-600 text-dark-gray alt-font ls-minus-8px sm-ls-minus-2px">
                                            RAFFLES</div>
                                    </div>
                                    <div class="col-lg-4 last-paragraph-no-margin md-mt-30px"
                                        data-anime="{&quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                        <p class="w-95 md-w-80 mx-auto text-center text-lg-start lg-w-100">
                                            {{ $test->short_description }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <section class="position-relative">
                        <div class="container">
                            <div class="row justify-content-center"
                                data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                <div class="col-lg-8 md-mb-50px">
                                    <div class="col-12">
                                        <img src="{{ $test->image }}" alt="{{ $test->title }}"
                                            class="w-100 border-radius-6px mb-7">
                                        {!! $test->description !!}
                                        <div class="col-12 p-0 tab-style-04 mt-45px">
                                            <ul
                                                class="nav nav-tabs justify-content-center fw-500 fs-18 ls-minus-05px mb-50px sm-mb-30px lh-70 sm-lh-40 text-center">
                                                @foreach ($test->children as $item)
                                                    <li class="nav-item"><a data-bs-toggle="tab" href="#{{ $item->slug }}"
                                                            class="nav-link @if ($loop->first) active @endif">{{ $item->title }}<span
                                                                class="tab-border bg-dark-gray"></span></a>
                                                    </li>
                                                @endforeach

                                            </ul>
                                            <div class="tab-content">

                                                @foreach ($test->children as $item)
                                                    <div class="tab-pane fade in @if ($loop->first) active show @endif"
                                                        id="{{ $item->slug }}">
                                                        <div class="row align-items-center justify-content-center">
                                                            <div class="col-12 last-paragraph-no-margin">
                                                                {!! $item->description !!}
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach

                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <aside class="col-lg-4 ps-60px lg-ps-30px md-ps-15px">
                                    <div class="position-sticky top-150px lg-position-relative lg-top-0px">
                                        <div class="border-radius-6px overflow-hidden bg-tranquil">
                                            <div class="position-relative">
                                                <img src="{{ $test->image }}" class="md-w-100" alt />
                                                <a href="https://www.youtube.com/watch?v=7U4O3GwAPVE"
                                                    class="absolute-middle-center d-inline-block text-center bg-white box-shadow-extra-large rounded-circle video-icon-box video-icon-large popup-youtube">
                                                    <span>
                                                        <span class="video-icon bg-white">
                                                            <i class="fa-solid fa-play text-dark-gray"></i>
                                                            <span class="video-icon-sonar">
                                                                <span
                                                                    class="video-icon-sonar-bfr bg-white opacity-9"></span>
                                                            </span>
                                                        </span>
                                                    </span>
                                                </a>
                                            </div>
                                            <div class="p-35px lg-p-25px">
                                                <ul class="p-0 mb-20px list-style-02">
                                                    @isset($test->custom)
                                                        @foreach ($test->custom as $item)
                                                            <li class="border-bottom border-color-extra-medium-gray pb-15px">
                                                                <span class="text-dark-gray">
                                                                    <span class="me-5px"><i
                                                                            class="{{ $item['icon'] ?? '' }} fs-20"></i></span>
                                                                    <span class="fw-600">{{ $item['key'] ?? '' }}</span>
                                                                </span>
                                                                <span class="ms-auto">{{ $item['value'] ?? '' }}</span>
                                                            </li>
                                                        @endforeach
                                                    @endisset


                                                </ul>
                                                <a href="{{ $test->button_url }}" target="{{ $test->button_target }}"
                                                    class="btn btn-extra-large btn-base-color btn-rounded btn-switch-text fw-600 left-icon w-100">
                                                    <span>
                                                        <span><i class="feather icon-feather-thumbs-up"></i></span>
                                                        <span class="btn-double-text"
                                                            data-text="Enroll now">{{ $test->button_text }}</span>
                                                    </span>
                                                </a>
                                                <div class="elements-social social-icon-style-02 mt-20px">
                                                    <ul class="small-icon dark text-center">
                                                        <li class="sm-mb-0"><a class="facebook"
                                                                href="{{ setting('facebook') }}" target="_blank"><i
                                                                    class="fa-brands fa-facebook-f"></i></a></li>
                                                        <li class="sm-mb-0"><a class="dribbble"
                                                                href="{{ setting('mobile') }}" target="_blank"><i
                                                                    class="fa-brands fa-whatsapp"></i></a></li>

                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </aside>

                            </div>
                        </div>
                    </section>

                    <section class="background-position-center background-repeat overlap-height"
                        style="background-image: url('{{ asset('raffles/assets/images/vertical-center-line-bg.svg') }}')">
                        <div class="container">
                            <div class="row">
                                <div class="col-xl-12 col-lg-12 md-mb-50px sm-mb-35px">
                                    <h6 class="alt-font text-dark-gray mb-30px"
                                        data-anime="{ &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                        Start Preparing for Success Today!<br>
                                        Join Raffles Educare's Test Preparation classes and take the first step toward
                                        achieving
                                        your
                                        academic goals abroad. Whether you’re aiming for high scores in IELTS, TOEFL, or
                                        PTE,
                                        we’re here
                                        to help you succeed.</h6>
                                    <div class="row row-cols-1 row-cols-sm-3"
                                        data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                        <div class="col">
                                            <ul class="p-0 m-0 list-style-02"
                                                data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                                <li class="pb-5px"><i
                                                        class="fa-solid fa-plus fs-12 me-10px"></i>Best-In-Class
                                                    Learning
                                                </li>
                                                <li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Expert
                                                    Guidance</li>
                                                <li class="pb-5px"><i
                                                        class="fa-solid fa-plus fs-12 me-10px"></i>Personalized
                                                    Coaching
                                                </li>
                                                <li class="pb-5px"><i
                                                        class="fa-solid fa-plus fs-12 me-10px"></i>Comprehensive
                                                    Test
                                                    Prep
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col">
                                            <ul class="p-0 m-0 list-style-02"
                                                data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                                <li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Small
                                                    Class
                                                    Sizes
                                                </li>
                                                <li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Proven
                                                    Success</li>
                                                <li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Flexible
                                                    Schedules
                                                </li>
                                                <li class="pb-5px"><i
                                                        class="fa-solid fa-plus fs-12 me-10px"></i>Supportive
                                                    Environment
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col">
                                            <ul class="p-0 m-0 list-style-02"
                                                data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                                <li class="pb-5px"><i
                                                        class="fa-solid fa-plus fs-12 me-10px"></i>Result-Oriented
                                                    Strategy</li>
                                                <li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Mock
                                                    Tests &
                                                    Feedback
                                                </li>
                                                <li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Complete
                                                    Exam
                                                    Preparation</li>
                                                <li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Unmatched
                                                    Support
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </section>

                    @php
                        $classArray = [
                            'mt-4 md-mt-6 xs-mt-0 xs-mb-30px',
                            'mt-2 md-mt-0 xs-mb-30px',
                            'xs-mb-30px',
                            'mt-8 md-mt-5 xs-mt-0',
                        ];
                    @endphp

                    <section class="background-position-center background-repeat"
                        style="background-image: url('{{ asset('raffles/assets/images/vertical-center-line-bg.svg') }}')">
                        <div class="container">
                            <div
                                class="outside-box-left-5 outside-box-right-5 lg-outside-box-left-0 lg-outside-box-right-0 mb-7 xs-mb-40px">
                                <div class="row row-cols-1 row-cols-md-4 row-cols-sm-2">

                                    @foreach ($page->images as $index => $image)
                                        <div class="{{ $classArray[$index] }}">
                                            <img src="{{ $image }}" class="border-radius-6px w-100"
                                                @if ($loop->even) data-bottom-top="transform: translate3d(0px, 50px, 0px)"
                                                    data-top-bottom="transform: translate3d(0px, -50px, 0px)"
                                                    @else
                                                    data-bottom-top="transform: translate3d(0px, -50px, 0px)"
                                            data-top-bottom="transform: translate3d(0px, 50px, 0px)" @endif
                                                alt>
                                        </div>
                                        @break($loop->index == 3)
                                    @endforeach

                                </div>
                            </div>
                        </div>

                        <div class="container-fluid">
                            <div class="row position-relative">
                                <div class="col swiper feather-shadow text-cente"
                                    data-slider-options="{ &quot;slidesPerView&quot;: &quot;auto&quot;, &quot;spaceBetween&quot;:0, &quot;centeredSlides&quot;: true, &quot;speed&quot;: 10000, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination-2&quot;, &quot;clickable&quot;: false }, &quot;allowTouchMove&quot;: false, &quot;autoplay&quot;: { &quot;delay&quot;:1, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-four-slide-next-2&quot;, &quot;prevEl&quot;: &quot;.slider-four-slide-prev-2&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;slide&quot; }">
                                    <div class="swiper-wrapper swiper-width-auto marquee-slide">

                                        <div class="swiper-slide">
                                            <div class="fs-28 sm-fs-22 alt-font ls-minus-05px text-dark-gray"><span
                                                    class="w-10px h-10px border border-radius-100 border-color-base-color d-inline-block ms-50px me-50px md-ms-30px md-me-30px"></span>Modern
                                                Classroom for best Learning Environment</div>
                                        </div>


                                        <div class="swiper-slide">
                                            <div class="fs-28 sm-fs-22 alt-font ls-minus-05px text-dark-gray"><span
                                                    class="w-10px h-10px border border-radius-100 border-color-base-color d-inline-block ms-50px me-50px md-ms-30px md-me-30px"></span>Almost
                                                2 decades of experieced & effective teaching methods</div>
                                        </div>


                                        <div class="swiper-slide">
                                            <div class="fs-28 sm-fs-22 alt-font ls-minus-05px text-dark-gray"><span
                                                    class="w-10px h-10px border border-radius-100 border-color-base-color d-inline-block ms-50px me-50px md-ms-30px md-me-30px"></span>Full
                                                Assistance with guide books and materials</div>
                                        </div>


                                        <div class="swiper-slide">
                                            <div class="fs-28 sm-fs-22 alt-font ls-minus-05px text-dark-gray"><span
                                                    class="w-10px h-10px border border-radius-100 border-color-base-color d-inline-block ms-50px me-50px md-ms-30px md-me-30px"></span>Sustainable
                                                and meaningful ecosystem of hospitality</div>
                                        </div>


                                        <div class="swiper-slide">
                                            <div class="fs-28 sm-fs-22 alt-font ls-minus-05px text-dark-gray"><span
                                                    class="w-10px h-10px border border-radius-100 border-color-base-color d-inline-block ms-50px me-50px md-ms-30px md-me-30px"></span>Our
                                                hotel has been present for over 20 years</div>
                                        </div>


                                        <div class="swiper-slide">
                                            <div class="fs-28 sm-fs-22 alt-font ls-minus-05px text-dark-gray"><span
                                                    class="w-10px h-10px border border-radius-100 border-color-base-color d-inline-block ms-50px me-50px md-ms-30px md-me-30px"></span>We
                                                make the best for all our customers</div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>


                    <section class="bg-very-light-gray background-position-right-top background-no-repeat half-section"
                        style="background-image: url('images/demo-ebook-07.jpg')">
                        <div class="container">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-lg-6 col-md-10 contact-form-style-03 md-mb-50px sm-mb-30px"
                                    data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                    <div class="p-14 lg-p-11 border-radius-6px bg-dark-gray h-100">
                                        <h4 class="fw-500 alt-font text-white mb-30px md-mb-15px ls-minus-1px">Sign Up
                                            Today!</h3>

                                            <form action="{{ route('enquiry.store') }}" method="post"
                                                id="contact-form">
                                                @csrf
                                                <div class="position-relative form-group mb-20px">
                                                    <span class="form-icon"><i
                                                            class="bi bi-person icon-extra-medium"></i></span>
                                                    <input
                                                        class="ps-2 border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray form-control required"
                                                        type="text" name="name" placeholder="Enter your name*"
                                                        required>
                                                </div>
                                                <div class="position-relative form-group mb-20px">
                                                    <span class="form-icon"><i
                                                            class="bi bi-envelope icon-extra-medium"></i></span>
                                                    <input
                                                        class="ps-2 border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray form-control required"
                                                        type="email" name="email"
                                                        placeholder="Enter your email address*" required>
                                                </div>

                                                <div class="position-relative form-group mb-20px">
                                                    <span class="form-icon"><i
                                                            class="bi bi-phone icon-extra-medium"></i></span>
                                                    <input
                                                        class="ps-2 border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray form-control required"
                                                        type="text" name="mobile" placeholder="Enter mobile number*"
                                                        required>
                                                </div>

                                                <div class="position-relative form-group mb-20px">
                                                    <span class="form-icon"><i
                                                            class="bi bi-display icon-extra-medium"></i></span>
                                                    <select
                                                        class="ps-2 border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray form-select required"
                                                        name="class" required>
                                                        <option
                                                            class="border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray"
                                                            value="" selected>Select Class</option>
                                                        <option
                                                            class="border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray"
                                                            value="ILETS">ILETs</option>
                                                        <option
                                                            class="border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray"
                                                            value="PTE">PTE</option>
                                                        <option
                                                            class="border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray"
                                                            value="Duolingo">Duolingo</option>
                                                        <option
                                                            class="border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray"
                                                            value="TOEFL">TOEFL</option>
                                                    </select>
                                                </div>

                                                <div class="position-relative form-group form-textarea mt-15px mb-25px">
                                                    <textarea
                                                        class="ps-2 border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray form-control"
                                                        name="message" placeholder="Enter your message" id="message" rows="3"></textarea>
                                                    <span class="form-icon"><i
                                                            class="bi bi-chat-square-dots icon-extra-medium"></i></span>

                                                    @if (setting('enable_reCaptcha') == 1)
                                                        <div class="mt-15px mb-15px">
                                                            <div id="g-recaptcha-response" class="g-recaptcha mb-2"
                                                                data-sitekey="{{ setting('recaptcha_site_key') }}"></div>
                                                        </div>
                                                    @endif

                                                    <button
                                                        class="btn btn-medium btn-base-color mt-30px w-100 btn-round-edge btn-box-shadow"
                                                        type="submit" id="submit">Submit now</button>
                                                </div>

                                                <div class="col-md-12 alert-notification">
                                                    <div id="message-notification" class="alert-msg mt-2 text-success">
                                                    </div>
                                                </div>
                                            </form>

                                    </div>
                                </div>
                                <div class="col-lg-5 offset-lg-1 col-md-10 text-center text-lg-start"
                                    data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                    <span
                                        class="bg-white box-shadow-quadruple-large text-uppercase fs-13 ps-25px pe-25px alt-font fw-600 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-25px">Good
                                        Reasons to
                                        Take the First Step Today</span>
                                    <h2 class="fw-600 text-dark-gray ls-minus-2px mb-35px">What Our Students Are Saying
                                    </h2>
                                    <div class="swiper position-relative magic-cursor"
                                        data-slider-options="{ &quot;autoHeight&quot;: true, &quot;loop&quot;: true, &quot;allowTouchMove&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.swiper-button-next&quot;, &quot;prevEl&quot;: &quot;.swiper-button-prev&quot; }, &quot;effect&quot;: &quot;fade&quot; }">
                                        <div class="swiper-wrapper mb-50px lg-mb-35px">
                                            @foreach ($testimonials as $testimonial)
                                                <div class="swiper-slide review-style-08">
                                                    <p class="fs-18">{{ $testimonial->description }}</p>
                                                    <div class="mt-20px">
                                                        <img class="rounded-circle w-95px h-95px me-15px"
                                                            src="{{ $testimonial->image }}" alt>
                                                        <div class="d-inline-block align-middle text-start">
                                                            <div class="text-dark-gray fs-20 fw-600 ls-minus-05px">
                                                                {{ $testimonial->title }}</div>
                                                            <div class="review-star-icon fs-18">
                                                                <i class="bi bi-star-fill"></i><i
                                                                    class="bi bi-star-fill"></i><i
                                                                    class="bi bi-star-fill"></i><i
                                                                    class="bi bi-star-fill"></i><i
                                                                    class="bi bi-star-fill"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach

                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-center justify-content-lg-start">

                                        <div
                                            class="slider-one-slide-prev-1 swiper-button-prev slider-navigation-style-04 bg-white text-dark-gray box-shadow-medium">
                                            <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 text-dark-gray box-shadow-medium">
                                            <i class="fa-solid fa-arrow-right icon-small text-dark-gray"></i>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            @endforeach
        </div>
    @endsection