Contact Page Layout

<section id="contact" class="contact py-2" data-bootstrap-contains="containers">
  <div class="mb-6r">
    <h2 class="text-4xl font-semibold">Leading the way in green sustainability. Connect with Evolution Marketing today!</h2>
  </div>
  <div class="w-full mx-auto mb-4">
    <div class="grid md:grid-cols-2 gap-4">
      <div class="order-2 md:order-1">
        <div class="card bg-base-100 shadow-lg border-t-4 border-b-4 border-[#88a48a] h-full">
          <div class="card-body p-4 lg:p-8">
            <div class="mb-2">
              <div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-green-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.657 0 3-1.343 3-3S13.657 5 12 5 9 6.343 9 8s1.343 3 3 3z"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.5 8c0 7.5-7.5 13.5-7.5 13.5S4.5 15.5 4.5 8a7.5 7.5 0 1115 0z"></path>
                </svg>
                <h3 class="text-3xl font-semibold">Mailing Address</h3>
              </div>
              <p class="text-base-content/70 text-sm pl-9"><a href="https://maps.app.goo.gl/ifSHUFLvo8C9BZWS8" target="_blank" rel="noopener">1661 Empire Blvd<br>Webster, NY</a></p>
            </div>
            <div class="mb-2">
              <div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-green-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.12 3.368a1 1 0 01-.27 1.054l-1.6 1.6a11.042 11.042 0 005.516 5.516l1.6-1.6a1 1 0 011.054-.27l3.368 1.12a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C7.82 21 3 16.18 3 10V7a2 2 0 012-2z">
                  </path>
                </svg>
                <h3 class="text-3xl font-semibold">Call Us</h3>
              </div>
              <p class="text-base-content/70 text-sm pl-9"><strong>Main Office:</strong> <a href="tel:">585-981-8463</a></p>
            </div>
            <div class="mb-2">
              <div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-green-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <h3 class="text-3xl font-semibold">Office Hours</h3>
              </div>
              <p class="text-base-content/70 text-sm pl-9"><strong>Monday–Friday:</strong> 9 AM – 5 PM<br><strong>Saturday–Sunday:</strong> Closed</p>
            </div>
            <div class="mb-2">
              <div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-green-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                  </path>
                </svg>
                <h3 class="text-3xl font-semibold">Email Us</h3>
              </div>
              <p class="text-base-content/70 text-sm pl-9"><strong>General Inquiries:</strong> <a href="mailto:info@evolutionmarketing.com">info@evolutionmarketing.com</a></p>
            </div>
            <div class="mb-2 pl-9">
              <div class="flex items-center gap-3">
                <h3 class="text-3xl font-semibold">Follow Us</h3>
              </div>
              <div class="flex items-center gap-6 mt-2"><a href="https://www.facebook.com/EvolutionMarketing" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-base-content/70 text-sm hover:text-primary"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-green-800" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M22 12a10 10 0 10-11.5 9.9v-7h-2v-3h2v-2c0-2 1.2-3.1 3-3.1.9 0 1.8.1 1.8.1v2h-1c-1 0-1.3.6-1.3 1.2v1.8h2.3l-.4 3h-1.9v7A10 10 0 0022 12z">
                    </path>
                  </svg> Facebook </a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="order-1 md:order-2">
        <div class="card bg-base-100 shadow-lg border-t-4 border-b-4 border-[#88a48a] h-full">
          <div class="card-body p-4 lg:p-8">
            <div class="form-wrapper-2">
              <p><span class="shortcode"> <span class="cms-widget tempplaceholder" data-widget="[  form id="#"  ]"><span class="remove block"><b>Form</b><br>Name: Contact</span></span> </span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card bg-base-100 shadow-lg border-t-4 border-b-4 border-[#88a48a] h-full"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11670.627732292398!2d-88.0069324!3d42.909989!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8805106197170135%3A0x6b8344e1160a221f!2sFranklin%2C%20WI!5e0!3m2!1sen!2sus!4v1700000000000!5m2!1sen!2sus" width="100%" height="450" style="border: 0;" allowfullscreen="allowfullscreen" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></div>
  </iframe></div>
</section>