html, body {
            width: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Montserrat', sans-serif;
            background-color: black;
            color: white;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Disabilita la selezione del testo in tutta la pagina */
body, img, video {
  -webkit-user-select: none !important;  /* Safari */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* Internet Explorer/Edge */
  user-select: none !important;          /* Chrome, Opera */
}

/* Impedisce l'interazione con le immagini e i video per evitare download */
img {
  pointer-events: none; /* Impedisce il clic per salvare */
}

/* Rendi la scrollbar invisibile ma permetti comunque lo scroll */
body.no-scroll, html.no-scroll {
  overflow: overlay; /* Nasconde la scrollbar ma consente comunque lo scroll */
  height: 100vh; /* Mantiene l'altezza fissa */
  overflow-x: hidden;
}

        /* Aggiungi l'header */
        #header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 65px; /* Altezza dell'header uguale al logo */
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0) 100%); /* Sfumatura da trasparente a completamente trasparente */
            z-index: 999;
            transition: background-color 0.3s ease;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }



        #logo {
            position: fixed;
            top: 12px;
            left: 25px;
            font-size: 30px;
            font-weight: bold;
            color: #C83631;
            z-index: 1000;
            user-select: none; /* Impedisce la selezione */
            cursor: pointer; /* Mantiene il cursore come puntatore */
        }

        #logo img {
    user-select: none;
    pointer-events: none; /* Evita che il click interagisca con l'immagine invece che con il link */
}


        .banner {
            position: relative;
            width: 100%;
            height: 70vh;
            min-height: 280px;  /* Altezza minima del banner */
            min-width: 320px;
            overflow: hidden;
            background-image: url("loading-banner.jpg");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .banner::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 90%; /* La parte che si sfuma verso il basso */
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0));
            z-index: 1;
        }

        .banner video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0; /* Assicurati che il video sia sotto la sovrapposizione della sfumatura */
        }

        .banner-text {
            position: absolute;
            top: 50%;
            margin-left: 30px;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.7);
            font-size: 1rem; /* Base più piccola */
            font-weight: bold;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
            z-index: 2;
        }

        .banner-text h1 {
            font-size: 1.1rem; /* Prima era 2.5rem, ora più piccolo */
            margin: 0 0 5px;
        }

        .banner-text p {
            font-size: 0.8rem; /* Prima era 1.2rem, ora più compatto */
            font-weight: normal;
            color: #ddd;
            margin: 0;
            opacity: 0.8;
        }

        .video-logo {
            max-width: 11rem;  /* 150px equivale a 9rem, a seconda della base font-size */
            max-height: 4rem;  /* 50px equivale a 3.125rem */
            object-fit: contain;  /* Mantieni le proporzioni del logo */
            margin-top: 0.625rem;  /* 10px equivale a 0.625rem */
            filter: drop-shadow(0.25rem 0.25rem 0.625rem rgba(0, 0, 0, 0.5));  /* Ombra applicata direttamente al logo con unità rem */
        }


        .preview-title {
            font-size: 0.6rem;
            color: #ccc;
            font-weight: normal;
            text-transform: uppercase;
        }

        .preview-title i {
            margin-right: 5px;
            margin-left: -2px;
            font-size: 0.6rem;
            color: #C83631;
            text-shadow: none;

        }


        .categories {
    width: 100vw; /* Larghezza esatta della viewport */
    max-width: 100vw; /* Evita che si allarghi oltre la viewport */
    padding: 0; /* Mantiene un po' di spazio ai lati */
    margin-top: -100px;
}

