@CHARSET "utf-8";


/* Algumas configurações globais ============== */
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
/* ============================================ */

#btn_whats_fixo{
	width: auto;
	text-align: right;
	position: fixed;
	bottom: 0px;
	right: 0px;
	padding: 10px;
}

#btn_whats_fixo img{
	margin-right: 15px;
	margin-bottom: 10px;
}

#btn_voltar{
	width: 100%;
	position: fixed;
	top: 0px;
	padding: 20px;
	
}



html, body{
	height: 100vh;
}

#cabecalho_logo{
	width: 100%;
	height: 60px;
	padding: 10px;
	background-color: #1c1c1c;
}



body{
	/* CORES ========================== */
	--fundo_tela_splash: #0000CD;
	--fundo_container_descricao: rgb(255, 255, 255,0.6);
	--fundo_sessao1: ;
	--fundo_sessao2: #DCDCDC;
	--fundo_sessao3: #FAFAFA;
	--fundo_sessao4: ;
	--fundo_btn: #3737f3; /* cor de tijolo que tava antes --> #B94245 */
	--cor_cards_sessao3: ; /* Sem cor */
	--cor_cards_sessao4: ;
	--cor_cards_oferecimentos: ;
	
	/* ================================ */
}


/* Logotipo da tela de splash ============== */
.container_principal{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--fundo_tela_splash); 
}
/* ===================================== */

ul li{
	margin: 5px 0px;
}

header{
	width: 100%;
	height: 200px;
	background-color: var(--cabecalho);

}

header img{
	margin-top: 10px;
	margin-left: 70px;
}

/* Foto do Banner da página principal */
section #sessao1{
	width: 100%;
	background-color: var(--fundo_sessao1);
	background-image: url("../img/banner.jpeg");
	background-size: cover;
	background-repeat: no-repeat;
}
/* ================================== */
section #sessao1 a{
	color: black;
}

section #sessao1 a:hover{
	color: #B94245;
}

section #sessao2{
	width: 100%;
	display: flex;
	padding: 70px 0px;
	justify-content: center;
	background-color: var(--fundo_sessao2);
}

section #sessao3{
	width: 100%;
	padding: 30px 0px;
	background-color: var(--fundo_sessao3);
}

/* A SESSÃO 4 PERTENCE Á UMA ÁREA QUE FOI REMOVIDA ============= */
section #sessao4{
	width: 100%;
	margin-top: 70px;
	background-color: var(--fundo_sessao4);
}

section #sessao4 h1{
	margin-bottom: 30px;
	text-align: center;
	font-size: 30px;
}

#container_sessao4{
	width: 100%;
	margin: 20px 0px;
	padding: 0px 10px;
	display: flex;
	flex-wrap: wrap;
	background-color: var(--cor_cards_sessao3);
	justify-content: space-evenly;
}
/* ============================================================= */

section #sessao3 h1{
	text-align: center;
	font-size: 40px;
	margin-bottom: 20px;
}

section #sessao5{
	width: 100%;
	height: 160px;
	padding: 30px 0px;
	background-color: ;
	background-image: url("../img/furgoneta.jpg");
	background-position: center;
	box-shadow: 0px 0px 30px 5px blue;
}

#container_cards_oferecimentos{
	width: 100%;
	padding: 5px;
	display: flex;
	justify-content: space-around;
	background-color: var(--cor_cards_oferecimentos);
}

.cards_sessao3{
	text-align: center;
	width: 330px;
	margin: 10px;
	box-shadow: 0px 0px 10px 7px #ebebeb;
	border-radius: 10px;
	background-color: var(--cor_cards_sessao3);
}

#container_cards_oferecimentos .cards_sessao3{
	padding: 25px 15px;
}

.cards_sessao3 span{
	font-size: 28px;
	font-weight: bold;
}

.cards_sessao3 p{
	font-size: 18px;
}

.cards_sessao3 #icone{
	text-align: center; 
	width: 100%; 
	margin: 0px 0px 10px 0px;
}

section #sessao1 ul{
	margin-top: 20px;
	margin-left: 30px;
	font-size: 20px;
}

button{
	color: white;
	font-weight: bold;
	margin-top: 15px;
	width: 100%;
	border-style: none;
	height: 60px;
	font-size: 22px;
	border-radius: 40px;
	background-color: var(--fundo_btn);
}

