/* CSS file (style.css) */

:root {
    --font-family-main: 'Neue Machina', sans-serif;
    --background-color: #000;
    --text-color: #fff;
    --section-bg-color: #111;
    --feature-bg-color: #000000;
    --modal-bg-color: rgba(0, 0, 0, 0.8);
    --modal-content-bg: #fff;
    --modal-text-color: #000;
}
@supports (-webkit-appearance: none) {
    body {
        font-family: 'Neue Machina', Arial, sans-serif;
    }
}

/* Reset globale e impostazioni di base */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: var(--font-family-main);
    background: var(--background-color);
    color: var(--text-color);
    overflow-x: hidden;
}
   /* Stili di base per il menu */
   body {
    font-family: 'Neue Machina', sans-serif;
    margin: 0;
    padding: 0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #000; /* Cambiato in nero al 100% */
    color: #fff;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box; /* Aggiungi questa riga */
}

#nav-icon {
    display: none;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1100; /* Più alto rispetto al menu */
}

#nav-icon div {
    width: 30px;
    height: 3px;
    background-color: #fff;
    margin: 5px 0;
    transition: 0.3s;
}

nav {
    margin-left: auto;
    overflow: hidden; /* Aggiungi questa riga per assicurarti che non esca dallo schermo */
}

nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* Aggiungi questa riga */
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
}

/* Stili per la versione mobile */
@media (max-width: 768px) {
    #nav-icon {
        display: block;
    }

    nav ul {
        display: none;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.8); /* Cambiato per essere semi trasparente */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;  /* Assicurati che occupi tutta la larghezza dello schermo */
        height: 100vh; /* Assicurati che occupi tutta l'altezza dello schermo */
        justify-content: center;
        align-items: center;
        text-align: center;
        z-index: 100;
        overflow: hidden; /* Assicurati che non esca dallo schermo */
    }
    
    nav ul.show {
        display: flex; /* Quando si apre, visualizza il menu */
        background-color: rgba(0, 0, 0, 0.8); /* Sfondo nero con un po' di trasparenza */
    }

    nav ul li {
        margin: 15px 0;
    }
}
/* Stile per il logo a sinistra */
#logo h1 {
    font-size: 24px;
    color: var(--text-color);
    margin: 0;
    text-transform: uppercase;
}



/* Sezione #home con video di sfondo */
#home {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 1;
    filter: brightness(100%);
}

/* Sezioni principali e contenitori delle funzionalità */
.page, .feature-container, .feature-item {
    background: var(--section-bg-color);
    text-align: center;
    font-size: 20px;
    margin: 20px 0;
    padding: 20px;
    border-radius: 10px;
}

.feature-container, .feature-item {
    background: var(--feature-bg-color);
}

.alternating-bg:nth-child(even) {
    background: #000;
    color: #fff;
    width: 100%;
    margin: 0;
}

.alternating-bg:nth-child(odd) {
    background: #fff;
    color: #000;
    width: 100%;
    margin: 0;
}

.divider {
    height: 10px;
    background: linear-gradient(to right, #000, #fff);
}

.work-image, .work-text p {
    margin: 0 5%;
}

.centered-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    text-align: center;
    padding: 2em;
    box-sizing: border-box;
}

.contact-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
    background: #fff;
}

.contact-form {
    padding: 40px;
    width: 100%;
    max-width: 600px;
}

.contact-form h2 {
    font-family: 'Neue Machina', sans-serif;
    text-transform: uppercase;
    font-size: 32px;
    margin-bottom: 20px;
    text-align: center;
    color: #000;
}

.contact-form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    font-size: 16px;
    color: #000;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: none;
    border-bottom: 2px solid #000;
    background: transparent;
    color: #000;
}

.contact-form button {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 18px;
    text-transform: uppercase;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-form button:hover {
    background: #444;
}
@media (max-width: 768px) {
    .contact-form-container {
        padding: 50px 20px; /* Regola il padding per ridurre lo spazio */
    }
    .contact-form-wrapper {
        margin: 0 auto; /* Assicura che sia centrato */
    }
    .contact-form {
        max-width: 100%; /* Rimuovi limitazioni sulla larghezza */
        padding: 20px; /* Riduci il padding per adattare al meglio il layout */
    }
}

/* CSS aggiornato per la sezione "Who We Are" */

/* Contenitore principale con disposizione verticale */
#who-we-are-container {
    display: flex;
    flex-direction: column; /* Dispone gli elementi in colonna */
    align-items: center;
    justify-content: center;
    max-width: 1000px; /* Limita la larghezza per centrare il contenuto */
    margin: 0 auto;
    padding: 0 20px;
}

