.hero-img {
 position: relative;
 overflow: hidden;
 width: 100%;
}

.hero-background {
 width: 100%;
 height: auto;
 display: block;
}

.hero-overlay {
 position: absolute;
 top: 65%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: rgba(0, 0, 0, 0.4);
 padding: 40px;
 border-radius: 15px;
 color: white;
 text-align: center;
}



.hero-overlay h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
}

.hero-overlay p {
  font-size: 1.3em;
  margin-bottom: 30px;
}

/*.btn-orange {
  background-color: #f7941e;
  color: white;
  padding: 12px 24px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}*/

.btn-orange {
 background-color: #f7941e;
 color: white;
 padding: 10px 20px;
 text-decoration: none;
 border: none;
 border-radius: 5px;
 display: inline-block;
 cursor: pointer;
}
 .btn-orange:link,
 .btn-orange:visited,
 .btn-orange:hover,
 .btn-orange:active {
  color: white;
  text-decoration: none;
 }


/* Responsive: font e padding */
@media (max-width: 768px) {
 .hero-overlay {
  padding: 4px;
  max-width: 100%;
  width: 100%;
  top: 40%;
  left: 50%;
 }

  .hero-overlay h1 {
    font-size: 1.4em;
    margin-bottom:4px;
  }

  .hero-overlay p {
   font-size: 1em;
   margin-bottom: 4px;
  }

 /*.btn-orange {
  background-color: #f7941e;
  color: white;
  padding: 6px 12px;
  border: none;
  font-size: 16px;
  cursor: pointer;
 }*/

 .btn-orange {
  background-color: #f7941e;
  color: white;
  padding: 6px 12px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
 }





 .service-block {
  min-width:100%;
  /*max-width: 250px;*/
  /*flex: 0 0 250px;*/
 }

}









.services-strip {
 display: flex;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
 width: 100%;
 max-width:100%;
}

.service-block {
 min-width: 250px;
 flex-shrink: 0;
 padding: 20px;
 scroll-snap-align: start;
 color: #fff;
 font-family: sans-serif;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

 .service-block h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
 }

.photo img {
 max-width: 100%;
 width: 100%;
 /*height: 100%;*/
 object-fit: cover;
 border-radius: 8px;
}

/* Color themes */
.orange {
 background-color: #f39c12;
 color: #0a2640;
}

.teal {
 background-color: #0a2640;
 color: #fff;
}

.light {
 background-color: #f5f5f5;
 color: #0a2640;
}

.photo {
 background-color: #fefefe;
 color: #000;
 min-width: 300px;
}

/* Scrollbar (facoltativo, solo per estetica su desktop) */
.services-strip::-webkit-scrollbar {
 height: 8px;
}

.services-strip::-webkit-scrollbar-thumb {
 background: #ccc;
 border-radius: 4px;
}

/* Media Queries: layout a griglia su schermi grandi */
@media (max-width: 768px) {
 .services-strip {
  flex-wrap: wrap;
  justify-content: center;
 }

 .service-block {
  min-width: 200px;
  max-width: 100%;
  height: 300px;
  margin: 10px;
 }

 .photo {
  max-width: 100%;
  height: auto;
 }
}

@media (min-width: 768px) {
 .services-strip {
  flex-wrap: wrap;
  justify-content: center;
  width:100%;
 }

 .service-block {
  min-width: 200px;
  max-width: 200px;
  height: 300px;
  margin: 10px;
 }

 .photo {
  max-width: 500px;
  height: auto;
 }
}