<?php

//Template Name: Property Single Page

get_header();

?>

<!--Main Navigation-->
  <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/hero_bg_3.jpg");
      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;
}

.agent-box {
  margin-top: 50px;
  border: 2px solid #efefef;
  padding: 20px;
  border-radius: 4px; }
  .agent-box .img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px; }
    .agent-box .img img {
      width: 80px;
      border-radius: 50%; }
  .agent-box .text h3, .agent-box .text .h3 {
    font-size: 16px; }

.section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}


.peti-hmg-bnner .peti-hmg-bnner-inr video, .peti-hmg-bnner .peti-hmg-bnner-inr img {
   
    height: auto;
  
}
 .content ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 30px 30px 15px;
    border: 1px solid #eeeeee;
}
/* ===================
contact us css 
====================== */

.contact-wrapper {
  position: relative;
}
h3.mb-5.bold {
    font-weight: bold;
}

.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;
}


 .content h5 {
  margin-bottom: 20px;
}
.content ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 30px 30px 15px;
  border: 1px solid #eeeeee;
}
.content ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 15px;
    margin-top: 15px;
  width: 100%;
  font-size: 14px;
}
 .content ul li .image {
  margin-right: 10px;
  margin-bottom: 0;
  max-width: 30px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30px;
          flex: 0 0 30px;
  text-align: center;
}
 .content ul li .image img {
  width: auto;
}
.content ul.amenities-list li {
  max-width: 50%;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 50%;
          flex: 1 0 50%;
}
@media only screen and (max-width: 479px) {
.content ul.amenities-list li {
    max-width: 100%;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
            flex: 1 0 100%;
  }
}
.content ul.amenities-list li::before {

  color: #004395;
  margin-right: 10px;
}

@media all and (max-width: 768px) {
  .contact-content {
    margin-bottom: 50px;
  }
}
i.fa.fa-hand-o-right {
    margin-right: 10px;
}
  </style>

  <!-- Navbar -->
  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- 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>
          <h5 class="mb-4 text-white">We See Beauty In Simplicity</h5>
          <a class="btn btn-outline-light btn-lg m-2" data-mdb-ripple-init href="#" role="button"
             rel="nofollow" target="_blank">Contact Us</a>
        
        </div>
      </div>
    </div>
  </div>
  <!-- Background image -->
<!--Main Navigation-->

