/*==================| Site Hero |=================*/
.site-hero{
    position: relative;
    width: 100%;
    height:50%;
    background: url('../images/hero1.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 |===============================*/

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


/*==========================| About |============================*/

/*--------------------| About |--------------------*/

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

/*---------------------------------------------------------------*/
.about .about-details p{
    margin-top: .15em;
    margin-bottom: var(--mb-1);
}
/*-----------------------------------------------------------*/
/*======================| Services |=========================*/
.services .service-card{

    margin-top: 2em;
    background-color: #ffffff;
	 padding: 2em 1.5em 2em;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.service-card:hover::after{
    visibility: visible;
    opacity: 1;
}
.services .service-card:hover{
    box-shadow: 0px 14px 35px   rgb(0,0,0,0.23); 
    border:.2em solid var(--primary-color);
}
/*=========================| Milestone |==============================*/
 
.milestone .bg-image.overlay{
    position: relative;
    width: 100%;
    height: 90vh;
    background-size: cover;
    z-index: var(--z-low);
     
}
.milestone .bg-image.overlay::after{
    content:"";
	position:absolute;
	left:0;
	right:0;
	top:0;
    height: 100%;
	bottom:0;
	opacity: 0.7;
	background-color:#000;
     
}
.milestone .bg-image.overlay,
.bg-parallax{
    background-attachment:fixed;
    
}
.milestone .container{
    position: relative;
      
}
.milestone-content{
    position: absolute;
    top:-45em;
    right: 0;
    left: 0;
     
}
.milestone .milestone-info {
    padding: 1em 0;
    height: auto;
}
.milestone .milestone-info img{
    width: 2em;
    
}
.number{
    font-weight: bolder;
    font-size: 2rem;
}
.milestone .milestone-info   p{
    position: relative;
    color:var(--white-color) !important; 
}
 
/*==================| Contact |==========================*/
 
.contact  .social {margin-top: 1em;}
.contact  .social a{
    margin-top: 1em;
    color: var(--primary-color);
    padding: 0 1em;
}
.contact  .social .fa{font-size: 2rem;}
.contact .contact-info ul{margin-top: 1em;}
.contact .contact-info ul li a{color: var(--primary-color);}
.contact .contact-form{margin-top: 1em;}
.contact .contact-form input[type='text'],input[type='email']{
    margin-top: 1em;
    padding: 1em 2em;
    border:.2em solid var(--primary-color);
    width: 100%;
  
}
.contact .contact-form input:focus{outline: none;}
textarea{
    margin-top: 1em;
    padding: 1em 2em;
    border:.2em solid var(--primary-color);
    width: 100%;
   
}
.contact .contact-form .btn-primary{
    width:50%
}
textarea:focus{outline: none;}
/*-----------------------------------------------------------*/
/*---------------------------------------------------------------*/

  /*=========================| Footer |===================================*/
 footer{
     padding: 5em ;
 }
 .footer-foot{
     position: relative;
     padding: 2em 2em;
     justify-content: center;
     align-items: center;
 }
 .footer-foot .social a{
     color: var(--white-color);
     padding: 0 1em;
 }
 .footer-foot .social i.fa{
     font-size:  var(--h1-font-size);
 }


.rights a{
    color: var(--white-color);
    font-weight: var(--font-semi-bold); 
}


@media only screen and (min-width:300px) {

    .services-content {
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(20em,1fr));
        gap: 1em;
    }
  
    .milestone-content{
        position: absolute;
        top:-45em;
        right: 0;
        left: 0;
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(15em,1fr));
        gap: 1em;
    }
  
    .milestone .milestone-info {
        padding: 1em 0;
        height: auto;
    }
 
}

 
@media only screen and (min-width:700px) {
     
   
   .about .about-content{
       display: grid;
       grid-template-columns:  50% 50%;
       gap: 5em;
   } 
   .milestone-content{top:-50em;}
   .contact-content{
    display:grid;
    grid-template-columns:50% 50%;
    gap: 4em;
}
}
@media only screen and (min-width:1000px) { 
   .milestone-content{top:-25em;
}
    
}