@extends('layout.master')

@if (count($heros) > 0)
    @section('meta_title', $heros[0]->meta_title)
    @section('meta_description', $heros[0]->meta_description)
    @section('image', $heros[0]->getFirstMediaUrl('hero'))
@endif
@section('content')
    <section>
        <!-- Swiper -->
        <div class="swiper mySwiper hero-swiper lg:h-[90vh] h-[50vh]">
            <div class="swiper-wrapper h-full">
                @if (count($heros) > 0)
                    @foreach ($heros as $hero)
                        <div class="swiper-slide">
                            <div class="w-full h-full relative">
                                <div class="absolute z-10 top-0 w-full left-0 h-full flex items-center justify-center">
                                    <div class="text-white text-center lg:w-1/2">
                                        <h2 class="lg:text-6xl md:text-4xl text-base font-extrabold">{{ $hero->title }}</h2>
                                        <p class="lg:px-24 px-14 mt-5 text-xs md:text-base lg:text-base">
                                            {{ $hero->description }}
                                        </p>
                                    </div>
                                </div>
                                <div class="w-full h-full">
                                    <img class="w-full h-full brightness-50 scale-100"
                                        src="{{ $hero->getFirstMediaUrl('hero') }}" />
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="swiper-slide">
                        <div class="w-full h-full relative">
                            <div class="absolute z-10 top-0 w-full left-0 h-full flex items-center justify-center">
                                <div class="text-white text-center lg:w-1/2">
                                    <h2 class="lg:text-6xl md:text-4xl text-base font-extrabold">Saraswoti Kendra Nepal</h2>
                                    <p class="lg:px-24 px-14 mt-5 text-xs md:text-base lg:text-base">Saraswoti Kendra Nepal
                                    </p>
                                </div>
                            </div>
                            <div class="w-full h-full">
                                <img class="w-full h-full brightness-50"
                                    src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg" />
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="w-full h-full relative">
                            <div class="absolute z-10 top-0 w-full left-0 h-full flex items-center justify-center">
                                <div class="text-white text-center lg:w-1/2">
                                    <h2 class="lg:text-6xl md:text-4xl text-base font-extrabold">Saraswoti Kendra Nepal</h2>
                                    <p class="lg:px-24 px-14 mt-5 text-xs md:text-base lg:text-base">Saraswoti Kendra Nepal
                                    </p>
                                </div>
                            </div>
                            <div class="w-full h-full">
                                <img class="w-full h-full brightness-50"
                                    src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg" />
                            </div>
                        </div>
                    </div>
                @endif

            </div>
            <div
                class="absolute z-10 top-1/2 lg:right-5 right-0.5 border-2 border-white hover:bg-transparent hover:text-white text-black transit duration-300 ease-linear  bg-white rounded-full px-2 py-[3px] hero-swiper-button-next">
                <i class="fa-solid fa-arrow-right text-3xl"></i>
            </div>
            <div
                class="absolute z-10 top-1/2 lg:left-5 left-0.5 border-2 border-white hover:bg-transparent hover:text-white text-black transit duration-300 ease-linear  bg-white rounded-full px-2 py-[3px] hero-swiper-button-prev">
                <i class="fa-solid fa-arrow-left text-3xl"></i>
            </div>
            <div class="hero-swiper-button-prev"></div>
            <div class="swiper-pagination hero-swiper-pagination"></div>
        </div>

    </section>


    {{-- about section --}}
    {{-- <section class=" lg:px-20 px-5 py-20 bg-blue-50">
        <div class="grid lg:grid-cols-2 gap-10">
            <div class="md:px-10">
                <div class=" relative wow animate__animated animate__fadeInLeft">
                    <div class="flex justify-center relative z-10">
                        <h2 class="bg-blue-50 px-2 text-primary text-lg font-bold ">About Us</h2>
                    </div>
                    <div class="h-0.5 bg-gray-500 absolute left-0 w-full top-1/2">
                    </div>
                </div>
                @if($about)
                    <div class="mt-5">
                        <h2
                            class="lg:text-4xl md:text-2xl text-lg font-bold wow animate__animated animate__fadeInUp animate__delay-1s">
                           {{$about->title}}</h2>
                        <p
                            class="my-5 lg:text-lg md:text-base text-sm text-gray-700 wow animate__animated animate__fadeInUp animate__delay-2s">
                            {!!$about->description!!}
                        </p>

                    </div>
                @endif
            </div>
            @if($about)
            <div class="relative md:h-[50vh]">

                <div>
                    
                    <div class=" group relative mt-5 md:mt-0 wow animate__animated animate__fadeInUp">
                        <div class="rounded-r-3xl overflow-hidden w-full max-h-[400px] relative z-20">
                            <img class="w-full h-full group-hover:scale-[1.15] transition-all duration-1000"
                                src="{{ $about->getFirstMediaUrl('about') }}" alt="">
                        </div>
                        <span class="absolute -bottom-7 -right-7 z-10">
                            <svg width="134" height="106" viewBox="0 0 134 106" fill="none"
                                xmlns="http://www.w3.org/2000/svg" class="!h-full">
                                <circle cx="1.66667" cy="104" r="1.66667" transform="rotate(-90 1.66667 104)"
                                    fill="#3056D3" />
                                <circle cx="16.3333" cy="104" r="1.66667" transform="rotate(-90 16.3333 104)"
                                    fill="#3056D3" />
                                <circle cx="31" cy="104" r="1.66667" transform="rotate(-90 31 104)"
                                    fill="#3056D3" />
                                <circle cx="45.6667" cy="104" r="1.66667" transform="rotate(-90 45.6667 104)"
                                    fill="#3056D3" />
                                <circle cx="60.3334" cy="104" r="1.66667" transform="rotate(-90 60.3334 104)"
                                    fill="#3056D3" />
                                <circle cx="88.6667" cy="104" r="1.66667" transform="rotate(-90 88.6667 104)"
                                    fill="#3056D3" />
                                <circle cx="117.667" cy="104" r="1.66667" transform="rotate(-90 117.667 104)"
                                    fill="#3056D3" />
                                <circle cx="74.6667" cy="104" r="1.66667" transform="rotate(-90 74.6667 104)"
                                    fill="#3056D3" />
                                <circle cx="103" cy="104" r="1.66667" transform="rotate(-90 103 104)"
                                    fill="#3056D3" />
                                <circle cx="132" cy="104" r="1.66667" transform="rotate(-90 132 104)"
                                    fill="#3056D3" />
                                <circle cx="1.66667" cy="89.3333" r="1.66667" transform="rotate(-90 1.66667 89.3333)"
                                    fill="#3056D3" />
                                <circle cx="16.3333" cy="89.3333" r="1.66667" transform="rotate(-90 16.3333 89.3333)"
                                    fill="#3056D3" />
                                <circle cx="31" cy="89.3333" r="1.66667" transform="rotate(-90 31 89.3333)"
                                    fill="#3056D3" />
                                <circle cx="45.6667" cy="89.3333" r="1.66667" transform="rotate(-90 45.6667 89.3333)"
                                    fill="#3056D3" />
                                <circle cx="60.3333" cy="89.3338" r="1.66667" transform="rotate(-90 60.3333 89.3338)"
                                    fill="#3056D3" />
                                <circle cx="88.6667" cy="89.3338" r="1.66667" transform="rotate(-90 88.6667 89.3338)"
                                    fill="#3056D3" />
                                <circle cx="117.667" cy="89.3338" r="1.66667" transform="rotate(-90 117.667 89.3338)"
                                    fill="#3056D3" />
                                <circle cx="74.6667" cy="89.3338" r="1.66667" transform="rotate(-90 74.6667 89.3338)"
                                    fill="#3056D3" />
                                <circle cx="103" cy="89.3338" r="1.66667" transform="rotate(-90 103 89.3338)"
                                    fill="#3056D3" />
                                <circle cx="132" cy="89.3338" r="1.66667" transform="rotate(-90 132 89.3338)"
                                    fill="#3056D3" />
                                <circle cx="1.66667" cy="74.6673" r="1.66667" transform="rotate(-90 1.66667 74.6673)"
                                    fill="#3056D3" />
                                <circle cx="1.66667" cy="31.0003" r="1.66667" transform="rotate(-90 1.66667 31.0003)"
                                    fill="#3056D3" />
                                <circle cx="16.3333" cy="74.6668" r="1.66667" transform="rotate(-90 16.3333 74.6668)"
                                    fill="#3056D3" />
                                <circle cx="16.3333" cy="31.0003" r="1.66667" transform="rotate(-90 16.3333 31.0003)"
                                    fill="#3056D3" />
                                <circle cx="31" cy="74.6668" r="1.66667" transform="rotate(-90 31 74.6668)"
                                    fill="#3056D3" />
                                <circle cx="31" cy="31.0003" r="1.66667" transform="rotate(-90 31 31.0003)"
                                    fill="#3056D3" />
                                <circle cx="45.6667" cy="74.6668" r="1.66667" transform="rotate(-90 45.6667 74.6668)"
                                    fill="#3056D3" />
                                <circle cx="45.6667" cy="31.0003" r="1.66667" transform="rotate(-90 45.6667 31.0003)"
                                    fill="#3056D3" />
                                <circle cx="60.3333" cy="74.6668" r="1.66667" transform="rotate(-90 60.3333 74.6668)"
                                    fill="#3056D3" />
                                <circle cx="60.3333" cy="30.9998" r="1.66667" transform="rotate(-90 60.3333 30.9998)"
                                    fill="#3056D3" />
                                <circle cx="88.6667" cy="74.6668" r="1.66667" transform="rotate(-90 88.6667 74.6668)"
                                    fill="#3056D3" />
                                <circle cx="88.6667" cy="30.9998" r="1.66667" transform="rotate(-90 88.6667 30.9998)"
                                    fill="#3056D3" />
                                <circle cx="117.667" cy="74.6668" r="1.66667" transform="rotate(-90 117.667 74.6668)"
                                    fill="#3056D3" />
                                <circle cx="117.667" cy="30.9998" r="1.66667" transform="rotate(-90 117.667 30.9998)"
                                    fill="#3056D3" />
                                <circle cx="74.6667" cy="74.6668" r="1.66667" transform="rotate(-90 74.6667 74.6668)"
                                    fill="#3056D3" />
                                <circle cx="74.6667" cy="30.9998" r="1.66667" transform="rotate(-90 74.6667 30.9998)"
                                    fill="#3056D3" />
                                <circle cx="103" cy="74.6668" r="1.66667" transform="rotate(-90 103 74.6668)"
                                    fill="#3056D3" />
                                <circle cx="103" cy="30.9998" r="1.66667" transform="rotate(-90 103 30.9998)"
                                    fill="#3056D3" />
                                <circle cx="132" cy="74.6668" r="1.66667" transform="rotate(-90 132 74.6668)"
                                    fill="#3056D3" />
                                <circle cx="132" cy="30.9998" r="1.66667" transform="rotate(-90 132 30.9998)"
                                    fill="#3056D3" />
                                <circle cx="1.66667" cy="60.0003" r="1.66667" transform="rotate(-90 1.66667 60.0003)"
                                    fill="#3056D3" />
                                <circle cx="1.66667" cy="16.3333" r="1.66667" transform="rotate(-90 1.66667 16.3333)"
                                    fill="#3056D3" />
                                <circle cx="16.3333" cy="60.0003" r="1.66667" transform="rotate(-90 16.3333 60.0003)"
                                    fill="#3056D3" />
                                <circle cx="16.3333" cy="16.3333" r="1.66667" transform="rotate(-90 16.3333 16.3333)"
                                    fill="#3056D3" />
                                <circle cx="31" cy="60.0003" r="1.66667" transform="rotate(-90 31 60.0003)"
                                    fill="#3056D3" />
                                <circle cx="31" cy="16.3333" r="1.66667" transform="rotate(-90 31 16.3333)"
                                    fill="#3056D3" />
                                <circle cx="45.6667" cy="60.0003" r="1.66667" transform="rotate(-90 45.6667 60.0003)"
                                    fill="#3056D3" />
                                <circle cx="45.6667" cy="16.3333" r="1.66667" transform="rotate(-90 45.6667 16.3333)"
                                    fill="#3056D3" />
                                <circle cx="60.3333" cy="60.0003" r="1.66667" transform="rotate(-90 60.3333 60.0003)"
                                    fill="#3056D3" />
                                <circle cx="60.3333" cy="16.3333" r="1.66667" transform="rotate(-90 60.3333 16.3333)"
                                    fill="#3056D3" />
                                <circle cx="88.6667" cy="60.0003" r="1.66667" transform="rotate(-90 88.6667 60.0003)"
                                    fill="#3056D3" />
                                <circle cx="88.6667" cy="16.3333" r="1.66667" transform="rotate(-90 88.6667 16.3333)"
                                    fill="#3056D3" />
                                <circle cx="117.667" cy="60.0003" r="1.66667" transform="rotate(-90 117.667 60.0003)"
                                    fill="#3056D3" />
                                <circle cx="117.667" cy="16.3333" r="1.66667" transform="rotate(-90 117.667 16.3333)"
                                    fill="#3056D3" />
                                <circle cx="74.6667" cy="60.0003" r="1.66667" transform="rotate(-90 74.6667 60.0003)"
                                    fill="#3056D3" />
                                <circle cx="74.6667" cy="16.3333" r="1.66667" transform="rotate(-90 74.6667 16.3333)"
                                    fill="#3056D3" />
                                <circle cx="103" cy="60.0003" r="1.66667" transform="rotate(-90 103 60.0003)"
                                    fill="#3056D3" />
                                <circle cx="103" cy="16.3333" r="1.66667" transform="rotate(-90 103 16.3333)"
                                    fill="#3056D3" />
                                <circle cx="132" cy="60.0003" r="1.66667" transform="rotate(-90 132 60.0003)"
                                    fill="#3056D3" />
                                <circle cx="132" cy="16.3333" r="1.66667" transform="rotate(-90 132 16.3333)"
                                    fill="#3056D3" />
                                <circle cx="1.66667" cy="45.3333" r="1.66667" transform="rotate(-90 1.66667 45.3333)"
                                    fill="#3056D3" />
                                <circle cx="1.66667" cy="1.66683" r="1.66667" transform="rotate(-90 1.66667 1.66683)"
                                    fill="#3056D3" />
                                <circle cx="16.3333" cy="45.3333" r="1.66667" transform="rotate(-90 16.3333 45.3333)"
                                    fill="#3056D3" />
                                <circle cx="16.3333" cy="1.66683" r="1.66667" transform="rotate(-90 16.3333 1.66683)"
                                    fill="#3056D3" />
                                <circle cx="31" cy="45.3333" r="1.66667" transform="rotate(-90 31 45.3333)"
                                    fill="#3056D3" />
                                <circle cx="31" cy="1.66683" r="1.66667" transform="rotate(-90 31 1.66683)"
                                    fill="#3056D3" />
                                <circle cx="45.6667" cy="45.3333" r="1.66667" transform="rotate(-90 45.6667 45.3333)"
                                    fill="#3056D3" />
                                <circle cx="45.6667" cy="1.66683" r="1.66667" transform="rotate(-90 45.6667 1.66683)"
                                    fill="#3056D3" />
                                <circle cx="60.3333" cy="45.3338" r="1.66667" transform="rotate(-90 60.3333 45.3338)"
                                    fill="#3056D3" />
                                <circle cx="60.3333" cy="1.66683" r="1.66667" transform="rotate(-90 60.3333 1.66683)"
                                    fill="#3056D3" />
                                <circle cx="88.6667" cy="45.3338" r="1.66667" transform="rotate(-90 88.6667 45.3338)"
                                    fill="#3056D3" />
                                <circle cx="88.6667" cy="1.66683" r="1.66667" transform="rotate(-90 88.6667 1.66683)"
                                    fill="#3056D3" />
                                <circle cx="117.667" cy="45.3338" r="1.66667" transform="rotate(-90 117.667 45.3338)"
                                    fill="#3056D3" />
                                <circle cx="117.667" cy="1.66683" r="1.66667" transform="rotate(-90 117.667 1.66683)"
                                    fill="#3056D3" />
                                <circle cx="74.6667" cy="45.3338" r="1.66667" transform="rotate(-90 74.6667 45.3338)"
                                    fill="#3056D3" />
                                <circle cx="74.6667" cy="1.66683" r="1.66667" transform="rotate(-90 74.6667 1.66683)"
                                    fill="#3056D3" />
                                <circle cx="103" cy="45.3338" r="1.66667" transform="rotate(-90 103 45.3338)"
                                    fill="#3056D3" />
                                <circle cx="103" cy="1.66683" r="1.66667" transform="rotate(-90 103 1.66683)"
                                    fill="#3056D3" />
                                <circle cx="132" cy="45.3338" r="1.66667" transform="rotate(-90 132 45.3338)"
                                    fill="#3056D3" />
                                <circle cx="132" cy="1.66683" r="1.66667" transform="rotate(-90 132 1.66683)"
                                    fill="#3056D3" />
                            </svg>
                        </span>
                    </div>
                </div>
            </div>
            @endif
        </div>
       
    </section> --}}
    {{-- end of about section --}}

    {{-- why choose us section --}}
    {{-- <section class="lg:h-[100vh]">
        <div class="grid lg:grid-cols-2 gap-10  h-full">
            <div class="wow animate__animated animate__zoomIn">
                <img class="h-full object-cover" src="{{asset('images/japan5.avif')}}" alt="">
            </div>
            <div class="lg:pt-20 lg:pr-20 px-5 lg:px-0 pb-5 lg:pb-0">
                <div class=" relative wow animate__animated animate__fadeInLeft">
                    <div class="flex relative z-10">
                        <h2 class="bg-white pr-2 text-3xl font-bold text-gray-800">Why Choose Us?</h2>
                    </div>
                    <div class="h-0.5 bg-gray-500 absolute left-0 w-2/3 top-1/2">
                    </div>
                </div>
                <p class="my-4 ml-1 text-gray-800 wow animate__animated animate__fadeInLeft animate__delay-1s">Choose us for a seamless journey to Japan! Our consultancy stands out as your trusted partner in navigating the complex process of applying for student visas in Japan. With a dedicated team of experts, we provide personalized guidance, extensive knowledge of Japanese immigration policies, and unwavering support to ensure your successful admission. Count on us for a hassle-free experience, making your dreams of studying in Japan a reality</p>

                <div class="wow animate__animated animate__fadeInUp animate__delay-2s">
                    <ul class="flex flex-col">
                          <li class="bg-white my-2" x-data="accordion(1)">
                            <h2
                              @click="handleClick()"
                              class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
                            >
                              <span>Be an ideal course for preparing for a visa</span>
                              <svg
                                :class="handleRotate()"
                                class="fill-current text-primary h-6 w-6 transform transition-transform duration-500"
                                viewBox="0 0 20 20"
                              >
                                <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
                              </svg>
                            </h2>
                            <div
                              x-ref="tab"
                              :style="handleToggle()"
                              class="border-l-2 border-primary overflow-hidden max-h-0 duration-500 transition-all"
                            >
                              <p class="p-3 text-gray-900">
                                We prepare students for visa interviews, which are the most important aspect of the study abroad procedure, and provide them with documents to meet the requirements of the relevant organizations in embassies/consulates. 
                              </p>
                            </div>
                          </li>
                          <li class="bg-white my-2" x-data="accordion(2)">
                            <h2
                              @click="handleClick()"
                              class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
                            >
                              <span>
                                Enroll for tests and language classes here!
                              </span>
                              <svg
                                :class="handleRotate()"
                                class="fill-current text-primary h-6 w-6 transform transition-transform duration-500"
                                viewBox="0 0 20 20"
                              >
                                <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
                              </svg>
                            </h2>
                            <div
                              x-ref="tab"
                              :style="handleToggle()"
                              class="border-l-2 border-primary overflow-hidden max-h-0 duration-500 transition-all"
                            >
                              <p class="p-3 text-gray-900">
                                Aside from counseling, we provide a variety of test preparation sessions, including JLPT N1 to N5 level, led by competent, pleasant, and active teachers who you will miss in the place of your dreams. We provide a variety of language lessons and excellent facilities. 
                              </p>
                            </div>
                          </li>
                          <li class="bg-white my-2" x-data="accordion(3)">
                            <h2
                              @click="handleClick()"
                              class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
                            >
                              <span>We work closely</span>
                              <svg
                                :class="handleRotate()"
                                class="fill-current text-primary h-6 w-6 transform transition-transform duration-500"
                                viewBox="0 0 20 20"
                              >
                                <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
                              </svg>
                            </h2>
                            <div
                              x-ref="tab"
                              :style="handleToggle()"
                              class="border-l-2 border-primary overflow-hidden max-h-0 duration-500 transition-all"
                            >
                              <p class="p-3 text-gray-900">
                                We work closely with students to understand their needs and goals.
                              </p>
                            </div>
                          </li>
                         
                    </ul>
                </div>
            </div>
        </div>
    </section> --}}
    {{-- end of why choose us section --}}


    {{-- testimonial section --}}
    {{-- <section class="relative lg:px-20 px-5 pt-20 pb-10">
      <div class="absolute top-0 left-0 w-full h-full">
        <img
          class="w-full h-full object-cover object-center brightness-50"
          src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg"
          alt=""
        />
      </div>
      <div class="relative text-white">
        <div class="w-2/3 mx-auto">
          <h2 class="text-3xl font-bold text-center wow animate__animated animate__fadeInLeft">Testimonial</h2>
          <p class="text-center mt-2 wow animate__animated animate__fadeInUp animate__delay-1s">
            Our Students & Professional’s Reviews.
          </p>
        </div> --}}

    {{-- {/* slider section */} --}}

    {{-- <div class="pb-5">
          
          <div class="swiper testimonial-swiper">
            <div class="swiper-wrapper">
              @if (count($testimonials) > 0)
                @foreach ($testimonials as $testimonial)
                  <div class="swiper-slide">
                    <div class="rounded-xl backdrop-blur-md border border-white shadow-md py-5 px-10" style="backdrop-filter: blur(12px)">
                      <div class="w-[100px] h-[100px] mx-auto rounded-full overflow-hidden">
                        <img class="w-full h-full object-cover object-top" src="{{$testimonial->getFirstMediaUrl('testimonial')}}" alt="" />
                      </div>
                      <div class="mt-2">
                        <h2 class="text-center text-xl font-semibold text-white">{{$testimonial->name}}</h2>
                        <h2 class="text-center text-sm text-white">{{$testimonial->location}}</h2>
                      </div>
                      <div class="mt-5 relative">
                        <div class="absolute top-0 -left-6">
                          <i class="fa-solid fa-quote-left"></i>
                        </div>
                        <div class="absolute bottom-0 -right-6">
                          <i class="fa-solid fa-quote-right"></i>
                        </div>
                        <p class="text-justify">{{$testimonial->review}}</p>
                      </div>
                    </div>
                  </div>
                @endforeach
              @else
                
                <div class="swiper-slide">
                  <div class="rounded-xl backdrop-blur-md border border-white shadow-md py-5 px-10" style="backdrop-filter: blur(12px)">
                    <div class="w-[100px] h-[100px] mx-auto rounded-full overflow-hidden">
                      <img class="w-full h-full object-cover object-top" src="https://media.istockphoto.com/id/1278976856/photo/happy-student-girl-at-high-school.jpg?s=612x612&w=0&k=20&c=XiJQHTm-LKgCr0s3hURY0ATGFfMZQH4B8gE6h2TlK4U=" alt="" />
                    </div>
                    <div class="mt-2">
                      <h2 class="text-center text-xl font-semibold text-white">Dipika Shrestha</h2>
                      <h2 class="text-center text-sm text-white">Nagoya, Japan</h2>
                    </div>
                    <div class="mt-5 relative">
                      <div class="absolute top-0 -left-6">
                        <i class="fa-solid fa-quote-left"></i>
                      </div>
                      <div class="absolute bottom-0 -right-6">
                        <i class="fa-solid fa-quote-right"></i>
                      </div>
                      <p class="text-justify">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vitae, nemo eaque error aperiam soluta necessitatibus illo alias a amet accusamus voluptas unde eius doloremque saepe! Ea delectus aperiam optio.</p>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="rounded-xl backdrop-blur-md border border-white shadow-md py-5 px-10">
                    <div class="w-[100px] h-[100px] mx-auto rounded-full overflow-hidden">
                      <img class="w-full h-full object-cover object-top" src="https://media.istockphoto.com/id/1278976856/photo/happy-student-girl-at-high-school.jpg?s=612x612&w=0&k=20&c=XiJQHTm-LKgCr0s3hURY0ATGFfMZQH4B8gE6h2TlK4U=" alt="" />
                    </div>
                    <div class="mt-2">
                      <h2 class="text-center text-xl font-semibold text-white">Dipika Shrestha</h2>
                      <h2 class="text-center text-sm text-white">Nagoya, Japan</h2>
                    </div>
                    <div class="mt-5 relative">
                      <div class="absolute top-0 -left-6">
                        <i class="fa-solid fa-quote-left"></i>
                      </div>
                      <div class="absolute bottom-0 -right-6">
                        <i class="fa-solid fa-quote-right"></i>
                      </div>
                      <p class="text-justify">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vitae, nemo eaque error aperiam soluta necessitatibus illo alias a amet accusamus voluptas unde eius doloremque saepe! Ea delectus aperiam optio.</p>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="rounded-xl backdrop-blur-md border border-white shadow-md py-5 px-10">
                    <div class="w-[100px] h-[100px] mx-auto rounded-full overflow-hidden">
                      <img class="w-full h-full object-cover object-top" src="https://media.istockphoto.com/id/1278976856/photo/happy-student-girl-at-high-school.jpg?s=612x612&w=0&k=20&c=XiJQHTm-LKgCr0s3hURY0ATGFfMZQH4B8gE6h2TlK4U=" alt="" />
                    </div>
                    <div class="mt-2">
                      <h2 class="text-center text-xl font-semibold text-white">Dipika Shrestha</h2>
                      <h2 class="text-center text-sm text-white">Nagoya, Japan</h2>
                    </div>
                    <div class="mt-5 relative">
                      <div class="absolute top-0 -left-6">
                        <i class="fa-solid fa-quote-left"></i>
                      </div>
                      <div class="absolute bottom-0 -right-6">
                        <i class="fa-solid fa-quote-right"></i>
                      </div>
                      <p class="text-justify">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vitae, nemo eaque error aperiam soluta necessitatibus illo alias a amet accusamus voluptas unde eius doloremque saepe! Ea delectus aperiam optio.</p>
                    </div>
                  </div>
                </div>
              @endif
              
              
            </div>
          </div>
        </div> --}}
    {{-- end of slider --}}
    {{-- <div class="flex justify-center gap-5">
          <div class=" border-2 border-white hover:bg-transparent hover:text-white text-black transit duration-300 ease-linear  bg-white rounded-full px-2 py-[3px] testimonial-swiper-button-prev">
            <i class="fa-solid fa-arrow-left text-3xl"></i>
          </div>
          <div class=" border-2 border-white hover:bg-transparent hover:text-white text-black transit duration-300 ease-linear  bg-white rounded-full px-2 py-[3px] testimonial-swiper-button-next">
            <i class="fa-solid fa-arrow-right text-3xl"></i>
          </div>
        </div>
      </div>
      <div class="swiper-pagination testimonial-pagination"></div>
    </section> --}}
    {{-- end of testimonial section --}}

    {{-- chair person section --}}
    @if (count($childrens)>0)
    <section>
        <div class='p-10'>
                    <div class="grid  md:grid-cols-2 gap-4">
                        @foreach ($childrens as $key => $gallery)
                            <div class='overflow-hidden group relative {{ $key % 2 !== 0 ? 'row-span-2' : 'h-96' }}'>
                                <a data-fancybox="gallery-a" data-caption="{{$gallery->title}}" data-src={{ $gallery->getFirstMediaUrl('children') }}>
                                    <img  class=" cursor-pointer h-full w-full object-cover brightness- object-center rounded-lg hover:scale-110 transition-all duration-500 ease-linear"
                                        src={{ $gallery->getFirstMediaUrl('children') }} alt="" />
                                </a>
                                <div
                                    class="absolute pointer-events-none overlay opacity-0 invisible   group-hover:opacity-100 group-hover:visible transition-all duration-500 ease-linear flex items-center justify-center top-0 left-0 w-full h-full">
                                </div>
                            </div>
                        @endforeach
                    </div>
        </div>
    </section>
    @endif
    {{-- end of chair person section --}}
    {{-- gallery section --}}
    <section class="bg-blue-50">
        <div class='p-5'>
            <div class="mx-auto my-8 max-w-screen-sm lg:mb-16 text-center ">
                <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-primary ">Gallery</h2>
                <p class="font-light text-black sm:text-xl">Explore the Journey, Capture the Moments with
                    {{ config('app.name') }} Gallery. </p>
            </div>
            @if (count($galleries) > 0)
                <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-4">

                    @foreach ($galleries as $key => $gallery)
                        <div class='overflow-hidden group relative {{ $key % 2 !== 0 ? 'row-span-2' : 'h-96' }}'>
                            <img data-fancybox="gallery" data-caption="{{$gallery->title}}" class=" cursor-pointer h-full w-full object-cover brightness- object-center rounded-lg hover:scale-110 transition-all duration-500 ease-linear"
                                src={{ $gallery->getFirstMediaUrl('gallery') }} alt="" />
                            <div
                                class="absolute pointer-events-none overlay opacity-0 invisible   group-hover:opacity-100 group-hover:visible transition-all duration-500 ease-linear flex items-center justify-center top-0 left-0 w-full h-full">
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </section>
    {{-- end of gallery section --}}

     {{-- video section --}}
  <div id="player-div" class="backdrop-blur-lg !z-[999] hidden fixed top-0 left-0 w-full h-full  items-center justify-center">
    <div class="absolute top-10 right-10">
      <i class="fas fa-xmark text-4xl text-red-600 hover:text-red-800 cursor-pointer" onclick="closeVideo()"></i>
    </div>
    <div id="player" class="md:h-[80%] md:w-1/2 rounded-xl">
    
    </div>
  </div>
  <div class="md:p-20 p-10 video-section ">
    <div class="mx-auto my-8 max-w-screen-sm lg:mb-16 text-center ">
        <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-primary ">Our Memories</h2>
        <p class="font-light text-black sm:text-xl">Explore the Journey, Capture the Moments with
            {{ config('app.name') }} Videos. </p>
    </div>
      <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-5 md:mt-20 mt-10">
        
        @if (count($videos)>0)
          @foreach ($videos as $key=>$video)
          <div class="flex justify-center group transition-all duration-500 {{$key==0?'md:col-span-2 nd:row-span-2':''}}">
              <div class="rounded-lg shadow-lg bg-white w-full {{$key==0?'md:h-[500px]':'md:h-[230px]'}} overflow-hidden relative">
                <div class="h-full w-full">
                  <img class="w-full h-full object-cover object-center rounded-lg" src="{{$video->getFirstMediaUrl('video')}}" alt="">
                </div>
                <div class="absolute overlay opacity-0 invisible   group-hover:opacity-100 group-hover:visible transition-all duration-500 ease-linear flex items-center justify-center top-0 left-0 w-full h-full">
                  <div class="video tex-white" data-video-id="{{$video->link}}">
                    <i class="fa-regular fa-circle-play text-white text-5xl cursor-pointer hover:scale-125 duration-300"></i>
                  </div>
                </div>
              </div>
          </div>
          @endforeach
        @endif
      </div>
  </div>

  {{--end of video section --}}

    {{-- activities  section --}}
    {{-- <section class="bg-blue-50">
        <div class='p-5'>
            <div class="mx-auto my-8 max-w-screen-sm lg:mb-16 text-center ">
                <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-primary ">Our Activities</h2>
                <p class="font-light text-black sm:text-xl">Explore the Activities We Perform and Are Glad to Offer</p>
            </div>
            <div class="mt-10">
                
                  <div>
                    <ul class="flex flex-col md:w-1/2 mx-auto text-white">
                        @php
                          $i=1;
                        @endphp
                        @foreach ($album->song as $song)
                          <li class=" my-2 border-b-2 border-neutral-100 py-" x-data="accordion({{$i}})">
                            <h2
                              @click="handleClick()"
                              class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
                            >
                              <span>{{$song->title}}</span>
                              <svg
                                :class="handleRotate()"
                                class="fill-current text-primary h-6 w-6 transform transition-transform duration-500"
                                viewBox="0 0 20 20"
                              >
                                <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
                              </svg>
                            </h2>
                            <div
                              x-ref="tab"
                              :style="handleToggle()"
                              class="border-l-2 border-primary overflow-hidden max-h-0 duration-500 transition-all"
                            >
                              <div class="p-3 text-gray-200 text-center">
                                <h2 class="pb-5 text-primary underline text-xl font-semibold">Lyrics</h2>
                                {!!$song->lyrics!!}
                              </div>
                            </div>
                          </li>
                        @php
                          $i++;
                        @endphp
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section> --}}
    {{-- end of activities section --}}


    {{-- contact us section --}}
    <section class="bg-blue-50" id="contact">
        <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
            <div class="mb-4">
                <div class="mb-6 max-w-3xl text-center sm:text-center md:mx-auto md:mb-12">
                    <p
                        class="text-base font-semibold uppercase tracking-wide text-primary wow animate__animated animate__fadeInUp"">
                        Contact
                    </p>
                    <h2
                        class="font-heading mb-4 font-bold tracking-tight text-gray-900 text-3xl sm:text-5xl wow animate__animated animate__fadeInLeft">
                        Get in Touch
                    </h2>
                    <p
                        class="mx-auto mt-4 max-w-3xl text-xl text-gray-600 wow animate__animated animate__fadeInUp animate__delay-1s">
                        Feel free to contact us !!
                    </p>
                </div>
            </div>
            <div class="flex items-stretch justify-center">
                <div class="">
                    <div class="h-full pr-6">
                        <p
                            class="mt-3 mb-12 text-lg text-gray-600 wow animate__animated animate__fadeInLeft animate__delay-1s">
                            If you have any questions, please don’t hesitate to contact us.
                        </p>
                        @if ($contact)
                            <ul class="mb-6 md:mb-0 wow animate__animated animate__fadeInLeft animate__delay-2s">
                                @if ($contact->address)
                                    <li class="flex">
                                        <div
                                            class="flex h-10 w-10 items-center justify-center rounded bg-blue-900 text-gray-50">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="h-6 w-6">
                                                <path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
                                                <path
                                                    d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z">
                                                </path>
                                            </svg>
                                        </div>
                                        <div class="ml-4 mb-4">
                                            <h3 class="mb-2 text-lg font-medium leading-6 text-gray-900">Our Address
                                            </h3>
                                            <p class="text-gray-600 dark:text-slate-400">{{ $contact->address }}</p>
                                        </div>
                                    </li>
                                @endif
                                @if ($contact->phone)
                                    <li class="flex">
                                        <div
                                            class="flex h-10 w-10 items-center justify-center rounded bg-blue-900 text-gray-50">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="h-6 w-6">
                                                <path
                                                    d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2">
                                                </path>
                                                <path d="M15 7a2 2 0 0 1 2 2"></path>
                                                <path d="M15 3a6 6 0 0 1 6 6"></path>
                                            </svg>
                                        </div>
                                        <div class="ml-4 mb-4">
                                            <h3 class="mb-2 text-lg font-medium leading-6 text-gray-900">Contact
                                            </h3>
                                            <p class="text-gray-600 dark:text-slate-400">{{ $contact->phone }}</p>
                                        </div>
                                    </li>
                                @endif
                                @if ($contact->mail)
                                    <li class="flex">
                                        <div
                                            class="flex h-10 w-10 items-center justify-center rounded bg-blue-900 text-gray-50">
                                            <i class="fas fa-envelope"></i>
                                        </div>
                                        <div class="ml-4 mb-4">
                                            <h3 class="mb-2 text-lg font-medium leading-6 text-gray-900">Mail
                                            </h3>
                                            <p class="text-gray-600 dark:text-slate-400">{{ $contact->mail }}</p>
                                        </div>
                                    </li>
                                @endif


                            </ul>
                        @endif
                        {{-- @if ($socialMedia)
                          
                          <div class="mt-10">
                              <h3 class="mb-2 text-xl font-medium leading-6 text-white">Social Media Links
                              </h3>
                              <ul class="flex gap-5 mt-5">
                                @if ($socialMedia->facebook)
                                  <li>
                                    <a target="__blank" href="{{$socialMedia->facebook}}">
                                      <i class="hover:-translate-y-1 transition-all duration-300 cursor-pointer ease-linear fa-brands fa-facebook text-4xl text-white hover:text-blue-500"></i>
                                    </a>
                                  </li>
                                @endif
                                @if ($socialMedia->instagram)
                                  <li>
                                    <a target="__blank" href="{{$socialMedia->instagram}}">
                                      <i class="hover:-translate-y-1 transition-all duration-300 cursor-pointer ease-linear fa-brands fa-instagram text-4xl text-white hover:text-pink-600"></i>
                                    </a>
                                  </li>
                                @endif
                                @if ($socialMedia->youtube)
                                  <li>
                                    <a target="__blank" href="{{$socialMedia->youtube}}">
                                      <i class="hover:-translate-y-1 transition-all duration-300 cursor-pointer ease-linear fa-brands fa-youtube text-4xl text-white hover:text-red-600"></i>
                                    </a>
                                  </li>
                                @endif
                              </ul>
                          </div>
                        @endif --}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- end of contact us section --}}

