@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');

body {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: #f4f4f4;
	color: #333;

	.fundo {
		background-image: url(background.png);
		background-size: cover;
	}
}

section {
	padding: 40px 0;
	margin-bottom: 20px;
	background-color: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

  
header {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300px;

	img {
		height: 60%;
	}
}

nav {
	ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
		overflow: hidden;
	}

	li {
		margin-bottom: 20px;
		background-color: #fff;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);

		a {
			display: block;
			color: #333;
			text-align: center;
			padding: 30px 16px;
			text-decoration: none;
		}
		
		a:hover {
			background-color: #ddd;
			color: black;
		}
	}

	li:last-child {
		margin-bottom: 0px;
	}
}

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

main {
	.contato {
		display: flex;
	    justify-content: space-around;
    	margin: 10px 0px;

		.btn-contato {
			border: none;
			border-radius: 100%;
			padding: 15px;
			cursor: pointer;

			&.whatsapp {
				background-color: green;
			}

			&.email {
				background-color: blue;
			}

			&.instagram {
				background-color: pink;
			}
		}

		.flutuante {
			 position: fixed;
    		bottom: 20px;
    		right: 20px;
    		z-index: 1000;   
		}

		.esconder {
			opacity: 0;
			pointer-events: none;
			transform: translateY(20px);
			transition: opacity 0.8s ease, transform 0.8s ease;
		}
	}

	.contato-descricao {
		padding-top: 4rem;
		text-align: center;

		.background-mobile {
			margin-top: 5px;
			background: #4f4f4fb0;
			border-radius: 10px;
			color: white;
		}
	}

	@media (min-width: 768px) {
		.contato-descricao {
			display: flex;
    		justify-content: space-around;

			.background-mobile {
				margin-top: 0px;
				background: none;
				color: black;
			}
		}
	}

	.icone-sessao {
		display: flex;
		justify-content: center;
		margin-top: 50px;
		
		img {
			height: 100px;
			width: 100px;
		}
	}

	.fundo-cinza {
		background-color: rgba(185, 185, 185, 0.122);
	}

	.info {
		padding: 15px;
		text-align: justify;
		font-size: 18px;
	}

	h2 {
		text-align: center;
		font-family: "Parkinsans", sans-serif;
		font-weight: bold;
	}

	.imagem {
		width: 100%;
		overflow: hidden;

		img {
			width: 100%;
			object-fit: cover;
		}
	}

	@media (min-width: 768px) {
		.imagem {
			width: 59vh;
		}
	}
}