*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
.container{
	width: 100%;
}
header{
	width: 100%;
	height: 110px;
	background: white;
	position: fixed;
	top: 0; left: 0;
	box-shadow: 2px 2px 5px black;
	z-index: 1;
}
header h1, header h2{
	font-size: 22px;
	color: #1f386e;
	font-family: 'Montserrat',sans-serif;
	padding: 45px 20px 0px 20px;
}
header h2{
	font-size: 17px;
	margin:-22% 0% 0% 35%;
}
header span{
	color: grey;
}
header ul{
	display: none;
}
header a{
  list-style-type: none;
  text-decoration: none;
  color: #1F386E;
}
header a:hover{
  color: #e52f3c;
}
.fa-bars{
	color: grey;
	font-size: 18px;
	position: absolute;
	top: 52px;
	right: 30px;
}
.hero{
	height: 820px;
	background: linear-gradient(rgba(57,63,70,0.7),rgba(0,0,0,.7)) ,url(https://www.adobe.com/content/dam/cc/us/en/creativecloud/photography/discover/real-estate-photography/real-estate-photography_P1_900x420.jpg.img.jpg);
	background-size: 300% 100%;
	text-align: center;
}
.hero div{
	width: 100%;
	padding: 10px;
}
.hero h2,p{
    color: white;
    font-size: 50px;
    font-family: 'Montserrat',sans-serif;
    padding-top:  300px;
}
.hero p{
	font-size: 18px;
	font-family: calibri;
	background: rgba(0,0,0,.4);
	padding: 15px 20px 15px 20px;
	margin: 5% 10% 6% 10%;
}
.hero button{
	padding: 15px;
	background:#e52f3c;
	border:none;
	border-radius: 3px;
	color: white;
	font-size: 15px;
}
.hero button:hover{
	background:#1f386e;
	border:none; 
}
.subhero-section{
	height: 220px;
	background: #1f386e;
	/*border:1px solid;*/
	padding: 25px 10px 10px 10px;
}
.subhero-section h2{
   font-size: 25px;
   color: white;
   font-family: 'Montserrat',sans-serif;
   margin-left: 3%; 
}
.subhero-section h3{
	font-size: 17px;
	color: #A0AAC0;
	font-family: calibri;
	margin:2% 0% 3% 3%;
}
.subhero-section button, form input[type="button"]{
	padding: 10px 25px 10px 25px;
	border-radius: 3px;
	font-family: calibri;
	border:2px solid white;
	background: none;
	color: white;
	margin:0% 0% 0% 27%; 
	font-size: 14px;
}
.subhero-section button:hover{
	background: white;
	color: #1f386e;
}
.grey-box{
	padding-bottom: 60px;
    background: #F6F6F6;
}
figure img{
	width: 90%;
	background: white;
	padding: 15px;
	margin:15% 0% 10% 5%;
	box-shadow: 1px 1px 10px grey;
}
.grey-box h2, .grey-box h3, .services h2{
   font-size: 25px;
   color: #313131;
   font-family: 'Montserrat',sans-serif;
   margin:5% 0% 3% 5%;
}
.grey-box h3{
	 font-size: 20px;
}
hr{
	width: 85%;
	margin: 0px auto;
}
.grey-box p, .grey-box  ul, .card p{
	font-size: 18px;
	color: grey;
	font-family: calibri;
	line-height: 25px;
	margin:-90% 7% 2% 5%;
}
.grey-box ul{
	font-size: 16px;
	font-weight: normal;
	list-style-type: none;
	margin: 2% 0% 0% 2%;
}
.grey-box .fa-check{
	font-size: 10px;
	color:#1f386e;
	margin:0% 3% 0% 10%;
}
.services h2{
	margin-top: 15%;
}
.services{
	padding-bottom: 100px;
}
.services div{
	width: 100%;
	display: inline-block;
	
}
.services hr{
	margin-bottom: 2%;
}
.services .card img{
	width: 90%;
	margin-left: 5%;
	clip-path: polygon(0 0, 100% 0%, 100% 81%, 0 94%);
	background-position: 100%;
}
.services .card img:hover{
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
	background-position: 50%;
}
.card h3{
	font-size: 22px;
   color: #313131;
   font-family: 'Montserrat',sans-serif;
	margin:4% 0% 0% 5%;
}
.works{
	padding: 30px 10px 90px 10px;
	background: #F6F6F6;	
	display: inline-block;
}
.works div{
	width: 100%;
	display: inline-block;
}
.works h2, .testimonials h2{
	font-size: 35px;
   font-family: 'Montserrat',sans-serif;
   margin:5% 0% 3% 5%;
   color: #313131;
   display: inline-block;
}
.works img{
	width: 95%;
	margin: 2% 0% 2% 3%;
}

.testimonials{
	padding:50px 10px  60px 10px;
}
.testimonials div{
	width: 100%;
	display: inline-block;
}
.testimonials img{
	width: 90px;
	height: 100px;
	margin:5% 5% 5% 0%;
	float: left;
}
 .testimonials  p{
	font-size: 18px;
	color: grey;
	font-family: calibri;
	line-height: 25px;
	margin-top: -80%;
}
.testimonials cite{
	font-size: 12px;
	color: grey;
	font-family:calibri;
}
.contact{
	background: #1f386e;
	padding: 80px 0px 50px 0px;
}
.contact div{
	display: inline-block;
}
.contact h2{
	color: white;
	width: 85%;
	font-size: 30px;
	font-family: 'Montserrat',sans-serif;
	padding-bottom: 15px;
	border-bottom: 1px solid white;
	margin:0% 0% 3% 7%;
}
.contact p{
	font-size: 18px;
	font-family: calibri;
	color: rgba(255,255,255,.65);
	line-height: 22px;
	margin: -92% 8% 15% 8%;
}
form input[type="text"], form textarea{
	width: 90%;
	height: 40px;
	padding-left:  10px;
	border: none;
	margin: 3% 0 5% 5%;
	font-size: 17px;
	font-family: 'Montserrat',sans-serif;
}
form textarea{
	height: 90px;
}

form input[type="button"]{
	padding: 13px 27px 13px 27px;
	font-size: 16PX;
	margin:5% 0% 0% 8%;
}
form input[type="button"]:hover{
	background: white;
	color: #1f386e;
}
.contact hr{
	margin-top: 10%;
}
.contact ul{
	font-size: 25px;
	color: rgba(255,255,255,.65);
	list-style-type: none;
	margin:5% 0% 0% 20%;
}
.contact ul li{
	display: inline-block;
	margin:0% 8% 0% 0%;
}
footer{
    background: #F6F6F6;
}
footer h2{
	color: #888;
	font-size: 18px;
	text-align: center;
	font-family: calibri;
	font-weight: normal;
	padding: 20px 10px 20px 10px;
}



@media only screen and (min-width:768px)
{
     .hero{
     	height: 720px;
	     background-size: 100% 100%;
     }
     .subhero-section h3{
        margin: 2% 0% 5% 3%;
     }
     .subhero-section button{
	    margin:0% 0% 0% 40%; 
     }  
    figure img{
	    width: 40%;
	    margin:12% 0% 10% 2%;
    }
    .grey-box h2{
    	margin:-40% 0% 0% 45%;
    }
    .grey-box hr{
    	width: 45%;
    	margin:2% 0% 0% 45%;
    }
    .grey-box p{
    	margin:-35% 0% 0% 45%;
    }
    .services div{
    	margin:20px 0px 0px  20px;
	width: 46%;
   }
   .services h2{
   	margin-left: 7%;
   }
   .card p{
   	margin-top: -80%;
   }
   .works div{
   	width: 49%;
   	padding: 10px 0px 0px 10px;
   }
   .testimonials div{
   	width: 48%;
   	padding: 10px;
   	margin:25px 0px 0px 8px;
   }
   .testimonials cite{
   	margin-left: 30%;
   }
   .contact{
   	padding-left: 40px;
   }
   .contact p{
   	margin-top: -40%;
   }
   form{
   	margin: -15% 0% 0% 4%;
   }
  form input[type="text"]{
	width: 35%;
	height: 35px;	
	margin: 3% 0% 0% 8%;
   }
 form textarea{
	width: 79%;
	height: 150px;	
	margin: 3% 0 0% 8%;
   }
  .contact ul{
	margin:5% 0% 0% 32%;
   }

}

@media only screen and (min-width:1024px)
{
   header .fa-bars{
   	display: none;
   }
   header ul{
   	display:inline-block;
   list-style-type: none;
   position: absolute;
   	top: 50px;
   	right:    40px;
   }
   header ul li{
   	display:inline-block;
   	font-size: 14px;
   	font-family:  'Montserrat',sans-serif;
   	color: #1f386e;
   	font-weight: bold;
    margin-right: 30px;
   }
   header ul li:hover{
   	color: #e52f3c;
   }
   .hero h2, .hero p{
   margin: 0% 25% 3% 25%;
   }
   .subhero-section{
   	height: 150px;
   }
  .subhero-section h2, .subhero-section h3{
  	margin-left: 15%;
   }
   .subhero-section button{
   	position: relative;
   	top: -110px;
   	left: 280px;
   }
   .grey-box p{
    margin:-28% 0% 0% 45%;
   }
   .grey-box ul{
     position: relative;
      top: 10px; left: 15px;
   }
   .grey-box li{
    margin:2% 15% 0% 0%;
   }
   .grey-box h3 {
    margin:2% 0% 0% 45%;
   }
   .grey-box ul{
   	display: inline-block;
    margin:2% 0% 0% 45%;
   }
   .services div{
    margin:20px 0px 0px  23px;
	width: 30%;
   }
   .services h2{
   	margin:8% 0% 0% 7%;
   }
   .card p{
   	margin-top: -95%;
   }
   .works{
   	padding-left: 80px;
   }
   .works div{
   	width: 30%;
   	margin:0px;
   } 
   .testimonials{
   	padding-left: 70px;
   } 
   .testimonials div{
   	width: 25%;
    margin:-5% 0% 0% 5%;
   }
    .contact{
   	padding-left: 170px;
   }
   .contact h2{
   	text-align: center;
   }
   .contact hr{
   	width: 100%;
   	margin: 80px 0px 0px -90px;
   }
    .contact ul{
	margin:5% 0% 0% 25%;
   }
}

@media only screen and (min-width:1200px)
{ 
	.grey-box p{
    margin:-17% 0% 0% 45%;
    }
    .card p{
     margin-top: -82%;
    }
    .services p{
    	margin: -60% 0% 10% 5%;
    }
    .services hr{
       margin-top: 1%;
    }
    .works hr{
    	margin-top: -2%;
    }
    .testimonials div{
        margin-top: 1%;
    }
    .contact{
    	padding-left: 450px;
    }
   /* form{
    	margin-left: 30%;
    }*/
   .contact hr{
   	width: 100%;
   	margin: 80px 0px 0px -250px;
   }
    .contact ul{
	margin:5% 0% 0% 15%;
   }

}


#arrow-up i{
  position: fixed;
  padding: 10px 13px;
  border-radius: 10%;
  background: #1F386E;
  border:1px solid white;
  color: white;
  right: 15px;
  bottom: 20px;
  z-index: 999;
}