/* Contenitore principale della landing page mobile */
.mobile-landing-container {
    padding: 15px;
}

/* Logo o immagine principale in alto */
.main-logo {
    max-width: 150px; /* Imposta una larghezza massima */
    height: auto;     /* Mantiene le proporzioni */
    display: block;   /* Per centrarlo con i margini */
    margin: 0 auto 30px auto; /* Margine sotto per spaziatura */
}

/* Il contenitore dei bottoni che usa Flexbox */
.button-grid {
    display: flex;
    flex-wrap: wrap; /* Fondamentale: permette ai bottoni di andare a capo */
    justify-content: center; /* Centra i bottoni orizzontalmente */
    gap: 15px; /* Spazio tra i bottoni */
    padding: 0;
    list-style-type: none;
}

/* Stile per ogni singolo bottone (che è un link) */
.grid-button {
    display: flex;
    flex-direction: column; /* Icona sopra, testo sotto */
    align-items: center;    /* Centra icona e testo */
    justify-content: center;
    width: 120px; /* Larghezza fissa per ogni bottone */
    height: 100px; /* Altezza fissa */
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.grid-button:hover {
    transform: scale(1.05); /* Effetto di ingrandimento al passaggio del mouse */
}

/* Stile per l'icona dentro al bottone */
.grid-button-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px; /* Spazio tra icona e testo */
}