@include('htmlpage.frontent.layout.app')
<main class="main">
    {{-- OTP --}}
    <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">
                    <div id="notification"></div>
                    <!-- 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="#">
                            @csrf
                            <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 id="otp-field" class="form-group" style="display: none;">
                                <label class="form-label" for="otp">Enter OTP *</label>
                                <input class="form-control" id="otp" type="text" required name="otp"
                                    placeholder="Enter the OTP" disabled>
                            </div>
                            <div class="col-md-12 mt-30">
                                <button type="button" class="btn btn-apply-icon btn-apply btn-apply-big hover-up"
                                    id="sendOtp">Get OTP</button>
                            </div>
                        </form>


                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                        <script>
                            $(document).ready(function() {
                                $('#sendOtp').on('click', function() {
                                    var email = $('#email').val();
                                    if (email) {
                                        $(this).prop('disabled', true);
                                        $.ajax({
                                            url: "{{ route('send.otp') }}",
                                            type: "POST",
                                            data: {
                                                _token: "{{ csrf_token() }}",
                                                email: email
                                            },
                                            success: function(response) {
                                                $('#notification').html('<div class="alert alert-success">' +
                                                    response.message + '</div>');
                                                $('#otp-field').show();
                                                $('#otp').removeAttr('disabled').focus().val('');
                                                $('#verify-otp-section').show();
                                                autoHideNotification();
                                            },
                                            error: function(xhr) {
                                                $('#notification').html('<div class="alert alert-danger">' + xhr
                                                    .responseJSON.message + '</div>');
                                                $('#sendOtp').prop('disabled', false);
                                                autoHideNotification();
                                            }
                                        });
                                    } else {
                                        $('#notification').html('<div class="alert alert-warning">Please enter an email</div>');
                                        autoHideNotification();
                                    }
                                });

                                $('#otp').on('input', function() {
                                    var otp = $(this).val();
                                    var email = $('#email').val();

                                    if (otp.length === 6) {
                                        $.ajax({
                                            url: "{{ route('verify.otp') }}",
                                            type: "POST",
                                            data: {
                                                otp: $('#otp').val(),
                                                _token: "{{ csrf_token() }}"
                                            },
                                            success: function(response) {
                                                console.log('Response received:', response);
                                                if (response.success) {
                                                    $('#notification').html('<div class="alert alert-success">' +
                                                        response.message + '</div>');
                                                    autoHideNotification();

                                                    // Hide the OTP form
                                                    $('#otp-verification-section').hide();

                                                    // Show the tabs and content

                                                    $('#Formarea').show();
                                                } else {
                                                    $('#notification').html('<div class="alert alert-danger">' +
                                                        response.message + '</div>');
                                                    autoHideNotification();
                                                }
                                            },
                                            error: function(xhr, status, error) {
                                                console.log('Error:', xhr.responseText, status, error);
                                                $('#notification').html(
                                                    '<div class="alert alert-danger">An error occurred. Please try again later.</div>'
                                                );
                                                autoHideNotification();
                                            }
                                        });



                                    } else {
                                        // Hide the tabs container if OTP is not exactly 6 characters
                                        $('#tabs-container').hide();
                                    }
                                });




                                function autoHideNotification() {
                                    setTimeout(function() {
                                        $('#notification').fadeOut('slow', function() {
                                            $(this).empty().show(); // Clear the notification after fading out
                                        });
                                    }, 5000); // 5000 milliseconds = 5 seconds
                                }
                            });
                        </script>
                    </div>

                    <div class="row" style="display: none;" id="Formarea">
                        <div class="col-md-5">
                            <div class="media contact-info">
                                <span class="contact-info__icon"><i class="mdi mdi-phone-dial-outline"></i></span>
                                <div class="media-body">
                                    <h3>Call Enquiry Assistance</h3>
                                    <p>We are always available on call to assist you with any questions you may have.
                                    </p>
                                </div>
                            </div>
                            <div class="media contact-info">
                                <span class="contact-info__icon"><i class="mdi mdi-laptop"></i></span>
                                <div class="media-body">
                                    <h3>Project Consultation</h3>
                                    <p>We provide you with all technical consultations for your project.</p>
                                </div>
                            </div>
                            <div class="media contact-info">
                                <span class="contact-info__icon"><i class="mdi mdi-book-edit-outline"></i></span>
                                <div class="media-body">
                                    <h3>Project Estimation</h3>
                                    <p>You come to us with your project, and we do all of the planning and costing for
                                        you.
                                    </p>
                                </div>
                            </div>
                            <div class="media contact-info">
                                <span class="contact-info__icon"><i class="mdi mdi-account-clock-outline"></i></span>
                                <div class="media-body">
                                    <h3>Schedule Your Appointment</h3>
                                    <p>We assist you in scheduling appointments whenever you wish to meet us.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <!-- <form class="form-contact contact_form" action="" method="post" id="contactForm" novalidate="novalidate"> -->

                            <form class="login-register text-start mt-20 pb-30" id="IndusrtyForm"
                                action="{{ route('industry.industryStore') }}" method="POST">
                                @csrf
                                <div class="form-group">

                                    <input class="form-control" id="industry" type="hidden" required=""
                                        name="industry" value="{{ $industry->id }}">
                                </div>
                                <div class="form-group">
                                    <textarea name="about" id="" cols="30" rows="10" placeholder="Whats your project about?"></textarea>
                                </div>
                                <div class="form-group">

                                    <input class="form-control" id="input-1" type="text" required=""
                                        name="name" placeholder="Enter Full Name">
                                </div>
                                <div class="form-group">

                                    <input class="form-control" id="input-2" type="email" required=""
                                        name="email" placeholder="Enter email" value="{{ session('verified_email') }}"
                                        readonly>
                                </div>
                                <div class="form-group">

                                    <input class="form-control" id="number" type="text" required=""
                                        name="phone" placeholder="Enter work phone">
                                </div>
                                <div class="form-group">

                                    <input class="form-control" id="des" type="text" required=""
                                        name="company" placeholder="Enter company">
                                </div>


                                <div class="form-group">
                                    <button class="btn btn-default hover-up w-100" type="submit"
                                        name="login">Send</button>
                                </div>
                                <div class="text-muted text-center">Do you need support? <a
                                        href="
                                        ">Contact
                                        Us</a></div>
                            </form>

                            <script>
                                $(document).ready(function() {
                                    $('#IndusrtyForm').on('submit', function(event) {
                                        event.preventDefault(); // Prevent the default form submission

                                        var formData = $(this).serialize(); // Serialize the form data

                                        $.ajax({
                                            url: $(this).attr('action'), // Get the action URL from the form
                                            type: 'POST',
                                            data: formData,
                                            success: function(response) {
                                                if (response.success) {
                                                    // Success notification
                                                    $('#notification').html('<div class="alert alert-success">' +
                                                        response.message + '</div>');
                                                    $('#IndusrtyForm')[0].reset(); // Reset the form fields
                                                    $('#notification').fadeOut(5000); // Auto-hide after 5 seconds
                                                } else {
                                                    // Handle other success cases if needed (for now, we assume success only sends a success message)
                                                    $('#notification').html('<div class="alert alert-danger">' +
                                                        response.message + '</div>');
                                                    $('#notification').fadeOut(5000);
                                                }
                                            },
                                            error: function(xhr) {
                                                // Error handling (e.g., validation errors)
                                                var errorMessage = 'An error occurred while processing your request.';
                                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                                    errorMessage = xhr.responseJSON.message;
                                                }

                                                $('#notification').html('<div class="alert alert-danger">' +
                                                    errorMessage + '</div>');
                                                $('#notification').fadeOut(5000); // Auto-hide after 5 seconds
                                            }
                                        });
                                    });
                                });
                            </script>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>



    <div class="hero-slider hero-slider-3 height-auto sliderIndustries">
        <div class="slider-card slider-card-4 overlay">
          <picture class="slider-media">
            <img src="{{ asset('storage/' . $industry->image_path) }}" width="1920" height="1440" loading="eager" alt="{{ $industry->page_name }}">
          </picture>
          <div class="slider-content">
            <div class="container-fluid">
              <div class="row product-grid">
                <div class="col-12 col-lg-6 aos-init aos-animate" data-aos="fade-right">
                  <h2 class="heading text-80">{{ $industry->page_name }}</h2>
                </div>
                <div class="col-12 col-lg-6 solutionbnr">
                  <div class="section-headings section-headings-vertical height-100">
                    <div class="text text-18 aos-init aos-animate" data-aos="fade-down">{!! $industry->content !!}</div>
                    <div class="buttons d-flex gap-4 flex-wrap">
                     
                    <a href="/contact" class="button button--secondary aos-init aos-animate" aria-label="hero button" data-aos="fade-up" data-aos-delay="200">
                       Contact Us
                        <span class="svg-wrapper">
                          <svg class="icon-20" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.3365 7.84518L6.16435 15.0173L4.98584 13.8388L12.158 6.66667H5.83652V5H15.0032V14.1667H13.3365V7.84518Z" fill="currentColor"></path>
                          </svg>
                        </span>
                      </a>
                    </div> 
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    {{-- /end --}}




    {{-- tab section --}}
    <div class="faq faq-2 mt-100">
          <div class="container">
            <div class="section-headings section-headings-horizontal">
              <div class="section-headings-left">
              <div class="subheading text-20 subheading-bg aos-init aos-animate" data-aos="fade-right">
                <svg class="icon icon-14" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <g clip-path="url(#clip0_9088_4143)">
                    <path d="M8.71401 5.28599C11.7514 5.4205 14 5.9412 14 7C14 8.0588 11.7514 8.5795 8.71401 8.71401C8.5795 11.7514 8.0588 14 7 14C5.9412 14 5.4205 11.7514 5.28599 8.71401C2.2486 8.5795 -1.33117e-07 8.0588 0 7C4.62818e-08 5.94119 2.2486 5.4205 5.28599 5.28599C5.4205 2.2486 5.9412 0 7 0C8.0588 0 8.5795 2.2486 8.71401 5.28599Z" fill="CurrentColor"></path>
                  </g>
                  <defs>
                    <clipPath>
                      <rect width="14" height="14" fill="CurrentColor"></rect>
                    </clipPath>
                  </defs>
                </svg>
                <span>Solutions</span>
                <svg class="icon icon-14" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <g clip-path="url(#clip0_9088_4143)">
                    <path d="M8.71401 5.28599C11.7514 5.4205 14 5.9412 14 7C14 8.0588 11.7514 8.5795 8.71401 8.71401C8.5795 11.7514 8.0588 14 7 14C5.9412 14 5.4205 11.7514 5.28599 8.71401C2.2486 8.5795 -1.33117e-07 8.0588 0 7C4.62818e-08 5.94119 2.2486 5.4205 5.28599 5.28599C5.4205 2.2486 5.9412 0 7 0C8.0588 0 8.5795 2.2486 8.71401 5.28599Z" fill="CurrentColor"></path>
                  </g>
                  <defs>
                    <clipPath>
                      <rect width="14" height="14" fill="CurrentColor"></rect>
                    </clipPath>
                  </defs>
                </svg>
              </div>
              <h2 class="heading text-50 aos-init aos-animate" data-aos="fade-right">
                {{ $industry->section1_heading }}
              </h2>
              </div>
           
            </div>
            <div class="section-content">
              <div class="row">
                <div class="col-lg-6 col-12">
                  <modal-video class="video-wrap section-headings-sticky">
                    <div class="image radius18 aos-init aos-animate" data-aos="fade-right">
                      <img src="{{ asset('images/services/industrypage.png') }}" width="1000" height="929" loading="lazy" alt="Image">
                    
                    </div>
                
                  </modal-video>
                </div>
                <div class="col-lg-6 col-12">
            <faq-accordion>
  <div class="accordion-list">
    @foreach ($industrysolutions as $key => $solution)
      <div class="accordion-block aos-init @if($loop->first) active @endif" data-aos="fade-up" @if(!$loop->first) data-aos-delay="{{ $key * 50 }}" @endif>
        <div class="accordion-opener heading text-22">
          {{ $solution->title ?? 'Solution Title' }}
          <div class="svg-wrapper">
            <svg class="icon icon-24" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_9088_8345)">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7083 15.7044C12.5208 15.8919 12.2665 15.9972 12.0013 15.9972C11.7362 15.9972 11.4818 15.8919 11.2943 15.7044L5.63732 10.0474C5.54181 9.95517 5.46563 9.84482 5.41322 9.72282C5.36081 9.60081 5.33322 9.46959 5.33207 9.33681C5.33092 9.20404 5.35622 9.07236 5.4065 8.94946C5.45678 8.82656 5.53103 8.71491 5.62492 8.62102C5.71882 8.52713 5.83047 8.45287 5.95337 8.40259C6.07626 8.35231 6.20794 8.32701 6.34072 8.32816C6.4735 8.32932 6.60472 8.3569 6.72672 8.40931C6.84873 8.46172 6.95907 8.5379 7.05132 8.63341L12.0013 13.5834L16.9513 8.63341C17.1399 8.45125 17.3925 8.35046 17.6547 8.35274C17.9169 8.35502 18.1677 8.46019 18.3531 8.64559C18.5385 8.831 18.6437 9.08182 18.646 9.34401C18.6483 9.60621 18.5475 9.85881 18.3653 10.0474L12.7083 15.7044Z" fill="CurrentColor"></path>
              </g>
              <defs>
                <clipPath>
                  <rect width="24" height="24" fill="CurrentColor"></rect>
                </clipPath>
              </defs>
            </svg>
          </div>
        </div>
        <div class="accordion-content">
          <div class="accordion-content-inner text text-18 content-single">
            {!! $solution->content ?? 'Solution description goes here.' !!}
          </div>
        </div>
      </div>
    @endforeach
  </div>
