*{
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
}

/* per non saltare da un punoto allaltro quando si schiacci ad esempio contatti, ma scorrendo in modo fluido */
html {
    scroll-behavior: smooth;
}

/* Margin: è la distanza tra la scatola e il mondo esterno (allontana gli altri oggetti). */

/* Padding: è la distanza tra il bordo della scatola e il contenuto dentro (crea spazio per far "respirare" il testo). */

/* Gap (Spazio tra Elementi): È la distanza uniforme che intercorre tra gli elementi "figli" all'interno di un contenitore (come una griglia o un contenitore Flexbox). Non aggiunge spazio ai bordi esterni del contenitore, ma solo tra i singoli blocchi che contiene.  */




.hero {
    width: 100%;
    height: 100vh;
    background-color: #000; /* Opzionale: un fondo nero mentre carica */


    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    justify-content: flex-start;





    position: relative; /* Indispensabile per fare da "ancora" */
    /* ... resto del tuo codice ... */
    overflow: hidden; /* Importante per non far uscire le foto dai bordi quando si ingrandiscono */
}



.hero-content{
    color: white;
    max-width: 850px; /* Evita che il testo diventi troppo lungo in orizzontale */
    width: 50%;
    
    
    background-color: rgba(0, 0, 0, 0.507); /* Ecco la magia */
    
    height: 100%; /* Prende tutti i 600px del genitore .hero */
    /* width: 20%;         Decidi tu quanto deve essere larga la fascia (es. 40%) */
    
    color: white;              /* Il testo rimane bianco solido! */
    


   align-content: center;
   


    position: relative; /* Serve per attivare lo z-index */
    z-index: 10;        /* Un numero alto lo porta in primo piano */
    



    /* 3. IL TRUCCO PER LO SPAZIO INTERNO */
    /* Invece di padding-left, usiamo il padding generico */
    /* Sintassi: sopra/sotto (0) e destra/sinistra (80px) */
    padding: 0 100px;



   
}


.hero-content h1 {
    font-size: 3rem; /* Testo molto grande */
    font-weight: 700; /* Font sottile, molto elegante */
    line-height: 1.2; /* Spazio tra le righe del titolo */
    margin-bottom: 20px; /* Spazio tra titolo e paragrafo */
    text-transform: uppercase;
}


.hero-content h1 span{
    font-size: 1.5rem;
    opacity: 0.9;           /* Leggermente trasparente per farlo sembrare più moderno */
    display: block; /* Lo mette a capo in modo pulito */
    margin-top: 20px;
    font-weight: 300; /* Crea contrasto: Titolo grosso, sottotitolo sottile */
}


.hero-content p {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.9); /* Bianco leggermente sporco per non sparare troppo */
    
}


.hero-content h1, .hero-content p {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}


.btn-vuoto{
    text-decoration: none; /* Toglie la sottolineatura */
    color: rgb(0, 0, 0);
    display: inline-block; /*Il concetto da ricordare: Di base, i link sono inline. Significa che si comportano come parole dentro una frase: non puoi dargli un'altezza o un margine verticale serio. Usando inline-block, il link rimane sulla stessa riga degli altri, ma "accetta" di avere dimensioni, padding e bordi come se fosse una scatola.*/

    background-color: #ffffff;

    padding: 15px 35px ;/* Spazio interno: sopra/sotto e destra/sinistra */
    border: 1px solid white; /* Una linea continua, sottile 1px, bianca */
    border-radius: 30px; /* Arrotonda gli angoli. Più è alto il numero, più è a "pillola" */
    font-size:  1rem; /* Testo leggermente più piccolo per eleganza */
    margin-right: 15px; /* Spazio esterno a destra per non farlo appiccicare al fratello */
    margin-top: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;


    transition:  0.8s; /* Non farlo scattare! Fallo cambiare in 0.3 secondi */
}                      


.btn-vuoto:hover {
    background-color: 	#E3DAC9; /* Il fondo diventa bianco */
    color: #000000; /* Il testo diventa scuro così si legge sul bianco */
    border: 1px solid #f3f3f3;
    
}


