<?php
require 'header.php';
?>
<style>
  .hero{
    min-height: 60vh !important;
}
</style>
<main>

    <!-- Hero Section -->
    <section id="hero" class="hero section">
        <div class="container">
            <div class="row gy-4">
                <div class="col-lg-7 order-2 order-lg-1 d-flex flex-column justify-content-center" data-aos="zoom-out">
                    <h1 style="color:#fff;">Contact Us</h1>
                    <p>We are happy to help you</p>
                    <div class="d-flex">
                        <a href="#about" class="btn-get-started">Get Started</a>
                        <a href="javascript:void(0);" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>Watch Video</span></a>
                    </div>
                </div>
                <div class="col-lg-5 order-1 order-lg-2 hero-img" data-aos="zoom-out" data-aos-delay="200">
                    <img src="assets/images/contact-us.jpg" class="img-fluid w-100 animated" alt="">
                </div>
            </div>
        </div>
    </section><!-- /Hero Section -->
    <!-- Contact Section -->
    <section id="contact" class="contact section">

        <!-- Section Title -->
        <div class="container section-title" data-aos="fade-up">
            <h2>Contact</h2>
            <p>Contact CloudCreatix today for expert AWS solutions, support, and personalized consultation.</p>
        </div><!-- End Section Title -->

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            <div class="row gy-4">

                <div class="col-lg-5">

                    <div class="info-wrap">
                        <a href="#location-map">
                            <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="200">
                                <i class="bi bi-geo-alt flex-shrink-0"></i>
                                <div>
                                    <h3>Address</h3>
                                    <p>H-146 & 147, H Block, Sector 63, Noida, Uttar Pradesh 201301</p>
                                </div>
                            </div>
                        </a>
                        <!-- End Info Item -->
                        <a href="tel:+91 1234 567 890">
                            <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300">
                                <i class="bi bi-telephone flex-shrink-0"></i>
                                <div>
                                    <h3>Call Us</h3>
                                    <p>+91 1234 567 890</p>
                                </div>
                            </div>
                        </a>
                        <!-- End Info Item -->

                        <a href="mailTo:cloudcreatix@gmail.com" class="__cf_email__" data-cfemail="">
                            <div class="info-item d-flex m-0" data-aos="fade-up" data-aos-delay="400">
                                <i class="bi bi-envelope flex-shrink-0"></i>
                                <div>
                                    <h3>Email Us</h3>
                                    <p>cloudcreatix@gmail.com</p>
                                </div>
                            </div>
                        </a>
                        <!-- End Info Item -->
                        <iframe style="padding: 40px 0;" id="location-map" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14008.51390659437!2d77.3776105!3d28.6259113!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cef929f784f0f%3A0xbd482bf3f6e23c9a!2sCloudCentric%20Infotech%20-%20Salesforce%20Partner!5e0!3m2!1sen!2sin!4v1718778018804!5m2!1sen!2sin" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>

                <div class="col-lg-7">
                    <form method="post" class="php-email-form" data-aos="fade-up" data-aos-delay="200">
                        <div class="row gy-4">

                            <div class="col-md-6">
                                <label for="name-field" class="pb-2">Your Name</label>
                                <input type="text" name="name" id="name-field" class="form-control" required="">
                            </div>

                            <div class="col-md-6">
                                <label for="email-field" class="pb-2">Your Email</label>
                                <input type="email" class="form-control" name="email" id="email-field" required="">
                            </div>

                            <div class="col-md-12">
                                <label for="subject-field" class="pb-2">Subject</label>
                                <input type="text" class="form-control" name="subject" id="subject-field" required="">
                            </div>

                            <div class="col-md-12">
                                <label for="message-field" class="pb-2">Message</label>
                                <textarea class="form-control" name="message" rows="10" id="message-field" required=""></textarea>
                            </div>

                            <div class="col-md-12 text-center">
                                <div class="loading">Loading</div>
                                <div class="error-message"></div>
                                <div class="sent-message">Your message has been sent. Thank you!</div>

                                <button type="submit">Send Message</button>
                            </div>

                        </div>
                    </form>
                </div><!-- End Contact Form -->

            </div>

        </div>

    </section><!-- /Contact Section -->
</main>
<?php
require 'footer.php';
?>