*{
 margin: 0;
 padding: 0;
 overflow-x: hidden;
 border-sizing: border-box;
}
body{
 font-family: Arial, sans-serif;
 background: 
 background-size: cover;
 opacity: 0.95s;
}
header{
 background: #000;
 display: flex; 
 padding-top: 30px;
 justify-content: space-between;
 padding: 3.75rem 3.75rem;
 align-items: center;
}
header h1{
 color: #fff;
 font-size: 35px;
 font-family: 'Quicksand', sans-serif;
 font-style: italic;
}
nav ul{
 display: flex;
 align-items: center;
}
nav ul li{
 list-style: none;
 display: inline;
}
nav ul li a{
 color: #fff;
 text-decoration: none;
 margin: 10px;
 padding: 15px 20px;
 margin-left: 20px;
 font-family: 'Quicksand', sans-serif;
 font-weight: bold;
}
.hero{
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 background-color: #e0e3e6;
 padding-top: 30px;
 padding: 3rem;
}
.hero h2{
 font-size: 6rem;
 margin-bottom: 1rem;
 font-family: 'Quicksand', sans-serif;
}
.hero p{
 font-size: 1.2rem;
 margin-bottom: 2rem;
}
.hero .btn{
 background: #000; 
 color: #fff;
 padding: 0.65rem 1.2rem;
 text-decoration: none;
 border-radius: 5px;
 transition: background;
}
,hero .btn:hover{
 background: #333;
}
.cards{
 display: grid;
 flex-wrap: wrap;
 grid-template-columns: repeat(2, 1fr); 
 gap: 30px;
 margin: 50px auto;
 max-width: 1100px;
 padding: 20px;
}
.card{
 background: #fff;
 border-radius: 10px;
 padding: 25px;
 box-shadow: 0 2px 8px rgba(0,0,0,0, .1);
 text-align: center;
}
.card h3{
 margin-bottom: 10px;
}
.card p{
 color: #555;
 margin-bottom: 15px;
}
.card .btn{
 display: inline-block;
 background: #000;
 color: #fff;
 padding: 0.65rem 1.2rem;
 border-radius: 5px;
 text-decoration: none;
 transition: background;
}
.card .btn:hover{
 background: #333;
}
.footer-container{
 text-align: center;
 background: #000;
 color: #fff;
 padding: 30px 20px 15px;  	
}
.footer-links a{
 text-decoration: none;
 margin: 0 12px;
 color: #ddd;
 font-size: 15px;
 transition: color 0.3s;
}
.footer-social{
 padding: 1rem 1rem;
}
.footer-social a{
 margin: 0 8px;
 font-size: 20px;
 color: #ddd;
 transition: 0.3s;
}
.footer-social a:hover{
 color: #fff; 
}
.footer-copy{
 font-size: 13px; 
 color: #777;
}
.nome{
 margin-top: 5px; 
 font-size: 0.8rem;
 color: #777;
}
@media(max-width: 768px){
header{
 padding: 2.5rem 2.5rem;
}
header h1{
 font-size: 0.9rem;
 position: relative;
 bottom: 25px;
 right: 30px;
}
nav ul li a{
 font-size: 0.6rem;
}
.hero h2{
 font-size: 2rem;
}
.hero p{
 font-size: 0.8rem;
}
.hero .btn{
 font-size: 0.5rem;
}
.cards{
 grid-template-columns: 1fr;
}
.card h3{
 font-size: 1rem;
}
.card p{
 font-size: 0.7rem;
}
.card .btn{
 font-size: 0.5rem;
}
.footer-links a{
 font-size: 11px;
}
.footer-social{
 padding: 1rem 1rem;
}
.footer-social a{
 font-size: 16px;
}
.footer-copy{
 font-size: 6.5px;
}
.nome{
 font-size: 0.4rem;
}
.ul{
 position: absolute;
 top: 55px;
 right: auto;
 left: 45%;
 max-width: 100%;
 transform: translatex(-50%);
 padding: 0.1rem;
}
}