.btn-vuoto:active {
    transform: scale(0.95); /* Si rimpicciolisce del 5% */
}






/* Regole comuni a TUTTE le slide (dimensioni, animazione, ecc.) */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /*100% perchè prende quella del padre cioè hero, cioè 800px*/
    background-size: cover;
    background-position: center;
    opacity: 0; /* Partono tutte invisibili */


    /* Qui creiamo l'animazione: nome, durata, tipo di movimento, infinita */
    animation: zoomEfade 12s infinite; /* Aggiungi infinite alla fine */




    position: absolute;
    z-index: 1;         /* Numero basso, sta dietro al testo */
    /* ... resto del tuo codice ... */

}


/* Regole specifiche per ogni singola slide (l'immagine e il ritardo) */
.slide-1 {
    background-image: url('images/piatto-doccia-con-piastrelle.jpg');
    animation-delay: 0s;
}


.slide-2 {
    background-image: url('images/tiler3.jpg');
    animation-delay: 4s;
}

.slide-3 {
    background-image: url('images/tiler2.jpg');
    animation-delay: 8s;
}


/* L'ordine di esecuzione (la proprietà animation dentro la classe).

Il copione dell'azione (la regola @keyframes). */

/* @keyframes nomeanimazione { */
   /* 0% { */
        /* Come appare l'oggetto all'inizio */

    /* } */
    /* 50% { */
        /* Come appare a metà tempo */
    /* } */
    /* 100% { */
        /* Come appare alla fine */
    /* } */
/* } */


@keyframes zoomEfade {
  0% {
        opacity: 0;
        transform: scale(1);
    }
    /* La slide entra e diventa visibile velocemente */
    5% {
        opacity: 1;
    }
    /* Rimane visibile e continua a ingrandirsi lentamente fino a metà del suo turno */
    35% {
        opacity: 1;
    }
    /* Inizia a sparire dolcemente mentre la successiva sta già entrando */
    45% {
        opacity: 0;
        transform: scale(1.1);
    }
    /* Rimane invisibile per il resto del tempo per non coprire le altre */
    100% {
        opacity: 0;
    }




    
}




.navbar{


    position: fixed;  /* La blocca in alto */
    top: 0;           /* La attacca esattamente al soffitto */
    left: 0;          /* La attacca al bordo sinistro */

    z-index: 999;     /* Un numero altissimo per essere SICURI che stia sopra a tutto */

    height: 12vh;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);;
    
     

    /* IL SEGRETO: L'ombra che dà profondità */
    /* Spostamento X, Spostamento Y, Sfocatura, Espansione, Colore */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.171);

    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;


    border: 1.5px solid #cab182;






    /* Sfocatura dello sfondo (effetto vetro) */
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center; /*allineamento dello spazio VERTICALE*/
    justify-content: space-between; /* Spinge il logo a sinistra e i link a destra */
    padding: 20px 5%;          /* Spazio dai bordi laterali */
    

    

    transition: all 0.3s ease;
    }  


/* 1. La barra principale */
.nav-links{
    display: flex; /* Mette i link uno accanto all'altro, non in colonna */
    list-style: none;          /* TOGLIE I PUNTINI neri della lista */
}


/* 2. La lista dei link */
.nav-links li{
    margin-left: 25px;

}


/* 4. Estetica del testo nei link */
.nav-links a {
    text-decoration: none;
    color: #222;               /* Colore grigio scuro */
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s
}





.nav-links a:hover {
    color: #cab182;             /* Cambia colore quando ci passi sopra */
    
}


.logo img {
    height: 10vh;            /* L'immagine si adatta all'altezza della barra */
    width: auto;            /* Mantiene le proporzioni originali senza schiacciarsi */
}





.intro-professionale{
    padding: 80px 10%;
    background-color: white;
    font-size: 1.6rem;
    margin-top: 2%;
}



.intestazione-centrata{
    text-align: center;
    margin-bottom: 60px;
}


.intestazione-centrata h2{
    font-size: 2.3rem; /* Prova a metterlo leggermente più piccolo, ad esempio da 2.5rem a 2.2rem o 2rem */
}





