@extends('layout.master')
@if ($about)
@section('meta_title',$about->meta_title)     
@section('meta_description',$about->meta_description)
{{-- @section('image',$about ? $about->getFirstMediaUrl('chairperson'): asset('images/japan3.jpg')) --}}
@endif
@section('content')
    <section>
        {{-- <div class="w-full h-[25vh] lg:h-[50vh] relative">
            <div class="absolute z-[1] top-0 w-full left-0 h-full flex items-center justify-center">
              <div class="text-white   text-center w-1/2">
                <h2 class="lg:text-6xl md:text-4xl text-2xl font-extrabold wow animate__animated animate__lightSpeedInLeft">About Us</h2>
              </div>
            </div>
            <div class="w-full h-full">
              <img class="w-full h-full object-cover object-top brightness-50" src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg" />
            </div>
        </div> --}}

        <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 ">About Us</h2>
          {{-- <p class="font-light text-black sm:text-xl">Explore the Journey, Capture the Moments with
              {{ config('app.name') }} Gallery. </p> --}}
      </div>


        {{-- content section --}}
          <div class=" lg:px-20 px-5 py-20 bg-blue-50">

            @if ($about)
              
              {{-- <h2 class="text-4xl font-bold underline wow animate__animated animate__fadeInLeft">{{$about->title}}</h2>
              
              <div class="wow animate__animated animate__zoomIn">
                <p class="mt-5 text-justify text-lg text-gray-700 ">
                  {!!$about->description!!}
                </p>
              </div> --}}
              <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>
                    <div class="mt-5">
                        <h2 class="lg:text-4xl md:text-2xl text-lg font-bold wow animate__animated animate__fadeInUp animate__delay-1s">Saraswati Kendra Nepal</h2>
                        {{-- <p class="my-5 lg:text-lg md:text-base text-sm text-gray-700 wow animate__animated animate__fadeInUp animate__delay-2s">We strive to provide personalized support and guidance throughout the entire process.</p> --}}
                        <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 class="relative my-5 py-5 bg-gray-50 wow animate__animated animate__fadeInUp animate__delay-3s">
                            <div class="absolute top-0 -left-1 w-1 h-full bg-red-500 rounded-xl"></div>
                            <ul class="ml-1 flex flex-col gap-2 lg:text-base md:text-sm text-xs">
                              <li class="relative pl-5 before:content-[''] before:absolute before:h-2 before:w-2 before:bg-red-500 before:left-0 before:top-2 before:rounded-full">
                                <span class="font-bold">We commitment </span>to delivering high-quality services and support. 
                              </li>
                              <li class="relative pl-5 before:content-[''] before:absolute before:h-2 before:w-2 before:bg-red-500 before:left-0 before:top-2 before:rounded-full">
                                <span class="font-bold">We work closely </span>We work closely with students to understand their needs and goals.                          </li>
                            </ul>
                          </div> --}}
                    </div>
                </div>
                <div class="relative md:h-[50vh]">
    
                  {{-- <div class="grid md:grid-cols-2 md:h-1/2"> --}}
                  <div>
                    {{-- <div class="relative wow animate__animated animate__fadeInUp animate__delay-1s">
                      <div class="md:absolute z-30 -right-10 w-full h-full top-[80%] overflow-hidden rounded-l-3xl group ">
                        <img class="w-full h-full group-hover:scale-[1.15] transition-all duration-1000" src="{{asset('images/japan5.avif')}}" alt="">
                      </div>
                    </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 object-cover object-center  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>
            </div>
            @endif
            

            {{-- @if ($chairperson)
              <div class="mt-32">
                <div class="flex flex-col md:flex-row gap-5 items-center">
                  <div class="max-w-[300px] rounded-xl overflow-hidden wow animate__animated animate__zoomIn">
                    <img src="{{ $chairperson->getFirstMediaUrl('chairperson')}}" alt="">
                  </div>
                  <div class="flex flex-col gap-1">
                      <h2 class="text-4xl font-extrabold wow animate__animated animate__rotateInUpLeft">{{$chairperson->name}}</h2>
                      <h2 class="text-xl font-semibold wow animate__animated animate__slideInUp">{{$chairperson->position}}</h2>
                      <h2 class="wow animate__animated animate__fadeInUp">{{$chairperson->consultancy}}</h2>
                  </div>
                </div>
              </div>
            @endif --}}
             
            {{-- @if (count($faqs))
              <div class="mt-20">
                <h2
                  class="font-heading mb-4 text-center font-bold tracking-tight text-gray-900 text-3xl sm:text-5xl wow animate__animated animate__fadeInUp">
                  FAQS
                </h2>
                <div class="flex justify-center">
                  <div class=" relative lg:w-1/2 w-full wow animate__animated animate__zoomIn">
                      <div class="flex justify-center relative z-10">
                          <h2 class="bg-blue-50 px-2 text-primary text-lg font-bold">Frequently Asked Questions</h2>
                      </div>
                      <div class="h-0.5 bg-gray-500 absolute left-0 w-full top-1/2">
                      </div>
                  </div>
                </div>


                <div class="mt-5 wow animate__animated animate__zoomIn animate__delay-1s">
                    <div>
                      <ul class="flex flex-col">
                          @php
                            $i=1;
                          @endphp
                          @foreach ($faqs as $faq)
                            <li class="bg-white my-2 shadow-lg" x-data="accordion({{$i}})">
                              <h2
                                @click="handleClick()"
                                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
                              >
                                <span>{{$faq->question}}</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-900">
                                  {!!$faq->answer!!}
                                </div>
                              </div>
                            </li>
                          @php
                            $i++;
                          @endphp
                          @endforeach
                      </ul>
                  </div>
                </div>
              </div>
            @endif --}}
          </div>
        {{--end of content section --}}
    </section>
    <div class='p-5 school-section bg-blue-50'>
      <div class="mx-auto my-8 max-w-screen-sm text-center ">
          <h2 class="mb-4 text-2xl tracking-tight font-extrabold text-primary ">Our Experimental Schools</h2>
      </div>
      <div class="mt-5">
        @if (count($schools)>0)
        
        <div class="grid lg:grid-cols-3 md:grid-cols-2  gap-5 card ">
          @foreach ($schools as $school )
            <div class="">
              <div class="bg-white shadow-md border border-gray-200 rounded-lg  mb-5">
                  <div class="img-div h-[250px]">
                        <img class="rounded-t-lg w-full h-full object-cover object-center" src="{{ $school->getFirstMediaUrl('school')}}" alt="">
                  </div>
                  <div class="p-5">
                          <h5 class="text-gray-900 font-semibold text-lg tracking-tight mb-2 capitalize">{{$school->name}}</h5>
                  </div>
              </div>
            </div>
          @endforeach
        </div>
      @endif
      </div>
  </div>
    <section class="bg-blue-50 lg:px-20 px-5">
      <div class='p-5'>
          <div class="mx-auto my-8 max-w-screen-sm text-center ">
              <h2 class="mb-4 text-2xl tracking-tight font-extrabold text-primary ">Teaching Volunters</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-5">
              
                {{-- <div>
                  <ul class="flex flex-col md:w-1/2 mx-auto">
                      @php
                        $i=1;
                      @endphp
                      @foreach ($activities as $activity)
                        <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>{{$activity->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 ">
                              {!!$activity->description!!}
                            </div>
                          </div>
                        </li>
                      @php
                        $i++;
                      @endphp
                      @endforeach
                  </ul>
              </div> --}}
              @if(count($volunters)>0)
              <div class="flex justify-center">
                  <ul class="list-disc">
                      @foreach ($volunters as $item)
                      <li>{{$item->name}} - ( {{$item->position}} )</li>
                      @endforeach
                  </ul>
              </div>
              @endif
          </div>
      </div>
      <div class='p-5'>
          <div class="mx-auto my-8 max-w-screen-sm text-center ">
              <h2 class="mb-4 text-2xl tracking-tight font-extrabold text-primary ">Supported By</h2>
          </div>
          <div class="mt-5">
              @if(count($contributions)>0)
              <div class="flex justify-center">
                  <ul class="list-disc">
                      @foreach ($contributions as $item)
                      <li>{{$item->name}}</li>
                      @endforeach
                  </ul>
              </div>
              @endif
          </div>
      </div>
      
  </section>
    
@endsection


{{-- @section('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>
@endsection --}}

@section('css')
  <style>
    
    @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>
@endsection