*{
  font-family:'Caviar2',sans-serif;
  box-sizing:border-box;
}

#servizi{
  padding:5rem 0;
  background:#ffffff;
}

.wrapper{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  text-align:center;
  padding:0 2vw;
}

.title{
  font-size:clamp(2.5rem,6vw,4.5rem);
  color:#a9ad00;
  animation:fadeDown 1s forwards;
  margin-bottom:4rem;
}

.services-list{
  list-style:none;
  margin:0 auto 4rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:4rem 2rem;
  justify-content:space-evenly;
}

.service{
  flex:0 1 clamp(260px,30%,360px);
  max-width:360px;
  text-align:center;
  opacity:0;
  transform:translateY(25px);
  animation:fadeUp .8s forwards;
}

.service:nth-child(4),
.service:nth-child(5){
  flex:0 1 clamp(260px,35%,420px);
}

.service:nth-child(1){animation-delay:.2s}
.service:nth-child(2){animation-delay:.4s}
.service:nth-child(3){animation-delay:.6s}
.service:nth-child(4){animation-delay:.8s}
.service:nth-child(5){animation-delay:1s}

.service h3{
  text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,2rem);
  color:#a9ad00;
  position:relative;
  display:inline-block;
  padding:.8rem 1.2rem;
  transition:.3s;
  line-height:1.25;
  min-height:3.6rem;      
  max-width:100%;
}

.service p{
  font-size:clamp(1rem,2.2vw,1.25rem);
  margin-top:1rem;
  max-width:38ch;
  margin-inline:auto;
}

.service h3::after{
  content:'';
  position:absolute;
  inset:0;
  border:2px solid #a9ad00;
  transform:scaleX(0);
  transition:transform .3s ease;
}

.service:hover h3::after{transform:scaleX(1)}
.service:hover h3{transform:translateY(-4px)}

@keyframes fadeDown{
  from{opacity:0;transform:translateY(-35px)}
  to{opacity:1;transform:translateY(0)}
}

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

.btn-vetrina{
  display:inline-block;
  padding:1rem 3rem;
  font-size:1.1rem;
  font-weight:600;
  color:#fff;
  background:#a9ad00;
  border-radius:60px;
  text-decoration:none;
  transition:.3s;
}

.btn-vetrina:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}

@media (max-width:820px){
  .service{
    flex:1 1 100%;
    max-width:480px;
  }
  .service:nth-child(4),
  .service:nth-child(5){
    flex:1 1 100%;
  }
}