/* Stili per il testo */
.who-we-are-text {
    text-align: center; /* Centra il testo */
    max-width: 700px; /* Limita la larghezza del testo */
    padding: 20px;
}

/* Stili per le immagini */
.who-we-are-images {
    display: flex;
    gap: 20px;
    justify-content: center; /* Centra le immagini sotto il testo */
    align-items: center;
    flex-wrap: wrap; /* Assicura che le immagini siano su una sola riga su desktop */
    max-width: 700px; /* Limita la larghezza delle immagini */
    padding: 20px 0;
}

.who-we-are-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1/1; /* Mantiene l'immagine quadrata */
    border-radius: 0; /* Nessun arrotondamento degli angoli */
}

/* Versione mobile: le immagini rimangono affiancate sotto il testo */
@media (max-width: 768px) {
    .who-we-are-images {
        flex-direction: row; /* Mantiene le immagini affiancate anche su mobile */
        max-width: 90%; /* Assicura che le immagini siano visibili e centrali */
    }

    .who-we-are-image {
        max-width: 45%;
    }
}


/* CSS aggiornato per la sezione "Work" per garantire la responsività su desktop e mobile */

/* Stili per la versione mobile - File CSS separato per mobile */
@media (max-width: 768px) {
    .work-item {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 40px 0 !important; /* Maggiore spazio sopra e sotto per mobile */
    }

    .work-image {
        width: 100% !important;
        margin: 30px auto !important;
        padding: 0 10px !important; /* Aggiungi padding per dare un po' di spazio dai bordi */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .work-image img, .work-image video {
        width: 100% !important;  /* Assicurati che l'immagine o il video riempiano tutto il contenitore */
        height: auto !important;
        border-radius: 10px !important;
        object-fit: cover !important;
    }

    .work-text {
        width: 90% !important; /* Assicurati che il testo sia visibile */
        margin: 30px auto !important;
        padding: 20px !important;
        font-size: 18px !important; /* Adatta la dimensione del font per i dispositivi mobili */
        line-height: 1.8 !important; /* Maggiore spazio tra le linee per migliore leggibilità su mobile */
        text-align: left !important; /* Allineamento a sinistra per migliorare la leggibilità su mobile */
    }

    .work-text p {
        padding: 20px 0 !important; /* Maggiore spazio sopra e sotto il testo */
        font-weight: 300 !important; /* Testo più leggero per mobile */
    }

    /* Pulsante "Discover More" ottimizzato per mobile */
    #work-container a {
        font-size: 16px !important;
        padding: 10px 20px !important;
        margin: 20px auto !important;
        display: block !important;
        width: fit-content !important;
        text-align: center !important;
    }
}


    /* Assicurati che il background della sezione centered-section occupi l'intero schermo */
    .centered-section {
        padding: 20px !important;
        width: 100% !important;
        height: 100vh !important;
        margin: 0 !important;
        box-sizing: border-box;
        background-size: cover !important;
        background-position: center !important;
    }

    .centered-section .work-text {
        position: relative !important;
        top: auto;
        left: auto;
        transform: none;
        width: 90%;
        margin: 0 auto;
    }

    .centered-section .work-text p {
        padding: 0 !important;
        font-size: 32px !important;
        font-weight: 300 !important;
    }

    /* Media query per schermi più piccoli (cellulari e tablet) */
    @media (max-width: 768px) {
        .centered-section .work-text p {
            font-size: 18px !important; /* Ridurre la dimensione del font */
            padding: 0 20px !important; /* Ridurre il padding per evitare che il testo venga tagliato */
        }

        .centered-section {
            padding: 40px 0 !important; /* Ridurre il padding per schermi più piccoli */
        }
    }


/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: var(--modal-content-bg);
    padding: 20px;
    border-radius: 10px;
    max-width: 90%;
    text-align: center;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}

.modal-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
}

.modal-description {
    color: var(--modal-text-color);
}

.feature-item h3, .feature-item p, .work-text p {
    margin: 20px 0;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
}

footer p {
    margin: 0;
    color: var(--text-color);
}