{% extends "layout.html" %}

{% set title = 'Contact us' %}

{% block content %}

<section class="hero-map">
    <div id="map"></div>
</section>

<section class="contact">
    <div class="container">
        <div class="row">
            <div class="col-sm-5 mob-off">
                <div class="side-info">
                    <div class="office">
                        <h3 class="no-margin mbxlg">Cairo Office</h3>
                        <div class="address mbxlg">
                            <h4 class="no-margin mbsm">Address</h4>
                            <p>
                                45,Michael Bakhoum St.Dokki,<br>
                                Giza, Egypt - 12311
                            </p>
                        </div>
                        <div class="phone mbxlg">
                            <h4 class="no-margin mbsm">Phone</h4>
                            <a href="tel:+201222000556">+2 012 220 00 556</a>
                            <a href="tel:+201222000556">+2 012 220 00 556</a>
                        </div>
                        <div class="email">
                            <h4 class="no-margin mbsm">Email</h4>
                            <a href="mailto:info@idia.design">info@idia.design</a>
                        </div>
                    </div>
                    <div class="office">
                        <h3 class="no-margin mbxlg">Dubai Office</h3>
                        <div class="address mbxlg">
                            <h4 class="no-margin mbsm">Address</h4>
                            <p>
                                Iwan interiors<br>
                                D3, Premises106, Building8,<br>
                                Dubai, UAE
                            </p>
                        </div>
                        <div class="phone mbxlg">
                            <h4 class="no-margin mbsm">Phone</h4>
                            <a href="tel:+201222000556">+2 012 220 00 556</a>
                            <a href="tel:+201222000556">+2 012 220 00 556</a>
                        </div>
                        <div class="email">
                            <h4 class="no-margin mbsm">Email</h4>
                            <a href="mailto:info@idia.design">info@idia.design</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 mob-on">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="side-info">
                            <div class="office">
                                <h3 class="no-margin mbxlg">Cairo Office</h3>
                                <div class="address mbxlg">
                                    <h4 class="no-margin mbsm">Address</h4>
                                    <p>
                                        45,Michael Bakhoum St.Dokki,<br>
                                        Giza, Egypt - 12311
                                    </p>
                                </div>
                                <div class="phone mbxlg">
                                    <h4 class="no-margin mbsm">Phone</h4>
                                    <a href="tel:+201222000556">+2 012 220 00 556</a>
                                    <a href="tel:+201222000556">+2 012 220 00 556</a>
                                </div>
                                <div class="email">
                                    <h4 class="no-margin mbsm">Email</h4>
                                    <a href="mailto:info@idia.design">info@idia.design</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 mtlg">
                        <div class="side-info">
                            <div class="office">
                                <h3 class="no-margin mbxlg">Dubai Office</h3>
                                <div class="address mbxlg">
                                    <h4 class="no-margin mbsm">Address</h4>
                                    <p>
                                        Iwan interiors<br>
                                        D3, Premises106, Building8,<br>
                                        Dubai, UAE
                                    </p>
                                </div>
                                <div class="phone mbxlg">
                                    <h4 class="no-margin mbsm">Phone</h4>
                                    <a href="tel:+201222000556">+2 012 220 00 556</a>
                                    <a href="tel:+201222000556">+2 012 220 00 556</a>
                                </div>
                                <div class="email">
                                    <h4 class="no-margin mbsm">Email</h4>
                                    <a href="mailto:info@idia.design">info@idia.design</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-7">
                <div class="contact-contnet">
                    <h2 class="no-margin mbxlg capitalize">contact us</h2>
                    <p>
                        Have an inquiry? Got an idea? Want to leave us some feedback
                        on one of our projects?

                        <span class="mtxlg">
                            <strong>
                                We are listening
                            </strong>
                        </span>
                    </p>
                    <form action="">
                        <div class="form-group">
                            <input type="text" name="name" placeholder="Name" required>
                        </div>
                        <div class="form-group">
                            <input type="number" min="0" onkeydown="javascript: return event.keyCode == 69 ? false : true" name="mobile" placeholder="Mobile NO." required >
                        </div>
                        <div class="form-group">
                            <input type="email" name="e-mail" placeholder="Email" required >
                        </div>
                        <div class="form-group ">
                            <input type="text" name="message" placeholder="Message" required>
                        </div>
                        <div class="row">
                            <div class="col-xs-8 col-xs-offset-4 col-sm-6 col-sm-offset-6">
                                <button type="submit" class="btn btn-arrow section-btn section-btn-left mtxxlg">
                                    Send {% include 'components/arrow-right-black.html' %}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="help cover join sec-pad" style="background-image: url('_assets/img/join.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="help-content">
                    <h2 class="capitalize mbmd afa">Join our team</h2>
                    <a class="btn btn-arrow mtxxlg mrmd mtxxlg capitalize afb" href="#">
                        Check out our vacancies {% include 'components/arrow-right.html' %}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock content %}
{% block mapJs %}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA7PtNSRiwvASsCr3H88ZDjijsoRlBMW8Q&callback=initMap"
        async defer></script>
{% endblock %}