{% extends "layout.html" %}

{% set title = 'Contact us' %}

{% block content %}

<section class="intro">
    <div class='container'>
        <div class="intro-content">
            <div id="holder">
                <h2 class="no-margin mbmd">Got a question? Contact us</h2>
                <div id="slogans">
                    <p class="slogan text-center"><strong>We'd love to hear from you!</strong></p>
                    <p class="slogan text-center"><strong>a new brand software comapany based</strong></p>
                    <p class="slogan text-center"><strong>a new brand software comapany</strong></p>
                    <p class="slogan text-center"><strong>a new brand software comapany based in Egypt,</strong></p>
                    <p class="slogan text-center"><strong>a new brand software comapany based in</strong></p>
                    <p class="slogan text-center"><strong>a new brand software</strong></p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad">
    <div class="container">
        <div id="map"></div>
        <div class="address-info">
            <div class="office">
                <h3 class="no-margin mbxlg text-bold">Cairo Office</h3>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="address mbxlg">
                            <h4 class="no-margin mbsm text-semibold">Address</h4>
                            <p>
                                3 Teeba St., Mohandseen, Giza, Egypt<br>
                                B5, Smart Village, Cairo Alex Desert Road
                            </p>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="working">
                            <p>
                                Working hours<br>
                                from Sunday to Thursday<br>
                                from 8:00am to 5:00pm
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="phone mbxlg">
                            <h4 class="no-margin mbsm text-semibold">Phone</h4>
                            +2 011 00 928 773
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="email">
                            <h4 class="no-margin mbsm text-semibold">Email</h4>
                            info@ordochao.com
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <form action="" class="contact">
            <h2 class="no-margin mblg text-semibold">Send us a message</h2>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group mblg">
                        <input type="text" placeholder="Enter your name" name="name" id="name" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group mblg">
                        <input type="email" placeholder="Enter your e-mail" name="email" id="email" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group mblg">
                        <input type="text" placeholder="Enter your mobile number" name="telephone" id="telephone" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group mblg">
                        <select placeholder="Subject line" name="subject" id="subject" required>
                            <option disabled hidden selected>Select Service</option>
                            <option>Engineering</option>
                            <option>Software</option>
                            <option>Visualization</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <textarea name="message" placeholder="I'd like to chat about" id="message" cols="30" rows="5" required></textarea>
                    </div>
                </div>
                <div class="col-sm-3">
                    <input type="submit" class="btn" value="Send Message" data-hover>
                </div>
            </div>
        </form>
    </div>
</section>

{% include 'partials/footer.html' %}

{% endblock content %}

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