/* ALLINEAMENTO ICONA E TITOLO (MOBILE) */
@media (max-width: 768px) {
    /* Rimuove l'allineamento a flex del wrapper esterno, 
       ma lo applica alla sezione stessa */
    .section {
        /* ... altre proprietà section ... */
        display: block; /* torna a block */
    }

    /* Le icone e il titolo sono ora direttamente figli della sezione */
    .section > img:is(.dragon-capital-icon, .dragon-team-icon, .cat-investment-icon, .dragon-roadmap-icon, .dragon-ai-icon, .pepe-yellow-project-core-icon, .pepe-tokenomics-icon) {
        position: static; 
        width: 40px; 
        height: 40px;
        margin: 0 auto 10px auto; /* Centra l'icona sopra il titolo */
        display: block; 
        transform: none !important; 
    }
    
    /* Il titolo deve essere centrato da solo */
    .section > h2.flow-text { 
        display: block; /* Rende il titolo un blocco normale */
        text-align: center;
        margin-top: 0;
        margin-bottom: 20px;
    }
    
    /* Le icone che erano dentro H2 (che non dovrebbero più esserci) */
    .section-title-icon { display: none; }
    
    /* In questo caso, ripristiniamo la struttura DIV per forzare il flex solo sul titolo, 
       ma in questo codice HTML non è necessario perché l'icona è fuori. 
       Il codice HTML che ti ho dato ora funziona con le icone sopra il titolo in mobile. */
    
    /* SE VUOI LE ICONE ACCANTO AI TITOLI IN MOBILE: */
    
    /* Rimuovi il wrapper e fai del titolo stesso il container flex: */
    .section > h2.flow-text { 
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    /* E modifica l'HTML per includere l'icona dentro H2 (che era il problema) */
    /* Torniamo al tuo desiderio originale senza wrapper DIV: */
    
    /* Seleziona l'ultima soluzione HTML fornita (quella attuale in inglese)
       e usiamo questa regola CSS: */
       
    .section > img:is(.dragon-capital-icon, .dragon-team-icon, .cat-investment-icon, .dragon-roadmap-icon, .dragon-ai-icon, .pepe-yellow-project-core-icon, .pepe-tokenomics-icon) {
        /* In mobile l'icona è posizionata appena sopra il titolo */
        position: static; 
        width: 40px; 
        height: 40px;
        margin: 0 auto 10px auto; 
        display: block; 
        transform: none !important; 
    }
    .section > h2.flow-text { 
        /* Il titolo è centrato sotto l'icona */
        display: block; 
        text-align: center;
        margin-top: 0;
        margin-bottom: 20px;
    }

    /* Le altre regole CSS (Roadmap, CTA, ecc.) rimangono valide */
}