.linea{
    height: 4px;           /* Qui decidi lo spessore (la "grossezza") */
    background-color: #cab182; /* Il colore che preferisci */
    width: 100%;
    margin: 20px auto;
    border-radius: 2px;
}


.contenuto-split {
    display: flex;
    align-items: flex-start; /* Allinea in alto */
    gap: 10%;              /* Spazio tra testo e immagine */
    
}





.colonna-testo {
    flex: 1.5;                /* Prende lo spazio necessario */
    text-align: justify;    /* Effetto "World" (tutto allineato ai bordi) */
    line-height: 1.8;       /* Rende il testo molto più leggibile */
    color: #000000;
    font-size: 1.4rem;

    

    hyphens: auto;      /* Spezza le parole lunghe con il trattino */
    word-spacing: -1px; /* Opzionale: stringe leggermente lo spazio tra le parole */
}



.colonna-immagine img{
    width: 55%;
    height: auto;;
    border-radius: 15px;

    /* 3. Se l'immagine si sposta a sinistra rimpicciolendosi, 
       usiamo questo per riportarla a destra */
    margin-left: auto;
    display: block;

    /* Crea un effetto cornice sfalsata in basso a destra */
    box-shadow: 20px 20px 0px -5px #cab182;



    transition: 0.8s;

}



.colonna-immagine img:hover{
    width: 65%;
    
    
}






.contenuto-split2{
    display: flex;
    align-items: flex-start; /* Allinea in alto verticalmente */
    justify-content: center; /* Centra il gruppo immagine+testo orizzontalmente */
    gap: 10%;
}



.colonna-immagine2{
    flex: 1;
    
}

.colonna-immagine2 img{
    width: 90%;
    height: auto;
    border-radius: 15px;
    

    /* CORREZIONE: Togliamo margin-left: auto e mettiamo margin-right: auto */
    margin-right: auto;
    display: block;

    /* Crea un effetto cornice sfalsata in basso a destra */
    box-shadow: -20px 20px 0px -5px #cab182;



    transition: 0.8s;

}


.colonna-immagine2 img:hover{
    width: 100%;
    
    
}

.punti-chiavi{
    padding: 50px;
}












.contenuto-split3{
    display: flex;
    align-items: flex-start; /* Allinea in alto verticalmente */
    justify-content: center; /* Centra il gruppo immagine+testo orizzontalmente */
    gap: 10%;


    
}



.colonna-testo3 {
    flex: 80%;                /* Prende lo spazio necessario */
    text-align: justify;    /* Effetto "World" (tutto allineato ai bordi) */
    line-height: 1.8;       /* Rende il testo molto più leggibile */
    color: #000000;
    font-size: 1.4rem;

    

    hyphens: auto;      /* Spezza le parole lunghe con il trattino */
    word-spacing: -1px; /*Opzionale: stringe leggermente lo spazio tra le parole*/
}

.colonna-immagine3 img{
    width: 90%;
    height: auto;
    border-radius: 15px;
    

    /* CORREZIONE: Togliamo margin-left: auto e mettiamo margin-right: auto */
    margin-left: auto;
    display: block;

    /* Crea un effetto cornice sfalsata in basso a destra */
    box-shadow: -20px 20px 0px -5px #cab182;



    transition: 0.8s;
}


.colonna-immagine3 img:hover{
    width: 100%;
    
    
}




.fondo-pagina{
    color: white;
    background-color: #1a1a1a;
    box-shadow:  0 -10px 20px rgba(0, 0, 0, 0.2);
    padding: 60px 10%;
    font-size: 1.4rem;
    
}


.contenitore-footer{
    display: flex;
    
    align-items: center;
    gap: 20%;
    
}



.contenitore-footer h3, 
.contenitore-footer h4 {
    color: #cab182;      /* Colore oro per richiamare lo stile */
    margin-bottom: 15px; /* Spazio per non farli appiccicare ai testi sotto */
    font-size: 1.6rem;   /* Un po' più grandi del paragrafo */
    text-transform: uppercase;
}


