@CHARSET "UTF-8";

:root{
	--hover_color: #ffd800;
}

/* ELEMENTOS ESCONDIDOS PRO DESKTOP */
header #header_img img{
		visibility: hidden;
}

header #header_img #menu_desktop #logo_desktop{
	visibility: visible;
}

header #header_img #menu_desktop{
	height: auto;
}

#menu_mobile_opened{
	width: 100%;
	height: 80px;
	background-color: ;
	display: none;
}

#menu_mobile{
	display: none;
}

/* ================================ */

header{
	width: 100%;
	height: 700px;
	background: linear-gradient(#0195ff, #74dbff);
}

header #header_img{
	width: 100%;
	height: 700px;
	background-image: url("../img/banner5.png");
	background-repeat: no-repeat;
	background-size: 800px;

	/*
	background-position-x: 450px;
	background-position-y: -40px;
	*/
	background-position-x: -150px;
	background-position-y: 10px;
}

header nav{
	width: 100%;
	height: 80px;
	background-color: ;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

header nav ul li{
	list-style: none;
	display: inline-block;
	margin: 10px 30px;
}

header nav ul a{
	color: white;
}

header nav ul li:hover{
	color: var(--hover_color);
	transition: 0.3s;
}

#slogan{
	width: 400px;
	height: auto;
	padding: 20px;
	background-color: ;
	float: right;
	margin-right: 100px;
	margin-top: 90px;
	color: white;
}

#slogan h1{
	font-weight: bold;
	font-size: 50px;

}
/* OUR BEST SERVICES ==================================================== */

#artigo_teste{
	width: 100%;
	height: auto;
	padding: 70px 20px 20px 20px;
	background-color: ;
	background-image: url("../img/shape_desktop3.jpg");
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-repeat: ;
	background-size: 100%;
	background-size: ;
}

#artigo_teste h1{
	margin-top: 10px;
	/* color: #FFD800; */

}

#artigo_teste p{
	font-weight: bold;
}

/* ==================================================== */

div#slogan button:hover{
	background-color: white;
	color: black;
	transition: 0.3s;
	
}

.container_cards{
	width: 900px;
	margin: 0 auto;
	background-color: ;
}

/* ABOUT US ============================================= */
#article2{
	width: 100%;
	height: auto;
	padding: 70px 20px 20px 20px;
	background-color: ;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	background-image: url("../img/shape_desktop_about_us2.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.container_aboutus{
	width: 400px;
	height: 400px;
	margin: 10px;
	background-color: ;
}

.container_positives{
	width: 100%;
	height: auto;
	background-color: ;
	display: flex;
	margin: 5px 0px;
	font-weight: bold;
	font-size: 17px;
}

.container_positives div{
	margin: 0px 3px;
	width: auto;
	height: 32px;
	background-color: ;
}

.container_positives img{
	height: 22px;
}
/* ======================================================= */


/* WHY CHOOSE US ============================================= */
#article3{
	width: 100%;
	height: auto;
	margin-top: 140px;
	/* background: linear-gradient(#0195ff, #74dbff); */
	background-color: ;
	/* background-image: url("../img/whychooseus_background2.jpg"); */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	
}

#container_whychooseus{
	width: 100%;
	height: auto;
	background-color: ;
	display: flex;
	color: ;
	margin-top: 24px;
}

#container_whychooseus div{
	width: 100%;
	height: auto;
	background-color: ;
	margin: 0px 5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: ;
}

#container_whychooseus div .cards_whychooseus{
	width: 240px;
	height: 250px;
	background-color: white;
	box-shadow: ;
	margin: 10px 10px;
	border-radius: 10px;
	padding: 8px;
}

/* =========================================================== */


/* GALERIA DE FOTOS DE TRABALHOS JÁ FEITOS =============== */
#article4{
	width: 100%;
	height: auto;
	margin-top: 140px;
	background-color: #fee56f;
	padding-top: 20px;
}

#container_galery{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.cards_galery{
	width: 330px;
	width: 330px;
	height: 250px;
	margin: 5px;
	border-radius: 4px;
	background-color: yellow;
}

