/* Reset di base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color1:#000000;
    --color2:#FFFFFF;
}

a {
    text-decoration: none; /* Rimuove la sottolineatura */
    color: inherit; /* Usa il colore del testo del contenitore */
}

body {
    font-family: Arial, sans-serif; /* Fallback */
    background-color: var(--color2);
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden; /* Per evitare lo scroll orizzontale */
    
}

.header {
    position: absolute;
    top: 0vh; /* 0px su 1080px */
    left: 0vw;
    width: 100%;
    height: 10.74vh; /* 116px su 1080px */
    background-color: var(--color1);
}

.banner-text {
    position: absolute;
    top: 3.24vh; /* 35px su 1080px */
    left: 3.17vw; /* 108px su 1920px */
    font-family: 'Inter', sans-serif;
    font-weight: 900; /* Extra bold */
    font-size: 2.08vw; /* 40px su 1920px */
    color: var(--color2);
}

.main-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 900px;
    text-align: center;
}

.main-logo {
    width: 15vw;
    max-width: 70px;
    margin-bottom: 2vw;
}

.main-text {
    font-size: 1.3vw;
    line-height: 1.5;
}

.arrow-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.arrow-line {
    margin-left: 0.52vw;
    width: 78vw; /* Lunghezza del corpo della freccia */
    height: 0.2vh; /* Spessore del corpo della freccia */
    background-color: var(--color1);
}

.arrow-past-line {
    margin-left: 0.52vw;
    width: 78vw; /* Lunghezza del corpo della freccia */
    height: 0.2vh; /* Spessore del corpo della freccia */
    background-color: var(--color1);
}


.past-arrow {
    margin-left: -0.5vw;
    margin-right: 0.52vw;
    width: 80.4vw; /* Lunghezza del corpo della freccia */
}


.arrow {
    border: solid;
    border-width: 0 0.18vw 0.18vw 0;
    padding: 0.2vw;
    display: inline-block;
    margin-left:-0.45vw;
    color: var(--color1);
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    margin-left: 0.5vw;
}



.no-cursor {
    user-select: none; /* Impedisce la selezione */
    pointer-events: none; /* Blocca gli eventi del mouse */
}

.privacy{
    position: relative;
    font-size: 1.5vh;
    text-align: center;
    justify-content: center;
    margin-right: 23%;
}

.img-video-container {
    position: absolute;
    top: 10.55vh;
    left: 0vw;
    width: 100%;  /* Larghezza fissa */
    height: 67.96vh; /* Altezza fissa */
    overflow: hidden; /* Nasconde l'eventuale parte ritagliata */
    display: flex;
    justify-content: center;
    align-items: top;
    background-color: var(--color2); /* Sfondo di sicurezza */
}

.img-video-content {
    width: 100vw;
    height: 67.96vh;
    position:relative;
    object-fit: cover; /* Riempie l'area mantenendo il rapporto e croppando */
}

.rectangle-container {
    position: absolute;
    top: 78.51vh; /* Conversione in viewport height */
    left: 0;
    width: 100%;
    padding-bottom: 0vh; /* Spazio extra colorato */
    border-bottom: 1px solid var(--color1); /* Bordo inferiore */  
    background-color: var(--color2); /* Colore dello sfondo */
    height: auto; /* Si adatterà all'altezza dei rettangoli */
    transition: transform 0.5s ease-in-out; /* Animazione fluida */
}

.rectangle {
    width: 100%;
    height: 5vh; /* 100px / 2095px */
    border: none; /* Rimuove tutti i bordi */
    border-top: 1px solid var(--color1); /* Bordo superiore */
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 5.26vw;
    background-color: var(--color2);
}
/* HOME PAGE ELEMENTS */
.home .title {
    position: absolute;
    font-family: 'Neue Haas Grotesk Text Pro', sans-serif;
    top: 22.31vh; /* 241px su 1080px */
    left: 11.56vw; /* 184px su 1920px */
    font-weight: bold;
    font-size: 5.2vw; /* 100px su 1920px */
    color: var(--color1);
}