.categories h2:first-child {
    position: relative;  /* Forza la posizione relativa per il primo h2 */
    z-index: 2;  /* Assicura che il primo h2 stia sopra gli altri elementi */
}


        .category h2 {
            font-weight: 600;
            font-size: 17px;
            color: white;
            margin-bottom: -15px;
            margin-left: 28px;
            position: relative;
            cursor: default;
        }

        .category h2::after {
            content: attr(data-tooltip) " \2193"; /* Testo del tooltip con freccia verso il basso */
            display: inline-block; /* Permette l'uso di transform */
            margin-left: 5px;
            color: #999;
            padding: 5px 8px;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 400;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transform: translateX(-20px); /* Maggiore distanza iniziale */
            transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out; /* Animazione */
        }

        .category:hover h2::after,
        .category h2:hover::after {
            opacity: 1;
            visibility: visible;
            transform: translateX(0); /* Mostra il tooltip */
        }



    .more-videos-message {
      display: none; /* Nascosto di default */
      align-self: center;
      white-space: nowrap;
      font-size: 14px;
      color: #666;
      padding: 30px;
      animation: scrollMessage 6s infinite;
    }

    @keyframes scrollMessage {
      0% {
        opacity: 0;
        transform: translateX(200px);
      }
      20% {
        opacity: 1;
        transform: translateX(0);
      }
      80% {
        opacity: 1;
        transform: translateX(0);
      }
      100% {
        opacity: 0;
        transform: translateY(20px);
      }
    }


    .carousel-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        /* Allinea il carosello a sinistra */
        margin-left: 0; /* Elimina il margine che potrebbe essere stato applicato */
        padding-left: 0; /* Assicurati che non ci sia un padding sinistro */
    }


    .carousel-content {
        display: flex;
        transition: transform 0.3s ease;
        /* Allinea il contenuto a sinistra */
        margin-left: 0; /* Elimina il margine sinistro che potrebbe causare il problema */
    }

    .carousel-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        color: white;
        border: none;
        padding: 100% 30px;
        cursor: pointer;
        z-index: 100;
        opacity: 0; /* Li rende invisibili inizialmente */
        visibility: hidden; /* Non visibili fino a quando non serve */
        transition: opacity 0.3s ease, transform 0.3s ease; /* Animazione fluida */
    }

    .carousel-button :hover {
    transform: scale(1.2);
}

    .carousel-button.left {
        left: 0px;
    }

    .carousel-button.right {
        right: 0px;
    }

    /* Icone dei bottoni */
    .carousel-button i {
        font-size: 28px;
        color: white;
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.8); /* Ombra solo sul testo (icona) */

    }

    /* Mostra i bottoni quando si passa sopra il carosello */
    .carousel-container:hover .carousel-button {
        opacity: 1;
        visibility: visible; /* Li rende visibili quando il mouse è sopra */
    }


        .video-thumbnail {
          flex-shrink: 0;
          width: 240px;
          height: 135px;
          overflow: hidden;
          cursor: pointer;
          position: relative;
          transition: transform 0.3s ease, z-index 0.3s ease;
          z-index: 1;
          border-radius: 5px;
          background-color: #181818 !important;
          background-image: url("loading.png");
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          margin: 0px;
          padding: 0px;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box; /* Considera padding e border nella larghezza totale */
          border: 1px solid #222; /* Bordo rosso scuro */

        }

        /* L'immagine di anteprima (inizialmente visibile) */
        .thumbnail-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 5px;
        }

        /* Video di anteprima (nascosto inizialmente) */
        .video-preview {
          position: absolute;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0; /* Nascosto */
          transition: opacity 0.3s ease;
          border-radius: 5px;
        }

        /* Quando si passa sopra l'elemento, il video diventa visibile */
        .video-thumbnail:hover .video-preview {
          opacity: 1;
        }

        /* Optional: Nascondere l'immagine di anteprima durante il passaggio del mouse */
        .video-thumbnail:hover .thumbnail-image {
          opacity: 0;
        }


        .video-thumbnail:hover {
            transform: scale(1.2) translateX(25px) translateY(5px);
            z-index: 10;
            box-shadow: 0px 15px 10px 15px rgba(0, 0, 0, 0.7);
            transition: box-shadow 0.3s ease-in-out;
            border-radius: 5px;
            border: 2px solid #C83631; /* Bordo rosso scuro */

        }


        .highlighted .video-thumbnail {
            flex-shrink: 0;
            width: 168px;
            height: 210px;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            transition: transform 0.3s ease, z-index 0.3s ease;
            z-index: 1;
            background-color: rgba(24, 24, 24, 1);
            background-image: url("loading.png");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            margin: 0px;
            padding: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .highlighted .video-container {
          padding-bottom: 28px;

        }

        .highlighted .video-thumbnail:hover {
            transform: scale(1.2) translateX(15px) translateY(12px);
            z-index: 10;
            box-shadow: 0px 15px 10px 15px rgba(0, 0, 0, 0.7);
            transition: box-shadow 0.3s ease-in-out;
            border-radius: 5px;
            margin: 0;
            padding: 0;
            border: 2px solid #C83631; /* Bordo rosso scuro */
        }

        .highlighted .video-thumbnail .description {
            position: absolute;
            bottom: 0px;
            width: 100%;
            padding: 10px;
            display: none; /* Nascondi la descrizione inizialmente */
            z-index: 9999;
            font-size: 11px; /* Font principale */
            line-height: 1.3; /* Mantiene le righe leggibili */
            text-align: left; /* Allinea il testo a sinistra */

        }

        /* SOLO modifica delle dimensioni per highlighted2 */
        .highlighted2 .video-thumbnail {
            width: 300px;
            height: 168px;
            border: 2px solid #222; /* Bordo rosso scuro */
        }

        .highlighted2 .video-thumbnail:hover {
            transform: scale(1.2) translateX(25px) translateY(5px);
            z-index: 10;
            box-shadow: 0px 15px 10px 15px rgba(0, 0, 0, 0.7);
            transition: box-shadow 0.3s ease-in-out;
            border-radius: 5px;
            margin: 0;
            padding: 0;
            border: 2px solid #C83631; /* Bordo rosso scuro */
        }


        .video-thumbnail video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
            visibility: visible; /* Mostra il primo fotogramma iniziale */
            pointer-events: none; /* Disabilita l'interazione col video */
            border-radius: 3px;
        }

        .video-thumbnail .description {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            color: white;
            max-width: 100%;
            background: linear-gradient(to top,
                rgba(158, 42, 38, 1) 0%,
                rgba(100, 20, 18, 0.9) 30%,
                rgba(50, 10, 9, 0.5) 70%,
                rgba(0, 0, 0, 0.3) 100%);
            padding: 10px;
            display: none; /* Nascondi la descrizione inizialmente */
            z-index: 9999;
            font-size: 11px; /* Font principale */
            line-height: 1.3; /* Mantiene le righe leggibili */
            text-align: left; /* Allinea il testo a sinistra */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

        }

        .video-thumbnail .description .primary {
            display: block; /* Mantiene la prima riga sopra */
            font-weight: bold; /* Puoi evidenziare la prima riga se vuoi */
        }

        .video-thumbnail .description .secondary {
            display: block; /* La seconda riga va sotto */
            font-size: 10px; /* Più piccola */
            margin-top: 3px; /* Aggiunge un po' di spazio tra le due righe */
        }


