* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

:root {
    --viola: #6C63FF;
    --grigio: #D9D9D9;
    --fs-title: 80px;
    --fs-subtitle: 50px;
    --fs-paragraph: 20px;
    --fs-link: 15px;
    --fs-small: 10px;
}

header {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--viola);
}

header .header-testo {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
/*     background: red; */
}

header .header-testo h1 {
    font-size: var(--fs-subtitle);
    color: var(--grigio);
}

header .header-testo p {
    font-size: var(--fs-paragraph);
    color: var(--grigio);
    text-align: center;
    width: 70%;
}

header .header-testo a.download{
  
    padding: 5px 10px;

    margin-top: 20px;

    height: 10%;
    width: 33%;
}

header .header-testo a.download img{
    width: 100%;
    height: 100%;
}

header .header-immagine {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative; /* Aggiunto per gestire le immagini sovrapposte */
/*     background: yellow; */
}

.header-immagine img {
    position: absolute; /* Posiziona le immagini una sopra l'altra */
    top: 50%; /* Centra verticalmente l'immagine */
    left: 50%; /* Centra orizzontalmente l'immagine */
    transform: translate(-50%, -50%); /* Correzione per centrare l'immagine */
    width: auto;
    height: auto; /* Rende le immagini proporzionate */
    max-height: 80%; /* Limita l'altezza massima per evitare overflow */
    max-width: 80%; /* Limita la larghezza massima */
    opacity: 0; /* Rende invisibili tutte le immagini */
    transition: opacity .5s ease-in-out; /* Transizione graduale tra le immagini */
}

.header-immagine img.active {
    opacity: 1; /* Solo l'immagine con classe "active" sarà visibile */
}

.header-immagine video {
    position: absolute; /* Posiziona i video sovrapposti alle immagini */
    top: 50%; /* Centro verticale */
    left: 50%; /* Centro orizzontale */
    transform: translate(-50%, -50%); /* Traslazione per centrare */
    width: auto;
    height: auto; /* Mantieni le proporzioni */
    max-height: 80%; /* Limita l'altezza massima per evitare overflow */
    max-width: 80%; /* Limita la larghezza massima */
    opacity: 0; /* Rendi invisibili i video inizialmente */
    transition: opacity 1s ease-in-out; /* Transizione graduale */
}

.header-immagine video.active {
    opacity: 1; /* Solo il video attivo sarà visibile */
}