.home .svg-logo {
    position: absolute;
    top: 34.44vh; /* 606px su 1920px */
    left: 47%; /* 1405px su 1920 */
    width: 9.9vh; /* 107 su 1080*/ 
    height: 8.54vw;  /* 164 su 1920*/ 
    margin: 0.52vw;
    color: var(--color2); /* Qui puoi impostare il colore che desideri */
}

.home .svg-star {
    position: absolute;
    top: 34.44vh; /* 372px su 1080px */
    left: 57.5vw; /* 1104px su 1920 */
    width: 9.53vw; /* 183 su 1920*/ 
    height: 16.94vh;  /* 183 su 1080*/ 
    margin: 0.52vw;
    fill: var(--color2); /* Cambia il colore dell'SVG */
}

.home .svg-moon {
    position: absolute;
    top: 34.44vh; /* 372px su 1080px */
    left: 81.87vw; /* 1572px su 1920 */
    width: 9.53vw; /* 183 su 1920*/ 
    height: 16.94vh;  /* 183 su 1080*/ 
    margin: 0.52vw;
}

.rect-about{
    justify-content: center; /* Allineamento a sinistra di default */
}

.home .rectangle .clickable {
    pointer-events: auto; /* Abilita il click solo se ha .clickable */
    cursor: pointer;
}

.home .section-title {
    font-size: 1.82vw;
}

.home .section-title-past{
    font-size: 1.82vw;
    margin-right:0.5vw;
}


.home .event-title {
    font-size: 1.6vw;
    text-align: left; /* Centra orizzontalmente il testo */
}

.home .event-date {
    position: absolute;
    left: 89vw;
    font-size: 1.6vw;
}

.privacy  .text-container {
    position: absolute;
    text-align: left; /* Allinea tutto il testo a sinistra */
    padding-left: 8vw; /* Distanza tra il bordo e il testo */
    padding-right: 8vw; /* Mantiene una certa distanza anche sul lato destro */
    line-height: 1; /* Spazio maggiore tra le righe per facilitare la lettura */
    margin-top: 15vh; /* Distanza dal margine superiore */
    padding-bottom: 10vh; /* Distanza dal margine superiore */

}

.past-event{
    background-color: #000000;
}

.past-event .header{
    background-color: var(--color2);
}

.past-event .banner-text{
    color: var(--color1);
}

.about .title{
    position: absolute;
    font-family: 'Neue Haas Grotesk Text Pro', sans-serif;
    position: absolute;
    top: 17.31vh;
    left: 3.17vw;  
    font-weight: 800;
    font-size: 2.60vw;
    color: var(--color2);
}

.about-container {
    position: absolute;
    display: flex;
    flex-direction: column; /* Imposta una disposizione verticale */
    width: 100%;
}

.past-event-container {
    position: absolute;
    margin-top: 20vh;
    display: flex;
    flex-direction: column; /* Imposta una disposizione verticale */
    width: 100%;
}


.about .img-video-container {
    position: relative;
    width: 100%;
    height: 37.77vh; /* Altezza uniforme per immagini e testo */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: left;
    background-color: var(--color2);
}

.about .gallery .img-video-container {
    position: relative;
    width: 100%;
    height: auto; /* Altezza uniforme per immagini e testo */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color1);
}

.about .img-video-content {
    width: 100vw;
    height: 37.77vh;
    position:relative;
    object-fit: cover; /* Riempie l'area mantenendo il rapporto e croppando */
}

.about .text-container{
    position: relative;
    width: 80%;
    height:  auto; /* Altezza uniforme per immagini e testo */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: left;
    background-color: var(--color2);  
    color: var(--color1);    
    font-size: 1.2vw;
    margin: 20vh auto; /* Aggiunge un margine verticale uguale sopra e sotto */
}


