*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;

}

body{
	background: #0f172a;
	color: white;
	line-height: 1.6;
}

header{
background:#020617;
position:fixed;
width:100%;
top:0;
z-index:1000;
}

.container{
	background: #000019;
	max-width: 4500px;
	max-height: 70px;
	margin: auto;
	padding: 15px;	
	color: white;


}

.nav{
	display: flex;
	gap: 50px;
	justify-content: space-between;
	align-items: center;
	

}

.nav a{
	color: white;
	text-decoration: none;
	padding: 10px;
	font-size: 17px;
	position:relative;
}

.nav a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-5px;
	width:0;
	height:2px;
	background:#38bdf8;
	transition:0.3s;
}

.nav a:hover::after{
	width:100%;
}


.logo img{
	display: flex;
	max-height: 160vh;
	max-width: 160px;
	align-items: center;
	width: auto;
	width: 100px;
	height: 50px;


}

.menu{
	color: white;
}

.menu-btn{
	display: none;
	font-size: 26px;
	cursor: pointer;
	padding: 20px;
}

.hero{

  
height:100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
background: linear-gradient(135deg, #020617, #0f172a, #38bdf8);
opacity:0;
transform:translateY(20px);
animation:aparecer 1s ease forwards;
}

@keyframes aparecer{

	from{
		opacity:0;
		transform:translateY(20px);
	}

	to{
		opacity:1;
		transform:translateY(0);
	}

}

.hero h1{
	font-size: 50px;
	margin-bottom: 25px ;
	color: white;
}

.hero p{
	font-size: 18px;
	margin-bottom: 25px;
	color: gray;
	padding: 10px;

}

.btn{
	font-size: 16px;
	text-decoration: none;
	color: black;
	border-radius: 20px;
	background:#38bdf8;
	padding: 12px 30px;
	font-weight:bold;
	transition: 0.3s;

}

.btn:hover{
	background: darkgreen;

}

.grid{
	display: grid;
	grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
	gap:25px;
	max-width:1000px;
	margin:auto;
	margin-bottom: 50px;
}

.card{
	background:#000019 ;
	color: white;
	padding: 40px 30px;
	border-radius: 20px;
	transition: 0.3s;
	text-align: center;
}

.card:hover{
	transform: translateY(-5px);
	background: #546987;
}

.serviços{
	background: linear-gradient(135deg, black, #0f172a, #020617);
	font-size: 18px;
	height: 50vh;
}

.serviços h2{
	text-align: center;
	color: white;
	padding: 30px;
	font-size: 30px;
}

.sobre{	
	padding: 50px 20px;
	text-align: center;
	background:  #0f172a;
	color: white;
}

.sobre h2{
	font-size: 30px;

}

.sobre p{
	padding: 50px;
}

.contato{
	background: linear-gradient(135deg, #020617, #0f172a, black);
	padding: 100px 20px;
	color: white;
	text-align: center;
}	

.contato h2{
	padding: 5px;		
	font-size: 28px;
}

.contato p{
	padding: 20px;

}

footer{
	text-align: center;
	background: #020617;
	color: gray;
	padding: 30px;
}





@media(max-width:768px){

nav{
display:none;
flex-direction:column;
background:#020617;
position:absolute;
top:60px;
right:0;
width:200px;
padding:20px;
}

nav.active{
display:flex;
}

.menu-btn{
display:block;
}

.hero h1{
font-size:32px;
}

.serviços{
	height: 150vh;
}

.sobre{	
	padding: 50px 20px;
	text-align: center;
	background:#020617 ;
}

.sobre p{
	text-align: justify-all;
	font-size: 18px;

}