.video-thumbnail:hover .description {
    display: block; /* Mostra la descrizione al passaggio del mouse */
}


.video-container {
  display: inline-flex;
  position: relative;
  flex-wrap: nowrap;
  gap: 5px;
  margin: 0 auto; /* Centra il contenitore */
  padding: 28px 80px 28px 28px;
  cursor: grab;
  overflow-x: auto; /* Scroll orizzontale se serve */
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: auto; /* Riempie tutta la larghezza della viewport */
  max-width: 100%;
  scroll-behavior: smooth; /* Per un effetto scorrimento fluido */
  box-sizing: border-box; /* Considera padding e border nella larghezza totale */
}

.center-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: white;
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.7); /* Aggiunge un'ombra all'icona */
    background: rgba(0, 0, 0, 0.4);
    padding: 100%;
    border-radius: 5%;
    display: none; /* Nascosta di default */
    pointer-events: none; /* Non interferisce con i click */
    transition: opacity 0.2s ease-in-out;
}


/* VIDEO PLAYER */
    .video-container::-webkit-scrollbar {
        display: none;
    }

.video-controls {
    position: absolute;
    width: 100%;
    max-width: 100%;
    opacity: 1;
    transition: opacity 0.5s ease;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); /* Sfumatura */
    z-index: 1000;
    padding: 10px 20px;
}


.control-button {
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
    width: 34px;  /* Imposta una larghezza fissa */
    height: 34px; /* Imposta un'altezza fissa */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Necessario per l'icon alignment */
    margin: 4px;

}

.control-button i {
    font-size: 17px;
    transition: color 0.3s;
    width: 17px;  /* Imposta una larghezza fissa per l'icona */
    height: 17px; /* Imposta un'altezza fissa per l'icona */
}

.control-button:hover i {
    color: #C83631;
}

.small-text {
    font-size: 8px;
    position: relative;
    margin-left: 2px;
}

#nextButton i {
    transform: scaleX(1.2) scaleY(0.85); /* Aumenta la larghezza del 50% */
    display: inline-block; /* Evita problemi di trasformazione */
}


#playPauseBtn {
    position: relative;
    margin-left: 10px;
}


#prevButton {
    display: none;
}

#nextButton {
  margin-right: 10px;
}

#progressBar {
    flex-grow: 1;
    appearance: none;
    background: rgba(255, 255, 255, 0.3);
    height: 5px;
    min-width: 5vw;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

