@import "reset.css";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "top-section.css";
@import "services.css";
@import "portfolio-section.css";
@import "portfolio-css/portfolio-projects.css";

.container{
	max-width: 1150px;
	margin: 0 auto;
}
header{
	display: flex;
	padding: 20px;
	justify-content: space-between;
}
header .logo{
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
	color: white;
	display: flex;
}
header .logo .name{
	background: black;
	padding: 15px 20px;
	text-decoration: none;
	color: white;
}
header .header-menu{
	font-size: 1rem;
	text-transform: uppercase;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
}
header .header-menu a{
	font-size: 1rem;
	text-transform: uppercase;
	text-decoration: none;
	color: black;
	padding: 0 10px;
	/*transition: all .3s ease-in-out;*/
}
header .header-menu a:hover{
	font-weight: 700;
	color: #ff5253;
}
header .menu-btn{
	font-weight: 700;
	color: #ff5253;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 15px;
	font-size: 1.6rem;
	display: none;
	cursor: pointer;
}
.mobile-menu{
	display: none;
	background: #fff;
	flex-direction: column;
	padding: 49px 0;
	position: absolute;
	top: 0;
	height: 100vh;
	width: 50%;
	z-index: 10;
	transform: translate3d(-100%, 0, 0);
	transition: all .4s ease-in-out;
	-webkit-box-shadow: 2px 0px 78px -15px rgba(0,0,0,0.75);
	-moz-box-shadow: 2px 0px 78px -15px rgba(0,0,0,0.75);
	box-shadow: 2px 0px 78px -15px rgba(0,0,0,0.75);
}
.mobile-menu.active{
	transform: translate3d(0, 0, 0);
}	
.mobile-menu a{
	padding: 15px;
	text-decoration: none;
	color: black;
	
	}
.mobile-menu a:hover{
	text-decoration: none;
	color: white;
	background: #ff5253;
}
@media only screen and (max-width:960px){
	.container{ width: 100%}
}
/* Phones */

@media only screen and (max-width:767px){
	header .header-menu{
		display: none;
	}
	header .menu-btn{
		display: flex;
		}
	header .logo{
	font-size: 1.3rem;

}

}