@extends('web.layouts.layout')
<title>Hei Learning Visit</title>
<meta name="description" content="@yield('')">
<meta name="keywords" content="@yield('')">
@section('content')
<main>
  <!-- breadcrumb area start -->
  <section class="bd-breadcrumb-area p-relative fix z-index-11">
    <div class="bd-breadcrumb-bg-two" data-background="assets/images/breadcrumb/breadcrumb-bg-2.webp"></div>
    <div class="bd-breadcrumb-wrapper p-relative">
      <div class="container">
        <div class="row">
          <div class="col-xl-12">
            <div class="bd-breadcrumb style-two d-flex-center">
              <div class="bd-breadcrumb-content">
                <h1 class="bd-breadcrumb-title"> HEI Learning Visits  </h1>
                <div class="bd-breadcrumb-list"> <span><a href="/">Home</a></span> <span class="divider"><i class="fa-regular fa-angle-right"></i></span> <span class="active"> Hei Learning Visits  </span> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>



  
<section class="learning-Visits">
  <div class="container">
     <div class="row align-items-center g-30 justify-content-between">
      <div class="col-xl-6 col-lg-6 col-md-12">
        <div class="bd-counter-wrapper bd-counter-style-five">
          <div class="bd-counter-item">
          <div class="bd-counter-content">
              <img src="{{asset('/admin_upload/'.$hei_learning->image1??'')}}" alt="Book Icon" style="width: auto; height: auto;">
            <h2>{{$hei_learning->number1??""}}</h2>
            <h5>{{$hei_learning->title1??""}}</h5>
          </div>

        </div>
         <div class="bd-counter-item">
          <div class="bd-counter-content"> 
            <img src="{{asset('/admin_upload/'.$hei_learning->image2??'')}}" alt="Book Icon" style="width: auto; height: auto;">
          <h2>{{$hei_learning->number2??""}}</h2>
             <h5>{{$hei_learning->title2??""}}</h5> 
          </div>
        </div>
        <div class="bd-counter-item">
          <div class="bd-counter-content">
            <img src="{{asset('/admin_upload/'.$hei_learning->image3??'')}}" alt="Book Icon" style="width: auto; height: auto;">
            <h2>{{$hei_learning->number3??""}}</h2>
             <h5>{{$hei_learning->title3??""}}</h5>
          </div>
        </div>
        <div class="bd-counter-item">
          <div class="bd-counter-content">
            <img src="{{asset('/admin_upload/'.$hei_learning->image4??'')}}" alt="Book Icon" style="width: auto; height: auto;">
            <h2>{{$hei_learning->number4??""}}</h2>
             <h5>{{$hei_learning->title4??""}}</h5>
          </div>
        </div>
      </div>
      </div>
      <div class="col-xl-6 col-lg-6 col-md-12">
      <!-- Join Us Button -->
      
        <div class="bd-about-wrapper bgWhite">
             <h4 class="pb-10">{{$hei_learning->heading1??""}}</h4>
            <p class="mb-10"> {{strip_tags($hei_learning->description)}}</p>
            
            <div class="d-flex">
          <button style="font-size: 14px;padding: 7px 30px;border: none;" type="button" class="btn btn-primary w-auto" data-bs-toggle="modal" data-bs-target="#joinUsModal">
              Join Us
          </button>
      </div>
         </div>
      </div>
      
      @include('web.pages.joinUsModal')
      
    </div>
  </div>
</section>
  
  
  
  
  
  <!-- breadcrumb area end -->
  <section class="bd-why-choose-area fix online-self">  
    <div class="container">
  
       
<div class="row align-items-center p-relative z-index-1">
 <div class="col-lg-6">
 <h4> {!!$hei_learning->heading2!!}</h4>
 <p>{{strip_tags($hei_learning->description2)}}</p>
  </div>
  
  <div class="col-xl-6"> 
        <div class="videosiframe">
        <iframe width="100%" style="height: 390px;" src="{!!$hei_learning->youtube_link!!}" title="PIA Learning Visit 2025" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>
  </div>
  
  
  </div>
</div>
</section> 

 


<section class="bd-why-choose-area fix online-self" style="background:#eee;">
    <div class="container">
       <div class="row align-items-center justify-content-center pb-4">
          <div class="col-lg-6">
                    <div class="bd-about-wrapper style-one">
                        <div class="bd-about-thumb-inner">
                            <div class="bd-about-thumb-wrapper">
                                <div class="bd-about-thumb">
                                    <img src="{{asset('/admin_upload/'.$hei_learning->image5??'')}}" alt="image">
                                </div>
                                <div class="bd-about-thumb-small">
                                    <img src="{{asset('/admin_upload/'.$hei_learning->image6??'')}}" alt="image">
                                </div>
                            </div>
                            <div class="bd-about-thumb-shape">
                                <img src="assets/images/shape/dot-shape-01.webp" alt="image">
                            </div>
                        </div>
                    </div>
          </div>
          
          <div class="col-lg-6">
            <div class="bd-post-details-list">
             <h4 class="pb-10">{!!$hei_learning->heading3??''!!}  </h4>
            <p>{{strip_tags($hei_learning->description3)}}</p>
  </div>  
          </div>
              
      </div>
   </div>
