<main id="main">

  <!-- ======= Contact Section ======= -->
  <section id="contact" class="contact">
    <div class="container" data-aos="fade-up">

      <div class="section-title">
        <h2>Kontakt</h2>
        <p>
          Wir freuen uns darauf, Sie in unserem Salon in Dortmund oder Essen willkommen zu heißen und Ihnen zu helfen,
          Ihre Hautpflegeziele zu erreichen. Kontaktieren Sie uns für weitere Informationen, Terminvereinbarungen oder
          Fragen. Unser engagiertes Team steht Ihnen zur Verfügung und freut sich darauf, Ihnen den bestmöglichen
          Service zu bieten.

        </p>
      </div>

      <div>
        <iframe style="border:0; width: 100%; height: 270px;"
          src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9932.019883313673!2d7.4530748!3d51.5131248!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b91760bff07a11%3A0x427f28131548750!2sDortmund!5e0!3m2!1sde!2sde!4v1686584734113!5m2!1sde!2sde"
          allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>


      <div class="row mt-5">

        <div class="col-lg-4">
          <div class="info">
            <div class="address">
              <i class="bi bi-geo-alt"></i>
              <h4>Locations:</h4>
              <p>Dortmund</p>
            </div>

            <div class="email">
              <i class="bi bi-envelope"></i>
              <h4>Email:</h4>
              <p>info@diosakosmetik.com</p>
            </div>

            <div class="phone" style="display: none;">
              <i class="bi bi-phone"></i>
              <h4>Mobil:</h4>
              <p></p>
            </div>

          </div>

        </div>

        <div class="col-lg-8 mt-5 mt-lg-0" style="display: none">

          <form action="forms/contact.php" method="post" role="form" class="php-email-form">
            <div class="row">
              <div class="col-md-6 form-group">
                <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
              </div>
              <div class="col-md-6 form-group mt-3 mt-md-0">
                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
              </div>
            </div>
            <div class="form-group mt-3">
              <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
            </div>
            <div class="form-group mt-3">
              <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
            </div>
            <div class="my-3">
              <div class="loading">Loading</div>
              <div class="error-message"></div>
              <div class="sent-message">Your message has been sent. Thank you!</div>
            </div>
            <div class="text-center"><button type="submit">Send Message</button></div>
          </form>

        </div>

      </div>

    </div>
  </section><!-- End Contact Section -->

</main><!-- End #main -->