@extends('frontEnd.masterNew')
@section('title', 'Product Page')
@section('body')

    <section class="top-space-margin page-title-big-typography cover-background magic-cursor round-cursor" style="background-image: url({{asset('/')}}fontEndNew/assets/images/demo-accounting-contact-title-bg.jpg)">
        <div class="container">
            <div class="row extra-very-small-screen align-items-center">
                <div class="col-lg-5 col-sm-8 position-relative page-title-extra-small" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0, 1], &quot;translateX&quot;: [-30, 0], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                    <h1 class="mb-20px xs-mb-20px text-white text-shadow-medium"><span class="w-30px h-2px bg-yellow d-inline-block align-middle position-relative top-minus-2px me-10px"></span>Contact us</h1>
                    <h2 class="text-white text-shadow-medium fw-500 ls-minus-2px mb-0">Clients relationships</h2>
                </div>
            </div>
        </div>
    </section>


    <section>
        <div class="container overlap-section overlap-section-three-fourth" data-anime="{&quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 500, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
            <div class="row row-cols-md-1 justify-content-center">
                <div class="col-xl-10">
                    <div class="bg-white p-8 border-radius-6px box-shadow-double-large">
                        <div class="row">
                            <div class="col-9">
                                <h3 class="alt-font text-dark-gray fw-700 ls-minus-2px mb-50px xs-mb-35px">How we can help you?</h3>
                            </div>
                            <div class="col-3 text-end" data-anime="{ &quot;translateY&quot;: [30, 0], &quot;translateX&quot;: [-30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                <i class="bi bi-send icon-large text-dark-gray animation-zoom"></i>
                            </div>
                        </div>

                        <form action="{{route('contact.submit')}}" method="post" class="row contact-form-style-02">
                            @csrf
                            <div class="col-md-6 mb-30px">
                                <input class="input-name form-control required" type="text" id="name" name="name" placeholder="Your name*" required/>
                            </div>
                            <div class="col-md-6 mb-30px">
                                <input class="form-control required" type="email" id="email" name="email" placeholder="Your email address*" required/>
                            </div>
                            <div class="col-md-6 mb-30px">
                                <input class="form-control" type="tel" id="mobile" name="phone" placeholder="Your phone" required/>
                            </div>
                            <div class="col-md-6 mb-30px">
                                <input class="form-control" type="text" name="subject" placeholder="Your subject" required/>
                            </div>
                            <div class="col-md-12 mb-30px">
                                <textarea class="form-control" cols="40" rows="4" name="message" placeholder="Your message" required></textarea>
                            </div>
                            <div class="col-xl-7 col-md-7 last-paragraph-no-margin">
                                <p class="text-center text-md-start fs-15 lh-26"> @if(session('message')){{session('message')}} @else We are committed to protecting your privacy. We will never collect information about you without your explicit consent.@endif</p>
                            </div>
                            <div class="col-xl-5 col-md-5 text-center text-md-end sm-mt-20px">
                                <button class="btn btn-base-color btn-medium btn-round-edge" type="submit">Send message</button>
                            </div>
                            <div class="col-12">
                                <div class="form-results mt-20px d-none"></div>
                            </div>
                        </form>

                    </div>
                </div>
                <div class="row align-items-center justify-content-center mt-8">
                    <div class="col-md-auto text-center text-md-end sm-mb-20px">
                        <h6 class="text-dark-gray fw-600 mb-0 ls-minus-1px">Connect with social media </h6>
                    </div>
                    <div class="col-2 d-none d-lg-inline-block">
                        <span class="w-100 h-1px bg-dark-gray opacity-2 d-flex mx-auto"></span>
                    </div>

                    <div class="col-md-auto elements-social social-icon-style-04 text-center text-md-start ps-lg-0">
                        <ul class="large-icon dark">
                            <li class="m-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
                            <li class="m-0"><a class="dribbble" href="http://www.dribbble.com/" target="_blank"><i class="fa-brands fa-dribbble"></i><span></span></a></li>
                            <li class="m-0"><a class="twitter" href="https://www.twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
                            <li class="m-0"><a class="instagram" href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
                        </ul>
                    </div>

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


@endsection