</faq-accordion>

                </div>
              </div>
            </div>
          </div>
        </div>
    {{-- /end --}}


    {{-- secon section --}}
    <div class="our-services-3 mt-100">
        <div class="container">
          <div class="section-headings headings-width text-center">
            <div class="subheading text-20 subheading-bg aos-init aos-animate" data-aos="fade-up">
              <svg class="icon icon-14" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                <g clip-path="url(#clip0_9088_4143)">
                  <path d="M8.71401 5.28599C11.7514 5.4205 14 5.9412 14 7C14 8.0588 11.7514 8.5795 8.71401 8.71401C8.5795 11.7514 8.0588 14 7 14C5.9412 14 5.4205 11.7514 5.28599 8.71401C2.2486 8.5795 -1.33117e-07 8.0588 0 7C4.62818e-08 5.94119 2.2486 5.4205 5.28599 5.28599C5.4205 2.2486 5.9412 0 7 0C8.0588 0 8.5795 2.2486 8.71401 5.28599Z" fill="CurrentColor"></path>
                </g>
                <defs>
                  <clipPath>
                    <rect width="14" height="14" fill="CurrentColor"></rect>
                  </clipPath>
                </defs>
              </svg>
              <span>Benifits</span>
              <svg class="icon icon-14" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                <g clip-path="url(#clip0_9088_4143)">
                  <path d="M8.71401 5.28599C11.7514 5.4205 14 5.9412 14 7C14 8.0588 11.7514 8.5795 8.71401 8.71401C8.5795 11.7514 8.0588 14 7 14C5.9412 14 5.4205 11.7514 5.28599 8.71401C2.2486 8.5795 -1.33117e-07 8.0588 0 7C4.62818e-08 5.94119 2.2486 5.4205 5.28599 5.28599C5.4205 2.2486 5.9412 0 7 0C8.0588 0 8.5795 2.2486 8.71401 5.28599Z" fill="CurrentColor"></path>
                </g>
                <defs>
                  <clipPath>
                    <rect width="14" height="14" fill="CurrentColor"></rect>
                  </clipPath>
                </defs>
              </svg>
            </div>
            <h2 class="heading text-50 aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
              {{ $industry->section3_heading }}
            </h2>
          </div>
          <div class="section-content">
            <div class="row product-grid">
                @foreach ($benifits as $benifit)
              <div class="col-lg-4 col-md-6 col-12 aos-init aos-animate" data-aos="fade-up">
                <div class="card-working-process no-underline d-block">    
                  <div class="d-flex gap-4 align-items-center">
                    <div class="svg-wrapper icon-40">
                     <i class="mdi {{ $benifit->icon }} text-50"></i>
                    </div>
                    <h2 class="heading text-20 fw-500">{{ $benifit->title }}</h2>
                  </div>          
                  <div class="card-icon-text has-border">
                    <div class="content">
                      <p class="text text-16">{{ $benifit->content }}</p>

                     
                    </div>
                  </div>
                </div>
              </div>
        @endforeach
            </div>

          </div>
        </div>
      </div>
    {{-- /end --}}

      <!-- Offers Block -->
              {{--   <div class="box-related-job content-page mb-50">
                    <h4 class="mb-30">{{ $industry->section2_heading }}</h4>

                    <div class="row">
                        @foreach ($offers as $offer)
                            <div class="col-md-6 col-12 mb-4">
                                <div class="p-4 rounded hover-up shadow-sm bg-white" style="min-height:170px">

                                    <div class="d-flex align-items-start">
                                        <i class="mdi {{ $offer->icon }} fs-1 text-primary me-3"></i>

                                        <div>
                                            <h5 class="fw-semibold">{{ $offer->title }}</h5>
                                            <p class="text-muted small mt-2">{{ $offer->content }}</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        @endforeach
                    </div>

                </div> --}}
    {{-- /end offer --}}

    <div class="testimonial how-we-work mt-100">
        <div class="container">
          <div class="row">
            <div class="col-lg-6 col-12">
              <div class="section-headings section-headings-sticky">
                <div class="subheading text-20 subheading-bg aos-init aos-animate" data-aos="fade-up">
                  <svg class="icon icon-14" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <g clip-path="url(#clip0_9088_4143)">
                      <path d="M8.71401 5.28599C11.7514 5.4205 14 5.9412 14 7C14 8.0588 11.7514 8.5795 8.71401 8.71401C8.5795 11.7514 8.0588 14 7 14C5.9412 14 5.4205 11.7514 5.28599 8.71401C2.2486 8.5795 -1.33117e-07 8.0588 0 7C4.62818e-08 5.94119 2.2486 5.4205 5.28599 5.28599C5.4205 2.2486 5.9412 0 7 0C8.0588 0 8.5795 2.2486 8.71401 5.28599Z" fill="CurrentColor"></path>
                    </g>
                    <defs>
                      <clipPath>
                        <rect width="14" height="14" fill="CurrentColor"></rect>
                      </clipPath>
                    </defs>
                  </svg>
                  <span>Offers</span>
                  <svg class="icon icon-14" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <g clip-path="url(#clip0_9088_4143)">
                      <path d="M8.71401 5.28599C11.7514 5.4205 14 5.9412 14 7C14 8.0588 11.7514 8.5795 8.71401 8.71401C8.5795 11.7514 8.0588 14 7 14C5.9412 14 5.4205 11.7514 5.28599 8.71401C2.2486 8.5795 -1.33117e-07 8.0588 0 7C4.62818e-08 5.94119 2.2486 5.4205 5.28599 5.28599C5.4205 2.2486 5.9412 0 7 0C8.0588 0 8.5795 2.2486 8.71401 5.28599Z" fill="CurrentColor"></path>
                    </g>
                    <defs>
                      <clipPath>
                        <rect width="14" height="14" fill="CurrentColor"></rect>
                      </clipPath>
                    </defs>
                  </svg>
                </div>
                <h2 class="heading text-50 aos-init aos-animate" data-aos="fade-up">
                  {{ $industry->section2_heading }}
                </h2>
              </div>
            </div>
            <div class="col-lg-6 col-12">
              <div class="testimonial-card-inner card-working-process-inner">


                @foreach ($offers as $offer)
    <div class="card-working-process">
        <h2 class="heading text-24 fw-500">
            {{ $offer->title }}
        </h2>

        <div class="card-icon-text card-icon-text-horizontal has-border">
            <div class="svg-wrapper">
                {{-- If icon is stored as SVG --}}
                @if(!empty($offer->icon))
    <i class="mdi {{ $offer->icon }} fs-1  me-3"></i>
