body{
  margin:0;
  font-family:Montserrat, sans-serif;
  background:#111;
  color:#fff;
}

.hero{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.9)),
    url('https://images.unsplash.com/photo-1508098682722-e99c643e7f5c?q=80&w=1600') center/cover no-repeat;
}

.hero h1{
  font-family:Oswald, sans-serif;
  font-size:70px;
  margin:0;
  letter-spacing:3px;
}

.giallo{color:#FFD100;}
.rosso{color:#C4122E;}

.hero p{
  font-size:22px;
  opacity:.9;
  margin:20px 0 40px;
}

.btn{
  display:inline-block;
  padding:16px 34px;
  font-weight:bold;
  border-radius:50px;
  text-decoration:none;
  margin:10px;
  transition:.3s;
}

.btn-primary{
  background:#FFD100;
  color:#000;
}

.btn-primary:hover{
  background:#ffdf33;
  transform:scale(1.05);
}

.btn-secondary{
  border:2px solid #C4122E;
  color:#fff;
}

.btn-secondary:hover{
  background:#C4122E;
}

.section{
  padding:80px 20px;
  text-align:center;
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
  margin-top:40px;
}

.card{
  background:#1a1a1a;
  padding:30px;
  border-radius:15px;
  transition:.3s;
}

.card:hover{
  transform:translateY(-8px);
  box-shadow:0 0 25px rgba(255,209,0,.4);
}

footer{
  background:#000;
  padding:30px;
  text-align:center;
  font-size:14px;
  opacity:.8;
}