#hero {
  min-height: 100vh;
  background: url('../assets/image/about/insegna-1.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  padding: 80px 15px 40px;
  position: relative; /* necessario per l'overlay */
  z-index: 1;
}

#hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(50, 50, 50, 0.5); /* grigio semitrasparente */
  z-index: -1; /* manda l’overlay dietro al contenuto */
}

#hero h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: bold;
}

#hero p {
  font-size: clamp(1rem, 3vw, 1.3rem);
}


    /* Navbar trasparente */
    .navbar {
      background-color: rgba(12, 3, 3, 0.325);
    }
    .navbar a {
      color: white !important;
      font-weight: 500;
    }
    .section-title {
      text-align: center;
      margin-bottom: 2rem;
    }
    footer {
      background: #222;
      color: #ccc;
      padding: 2rem 0;
      text-align: center;
    }

    @media (min-width: 768px) {
  #about img {
    max-width: 400px;
  }
}



/* Immagini del carosello */
#negozioCarousel .carousel-item img {
  max-height: 500px;   /* limite altezza desktop */
  width: auto;
  margin: 0 auto;
  border-radius: 12px; /* angoli arrotondati eleganti */
}

/* Frecce di navigazione */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-size: 100% 100%;
  filter: invert(1);  /* rende le icone bianche → nere, o viceversa */
}

/* Pallini sotto */
.carousel-indicators [data-bs-target] {
  background-color: #333; /* colore scuro ben visibile */
}
.carousel-indicators .active {
  background-color: #ff0000; /* rosso brand (puoi cambiare) */

}