@extends('frontend.layouts.main')
@section('content')
<style>
  .slick-prev:before {
    color: black;
    font-size: 20px;
}
  .slick-next:before {
    color: black;
    font-size: 20px;
}
button.slick-next.slick-arrow {
    background: #188ec9;
    height: 30px;
    width: 30px;
    border-radius: 50%;
}
button.slick-prev.slick-arrow {
    background: #188ec9;
    height: 30px;
    width: 30px;
    border-radius: 50%;
}
.slick-prev {
    left: -35px;
}
</style>
<section class="hero-section">
  <div class="container-fluid g-0">
    <div class="row g-0">
      <div class="col-lg-6 g-0">
        <div class="img-left ">
          @if ($headSec->images->count() > 0)
            <img class="main-img 1" src="{{ asset($headSec->images()->first()->image) }}">
          @else
            <img class="main-img" src="{{ asset('image/hero-left-img.png')}}">
          @endif
        </div>
      </div>
      <div class="col-lg-6 g-0">
        <div class="right-content">
          <div class="main-heading">{{$headSec->heading}}</div>
          <div class="sub-heading">{{$headSec->sub_heading}}</div>
          <div class="para">{!!$headSec->description!!}</div>
          <button type="button" class="btn btn-primary btn-lg contact contactBtn">Contact Us </button>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="service-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="services text-center">Services We Provide</div>
        <div class="para1 text-center">We understand the needs for professionalism, privacy and confidentiality in
          both<br>our relationship with our customers as well as your clients.</div>
      </div>
    </div>
    <div class="row justify-content-center service">
      <div class="col-lg-10">
        <div class="row">
          <div class="col-lg-6 mb-md-4">
            <div class="cards">
              <div class="card-body">
                <h5 class="card-title service-card-h">Biz Gurukul</h5>
                <p class=" para1 mt-0 mb-0">unit of Samadhan Samiti working under Public Private Partnership with the
                  Government. We help nurture the entrepreneurs virtually from the ideation....
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-6 mb-md-4">
            <div class="cards">
              <div class="card-body">
                <h5 class="card-title service-card-h">Business Ideas</h5>
                <p class=" para1 mt-0 mb-0">unit of Samadhan Samiti working under Public Private Partnership with the
                  Government. We help nurture the entrepreneurs virtually from the ideation....
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-6 mb-md-4">
            <div class="cards">
              <div class="card-body">
                <h5 class="card-title service-card-h">Motivation</h5>
                <p class=" para1 mt-0 mb-0">unit of Samadhan Samiti working under Public Private Partnership with the
                  Government. We help nurture the entrepreneurs virtually from the ideation....
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-6 mb-md-4">
            <div class="cards">
              <div class="card-body">
                <h5 class="card-title service-card-h">Podcast</h5>
                <p class=" para1 mt-0 mb-0">unit of Samadhan Samiti working under Public Private Partnership with the
                  Government. We help nurture the entrepreneurs virtually from the ideation....
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-6 mb-md-4">
            <div class="cards ">
              <div class="card-body">
                <h5 class="card-title service-card-h">Event</h5>
                <p class=" para1 mt-0 mb-0">unit of Samadhan Samiti working under Public Private Partnership with the
                  Government. We help nurture the entrepreneurs virtually from the ideation....
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-6 mb-md-4">
            <div class="cards ">
              <div class="card-body">
                <h5 class="card-title service-card-h">Social</h5>
                <p class=" para1 mt-0 mb-0">unit of Samadhan Samiti working under Public Private Partnership with the
                  Government. We help nurture the entrepreneurs virtually from the ideation....
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="multy-video-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="video-left-content">
          <div class="video-left-heading">{{$instSec->heading}}</div>
          <div class="text-white">
              {!!$instSec->description!!}
            </div>
          <h3 class="video-sub-heading">{{$instSec->short_description}}</h3>
        </div>
        <div class="contact-details d-flex">
          <i class="fa-solid fa-square-phone"></i>
          <div class="contact-address ms-2">
            <p class="para2 mb-0 mt-0">Contact us</p>
            <div class="mobile">+91 840 099 9161</div>
          </div>
        </div>

      </div>
      <div class="col-lg-6">
        <div class="multy-images d-md-block d-none">
        @if($instSec->images->count() > 0)
          @foreach ($instSec->images as $image)
            <img src="{{ asset($image->image)}}" class="img-fluid img-{{$loop->iteration}} o" alt="...">
          @endforeach
        @else
        <img src="{{ asset('image/image-vd-1.png.png')}}" class="img-fluid img-1" alt="...">
        <img src="{{ asset('image/Rectangle 14.png')}}" class="img-fluid img-2" alt="...">
        <img src="{{ asset('image/image-vd-3.png.png')}}" class="img-fluid img-3" alt="...">
        <img src="{{ asset('image/image-vd-4.png.png')}}" class="img-fluid img-4" alt="...">
        @endif
          <div class="video-icon">
            <a href="https://www.youtube.com/watch?v=TRa5kNMgsjM"><i class="fa-solid fa-circle-play"></i></a>

            <!-- Button trigger modal -->
            <!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                Launch demo modal
              </button> -->

            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
              aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    ...
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>


          </div>
        </div>
        <div class="multy-images d-md-none d-block">
          @if($instSec->images->count() > 0)
            @foreach ($instSec->images as $image)
              <img src="{{ asset($image->image)}}" class="img-fluid img-{{$loop->iteration}} o" alt="...">
            @endforeach
          @else
          {{-- <img src="{{ asset('image/multy-img.png')}}" class="img-fluid img-1" alt="..."> --}}
          {{-- <img src="{{ asset('image/Rectangle 14.png')}}" class="img-fluid img-2" alt="...">
          <img src="{{ asset('image/image-vd-3.png.png')}}" class="img-fluid img-3" alt="...">
          <img src="{{ asset('image/image-vd-4.png.png')}}" class="img-fluid img-4" alt="..."> --}}
          @endif
            <div class="video-icon">
              <a href="https://www.youtube.com/watch?v=TRa5kNMgsjM"><i class="fa-solid fa-circle-play"></i></a>
  
              <!-- Button trigger modal -->
              <!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                  Launch demo modal
                </button> -->
  
              <!-- Modal -->
              <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      ...
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>
  
  
            </div>
          </div>
      </div>

    </div>

  </div>