.about .event-copy{
    position: relative;
    width: 80%;
    left: 3.17vw;  
    height:  auto; 
    overflow: hidden;
    display: flex;
    align-items: center;
    color: var(--color2);    
    font-size: 1.15vw;
    margin-top: 15vh; 
}


.rectangle-symbol {
    margin-right: 0.52vw; 
    margin-left: 0.52vw; 
    width: 1.04vw;
    height: 1.85vh;
    color: var(--color2);
}

.event .svg-image {
    position: absolute;
    top: 8.33vh; 
    left: 0vw; 
    width: auto;  
    height: auto;   
}

.event .svg-logo {
    position: absolute;
    top: 68.24vh; 
    right: 2.60vw; 
    width: 2.91vw;  
    height: 7.96vh;  
    transition: transform 0.5s ease-in-out; /* Animazione fluida */
}

.event .event-name{
    position: absolute;
    top: 17.31vh;
    left: 3.17vw;  
    font-weight: 800;
    font-size: 2.60vw;
}

.event .event-date{
    position: absolute;
    top: 17.31vh;
    right: 2.7vw; 
    font-weight: 800;
    font-size: 2.60vw;
}

/* Quando il contenitore è "spostato" verso l'alto */
.event .moved-up {
    transform: translateY(-40.18vh); /* Sposta il contenitore in alto di un valore pari all'altezza della sezione */
    transition: transform 0.5s ease-in-out; /* Animazione fluida sull'intero contenitore */
}


.event .section-title {
    font-size: 2.96vh;
    margin-right: 1rem; 
    margin-left: 1rem; 

    color: var(--color1);
}