#progressBar::-webkit-slider-thumb {
    appearance: none;
    background: #C83631;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
}

#currentTime, #remainingTime {
    color: white;
    font-size: 12px;
    min-width: 30px;
    text-align: center;
}


/* Overlay che copre tutto il sito quando il player è aperto */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 1); /* Sfondo scuro */
  z-index: 1000; /* Assicurati che l'overlay sia sopra il contenuto */
  display: none; /* Inizialmente nascosto */
}


.video-player {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 1);
  justify-content: center;
  align-items: center;
  z-index: 2000;
  border-radius: 5px;
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.5s ease-in-out; /* Per la transizione dolce tra video */

}

.video-player.show {
  display: flex;
  opacity: 1; /* Aggiungi visibilità quando viene mostrato */
  animation: slideFadeIn 0.5s ease forwards;
}

.video-player.hide {
  opacity: 0; /* Aggiungi opacità 0 per nascondere il player */
  animation: slideFadeOut 0.5s ease forwards;
}

/* Animazione di apertura */
@keyframes slideFadeIn {
  0% {
    transform: translateX(100%); /* Inizia dalla destra */
    opacity: 0;
  }
  100% {
    transform: translateX(0); /* Arriva nella posizione finale */
    opacity: 1;
  }
}

/* Animazione di chiusura */
@keyframes slideFadeOut {
  0% {
    transform: translateX(0); /* Parte dalla posizione finale */
    opacity: 1;
  }
  100% {
    transform: translateX(100%); /* Scivola fuori verso sinistra */
    opacity: 0;
  }
}

/* Video Wrapper */
.video-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100vw;  /* Mantieni la larghezza al massimo della viewport */
  max-height: 100vh; /* Impedisce che il video superi l'altezza della viewport */
  visibility: hidden; /* Inizialmente invisibile */
  opacity: 0;

}

/* Video */
.video-wrapper video {
  width: 100%;
  height: 100%;
  max-height: 100vh; /* Limita l'altezza massima alla viewport */
  object-fit: contain; /* Mantieni il rapporto senza tagli */
  border-radius: 5px;

}

.video-wrapper.loaded {
  visibility: visible; /* Quando caricato, mostra il video */
  opacity: 1;

}

  .video-player .close-button, .next-button {
    position: absolute;
    top: 5px;
    left: 5px;
    color: white;
    width: 40px; /* Imposta una larghezza fissa */
    height: 40px; /* Imposta un'altezza fissa uguale alla larghezza */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    font-size: 18px;
    border-radius: 5px;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0);
    transition: opacity 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    padding: 6px 0;

}

.close-button:hover, .next-button:hover {
    opacity: 100%;
    color: #C83631;

}

/* Testo aggiunto all'hover */
.close-button:hover::after {
    content: "Home";
    font-size: 14px;
    color: white;
    position: absolute;
    left: 100%; /* Posiziona il testo a destra del pulsante */
    margin-left: -6px; /* Distanza dal pulsante */
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    padding: 5px 8px;


}


/* Titolo del video */
.video-player #videoTitle {
    position: absolute;
    top: 0;
    font-size: 15px;
    font-weight: bold;
    color: white;
    z-index: 3000;
    opacity: 1; /* Inizia invisibile */
    transition: opacity 0.3s ease;
    padding: 23px 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); /* Sfumatura */
    border-radius: 5px;
    white-space: nowrap; /* Impedisce al testo di andare a capo */
    width: 100%;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

}

/* Classe per far apparire il titolo con animazione */
.show-title {
    animation: fadeInOut 5s forwards; /* Animazione per comparire e scomparire */
}

.hide-cursor {
    cursor: none; /* Nasconde il cursore */
}

/* Tempo corrente e tempo rimanente sopra la progress bar */
#currentTime, #remainingTime {
  margin: 3px;
}

/* Disabilita hover su iPhone */
.no-hover:hover .video-preview {
    opacity: 0 !important;
}
.no-hover:hover .thumbnail-image {
    opacity: 1 !important;
}