</section>
<section class="video-slider">
  <div class="container">
    <div class="row">
        <div class="services text-center mb-4">
          Video
        </div>
      <div class="col-md-12">
        <div class="responsive">
        @foreach ($videos as $video)
          <div>
            <div class="video-slider-block">
              <div class="video-slider-inner-item">
                <iframe width="100%" height="300" src="https://www.youtube.com/embed/{{$video->link}}"
                  title="{{$video->title}}" 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>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</section>
<section class="counter-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-6">
        <div class="counter-details d-flex">
          <i class="fa-solid fa-scale-balanced"></i>
          <div class="contact-address ms-4">
            <p class="counter-no mb-0 mt-0">30</p>
            <div class="counter-name">Experience</div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-6">
        <div class="counter-details d-flex">
          <i class="fa-solid fa-user-pen"></i>
          <div class="contact-address ms-4">
            <p class="counter-no mb-0 mt-0">750</p>
            <div class="counter-name">Project Done</div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-6">
        <div class="counter-details d-flex">
          <i class="fa-solid fa-user-tie"></i>
          <div class="contact-address ms-4">
            <p class="counter-no mb-0 mt-0">53</p>
            <div class="counter-name">Co-Operate</div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-6">
        <div class="counter-details d-flex">
          <i class="fa-solid fa-users"></i>
          <div class="contact-address ms-4">
            <p class="counter-no mb-0 mt-0">15</p>
            <div class="counter-name">Customers </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>
{{--<section class="slider-section">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="single-item">
          <div class="slider-item">
            <div class="slider-card">
              <div class="row">
                <div class="col-lg-6">
                  <div class="slider-left-img">
                    <img src="{{ asset('image/testimonial-img.png')}}" class="" alt="">
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="slider-right-content">
                    <div class="slider-content-h">What Our Clients Says </div>
                    <div class="slider-content-p">
                      It is a long established fact that a reader will be distracted by the readable<br>content of a
                      page when looking at its layout.
                    </div>
                    <div class="slider-content-p">

                      Mike Wilson was great to work with. He set expectations from the beginning<br>
                      and answered my many questions throughout the process. He always took his<br>
                      time to talk to me, and never made me feel like I was being rushed to make a<br>
                      decision. I would absolutely do business with Mike again in the future.
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-lg-6">
                      <div class="slider-content-name">
                        Dazy Joy
                      </div>
                      <div class="slider-content-designation">
                        Accountant
                      </div>
                    </div>
                    <div class="col-lg-6 justify-content-center">
                      <div class="slider-content-right-icon text-center">
                        <i class="fa-solid fa-quote-right"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="slider-item">
              <div class="slider-card">
                <div class="row">
                  <div class="col-lg-6">
                    <div class="slider-left-img">
                      <img src="{{ asset('image/testimonial-img.png')}}" class="" alt="">
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="slider-right-content">
                      <div class="slider-content-h">What Our Clients Says </div>
                      <div class="slider-content-p">
                        It is a long established fact that a reader will be distracted by the readable<br>content of a
                        page when looking at its layout.
                      </div>
                      <div class="slider-content-p">

                        Mike Wilson was great to work with. He set expectations from the beginning<br>
                        and answered my many questions throughout the process. He always took his<br>
                        time to talk to me, and never made me feel like I was being rushed to make a<br>
                        decision. I would absolutely do business with Mike again in the future.
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-6">
                        <div class="slider-content-name">
                          Dazy Joy
                        </div>
                        <div class="slider-content-designation">
                          Accountant
                        </div>
                      </div>
                      <div class="col-lg-6 justify-content-center">
                        <div class="slider-content-right-icon text-center">
                          <i class="fa-solid fa-quote-right"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="slider-item">
              <div class="slider-card">
                <div class="row">
                  <div class="col-lg-6">
                    <div class="slider-left-img">
                      <img src="{{ asset('image/testimonial-img.png')}}" class="" alt="">
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="slider-right-content">
                      <div class="slider-content-h">What Our Clients Says </div>
                      <div class="slider-content-p">
                        It is a long established fact that a reader will be distracted by the readable<br>content of a
                        page when looking at its layout.
                      </div>
                      <div class="slider-content-p">

                        Mike Wilson was great to work with. He set expectations from the beginning<br>
                        and answered my many questions throughout the process. He always took his<br>
                        time to talk to me, and never made me feel like I was being rushed to make a<br>
                        decision. I would absolutely do business with Mike again in the future.
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-6">
                        <div class="slider-content-name">
                          Dazy Joy
                        </div>
                        <div class="slider-content-designation">
                          Accountant
                        </div>
                      </div>
                      <div class="col-lg-6 justify-content-center">
                        <div class="slider-content-right-icon text-center">
                          <i class="fa-solid fa-quote-right"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
</section>--}}
<section class="slider-section">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="single-item">
          @foreach ($testimonials as $testimonial)   
          <div>
            <div class="slider-item">
              <div class="slider-card">
                <div class="row">
                  <div class="col-lg-6 ">
                    <div class="slider-left-img">
                      <img src="{{ asset($testimonial->image)}}" class="" alt="">
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="slider-right-content">
                      <div class="slider-content-h 1">{{$testimonial->title}}</div>
                      <div class="slider-content-p 1">
                          {!!$testimonial->description!!}
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-6 col-6">
                        <div class="slider-content-name 1">
                        {{$testimonial->client}}
                        </div>
                        <div class="slider-content-designation 1">
                        {{$testimonial->designation}}
                        </div>
                      </div>
                      <div class="col-lg-6 col-6 justify-content-center">
                        <div class="slider-content-right-icon text-center">
                          <i class="fa-solid fa-quote-right"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          @endforeach
        </div>
      </div>
