@extends('theme')
  @section('content')
      <main class="main">

          <!-- Page Title -->
          <div class="page-title" data-aos="fade">
              <div class="heading">
                  <div class="container">
                      <div class="row d-flex justify-content-center text-center">
                          <div class="col-lg-8">
                              <h1>Kontak Kami<br></h1>

                          </div>
                      </div>
                  </div>
              </div>
              <nav class="breadcrumbs">
                  <div class="container">
                      <ol>
                          <li><a href="/">Home</a></li>
                          <li class="current">Kontak Kami<br></li>
                      </ol>
                  </div>
              </nav>
          </div><!-- End Page Title -->

          <section id="contact" class="contact section">

              <div class="mb-5" data-aos="fade-up" data-aos-delay="200">
                  <iframe style="border:0; width: 100%; height: 300px;"
                      src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d48389.78314118045!2d-74.006138!3d40.710059!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a22a3bda30d%3A0xb89d1fe6bc499443!2sDowntown%20Conference%20Center!5e0!3m2!1sen!2sus!4v1676961268712!5m2!1sen!2sus"
                      frameborder="0" allowfullscreen="" loading="lazy"
                      referrerpolicy="no-referrer-when-downgrade"></iframe>
              </div><!-- End Google Maps -->

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

                  <div class="row gy-4">

                      <div class="col-lg-12">
                          <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300">
                              <i class="bi bi-geo-alt flex-shrink-0"></i>
                              <div>
                                  <h3>Alamat</h3>
                                  <p>{{ $contact->address }}</p>
                              </div>
                          </div><!-- End Info Item -->

                          <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400">
                              <i class="bi bi-telephone flex-shrink-0"></i>
                              <div>
                                  <h3>Telepon</h3>
                                  <p>{{ $contact->phone }}</p>
                              </div>
                          </div><!-- End Info Item -->

                          <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="500">
                              <i class="bi bi-envelope flex-shrink-0"></i>
                              <div>
                                  <h3>Email </h3>
                                  <p>{{ $contact->email }}</p>
                              </div>
                          </div><!-- End Info Item -->

                      </div>



                  </div>

              </div>

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



      </main>
  @endsection