/* Stile generale */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    overflow-x: hidden;
}

        body {
            font-family: 'Raleway', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #ffffff; /* Imposta il fondo bianco */
            color: #333;
            
        }



        /* Stile del modulo di contatto */
    .contact-form {
        max-width: 600px;
        padding: 20px;
        text-align: left;
    }

    .contact-form label {
        display: block;
        margin-bottom: 5px;
    }

    .contact-form input, .contact-form textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    /* Stile del contenuto */
    .about-content {
        max-width: 600px;
        padding: 20px;
        text-align: justify;
    }

        /* Stile dell'immagine di intestazione */
        .header-logo {
            width: 20vw; /* il 20% della larghezza dello schermo */
            max-width: 120px; /* mantiene una dimensione massima su schermi più grandi */
            height: auto;
            margin: 20px;
        }

        /* Menu di navigazione */
        nav {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        nav a {
            text-decoration: none;
            margin: 0 15px;
            font-weight: normal; /* Togliamo il grassetto */
            font-size: 0.9rem; /* Più piccolo */
            color: #333;
            transition: color 0.3s ease;
        }

        nav a:hover {
            color: #007bff; /* Colore al passaggio del mouse */
        }

nav a.active {
    color: #007bff; /* Colore blu per il link attivo */
    
}


/* Stile links */
.about-content a {
    text-decoration: none; /* Rimuove la sottolineatura */
    color: #6b6b6b; /* Imposta il colore del link per uniformità con il testo */
}


.about-content a:hover {
    color: #007bff; /* Colore a scelta per il passaggio del mouse */
}
        /* Stile galleria */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            width: 90%;
            max-width: 1200px;
            box-sizing: border-box; /* Aggiungi questa regola per evitare che padding e border escano dai limiti */
            padding: 20px;
            padding-bottom: 60px; /* Dà spazio al footer fisso in basso */
        }

       .gallery img {
    width: 100%; /* Adatta l'immagine alla larghezza del contenitore */
    height: 100%; /* Imposta un'altezza che riempie il contenitore */
    aspect-ratio: 1; /* Rende l'immagine quadrata */
    object-fit: cover; /* Ritaglia l'immagine per adattarla al riquadro quadrato */
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

        .gallery img:hover {
            transform: scale(1.05);
        }

        /* Stile per il lightbox */
        .lightbox {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

        #lightbox-img {
    max-width: 90%;
    max-height: 80vh;
    margin-bottom: 10px;
}

.lightbox-description {
    color: #e3e3e3;
    font-size: 1rem;
    text-align: center;
    max-width: 80%;
    margin-top: 10px;
}

        /* Stile del pulsante di chiusura */
        .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 8px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.3s ease;
            cursor: pointer;
        }

        .close-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .close-btn svg {
            width: 24px;
            height: 24px;
            stroke: white;
        }

        /* Stile per il footer */
        footer {
            width: 100%;
            text-align: center;
            padding: 10px; /* Ridotto per un aspetto più minimalista */
            background-color: #ffffff; /* Sfondo bianco */
            font-size: 0.7rem; /* Ridotta la dimensione del footer */
            color: #333; /* Colore del testo */
            position: fixed; /* Rende il footer fisso in basso */
            bottom: 0; /* Posiziona il footer in fondo alla pagina */
            left: 0; /* A sinistra */
            box-sizing: border-box; /* Per assicurarsi che il padding non aumenti la larghezza totale */
        }
        
        /* Stile per schermi piccoli */
@media (max-width: 768px) {
   /* Menu di navigazione orizzontale compatto ma con una spaziatura adeguata */
    nav {
        justify-content: center; /* Centra i link */
        margin-top: 10px;
    }

    nav a {
        margin: 0 5px; /* Spaziatura più comoda tra i link */
        font-size: 0.85rem; /* Leggermente più piccolo per migliorare la leggibilità */
    }

    /* Riduce la larghezza del logo */
    .header-logo {
        width: 30vw; /* Più grande del 20vw su schermi piccoli */
        max-width: 80px; /* Mantiene una dimensione massima */
    }

    /* Ottimizza la galleria per dispositivi mobili */
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Rende le immagini leggermente più piccole */
        gap: 8px; /* Riduce lo spazio tra le immagini */
        padding: 10px; /* Riduce il padding */
        padding-bottom: 60px; /* Dà spazio al footer fisso in basso */
    }

/* Transizione per il fade-in */
body {
    opacity: 0; /* Inizialmente invisibile */
    transition: opacity 0.5s ease-in-out; /* Aggiungi una transizione dolce */
}

body.loaded {
    opacity: 1; /* Rendi visibile il corpo della pagina dopo il caricamento */
}

/* inconsistenze in margini */