@media (max-width: 650px) {

  .video-container {
    padding-bottom: 30px;
    padding-left: 25px;
  }

  .center-play-icon {
      font-size: 40px;
  }


  .control-button:hover i {
      color: white;
  }

  .video-wrapper video, .video-player {
      height: 100vh;
      max-height: 100vh;
      height: 100dvh; /* I browser moderni useranno questa */
      max-height: 100dvh;
  }


    .video-controls {
      padding: 5px;

    }

    .control-button {
        width: 30px;  /* Ridurre la dimensione dei pulsanti */
        height: 30px;
        color: #CCCCCC;
    }

    .control-button i {
        font-size: 14px; /* Ridurre la dimensione delle icone */
        width: 14px;
        height: 14px;
        color: #CCCCCC;
    }

    #prevButton {
        margin-left: 10px;
    }

    #restartBtn {
        display: none;
    }

    /* Progress bar sopra il video */
    #progressBar {
        position: absolute;
        bottom: 55px; /* Mantieni la distanza dal video */
        left: 0px; /* Allinea la barra al bordo sinistro del player */
        right: 0; /* Allinea la barra al bordo destro del player */
        margin: 0 auto; /* Assicura la centratura */
        width: 90%; /* Imposta la larghezza desiderata */
        height: 3px; /* Mantieni la dimensione sottile */
    }



    #progressBar::-webkit-slider-thumb {
        width: 10px; /* Riduci la dimensione del cursore della barra */
        height: 10px;
    }

    /* Tempo corrente e tempo rimanente sopra la progress bar */
    #currentTime, #remainingTime {
      display: none; /* Nasconde il currentTime */
    }

    /* Video Title */
    .video-player #videoTitle {
        font-size: 12px; /* Riduci il titolo per schermi piccoli */
        text-align: center;
        font-weight: normal;
        color: white;
        margin: auto;
        max-width: 65%; /* Limita solo il testo alla larghezza dell'80% */
        white-space: nowrap; /* Impedisce il ritorno a capo */
        overflow: hidden; /* Nasconde il testo che va oltre la larghezza */
        text-overflow: ellipsis; /* Aggiunge i puntini di troncamento (...) */
        display: inline-block; /* Permette di limitare la larghezza del testo senza influire sul contenitore */
    }



    /* Close Button */
    .video-player .close-button, .next-button {
      margin: auto;
    }


}

@media screen and (max-height: 450px) {

  .banner-text p {
      display: none;
  }

    #header {
        position: fixed;
        background-color: #111 !important;
    }

    .video-controls {
      padding-bottom: 35px;
    }

    .video-player .close-button, .next-button {
      padding-top: 20px;
    }
    .video-player #videoTitle {
      padding: 37px 100%;
    }

    #progressBar {
      bottom: 80px;
    }

    .control-button i {
        font-size: 12px; /* Ridurre la dimensione delle icone */
        width: 12px;
        height: 12px;
    }

    .video-thumbnail {
        width: 180px;
        height: 144px;
    }

    /* Banner */
    .banner {
        height: 60vh; /* Altezza banner ridotto */
    }

}
    /* fine media query */


.volume-container {
    position: relative;
    display: inline-block;
}

/* Wrapper per sfondo arrotondato */
.volume-slider-wrapper {
    position: absolute;
    bottom: 75px;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg);
    display: block; /* Mantieni il blocco per l'animazione */
    width: 95px;
    padding-left: 7px;
    padding-top: 3px;
    padding-bottom: 8px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50px;
    opacity: 0; /* Inizialmente invisibile */
    visibility: hidden; /* Impedisce interazioni quando nascosto */
    transition: opacity 0.5s ease-in-out, visibility 0.1s ease-in-out;
}

/* 🌟 Mostra con sfumatura */
.volume-container:hover .volume-slider-wrapper {
    opacity: 1;
    visibility: visible;
}

/* Stile della barra volume */
.volume-slider {
    -webkit-appearance: none;
    width: 80px; /* Altezza della barra */
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

/* Stile del thumb (pallino) */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #C83631;
    border: 2px solid #C83631;
    border-radius: 50%;
    cursor: pointer;
}

.volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #ccc;
    border: 2px solid #C83631;
    border-radius: 50%;
    cursor: pointer;
}


/* Nascondi completamente la barra su mobile e disabilita hover */
@media (max-width: 650px) {
  .volume-slider-wrapper {
      display: none !important; /* Nasconde il wrapper */
      pointer-events: none; /* Disabilita qualsiasi interazione */
  }
}


/* FINE VIDEO PLAYER */


