/* Progetti */
.projects-section {
    padding: 50px 20px;
    max-width: 1200px;
    margin: auto;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.project-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s, z-index 0.3s;
    z-index: 1; /* Impostiamo il valore di z-index per le card */
}

.project-card:hover {
    transform: scale(1.08);
    z-index: 10; /* Quando la card è in hover, la mettiamo in primo piano */
}

.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
    filter: grayscale(100%);
    border-radius: 10px;
}

.project-card:hover .project-image {
    filter: grayscale(0%);
}

.project-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    width: 100%;
}

.project-info h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: bold;
}

.project-info p {
    font-size: 1rem;
}

@media (max-width: 768px) {
    /* Stili generali per mobile */
    body {
        font-size: 14px; /* Riduci la dimensione del font per migliorare la leggibilità */
    }

    /* Sezione progetti */
    .projects-section {
        padding: 30px 15px; /* Riduci il padding per ottimizzare lo spazio */
    }

    .projects-grid {
        grid-template-columns: 1fr; /* Cambia la griglia a una sola colonna per dispositivi mobili */
        gap: 15px; /* Riduci lo spazio tra le card */
    }

    .project-card {
        border-radius: 8px; /* Riduci il raggio del bordo */
        min-height: 40vh;
    }

    .project-card:hover {
        transform: scale(1.05); /* Riduci l'effetto di scaling per dispositivi mobili */
    }

    .project-card p {
        width: 80%;
        margin: 0 auto;
    }

    .project-info {
        padding: 15px; /* Riduci il padding */
    }

    .project-info h3 {
        font-size: 1.3rem; /* Riduci la dimensione del titolo */
    }

    .project-info p {
        font-size: 0.9rem; /* Riduci la dimensione del testo */
    }
}