{% extends '../layout/layout.html' %}

{% block content %}

    <!--==============================
    Contact Page Area  
    ==============================-->
    <section class="contact-page-area space">
        <div class="container">
            <div class="row gy-4 justify-content-center">
                <div class="col-md-6 col-lg-4">
                    <div class="contact-page-card bg-smoke">
                        <div class="contact-page-card-details">
                            <h4 class="contact-page-card_title">Main Office</h4>
                            <div class="contact-page-card-text"><i class="ri-phone-line"></i><a class="contact-page-card_link" href="tel:0022730240369">+00 (22) 730 240 369</a></div>   
                            <div class="contact-page-card-text"><i class="ri-mail-line"></i><a class="contact-page-card_link" href="mailto:construz.info@gmail.com">construz.info@gmail.com</a></div>   
                            <div class="contact-page-card-text"><i class="ri-time-line"></i>Mon - Sat 10.00 - 18.00</div>
                        </div>
                        <div class="contact-page-card-thumb">
                            <img src="/static/img/normal/contact_page1-1.png" alt="img">
                        </div>  
                    </div>
                </div>

                <div class="col-md-6 col-lg-4">
                    <div class="contact-page-card bg-smoke">
                        <div class="contact-page-card-details">
                            <h4 class="contact-page-card_title">London Office</h4>
                            <div class="contact-page-card-text"><i class="ri-phone-line"></i><a class="contact-page-card_link" href="tel:0022730240369">+32 (0) 800 240 458</a></div>   
                            <div class="contact-page-card-text"><i class="ri-mail-line"></i><a class="contact-page-card_link" href="mailto:construz.info@gmail.com">construz.info@gmail.com</a></div>   
                            <div class="contact-page-card-text"><i class="ri-time-line"></i>Mon - Sat 12.00 - 20.00</div>
                        </div>
                        <div class="contact-page-card-thumb">
                            <img src="/static/img/normal/contact_page1-2.png" alt="img">
                        </div>  
                    </div>
                </div>

                <div class="col-md-6 col-lg-4">
                    <div class="contact-page-card bg-smoke">
                        <div class="contact-page-card-details">
                            <h4 class="contact-page-card_title">New York City</h4>
                            <div class="contact-page-card-text"><i class="ri-phone-line"></i><a class="contact-page-card_link" href="tel:0022730240369">+32 (0) 800 240 458</a></div>   
                            <div class="contact-page-card-text"><i class="ri-mail-line"></i><a class="contact-page-card_link" href="mailto:construz.info@gmail.com">construz.info@gmail.com</a></div>   
                            <div class="contact-page-card-text"><i class="ri-time-line"></i>Mon - Sat 08.00 - 16.00</div>
                        </div>
                        <div class="contact-page-card-thumb">
                            <img src="/static/img/normal/contact_page1-3.png" alt="img">
                        </div>  
                    </div>
                </div>

            </div>
        </div>
    </section>  
    
    <!--==============================
    Contact Area  
    ==============================-->
    <section class="contact-area-2 space-bottom overflow-hidden">        
        <div class="container">
            <div class="contact-wrap2 space overflow-hidden" data-bg-src="/static/img/bg/contact-bg3-1.png">
                <div class="section-animation-shape1-1 shape-mockup animation-infinite" data-top="0" data-left="0" data-bg-src="/static/img/shape/global-line-shape1.png">
                </div>
                <div class="row gy-60 justify-content-lg-end justify-content-center">
                    <div class="col-xl-7">
                        <div class="contact-form-wrap">
                            <div class="title-area">
                                <span class="sub-title text-theme"><img src="/static/img/icon/section-subtitle-icon.svg" alt="img">Get Free Quote </span>
                                <h2 class="sec-title">Have a project in mind?</h2>
                            </div>
                            <form action="mail.php" method="POST" class="contact-form ajax-contact">
                                <div class="row gy-4">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" class="form-control" name="name" id="name" placeholder="Your Name">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="email" class="form-control" name="email" id="email" placeholder="Email Address">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="tel" class="form-control" name="number" id="number" placeholder="Phone Number">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select name="subject" id="subject" class="single-select nice-select form-select">
                                                <option value="" disabled selected hidden>Your Inquiry</option>
                                                <option value="Web Design">Web Design</option>
                                                <option value="Web Development">Web Development</option>
                                                <option value="Engine Diagnostics">Engine Diagnostics</option>
                                                <option value="Digital Marketing">Digital Marketing</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-group ">
                                            <textarea name="message" id="message" cols="30" rows="3" class="form-control" placeholder="Message..."></textarea>
                                        </div>
                                    </div>
                                    <div class="form-btn col-12">
                                        <button class="btn w-100">Submit Now <i class="ri-arrow-right-up-line"></i></button>
                                    </div>
                                </div>
                                <p class="form-messages mb-0 mt-3"></p>
                            </form>
                        </div>
                    </div>            
                </div>
            </div>
            
        </div>
    </section>   

    <div class="map-area overflow-hidden">
        <div class="map-sec">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3644.7310056272386!2d89.2286059153658!3d24.00527418490799!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39fe9b97badc6151%3A0x30b048c9fb2129bc!2s!5e0!3m2!1sen!2sbd!4v1651028958211!5m2!1sen!2sbd" allowfullscreen="" loading="lazy"></iframe>
        </div>
    </div>

{% endblock content %}