</section>



<section class="bd-why-choose-area fix online-self">  
    <div class="container">
   <div class="row align-items-center p-relative z-index-1">
  <div class="col-lg-12 text-center">
            <div class="bd-section-wrapper section-title-space">
             <h4 class="pb-10"> {!!$hei_learning->heading4??''!!} </h4>
              <p class="mb-10"> <b>{!!$hei_learning->sub_heading4??''!!} </b> </p>
    <div class="text-center mb-30"> <img src="{{asset('/admin_upload/'.$hei_learning->image7??'')}}" alt="image"> </div>
          </div>
        </div>
  
  
  </div>
</div>
</section>


 



<section class="bd-testimonial-area p-relative theme-bg">
    <div class="bd-testimonial-video" data-background="{{asset('/admin_upload/'.$hei_learning->image8??'')}}">
       &nbsp;&nbsp;
    </div>
  
    <div class="container">
      <div class="row justify-content-end align-items-center">
        <div class="col-xxl-7 col-xl-6 col-lg-6">
          <div class="bd-testimonial-wrap section-space">
            <div class="bd-testimonial-shape-quote"> <img src="assets/images/shape/testimonial-quote-icon.webp" alt="shape"> </div>
            <div class="bd-section-title-wrapper section-title-space">  
              <h4 class="bd-policy-title text-white">{!!$hei_learning->title5??''!!}</h4>
            </div>
            <div class="swiper testimonialActiveFour">
              <div class="swiper-wrapper">
              
                @foreach($impact_stories as $impact_story)
                  
                    <div class="swiper-slide">    
                          <div class="bd-testimonial-content1">
                             <div class="midText">{!!$impact_story->story??''!!}</div>
                            <p class="text-end color1"> <b> {!!$impact_story->writer_name??''!!} </b> <br> {!!$impact_story->address??''!!}</p>
                        </div>
                  
                </div>
                  
                  @endforeach
                
                
              </div>
            </div>
	          </div>
        </div>
      </div>
    </div>
  </section>
 
</main>


<script>
  var swiper = new Swiper(".testimonialActiveFour", {
    loop: true,
    autoplay: {
      delay: 3000, // 3 seconds
      disableOnInteraction: false, // continues autoplay after interaction
    },
    slidesPerView: 1, // You can change this as needed
    spaceBetween: 20, // Optional spacing between slides
    // Add pagination or navigation if needed
  });
</script>



<script>
  // Get all video elements
  const videos = document.querySelectorAll('video');

  videos.forEach((video) => {
    video.addEventListener('play', () => {
      // Pause all other videos
      videos.forEach((v) => {
        if (v !== video) {
          v.pause();
        }
      });
    });
  });
</script>

<style type="text/css">
.bd-post-details-list ul li:not(:last-child) { margin-bottom: 20px; text-align: justify;}
.bd-testimonial-content1 p{color: #fff;font-weight: 300;letter-spacing: 1px;text-align: justify;}
.bd-testimonial-content1 p span{ color:#fff!important;}
.midText{ color:#fff;min-height: 220px;max-height: 220px;overflow: hidden;margin-bottom: 20px;}
.bd-testimonial-content1 .color1{color:#ffc107!important;}
.bd-testimonial-video::before {opacity: 0;}


 
.bd-counter-style-five {margin: 0 auto;position: relative;z-index: 10;display: grid;grid-template-columns: repeat(2, 1fr);justify-content: space-between;gap:30px 30px!important;}
.theme-bg-05 {padding: 30px;width: 100%;}

.learning-Visits{ background:#eee; padding:6% 0;}
.learning-Visits .bd-about-wrapper p{line-height: 32px; text-align: justify;}

.learning-Visits .bd-counter-style-five .bd-counter-content {/*clip-path: polygon(12% 0%, 100% 0%, 78% 100%, 0% 100%);border-radius: 0;padding: 20px 60px 10px 10px;border-left: 10px solid #951c4b;border-right: 10px solid #951c4b;*/ padding:20px;}
.learning-Visits .bd-counter-style-five .bd-counter-content:hover {transform: translate(0px, -20px);}
.learning-Visits .bd-counter-style-five .bd-counter-content {transition: all .3s ease-in-out;}

.bgWhite{background: #fff;padding: 20px;border-radius: 0;}
.learning-Visits .bd-counter-style-five .bd-counter-icon {width: 60px;height: 60px;background:#951c4b;font-size: 26px;margin-bottom: 5px;}
.learning-Visits .bd-counter-style-five .bd-counter-content h2 {margin-bottom: 0;font-size: 30px;}

.learning-Visits .bd-counter-content h5{ font-size:16px; font-weight:600;}

.bd-about-wrapper.style-one .bd-about-thumb-small::before {height: 275px;}


@media screen and (max-width: 767px) {
.learning-Visits .bd-counter-style-five .bd-counter-content {clip-path: none;border-radius: 0;padding: 10px;}



}
</style>
@endsection