/* Media Query per dispositivi mobili */
@media (max-width: 650px) {
    /* Ridimensioniamo tutto proporzionalmente */
    html, body {
        font-size: 12px; /* Dimensione del testo più piccola per mobile */
    }

    .video-thumbnail {
        width: 45vw;
        min-height: 144px;
    }

    .video-thumbnail:hover {
        transform: scale(1.2) !important;

    }


    .highlighted .video-thumbnail {
        width: 144px;
        height: 180px;
    }

    .highlighted .video-thumbnail:hover {
        transform: scale(1.1) !important;
    }

    .highlighted .video-thumbnail .description {
        position: absolute;
        display: block;
        margin-bottom: 0px;
        border-radius: 0;
    }

    /* SOLO modifica delle dimensioni per highlighted2 */
    .highlighted2 .video-thumbnail {
        width: 70vw;
        height: 100%;
    }

    .highlighted2 .video-thumbnail:hover {
        transform: scale(1.1) !important;
    }

    .video-player #videoTitle {
        font-size: 14px;
    }

    .carousel-button i {
        font-size: 24px;
    }


    /* Logo */
    #logo {
        left: 20px;
    }

    /* Banner */
    .banner {
        height: 50vh; /* Altezza banner ridotto */
    }

    .category h2 {
        font-weight: bold;
        font-size: 14px;
        color: white;
        margin-left: 30px;
        display: inline-block;
        line-height: 1; /* Evita spazi verticali extra */
        vertical-align: middle; /* Previene disallineamenti */
    }

    .category h2::after {
    content: ""; /* Svuota il contenuto del tooltip */
    display: none !important;
    pointer-events: none !important;
}

    .video-thumbnail:hover {
    transform: scale(1.2) translateX(12px)  translateY(10px);
    margin: 0;
    padding: 0;

}

.video-thumbnail .description {
    display: block; /* Mostra la descrizione senza passaggio del mouse */
    border-radius: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 30%,
        rgba(0, 0, 0, 0.5) 70%,
        rgba(0, 0, 0, 0.1) 100%);
        white-space: nowrap;
        padding: 15px;
      }

      .video-thumbnail .description .primary {
          display: none;
      }

      .video-thumbnail:hover .description .primary {
          display: block;
      }

      .video-thumbnail:hover .description {

                border-radius: 0;
                background: linear-gradient(to top,
                    rgba(158, 42, 38, 1) 0%,
                    rgba(100, 20, 18, 0.9) 30%,
                    rgba(50, 10, 9, 0.5) 70%,
                    rgba(0, 0, 0, 0.3) 100%);
                padding: 10px;
            }

}
/* Fine @media query */


.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Occupa tutta l'altezza del video */
    background: rgba(0, 0, 0, 1);
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 12px;
    display: none; /* Nascondilo di default */
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Spinner con sfumatura */
.loading-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: transparent;
  border-right-color: rgba(200, 54, 49, 0.2);;
  border-left-color: #C83631; /* Parte iniziale visibile */
  border-bottom-color: rgba(200, 54, 49, 0.6); /* Parte finale sfumata */
  animation: spin 1s linear infinite;
}

/* Animazione di rotazione */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Spinner specifico per #preload (grande) */
#preload .loading-spinner {
  width: 50px;  /* Modifica la dimensione per #preload */
  height: 50px; /* Modifica la dimensione per #preload */

}

/* Spinner specifico per .loading-overlay (piccolo) */
.loading-overlay .loading-spinner {
  width: 50px;  /* Mantieni la dimensione per .loading-overlay */
  height: 50px; /* Mantieni la dimensione per .loading-overlay */

}

/* Contenitore Preload */
#preload {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    flex-direction: column; /* Disposizione in colonna */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra orizzontalmente */
    z-index: 9000;
    opacity: 1; /* Manteniamo visibile il preload */
    transition: opacity 1s ease-out; /* Solo animazione sulla sfumatura */
}

#percentage {
    position: absolute;
    display: flex;
    color: #C83631; /* Colore del testo */
    font-size: 14px; /* Puoi regolare la dimensione del testo */
    margin: 10px; /* Aggiungi margine per distanziare dal bordo */
    z-index: 10000;
}


@keyframes logoZoom {
  0% {
    transform: scale(1.1); /* Inizia leggermente ingrandito */
  }
  100% {
    transform: scale(0.9); /* Torna alla dimensione normale */
  }
}

#logo-intro {
  position: fixed;
  display: flex;
  opacity: 1; /* Logo visibile fin da subito */
  transform: scale(1,1); /* Logo a dimensione normale */
  z-index: 10001;

}


#logo-intro img {
  width: 200px; /* Modifica la larghezza per ingrandire il logo */
  height: auto;
  margin-bottom: 150px;
  margin-top: 20px;
}



/* Nascondi il contenuto del sito inizialmente */
#site-content {
    display: none;
}

