@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

:root {
	--dark:#030504; 
	--white:#FFF;
	--primary: #A5CEA1;
	--secondary:#D7D9CF;
	--tertiary:#E9B646;
	--border: 2px;
	--padding: 20px;
	--sombra: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

* {
	margin:0;
	padding:0;
}

body{
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}	

.container{
	max-width: 1024px;
	padding: var(--padding);
	margin:0 auto;
}

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

.grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1rem;
}

p{
	line-height: 160%;
	margin-bottom:1rem;
}

.center{
	text-align: center;
}

#cabecalho{
	background-color: var(--dark);
	color: var(--white);
}

#cabecalho .contact{
	width: 20%;
}

#hero{
	height: 200px;
	background: url(images/header-bg-1.png) no-repeat center top;
	background-size: cover;
}
#feedback #hero {
	background-image: url(images/header-bg-2.png)
}

#empresa::before{
	content: " ";
	background: url(images/empresa-img.svg) no-repeat center top;
	height: 42px;
	display: block;
	width: 100%;
}

h2{
	font-weight: 400;
	color: var(--dark);
	text-transform: uppercase;
	margin: 1.5rem 0;
}

#empresa h2{
	font-size: 2.5rem;
	color:var(--tertiary);
	background: none;
}

h3{
	font-size: 1.25rem;
	font-weight: 400;
}

h4{
	font-weight: 400;
	margin-bottom: 1rem;
}

#produtos .produto{
	padding: var(--padding);
	border-radius: var(--border);
	box-shadow: var(--sombra);
}

.tags span{
	background-color:var(--secondary);
	font-size: .8rem;
	border-radius: 5rem;
	padding: 0 .5rem;
	color: #555;
}

#contato{
	background-color: var(--secondary);
}

#contato .formulario #envia_email > *{
	display: block;
}

#contato .formulario{
	width: 60%;
}

#contato .contatos{
	width: 40%;
}

#contato form input,
#contato form textarea,
button{
	width:90%;
	padding:10px;
	border-radius:var(--border);
	border: none;

	font-size: 1rem;
	font-family: 'Open Sans', sans-serif;
}

button{
	margin-top: 1rem;
	width:auto;
	background-color: var(--tertiary);
}

#contato form label{
	visibility:hidden;
}

#rodape{
	background-color: var(--primary);
	padding-top:1.5rem ;
}

#rodape .felipedario{
	background-color: var(--dark);
	color: var(--white);
	font-size: .6rem;
	padding: .5rem;
}

#rodape .felipedario a{
	color: var(--white);
}
#rodape .felipedario p{
	margin: 0;
}
#rodape img{
	max-width: 80%;
}

.bt-whatsapp{
	background:#42D755 url(images/icone-zap.svg) no-repeat center center;
	border-radius:100%;
	width: 60px;
	height: 60px;
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	box-shadow: var(--sombra);
	transition: .4s;
}
.bt-whatsapp:hover{
	transform: rotate(-15deg);
	transition: .4s;
}

.bt-whatsapp span{
	display: none;
}


a[target="_blank"]{
color:#1d5696;
}

/* Mobile */
@media (max-width: 767px) {
 	.flex,
	.grid{
		display: block;
	}
	#cabecalho .flex{
		display: flex;
	}
	.produto{
		margin-bottom: 1rem;
	}
	h1{
		margin: 0 auto;
	}
	.contact{
		display: none;
	}
	#empresa::before{
		background-position-x: right;
	}
	#empresa h2{
		font-size: 1.5rem;
	}
	img{
		max-width: 100%;
	}
	#representadas img{
		padding: .5rem;
	}
	#contato .formulario,
	#contato .contatos{
		width: 100%;
	}
	#contato .formulario{
		margin-bottom: 1rem;
	}
	.bt-whatsapp{
		bottom: 1rem;
		right: 1rem;
	}
}