<?php
/**

 * Template Name: Contact us   

 */
get_header(); ?>

 <style>
    h1,h2,h3,h4{font-weight:300;}
	  .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;
}
    #intro {
      background-image: url("https://patiosgrandehoa.com/wp-content/uploads/2025/05/image15.jpeg");
      height: 70vh;
    }

    /* Height for devices larger than 576px */
  

   
	  .bg-image {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
	 .imgcustom{ left: -13px;
    position: relative;
    display: block;
    right: 0;
}
/* ===================
contact us css 
====================== */

.contact-wrapper {
  position: relative;
}

.contact-form {
  background: #fff;
  border-radius: 8px;
  padding: 30px 30px;
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
}

.contact-form-header {
  margin-bottom: 30px;
}

.contact-form-header h2 {
  font-size: 30px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #151735;
}

.contact-form .form-group {
  margin-bottom: 25px;
}

.contact-form .form-group .form-control {
  padding: 12px 18px;
  border-radius: 7px;
  box-shadow: none;
  transition: all .5s ease-in-out;
}

.contact-form .form-group .form-control:focus {
  border-color: #01b4ff;
}

.contact-map {
  margin-bottom: -9px;
}

.contact-map iframe {
  width: 100%;
  height: 450px;
}

.contact-content {
  margin-bottom: 50px;
  background: #fff;
  border-radius: 8px;
  padding: 20px 30px;
  position: relative;
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
}

.contact-content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  bottom: 30px;
  width: 3px;
  background: #01b4ff;
  border-radius: 50px;
}
.theme-btn {
    font-size: 16px;
    color: #ffffff;
    padding: 12px 28px;
    transition: all 0.5s;
    text-transform: uppercase;
    position: relative;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    border: none;
    background: #293e4f;
    box-shadow: 0 3px 24px rgb(0 0 0 / 12%);
    z-index: 1;
}
.contact-info {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 0;
}

.contact-info-icon i {
  font-size: 25px;
  color: #fff;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 50px;
  background: #293e4f;
}

.contact-info h5 {
  font-size: 22px;
  margin-bottom: 5px;
  color: #151735;
}

.contact-info p {
  font-weight: 500;
}


@media all and (max-width: 768px) {
  .contact-content {
    margin-bottom: 50px;
  }
}



  </style>

 <!-- Background image -->
  <div id="intro" class="bg-image shadow-2-strong">
    <div class="mask" style="background-color: rgba(0, 0, 0, 0.5);">
      <div class="container d-flex align-items-center justify-content-center text-center h-100">
        <div class="text-white" data-mdb-theme="dark">
           <h1 class="mb-3 text-white"><?php the_title();?></h1>
       
        
        
        </div>
      </div>
    </div>
  </div>
  <!-- Background image -->
	


<div class="contact-area py-120 mt-5">
<div class="container">
<div class="contact-wrapper">
<div class="row">
<div class="col-lg-4">
<div class="contact-content">
<div class="contact-info">
<div class="contact-info-icon">
<i class="fal fa-map-marker-alt"></i>
</div>
<div class="contact-info-content">
<h5>Office Address</h5>
<p>530 NW 109th Ave, Miami, FL 33172

</p>
</div>
</div>
<div class="contact-info">
<div class="contact-info-icon">
<i class="fal fa-phone"></i>
</div>
<div class="contact-info-content">
<h5>Call Us</h5>
<p class="mb-0"> 786 537 1476</p>
<h5></h5>
<p class="mb-0">Fax: 786 537 1476 </p>

</div>
</div>
<div class="contact-info">
<div class="contact-info-icon">
<i class="fal fa-envelope"></i>
</div>
<div class="contact-info-content">
<h5>Email Us</h5>
<p><a href="#" class="__cf_email__" data-cfemail="6801060e07280d10090518040d460b0705">info@patiosgrandehoa.com</a></p>
</div>
</div>
<div class="contact-info">
<div class="contact-info-icon">
<i class="fal fa-clock"></i>
</div>
<div class="contact-info-content">
<h5>Office Hours</h5>
<p>Mon - Fri (9.00AM - 05PM)</p>
	<p>Saturday: 10:00 AM–2:00 PM</p>
<p>Sunday: Closed</p>

</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="contact-form">
<div class="contact-form-header">
<h2>Contact Patios Grande HOA</h2>
<p>We’re here to answer your questions, provide information, or assist with your needs. Reach out to our friendly team today!


</div>
<form method="post" action="#" id="contact-form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="name" placeholder="Your Name" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Your Email" required>
</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" placeholder="Your Subject" required>
</div>
<div class="form-group">
<textarea name="message" cols="30" rows="5" class="form-control" placeholder="Write Your Message"></textarea>
</div>
<button type="submit" class="theme-btn">Send
Message <i class="far fa-paper-plane"></i></button>
<div class="col-md-12 mt-3">
<div class="form-messege text-success"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>


<div class="contact-map mt-5">


<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d231426.01234926516!2d-80.53724067930692!3d25.782390873502635!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88d9b0a20ec8c111%3A0xff96f271ddad4f65!2sMiami%2C%20FL%2C%20USA!5e1!3m2!1sen!2sin!4v1746882055127!5m2!1sen!2sin" width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>

<?php get_footer(); ?>  




