@charset "utf-8";
/* CSS Document */
    body {
	background: #fff; 
    color: white;
	  font-family: "Manrope", sans-serif;      
	text-align: justify;
      padding: 0px; 
     width: 100%;
  	  margin: 0 auto;
  	  top: 0px;
    }

    h1 {
      margin: 20px 0;
      text-align: center; 
      top: 70px;
	  font-family: "Cormorant SC", serif;
	  font-weight:600;
	  font-size:26px;
	  text-transform:uppercase;

    }
	h2{
      margin: 20px 0; 
      text-align: center; 
      top: 70px;
	   font-family: "Cormorant SC", serif;
	   font-weight:600;
	   font-size: 20px;
	  text-transform:uppercase;
    }
	h3 {
      margin: 20px 0;
      text-align: center; 
      top: 70px;
	   font-family: "Cormorant SC", serif;
	   font-weight:400;
	   font-size:18px;
    }
    
    p {
      margin: 10px 0;
    }
    a {
      text-decoration: none;
      color: #F6D56D !important;
    }

    a:hover {
      text-decoration: underline;  
    }
    
    .left {
      text-align: left; 
    }
	header{
	 width:100%;
	 margin: 0;
	 padding: 20px 0;
	  position: relative;
	background: #0c0633;
}
	header .logo {
  	 display: block;
  	 margin-left: auto;
  	 margin-right: auto;
  	 width: 300px;
	 height:auto;
}
	#header-image{
	 width:100%;
	 height:300px;
	 background:#0c0633 url(header3.jpg) no-repeat center center;
	 background-size:cover;
	 margin:0 auto;
	

	}
    #about-us{
	 padding:20px;
	 width:70%;
	 margin:10px auto;

}
	#about-us h1{
	 color: #0c0633 !important;
	 border-bottom:1px solid #F6D56D;
	 margin:10px auto;
	 padding:20px 0;
}

	#about-us p{
	 color:#000;
	 font-family: "Manrope", sans-serif;      
     font-size: 14px;
     line-height: 1.7em;}

	#our-projects{
	 width:100%;
	 margin:0 auto;
	 background:#0c0633;
	 padding:20px 0 20px 0;

}
	#our-projects h1{
	 color: #fff !important;
	 border-bottom:1px solid #fff;
	 margin:0px auto 20px auto;
	 padding:20px 0 ;
	 width:70%;
}
	#projects-container{
	 width:90%;
	 margin:0 auto 20px auto;
	 display:flex;
	 flex-flow: row wrap;
	 justify-content: space-evenly;
	 align-items:flex-start;
	 align-content:flex-start;
	 flex-basis: 1;
}
	.project{
	  padding:10px;
	  width:25%;
	  margin-bottom:20px;
	  background-size:40px;
	  min-height:400px;
	  color:#fff;
	  font-family: "Manrope", sans-serif;   
      line-height: 1.7em;		
	  font-size: 14px;

	}
	.project h2 a{
	  text-align:center;
      color: #F6D56D !important;
	  border-bottom:1px solid #F6D56D;
	  width:100%;
	  display:block;
	  margin:10px auto;
	  padding:10px 0;
	}
	.project p{
	 color:#fff;  
	 font-family: "Manrope", sans-serif;      
     font-size: 14px;
     line-height: 1.7em;
}

	#our-services{
	 width:100%;
	 margin:0 auto;
	 background:#efefef;
	 padding:20px 0 50px 0;
	}
	h1#services{
	 color: #0c0633 !important;
	 border-bottom:1px solid #F6D56D;
	 margin:10px auto 20px auto;
	 padding:20px 0;
	 width:70%;
}
	#services-container{
	 width:90%;
	 margin:0 auto;
	 display:flex;
	 flex-flow: row wrap;
	 justify-content: space-evenly;
	 align-items:flex-start;
	 align-content:flex-start;
	 flex-basis: 1;
	 background:#efefef;
	}

	.service{
	  padding:10px;
	  width:25%;
	  margin-bottom:20px;
	  background-size:50px;
	  min-height:500px;
	  color:#000;
	  font-family: "Manrope", sans-serif;      
      line-height: 1.7em;		
	  font-size: 14px;
      border-bottom:2px solid #0c0633;
	}
	.service h2 a{
	  text-align:center;
	  color: #0c0633 !important;
	}
	.service p{
	 color:#000;
	 font-family: "Manrope", sans-serif;      
     font-size: 14px;
     line-height: 1.7em;
	}
	#contacts{
	 width:100%;
	 margin:0 auto;
	 background:#000;
	 padding:20px 0 100px 0;
	 color:#fff;

}
	#contacts h1{
	 color: #fff !important;
	 border-bottom:1px solid #fff;
	 margin:0px auto 20px auto;
	 padding:20px 0 ;
	 width:70%;
		  font-family: "Cormorant SC", serif;

}
	#contacts-container{
	 width:80%;
	 margin:0 auto 50px auto;
	 display:flex;
	 flex-flow: row wrap;
	 justify-content: space-evenly;
	 align-items:flex-start;
	 align-content:flex-start;
	 flex-basis: 1;
}
    .contact{
		width: 45%;
		text-align: center;
		
	
}
	.contact:first-child{
	 border-right: 1px solid #333;
}
	.contact p{
	 font-size:14px;
	 color:#fff;
	 font-family: "Manrope", sans-serif;      
}
	#disclaimer{
	 width:70%;
	 margin:0 auto;
	 border-top:1px solid #666;
	}
	#disclaimer p{
     font-size:12px;
	 color:#fff;
	 font-family: "Manrope", sans-serif;      
}
@media only screen and (max-width: 600px){
	#services-container,
	#projects-container{
	 width:80%;
	 display:flex;
	 flex-flow: column wrap;
	}

	.service{
	  padding:0px;
	  width:100%;
	  min-height: 200px;

		}
	#our-projects{
	 flex-direction:column;
	}
	.project{
	 padding:0px;
	 width:100%;
     min-height: 200px;

	}
    #about-us{
	 padding:20px;
	 width:85%;
	 margin:10px auto;

}
 .contact{
		width: 90%;
		text-align: center;

	}
 .contact:first-child{
	 border-right:none;
	 border-bottom: 1px solid #333;

	}
}

@media only screen and (min-width: 768px) and (max-width: 1024px){
	#services-container,
	#projects-container{
	 width:90%;
	 display:flex;
	 flex-flow: row wrap;
	}

	.service{
	  padding:0px;
	  width:40%;


		}
	#our-projects{
	 flex-direction:column;
	}
	.project{
	 padding:0px;
	 width:40%;

	}
	.project:last-child{
		width:90%;
		min-height: 200px;
	}
    #about-us{
	 padding:20px;
	 width:85%;
	 margin:10px auto;

}


}