@endsection


@section('css')
    <style>
        .testimonial-swiper .swiper-slide {
            filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            -webkit-filter: blur(3px);
            backdrop-filter: blur(3px);
        }

        .testimonial-swiper .swiper-slide-active {
            filter: blur(0);
            -webkit-filter: blur(0);
        }

            /* video section */
        .video-section .overlay,.album-section .overlay{
        background: rgb(0,0,0);
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(3,0,0,1) 99%);
        }
        /* end of video section */

        @media screen and (min-width:1140px) {

            .profile-card .overlay {
                position: absolute;
                top: 80%;
                left: 0;
                width: 100%;
                height: 30%;
                background: transparent;
                opacity: 0.8;
                visibility: hidden;
                border-top-left-radius: 40%;
                transition: all 0.5s ease;
                transform: translateY(20px);
                overflow: hidden;
            }

            .profile-card:hover .overlay {
                background-color: white;
                transform: translateY(0px);
                opacity: 0.8;
                visibility: visible;

            }

            .profile-card .social-links {
                transition: all 0.5s ease;
                transform: translateY(5px);
                opacity: 0;
                overflow: hidden;
            }

            .profile-card:hover .social-links {
                opacity: 1;
                transform: translateY(-10px);
            }
        }

        @media screen and (max-width:1140px) {
            .profile-card .overlay {
                position: absolute;
                top: 80%;
                left: 0;
                width: 100%;
                height: 30%;
                border-top-left-radius: 40%;
                transition: all 0.5s ease;
                overflow: hidden;
                background-color: white;
                transform: translateY(0px);
                opacity: 0.8;
                visibility: visible;
            }

            .profile-card .social-links {
                transform: translateY(-10px);
                opacity: 1;
            }
        }
    </style>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