.card_sessao2{
	margin: 10px;
	padding: 10px;
	width: 500px;
	

}

.card_sessao2 h1{
	font-size: 35px;
}

.card_sessao2 p{
	font-size: 23px;
}

.display_flex{
	display: flex;
	justify-content: center;
	align-items: center;
}

.cards_sessao4{
	width: 330px;
	height: 200px;
	margin: 5px 5px 23px 5px;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 1px black;
	background-color: var(--cor_cards_sessao4);
}

#container_card_footer{
	width: 100%;
	margin-bottom: 150px;
	display: flex;
	justify-content: center;
	/* background-color: red; */
}

.container_logo_rodape{
	width: 100%;
	margin-top: 60px;
	display: flex;
	justify-content: center;
	align-items: stretch;
	/* background-color: blue; */
}

#container_cards_imagens{
	width: 100%;
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.trabajo10{
	background-image: url("../img/trabajos/trabajo10.jpeg");
	background-size: cover;
}

.trabajo11{
	background-image: url("../img/trabajos/trabajo11.jpeg");
	background-size: cover;
}

.trabajo12{
	background-image: url("../img/trabajos/trabajo12.jpeg");
	background-size: cover;
}

.trabajo13{
	background-image: url("../img/trabajos/trabajo13.jpeg");
	background-size: cover;
	background-position: 5px;
}

.trabajo14{
	background-image: url("../img/trabajos/trabajo14.jpeg");
	background-size: cover;
	background-position: 5px;
}

.trabajo15{
	background-image: url("../img/trabajos/trabajo15.jpeg");
	background-size: cover;
	
}

.trabajo16{
	background-image: url("../img/trabajos/trabajo16.jpeg");
	background-size: cover;
	
}

.trabajo17{
	background-image: url("../img/trabajos/trabajo17.jpeg");
	background-size: cover;
	
}

.trabajo18{
	background-image: url("../img/trabajos/trabajo18.jpeg");
	background-size: cover;
	background-position: 0px 500px;
}

.trabajo19{
	background-image: url("../img/trabajos/trabajo19.jpeg");
	background-size: cover;
}


/*  */

.trabajo1{
	background-image: url("../img/trabajos/trabajo1.jpeg");
	background-size: cover;
}

.trabajo2{
	background-image: url("../img/trabajos/trabajo2.jpeg");
	background-size: cover;
}

.trabajo3{
	background-image: url("../img/trabajos/trabajo3.jpeg");
	background-size: cover;
}

.trabajo4{
	background-image: url("../img/trabajos/trabajo4.jpeg");
	background-size: cover;
}

.trabajo5{
	background-image: url("../img/trabajos/trabajo5.jpeg");
	background-size: cover;
}

.trabajo6{
	background-image: url("../img/trabajos/trabajo6.jpeg");
	background-size: cover;
}

.trabajo7{
	background-image: url("../img/trabajos/trabajo7.jpeg");
	background-size: cover;
}

.trabajo8{
	background-image: url("../img/trabajos/trabajo8.jpeg");
	background-size: cover;
}

.trabajo9{
	background-image: url("../img/trabajos/trabajo9.jpeg");
	background-size: cover;
}

#creditos_rodape{
	width: 100%; 
	margin-bottom: 60px;
}

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

#creditos_rodape a{
	color: blue;
}



#galeria{
	width: 100%;
	height: auto;
	padding: 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.container_imagem, .container_imagem img{
	width: 300px;
	height: 250px;
	border-radius: 5px;
}

.container_imagem{
	margin: 5px;
}

.container_imagem img{
	box-shadow: 0px 0px 8px #1c1c1c;
}

/* PARTE RESPONSIVA DO MOBILE, FOTOS DAS CATEGORIES AUMENTA DE TAMANHO EM DISPOSITIVOS MOBILE  */
/* FIZ O MEDIA SCREEN NO CSS GLOBAL PORQUE NO CSS MOBILE NÃO TÁ FUNCIONANDO */
@media screen and (max-width: 908px){
	.container_imagem, .container_imagem img{
		width: 100%;
		height: 330px;
		border-radius: 5px;
	}

	.container_imagem{
		margin-bottom: 20px;

	}
}
/* ============================================================================================ */