.image-box {
    display: flex;
    justify-content: space-between; /* Distribuisce uniformemente le immagini */
    flex-wrap: wrap; /* Per farle andare a capo quando necessario */
    gap: 5px; /* Spazio ridotto tra le immagini */
    padding: 60px 200px; /* Maggior spazio sui bordi esterni (sopra/sotto 60px, laterale 80px) */
}

.image-item {
    width: calc(33.33% - 20px); /* Larghezza con spazio sottratto per compensare il margin */
    margin: 5px; /* Spazio tra le immagini */
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.image-item img {
    width: 100%; /* Fa sì che l'immagine si adatti completamente al contenitore */
    height: auto; /* Mantiene le proporzioni dell'immagine */
    border-radius: 10px; /* Arrotonda i bordi delle immagini */
}

.image-item:hover img {
    opacity: 0.5; /* Sfumare leggermente l'immagine prima della dissolvenza */
    transform: scale(1.1); /* Aggiungi un effetto zoom-out durante il fade */
}

.image-item .video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; /* Aggiungi un effetto di zoom-in per il video */
    transform: scale(0.9); /* Inizia con un leggero zoom-out */
    z-index: 1; /* Metti il video sopra l'immagine */
}

.image-item:hover .video-container {
    opacity: 1; /* Mostra il video con effetto fade-in */
    transform: scale(1); /* Zoom-in del video per un effetto dinamico */
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-title {
    position: absolute; /* Posiziona la fascia in modo assoluto */
    bottom: 10px; /* Posiziona il titolo in basso */
    left: 10px;
    right: 0;
    background: rgba(0, 0, 0, 0.7); /* Sfondo semi-trasparente */
    color: white; /* Colore del testo */
    padding: 10px; /* Spaziatura interna */
    text-align: center; /* Allinea il testo al centro */
    transition: background 0.3s, transform 0.3s; /* Transizione per l'effetto hover */
    font-family: 'Arial', sans-serif; /* Scegli un font moderno */
    font-size: 1.5em; /* Dimensione del font più grande */
    font-weight: bold; /* Grassetto per un aspetto più forte */
    letter-spacing: 1px; /* Aggiungi spazio tra le lettere */
    border-top: 3px solid orange; /* Bordo sopra il titolo */
    transform: translateY(10px); /* Posiziona il titolo un po' più in basso */
    background-color: rgba(0, 0, 0, 0.5); /* Sfondo semi-trasparente per il titolo */
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 18px; /* Regola la dimensione del font */	
}

.image-item:hover .image-title {
    background: rgba(0, 0, 0, 0.9); /* Cambia sfondo al passaggio del mouse */
    transform: translateY(0); /* Ripristina la posizione originale al passaggio del mouse */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Ombra del testo per maggiore leggibilità */
}

.title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)); /* Gradient background */
    padding: 10px;
    text-align: center;
}

.title-text {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px; /* Bordo arrotondato */
    font-weight: bold;
    font-size: 1.2em; /* Dimensione del font */
    color: #fff; /* Testo bianco per contrasto */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Ombra del testo per maggiore leggibilità */
}

/* Specifico per i colori in base all'immagine */
.image-item:nth-child(1) .image-title { background: linear-gradient(90deg, rgba(255, 165, 0, 0.8), rgba(0, 0, 255, 0.8)); } /* Autorizzazioni */
.image-item:nth-child(2) .image-title { background: linear-gradient(90deg, rgba(0, 0, 255, 0.8), rgba(255, 215, 0, 0.8)); } /* Chi Siamo */
.image-item:nth-child(3) .image-title { background: linear-gradient(90deg, rgba(255, 215, 0, 0.8), rgba(255, 165, 0, 0.8)); } /* Certificazioni */
.image-item:nth-child(4) .image-title { background: linear-gradient(90deg, rgba(0, 0, 255, 0.8), rgba(255, 165, 0, 0.8)); } /* Esterificazioni */
.image-item:nth-child(5) .image-title { background: linear-gradient(90deg, rgba(255, 165, 0, 0.8), rgba(0, 0, 255, 0.8)); } /* Olio Esausto */
.image-item:nth-child(6) .image-title { background: linear-gradient(90deg, rgba(0, 0, 255, 0.8), rgba(255, 215, 0, 0.8)); } /* Oleine */

/* Effetto di avvicinamento */
@keyframes approachIn {
    0% {
        transform: scale(0.1) translateY(100px); /* Partono piccole e fuori dalla posizione */
        opacity: 0; /* Invisibili all'inizio */
    }
    60% {
        transform: scale(1.1) translateY(-10px); /* Si avvicinano e diventano leggermente più grandi */
        opacity: 0.7; /* Parzialmente visibili */
    }
    100% {
        transform: scale(1) translateY(0); /* Si posizionano nella loro dimensione e posizione finale */
        opacity: 1; /* Completamente visibili */
    }
}

.image-item {
    opacity: 0; /* Inizia invisibile */
    transform: scale(0.1) translateY(100px); /* Partono piccole */
    transition: transform 1.5s ease, opacity 1.5s ease; /* Transizione per l'animazione fluida */
}