.event .section-content{
    position:relative;
    left: 50%;
    transform:translateX(-50%);
    max-height: 0;  
    opacity: 0;
    height: 40.71vh;
    width: 100%;
    box-sizing: border-box;
    display: block;
    justify-content: flex-start;
    align-items: top;
    color: var(--color2);
    background-color: var(--color1);
    border: none;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    padding: 0 5.26vw;
    font-size: 1.2vw;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.event .text{
    margin-left: 21%;
    width: 60%;
    padding-top: 1.38vh; 
    padding-bottom: 1.38vh; 

    justify-content: center;
}

.event .expanded {
    display: block; /* Mostra il contenuto quando è espanso */
    max-height: 40.71vh; 
    opacity: 1;
    overflow-y: auto; /* Rendi la sezione scrollabile */
    scroll-behavior: smooth; /* Scroll fluido */
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}


.event .input-group {
    display: flex;
    width: 100%;
    height: fit-content;
    justify-content: center; /* Centra il gruppo di input */
    gap: 6.5vw; /* Distanza tra i vari input */
    margin: 2vh; /* Margine tra i gruppi di input */
}

.event .input-container {
    display: flex;
    flex-direction: column; /* Gli input all'interno sono disposti verticalmente */
}

.event .name-surname {
    display: flex; /* Disporre Name e Surname uno accanto all'altro */
}

.event .name-surname .input-container {
    height: auto;
}

.event .email {
    margin-top: 2vh; /* Distanza tra Name+Surname e Email */
}

.event label {
    font-size: 1.5vh; /* Dimensione del testo relativa alla viewport */
    margin-bottom: 0.5vh; /* Distanza sotto il label */
    font-weight: bold;
    color: var(--color2);
}

.event .input-field{
    width: 20.04vw; /* L'input occupa tutta la larghezza del suo container */
    height: 4.9vh;
    padding: 1.25vh; /* Padding per gli input */
    border: 1px solid var(--color2);
    border-radius: 0.625vh; /* Angoli arrotondati per gli input */
    font-size: 2vh; /* Font-size relativo alla viewport */
    background: var(--color1);
    color: var(--color2);

}

.event .email-field {
    width: 46.75vw; /* L'input occupa tutta la larghezza del suo container */
    height: 4.9vh;
    padding: 1.25vh; /* Padding per gli input */
    border: 1px solid var(--color2);
    border-radius: 0.625vh; /* Angoli arrotondati per gli input */
    font-size: 2vh; /* Font-size relativo alla viewport */
    background: var(--color1);
    color: var(--color2);

}


.event .submit-btn {
    position: relative;
    transform: translateX(20%);
    width: 13.90vw; /* Larghezza relativa al bottone */
    height: 4.9vh; /* Altezza relativa al bottone */
    margin-top: 2vh; /* Distanza dal campo email */
    border: none;
    background: var(--color2);
    color: var(--color1);
    font-size: 1.25vh;
    font-weight: bold;
    border-radius: 1.25vh; /* Angoli arrotondati per il bottone */
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    display: block;
}

.event .submit-btn:hover {
    background: var(--color2);
}

.event .msg-text{
    position: absolute;
    left: 50.5%;
    transform: translateX(-50%);
    font-size: 1.5vh;
    justify-content: center;
}

.event .arrow-line {
    width: 36.61vw; /* Lunghezza del corpo della freccia */
    height: 0.2vh; /* Spessore del corpo della freccia */
    background-color: var(--color1);
}

.event .arrow {
    border: solid;
    border-width: 0 0.18vw 0.18vw 0;
    padding: 0.2vw;
    display: inline-block;
    margin-right:-1vw;
    color: var(--color1);
}


/* VERSIONE MOBILE: Schermi più piccoli di 768px */
@media screen and (max-width: 768px) {

    .header {
        height: 5.53vh;  /* 116px / 1920px */
    }

    .about .header {
        height: 4.8vh;  /* 116px / 1920px */
    }

    .banner-text {
        top: 1.66vh;     /* 32px / 1920px */
        left: 5.64vw;     /* 61px / 1080px */
        font-size: 3.7vw;/* 40px / 1080px */
        font-weight: 900;
    }

    .main-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40vw;
        max-width: 900px;
        text-align: center;
    }
    
    .main-logo {
        width: 15vw;
        max-width: 35px;
        margin-bottom: 5vw;
    }
    
    .main-text {
        font-size: 2.8vw;
        line-height: 1.5;
    }

    .arrow-container {
        display: flex;
        align-items: center;
        margin-left: 0.52vw;
        margin-right: 2vw;
        height: 100%;
    }
    
    .arrow-line {
        width: 55vw; /* Lunghezza del corpo della freccia */
        height: 0.1vh; /* Spessore del corpo della freccia */
        background-color: var(--color1);
    }

    .home .arrow-past-line {
        width: 66vw; /* Lunghezza del corpo della freccia */
        height: 0.1vh; /* Spessore del corpo della freccia */
        background-color: var(--color1);
    }


    .home .arrow-line {
        width: 59vw; /* Lunghezza del corpo della freccia */
        height: 0.1vh; /* Spessore del corpo della freccia */
        background-color: var(--color1);
    }

    .past-arrow {
        margin-left: -1.9vw;
        margin-right: 1.5vw;
        width: 90.4vw; /* Lunghezza del corpo della freccia */
    }
    
    
    .arrow {
        border: solid;
        border-width: 0 0.3vw 0.3vw 0;
        padding: 1vw;
        display: inline-block;
        margin-top: 0.05vh;
        margin-left:-2.5vw;
        color: var(--color1);
    }

    
    .right {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    
    .left {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        margin-left: 0.5vw;
    }
    
    .privacy{
        text-align: center;
    }


    .rectangle-symbol {
        /* Posizionamento simbolo a scelta */
        margin-right: 1.5%; 
        margin-left: 1.5%; 
        width: 3.61vw;
        height: 1.86vh;
    }
      
    .img-video-content {
        width: 100%;
        height: 63.52vh;
        position:relative;
        object-fit: cover; /* Riempie l'area mantenendo il rapporto e croppando */
    }
    
    /* home page mobile styles */

    .home .title {
        top: 14.68vh;    /* 281px / 1920px */
        left: 32.96vw;    /* 356px / 1080px */
        font-size: 9.25vw; /* 100px / 1080px */
    }

    .home .img-video-container {
        position: absolute;
        top: 4.8vh;
        left: 0vw;
        width: 100%;  /* Larghezza fissa */
        height: 63.52vh; /* Altezza fissa */
        overflow: hidden; /* Nasconde l'eventuale parte ritagliata */
        display: flex;
        justify-content: center;
        align-items: top;
        background-color: var(--color2); /* Sfondo di sicurezza */
    }
    

    .img-video-container {
        position: absolute;
        top: 4.8vh;
        left: 0vw;
        width: 100%;  /* Larghezza fissa */
        height: 73.44vh; /* Altezza fissa */

    }

    /* styles.css */
    .home .svg-star {
        position: absolute;
        top: 28.55vh; /* 372px su 1080px */
        left: 23.33vw; /* 1104px su 1920 */
        width: 14.9vw; /* 107 su 1080*/ 
        height: 8.38vh;  /* 164 su 1920*/ 
    }
    
    .home .svg-moon {
        position: absolute;
        top:28.55vh; /* 372px su 1080px */
        left: 63.05vw; /* 1572px su 1920 */
        width: 14.9vw; /* 107 su 1080*/ 
        height: 8.38vh;  /* 164 su 1920*/ 
        margin: 0.52vw;
        color: var(--color2); /* Cambia questo valore per cambiare il colore */

    }

    .home .svg-logo {
        position: absolute;
        top: 28.55vh; /* 606px su 1920px */
        left: 50%; /* 606px su 1080px */
        transform: translateX(-50%);

        width: 14.9vw; /* 107 su 1080*/ 
        height: 8.38vh;  /* 164 su 1920*/ 
    }
  
    .home .rectangle {
        width: 100%;
        height: 5.52vh; /* 106px / 1920px */
        border: none; /* Rimuove tutti i bordi */
        border-top: 1px solid var(--color1); /* Bordo superiore */
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 5%;
        background-color: var(--color2);
    }

    .home .rectangle.clickable {
        pointer-events: auto; /* Abilita il click solo se ha .clickable */
        cursor: pointer;
    }

    .home .rectangle-container {
        position: absolute;
        top: 68.39vh; /* Conversione in viewport height */
        border-bottom: 1px solid var(--color1);
        left: 0;
        width: 100%;
        height: auto; /* Si adatterà all'altezza dei rettangoli */
    }

    .home .section-title {
        margin-left: 1.5%;
        font-size: 4.63vw;
        margin-right: 1.5%; 
    }

    .home .section-title-past{
        font-size: 4.63vw;
        margin-right:0.5vw;
    }


    .home .event-title {
        font-size: 3.7vw;
        margin-right: 1rem; 
    }

    .home .event-date {
        position: absolute;
        left: 81.8vw;
        font-size: 3.7vw;
    }

    .privacy  .text-container {
        position: absolute;
        text-align: left; /* Allinea tutto il testo a sinistra */
        padding-left: 8vw; /* Distanza tra il bordo e il testo */
        padding-right: 8vw; /* Mantiene una certa distanza anche sul lato destro */
        line-height: 1; /* Spazio maggiore tra le righe per facilitare la lettura */
        margin-top: 10vh; /* Distanza dal margine superiore */
        padding-bottom: 10vh; /* Distanza dal margine superiore */

    }

    /*about page elements*/

    .about .title{
        position: absolute;
        font-family: 'Neue Haas Grotesk Text Pro', sans-serif;
        top: 8.92vh;
        left: 5.64vw;  
        font-weight: 900;
        font-size: 4.63vw;
        color: var(--color2);
    }
    
    .about-container {
        position: absolute;
        top: 4.8vh;
        display: flex;
        flex-direction: column; /* Imposta una disposizione verticale */
        width: 100%;
    }
    
    .about .img-video-container {
        position: relative;
        width: 100%;
        height: 28.87vh; /* Altezza uniforme per immagini e testo */
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--color2);
    }

    .about .gallery .img-video-container {
        position: relative;
        width: 100%;
        height: auto; /* Altezza uniforme per immagini e testo */
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--color1);
    }

    .past-event-container {
        position: absolute;
        margin-top: 8vh;
        display: flex;
        flex-direction: column; /* Imposta una disposizione verticale */
        width: 100%;
    }
    
    .about .text-container{
        position: relative;
        width: 80%;
        height:  auto; /* Altezza uniforme per immagini e testo */
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--color2);  
        color: var(--color1);    
        font-size: 3.4vw;
        margin: 10vh auto; /* Aggiunge un margine verticale uguale sopra e sotto */
    }

    .about .event-copy{
        position: relative;
        width: 80%;
        left: 5.64vw;  
        height:  auto; 
        overflow: hidden;
        display: flex;
        align-items: center;
        color: var(--color2);    
        font-size: 3.4vw;
        margin-top: 10vh; 
    }

    /* EVENT page objects */
    .event .header {
        height: 5.53vh;  /* 116px / 2095px */
    }

    .event .banner-text {
        top: 1.66vh;     /* 32px / 1920px */
        left: 5.64vw;     /* 61px / 1080px */
        font-size: 3.7vw;/* 40px / 1080px */
    }

    .event .img-video-container {
        position: absolute;
        top: 4.8vh;
        left: 0vw;
        width: 100%;  /* Larghezza fissa */
        height: 73.59vh; /* Altezza fissa */
        overflow: hidden; /* Nasconde l'eventuale parte ritagliata */
        display: flex;
        justify-content: center;
        align-items: top;
        background-color: var(--color2); /* Sfondo di sicurezza */
    }

    .event .img-video-content {
        width: 100vw;
        height: 73.59vh;
        position:relative;
        object-fit: cover; /* Riempie l'area mantenendo il rapporto e croppando */
    }

    .event .svg-logo {
        position: absolute;
        top: 70.24vh; 
        left: 87.40vw; 
        width: 5.18vw;  
        height: 4.47vh;  
        transition: transform 0.5s ease-in-out; /* Animazione fluida */
    }

    .event .event-name{
        position: absolute;
        top: 8.92vh;
        left: 5.64vw;  
        font-weight: 900;
        font-size: 4.63vw;
    }
    
    .event .event-date{
        position: absolute;
        top: 8.92vh;
        right: 8vw; 
        font-weight: 900;
        font-size: 4.63vw;

    }

    .event .rectangle-container {
        position: absolute;
        top: 78.39vh; /* Conversione in viewport height */
        left: 0;
        width: 100%;
        border-bottom: 1px solid var(--color1); /* Bordo inferiore */  
        background-color: var(--color2); /* Colore dello sfondo */
        height: auto; /* Si adatterà all'altezza dei rettangoli */
        transition: transform 0.5s ease-in-out; /* Animazione fluida */        
    }


    .event .section-content{
        max-height: 0;  
        opacity: 0;
        height: 40.71vh;
        width: 100%;
        box-sizing: border-box;
        display: block;
        justify-content: center;
        align-items: top;
        color: var(--color2);
        background-color: var(--color1);
        border: none;
        overflow: hidden;
        flex-direction: column;
        align-items: center;
        padding: 0 5.26vw;
        font-size: 3.4vw;
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }

    .event .expanded {
        max-height: 40.71vh; 
        opacity: 1;
        overflow-y: auto; /* Rendi la sezione scrollabile */
        scroll-behavior: smooth; /* Scroll fluido */
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }
    

    .event .text{
        position:relative;
        right: 18vw;
        width: 100%;
        padding-top: 1.38vh; /* Aggiungi un margine superiore */
        padding-bottom: 1.38vh; 
        justify-content: center;
    }
        

    /* Quando il contenitore è "spostato" verso l'alto */
    .event .moved-up {
        transform: translateY(-40.71vh); /* Sposta il contenitore in alto di un valore pari all'altezza della sezione */
        transition: transform 0.5s ease-in-out; /* Animazione fluida sull'intero contenitore */
    }

    .event .rectangle {
        width: 100%;
        height: 4.77vh; /* 100px / 2095px */
        border: none; /* Rimuove tutti i bordi */
        border-top: 1px solid var(--color1); /* Bordo superiore */
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 0 5.26vw;
        background-color: var(--color2);
    }

    .event .rectangle .last{
        border-bottom: 1px solid var(--color1); /* Bordo superiore */
    }

    .event .section-title {
        margin-left: 1.5%;
        font-size: 4.63vw;
        margin-right: 1.5%; 
    }

    .event .input-group {
        position:relative;
        display: flex;
        width: 100%;
        left: -5%;
        height: fit-content;
        justify-content: center; /* Centra il gruppo di input */
        gap: 6.5vw; /* Distanza tra i vari input */
        margin: 2vh; /* Margine tra i gruppi di input */
    }

    .event .input-container {
        display: flex;
        flex-direction: column; /* Gli input all'interno sono disposti verticalmente */
    }

    .event .name-surname {
        display: flex; /* Disporre Name e Surname uno accanto all'altro */
        gap: 1vw; /* Spazio tra Name e Surname */
    }

    .event .name-surname .input-container {
        height: auto;
    }

    .event .email {
        margin-top: 2vh; /* Distanza tra Name+Surname e Email */
    }

    .event label {
        font-size: 1.25vh; /* Dimensione del testo relativa alla viewport */
        margin-bottom: 0.5vh; /* Distanza sotto il label */
        font-weight: bold;
        color: var(--color2);
    }

    .event .input-field{
        width: 38vw; /* L'input occupa tutta la larghezza del suo container */
        height: 3vh;
        padding: 1.25vh; /* Padding per gli input */
        border: 1px solid var(--color2);
        border-radius: 0.625vh; /* Angoli arrotondati per gli input */
        font-size: 1.25vh; /* Font-size relativo alla viewport */
        background: var(--color1);
        color: var(--color2);
        margin-right: auto;
    }

    .event .email-field {
        width: 83vw; /* L'input occupa tutta la larghezza del suo container */
        height: 3vh;
        padding: 1.25vh; /* Padding per gli input */
        border: 1px solid var(--color2);
        border-radius: 0.625vh; /* Angoli arrotondati per gli input */
        font-size: 1.25vh; /* Font-size relativo alla viewport */
        background: var(--color1);
        color: var(--color2);
        margin-right: auto;
    }

    .event .submit-btn {
        width: 24.72vw; /* Larghezza relativa al bottone */
        height: 2.48vh; /* Altezza relativa al bottone */
        margin-top: 2vh; /* Distanza dal campo email */
        margin-right: 4%;
        border: none;
        background: var(--color2);
        color: var(--color1);
        font-size: 1.25vh;
        font-weight: bold;
        border-radius: 1.25vh; /* Angoli arrotondati per il bottone */
        cursor: pointer;
        transition: background 0.3s ease-in-out;
        display: block;
    }

    .event .submit-btn:hover {
        background: var(--color2);
    }

    .event .msg-text{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.25vh;
        justify-content: center;
    }

    .event .arrow-line {
        width: 45vw; /* Lunghezza del corpo della freccia */
        height: 0.1vh; /* Spessore del corpo della freccia */
        background-color: var(--color1);
    }
    
    .event .arrow {
        border: solid;
        border-width: 0 0.3vw 0.3vw 0;
        padding: 1vw;
        display: inline-block;
        margin-top: 0.05vh;
        margin-right:-2.9vw;
        color: var(--color1);
    }


    
}