/* ===== LAYOUT ===== */

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

/* ===== HERO ===== */

.hero{
height:65vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.hero h1{
font-size:54px;
margin-bottom:10px;
opacity:.9;
}

.hero p{
font-size:20px;
opacity:.9;
}

/* ===== CARD CONTENT ===== */

.section{
padding:80px 0;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}

.card{
background:white;
padding:35px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
transition:.3s;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.card h2{
margin-bottom:15px;
font-size:24px;
}

.card ul{
margin-left:18px;
}

/* ===== MOBILE ===== */

@media(max-width:700px){

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

}