@include('htmlpage.frontent.layout.app')
<main class="main">
  <div class="modal fade" id="ModalApplyJobForm" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
      <div class="modal-content apply-job-form">
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="modal-body pl-30 pr-30 pt-50 activetab">
          <!-- OTP Verification Section -->
          <div id="otp-verification-section">
            <h2 class="mt-30 mb-5 text-brand-1 text-capitalize text-center">
              Please enter your email to receive an OTP for verification:
            </h2>
            <form id="otp-form" class="login-register text-start mt-20 pb-30" action="#">
              <div class="form-group">
                <label class="form-label" for="email">Email *</label>
                <input
                  class="form-control"
                  id="email"
                  type="email"
                  required
                  name="email"
                  placeholder="mail@zillionit.com"
                />
              </div>
              <div class="col-md-12 mt-30">
                <button class="btn btn-default hover-up w-100" type="submit">Send OTP</button>
              </div>
            </form>
          </div>

          <!-- Nav tabs -->
          <ul class="nav nav-tabs mt-4" id="myTab" role="tablist" style="display: none">
            <li class="nav-item" role="presentation">
              <a
                class="nav-link active"
                id="form1-tab"
                data-bs-toggle="tab"
                href="#form1"
                role="tab"
                aria-controls="form1"
                aria-selected="true"
              >
                <i class="fi fi-rr-phone-call"></i> Call me now
              </a>
            </li>
            <li class="nav-item" role="presentation">
              <a
                class="nav-link"
                id="form2-tab"
                data-bs-toggle="tab"
                href="#form2"
                role="tab"
                aria-controls="form2"
                aria-selected="false"
              >
                <i class="fi fi-rr-calendar"></i> Call me later
              </a>
            </li>
            <li class="nav-item" role="presentation">
              <a
                class="nav-link"
                id="form3-tab"
                data-bs-toggle="tab"
                href="#form3"
                role="tab"
                aria-controls="form3"
                aria-selected="false"
              >
                <i class="fi fi-rr-comment"></i> Leave a message
              </a>
            </li>
            <li class="nav-item" role="presentation">
              <a
                class="nav-link"
                id="form4-tab"
                data-bs-toggle="tab"
                href="#form4"
                role="tab"
                aria-controls="form4"
                aria-selected="false"
              >
                <i class="fi fi-rr-edit"></i> Schedule a meeting
              </a>
            </li>
          </ul>

          <!-- Tab content -->
          <div class="tab-content mt-3" id="myTabContent" style="display: none">
            <div class="tab-pane fade show active" id="form1" role="tabpanel" aria-labelledby="form1-tab">
              <!-- Existing content for Form 1 -->
              <div class="text-center">
                <h2 class="mt-30 mb-5 text-brand-1 text-capitalize">
                  Would you like to receive a free callback in 1 hours?
                </h2>
              </div>
              <form class="login-register text-start mt-20 pb-30" action="#">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="form-label" for="phone1">Contact Number *</label>
                      <input
                        class="form-control"
                        id="phone1"
                        type="text"
                        required=""
                        name="phone"
                        placeholder="(+01) 234 567 89"
                      />
                    </div>
                  </div>
                  <div class="col-md-6 mt-30">
                    <button class="btn btn-default hover-up w-100" type="submit">Submit</button>
                  </div>
                </div>
              </form>
              <div class="text-muted text-center">
                Do you need support? <a href="#">Contact Us</a>
                <p class="font-sm text-muted mb-30">Your phone number will not be used for marketing purposes</p>
              </div>
            </div>
            <div class="tab-pane fade" id="form2" role="tabpanel" aria-labelledby="form2-tab">
              <!-- Existing content for Form 2 -->
              <h2 class="mt-30 mb-25 text-brand-1 text-capitalize text-center">
                Choose the best time for the callback:
              </h2>
              <form class="login-register text-start mt-20 pb-30" action="#">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <input
                        class="form-control"
                        id="phone1"
                        type="text"
                        required
                        name="phone"
                        placeholder="(+01) 234 567 89"
                      />
                    </div>
                  </div>

                  <!-- Day selection dropdown -->
                  <div class="col-md-6">
                    <div class="form-group">
                      <select class="form-control" id="day" name="day" required>
                        <option value="">Select a day</option>
                        <option value="today">Today</option>
                        <option value="tomorrow">Tomorrow</option>
                        <option value="next-week">Next Week</option>
                        <option value="specific-date">Specific Date</option>
                      </select>
                    </div>
                  </div>

                  <!-- Time selection dropdown -->
                  <div class="col-md-6">
                    <div class="form-group">
                      <select class="form-control" id="time" name="time" required>
                        <option value="">Select a time</option>
                        <option value="morning">Morning (9 AM - 12 PM)</option>
                        <option value="afternoon">Afternoon (12 PM - 3 PM)</option>
                        <option value="evening">Evening (3 PM - 6 PM)</option>
                        <option value="night">Night (6 PM - 9 PM)</option>
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <button class="btn btn-default hover-up w-100" type="submit">Call me later</button>
                  </div>
                </div>
              </form>

              <div class="text-muted text-center">
                Do you need support? <a href="#">Contact Us</a>
                <p class="font-sm text-muted mb-30">Your phone number will not be used for marketing purposes</p>
              </div>
            </div>
            <div class="tab-pane fade" id="form3" role="tabpanel" aria-labelledby="form3-tab">
              <!-- Existing content for Form 3 -->
              <h2 class="mt-30 mb-25 text-brand-1 text-capitalize text-center">
                Leave your message and we will contact you as soon as possible
              </h2>
              <form class="login-register text-start mt-20 pb-30" action="#">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <textarea
                        name="message"
                        id="message"
                        cols="20"
                        rows="5"
                        placeholder="Type your message here"
                      ></textarea>
                    </div>
                  </div>
                  <!-- Time selection dropdown -->
                  <div class="col-md-6">
                    <div class="form-group">
                      <input
                        class="form-control"
                        id="name"
                        type="text"
                        required
                        name="name"
                        placeholder="Enter Your Name"
                      />
                    </div>
                    <div class="form-group">
                      <input
                        class="form-control"
                        id="phone1"
                        type="text"
                        required
                        name="phone"
                        placeholder="(+01) 234 567 89"
                      />
                    </div>
                    {{--
                    <div class="form-group">
                      <input
                        class="form-control"
                        id="email"
                        type="email"
                        required
                        name="email"
                        placeholder="mail@zillionit.com"
                      />
                    </div>
                    --}}
                    <button class="btn btn-default hover-up w-100" type="submit">Submit</button>
                  </div>
                </div>
              </form>
              <div class="text-muted text-center">
                Do you need support? <a href="#">Contact Us</a>
                <p class="font-sm text-muted mb-30">Your phone number will not be used for marketing purposes</p>
              </div>
            </div>
            <div class="tab-pane fade" id="form4" role="tabpanel" aria-labelledby="form4-tab">
              <!-- Existing content for Form 4 -->
              <h2 class="mt-30 mb-25 text-brand-1 text-capitalize text-center">Book a free meeting</h2>
              <p class="text-center">
                A member of our team will talk with you, understanding your requirements and demonstrate how our
                services can help!
              </p>
              <form class="login-register text-start mt-20 pb-30" action="#">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="form-label" for="phone1">First Name *</label>
                      <input
                        class="form-control"
                        id="fname"
                        type="text"
                        required
                        name="First Name"
                        placeholder="Zillion IT Solutions"
                      />
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="form-label" for="phone1">Last Name *</label>
                      <input
                        class="form-control"
                        id="lname"
                        type="text"
                        required
                        name="lname"
                        placeholder="Zillion IT Solutions"
                      />
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="form-label" for="phone1">Company Email *</label>
                      <input
                        class="form-control"
                        id="email"
                        type="email"
                        required
                        name="email"
                        placeholder="mail@zillionit.com"
                      />
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="form-label" for="phone1">Phone Number *</label>
                      <input
                        class="form-control"
                        id="phone1"
                        type="text"
                        required
                        name="phone"
                        placeholder="(+01) 234 567 89"
                      />
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="form-label" for="phone1">Company Name *</label>
                      <input
                        class="form-control"
                        id="cname"
                        type="text"
                        required
                        name="cname"
                        placeholder="Zillion IT Solutions"
                      />
                    </div>
                  </div>
                  <!-- Day selection dropdown -->
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="form-label" for="phone1">Company Size *</label>
                      <select class="form-control" id="day" name="day" required>
                        <option value="">Choose Your Company Size</option>
                        <option value="1 - 10 employee">1 - 10 employee</option>
                        <option value="1 - 10 employee">10 - 20 employee</option>
                        <option value="1 - 10 employee">20 - 30 employee</option>
                        <option value="1 - 10 employee">30 - 40 employee</option>
                      </select>
                    </div>
                  </div>

                  <!-- Time selection dropdown -->

                  <div class="col-md-12 text-center">
                    <p class="pb-15">You will be able to select date and time on the next step.</p>
                    <button class="btn btn-default hover-up w-100" type="submit">Schedule Your Meeting</button>
                  </div>
                </div>
              </form>

              <div class="text-muted text-center">
                Do you need support? <a href="#">Contact Us</a>
                <p class="font-sm text-muted mb-30">Your phone number will not be used for marketing purposes</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.getElementById('otp-form').addEventListener('submit', function (event) {
      event.preventDefault(); // Prevent default form submission

      // Assuming OTP sending and verification is done here
      const email = document.getElementById('email').value;

      // AJAX request to send OTP (pseudo-code)
      // sendOtp(email).then(response => {
      //     if (response.success) {
      //         // Show tabs and tab content
      //         document.querySelector('ul#myTab').style.display = 'block';
      //         document.querySelector('div#myTabContent').style.display = 'block';
      //         document.getElementById('otp-verification-section').style.display = 'none';
      //     } else {
      //         alert('Failed to send OTP. Please try again.');
      //     }
      // });

      // Simulate successful OTP verification for demonstration
      setTimeout(() => {
        // Show tabs and tab content
        document.querySelector('ul#myTab').style.display = 'block';
        document.querySelector('div#myTabContent').style.display = 'block';
        document.getElementById('otp-verification-section').style.display = 'none';
      }, 1000);
    });
  </script>

  <section class="section-box-2">
    <div class="container">
      <div class="banner-hero banner-image-single">
        <img src="{{ asset('storage/' . $service->image_path) }}" alt="{{ $service->alt }}" />
      </div>
      <div class="row mt-10">
        <div class="col-lg-8 col-md-12">
          <h3 class="pb-3">{{ $service->page_name }}</h3>
          <p>{!! $service->content !!}</p>
        </div>
        <div class="col-lg-4 col-md-12 text-lg-end">
          <div
            class="btn btn-apply-icon btn-apply btn-apply-big hover-up"
            data-bs-toggle="modal"
            data-bs-target="#ModalApplyJobForm"
          >
            Request A Free Quote
          </div>
        </div>
      </div>
      <div class="border-bottom pt-10 pb-10"></div>
    </div>
  </section>
  <section class="section-box mt-50">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-12 col-sm-12 col-12">
          {{-- exp --}}
          <div class="row">
            <h5 class="border-bottom pb-15 mb-30">{{ $service->section1_heading }}</h5>
            <p class="mb-30">{{ $service->section1_content }}</p>
            @foreach ($expertise as $ex)
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
              <div class="card-grid-2 hover-up">
                <div class="card-grid-2-image-left">
                  <span class="flash"></span>
                  <div class="image-box">
                    <img src="{{ asset('images/expertise.png') }}" alt="Zillion" width="50" />
                  </div>
                  <div class="right-info">
                    <a class="name-job" href="company-details.html">{{ $ex->title }}</a>
                  </div>
                </div>
                <div class="card-block-info">
                  <p class="font-sm color-text-paragraph">
                    {{ $ex->content }}
                  </p>
                </div>
              </div>
            </div>
            @endforeach
          </div>
          {{-- /end --}}
          <div class="job-overview">
            <h5 class="border-bottom pb-15 mb-30">{{ $service->section2_heading }}</h5>
            <p class="mb-30">{{ $service->section2_content }}</p>
            <div class="content-single1">
              <div class="services">
                <div class="container">
                  <div class="row">
                    <!-- Left column: Display first 3 dynamic services -->
                    <div class="col-md-4">
                      @foreach ($types->take(3, 3) as $type)
                      <!-- Loop through the first 3 items -->
                      <div class="services-box">
                        <span class="icon"><i class="fa fi {{ $type->icon }}"></i></span>
                        <!-- Dynamic Icon -->
                        <div class="service-content">
                          <h4>{{ $type->title }}</h4>
                          <!-- Dynamic Title -->
                          <p>{{ $type->content }}</p>
                          <!-- Dynamic Description -->
                        </div>
                        <!-- .Service-content ends here -->
                      </div>
                      <!-- .Services-box ends here -->
                      @endforeach
                    </div>
                    <!-- .Col-md-4 ends here -->

                    <!-- Center column: Static image -->
                    <div class="col-md-4 text-center">
                      <img class="img-responsive" src="{{ asset('images/center.jpg') }}" alt="" />
                    </div>
                    <!-- .Col-md-4 ends here -->

                    <!-- Right column: Display next 3 dynamic services -->
                    <div class="col-md-4">
                      @foreach ($types->slice(3, 3) as $type)
                      <!-- Loop through the next 3 items -->
                      <div class="services-box">
                        <span class="icon"><i class="fa fi {{ $type->icon }}"></i></span>
                        <!-- Dynamic Icon -->
                        <div class="service-content">
                          <h4>{{ $type->title }}</h4>
                          <!-- Dynamic Title -->
                          <p>{{ $type->content }}</p>
                          <!-- Dynamic Description -->
                        </div>
                        <!-- .Service-content ends here -->
                      </div>
                      <!-- .Services-box ends here -->
                      @endforeach
                    </div>
                    <!-- .Col-md-4 ends here -->
                  </div>
                  <!-- .Row ends here -->
                </div>
              </div>
              {{-- process --}}
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 col-sm-12 col-12 pl-40 pl-lg-15 mt-lg-30">
          <div class="sidebar-border">
            <h6 class="f-18">Technologies and Platforms we use</h6>
            <div class="sidebar-list-job">
              <ul>
                <ul>
                  @foreach ($usedtechnologies as $technology)
                  <li>
                    <div class="card-list-4 wow animate__animated animate__fadeIn hover-up">
                      <div class="image">
                        <a href="#">
                          <img src="{{ asset('storage/' . $technology->image_path) }}" alt="{{ $technology->alt }}" />
                        </a>
                      </div>
                      <div class="info-text">
                        <h5 class="font-md font-bold color-brand-1">
                          <a href="#">{{ $technology->technology }}</a>
                        </h5>
                        <div class="mt-5">
                          <div class="row">
                            <div class="col-6">
                              <img alt="Zillion" src="{{ asset('img/star.svg') }}" />
                              <img alt="Zillion" src="{{ asset('img/star.svg') }}" />
                              <img alt="Zillion" src="{{ asset('img/star.svg') }}" />
                              <img alt="Zillion" src="{{ asset('img/star.svg') }}" />
                              <img alt="Zillion" src="{{ asset('img/star.svg') }}" />
                            </div>
                            <div class="col-6 text-end">
                              <span class="card-briefcase">New York, US</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  @endforeach
                </ul>
              </ul>
            </div>
          </div>
          <div class="sidebar-border">
            <h6 class="f-18 mb-5">{{ $service->section3_heading }}</h6>
            <div class="sidebar-list-job">
              <div class="timeline">
                @foreach ($process as $pro)
                <!-- Dynamic Step -->
                <div class="timeline-step mb-5">
                  <div class="timeline-content">
                    <h6 class="pb-2">{{ $pro->title }}</h6>
                    <!-- Dynamic step number -->
                    <p class="color-text-paragraph-2">
                      {{ $pro->content }}
                      <!-- Assuming `description` is a field from the `$process` data -->
                    </p>
                  </div>
                </div>
                @endforeach
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section-box bg-15 pt-50 pb-50">
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <h5 class="border-bottom pb-15 mb-30">{{ $service->section4_heading }}</h5>
          <p class="mb-30">{{ $service->section4_content }}</p>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 text-center mb-30">
          <img class="img-job-search mt-20" src="{{ asset('images/img-job-search.png') }}" alt="Zillion" />
        </div>
        <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 servicelistpage">
          <div class="accordion" id="accordionExample">
            <div class="accordion" id="accordionExample">
              @foreach ($services as $key => $serv)
              <div class="accordion-item">
                <h2 class="accordion-header" id="heading{{ $key }}">
                  <button
                    class="accordion-button {{ $key === 0 ? '' : 'collapsed' }}"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapse{{ $key }}"
                    aria-expanded="{{ $key === 0 ? 'true' : 'false' }}"
                    aria-controls="collapse{{ $key }}"
                  >
                    {{ $serv->title }}
                    <!-- Assuming `title` is a field from the service -->
                  </button>
                </h2>
                <div
                  id="collapse{{ $key }}"
                  class="accordion-collapse collapse {{ $key === 0 ? 'show' : '' }}"
                  aria-labelledby="heading{{ $key }}"
                  data-bs-parent="#accordionExample"
                >
                  <div class="accordion-body">
                    {!! $serv->content !!}
                    <!-- Displaying rich text content here -->
                  </div>
                </div>
              </div>
              @endforeach
            </div>
          </div>
        </div>

        <div class="single-apply-jobs">
          <div class="row align-items-center">
            <div class="col-md-5">
              <a class="btn btn-default mr-15" href="#" data-bs-toggle="modal" data-bs-target="#ModalApplyJobForm">
                Request A Quote</a
              >
            </div>
            <div class="col-md-7 text-lg-end social-share">
              <h6 class="color-text-paragraph-2 d-inline-block d-baseline mr-10">Share this</h6>
              <a class="mr-5 d-inline-block d-middle" href="#"
                ><img alt="Zillion" src="{{ asset('img/share-fb.svg') }}" /></a
              ><a class="mr-5 d-inline-block d-middle" href="#"
                ><img alt="Zillion" src="{{ asset('img/share-tw.svg') }}" /></a
              ><a class="mr-5 d-inline-block d-middle" href="#"
                ><img alt="Zillion" src="{{ asset('img/share-red.svg') }}" /></a
              ><a class="d-inline-block d-middle" href="#"
                ><img alt="Zillion" src="{{ asset('img/share-whatsapp.svg') }}"
              /></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="section-box mt-50 mb-50">
    <div class="container">
      <div class="text-left">
        <h2
          class="section-title mb-10 wow animate__animated animate__fadeInUp"
          style="visibility: hidden; animation-name: none"
        >
          Latest Blog
        </h2>
        <p
          class="font-lg color-text-paragraph-2 wow animate__animated animate__fadeInUp"
          style="visibility: hidden; animation-name: none"
        >
          Get the latest news, updates and tips
        </p>
      </div>
      <div class="mt-50">
        <div class="box-swiper style-nav-top">
          <div
            class="swiper-container swiper-group-4 swiper swiper-initialized swiper-horizontal swiper-pointer-events"
          >
            <div
              class="swiper-wrapper pb-10 pt-5"
              style="transform: translate3d(-1695px, 0px, 0px); transition-duration: 0ms"
              id="swiper-wrapper-32ef9f08e7cc56f6"
              aria-live="off"
            >
              <div
                class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev"
                data-swiper-slide-index="0"
                style="width: 309px; margin-right: 30px"
                role="group"
                aria-label="1 / 4"
              >
                <div class="card-grid-5">
                  <div
                    class="card-grid-5 hover-up"
                    style="background-image: url('{{ asset('images/blog/img-big1.png') }}')"
                  >
                    <a href="blog-details.html">
                      <div class="box-cover-img">
                        <div class="content-bottom">
                          <h3 class="color-white mb-20">11 Tips to Help You Get New Clients</h3>
                          <div class="author d-flex align-items-center mr-20">
                            <img class="mr-10" alt="Zillion" src="{{ asset('img/user4.png') }}" /><span
                              class="color-white font-sm mr-25"
                              >Azumi Rose</span
                            ><span class="color-white font-sm">25 April 2022</span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active"
                data-swiper-slide-index="1"
                style="width: 309px; margin-right: 30px"
                role="group"
                aria-label="2 / 4"
              >
                <div class="card-grid-5">
                  <div
                    class="card-grid-5 hover-up"
                    style="background-image: url('{{ asset('images/blog/img-big2.png') }}')"
                  >
                    <a href="blog-details.html">
                      <div class="box-cover-img">
                        <div class="content-bottom">
                          <h3 class="color-white mb-20">11 Tips to Help You Get New Clients</h3>
                          <div class="author d-flex align-items-center mr-20">
                            <img class="mr-10" alt="Zillion" src="{{ asset('img/user4.png') }}" /><span
                              class="color-white font-sm mr-25"
                              >Azumi Rose</span
                            ><span class="color-white font-sm">25 April 2022</span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next"
                data-swiper-slide-index="2"
                style="width: 309px; margin-right: 30px"
                role="group"
                aria-label="3 / 4"
              >
                <div class="card-grid-5">
                  <div
                    class="card-grid-5 hover-up"
                    style="background-image: url('{{ asset('images/blog/img-big3.png') }}')"
                  >
                    <a href="blog-details.html">
                      <div class="box-cover-img">
                        <div class="content-bottom">
                          <h3 class="color-white mb-20">11 Tips to Help You Get New Clients</h3>
                          <div class="author d-flex align-items-center mr-20">
                            <img class="mr-10" alt="Zillion" src="{{ asset('img/user4.png') }}" /><span
                              class="color-white font-sm mr-25"
                              >Azumi Rose</span
                            ><span class="color-white font-sm">25 April 2022</span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide swiper-slide-duplicate"
                data-swiper-slide-index="3"
                style="width: 309px; margin-right: 30px"
                role="group"
                aria-label="4 / 4"
              >
                <div class="card-grid-5">
                  <div
                    class="card-grid-5 hover-up"
                    style="background-image: url(' {{ asset('images/blog/img-big1.png') }}')"
                  >
                    <a href="blog-details.html">
                      <div class="box-cover-img">
                        <div class="content-bottom">
                          <h3 class="color-white mb-20">11 Tips to Help You Get New Clients</h3>
                          <div class="author d-flex align-items-center mr-20">
                            <img class="mr-10" alt="Zillion" src="{{ asset('img/user4.png') }}" /><span
                              class="color-white font-sm mr-25"
                              >Azumi Rose</span
                            ><span class="color-white font-sm">25 April 2022</span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide swiper-slide-prev"
                data-swiper-slide-index="0"
                style="width: 309px; margin-right: 30px"
                role="group"
                aria-label="1 / 4"
              >
                <div class="card-grid-5">
                  <div
                    class="card-grid-5 hover-up"
                    style="background-image: url(' {{ asset('images/blog/img-big2.png') }}')"
                  >
                    <a href="blog-details.html">
                      <div class="box-cover-img">
                        <div class="content-bottom">
                          <h3 class="color-white mb-20">11 Tips to Help You Get New Clients</h3>
                          <div class="author d-flex align-items-center mr-20">
                            <img class="mr-10" alt="Zillion" src="{{ asset('img/user4.png') }}" /><span
                              class="color-white font-sm mr-25"
                              >Azumi Rose</span
                            ><span class="color-white font-sm">25 April 2022</span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide swiper-slide-active"
                data-swiper-slide-index="1"
                style="width: 309px; margin-right: 30px"
                role="group"
                aria-label="2 / 4"
              >
                <div class="card-grid-5">
                  <div
                    class="card-grid-5 hover-up"
                    style="background-image: url(' {{ asset('images/blog/img-big3.png') }}')"
                  >
                    <a href="blog-details.html">
                      <div class="box-cover-img">
                        <div class="content-bottom">
                          <h3 class="color-white mb-20">11 Tips to Help You Get New Clients</h3>
                          <div class="author d-flex align-items-center mr-20">
                            <img class="mr-10" alt="Zillion" src="{{ asset('img/user4.png') }}" /><span
                              class="color-white font-sm mr-25"
                              >Azumi Rose</span
                            ><span class="color-white font-sm">25 April 2022</span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide swiper-slide-next"
                data-swiper-slide-index="2"
                style="width: 309px; margin-right: 30px"
                role="group"
                aria-label="3 / 4"
              >
                <div class="card-grid-5">
                  <div
                    class="card-grid-5 hover-up"
                    style="background-image: url('{{ asset('images/blog/img-big1.png') }}')"
                  >
                    <a href="blog-details.html">
                      <div class="box-cover-img">
                        <div class="content-bottom">
                          <h3 class="color-white mb-20">11 Tips to Help You Get New Clients</h3>
                          <div class="author d-flex align-items-center mr-20">
                            <img class="mr-10" alt="Zillion" src="{{ asset('img/user4.png') }}" /><span
                              class="color-white font-sm mr-25"
                              >Azumi Rose</span
                            ><span class="color-white font-sm">25 April 2022</span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide"
                data-swiper-slide-index="3"
                style="width: 309px; margin-right: 30px"
                role="group"
                aria-label="4 / 4"
              >
                <div class="card-grid-5">
                  <div
                    class="card-grid-5 hover-up"
                    style="background-image: url('{{ asset('images/blog/img-big2.png') }}')"
                  >
                    <a href="blog-details.html">
                      <div class="box-cover-img">
                        <div class="content-bottom">
                          <h3 class="color-white mb-20">11 Tips to Help You Get New Clients</h3>
                          <div class="author d-flex align-items-center mr-20">
                            <img class="mr-10" alt="Zillion" src="{{ asset('img/user4.png') }}" /><span
                              class="color-white font-sm mr-25"
                              >Azumi Rose</span
                            ><span class="color-white font-sm">25 April 2022</span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev"
                data-swiper-slide-index="0"
                style="width: 309px; margin-right: 30px"
                role="group"
                aria-label="1 / 4"
              >
                <div class="card-grid-5">
                  <div
                    class="card-grid-5 hover-up"
                    style="background-image: url('{{ asset('images/blog/img-big3.png') }}')"
                  >
                    <a href="blog-details.html">
                      <div class="box-cover-img">
                        <div class="content-bottom">
                          <h3 class="color-white mb-20">11 Tips to Help You Get New Clients</h3>
                          <div class="author d-flex align-items-center mr-20">
                            <img class="mr-10" alt="Zillion" src="{{ asset('img/user4.png') }}" /><span
                              class="color-white font-sm mr-25"
                              >Azumi Rose</span
                            ><span class="color-white font-sm">25 April 2022</span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active"
                data-swiper-slide-index="1"
                style="width: 309px; margin-right: 30px"
                role="group"
                aria-label="2 / 4"
              >
                <div class="card-grid-5">
                  <div
                    class="card-grid-5 hover-up"
                    style="background-image: url('{{ asset('images/blog/img-big3.png') }}')"
                  >
                    <a href="blog-details.html">
                      <div class="box-cover-img">
                        <div class="content-bottom">
                          <h3 class="color-white mb-20">11 Tips to Help You Get New Clients</h3>
                          <div class="author d-flex align-items-center mr-20">
                            <img class="mr-10" alt="Zillion" src="{{ asset('img/user4.png') }}" /><span
                              class="color-white font-sm mr-25"
                              >Azumi Rose</span
                            ><span class="color-white font-sm">25 April 2022</span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next"
                data-swiper-slide-index="2"
                style="width: 309px; margin-right: 30px"
                role="group"
                aria-label="3 / 4"
              >
                <div class="card-grid-5">
                  <div
                    class="card-grid-5 hover-up"
                    style="background-image: url('{{ asset('images/blog/img-big2.png') }}')"
                  >
                    <a href="blog-details.html">
                      <div class="box-cover-img">
                        <div class="content-bottom">
                          <h3 class="color-white mb-20">11 Tips to Help You Get New Clients</h3>
                          <div class="author d-flex align-items-center mr-20">
                            <img class="mr-10" alt="Zillion" src="{{ asset('img/user4.png') }}" /><span
                              class="color-white font-sm mr-25"
                              >Azumi Rose</span
                            ><span class="color-white font-sm">25 April 2022</span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide swiper-slide-duplicate"
                data-swiper-slide-index="3"
                style="width: 309px; margin-right: 30px"
                role="group"
                aria-label="4 / 4"
              >
                <div class="card-grid-5">
                  <div
                    class="card-grid-5 hover-up"
                    style="background-image: url('{{ asset('images/blog/img-big3.png') }}')"
                  >
                    <a href="blog-details.html">
                      <div class="box-cover-img">
                        <div class="content-bottom">
                          <h3 class="color-white mb-20">11 Tips to Help You Get New Clients</h3>
                          <div class="author d-flex align-items-center mr-20">
                            <img class="mr-10" alt="Zillion" src="{{ asset('img/user4.png') }}" /><span
                              class="color-white font-sm mr-25"
                              >Azumi Rose</span
                            ><span class="color-white font-sm">25 April 2022</span>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
          </div>
          <div
            class="swiper-button-next swiper-button-next-4"
            tabindex="0"
            role="button"
            aria-label="Next slide"
            aria-controls="swiper-wrapper-32ef9f08e7cc56f6"
          ></div>
          <div
            class="swiper-button-prev swiper-button-prev-4"
            tabindex="0"
            role="button"
            aria-label="Previous slide"
            aria-controls="swiper-wrapper-32ef9f08e7cc56f6"
          ></div>
        </div>
        <div class="text-center"><a class="btn btn-primary" href="#">Load more posts</a></div>
      </div>
    </div>
  </section>
  <section class="section-box mt-50 mb-20">
    <div class="container">
      <div class="box-newsletter">
        <div class="row">
          <div class="col-xl-3 col-12 text-center d-none d-xl-block">
            <img src="{{ asset('img/newsletter-left.png') }}" alt="Zillion" />
          </div>
          <div class="col-lg-12 col-xl-6 col-12">
            <h2 class="text-md-newsletter text-center">
              New Things Will Always<br />
              Update Regularly
            </h2>
            <div class="box-form-newsletter mt-40">
              <form class="form-newsletter">
                <input class="input-newsletter" type="text" value="" placeholder="Enter your email here" />
                <button class="btn btn-default font-heading icon-send-letter">Subscribe</button>
              </form>
            </div>
          </div>
          <div class="col-xl-3 col-12 text-center d-none d-xl-block">
            <img src="{{ asset('img/newsletter-right.png') }}" alt="Zillion" />
          </div>
        </div>
      </div>
    </div>
  </section>
</main>
@include('htmlpage.frontent.layout.footer')
