@extends('client.layout.master')
@section('content')
    <style>
        .fly-in-text {
            list-style: none;
            position: absolute;
            color: white;
            left: 35%;
            top: 50%;
            /* transform: translateX(-50%) translateY(-50%); */
        }

        .fly-in-text li {
            display: inline-block;
            /* margin-right: 50px; */
            font-family: Open Sans, Arial;
            font-weight: 300;
            font-size: 3em;
            opacity: 1;
            transition: all 2.5s ease;
        }

        .fly-in-text li:last-child {
            margin-right: 0;
        }

        .fly-in-text.hidden li {
            opacity: 0;
        }

        .fly-in-text.hidden li:nth-child(1) {
            transform: translateX(-200px) translateY(-200px);
        }

        .fly-in-text.hidden li:nth-child(2) {
            transform: translateX(20px) translateY(100px);
        }

        .fly-in-text.hidden li:nth-child(3) {
            transform: translateX(-150px) translateY(-80px);
        }

        .fly-in-text.hidden li:nth-child(4) {
            transform: translateX(10px) translateY(-200px);
        }

        .fly-in-text.hidden li:nth-child(5) {
            transform: translateX(-300px) translateY(200px);
        }

        .fly-in-text.hidden li:nth-child(6) {
            transform: translateX(20px) translateY(-20px);
        }

        .fly-in-text.hidden li:nth-child(7) {
            transform: translateX(30px) translateY(200px);
        }

        .fly-in-text.hidden li:nth-child(7) {
            transform: translateX(40px) translateY(100px);
        }

        .fly-in-text.hidden li:nth-child(8) {
            transform: translateX(50px) translateY(-60px);
        }

        .fly-in-text.hidden li:nth-child(9) {
            transform: translateX(60px) translateY(20px);
        }

        .fly-in-text.hidden li:nth-child(10) {
            transform: translateX(70px) translateY(-100px);
        }

        .fly-in-text.hidden li:nth-child(11) {
            transform: translateX(80px) translateY(100px);
        }

        .fly-in-text.hidden li:nth-child(12) {
            transform: translateX(90px) translateY(-10px);
        }

        .fly-in-text.hidden li:nth-child(13) {
            transform: translateX(100px) translateY(10px);
        }

        hr.solid {
            border-top: 3px solid #000000;
            width: 50%;
            margin: 10px auto 0 auto;
        }

        input::placeholder {
            font-size: small;
            padding: 10px;
        }

        textarea::placeholder {
            font-size: small;
            padding: 10px;
        }

    </style>
    <section id="subheader" class="text-light contactbg">
        <div class="center-y relative text-center" style="background-size: cover;">
            <div class="container" style="background-size: cover;">
                <div class="row" style="background-size: cover;">

                    <div class="col-md-12 text-center" style="background-size: cover;">

                    </div>
                    <div class="clearfix" style="background-size: cover;"></div>
                </div>
            </div>
        </div>
    </section>
    <section aria-label="section" style="background-size: cover;">
        <div class="container" style="background-size: cover;">
            <div class="row" style="background-size: cover;">

                <div class="col-lg-8 mb-sm-30" style="background-size: cover;">
                    <h3>Have a Question?</h3>
                    <p>Leave us a message and we'll get back to you within 24 hours.<br/>
                        Contact us at <strong>(866) 283-0952</strong> for
                        immediate assistance.</p>
                    <form name="contactForm" id="contact_form" class="form-border" method="post"
                        action="{{ route('contactus.process') }}">
                        @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif
                        @csrf
                        <div class="field-set" style="background-size: cover;">
                            <input type="text" name="name" id="name" class="form-control shadow" placeholder="Your Name"
                                required>
                            <span class="text-danger">{{ $errors->first('name') }}</span>
                        </div>

                        <div class="field-set" style="background-size: cover;">
                            <input type="text" name="email" id="email" class="form-control shadow" placeholder="Your Email"
                                required>
                            <span class="text-danger">{{ $errors->first('email') }}</span>
                        </div>

                        <div class="field-set" style="background-size: cover;">
                            <input type="text" name="phone" id="phone" class="form-control shadow" placeholder="Your Phone"
                                required>
                            <span class="text-danger">{{ $errors->first('phone') }}</span>
                        </div>

                        <div class="field-set shadow" style="background-size: cover;">
                            <textarea name="message" id="message" class="form-control" placeholder="Your Message"
                                required></textarea>
                            <span class="text-danger">{{ $errors->first('message') }}</span>
                        </div>
                        {{-- <p>
                            <div class="g-recaptcha" data-sitekey="{{ env('NOCAPTCHA_SITEKEY') }}"></div>
                            <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
                        </p> --}}
                        <div class="spacer-half" style="background-size: cover;"></div>

                        <div id="submit" style="background-size: cover;">
                            <input type="submit" value="Submit Form" class="btn btn-custom">
                        </div>
                        <div id="mail_success" class="success" style="background-size: cover;">Your message has been
                            sent successfully.</div>
                        <div id="mail_fail" class="error" style="background-size: cover;">Sorry, error occured this
                            time sending your message.</div>
                    </form>
                </div>

                <div class="col-lg-4" style="background-size: cover;">

                    <div class="padding40 box-rounded mb30 text-white bk-color">
                        <address class="s1">
                            <h3 class="text-white ml-2">Office</h3>
                            <span><i class="fa fa-map-marker fa-lg"></i>Canada Commerce 2164 Montreal Road, Unit 5 Suite #8324 Ottawa, ON K1J 1G4</span>
                            <span><i class="fa fa-phone fa-lg"></i>(866) 283-0952</span>
                            <span><i class="fa fa-envelope-o fa-lg"></i><a
                                    href="mailto:contact@example.com">Info@canadacommerce.org</a></span>
                        </address>
                    </div>


                    {{-- <div class="padding40 bg-color text-light box-rounded" style="background-size: cover;">
                    <h3>AU Office</h3>
                    <address class="s1">
                        <span><i class="fa fa-map-marker fa-lg"></i>100 Mainstreet Center, Sydney</span>
                        <span><i class="fa fa-phone fa-lg"></i>+61 333 9296</span>
                        <span><i class="fa fa-envelope-o fa-lg"></i><a href="mailto:contact@CanadaEnterprise.com">contact@CanadaEnterprise.com</a></span>

                    </address>
                </div> --}}

                </div>

            </div>
        </div>

    </section>
@endsection
@push('script')
 
    <script>
        $(function() {
            setTimeout(function() {
                $('.fly-in-text').removeClass('hidden');
            }, 500);
        })();
    </script>

@endpush