/* Forza la visualizzazione dei controlli in fullscreen */
:fullscreen .video-controls,
:-webkit-full-screen .video-controls,
:-moz-full-screen .video-controls {
  display: flex !important;
}

button, .close-button, .video-thumbnail {
    -webkit-tap-highlight-color: transparent; /* Rimuove l'evidenziazione al tocco */
    outline: none; /* Rimuove il contorno di selezione */
    background-color: transparent; /* Mantiene lo sfondo trasparente */
    touch-action: manipulation; /* Controlla il comportamento touch */
    user-select: none; /* Impedisce la selezione di testo */
}

/* VIDEO INIZIATO (ma non completato) */
.video-thumbnail.started {
    filter: brightness(0.7); /* Meno luminoso */
    border: 2px solid #666; /* Bordo rosso chiaro */
    position: relative;
}

/* TESTO "Continue Watching" */
.video-thumbnail.started::after {
    content: "▶ Continua...";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Fa sì che l'area del pudding sia larga quanto il thumbnail */
    background: linear-gradient(to bottom,
        rgba(80, 80, 80, 1) 0%,
        rgba(70, 70, 70, 0.9) 30%,
        rgba(60, 60, 60, 0.5) 70%,
        rgba(50, 50, 50, 0.3) 100%);
    padding-left: 10px; /* Distanza a sinistra del testo */
    padding: 10px;
    font-size: 11px; /* Font principale */
    line-height: 1.3; /* Mantiene le righe leggibili */
    text-align: left; /* Allinea il testo a sinistra */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    opacity: 1;
    animation: changeText 4s infinite;
    white-space: nowrap;
}

/* Animazione che alterna il testo */
@keyframes changeText {
    0% {
        content: "▶ Continua a guardare";
    }
    50% {
        content: "▶ Keep Watching";
    }
    100% {
        content: "▶ Continua a guardare";
    }
}

.weekly-update {
    position: relative;
    margin: 40px 10px; /* Margine più ampio per distanziarlo dal footer */
    padding: 30px; /* Spazio attorno al testo */
    font-size: 0.7rem; /* Dimensione del testo scalabile */
    border: none;
    pointer-events: none;
}

/* Colore specifico per l'icona */
.weekly-icon {
    color: #C83631; /* Giallo oro */
    font-weight: bold;
}

/* Colore specifico per il testo */
.weekly-text {
    color: #999; /* Rosso */
    font-weight: 400;
}


/* VIDEO COMPLETATO */
.video-thumbnail.completed {
    filter: brightness(0.7); /* Ancora meno luminoso */
    border: 2px solid #7F1F1A; /* Bordo rosso scuro */
    position: relative;
}

/* TESTO "Just Watched" */
.video-thumbnail.completed::after {
    content: "🔄 Restart";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Fa sì che l'area del pudding sia larga quanto il thumbnail */
    background: linear-gradient(to bottom,
        rgba(158, 42, 38, 1) 0%,
        rgba(100, 20, 18, 0.9) 30%,
        rgba(50, 10, 9, 0.5) 70%,
        rgba(0, 0, 0, 0.3) 100%);
    padding-left: 10px; /* Distanza a sinistra del testo */
    padding: 10px;
    font-size: 11px; /* Font principale */
    line-height: 1.3; /* Mantiene le righe leggibili */
    text-align: left; /* Allinea il testo a sinistra */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    opacity: 1;
    animation: changeText2 4s infinite;
    white-space: nowrap;
}

/* Animazione che alterna il testo */
@keyframes changeText2 {
    0% {
        content: "🔄 Restart";
    }
    50% {
        content: "🔄 Riavvia";
    }
    100% {
        content: "🔄 Restart";
    }
}

/* ICONA CENTRATA */
.video-thumbnail.completed::before {
    content: "⟳"; /* Icona "Restart" */
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 200px;
    top: 50%; /* Posiziona l'icona al centro verticalmente */
    left: 50%; /* Posiziona l'icona al centro orizzontalmente */
    transform: translate(-50%, -50%); /* Centra esattamente l'icona */
    font-size: 70px; /* Dimensione dell'icona */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    opacity: 1;

}


