@extends('website.layout.app')
@section('content') 
@include('website.layout.about-header')

    <section class="contact-section"  data-aos="fade-up"
    data-aos-anchor-placement="top-bottom"  data-aos-delay="300">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-12 col-12">
                    <div class="contact-form">
                        <h4>We'd love to hear from you</h4>
                        <p>Send us a message and we'll respond as soon as possible</p>
                        <form>
                            <div class="row">
                                <div class="col-6 mb-3 mt-3">
                                    <input type="email" class="form-control" id="email" placeholder="Enter Name"
                                        name="email">
                                </div>
                                <div class="col-6 mb-3 mt-3">
                                    <input type="email" class="form-control" id="email" placeholder="Enter Email"
                                        name="email">
                                </div>
                                <div class="col-12 mb-3 mt-3">
                                    <textarea class="form-control" rows="5" id="comment" placeholder="Message"
                                        name="text"></textarea>
                                </div>
                                <div class="col-12 last-button">
                                    <button class="btn">Submit</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
                <div class="col-lg-4 col-md-12 col-12 ">
                    <div class="site-address">
                        <h4>Get In Touch With us</h4>
                        <div class="contact-address mt-4">
                            <div>
                                <i class="fa fa-map-marker" aria-hidden="true"></i>
                            </div>
                            <div>
                                <h5>Address</h5>
                                <a href="https://goo.gl/maps/zK1r1ZmPfNiGiE1JA" target="_blank"> Al-Gharrafa, P.O Box
                                    14650 Doha, Qatar.</a>
                            </div>
                        </div>
                        <div class="contact-address mt-4">
                            <div>
                                <i class="fa fa-phone" aria-hidden="true"></i>
                            </div>
                            <div>
                                <h5>Office</h5>
                              
                                <a href="tel:+974 1111 2222"> +974 1111 2222</a> ,<br>
                                <a href="tel:+974 3333 4444">+974 3333 4444</a>
                              
                            </div>
                        </div>
                        <div class="contact-address mt-4">
                            <div>
                                <i class="fa fa-envelope" aria-hidden="true"></i>
                            </div>
                            <div>
                                <h5>Email</h5>
                                <a href="mailto:loremipsum@gmail.com">loremipsum@gmail.com</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-12 mt-4">
                    <div class="map">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3606.413675691165!2d51.447546599999995!3d25.323896100000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45dc120c6b11cb%3A0xba571af464faa0be!2sAl%20Gharrafa%2C%20Doha%2C%20Qatar!5e0!3m2!1sen!2sin!4v1690609269865!5m2!1sen!2sin"
                            width="100%" height="500px" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection