/* Stile per l'immagine di sfondo principale (Hero) */
        .hero-image {
            background-image: url('img/my_idea.jpg'); 
            background-color: #000;
            /* Altezza fissa per desktop */
            height: 100vh; 
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.45); 
        }

        /* MEDIA QUERY PER SCHERMI PICCOLI (CELLULARI) */
        @media (max-width: 600px) {
            .hero-image {
                /* Altezza minima sufficiente per visualizzare il contenuto, ma che permetta lo scrolling */
                min-height: 800px; 
                height: auto;
                padding-bottom: 50px; /* Padding extra per non far incollare il contenuto al bordo */
            }
        }
        
        /* Stile per il testo al centro dell'immagine */
        .hero-text {
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            padding: 20px;
            width: 100%; /* Occupare l'intera larghezza per la centratura */
            box-sizing: border-box; /* Per includere il padding nella larghezza */
        }
        
        /* MEDIA QUERY PER IL TESTO SU CELLULARE */
        @media (max-width: 600px) {
            .hero-text {
                /* Rimuovi la trasformazione fissa, usa il padding top/bottom */
                position: relative;
                top: 0;
                left: 0;
                transform: none;
                padding-top: 150px; /* Spazio per la Navbar fissa e in alto */
            }
            .hero-text h1 {
                font-size: 48px; /* Riduci la dimensione del titolo su cellulare */
            }
        }
        
        /* Stile per il Sottotitolo */
        .hero-text h3 {
            font-weight: 300;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
        }

        /* Stile per la Navbar fissa */
        .w3-bar {
            position: fixed;
            width: 100%;
            z-index: 100;
            background-color: rgba(0, 0, 0, 0.7); /* Navbar semi-trasparente */
        }

        /* Per evidenziare la sezione "who" in alto */
        #chi-sono {
            padding-top: 64px; /* Lascia spazio sotto la navbar fissa */
        }
        #chi-sono p, 
        #who p { /* Applica l'allineamento giustificato ai paragrafi di entrambe le sezioni */
            text-align: justify;
        }

    /* Nuovo stile per il contenitore della Word Cloud */
    .word-cloud-container {
        max-width: 80%; /* Contenitore per centrare i tag */
        margin: 20px auto 0 auto;
        display: flex; /* Utilizza Flexbox per la disposizione */
        flex-wrap: wrap; /* Permette ai tag di andare a capo */
        justify-content: center; /* Centra i tag orizzontalmente */
        text-align: center;
    }

    /* Stile base per i singoli Tag/Parole */
    .cloud-tag {
        display: inline-block;
        padding: 5px 10px;
        margin: 5px 8px;
        font-weight: bold;
        border-radius: 4px; /* Angoli arrotondati */
        text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
        opacity: 0; /* Nascondi inizialmente per l'animazione */
        animation: fadeInTag 1s forwards; /* Animazione di apparizione */
    }

    /* Definizione dell'animazione per l'apparizione graduale */
    @keyframes fadeInTag {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Classi di colore e dimensione specifiche (utilizziamo w3.css) */

    .tag-software { font-size: 1.6em; background-color: rgba(30, 144, 255, 0.8); } /* Blu */
    .tag-meccanica { font-size: 1.4em; background-color: rgba(255, 165, 0, 0.8); } /* Arancione */
    .tag-sport { font-size: 1.4em; background-color: rgb(225, 255, 0); } /* giallo */

    .tag-gestionale { font-size: 1.2em; background-color: rgba(60, 179, 113, 0.8); } /* Verde */
    .tag-piccolo { font-size: 0.9em; background-color: rgba(255, 255, 255, 0.2); color: #fff; } /* Piccolo e Trasparente */
    .tag-grande { font-size: 2em; background-color: rgba(220, 20, 60, 0.8); } /* Rosso */

/* Aggiungi questa nuova classe al tuo blocco <style> in index.php */
.tag-lifestyle { 
    font-size: 1.1em; 
    background-color: rgba(255, 69, 0, 0.7); /* Esempio: un arancione/rosso per le passioni/progetti personali */
}
/* Regola da aggiungere al blocco <style> in index.php */
.cloud-tag {
    /* ... (altre proprietà esistenti) ... */
    text-decoration: none; /* Rimuove la sottolineatura */
}