@media (max-width: 650px) {
  .video-thumbnail.started::after {

      z-index: 10000;
  }

  .video-thumbnail.completed::after {

      z-index: 10000;
  }

  }

  /* Pulsante "torna su" fisso */
  .scroll-to-top {
      position: relative;
      margin: 20px;
      color: #999;
      padding: 20px;   /* Padding per la grandezza del pulsante */
      font-size: 12px;  /* Dimensione della freccia */
      cursor: pointer; /* Cambia il cursore quando si passa sopra */
      border: none;
  }

  /* Effetto al passaggio del mouse */
  .scroll-to-top:hover {
      color: #C83631;
  }

  /* Icona della freccia */
  .scroll-to-top i {
      font-size: 16px;
      margin-right: 5px;
  }

  .mobile-social-links {
    display: none; /* Nascondiamo di default */
    padding: 30px;
    text-align: center;
    gap: 10px;
}

.mobile-social-links a {
    color: #666;
    font-size: 20px;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.mobile-social-links a:hover {
    color: #C83631;
}

/* Mostra solo su schermi piccoli (mobile) */
@media screen and (max-width: 650px) {
    .mobile-social-links {
        display: flex;
        justify-content: flex-start;
    }
}
/* Footer */
.site-footer {
  background: linear-gradient(to top, #000, #111);
  color: #666;
  padding: 40px;
  width: 100%;

}

.footer-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 650px;
  margin: 0;
}

.footer-section {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;

}

.footer-section a {
  color: #999;
  text-decoration: none;
  font-size: 12px;
  width: 60%;
}

.footer-section a:hover {
  color: #C83631;
}

.footer-section i {
  margin-right: 8px;
  font-size: 16px;
}

.footer-bottom {
  text-align: left;
  margin-top: 50px;
  font-size: 10px;
}

@media screen and (max-width: 650px) {

  .footer-section a {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .footer-container {
      grid-template-columns: repeat(2, 1fr); /* Cambia da 3 a 2 colonne */
      gap: 10px; /* Spaziatura tra le colonne */

  }

  /* Nasconde la terza colonna (Facebook) */
  .footer-section:nth-child(3) {
      display: none;
  }

}

/* Impostazioni generali del menu (desktop) */
#nav-menu {
margin-left: 150px;
position: relative;
}

#nav-menu ul {
list-style: none;
display: flex;
gap: 20px;
margin: 0;
padding: 10px;
}

#nav-menu li {
display: inline;
}

#nav-menu a {
text-decoration: none;
color: white;
font-size: 12px;
font-weight: 600;
transition: color 0.3s;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#nav-menu a:hover {
color: #C83631;
}

/* Stili per l'icona hamburger (desktop: nascosta) */
.hamburger {
display: none;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #ddd;
/* Posizione di default per desktop non interessa */
position: absolute;
top: 10px;
z-index: 10;
}

/* CSS del pop-up */
.nav-popup {
  position: absolute;
  background-color: rgba(200, 54, 49, 0.8);
  color: white;
  font-size: 10px;
  padding: 5px 8px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0; /* Inizia invisibile */
  transform: translateY(5px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  left: 52%;
  top: 75%; /* Posizione iniziale sotto il link */
  transform: translateX(-50%) translateY(5px); /* Centra il popup */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Effetto al passaggio del mouse */
.nav-item:hover .nav-popup {
  opacity: 1; /* Diventa visibile */
  transform: translateX(-50%) translateY(10px); /* Spostamento verso il basso */
  animation: popupAnimation 3s forwards; /* Animazione per scomparire dopo 3 secondi */
}

/* Mobile: modifiche per l'hamburger e il menu */
@media (max-width: 650px) {

#logo-intro img {
    width: 240px;
}

.nav-popup {
    left: 50%;
    top: 100%; /* Posizione iniziale sotto il link */
}

#nav-menu {
  margin-left: 0;
  width: 100%;
  position: relative;
}

/* Hamburger: centrato all'interno dell'header */
.hamburger {
  display: block;
  position: absolute;
  transform: translate(45%, -95%);
  z-index: 1001;
  right: 60px;
  font-size: 22px;
  margin-top: 2px;

}

/* Menu: nascosto di default, si posiziona subito sotto l'header e centrato rispetto all'hamburger */
#nav-menu ul {
  display: none;
  flex-direction: column;
  gap: 20px;
  position: absolute;
  top: 20px; /* Appena sotto l'header */
  right: 45px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  padding: 10px 0;
  width: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Quando il menu è aperto, mostriamo l'ul */
#nav-menu.open ul {
  display: flex;
}

/* I singoli elementi del menu */
#nav-menu li {
  display: block;
  text-align: right;
  padding: 0 10px;
}
}

.new-label {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: red;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  z-index: 20000;
}