@include('htmlpage.frontent.layout.app')
<!-- Material Design Icons CDN -->
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css" rel="stylesheet">
<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="#">
                            @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>
                    </div>
                    <div id="notification"></div>
                    <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
                                                $('#myTab').show();
                                                $('#myTabContent').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>
                    <!-- 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">
                            <!-- 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 24 hours?
                                </h2>
                            </div>
                            <form class="login-register text-start mt-20 pb-30" id="callNowForm"
                                action="{{ route('callnow.nowstore') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input class="form-control" id="email" type="hidden" name="email"
                                                value="{{ session('verified_email') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="phone">Contact Number *</label>
                                            <input class="form-control" id="phone" type="text" 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 id="notification"></div> <!-- Notification area -->


                            <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>
                        <script>
                            $(document).ready(function() {
                                $('#callNowForm').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) {
                                            // Handle success response
                                            $('#notification').html('<div class="alert alert-success">' + response
                                                .message + '</div>');
                                            $('#callNowForm')[0].reset(); // Reset the form fields
                                            autoHideNotification(); // Call function to hide notification
                                        },
                                        error: function(xhr) {
                                            // Handle error response
                                            $('#notification').html('<div class="alert alert-danger">' + xhr
                                                .responseJSON.message + '</div>');
                                            autoHideNotification(); // Call function to hide notification
                                        }
                                    });
                                });

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

                        <div class="tab-pane fade" id="form2" role="tabpanel" aria-labelledby="form2-tab">
                            <!-- 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" id="callLaterForm">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input class="form-control" id="phone" type="text" 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="select_day" name="select_day">
                                                <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="select_time" name="select_time">
                                                <option value="">Select a time</option>
                                                <option value="Morning (9 AM - 12 PM)">Morning (9 AM - 12 PM)</option>
                                                <option value="Afternoon (12 PM - 3 PM)">Afternoon (12 PM - 3 PM)
                                                </option>
                                                <option value="Evening (3 PM - 6 PM)">Evening (3 PM - 6 PM)</option>
                                                <option value="Night (6 PM - 9 PM)">Night (6 PM - 9 PM)</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Hidden email field -->
                                    <input type="hidden" name="email" value="{{ session('verified_email') }}">

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

                            <div id="notification"></div> <!-- Notification area -->


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

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

                                        $.ajax({
                                            url: "{{ route('calllater.laterstore') }}", // URL to submit the form data
                                            type: 'POST',
                                            data: formData,
                                            success: function(response) {
                                                // Handle success response
                                                $('#notification').html('<div class="alert alert-success">' + response
                                                    .message + '</div>');
                                                $('#callLaterForm')[0].reset(); // Reset the form fields
                                                autoHideNotification(); // Call function to hide notification
                                            },
                                            error: function(xhr) {
                                                // Handle error response
                                                $('#notification').html('<div class="alert alert-danger">' + xhr
                                                    .responseJSON.message + '</div>');
                                                autoHideNotification(); // Call function to hide notification
                                            }
                                        });
                                    });

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



                            <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">
                            <!-- 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" id="contactForm">
                                @csrf
                                <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>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input class="form-control" id="phone" type="text" name="phone"
                                                placeholder="(+01) 234 567 89">
                                        </div>
                                        <div class="form-group">
                                            <input class="form-control" id="name" type="text" name="name"
                                                placeholder="Enter your name">
                                        </div>
                                        <input type="hidden" name="email" value="{{ session('verified_email') }}">
                                        <button class="btn btn-default hover-up w-100" type="submit">Submit</button>
                                    </div>
                                </div>
                            </form>

                            <div id="notification"></div> <!-- Notification area -->


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

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

                                        $.ajax({
                                            url: "{{ route('message.messagestore') }}", // Update this to your actual route
                                            type: 'POST',
                                            data: formData,
                                            success: function(response) {
                                                // Handle success response
                                                $('#notification').html('<div class="alert alert-success">' + response
                                                    .message + '</div>');
                                                $('#contactForm')[0].reset(); // Reset the form fields
                                                autoHideNotification(); // Call function to hide notification
                                            },
                                            error: function(xhr) {
                                                // Handle error response
                                                $('#notification').html('<div class="alert alert-danger">' + xhr
                                                    .responseJSON.message + '</div>');
                                                autoHideNotification(); // Call function to hide notification
                                            }
                                        });
                                    });

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

                            <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">
                            <!-- 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" id="scheduleMeetingForm"
                                action="{{ route('meeting.schedule') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="fname">First Name *</label>
                                            <input class="form-control" id="fname" type="text" name="fname"
                                                placeholder="Zillion IT Solutions">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="lname">Last Name *</label>
                                            <input class="form-control" id="lname" type="text" name="lname"
                                                placeholder="Zillion IT Solutions">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="email">Company Email *</label>
                                            <input class="form-control" id="email" type="text"
                                                name="company_email" placeholder="mail@zillionit.com"
                                                value="{{ session('verified_email') }}" readonly>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="phone1">Company Phone *</label>
                                            <input class="form-control" id="cphone" type="text"
                                                name="company_phone" placeholder="(+01) 234 567 89">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="cname">Company Name *</label>
                                            <input class="form-control" id="cname" type="text"
                                                name="company_name" placeholder="Zillion IT Solutions">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="day">Company Size *</label>
                                            <select class="form-control" id="day" name="company_size">
                                                <option value="">Choose Your Company Size</option>
                                                <option value="1 - 10 employees">1 - 10 employees</option>
                                                <option value="11 - 20 employees">11 - 20 employees</option>
                                                <option value="21 - 30 employees">21 - 30 employees</option>
                                                <option value="31 - 40 employees">31 - 40 employees</option>
                                            </select>
                                        </div>
                                    </div>
                                    <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>

                            <script>
                                $(document).ready(function() {
                                    $('#scheduleMeetingForm').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) {
                                                // Handle success response
                                                $('#notification').html('<div class="alert alert-success">' + response
                                                    .message + '</div>');
                                                $('#scheduleMeetingForm')[0].reset(); // Reset the form fields
                                                autoHideNotification(); // Call function to hide notification
                                            },
                                            error: function(xhr) {
                                                // Handle error response
                                                $('#notification').html('<div class="alert alert-danger">' + xhr
                                                    .responseJSON.message + '</div>');
                                                autoHideNotification(); // Call function to hide notification
                                            }
                                        });
                                    });

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

                            <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>
    {{--     <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">
                    <h1 class="pb-3">{{ $service->page_heading }}</h1>
                    <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="pt-10 pb-10"></div>
        </div>
    </section>
 --}}


    <div class="hero-slider hero-slider-3 height-auto sliderIndustries">
        <div class="slider-card slider-card-4 overlay">
            <picture class="slider-media">
            </picture>
            <div class="slider-content">
                <div class="container-fluid">
                    <div class="row product-grid">
                        <div class="col-12 col-lg-7" data-aos="fade-right">
                            <h1 class="heading text-80">{{ $service->page_heading }}</h1>
                            <div class="section-headings section-headings-vertical">
                                <div class="text text-18 pt-50 banner-text" data-aos="fade-down">
                                    {!! $service->content !!}</div>
                                <div class="buttons d-flex gap-4 flex-wrap">
                                    <a href="#" class="button button--secondary" aria-label="hero button"
                                        data-aos="fade-up" data-aos-delay="200" data-bs-toggle="modal"
                                        data-bs-target="#ModalApplyJobForm">
                                        Request A Free Quote
                                        <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" />
                                            </svg>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        {{-- image --}}
                      <div class="col-12 col-lg-5 d-flex justify-content-center align-items-center" data-aos="fade-right">
    <img src="{{ asset('storage/' . $service->image_path) }}" 
         alt="{{ $service->alt }}" 
         class="img-fluid">