</section>
<section class="faq-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-5">
        <div class="contact-form-inner">
          <div class="main-h-faq">Free Consultation</div>
            <form id="contactForm" method="POST" action="{{ route('contact.store') }}">
              @csrf
              <div class="row">
                <div class="col-lg-6">
                  <div class="form-outline">
                    <input type="text" id="name" class="form-control form-control-lg" name="name" placeholder="Name" required />
                    <label class="form-label" for="name"> </label>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-outline">
                    <input type="email" id="email" class="form-control form-control-lg" name="email" placeholder="Email" required/>
                    <label class="form-label" for="email"></label>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-outline">
                    <input type="tel" maxlength="10" class="form-control form-control-lg" name="number" placeholder="Mobile" oninput="this.value = this.value.replace(/[^0-9]/g, '');" />
                    <label class="form-label" for="number"></label>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-outline">
                    <input type="text" id="address" class="form-control form-control-lg" name="address" placeholder="Address" />
                    <label class="form-label" for="address"></label>
                  </div>
                </div>
                <div class="col-lg-12">
                  <span class="wpcf7-form-control-wrap" data-name="your-message"><textarea cols="40" rows="10"
                      class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Your Message"
                      name="message" ></textarea></span>
                </div>
                <button type="submit" class="btn btn-primary btn-lg faq">Contact Us </button>
              </div>
            </form>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="faq-right-h"> Frequently Asked Questions</div>


        <div class="faq-question">
          <div class="accordion accordion-flush" id="accordionFlushExample">
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                  Why should I trust your firm for my case?
                </button>
              </h2>
              <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
                data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">We understand the importance of approaching each work integrally and
                  believe in the power of simple and easy communication. Intime is a design studio founded in London
                  and expanded our services, and become a multinational firm, offering solutions Worldwide. Our team
                  have designed game changing products, consulted for companies as well.</div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header mt-4" id="flush-headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                  Why should I trust your firm for my case?
                </button>
              </h2>
              <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
                data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">We understand the importance of approaching each work integrally and
                  believe in the power of simple and easy communication. Intime is a design studio founded in London
                  and expanded our services, and become a multinational firm, offering solutions Worldwide. Our team
                  have designed game changing products, consulted for companies as well.</div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header mt-4" id="flush-headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                  Why should I trust your firm for my case?
                </button>
              </h2>
              <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
                data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">We understand the importance of approaching each work integrally and
                  believe in the power of simple and easy communication. Intime is a design studio founded in London
                  and expanded our services, and become a multinational firm, offering solutions Worldwide. Our team
                  have designed game changing products, consulted for companies as well.
                  We understand the importance of approaching each work integrally and believe in the power of
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="Blog-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="services text-center">Latest Blogs</div>
        <div class="para1 text-center">Follow our latest blog and thoughts which focuses exclusively on design,<br>
          vintage, and also our latest work updates.</div>
      </div>
    </div>
    <div class="row justify-content-center mt-4">
      <div class="col-lg-10">
        <div class="row ">
          @foreach ($blogs as $blog)
            <div class="col-lg-4 mb-3">
              <div class="card d-block-card">
                <img src="{{ asset($blog->thumbnail)}}" class="card-img-top" alt="...">
                <div class="card-body blog">
                  <div class="d-flex">
                    <span class=""> <i class="fa-solid fa-calendar-days blog"></i></span>
                    <p class=" icon-name">{{date("M d Y",strtotime($blog->created_at))}}</p>

                    <span class=""><i class="fa-solid fa-user admin"></i></span>
                    <p class="icon-name">{{$blog->author_name}}</p>

                  </div>
                  <hr class="line mt-2 mb-0">
                  <div class="card-heading"><a href="{{route('frontend.blog-detail.index',$blog->slug)}}">{{$blog->title}}</a></div>
                    {{--!!$blog->description!!--}}
                    {{ substr(strip_tags($blog->description), 0, 200) }}{{ strlen(strip_tags($blog->description)) > 200 ? '...' : '' }}
                  <hr class="line mt-0 mb-0">
                  <div class=" read-more d-flex">
                    <a href="{{route('frontend.blog-detail.index',$blog->slug)}}" class="read-btn">Read more<span><i class="fa-solid fa-arrow-right"></i></span></a>
                    <!-- <p class=" coments">Comments (3)</p> -->
                  </div>

                </div>
              </div>
            </div>
          @endforeach
          <div class="col-md-12 mt-4 d-flex justify-content-center">
            {{--$blogs->links('pagination::bootstrap-4')--}}
            <a href="{{route('frontend.blog.index')}}" class="btn btn-primary ">View All</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="happy-discuss">
  <div class="container">
    <div class="row">
      <div class="col-lg-9">
        <div class="happy-content">
          <h1 class="happy-h"> Let's Start Something Great!</h1>
          <p class="para2">We understand the needs for professionalism, privacy and confidentiality in both our<br>
            relationship with our customers as well as your clients.</p>
        </div>
      </div>
      <div class="col-lg-3">
        <button type="button" class="btn btn-primary contactBtn">Contact Us</button>
      </div>
    </div>
  </div>
</section>
@endsection
<!-- Push script to layout -->
@push('scripts')
<script>
  $('.responsive').slick({
  dots: true,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 2000,
  slidesToShow: 4,
  slidesToScroll: 4, 
  arrows: true,
  
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true,
        autoplay: true,
        autoplaySpeed: 2000,
      }
    },
    {
      breakpoint: 600,
      settings: {
        // slidesToShow: 2,
        // slidesToScroll: 2,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
</script>
<script>
  $("body").on("click",".contactBtn",function(){
      window.location.href = "{{route('contact.index')}}";
  });
</script>
@endpush
<!-- Push script to layout -->