.contenitore-footer img{
    height: 80px;         /* Prova 80px, è una misura equilibrata per un footer */
    width: auto;          /* Mantiene le proporzioni originali */
    display: block;       /* Lo tratta come un blocco separato dal testo */
    margin-bottom: 15px;  /* Crea lo spazio perfetto tra logo e la scritta "Posa professionale..." */
}


.social h4 {
    text-align: left !important; /* Forza l'allineamento a sinistra */
    margin: 0 0 15px 0;         /* 15px di spazio sotto, 0 ai lati */
    padding: 0;
}

/* Contenitore icone: tutto in riga e attaccato a sinistra */
.contenitore-icone {
    display: flex;
    justify-content: flex-start; /* Attacca all'inizio della riga */
    align-items: center;         /* Centra le icone tra loro verticalmente */
    gap: 20px;                  /* Spazio fisso e preciso tra le icone */
    padding: 0;
    margin: 0;
}

/* Rendi i link dei contenitori piccoli quanto l'immagine */
.social a {
    display: flex;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    transition: 0.3s;
}

/* Dimensione icone e reset margini */
.social img {
    height: 45px; /* Dimensione un po' più grande come volevi */
    width: auto;
    display: block;
    margin: 0 !important; /* Elimina qualsiasi margine residuo */
}


.numero-tel{
    color: white;
}





.social img{
    height: 40px;
    width: auto;
    display: block;
}



.Facebook img {
    height: 55px; 
    width: auto;
}

.WhatsApp img {
    height: 45px;
}

.TikTok img {
    height: 40px; 
}
    

.social img:hover{
    transform: scale(1.2);
}

.social h4{
    text-align: center;
    margin-left: 20%;
}









.contenitore-padre {
    text-align: center;
}
















.hidden{
    opacity: 0;
    transform: translateY(50px);

    transition: all 1s ease-out;
}



.show{
    opacity:  1;
    transform: translate(0);
}



.legal-links {
    font-size: 0.8rem;
    margin-top: 20px;
    opacity: 0.7;
    text-align: center;

}
.legal-links a {
    color: white;
    text-decoration: none;
}



/* parte della galleria */



.contenitore-padre {
    max-width: 1800px;
    margin: 150px auto; /* Centra e stacca dall'alto/basso */
    padding: 0 5px;   /* Stacca dai bordi laterali dello schermo */

   

}


.griglia-mansonry{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 15px;
    grid-auto-rows: 200px;
    grid-auto-flow: dense;

    
}





.item-galleria{
    position: relative;
    
    overflow: visible;

    transform: scale(1); 
    transition: transform 1s ease; 
    
    

}

.item-galleria img{
    width: 100%;
    height: 100%;
    /* 'cover' riempie il box tagliando i bordi in eccesso, 
       'contain' mostra TUTTA la foto ma lascia spazi vuoti. 
       Per il Masonry, 'cover' è la scelta standard professionale. */
    object-fit: cover; 
    display: block;

    border-radius: 8px;

    
}




.item-galleria:hover{

    
    transform: scale(1.2);
    
    z-index: 99;
    
   
}


/* Occupa 2 "piani" in verticale */
.item-galleria.verticale {
    grid-row: span 2;
}

/* Occupa 2 "piani" in orizzontale (se vuoi) */
.item-galleria.orizzontale {
    grid-column: span 2;
    grid-row: span 2;

    
}



.item-galleria.grande {
    grid-column: span 2;
    grid-row: span 2;
}


/* Trasforma l'elenco in un contenitore flessibile */
.punto ul {
    display: flex;
    align-items: center;      /* Allinea l'icona verticalmente al centro del titolo */
    justify-content: flex-start; /* Mantiene tutto a sinistra, ma l'immagine sarà dopo il testo */
    list-style: none;         /* Rimuove eventuali pallini dell'elenco */
    padding: 0;
    gap: 30px;                /* Crea uno spazio fisso tra la scritta e il disegno */
}

/* Opzionale: Se vuoi che l'immagine sia "spinta" tutto a destra del contenitore */
/* .punto ul { justify-content: space-between; } */

