{{-- @push('style')
<style>

.about_testimonial{
  position: relative;
}
.slide_1{
  width: 100%;
    min-height: 100vh;
    font-size: 32px;
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.slide {
    display: flex;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
}

/* Testimonial Styles */
.testimonial{
  position: relative;
}
.quote{
     opacity: 0.05;
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%); 
}
blockquote {
    font-size: 18px;
    font-weight: 800;
    line-height: 24px;
    margin-bottom: 36px;
    width:100%;
    max-width:800px;
}
.dark-mode blockquote{
  color:#fff;
}
.author span {
    display: block;
    color: var(--color-primary);
    font-weight: 800;
}

/* Slider Image Styles */
.slider-img {
    /* width: 100%;
    padding: 30px;
    display: flex; */
    margin-bottom: 40px;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* background-image: url(https://alcs-slider.netlify.app/images/pattern-bg.svg); */
}

.slider-img img {
    width: 150px;
    display: block;
    border-radius: 50%;
    box-shadow: 0px 16px 40px 0px rgba(135, 105, 210, 0.4);
}

.about_testimonial .swiper-button-next:after,
.about_testimonial .swiper-button-prev:after{
  font-size:20px;
}
.about_testimonial .swiper-button-next,
.about_testimonial .swiper-button-prev{
    width: 25%;
    position: absolute;
    color:var(--color-primary);
}
.about_testimonial .swiper-button-next{
  right:0;
}
.about_testimonial .swiper-button-prev{
  left:0;
}

</style>
@endpush

<div class="about_testimonial mt-5">
<h3 class=" fs-3 text-center mt-5 banner-title">Testimonial</h3>
  <div class="testimonialswiper">
    <div class="swiper-wrapper">
      @foreach($testimonial as $item)
      <div class="swiper-slide m-auto">
          <div class="slide_1">
            <div class="slide">
                <div class="testimonial">
                <svg xmlns="http://www.w3.org/2000/svg" class="quote" height="5em" viewBox="0 0 448 512">
                  <path d="M448 296c0 66.3-53.7 120-120 120h-8c-17.7 0-32-14.3-32-32s14.3-32 32-32h8c30.9 0 56-25.1 56-56v-8H320c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v32 32 72zm-256 0c0 66.3-53.7 120-120 120H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h8c30.9 0 56-25.1 56-56v-8H64c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v32 32 72z"/></svg>
                  <blockquote >{{$item->description}}</blockquote>
                  <p class="author">
                    <span>{{$item->author}}</span>
                  </p>
                </div>
                <div class="slider-img">
                  <img src="{{$item['image']}}" alt="Author Image">
                </div>
            </div>
          </div>
      </div>
      @endforeach
    </div>
  </div>

  <div class="swiper-button-next"></div>
   <div class="swiper-button-prev"></div>
</div> --}}
  


@push('style')
<style>
  .about_testimonial{
  position: relative;
}
.wrapper_quote {
  max-width:900px;
  width:100%;
  margin:auto;
}
.quote-testimonial {
    position: relative;
    display: flex;
    flex-direction: row;
    min-height: 250px;
    box-shadow: 2px 2px 25px #cecece;
    border-radius: 10px;
}

.quote-testimonial .quote-testimonial-pattern {
    flex-basis: 80px;
    /* background: url("/assets/b2c_img/quotes_img.jpg") no-repeat; */
    background:var(--color-secondary);
    border-radius: 10px 0 0 10px;
}

.quote-testimonial .quote-testimonial-base {
    flex-basis: calc(100% - 80px);
    background: #ffffff;
    padding: 40px 30px 50px 80px;
    line-height: 1.62em;
    border-radius: 0 10px 10px 0;
}

.dark-mode .quote-testimonial .quote-testimonial-base {
  background:inherit;
}
.dark-mode .quote-testimonial-text{
  color:#ffff;
}
.quote-testimonial .quote-testimonial-userpic {
    position: absolute;
    top: 80px;
    left: 45px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

/* .quote-testimonial .quote-testimonial-meta {
    margin-top: 30px;
    padding-top: 10px;
    border-top: 2px dotted var(--color-primary);
} */

.quote-testimonial .quote-testimonial-meta .quote-testimonial-author {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 10pt;
    font-weight: bold;
}

.quote-testimonial-text{
  font-size:20px;
}

.quote_img{
     opacity: 0.05;
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%); 
}

.about_testimonial .swiper-button-next:after,
.about_testimonial .swiper-button-prev:after{
  font-size:20px;
}
.about_testimonial .swiper-button-next,
.about_testimonial .swiper-button-prev{
    width: 25%;
    position: absolute;
    color:var(--color-primary);
}
.about_testimonial .swiper-button-next{
  right:0;
}
.about_testimonial .swiper-button-prev{
  left:0;
}
@media screen and (max-width: 768px) {

    .quote-testimonial .quote-testimonial-pattern {
        flex-basis: 20px;
    }

    .quote-testimonial .quote-testimonial-base {
        flex-basis: calc(100% - 20px);
        padding: 100px 30px 50px 30px;
    }

    .quote-testimonial .quote-testimonial-userpic {
        width: 50px;
        height: 50px;
        left: 40px;
        top: 20px;
    }

    .quote-testimonial .quote-testimonial-qmark {
        left: 100px;
        top: 45px;
    }
}

</style>
@endpush
<div class="about_testimonial mt-5">
  <h3 class="s-3 text-center my-5 banner-title">What Students Say</h3>
  <div class="testimonialswiper">
      <div class="swiper-wrapper">
        @foreach($testimonial as $item)
          <div class="swiper-slide m-auto">
            <section class="container">
              <div class="wrapper_quote">
                  <div class="quote quote-testimonial">
                      <img src="{{$item['image']}}" class="quote-testimonial-userpic" alt="Author Image">
                      <div class="quote-testimonial-pattern">
                      </div>
                      <div class="quote-testimonial-base">
                          <blockquote class="quote-testimonial-text">
                          {{$item->description}}
                          </blockquote>
                            <svg xmlns="http://www.w3.org/2000/svg" class="quote_img" height="5em" viewBox="0 0 448 512">
                            <path d="M448 296c0 66.3-53.7 120-120 120h-8c-17.7 0-32-14.3-32-32s14.3-32 32-32h8c30.9 0 56-25.1 56-56v-8H320c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v32 32 72zm-256 0c0 66.3-53.7 120-120 120H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h8c30.9 0 56-25.1 56-56v-8H64c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v32 32 72z"/></svg>
                          <div class="quote-testimonial-meta">
                              <div class="quote-testimonial-meta-info">
                                  <div class="quote-testimonial-source"><span>- {{$item->author}}</span></div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </section>
          </div>
        @endforeach
      </div>
      <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>
@push('script')
<script>  
      const swiper = new Swiper('.testimonialswiper', {
      loop: true,
      slidesPerView: 1,
      centeredSlides: true,
      effect: 'fade', 
      fadeEffect: {
        crossFade: true 
      },
      navigation: {
        nextEl: '.swiper-button-next', 
        prevEl: '.swiper-button-prev',
      },
      autoplay: {
        enabled: true,
        delay: 3000
          },
      });
  </script>
@endpush