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


    <section
        class="bg-gradient-tranquil-white pt-0 align-items-center position-relative z-index-1 background-position-left-top background-no-repeat overflow-hidden"
        style="background-image: url('{{ asset('raffles/assets/images/demo-elearning-02.png') }}')">
        <div class="container-fluid">
            <div class="row position-relative mt-40px xs-mt-20px pt-5 pb-5">
                <div class="col swiper swiper-width-auto feather-shadow text-center"
                    data-slider-options="{ &quot;slidesPerView&quot;: &quot;auto&quot;, &quot;spaceBetween&quot;:80, &quot;centeredSlides&quot;: true, &quot;speed&quot;: 30000, &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;:0, &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 marquee-slide">
                        <div class="swiper-slide">
                            <div class="fs-190 ls-minus-10px pt-10px pb-10px alt-font fw-600 opacity-1">Raffles Educare
                                Associates</div>
                        </div>
                        <div class="swiper-slide">
                            <div class="fs-190 ls-minus-10px pt-10px pb-10px alt-font fw-600 opacity-1">Guiding Your Future,
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="fs-190 ls-minus-10px pt-10px pb-10px alt-font fw-600 opacity-1">Empowering Your
                                Success.</div>
                        </div>
                    </div>
                </div>
                <div
                    class="col-12 position-absolute top-0 h-100 d-flex justify-content-center align-items-center left-0px z-index-1 text-center">
                    <h4 class="alt-font text-dark-gray fs-45 fw-600 ls-minus-2px xs-ls-minus-1px mb-0 mt-40px xs-mt-15px">
                        Raffles Educare Associates</h4>
                </div>
            </div>
        </div>
    </section>

    <section class="pb-40px pt-0 md-pb-20px">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7"
                    data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;color&quot;: &quot;#d39121&quot;, &quot;direction&quot;:&quot;lr&quot;, &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;delay&quot;:50}"
                    data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
                    <img src="{{ $page->image }}" class="border-radius-6px" alt="{{ setting('president') }}" />
                </div>
                <div class="col-lg-5 align-self-end position-relative bottom-minus-50px md-bottom-minus-25px"
                    data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;color&quot;: &quot;#383632&quot;, &quot;direction&quot;:&quot;lr&quot;, &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;delay&quot;:150}"
                    data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
                    <div
                        class="bg-very-light-gray h-100 p-15 lg-p-17 outside-box-left-5 border-radius-6px md-outside-box-left-0 md-p-10">
                        <h3 class="alt-font text-base-color text-uppercase mb-5px">{{ setting('president') }}</h2>
                        <span
                            class="fs-15 text-uppercase text-dark-gray d-block fw-600 mb-30px ls-minus-05px lh-20">Founder/
                            CEO</span>
                        <div class="h-2px bg-base-color mb-25px"></div>
                        <p>{!! $page->description !!}</p>
                        {{-- <img src="" alt> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="sm-pt-0">
        <div class="container">
            {{-- <div class="row justify-content-center">
                <div class="col-lg-11" data-bottom-top="transform:translateX(50px)"
                    data-top-bottom="transform:translateX(-50px)">
                    <div class="row g-0 blockquote-style-04">
                        <div class="col-md-4 blockquote-img position-relative z-index-1">
                            <img src="images/raffles/md.jpg" class="d-none d-md-block" alt>
                        </div>
                        <div class="col-md-8">
                            <div
                                class="blockquote-content bg-base-color position-relative overflow-hidden h-100 d-flex align-items-center">
                                <img src="images/blockquote-right-icon.svg"
                                    class="position-absolute right-0px bottom-0px h-350px md-h-180px lg-h-250px xl-h-300px"
                                    alt>
                                <blockquote class="position-relative z-index-1 mb-0 last-paragraph-no-margin">
                                    <p class="fs-24 md-fs-20 fw-300 text-white ls-minus-05px w-75 sm-w-80">Lorem ipsum amet
                                        consectetur pellentesque blandit ultrices purus suspendisse iaculis ultricies
                                        sagittis. Proin vulputate eleifend cras lacinia iaculis feugiat egestas neque
                                        sodales</span></p>
                                    <div class="fs-20 lh-28 md-fs-18 fw-500 text-white mt-25px">Dinesh Dhakal<span
                                            class="d-block fs-16 opacity-6 fw-400">Founder/ CEO</span></div>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}

            <div class="row justify-content-center align-items-center mt-5 xs-mt-10"
                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; }">
                <div class="col-12 text-center last-paragraph-no-margin">
                    <div
                        class="d-inline-block align-middle bg-red fw-500 text-white border-radius-30px ps-20px pe-20px fs-14 me-10px sm-m-10px">
                        {{ setting('title') }}</div>
                    <div class="d-inline-block align-middle text-dark-gray fs-18 fw-500">Nepal's Best Study Abroad <span
                            class="text-decoration-line-bottom-medium fw-600">Education Consultant</span></div>
                </div>
            </div>
        </div>
    </section>

        <section class="background-position-center-top position-relative overflow-hidden sm-background-image-none"
            style="background-image: url('{{asset('raffles/assets/images/vertical-line-bg.svg')}}')">
            <div class="skrollr-parallax mx-auto" data-bottom-top="width: 70%" data-center-top="width: 100%;"
                data-parallax-background-ratio="0.5" style="background-image: url('{{ $page->getRawOriginal('images') ? $page->images[0] : '' }}')">
                <div class="opacity-extra-medium bg-dark-gray"></div>
                <div class="container">
                    <div class="row justify-content-center align-items-center one-third-screen">
                        <div
                            class="col-xl-6 col-lg-8 text-center position-relative last-paragraph-no-margin parallax-scrolling-style-2">
                            <a href="{{ $page->link }}"
                                aria-label="popup-video"
                                class="position-relative d-inline-block text-center bg-gradient-emerald-blue-emerald-green rounded-circle video-icon-box video-icon-large popup-youtube mb-9 md-mb-6">
                                <span>
                                    <span class="video-icon">
                                        <i class="fa-solid fa-play text-white"></i>
                                        <span class="video-icon-sonar">
                                            <span
                                                class="video-icon-sonar-bfr bg-gradient-emerald-blue-emerald-green opacity-9"></span>
                                        </span>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    <div class="row justify-content-center xs-mt-12"
        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;:100, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
        <div class="col-xl-9 col-lg-10">
            <div
                class="row align-items-center justify-content-center border border-color-extra-medium-gray border-radius-100px sm-border-radius-6px sm-mx-0">
                <div
                    class="col-md-6 p-20px border-end border-color-transparent-dark-very-light text-center ls-minus-05px align-items-center d-flex justify-content-center sm-border-end-0 sm-pb-0 sm-mb-10px">
                    <i class="bi bi-emoji-smile text-dark-gray icon-extra-medium me-10px"></i>
                    <span class="text-dark-gray fs-18 text-start fw-500 xs-lh-28">Join the <span
                            class="fw-800">10000+</span> people trusting us.</span>
                </div>
                <div
                    class="col-md-6 p-20px sm-pt-0 text-center ls-minus-05px align-items-center d-flex justify-content-center">
                    <i class="bi bi-star text-dark-gray icon-extra-medium me-10px"></i>
                    <span class="text-dark-gray fs-18 text-start fw-500">4.9 out of 5 - <span class="fw-800">8549</span>
                        Total reviews.</span>
                </div>
            </div>
        </div>
    </div>
@endsection