@else
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round"
            d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25" />
    </svg>
@endif

            </div>

            <div class="content">
                <p class="text text-18">
                    {{ $offer->content }}
                </p>
            </div>
        </div>
    </div>
@endforeach

              </div>
            </div>
          </div>
        </div>
      </div>
 

       










    <section class="section-box mt-50 mb-30 bg-brand-2 pt-60 pb-60">
        <div class="container">
            <div class="row">
                <div class="col-xl-5">
                    <div class="pt-70">
                         <h2 class="heading text-50 aos-init aos-animate text-white pb-4" data-aos="fade-up" data-aos-delay="100">{{ $industry->section4_heading }}</h2>
                        <p class="color-white mb-30 text-16">{{ $industry->section4_content }}</p>
                        <div class="mt-20"> <a class="btn btn-brand-1 btn-icon-more hover-up">Explore</a></div>
                    </div>
                </div>
                <div class="col-xl-7">
                    <div class="box-swiper mt-50 layout-brand-1">
                        <div class="swiper-container swiper-group-3-explore mh-none swiper">
                            <div class="swiper-wrapper pb-70 pt-5">
                                @foreach ($oursolutions as $solution)
                                    <div class="swiper-slide hover-up" style="width: 234.667px; margin-right: 30px;">
                                        <div class="card-grid-5 card-category hover-up"
                                            style="background-image: url('{{ asset('storage/' . $solution->image_path) }}')">
                                            <a
                                                href="{{ route('solution-details', ['url' => urlencode(str_replace(' ', '-', strtolower($solution->url)))]) }}">
                                                <div class="box-cover-img">
                                                    <div class="content-bottom">
                                                        <h6 class=" mb-5">
                                                            {{ $solution->page_name }}
                                                            <!-- Solution Title -->
                                                        </h6>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                        </div>

                        <div class="swiper-button-next swiper-button-next-1" tabindex="0" role="button"
                            aria-label="Next slide" aria-controls="swiper-wrapper-cd8c9476c226d64b"></div>
                        <div class="swiper-button-prev swiper-button-prev-1" tabindex="0" role="button"
                            aria-label="Previous slide" aria-controls="swiper-wrapper-cd8c9476c226d64b"> </div>
                    </div>
                </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 text-center">
                        <h2 class="text-md-newsletter text-center">What we can build for your business?
                        </h2>
                        <p class="text-white mt-10">We would love to create one more successful
                            business by helping you
                            to
                            streamline your
                            business. Book a reservation for you and our executive will call to take it
                            further. We
                            are just a click away.</p>
                        <button class="btn btn-brand-1 font-heading icon-send-letter mt-10" data-bs-toggle="modal"
                            data-bs-target="#ModalApplyJobForm">Tell Us
                            More</button>


                    </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>

<style>
    .hover-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.6);
        /* semi-transparent overlay */
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .banner-2:hover .hover-text,
    .banner-3:hover .hover-text,
    .banner-4:hover .hover-text,
    .banner-5:hover .hover-text,
    .banner-6:hover .hover-text {
        opacity: 1;
    }

    .hover-text span {
        font-size: 11px;
        font-weight: 500;
    }
</style>
@include('htmlpage.frontent.layout.footer')