/*==================| Site Hero |=================*/
.site-hero{
    position: relative;
    width: 100%;
    height:50%;
    background: url('../images/hero4.jpg');
    background-size: cover;    
} 


.site-hero::after{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgb(0,0,0,0.6);
   opacity: 0.8;
}
.site-hero .hero-text{
   position: relative;
   top:-5em;
   color: #fff;
   padding: 10em 0;
   z-index: 10;
   animation: slideInFromLeft 3s ease-in;
}
.site-hero h1{
    font-size: 5rem;
    font-weight: bold;   
}
.site-hero p{
   font-size: 2rem;
   margin: .5em;
   padding: .5em 0;
}
.site-hero,
.bg-parallax{
    background-attachment:fixed;
}
/*---------------------------------------------------------------*/

/*===================| Search |===============================*/

.search{
    position: relative;
}

.search .search-form{
    position:absolute;
    top:-5em;
    left:1em;
    right: 1em;
    background-color:var(--bg-white-color);
    padding: 1em;
    z-index: 100;
   
}

 
.search .search-form input[type='text'],input[type='submit']{
    text-align: center;
    border: .1em solid var(--primary-color);
  width: 100%;
    padding: 1em 1em;

}
.search .search-form input:focus{outline: none;}
/*---------------------------------------------------------------*/

/*---------------------------------------------------------------*/

.about .about-content .about-image img{
     height:100%;
 }
 

 
 .properties-card{
  position: relative;
   width: 100%;
   background-color: var(--bg-dark-color);
   margin-top:1em;
}
.properties-card .card-content{
   width: 100%;
   padding: 0 1em;
}

.properties-card  .card-icons{
   
   width: 100%;
   padding: 0 1em;
}
.properties-card  .card-icons p{
   margin-top: 1em;
   width: 100%;
   font-size: .8rem;
    
}
.properties-card .card-icons img{
   position: relative;
   width: 100%;
    width: 1.5em;
}
.properties-card .card-property-type {
   height: 5.5em;
  }
.properties-card .card-property-type p{
margin-top: 1em;
}

.properties-card .card-property-type h2{
   margin-top: -1em;
   margin-bottom: 2em;
  }

  .featured-properties-pagination{
    overflow: hidden;
}.featured-properties-pagination .pagination-content{
    position:relative;

}
.featured-properties-pagination ul li .circle{
    position:absolute;

 background-color: var(--primary-color);
 clip-path: circle();
 padding: .5em;
}
.featured-properties-pagination ul li .circle .active{
 background-color: var(--bg-dark-color);
 clip-path: circle();
 padding: .8em;
 color: var(--primary-color) !important;
}

.featured-properties-pagination a{
    position:absolute;

  padding: 0 1em;
 color: #fff !important;
}

.featured-properties-pagination a:hover{
 font-weight: var(--font-semi-bold);
 
}

  
/*================| Testimonials |===================*/
.testimonials .testimonials-content {
position: relative;    
}
.testimonials .testimonials-content .testimonial-details{
    position: relative;
    top: -4em;
}
.testimonials .testimonials-content .testimonial-image img{
    height:100%;
}
.testimonial-details .slide-btn{
    position: absolute;
    top:-3em;
    right: 0;
}
.testimonial-details p{margin-top: 10em;}
 .testimonial-details-image img{
    margin-top: 1em; 
    width: 50%;
    border-radius: 50%;
    border: .2em solid var(--primary-color);
 }

 .testimonial-details-image .image-details{
     margin-top: 1em;
 }
 .testimonial-details-image .image-details .section-subtitle {padding: 0 2em;}

 
 @media only screen and (min-width:300px) {
    .hero .hero-text .section-hero-title{
        position:absolute;  
    }
    .featured-properties .properties-content .properties-card .card-icons {
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(3em,1fr));
        gap: 1em;
    }
  
  
 }

 @media only screen and (min-width:700px) {
    
   
    .search .search-form{
        position:absolute;
        top:-2em;
        left:10em;
        right:10em;
         
    }
    .search .search-form form{
       display: grid;
       grid-template-columns: repeat(4,1fr);
         
    }
    .about .about-content{
        display: grid;
        grid-template-columns:  50% 50%;
        gap: 5em;
    } 
    .featured-properties .properties-content{
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(20em,1fr));
        gap: 1em;
    }
    .testimonials .testimonials-content{
        margin-top: 5em;
        display: grid;
        grid-template-columns:  45% 45%;
        gap: 5em;
    }
    .testimonial-details p{margin-top: 4em;}
   
 }

 
 @media only screen and (min-width:1000px) {
    /*===================| Site Hero | ====================*/
  
}