<!--Main layout-->


 <div class="section">
      <div class="container">
        <div class="row justify-content-between">
          <div class="col-lg-7">
          <section class="hmgbanner_slider">
		<div>
			<div class="peti-hmg-bnner">
				<div class="peti-hmg-bnner-inr">
					<img src="https://patiosgrandehoa.com/wp-content/uploads/2025/05/img_3-1.jpg">
					<!-- <video controls>
						<source src="assets/images/dummy.mp4" type="video/mp4"/>
						<source src="assets/images/movie.ogg" type="video/ogg"/>
					</video> -->
				
				</div>
			</div>
		</div>
		<div>
			<div class="peti-hmg-bnner">
				<div class="peti-hmg-bnner-inr">
					<img src="https://patiosgrandehoa.com/wp-content/uploads/2025/05/img_2-1.jpg">
					<!-- <video controls>
						<source src="assets/images/dummy.mp4" type="video/mp4"/>
						<source src="assets/images/movie.ogg" type="video/ogg"/>
					</video> -->
				
				</div>
			</div>
		</div>
		<div>
			<div class="peti-hmg-bnner">
				<div class="peti-hmg-bnner-inr">
					<img src="https://patiosgrandehoa.com/wp-content/uploads/2025/05/img_1-1.jpg">
					<!-- <video controls>
						<source src="assets/images/dummy.mp4" type="video/mp4"/>
						<source src="assets/images/movie.ogg" type="video/ogg"/>
					</video> -->
				
				</div>
			</div>
		</div>
	</section>
          </div>
          <div class="col-lg-4">
            <h2 class="heading text-primary">5232 California Ave. 21BC</h2>
            <p class="meta"> <i class="fa fa-map-marker"></i>
 California, United States</p>
            <p class="text-black-50">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione
              laborum quo quos omnis sed magnam id, ducimus saepe, debitis error
              earum, iste dicta odio est sint dolorem magni animi tenetur.
            </p>
            <p class="text-black-50">
              Perferendis eligendi reprehenderit, assumenda molestias nisi eius
              iste reiciendis porro tenetur in, repudiandae amet libero.
              Doloremque, reprehenderit cupiditate error laudantium qui, esse
              quam debitis, eum cumque perferendis, illum harum expedita.
            </p>

            <div class="d-block agent-box p-5">
              <div class="img mb-4">
                <img
                  src="https://patiosgrandehoa.com/wp-content/uploads/2025/05/person_2-min.jpg"
                  alt="Image"
                  class="img-fluid"
                />
              </div>
              <div class="text">
                <h3 class="mb-0">Alicia Huston</h3>
                <div class="meta mb-3">Real Estate</div>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Ratione laborum quo quos omnis sed magnam id ducimus saepe
                </p>
                <ul class="list-unstyled social dark-hover d-flex">
                  <li class="me-1">
                    <a href="#"><span class="icon-instagram"></span></a>
                  </li>
                  <li class="me-1">
                    <a href="#"><span class="icon-twitter"></span></a>
                  </li>
                  <li class="me-1">
                    <a href="#"><span class="icon-facebook"></span></a>
                  </li>
                  <li class="me-1">
                    <a href="#"><span class="icon-linkedin"></span></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
     <div class="section">
      <div class="container">
        <div class="row justify-content-between">
          <div class="col-lg-7">
    
    <div class="row mt-30 mb-30 content">
                                        
                                        <div class="col-md-5 col-12 mb-xs-30">
                                            <h3 class="mb-5 bold">Condition</h3>
                                            <ul class="feature-list">
                                                <li><div class="image"><img src="https://patiosgrandehoa.com/wp-content/uploads/2025/05/area.webp" alt=""></div>Area 550 sqft</li>
                                                <li><div class="image"><img src="https://patiosgrandehoa.com/wp-content/uploads/2025/05/bed.webp" alt=""></div>Bedroom 6</li>
                                                <li><div class="image"><img src="https://patiosgrandehoa.com/wp-content/uploads/2025/05/bath.webp" alt=""></div>Bathroom 4</li>
                                                <li><div class="image"><img src="https://patiosgrandehoa.com/wp-content/uploads/2025/05/parking.webp" alt=""></div>Garage 2</li>
                                                <li><div class="image"><img src="https://patiosgrandehoa.com/wp-content/uploads/2025/05/kitchen.png" alt=""></div>Kitchen 2</li>
                                            </ul>
                                        </div>
                                        
                                        <div class="col-md-7 col-12">
                                            <h3 class="mb-5 bold">Amenities</h3>
                                            <ul class="amenities-list">
                                                <li> <i class="fa fa-hand-o-right"></i> Air Conditioning</li>
                                                <li><i class="fa fa-hand-o-right"></i> Bedding</li>
                                                <li><i class="fa fa-hand-o-right"></i> Balcony</li>
                                                <li><i class="fa fa-hand-o-right"></i> Cable TV</li>
                                                <li><i class="fa fa-hand-o-right"></i> Internet</li>
                                                <li> Parking</li>
                                                <li><i class="fa fa-hand-o-right"></i> Lift</li>
                                                <li><i class="fa fa-hand-o-right"></i> Pool</li>
                                                <li><i class="fa fa-hand-o-right"></i> Dishwasher</li>
                                                <li><i class="fa fa-hand-o-right"></i> Toaster</li>
                                            </ul>
                                        </div>
                                        
                                    </div>
                                    
                                    </div>
                                    
                                    
                                     <div class="col-lg-4 align-self-center">
                                         
                                        
<div class="contact-form">
<div class="contact-form-header">
<h2>Get In Touch</h2>
<p>Got a question?
Need some help?
We’re here!
Fill out the contact form we will contact you.

</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>
                                    
                                    
    
    
    <?php get_footer(); ?>
    