html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      background-color: rgb(20, 15, 12);
      font-family: sans-serif;
    }

    .scroll-container {
      height: 100dvh;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      overflow-x: hidden;
    }

    .slide {
      position: relative;
      height: 100dvh;
      scroll-snap-align: start;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: white;
      text-align: left;
      z-index: 1;
    }

    /* Fixed labels */
    .top-label,
    .bottom-label {
      position: fixed;

      color: white;
      z-index: 10;
    }

    .bottom-label {
      right: 25px;
    }

    .top-label {
      left: 25px;
    }

    .top-label { top: 0; padding: 10px; }
    .bottom-label { bottom: 0; padding: 10px; }

    h1 {
      font-size: 2.5rem;
      line-height: 1.2;
    }

    h2 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }

    .slide h1, .slide h2, .slide p {
      text-shadow:
        0 0 10px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 0, 0, 0.6);
    }

    /* Fullscreen carousel slide 1 */
    .carousel-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }

    .carousel {
      margin-left: auto;
      margin-right: auto;
    }

    .carousel-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 2s ease-in-out;
    }

    .carousel-image.active {
      opacity: 1;
    }

    /* Video section inside a slide */
    .video-inline {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .video-inline video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Layout due colonne */
    .two-columns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3rem;
      width: 90%;
    }

    .two-columns .text {
      flex: 0.5;
    }

    .two-columns .image,
    .two-columns .carousel {
      flex: 1;
      text-align: center;
    }

    .two-columns img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
    }

    /* Modifica slide Concept: più spazio al carosello */
    .slide.concept .two-columns .text {
      flex: 0.4;
    }

    .slide.concept .two-columns .carousel {
      flex: 0.6;
    }

    /* Caroselli (concept + aggiuntivi) */
    .concept-carousel, .additional-carousel {
      position: relative;
      width: 100%;
      margin: 0 auto;
    }

    .desktop .concept-slide, .bg-image {
        height: 500px;
        width: 500px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 8px;
    }

    .concept-slide, .additional-slide {
      display: none;
    }

    .concept-slide.active, .additional-slide.active {
      display: block;
    }

    .concept-slide img, .additional-slide img {
      max-width: 80%;
      height: auto;
      border-radius: 4px;
      cursor: pointer;
    }

    .concept-caption, .additional-caption {
      margin-top: 0.5rem;
      font-size: 0.9rem;
      color: rgba(255,255,255,0.85);
    }

    /* Frecce piccole sotto a destra */
    .concept-nav-container {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }

    .concept-nav {
      background: rgba(255,255,255,0.12);
      color: white;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.18s, transform 0.12s;
      font-size: 1rem;
      padding: 0.25rem 0.5rem;
      line-height: 1;
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .concept-nav:hover {
      background: rgba(255,255,255,0.22);
      transform: translateY(-2px);
    }

    /* Centra h2 solo nella prima slide */
    .slide:first-child h2 {
      text-align: center;
    }

    /* Hide scrollbar but keep scrolling functional */
    .scroll-container {
      overflow-y: scroll; /* or auto */
      scrollbar-width: none;  /* Firefox */
    }

    .scroll-container::-webkit-scrollbar {
      display: none;  /* Chrome, Safari, Edge */
    }

    /* Necessario per la gestione delle slide */
.concept-slide {
  display: none;
  height: 500px;
  width: 500px;
}

.concept-slide.active {
  display: block;
}

.carousel-image {
  display: none;
  width: 100%;
  object-fit: cover;
}

.carousel-image.active {
  display: block;
}

.bg-image {
  background-size: contain;
  background-position: center;
  border-radius: 8px;
}

.mobile h1 {
    font-size: 2rem;
}

.mobile h2 {
    font-size: 1.5rem;
    padding-left: 20px;
    padding-right: 20px;
}

.mobile p {
    font-size: 0.8rem;
    padding-left: 20px;
    padding-right: 20px;
}

.mobile .concept-slide {
    width: 350px;
    height: 350px;
}

.mobile .bg-image {
    width: 350px;
    height: 350px;
}

.text h2 {
  margin-bottom: 25px;
  line-height: 0;
}

.text p {
  margin-top: 0;
}

/* Nasconde l'elemento su schermi piccoli (< md), mostra su md e oltre */
    .desktop { display: none !important; }

    @media (min-width: 768px) {
      .desktop { display: flex !important; }

      .concept-carousel {
        max-width: 500px;
        max-height: 350px;
        margin-top: 20%;
      }

      .two-columns, .carousel {
        height: 100dvh;
      }
    }

    /* Mostra l'elemento su schermi piccoli (< md), nasconde su md e oltre */
    .mobile { display: flex !important; }

    @media (min-width: 768px) {
      .mobile {
        display: none !important;
      }
    }

    @media (max-width: 800px) {
      .desktop .concept-slide {
        width: 450px;
        height: 450px;
      }

      .desktop .bg-image {
        width: 450px;
        height: 450px;
      }

      h1 {
        font-size: 1.6rem;
      }

      h2 {
        font-size: 1.1rem;
      }
    }