@endsection


@section('script')
    <script>
      Fancybox.bind("[data-fancybox]", {});
        var swiper = new Swiper(".hero-swiper", {
            spaceBetween: 30,
            effect: "fade",
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: ".hero-swiper-button-next",
                prevEl: ".hero-swiper-button-prev",
            },
            pagination: {
                el: ".hero-swiper-pagination",
                clickable: true,
            },
        });

        var swiper = new Swiper(".testimonial-swiper", {
            effect: "coverflow",
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: "auto",
            loop: true,
            coverflowEffect: {
                rotate: 0,
                stretch: 0,
                depth: 100,
                modifier: 2.5,
                slideShadows: false,
            },
            pagination: {
                el: ".testimonial-pagination",
            },
            navigation: {
                nextEl: ".testimonial-swiper-button-next",
                prevEl: ".testimonial-swiper-button-prev",
            },
        });
    </script>
    
    <script defer src="https://unpkg.com/alpinejs@3.2.3/dist/cdn.min.js"></script>
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.store('accordion', {
                tab: 0
            });

            Alpine.data('accordion', (idx) => ({
                init() {
                    this.idx = idx;
                },
                idx: -1,
                handleClick() {
                    this.$store.accordion.tab = this.$store.accordion.tab === this.idx ? 0 : this.idx;
                },
                handleRotate() {
                    return this.$store.accordion.tab === this.idx ? 'rotate-180' : '';
                },
                handleToggle() {
                    return this.$store.accordion.tab === this.idx ?
                        `max-height: ${this.$refs.tab.scrollHeight}px` : '';
                }
            }));
        })
    </script>

    {{-- videos --}}
<script src="https://www.youtube.com/iframe_api"></script> 
    <script>
        // Function to load YouTube video
        var player;
        function loadVideo(videoId) {
          if (player) {
              player.loadVideoById(videoId);
          } else {
              player = new YT.Player('player', {
                  height: '360',
                  width: '640',
                  videoId: videoId,
                  events: {
                      'onReady': onPlayerReady
                  }
              });
          }
        }
        function onPlayerReady(event) {
          event.target.playVideo();
        }
        
        function stopVideo() {
          player.stopVideo();
        }
      function closeVideo()
      {
        document.getElementById("player-div").style.display="none";
        document.body.style.overflow="auto";
        stopVideo();
      }
      
      // Add click event listeners to each video
      document.querySelectorAll('.video').forEach(function(video) {
          video.addEventListener('click', function() {
              var videoId = this.getAttribute('data-video-id');
              loadVideo(videoId);
              document.getElementById('player-div').style.display="flex";
              document.body.style.overflow="hidden";
          });
      });
      
      
      
      
      </script>
@endsection