.disegno1 {
    width: 10%;              /* Regola la grandezza dell'icona */
    height: auto;
    flex-shrink: 0;           /* Impedisce all'immagine di rimpicciolirsi se il testo è lungo */
}


.disegno2 {
    width: 5%;              /* Regola la grandezza dell'icona */
    height: auto;
    flex-shrink: 0;           /* Impedisce all'immagine di rimpicciolirsi se il testo è lungo */
}

.disegno3 {
    width: 6%;              /* Regola la grandezza dell'icona */
    height: auto;
    flex-shrink: 0;           /* Impedisce all'immagine di rimpicciolirsi se il testo è lungo */
}



.menu-toggle { display: none; } /* Nasconde l'hamburger su computer */

/* =========================================
   IMPOSTAZIONI PROFESSIONALI MOBILE (Fino a 768px)
   Strategia: Tutto in una colonna, leggibile e pulito.
========================================= */
/* =========================================
   IMPOSTAZIONI PROFESSIONALI MOBILE (Fino a 768px)
   Strategia: Tutto in una colonna, leggibile e pulito.
========================================= */
@media only screen and (max-width: 768px) {

    

    /* --- 1. RESET GENERALE E TIPOGRAFIA --- */
    body {
        overflow-x: hidden; /* Previene lo scroll orizzontale indesiderato */
    }

    /* Testo standard più grande per la lettura su piccolo schermo */
    p, li, .colonna-testo, .colonna-testo3 {
        font-size: 1rem !important; /* Circa 16px, standard mobile */
        line-height: 1.6 !important;
        text-align: left !important; /* Niente giustificato su mobile, crea buchi */
    }

    /* Titoli ridimensionati per non occupare 4 righe */
    h1 { font-size: 1.9rem !important; line-height: 1.2 !important; }
    h1 span { font-size: 1.1rem !important; }
    h2 { font-size: 1.8rem !important; }
    h3 { font-size: 1.3rem !important; margin-bottom: 0px !important;} /* Ridotto margine per icone affiancate */
    .etichetta { font-size: 0.9rem !important; }


    /* --- 2. NAVBAR (Menù in alto) --- */
    .navbar {
        height: auto !important;
        padding: 15px 20px !important;
        flex-direction: row !important; /* Mantiene logo a sinistra e icona a destra */
        justify-content: space-between !important;
        background-color: rgba(255, 255, 255, 0.98) !important; 
    }

    .menu-toggle {
    display: block !important; /* Mostra l'icona dell'hamburger */
    cursor: pointer;
    }

    .menu-toggle img {
    height: 40px; /* Regola la grandezza dell'icona inviata */
    width: auto;
}


    /* Il cassetto che esce da destra */
    .nav-container {
        position: fixed;
        top: 0;
        right: -100%; /* Inizia fuori dallo schermo a destra */
        width: 50%;   /* Prende il 70% della larghezza del telefono */
        height: 100vh;
        background-color: #ffffff;
        box-shadow: -10px 0 20px rgba(0, 0, 0, 0.24);
        transition: 0.4s ease; /* Effetto scivolamento */
        z-index: 1000;
        display: flex;
        flex-direction: column;
        padding-top: 120px;
        border-radius: 10px;
        border-left: 5px solid #cab182;
    }


    /* Quando il menu è attivo, lo riportiamo a destra: 0 */
    .nav-container.active {
        right: 0;
    }

    .logo img {
        height: 70px !important; 
        margin-bottom: 15px; 
    }

    .nav-links {
        width: 100%;
        display: flex !important;
        flex-direction: column !important; /* Li mette in colonna nel menu a destra */
        align-items: center !important;
        gap: 30px !important;
        margin-top: 50px !important;
    }

    .nav-links li {
        margin: 5px 10px !important; 
    }

    .nav-links a {
        font-size: 1.1rem !important; 
        color: #333 !important;
    }


   


    /* --- 3. HERO SECTION (La copertina) --- */
    .hero {
        min-height: 90vh; 
        padding-top: 100px; 
        align-items: flex-start !important; 
    }

    .hero-content {
        width: 90% !important; 
        max-width: none !important;
        padding: 30px 20px !important;
        background-color: rgba(0, 0, 0, 0.75) !important; 
        border-radius: 12px;
        margin-top: 20px;
    }

    .container-bottoni {
        display: flex;
        flex-direction: column; 
        gap: 15px; 
    }

    .btn-vuoto {
        margin: 0 !important;
        width: 100%; 
        text-align: center;
        padding: 12px 20px !important;
    }


    /* --- 4. SEZIONI DI CONTENUTO (La rivoluzione) --- */
    .intro-professionale, .punti-chiavi {
        padding: 40px 20px !important;
    }

    .contenuto-split, 
    .contenuto-split2, 
    .contenuto-split3 {
        display: flex !important;
        flex-direction: column !important; /* Impila tutto verticalmente */
        gap: 40px !important; 
    }

    .contenuto-split2 {
         flex-direction: column-reverse !important;
    }

    .colonna-testo, .colonna-testo3, 
    .colonna-immagine, .colonna-immagine2, .colonna-immagine3 {
        width: 100% !important;
        flex: auto !important;
        margin: 0 !important;
    }

    .colonna-immagine img, 
    .colonna-immagine2 img, 
    .colonna-immagine3 img {
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
        box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.2) !important; 
        margin: 0 !important;
    }

    /* --- SISTEMAZIONE ICONE PUNTI CHIAVE SU MOBILE --- */
    .punto ul {
        flex-direction: row-reverse !important; /* Inverte l'ordine: l'icona (che è dopo nell'HTML) appare a sinistra */
        justify-content: flex-end !important;  /* Riporta tutto a sinistra dello schermo */
        gap: 15px !important; /* Spazio ridotto tra icona e titolo */
        margin-bottom: 10px;
    }

    /* Dimensioni fisse per le icone su mobile per massima leggibilità */
    .disegno1, .disegno2, .disegno3 {
        width: 45px !important; /* Dimensione ideale per icone mobile */
        height: auto !important;
        flex-shrink: 0 !important;
    }
    
    .punto {
        margin-bottom: 35px; /* Spazio tra i blocchi dei punti */
    }


    /* --- 5. FOOTER (Piè di pagina) --- */
    .fondo-pagina {
        padding: 50px 20px !important;
    }

    .contenitore-footer {
        flex-direction: column !important; 
        text-align: center !important;
        gap: 50px !important; 
    }

    .footer-info img {
        margin: 0 auto 20px auto !important; 
    }

    .social a {
        width: auto !important;
        justify-content: center !important;
        font-size: 1.1rem;
        margin-bottom: 15px;
    }
    .social img {
        margin-left: 10px; 
    }




    .griglia-mansonry {
        /* Forza la griglia ad avere una sola colonna */
        grid-template-columns: 1fr !important; 
        /* Reset delle righe: le foto non devono avere altezze forzate strane */
        grid-auto-rows: auto !important; 
        gap: 20px !important;
    }

    /* Reset fondamentale: eliminiamo i "salti" di riga e colonna */
    .item-galleria.verticale, 
    .item-galleria.orizzontale, 
    .item-galleria.grande {
        grid-column: span 1 !important; 
        grid-row: span 1 !important;
    }

    .item-galleria {
        /* Diamo un'altezza fissa e armoniosa a tutte le foto sul telefono */
        height: 300px !important; 
        width: 90% !important;
        /* Centriamo il blocco */
        margin: 0 auto !important;
    }

    .item-galleria img {
        /* Fondamentale: la foto riempie il box senza deformarsi */
        object-fit: cover !important; 
    }


    /* Riduciamo lo zoom su mobile per non farlo uscire dai bordi */
    .item-galleria:hover {
        transform: scale(1.1) !important; /* Zoom solo del 5% invece del 20% */
    }



    /* --- DISTANZIAMENTO GALLERIA DAL MENU SU MOBILE --- */
    .contenitore-padre {
        /* Aumentiamo il margine superiore per non finire sotto la navbar */
        margin-top: 180px !important; 
        /* Aggiungiamo un po' di spazio sotto il titolo prima che inizi la griglia */
        padding-top: 20px !important;
    }
}