@extends('frontend.layouts.master')
@section('content')
    <!-- Start page content -->
    <div class="container">
        <div class="row overflow-hidden">
            <div class="col-12 col-md-10 offset-md-1 mt-5">
                <div class="row">
                    <div class="col-12 col-sm-6 col-md-4 text-center mb-5 mb-md-0 wow fadeInDown" data-wow-delay=".5s">
                        <span class="fables-iconmap-icon fa-3x fables-main-text-color fables-second-hover-color"></span>
                        <h2 class="font-16 semi-font fables-main-text-color my-3">Address Information</h2>
                        <p class="font-14 fables-forth-text-color">
                            {{$contact_us->address}}</p>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 text-center mb-5 mb-md-0 wow fadeInDown" data-wow-delay=".8s">
                        <span class="fables-iconphone fa-3x fables-main-text-color fables-second-hover-color"></span>
                        <h2 class="font-16 semi-font fables-main-text-color my-3">Mail & Phone number</h2>
                        <p class="font-14 fables-forth-text-color">{{$contact_us->email}}</p>
                        <p class="font-14 fables-forth-text-color">{{$contact_us->telephone_number}}, {{$contact_us->mobile_number}}, {{$contact_us->mobile_number2}}</p>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 text-center mb-5 mb-md-0 wow fadeInDown" data-wow-delay="1.1s">
                        <span class="fables-iconshare-icon fa-3x fables-main-text-color fables-second-hover-color"></span>
                        <h2 class="font-16 semi-font fables-main-text-color my-3">Stay In Touch</h2>
                        <ul class="nav fables-contact-social-links">
                            <li><a href="{{$contact_us->facebook_link}}" target="_blank"><i class="fab fa-facebook-f fables-forth-text-color fa-fw"></i></a></li>
                            <li><a href="{{$contact_us->instagram}}" target="_blank"><i class="fab fa-instagram fables-forth-text-color  fa-fw"></i></a></li>
                            <li><a href="{{$contact_us->twitter}}" target="_blank"><i class="fab fa-twitter fables-forth-text-color    fa-fw"></i></a></li>
                            <li><a href="{{$contact_us->linkend}}" target="_blank"><i class="fab fa-linkedin fables-forth-text-color   fa-fw"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="mt-0 mb-5 my-md-5">
                    <h3 class="font-35 font-weight-bold fables-main-text-color text-center">Contact Us</h3>
                    <p class="mt-3 fables-forth-text-color  text-center">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal </p>

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

        <div class="row mb-4 mb-md-5 overflow-hidden">
            <div class="col-12 col-sm-6 wow fadeInLeft">
                <form class="fables-contact-form">
                    <div class="form-group">
                        <input type="text" name="name" class="form-control rounded-0 p-3"  placeholder="Name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" class="form-control rounded-0 p-3" placeholder="Email" required>
                    </div>
                    <div class="form-group">
                        <input type="text" name="contact" class="form-control rounded-0 p-3" placeholder="Mobile No." required>
                    </div>
                    <div class="form-group">
                        <textarea name="message" class="form-control rounded-0 p-3" placeholder="Message" rows="3"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Send</button>
                </form>
            </div>
            <div class="col-12 col-sm-6 wow fadeInRight">
                {!! $contact_us->map !!}
            </div>
        </div>
    </div>
    <!-- /End page content -->

@endsection