/* ESTILO GERAL */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box ;
	font-family: "Poppins", sans-serif;
	font-weight: 250;
	font-style: normal;

}

body{
	background-color: black ;
	height: 100vh;
}

.interface{
	max-width: 1200px;
	margin: 0 auto;
}

.flex{
	display: flex;
}

.btn-contato button{
	padding: 40 40px 40px 40 px;
	font-size: 18px;
	font-weight: 400;
	background-color: white;
	border: 0;
	padding: 10px 18px;
	cursor: pointer;
	border-radius: 50px;
}

.btn-contato button:hover{
	box-shadow: 0px 0px 8px white;
	transform: scale(1.01);
	transition: .4s;
}

h2.titulo{
	color: white;
	font-size: 30px;
	text-align: center;
}

/* ESTILO CABEÇALHO */

header{
	padding: 40px 4%;
} 

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

header a{
	color: lightgrey;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}

header a:hover{
	color: white;
	transform: scale(1.40);
	transition: 1s;
}

header nav ul{
	list-style-type: none;
}

header nav ul li{
	display: inline-block;
	padding: 0 40px;
}


/*ESTILO TOPO DO SITE*/

section.topo-do-site .flex{
	align-items: center;
	justify-content: center;
	gap: 90px;
}

.topo-do-site h1{
	color: white;
	font-size: 42px;
}

.topo-do-site p{
	color: white;
	margin: 40px 0;
}

.topo-do-site img
	position: relative;
	animation: flutuar 10s ease-in-out infinite alternate;

}

@keyframes flutuar{
	0%{
		top: 0;
	}
	100%{
		top: 30px;
	}
}


/* ESTILO DAS ESPECIALIDADES */

section.especialidades{
	padding: 40px 4%;
}

section.especialidades .flex{
	gap: 60px;
}

.especialidades .especialidades-box{
	color: white;
	padding: 40px;
	border-radius: 20px;
	border: 2px solid white;
	margin-top: 45px;
	transition: .5s
}

.especialidades .especialidades-box:hover{
	transform: scale(1.05);
	box-shadow: 0 0 8px white;
}

.especialidades .especialidades-box i{
	font-size: 70px;
}

.especialidades .especialidades-box h3{
	font-size: 28px;
	margin: 15px 0;
}

/* RESPONSIVO */

@media screen and (max-width: 975px){
/* CLASSES GERAIS */	
.flex{
	flex-direction: column-reverse;
}

.topo-do-site.flex{
	flex-direction: column;
}

/* CABEÇALHO */

.menu-desktop, .btn-contato{
	display: none;
	}
}

/* TOPO DO SITE */

section.topo-do-site{
	padding: 20px 8%;
}

.topo-do-site h1{
	font-size: 30px;
}

.topo-do-site img{
	width: 100%;

}

section.topo-do-site .flex{
	gap: 40px;
}

/* ESTILO DAS ESPECIALIDADES */

section.especialidades{
	padding: 40px 8%;
}

h2.titulo{
	font-size: 34px;
	line-height: 30px;
}