</div>
                        {{-- /image --}}
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{-- service --}}
    <div class="multicolumn multicolumn-page section-padding">
        <div class="container">
          <div class="text-center section-headings">
            <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>Our Benefits</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">
              {{ $service->section1_heading }}
            </h2>
            <p class="text-muted mb-4 mt-4">{{ $service->section1_content }}</p>
          </div>
          <div class="multicolumn-inner section-content">
            <div class="row product-grid">
            @foreach ($expertise as $ex)
              <div class="col-xl-4 col-md-6 col-12 aos-init aos-animate" data-aos="fade-up">
                <div class="multicolumn-card">
                  <div class="card-icon">
                    <svg class="icon-40" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                      <g clip-path="url(#clip0_9088_5407)">
                        <path d="M34.1323 16.6016H24.0586C23.735 16.6016 23.4727 16.8639 23.4727 17.1875C23.4727 17.5111 23.735 17.7734 24.0586 17.7734H34.1323C34.4559 17.7734 34.7183 17.5111 34.7183 17.1875C34.7183 16.8639 34.4559 16.6016 34.1323 16.6016Z" fill="CurrentColor"></path>
                        <path d="M34.1323 19.0469H24.0586C23.735 19.0469 23.4727 19.3092 23.4727 19.6328C23.4727 19.9564 23.735 20.2188 24.0586 20.2188H34.1323C34.4559 20.2188 34.7183 19.9564 34.7183 19.6328C34.7183 19.3092 34.4559 19.0469 34.1323 19.0469Z" fill="CurrentColor"></path>
                        <path d="M34.1323 21.5H24.0586C23.735 21.5 23.4727 21.7623 23.4727 22.0859C23.4727 22.4095 23.735 22.6719 24.0586 22.6719H34.1323C34.4559 22.6719 34.7183 22.4095 34.7183 22.0859C34.7183 21.7623 34.4559 21.5 34.1323 21.5Z" fill="CurrentColor"></path>
                        <path d="M31.0934 23.9453H24.0586C23.735 23.9453 23.4727 24.2077 23.4727 24.5312C23.4727 24.8548 23.735 25.1172 24.0586 25.1172H31.0934C31.417 25.1172 31.6794 24.8548 31.6794 24.5312C31.6794 24.2077 31.417 23.9453 31.0934 23.9453Z" fill="CurrentColor"></path>
                        <path d="M11.7012 14.4923V13.3672C11.7012 13.0436 11.4388 12.7812 11.1152 12.7812C10.7916 12.7812 10.5293 13.0436 10.5293 13.3672V14.4923C10.5293 14.8159 10.7916 15.0783 11.1152 15.0783C11.4388 15.0783 11.7012 14.8159 11.7012 14.4923Z" fill="CurrentColor"></path>
                        <path d="M16.0059 15.0783C16.3295 15.0783 16.5918 14.8159 16.5918 14.4923V13.3672C16.5918 13.0436 16.3295 12.7812 16.0059 12.7812C15.6823 12.7812 15.4199 13.0436 15.4199 13.3672V14.4923C15.4199 14.8159 15.6822 15.0783 16.0059 15.0783Z" fill="CurrentColor"></path>
                        <path d="M13.5607 17.2873C13.8843 17.2873 14.1466 17.025 14.1466 16.7014C14.1466 16.3778 13.8843 16.1155 13.5607 16.1155C13.4793 16.1155 13.4131 16.0492 13.4131 15.9679C13.4131 15.8866 13.4793 15.8203 13.5607 15.8203C13.8843 15.8203 14.1466 15.558 14.1466 15.2344C14.1466 14.9108 13.8843 14.6484 13.5607 14.6484C12.8332 14.6484 12.2412 15.2404 12.2412 15.9679C12.2412 16.6954 12.8332 17.2873 13.5607 17.2873Z" fill="CurrentColor"></path>
                        <path d="M13.5607 20.4749C14.1772 20.4898 14.8222 20.2316 15.2868 19.7812C15.6858 19.3946 15.9049 18.9168 15.9036 18.4359C15.9027 18.1128 15.6405 17.8516 15.3176 17.8516C15.3171 17.8516 15.3165 17.8516 15.316 17.8516C14.9924 17.8524 14.7307 18.1155 14.7316 18.4391C14.732 18.5965 14.6372 18.7789 14.4712 18.9398C14.2291 19.1744 13.8884 19.3137 13.5805 19.3032C13.5673 19.3027 13.554 19.3027 13.5407 19.3032C13.2334 19.3148 12.8921 19.1744 12.65 18.9398C12.4841 18.779 12.3893 18.5965 12.3897 18.4391C12.3905 18.1155 12.129 17.8525 11.8054 17.8516C11.8048 17.8516 11.8043 17.8516 11.8037 17.8516C11.4809 17.8516 11.2187 18.1128 11.2178 18.4359C11.2165 18.9167 11.4354 19.3945 11.8344 19.7812C12.2862 20.2191 12.9074 20.4756 13.5093 20.4756C13.5264 20.4755 13.5436 20.4753 13.5607 20.4749Z" fill="CurrentColor"></path>
                        <path d="M24.9282 10.9297C24.8399 10.6184 24.5159 10.4375 24.2047 10.5256C23.8934 10.6138 23.7124 10.9377 23.8007 11.2491C24.4682 13.6055 26.6457 15.2513 29.096 15.2513C32.1313 15.2513 34.6006 12.782 34.6006 9.74672C34.6006 6.71148 32.1313 4.24219 29.096 4.24219C26.6721 4.24219 24.501 5.86539 23.8163 8.18953C23.7249 8.49992 23.9024 8.8257 24.2128 8.91711C24.5231 9.00852 24.849 8.83109 24.9403 8.52063C25.4791 6.69148 27.188 5.41406 29.096 5.41406C31.485 5.41406 33.4286 7.35766 33.4286 9.74672C33.4286 12.1358 31.485 14.0794 29.096 14.0794C27.1673 14.0794 25.4534 12.7841 24.9282 10.9297Z" fill="CurrentColor"></path>
                        <path d="M28.6863 11.7562C28.8362 11.7562 28.9862 11.699 29.1006 11.5845L31.6146 9.07053C31.8434 8.8417 31.8434 8.47068 31.6146 8.24193C31.3858 8.01311 31.0147 8.01311 30.786 8.24193L28.6864 10.3415L27.4065 9.0617C27.1776 8.83287 26.8066 8.83287 26.5779 9.0617C26.349 9.29053 26.349 9.66154 26.5779 9.89029L28.2721 11.5845C28.3864 11.699 28.5364 11.7562 28.6863 11.7562Z" fill="CurrentColor"></path>
                        <path d="M38.6328 0.585938H19.5588C18.8049 0.585938 18.1916 1.1993 18.1916 1.95312V4.57211C17.748 4.4357 17.2773 4.36195 16.7897 4.36195H16.4382C15.6986 3.64062 14.689 3.195 13.5768 3.195H9.65453C7.39289 3.195 5.55297 5.03492 5.55297 7.29656V8.04602C5.55297 8.36961 5.81531 8.63195 6.13891 8.63195C6.4625 8.63195 6.72484 8.36961 6.72484 8.04602V7.29656C6.72484 5.68109 8.03906 4.36687 9.65453 4.36687H13.5768C15.1923 4.36687 16.5065 5.68109 16.5065 7.29656V10.2726H9.56773C8.45195 10.2726 7.53242 11.1277 7.42922 12.2169H6.72484V10.7804C6.72484 10.4568 6.4625 10.1945 6.13891 10.1945C5.81531 10.1945 5.55297 10.4568 5.55297 10.7804V12.4932C4.74906 12.9077 4.19773 13.7459 4.19773 14.7109V15.4813C4.19773 16.8566 5.31656 17.9753 6.69172 17.9753H7.41922V18.5184C7.41922 20.2408 8.40719 21.7358 9.84555 22.4695L9.355 22.7527C8.97023 22.9748 8.71914 23.3723 8.67813 23.81L3.11578 25.6005C1.25211 26.2004 0 27.9189 0 29.8766V38.0452C0 38.799 0.613359 39.4123 1.36719 39.4123H3.33234C3.65594 39.4123 3.91828 39.15 3.91828 38.8264C3.91828 38.5028 3.65594 38.2405 3.33234 38.2405H1.36719C1.25953 38.2405 1.17188 38.1528 1.17188 38.0452V29.8766C1.17188 28.4296 2.09734 27.1595 3.47484 26.716L7.60789 25.3856L5.53273 28.183C5.23008 28.5911 5.29398 29.171 5.67828 29.5034L7.40172 30.9939L5.62766 32.5283C5.29867 32.8129 5.19766 33.2867 5.38195 33.6806L7.51492 38.2404H6.06672C5.74312 38.2404 5.48078 38.5027 5.48078 38.8263C5.48078 39.1499 5.74312 39.4123 6.06672 39.4123H28.559C29.3128 39.4123 29.9262 38.7989 29.9262 38.0451V33.2008L31.2456 31.8813H38.6328C39.3866 31.8813 40 31.268 40 30.5141V1.95312C40 1.1993 39.3866 0.585938 38.6328 0.585938ZM7.41914 16.8035H6.69164C5.96258 16.8035 5.36953 16.2104 5.36953 15.4814V14.7109C5.36953 13.9819 5.96266 13.3888 6.69164 13.3888H7.41914V16.8035ZM8.67141 37.9473L6.50594 33.318L8.67141 31.4451V37.9473ZM8.67141 29.8958L8.29734 30.2193L6.58187 28.7356L8.67141 25.9189V29.8958ZM20.3966 9.14086V12.217H19.6923C19.593 11.1685 18.7373 10.3373 17.6783 10.2765V7.29656C17.6783 6.68 17.5407 6.09523 17.2959 5.57008C19.0459 5.81703 20.3966 7.32383 20.3966 9.14086ZM20.4297 13.3887C21.1588 13.3887 21.7518 13.9818 21.7518 14.7109V15.4813C21.7518 16.2104 21.1587 16.8034 20.4297 16.8034H19.7022V13.3887H20.4297ZM8.59101 18.5184V12.421C8.59101 11.8825 9.02906 11.4445 9.56758 11.4445H17.5538C18.0923 11.4445 18.5303 11.8825 18.5303 12.421V18.5184C18.5303 20.3169 17.0672 21.7799 15.2688 21.7799H11.8525C10.0541 21.7799 8.59101 20.3168 8.59101 18.5184ZM20.543 28.7327L18.8241 30.2193L18.45 29.8958V25.8616L20.543 28.7327ZM15.5138 22.9447V23.4638L13.5607 25.0295L11.6076 23.4639V22.9448C11.6887 22.9492 11.7703 22.9519 11.8525 22.9519H15.2688C15.3511 22.9518 15.4327 22.9491 15.5138 22.9447ZM9.84328 23.9367C9.84328 23.8672 9.8807 23.8023 9.94094 23.7676L10.4357 23.482V23.5577C10.4357 23.8555 10.5691 24.1334 10.8015 24.3196L12.9499 26.0417C12.9729 26.0602 12.9966 26.0773 13.0206 26.0934L9.84328 28.1104V23.9367ZM10.8807 38.2405H9.84328V29.4984L11.0093 28.7582L11.8824 29.7222L10.8807 38.2405ZM12.0606 38.2405L12.9282 30.8632C13.1038 31.0125 13.3279 31.097 13.5607 31.097C13.7935 31.097 14.0177 31.0124 14.1931 30.8631L15.0607 38.2405H12.0606ZM13.5607 29.8295L12.0133 28.1209L13.5608 27.1386L15.1083 28.1209L13.5607 29.8295ZM17.2781 38.2405H16.2407L15.239 29.7222L16.112 28.7583L17.2781 29.4985V38.2405ZM17.2781 28.1104L14.1008 26.0934C14.1248 26.0773 14.1485 26.0602 14.1715 26.0417L16.3198 24.3197C16.5524 24.1334 16.6858 23.8556 16.6858 23.5577V23.482L17.1805 23.7676C17.2408 23.8023 17.2782 23.8672 17.2782 23.9367L17.2781 28.1104ZM18.1916 23.1387C18.0804 22.9836 17.9366 22.8509 17.7665 22.7527L17.2759 22.4695C17.6074 22.3005 17.9145 22.0905 18.1916 21.8472V23.1387ZM18.45 31.4452L20.6116 33.3147L18.45 37.8092V31.4452ZM22.5927 32.9168V38.2405H19.543L21.7325 33.688C21.9231 33.2917 21.824 32.8139 21.4913 32.5261L19.7198 30.994L21.4454 29.5015C21.8266 29.1719 21.8926 28.5947 21.5957 28.1875L19.5652 25.4023L23.6465 26.716C24.8542 27.1048 25.7143 28.1291 25.908 29.3509C24.0576 29.4852 22.5927 31.0327 22.5927 32.9168ZM28.7543 38.0452C28.7543 38.1528 28.6666 38.2405 28.559 38.2405H23.7645V33.5441H28.7543V38.0452ZM31.3955 30.0743L29.0975 32.3723H23.8267C24.0741 31.3078 25.0305 30.5122 26.1691 30.5122H28.5578C28.7132 30.5122 28.8623 30.4505 28.9721 30.3405L30.3169 28.9958C30.6143 28.6985 31.098 28.6984 31.3954 28.9958C31.5395 29.1398 31.6187 29.3313 31.6187 29.535C31.6187 29.7388 31.5395 29.9302 31.3955 30.0743ZM38.8281 30.5142C38.8281 30.6219 38.7405 30.7095 38.6328 30.7095H32.3931C32.6508 30.3738 32.7908 29.9652 32.7908 29.535C32.7908 29.0183 32.5895 28.5324 32.2241 28.1671C31.4699 27.4128 30.2426 27.4129 29.4884 28.1671L28.3152 29.3403H27.0897C26.8845 27.6106 25.697 26.1449 24.0057 25.6005L19.3634 24.1063V20.2166C19.5815 19.6934 19.7023 19.1198 19.7023 18.5184V17.9754H20.4298C21.805 17.9754 22.9238 16.8566 22.9238 15.4814V14.7109C22.9238 13.7459 22.3724 12.9078 21.5686 12.4933V9.14086C21.5686 7.45305 20.6883 5.96789 19.3634 5.11742V1.95312C19.3634 1.84547 19.4511 1.75781 19.5588 1.75781H38.6328C38.7405 1.75781 38.8281 1.84547 38.8281 1.95312V30.5142Z" fill="CurrentColor"></path>
                        <path d="M34.1327 23.9453H32.9688C32.6452 23.9453 32.3828 24.2077 32.3828 24.5312C32.3828 24.8548 32.6452 25.1172 32.9688 25.1172H34.1327C34.4563 25.1172 34.7186 24.8548 34.7186 24.5312C34.7186 24.2077 34.4563 23.9453 34.1327 23.9453Z" fill="CurrentColor"></path>
                      </g>
                      <defs>
                        <clipPath id="clip0_9088_5407">
                          <rect width="40" height="40" fill="CurrentColor"></rect>
                        </clipPath>
                      </defs>
                    </svg>
                  </div>
                  <h2 class="heading text-28">{{ $ex->title }}</h2>
                  <div class="text text-16">
                   {{ $ex->content }}
                  </div>
              
                </div>
              </div>
              @endforeach
         
            </div>
          </div>
        </div>
      </div>
    {{-- /end --}}










    <section class="section-box py-5 ">
        <div class="container">
            <!-- Section 2: Services -->
            <div class="row align-items-center mb-5 position-relative">
                <h3 class="fw-bold mb-3">{{ $service->section2_heading }}</h3>
                <p class="text-muted mb-4">{{ $service->section2_content }}</p>
                <!-- LEFT CARDS -->
                <div class="col-md-4 d-flex flex-column justify-content-center">
                    @foreach ($types->take(ceil($types->count() / 2)) as $type)
                        <div class="service-card-modern d-flex align-items-start p-3 rounded shadow-sm mb-4">
                            <div class="icon-wrap position-relative me-3">
                                <svg width="50" height="50" viewBox="0 0 100 100">
                                    <defs>
                                        <linearGradient id="squareGradLeft{{ $loop->index }}" x1="0%"
                                            y1="0%" x2="100%" y2="100%">
                                            <stop offset="0%" stop-color="#00c6ff" />
                                            <stop offset="100%" stop-color="#0072ff" />
                                        </linearGradient>
                                    </defs>
                                    <rect x="10" y="10" width="80" height="80" rx="18"
                                        fill="url(#squareGradLeft{{ $loop->index }})">
                                        <animateTransform attributeName="transform" type="rotate" from="0 50 50"
                                            to="360 50 50" dur="5s" repeatCount="indefinite" />
                                    </rect>
                                </svg>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-1">{{ $type->title }}</h5>
                                <p class="text-muted mb-0">{{ $type->content }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- CENTER IMAGE -->
                <div class="col-md-4 text-center mb-4 centerimg">
                    <img src="{{ asset('storage/' . $service->section2_image) }}"
                        alt="{{ $service->section2_heading }}"
                        class="img-fluid rounded shadow-lg service-main-image">
                </div>

                <!-- RIGHT CARDS -->
                <div class="col-md-4 d-flex flex-column justify-content-center">
                    @foreach ($types->slice(ceil($types->count() / 2)) as $type)
                        <div class="service-card-modern d-flex align-items-start p-3 rounded shadow-sm mb-4">
                            <div class="icon-wrap position-relative me-3">
                                <svg width="50" height="50" viewBox="0 0 100 100">
                                    <defs>
                                        <linearGradient id="squareGradRight{{ $loop->index }}" x1="0%"
                                            y1="0%" x2="100%" y2="100%">
                                            <stop offset="0%" stop-color="#00c6ff" />
                                            <stop offset="100%" stop-color="#0072ff" />
                                        </linearGradient>
                                    </defs>
                                    <rect x="10" y="10" width="80" height="80" rx="18"
                                        fill="url(#squareGradRight{{ $loop->index }})">
                                        <animateTransform attributeName="transform" type="rotate" from="0 50 50"
                                            to="360 50 50" dur="5s" repeatCount="indefinite" />
                                    </rect>
                                </svg>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-1">{{ $type->title }}</h5>
                                <p class="text-muted mb-0">{{ $type->content }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <!-- Section 3: Technologies -->
     {{--        <div class="row mb-5 text-center">
                <div class="col-12 mb-4">
                    <h3 class="fw-bold">Technologies & Platforms</h3>
                </div>
                @foreach ($usedtechnologies as $technology)
                    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                        <div class="tech-card position-relative p-3 rounded shadow-sm hover-animate">
                            <!-- SVG animated circle background -->

                            <img src="{{ asset('storage/' . $technology->image_path) }}"
                                alt="{{ $technology->alt }}" class="img-fluid mb-2" style="height:50px;">


                        </div>
                    </div>
                @endforeach
            </div> --}}

  
    <div class="running-content mt-100">
        <div class="content-inner">
          <div class="content-lists running-animation">
                @for ($i = 0; $i < 4; $i++)
                    <div class="content-item">
                        @foreach ($usedtechnologies as $technology)
                            <a href="javascript:void(0)" class="content-link">
                                <img
                                    src="{{ asset('storage/' . $technology->image_path) }}"
                                    width="108"
                                    height="48"
                                    loading="lazy"
                                    alt="{{ $technology->alt ?? $technology->name ?? 'Technology' }}"
                                >
                            </a>
                        @endforeach
                    </div>
                @endfor

            </div>
    </div>












        </div>
    </section>

    <section class="bg-light pt-100 pb-100">
                  <div class="working-process recent-project">
                <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>Working Process</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">
                                {{ $service->section3_heading }}
                            </h2>
                        </div>
                        <div class="section-headings-right text text-18 aos-init aos-animate" data-aos="fade-left">
                            We follow a clear, step-by-step process to deliver projects efficiently—from requirement
                            gathering and design to development, deployment, and ongoing support.
                        </div>
                    </div>

                    <div class="section-content">
                        <div class="row product-grid">
                            @foreach ($process as $pro)
                                <div class="col-12 col-md-6 col-lg-4 aos-init aos-animate" data-aos="fade-up"
                                    data-aos-delay="{{ $loop->iteration * 100 }}">
                                    <div class="card-working-process">
                                        <h2 class="heading text-20 fw-500">{{ $pro->title }}</h2>
                                        <div class="card-icon-text card-icon-text-horizontal has-border">
                                            <div class="svg-wrapper">
                                                <!-- Optional: use $pro->icon if you have an icon per process -->
                                                <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="{{ $pro->icon ?? '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.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605' }}">
                                                    </path>
                                                </svg>
                                            </div>
                                            <div class="content">
                                                <p class="text text-16">{{ $pro->content }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

    </section>




    <div class="faq faq-2 mt-100">
        <div class="container">
            <div class="section-headings section-headings-horizontal">
                <div class="section-headings-left w-100">
                    <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>Services</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">
                        {{ $service->section4_heading }}
                    </h2>
                </div>
                <div class="section-headings-right">
                    <div class="text text-18 aos-init aos-animate" data-aos="fade-up" data-aos-delay="80">
                        {{ $service->section4_content }} </div>
                </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('storage/' . $service->section4_image) }}" loading="lazy"
                                    alt="Image">

                            </div>

                        </modal-video>
                    </div>
                    <div class="col-lg-6 col-12">
                        <faq-accordion>
                            <div class="accordion-list">
                                @foreach ($services as $key => $serv)
                                    <div class="accordion-block aos-init aos-animate {{ $key === 0 ? 'active' : '' }}"
                                        data-aos="fade-up"
                                        @if ($key > 0) data-aos-delay="{{ $key * 50 }}" @endif>

                                        <div class="accordion-opener heading text-22">
                                            {{ $serv->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_{{ $key }})">
                                                        <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 id="clip0_{{ $key }}">
                                                            <rect width="24" height="24" fill="CurrentColor">
                                                            </rect>
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                            </div>
                                        </div>

                                        <div class="accordion-content" style="{{ $key === 0 ? '' : '' }}">
                                            <div class="accordion-content-inner text text-18">
                                                {!! $serv->content !!}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </faq-accordion>

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













    <!-- Gallery Section -->

    @php
        $galleryImages = \App\Models\Gallery::where('project_id', $service->id)->get();
    @endphp

    @if ($galleryImages->isNotEmpty())
        <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;">Service Gallery</h2>
                    <p class="font-lg color-text-paragraph-2 wow animate__animated animate__fadeInUp"
                        style="visibility: hidden; animation-name: none;">Browse through images showcasing our services
                    </p>
                </div>

                <div class="mt-50">
                    <div class="box-swiper style-nav-top">
                        <div class="swiper-container swiper-group-4 swiper"
                            data-swiper='{"slidesPerView":4,"spaceBetween":30,"loop":true,"autoplay":{"delay":2500,"disableOnInteraction":false},"speed":800,"navigation":{"nextEl":".swiper-button-next-4","prevEl":".swiper-button-prev-4"},"breakpoints":{"1200":{"slidesPerView":4},"992":{"slidesPerView":3},"768":{"slidesPerView":2},"576":{"slidesPerView":1}}}'>

                            <div class="swiper-wrapper pb-10 pt-5" style="height: 300px;">
                                @php
                                    $galleryImages = \App\Models\Gallery::where('project_id', $service->id)->get();
                                @endphp

                                @forelse ($galleryImages as $image)
                                    <div class="swiper-slide" style="width: 200px; margin-right: 15px;">
                                        <div class="card-grid-5">
                                            <div class="card-grid-5 hover-up"
                                                style="background-image: url('{{ asset('storage/' . $image->image_path) }}');
                        background-size: cover;
                        background-position: center;
                        height: 300px;
                        border-radius: 8px;">
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="swiper-slide">
                                        <p>No images found.</p>
                                    </div>
                                @endforelse


                            </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>
            </div>
        </section>
    @endif
    <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 blogs, 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">
                            @foreach ($recentblogs as $blog)
                                <div class="swiper-slide" style="width: 309px; margin-right: 30px;">
                                    <div class="card-grid-5">
                                        <div class="card-grid-5 hover-up"
                                            style="background-image: url('{{ asset('storage/' . $blog->image_path) }}')">
                                            <a
                                                href="{{ route('blogdetails', ['url' => urlencode(str_replace(' ', '-', strtolower($blog->url)))]) }}">
                                                <div class="box-cover-img">
                                                    <div class="content-bottom">
                                                        <h5 class="color-white mb-20 blogtitle">{{ $blog->title }}
                                                        </h5>
                                                        <div class="author d-flex align-items-center mr-20">
                                                            <img class="mr-10" alt="{{ $blog->author_name }}"
                                                                src="{{ asset('img/user4.png') }}">
                                                            <span
                                                                class="color-white font-sm mr-25">{{ $blog->author }}</span>
                                                            <span
                                                                class="color-white font-sm">{{ $blog->created_at->format('d F Y') }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </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')