/* ======================================================= */



#artigo_teste{
	width: 100%;
	height: auto;
	background-color: ;
}

#artigo_teste img{
	border-radius: 5px;
}

#artigo_teste h1{
	font-size: 26px;
}

#artigo_teste p{
	font-size: 17px;
}

#artigo_teste .container{
	margin: 0 auto;
	width: 70%;
	height: auto;
	background-color: ;
	display: flex;
	padding: 30px 0px;
	
}

.cards_teste{
	width: 100%;
	height: 300px;
	margin: 2px;
	background-color: ;
}

.formatacao_descricao{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: ;
	padding: 20px;
}






@media screen and (max-width: 941px){
	.container_cards{
		width: 100%;
	}
}

@media screen and (max-width: 1150px){
	header #header_img{

		background-image: url("../img/banner5.png");
		background-repeat: no-repeat;
		background-size: 700px;

		background-position-x: -150px;
		background-position-y: 10px;
	}
}

@media screen and (max-width: 1063px){
	header #header_img{

		background-image: url("../img/banner5.png");
		background-repeat: no-repeat;
		background-size: 630px;

		background-position-x: -150px;
		background-position-y: 10px;
	}

	#slogan{
		margin-top: 40px;
		margin-right: 0px;
	}

	#slogan h1{
		font-size: 40px;
	}

	#slogan p{
		font-size: 15px;
	}
}

@media screen and (max-width: 980px){
	header #header_img{

		background-image: url("../img/banner5.png");
		background-repeat: no-repeat;
		background-size: 600px;

		background-position-x: -150px;
		background-position-y: 10px;
	}

	#slogan{
		margin-top: 40px;
	}
}

@media screen and (max-width: 950px){
	header #header_img{

		background-image: url("../img/banner5.png");
		background-repeat: no-repeat;
		background-size: 550px;

		background-position-x: -150px;
		background-position-y: 10px;
	}

	#slogan{
		margin-top: 30px;
	}

	#slogan h1{
		font-size: 30px;
	}

	#slogan p{
		font-size: 15px;
	}
}

@media screen and (max-width: 907px){
	header{
		height: 500px;
	}

	header #header_img{

		background-image: url("../img/banner5.png");
		background-repeat: no-repeat;
		background-size: 500px;

		background-position-x: -100px;
		background-position-y: 10px;
	}

	#slogan{
		margin-top: 30px;

	}

	#slogan h1{
		font-size: 30px;
	}

	#slogan p{
		font-size: 15px;
	}
}

@media screen and (max-width: 817px){

	.cards_galery{
		width: 380px;
		height: 290px;
	}

	#menu_mobile{
		width: 100%;
		height: 80px;
		background-color: ;
		display: flex;
		padding: 0px 20px;
		align-items: center;
		justify-content: space-between;

	}

	header #header_img img{
		visibility: visible;
	}

	header #header_img{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		background-image: url("");

	}

	header{
		height: 800px;
	}

	#slogan{
		margin: 10px auto;
		background-color: ;
		float: unset;
	}

	nav{
		visibility: hidden;
	}

	#container_whychooseus{
		flex-wrap: wrap;
		
	}

	#container_whychooseus div{
		margin: 20px 0px;
	}

	#article3{
		flex-wrap: wrap;
		
	}



}

@media screen and (max-width: 558px){
	.container_cards{
		width: 100%;
		background-color: ;
	}

	.card_image{
		width: 100%;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.cards{
		width: 270px;
		
	}

}

@media screen and (max-width: 418px){

	#menu_mobile{
		width: 100%;
		height: 80px;
		background-color: ;
		display: flex;
		padding: 0px 20px;
		align-items: center;
		justify-content: space-between;

	}

	header #header_img img{
		visibility: visible;
		width: 100%;
	}

	header #header_img{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		background-image: url("");

	}

	header{
		height: 800px;
	}

	#slogan{
		width: 100%;
		margin: 10px auto;
		background-color: ;
		float: unset;
	}

	nav{
		visibility: hidden;
	}


}

@media screen and (min-width: 817px){
	#slogan img{
		display: none;
	}
}