<section class="contact-us-section section-padding" id="section_6">
    <div class="container">
        <div class="section-header">
            <h2 class="text-center mb-4">CONTACT US</h2>
            <div class="heading-line" style="margin-top: -0.7em"></div>
            <p class="text-center mb-4">
                Don't Hesitate! Contact Us for Expert Support
            </p>
        </div>
        <div class="contact-box mx-auto">
            <div class="row">
                <!-- Image Column -->
                <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 position-relative">
                    <img src="{{ asset('assets/images/contact.png') }}" alt="Contact Us" class="img-fluid contact-image" />
                    <!-- Overlay Play Store Icon -->
                    <a href="https://play.google.com/store" target="_blank" class="play-store-icon-link">
                        <img src="{{ asset('assets/images/google-play btn.png') }}" alt="Play Store" class="img-fluid play-store-icon" />
                    </a>
                </div>
                <!-- Contact Form Column -->
                <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
                    <form class="contact-form" id="contactForm">
                        <div class="row">
                            <div class="col-xl-6 col-lg-6 col-md-6 form-group">
                                <label for="first_name">First Name</label>
                                <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" />
                                <span class="errorMessage"></span> <!-- Error message placeholder -->
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 form-group">
                                <label for="last_name">Last Name</label>
                                <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" />
                                <span class="errorMessage"></span> <!-- Error message placeholder -->
                            </div>
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Email" />
                            <span class="errorMessage"></span> <!-- Error message placeholder -->
                        </div>
                    
                        <div class="col-xl-12 col-lg-12 col-md-12 form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number" />
                            <span class="errorMessage"></span> <!-- Error message placeholder -->
                        </div>
                    
                        <div class="col-xl-12 col-lg-12 col-md-12 form-group">
                            <label for="message">Message</label>
                            <textarea class="form-control" id="message" name="message" rows="5" placeholder="Your Message"></textarea>
                            <span class="errorMessage"></span> <!-- Error message placeholder -->
                        </div>
                        <div id="formResponse"></div> <!-- Success message placeholder -->
                        <button type="submit" class="btn btn-send-message">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>