/*!
 * Don Geppi Restaurant - Custom Data Attributes
 * Copyright (c) 2025 Manolo De Angelis - Mdaweb
 * All rights reserved.
 */

/* ========================================
   CSS COMPLETO PER DATA ATTRIBUTES 
   Scala: 0-100 con scatti di 5
   Versione: 2.0 - Con supporto completo Tablet
======================================== */

/* === UTILITY CLASSES BASE === */

.marg { 
margin-bottom: 10%;


}

/* Hide/Show su mobile */
.no-mobile {
    display: block;
}

.no-desk {
    display: block;
}

.np {
    padding: 0px !important;
}



@media (min-width: 768px) {
    .no-desk {
        display: none !important;
    }

    .paddingfooter {
        padding: 0px 20px !important;  
    }     
}

@media (max-width: 768px) {
    .no-mobile {
        display: none !important;
    }
}

/* Hide/Show su tablet */
.no-tablet {
    display: block;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .no-tablet {
        display: none !important;
    }
    
    .only-tablet {
        display: block !important;
    }
}

@media (max-width: 767px), (min-width: 1025px) {
    .only-tablet {
        display: none !important;
    }
}


.svg-opacity {
    opacity: 0.8; /* Riduce l'intensità del nero del 20% */
	
}
/* === SEZIONI BLOCCO-CUSTOM === */
.blocco-custom {
    box-sizing: border-box;
    gap: 0 !important;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
}

/* === WIDTH PERCENTUALI (0-100, step 5) === */
.blocco-custom[data-width="w-0p"] { width: 0% !important; }
.blocco-custom[data-width="w-5p"] { width: 5% !important; }
.blocco-custom[data-width="w-10p"] { width: 10% !important; }
.blocco-custom[data-width="w-15p"] { width: 15% !important; }
.blocco-custom[data-width="w-20p"] { width: 20% !important; }
.blocco-custom[data-width="w-25p"] { width: 25% !important; }
.blocco-custom[data-width="w-30p"] { width: 30% !important; }
.blocco-custom[data-width="w-35p"] { width: 35% !important; }
.blocco-custom[data-width="w-40p"] { width: 40% !important; }
.blocco-custom[data-width="w-45p"] { width: 45% !important; }
.blocco-custom[data-width="w-50p"] { width: 50% !important; }
.blocco-custom[data-width="w-55p"] { width: 55% !important; }
.blocco-custom[data-width="w-60p"] { width: 60% !important; }
.blocco-custom[data-width="w-65p"] { width: 65% !important; }
.blocco-custom[data-width="w-70p"] { width: 70% !important; }
.blocco-custom[data-width="w-75p"] { width: 75% !important; }
.blocco-custom[data-width="w-80p"] { width: 80% !important; }
.blocco-custom[data-width="w-85p"] { width: 85% !important; }
.blocco-custom[data-width="w-90p"] { width: 90% !important; }
.blocco-custom[data-width="w-95p"] { width: 95% !important; }
.blocco-custom[data-width="w-100p"] { width: 100% !important; }

/* === WIDTH VIEWPORT (0-100, step 5) === */
.blocco-custom[data-width="w-0vw"] { width: 0vw !important; }
.blocco-custom[data-width="w-5vw"] { width: 5vw !important; }
.blocco-custom[data-width="w-10vw"] { width: 10vw !important; }
.blocco-custom[data-width="w-15vw"] { width: 15vw !important; }
.blocco-custom[data-width="w-20vw"] { width: 20vw !important; }
.blocco-custom[data-width="w-25vw"] { width: 25vw !important; }
.blocco-custom[data-width="w-30vw"] { width: 30vw !important; }
.blocco-custom[data-width="w-35vw"] { width: 35vw !important; }
.blocco-custom[data-width="w-40vw"] { width: 40vw !important; }
.blocco-custom[data-width="w-45vw"] { width: 45vw !important; }
.blocco-custom[data-width="w-50vw"] { width: 50vw !important; }
.blocco-custom[data-width="w-55vw"] { width: 55vw !important; }
.blocco-custom[data-width="w-60vw"] { width: 60vw !important; }
.blocco-custom[data-width="w-65vw"] { width: 65vw !important; }
.blocco-custom[data-width="w-70vw"] { width: 70vw !important; }
.blocco-custom[data-width="w-75vw"] { width: 75vw !important; }
.blocco-custom[data-width="w-80vw"] { width: 80vw !important; }
.blocco-custom[data-width="w-85vw"] { width: 85vw !important; }
.blocco-custom[data-width="w-90vw"] { width: 90vw !important; }
.blocco-custom[data-width="w-95vw"] { width: 95vw !important; }
.blocco-custom[data-width="w-100vw"] { width: 100vw !important; }

/* === HEIGHT VIEWPORT (0-100, step 5) === */
.blocco-custom[data-height="h-0vh"] { height: 0vh !important; }
.blocco-custom[data-height="h-5vh"] { height: 5vh !important; }
.blocco-custom[data-height="h-10vh"] { height: 10vh !important; }
.blocco-custom[data-height="h-15vh"] { height: 15vh !important; }
.blocco-custom[data-height="h-20vh"] { height: 20vh !important; }
.blocco-custom[data-height="h-25vh"] { height: 25vh !important; }
.blocco-custom[data-height="h-30vh"] { height: 30vh !important; }
.blocco-custom[data-height="h-35vh"] { height: 35vh !important; }
.blocco-custom[data-height="h-40vh"] { height: 40vh !important; }
.blocco-custom[data-height="h-45vh"] { height: 45vh !important; }
.blocco-custom[data-height="h-50vh"] { height: 50vh !important; }
.blocco-custom[data-height="h-55vh"] { height: 55vh !important; }
.blocco-custom[data-height="h-60vh"] { height: 60vh !important; }
.blocco-custom[data-height="h-65vh"] { height: 65vh !important; }
.blocco-custom[data-height="h-70vh"] { height: 70vh !important; }
.blocco-custom[data-height="h-75vh"] { height: 75vh !important; }
.blocco-custom[data-height="h-80vh"] { height: 80vh !important; }
.blocco-custom[data-height="h-85vh"] { height: 85vh !important; }
.blocco-custom[data-height="h-90vh"] { height: 90vh !important; }
.blocco-custom[data-height="h-95vh"] { height: 95vh !important; }
.blocco-custom[data-height="h-100vh"] { height: 100vh !important; }
.blocco-custom[data-height="h-auto"] { height: auto !important; }

/* === MARGIN Y (0-100, step 5) === */
.blocco-custom[data-margin-y="m-0"] { margin-top: 0px; margin-bottom: 0px; }
.blocco-custom[data-margin-y="m-5"] { margin-top: 5px; margin-bottom: 5px; }
.blocco-custom[data-margin-y="m-10"] { margin-top: 10px; margin-bottom: 10px; }
.blocco-custom[data-margin-y="m-15"] { margin-top: 15px; margin-bottom: 15px; }
.blocco-custom[data-margin-y="m-20"] { margin-top: 20px; margin-bottom: 20px; }
.blocco-custom[data-margin-y="m-25"] { margin-top: 25px; margin-bottom: 25px; }
.blocco-custom[data-margin-y="m-30"] { margin-top: 30px; margin-bottom: 30px; }
.blocco-custom[data-margin-y="m-35"] { margin-top: 35px; margin-bottom: 35px; }
.blocco-custom[data-margin-y="m-40"] { margin-top: 40px; margin-bottom: 40px; }
.blocco-custom[data-margin-y="m-45"] { margin-top: 45px; margin-bottom: 45px; }
.blocco-custom[data-margin-y="m-50"] { margin-top: 50px; margin-bottom: 50px; }
.blocco-custom[data-margin-y="m-55"] { margin-top: 55px; margin-bottom: 55px; }
.blocco-custom[data-margin-y="m-60"] { margin-top: 60px; margin-bottom: 60px; }
.blocco-custom[data-margin-y="m-65"] { margin-top: 65px; margin-bottom: 65px; }
.blocco-custom[data-margin-y="m-70"] { margin-top: 70px; margin-bottom: 70px; }
.blocco-custom[data-margin-y="m-75"] { margin-top: 75px; margin-bottom: 75px; }
.blocco-custom[data-margin-y="m-80"] { margin-top: 80px; margin-bottom: 80px; }
.blocco-custom[data-margin-y="m-85"] { margin-top: 85px; margin-bottom: 85px; }
.blocco-custom[data-margin-y="m-90"] { margin-top: 90px; margin-bottom: 90px; }
.blocco-custom[data-margin-y="m-95"] { margin-top: 95px; margin-bottom: 95px; }
.blocco-custom[data-margin-y="m-100"] { margin-top: 100px; margin-bottom: 100px; }

/* === MARGIN X (0-100, step 5) === */
.blocco-custom[data-margin-x="m-0"] { margin-left: 0px; margin-right: 0px; }
.blocco-custom[data-margin-x="m-5"] { margin-left: 5px; margin-right: 5px; }
.blocco-custom[data-margin-x="m-10"] { margin-left: 10px; margin-right: 10px; }
.blocco-custom[data-margin-x="m-15"] { margin-left: 15px; margin-right: 15px; }
.blocco-custom[data-margin-x="m-20"] { margin-left: 20px; margin-right: 20px; }
.blocco-custom[data-margin-x="m-25"] { margin-left: 25px; margin-right: 25px; }
.blocco-custom[data-margin-x="m-30"] { margin-left: 30px; margin-right: 30px; }
.blocco-custom[data-margin-x="m-35"] { margin-left: 35px; margin-right: 35px; }
.blocco-custom[data-margin-x="m-40"] { margin-left: 40px; margin-right: 40px; }
.blocco-custom[data-margin-x="m-45"] { margin-left: 45px; margin-right: 45px; }
.blocco-custom[data-margin-x="m-50"] { margin-left: 50px; margin-right: 50px; }
.blocco-custom[data-margin-x="m-55"] { margin-left: 55px; margin-right: 55px; }
.blocco-custom[data-margin-x="m-60"] { margin-left: 60px; margin-right: 60px; }
.blocco-custom[data-margin-x="m-65"] { margin-left: 65px; margin-right: 65px; }
.blocco-custom[data-margin-x="m-70"] { margin-left: 70px; margin-right: 70px; }
.blocco-custom[data-margin-x="m-75"] { margin-left: 75px; margin-right: 75px; }
.blocco-custom[data-margin-x="m-80"] { margin-left: 80px; margin-right: 80px; }
.blocco-custom[data-margin-x="m-85"] { margin-left: 85px; margin-right: 85px; }
.blocco-custom[data-margin-x="m-90"] { margin-left: 90px; margin-right: 90px; }
.blocco-custom[data-margin-x="m-95"] { margin-left: 95px; margin-right: 95px; }
.blocco-custom[data-margin-x="m-100"] { margin-left: 100px; margin-right: 100px; }
.blocco-custom[data-margin-x="m-auto"] { margin-left: auto; margin-right: auto; }

/* === BACKGROUND COLORS === */
.blocco-custom[data-bg="#ffffff"] { background-color: #ffffff; }
.blocco-custom[data-bg="#000000"] { background-color: #000000; }
.blocco-custom[data-bg="#f5f5f5"] { background-color: #f5f5f5; }
.blocco-custom[data-bg="#333333"] { background-color: #333333; }
.blocco-custom[data-bg="#d0cdcd"] { background-color: #d0cdcd; }
.blocco-custom[data-bg="#e0e0e0"] { background-color: #e0e0e0; }
.blocco-custom[data-bg="transparent"] { background-color: transparent; }

/* === COLONNE === */
.colonna {
    box-sizing: border-box;
    margin: 0;
    flex-shrink: 0;
}

/* === COLONNE - WIDTH PERCENTUALI (0-100, step 5) === */
.colonna[data-width="w-0p"] { width: 0% !important; }
.colonna[data-width="w-5p"] { width: 5% !important; }
.colonna[data-width="w-10p"] { width: 10% !important; }
.colonna[data-width="w-15p"] { width: 15% !important; }
.colonna[data-width="w-20p"] { width: 20% !important; }
.colonna[data-width="w-25p"] { width: 25% !important; }
.colonna[data-width="w-30p"] { width: 30% !important; }
.colonna[data-width="w-33p"] { width: 33.333% !important; }
.colonna[data-width="w-35p"] { width: 35% !important; }
.colonna[data-width="w-40p"] { width: 40% !important; }
.colonna[data-width="w-45p"] { width: 45% !important; }
.colonna[data-width="w-50p"] { width: 50% !important; }
.colonna[data-width="w-55p"] { width: 55% !important; }
.colonna[data-width="w-60p"] { width: 60% !important; }
.colonna[data-width="w-65p"] { width: 65% !important; }
.colonna[data-width="w-66p"] { width: 66.666% !important; }
.colonna[data-width="w-70p"] { width: 70% !important; }
.colonna[data-width="w-75p"] { width: 75% !important; }
.colonna[data-width="w-80p"] { width: 80% !important; }
.colonna[data-width="w-85p"] { width: 85% !important; }
.colonna[data-width="w-90p"] { width: 90% !important; }
.colonna[data-width="w-95p"] { width: 95% !important; }
.colonna[data-width="w-100p"] { width: 100% !important; }

/* === COLONNE - HEIGHT === */
.colonna[data-height="h-0vh"] { height: 0vh !important; }
.colonna[data-height="h-5vh"] { height: 5vh !important; }
.colonna[data-height="h-10vh"] { height: 10vh !important; }
.colonna[data-height="h-15vh"] { height: 15vh !important; }
.colonna[data-height="h-20vh"] { height: 20vh !important; }
.colonna[data-height="h-25vh"] { height: 25vh !important; }
.colonna[data-height="h-30vh"] { height: 30vh !important; }
.colonna[data-height="h-35vh"] { height: 35vh !important; }
.colonna[data-height="h-40vh"] { height: 40vh !important; }
.colonna[data-height="h-45vh"] { height: 45vh !important; }
.colonna[data-height="h-50vh"] { height: 50vh !important; }
.colonna[data-height="h-55vh"] { height: 55vh !important; }
.colonna[data-height="h-60vh"] { height: 60vh !important; }
.colonna[data-height="h-65vh"] { height: 65vh !important; }
.colonna[data-height="h-70vh"] { height: 70vh !important; }
.colonna[data-height="h-75vh"] { height: 75vh !important; }
.colonna[data-height="h-80vh"] { height: 80vh !important; }
.colonna[data-height="h-85vh"] { height: 85vh !important; }
.colonna[data-height="h-90vh"] { height: 90vh !important; }
.colonna[data-height="h-95vh"] { height: 95vh !important; }
.colonna[data-height="h-100vh"] { height: 100vh !important; }
.colonna[data-height="h-auto"] { height: auto !important; }
.colonna[data-height="h-100p"] { height: 100% !important; }
.colonna[data-height="h-section"] { height: inherit !important; }

/* === COLONNE - PADDING (0-100, step 5) === */
.colonna[data-padding="p-0"] { padding: 0px; }
.colonna[data-padding="p-5"] { padding: 5px; }
.colonna[data-padding="p-10"] { padding: 10px; }
.colonna[data-padding="p-15"] { padding: 15px; }
.colonna[data-padding="p-20"] { padding: 20px; }
.colonna[data-padding="p-25"] { padding: 25px; }
.colonna[data-padding="p-30"] { padding: 30px; }
.colonna[data-padding="p-35"] { padding: 35px; }
.colonna[data-padding="p-40"] { padding: 40px; }
.colonna[data-padding="p-45"] { padding: 45px; }
.colonna[data-padding="p-50"] { padding: 50px; }
.colonna[data-padding="p-55"] { padding: 55px; }
.colonna[data-padding="p-60"] { padding: 60px; }
.colonna[data-padding="p-65"] { padding: 65px; }
.colonna[data-padding="p-70"] { padding: 70px; }
.colonna[data-padding="p-75"] { padding: 75px; }
.colonna[data-padding="p-80"] { padding: 80px; }
.colonna[data-padding="p-85"] { padding: 85px; }
.colonna[data-padding="p-90"] { padding: 90px; }
.colonna[data-padding="p-95"] { padding: 95px; }
.colonna[data-padding="p-100"] { padding: 100px; }

/* === COLONNE - MARGIN (0-100, step 5) === */
.colonna[data-margin="m-0"] { margin: 0px; }
.colonna[data-margin="m-5"] { margin: 5px; }
.colonna[data-margin="m-10"] { margin: 10px; }
.colonna[data-margin="m-15"] { margin: 15px; }
.colonna[data-margin="m-20"] { margin: 20px; }
.colonna[data-margin="m-25"] { margin: 25px; }
.colonna[data-margin="m-30"] { margin: 30px; }
.colonna[data-margin="m-35"] { margin: 35px; }
.colonna[data-margin="m-40"] { margin: 40px; }
.colonna[data-margin="m-45"] { margin: 45px; }
.colonna[data-margin="m-50"] { margin: 50px; }
.colonna[data-margin="m-55"] { margin: 55px; }
.colonna[data-margin="m-60"] { margin: 60px; }
.colonna[data-margin="m-65"] { margin: 65px; }
.colonna[data-margin="m-70"] { margin: 70px; }
.colonna[data-margin="m-75"] { margin: 75px; }
.colonna[data-margin="m-80"] { margin: 80px; }
.colonna[data-margin="m-85"] { margin: 85px; }
.colonna[data-margin="m-90"] { margin: 90px; }
.colonna[data-margin="m-95"] { margin: 95px; }
.colonna[data-margin="m-100"] { margin: 100px; }

/* === COLONNE - ALIGN === */
.colonna[data-align="center"] { text-align: center; }
.colonna[data-align="left"] { text-align: left; }
.colonna[data-align="right"] { text-align: right; }

/* === COLONNE - VALIGN === */
.colonna[data-valign="middle"] { 
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.colonna[data-valign="top"] { 
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
}
.colonna[data-valign="bottom"] { 
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
}

/* === COLONNE - BACKGROUND === */
.colonna[data-bg="#ffffff"] { background-color: #ffffff; }
.colonna[data-bg="#000000"] { background-color: #000000; }
.colonna[data-bg="#f5f5f5"] { background-color: #f5f5f5; }
.colonna[data-bg="#333333"] { background-color: #333333; }
.colonna[data-bg="#d0cdcd"] { background-color: #d0cdcd; }
.colonna[data-bg="#e0e0e0"] { background-color: #e0e0e0; }
.colonna[data-bg="transparent"] { background-color: transparent; }

/* ========================================
   TABLET RESPONSIVE (768px - 1024px)
======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    
    /* SEZIONI - Comportamento su tablet */
    .blocco-custom {
        flex-wrap: wrap !important;
    }
    
    /* SEZIONI - Tablet Width */
    .blocco-custom[data-width-tablet="w-0p"] { width: 0% !important; }
    .blocco-custom[data-width-tablet="w-5p"] { width: 5% !important; }
    .blocco-custom[data-width-tablet="w-10p"] { width: 10% !important; }
    .blocco-custom[data-width-tablet="w-15p"] { width: 15% !important; }
    .blocco-custom[data-width-tablet="w-20p"] { width: 20% !important; }
    .blocco-custom[data-width-tablet="w-25p"] { width: 25% !important; }
    .blocco-custom[data-width-tablet="w-30p"] { width: 30% !important; }
    .blocco-custom[data-width-tablet="w-35p"] { width: 35% !important; }
    .blocco-custom[data-width-tablet="w-40p"] { width: 40% !important; }
    .blocco-custom[data-width-tablet="w-45p"] { width: 45% !important; }
    .blocco-custom[data-width-tablet="w-50p"] { width: 50% !important; }
    .blocco-custom[data-width-tablet="w-55p"] { width: 55% !important; }
    .blocco-custom[data-width-tablet="w-60p"] { width: 60% !important; }
    .blocco-custom[data-width-tablet="w-65p"] { width: 65% !important; }
    .blocco-custom[data-width-tablet="w-70p"] { width: 70% !important; }
    .blocco-custom[data-width-tablet="w-75p"] { width: 75% !important; }
    .blocco-custom[data-width-tablet="w-80p"] { width: 80% !important; }
    .blocco-custom[data-width-tablet="w-85p"] { width: 85% !important; }
    .blocco-custom[data-width-tablet="w-90p"] { width: 90% !important; }
    .blocco-custom[data-width-tablet="w-95p"] { width: 95% !important; }
    .blocco-custom[data-width-tablet="w-100p"] { width: 100% !important; }
    
    /* SEZIONI - Tablet Height */
    .blocco-custom[data-height-tablet="h-auto"] { height: auto !important; }
    .blocco-custom[data-height-tablet="h-50vh"] { height: 50vh !important; }
    .blocco-custom[data-height-tablet="h-60vh"] { height: 60vh !important; }
    .blocco-custom[data-height-tablet="h-70vh"] { height: 70vh !important; }
    .blocco-custom[data-height-tablet="h-80vh"] { height: 80vh !important; }
    .blocco-custom[data-height-tablet="h-90vh"] { height: 90vh !important; }
    .blocco-custom[data-height-tablet="h-100vh"] { height: 100vh !important; }
    
    /* COLONNE - Tablet Width */
    .colonna[data-width-tablet="w-0p"] { width: 0% !important; }
    .colonna[data-width-tablet="w-5p"] { width: 5% !important; }
    .colonna[data-width-tablet="w-10p"] { width: 10% !important; }
    .colonna[data-width-tablet="w-15p"] { width: 15% !important; }
    .colonna[data-width-tablet="w-20p"] { width: 20% !important; }
    .colonna[data-width-tablet="w-25p"] { width: 25% !important; }
    .colonna[data-width-tablet="w-30p"] { width: 30% !important; }
    .colonna[data-width-tablet="w-33p"] { width: 33.333% !important; }
    .colonna[data-width-tablet="w-35p"] { width: 35% !important; }
    .colonna[data-width-tablet="w-40p"] { width: 40% !important; }
    .colonna[data-width-tablet="w-45p"] { width: 45% !important; }
    .colonna[data-width-tablet="w-50p"] { width: 50% !important; }
    .colonna[data-width-tablet="w-55p"] { width: 55% !important; }
    .colonna[data-width-tablet="w-60p"] { width: 60% !important; }
    .colonna[data-width-tablet="w-65p"] { width: 65% !important; }
    .colonna[data-width-tablet="w-66p"] { width: 66.666% !important; }
    .colonna[data-width-tablet="w-70p"] { width: 70% !important; }
    .colonna[data-width-tablet="w-75p"] { width: 75% !important; }
    .colonna[data-width-tablet="w-80p"] { width: 80% !important; }
    .colonna[data-width-tablet="w-85p"] { width: 85% !important; }
    .colonna[data-width-tablet="w-90p"] { width: 90% !important; }
    .colonna[data-width-tablet="w-95p"] { width: 95% !important; }
    .colonna[data-width-tablet="w-100p"] { width: 100% !important; }
    
    /* COLONNE - Tablet Height */
    .colonna[data-height-tablet="h-auto"] { height: auto !important; }
    .colonna[data-height-tablet="h-100p"] { height: 100% !important; }
    .colonna[data-height-tablet="h-50vh"] { height: 50vh !important; }
    .colonna[data-height-tablet="h-60vh"] { height: 60vh !important; }
    .colonna[data-height-tablet="h-70vh"] { height: 70vh !important; }
    .colonna[data-height-tablet="h-80vh"] { height: 80vh !important; }
    .colonna[data-height-tablet="h-90vh"] { height: 90vh !important; }
    .colonna[data-height-tablet="h-100vh"] { height: 100vh !important; }
    
    /* COLONNE - Tablet Padding */
    .colonna[data-padding-tablet="p-0"] { padding: 0px !important; }
    .colonna[data-padding-tablet="p-5"] { padding: 5px !important; }
    .colonna[data-padding-tablet="p-10"] { padding: 10px !important; }
    .colonna[data-padding-tablet="p-15"] { padding: 15px !important; }
    .colonna[data-padding-tablet="p-20"] { padding: 20px !important; }
    .colonna[data-padding-tablet="p-25"] { padding: 25px !important; }
    .colonna[data-padding-tablet="p-30"] { padding: 30px !important; }
    .colonna[data-padding-tablet="p-35"] { padding: 35px !important; }
    .colonna[data-padding-tablet="p-40"] { padding: 40px !important; }
    .colonna[data-padding-tablet="p-45"] { padding: 45px !important; }
    .colonna[data-padding-tablet="p-50"] { padding: 50px !important; }
    
    /* COLONNE - Tablet Margin */
    .colonna[data-margin-tablet="m-0"] { margin: 0px !important; }
    .colonna[data-margin-tablet="m-5"] { margin: 5px !important; }
    .colonna[data-margin-tablet="m-10"] { margin: 10px !important; }
    .colonna[data-margin-tablet="m-15"] { margin: 15px !important; }
    .colonna[data-margin-tablet="m-20"] { margin: 20px !important; }
    .colonna[data-margin-tablet="m-25"] { margin: 25px !important; }
    .colonna[data-margin-tablet="m-30"] { margin: 30px !important; }
    
    /* Classi helper per layout tablet */
    .tablet-col-1 > .colonna {
        width: 100% !important;
    }
    
    .tablet-col-2 > .colonna {
        width: 50% !important;
    }
    
    .tablet-col-3 > .colonna {
        width: 33.333% !important;
    }
    
    /* Mix: prima riga 2 colonne, resto 100% */
    .tablet-2-then-full > .colonna:nth-child(1),
    .tablet-2-then-full > .colonna:nth-child(2) {
        width: 50% !important;
    }
    
    .tablet-2-then-full > .colonna:nth-child(n+3) {
        width: 100% !important;
    }
}

/* ========================================
   MOBILE RESPONSIVE (max-width: 768px)
======================================== */

@media (max-width: 768px) {
    
    /* SEZIONI - Mobile behavior */
    .blocco-custom {
        flex-wrap: wrap !important;
    }
    
    /* SEZIONI - Mobile Width */
    .blocco-custom[data-width-mobile="w-0p"] { width: 0% !important; }
    .blocco-custom[data-width-mobile="w-5p"] { width: 5% !important; }
    .blocco-custom[data-width-mobile="w-10p"] { width: 10% !important; }
    .blocco-custom[data-width-mobile="w-15p"] { width: 15% !important; }
    .blocco-custom[data-width-mobile="w-20p"] { width: 20% !important; }
    .blocco-custom[data-width-mobile="w-25p"] { width: 25% !important; }
    .blocco-custom[data-width-mobile="w-30p"] { width: 30% !important; }
    .blocco-custom[data-width-mobile="w-35p"] { width: 35% !important; }
    .blocco-custom[data-width-mobile="w-40p"] { width: 40% !important; }
    .blocco-custom[data-width-mobile="w-45p"] { width: 45% !important; }
    .blocco-custom[data-width-mobile="w-50p"] { width: 50% !important; }
    .blocco-custom[data-width-mobile="w-55p"] { width: 55% !important; }
    .blocco-custom[data-width-mobile="w-60p"] { width: 60% !important; }
    .blocco-custom[data-width-mobile="w-65p"] { width: 65% !important; }
    .blocco-custom[data-width-mobile="w-70p"] { width: 70% !important; }
    .blocco-custom[data-width-mobile="w-75p"] { width: 75% !important; }
    .blocco-custom[data-width-mobile="w-80p"] { width: 80% !important; }
    .blocco-custom[data-width-mobile="w-85p"] { width: 85% !important; }
    .blocco-custom[data-width-mobile="w-90p"] { width: 90% !important; }
    .blocco-custom[data-width-mobile="w-95p"] { width: 95% !important; }
    .blocco-custom[data-width-mobile="w-100p"] { width: 100% !important; }
    
    /* SEZIONI - Mobile Height */
    .blocco-custom[data-height-mobile="h-0vh"] { height: 0vh !important; }
    .blocco-custom[data-height-mobile="h-5vh"] { height: 5vh !important; }
    .blocco-custom[data-height-mobile="h-10vh"] { height: 10vh !important; }
    .blocco-custom[data-height-mobile="h-15vh"] { height: 15vh !important; }
    .blocco-custom[data-height-mobile="h-20vh"] { height: 20vh !important; }
    .blocco-custom[data-height-mobile="h-25vh"] { height: 25vh !important; }
    .blocco-custom[data-height-mobile="h-30vh"] { height: 30vh !important; }
    .blocco-custom[data-height-mobile="h-35vh"] { height: 35vh !important; }
    .blocco-custom[data-height-mobile="h-40vh"] { height: 40vh !important; }
    .blocco-custom[data-height-mobile="h-45vh"] { height: 45vh !important; }
    .blocco-custom[data-height-mobile="h-50vh"] { height: 50vh !important; }
    .blocco-custom[data-height-mobile="h-55vh"] { height: 55vh !important; }
    .blocco-custom[data-height-mobile="h-60vh"] { height: 60vh !important; }
    .blocco-custom[data-height-mobile="h-65vh"] { height: 65vh !important; }
    .blocco-custom[data-height-mobile="h-70vh"] { height: 70vh !important; }
    .blocco-custom[data-height-mobile="h-75vh"] { height: 75vh !important; }
    .blocco-custom[data-height-mobile="h-80vh"] { height: 80vh !important; }
    .blocco-custom[data-height-mobile="h-85vh"] { height: 85vh !important; }
    .blocco-custom[data-height-mobile="h-90vh"] { height: 90vh !important; }
    .blocco-custom[data-height-mobile="h-95vh"] { height: 95vh !important; }
    .blocco-custom[data-height-mobile="h-100vh"] { height: 100vh !important; }
    .blocco-custom[data-height-mobile="h-auto"] { height: auto !important; }
    
    /* COLONNE - Mobile Width */
    .colonna[data-width-mobile="w-0p"] { width: 0% !important; }
    .colonna[data-width-mobile="w-5p"] { width: 5% !important; }
    .colonna[data-width-mobile="w-10p"] { width: 10% !important; }
    .colonna[data-width-mobile="w-15p"] { width: 15% !important; }
    .colonna[data-width-mobile="w-20p"] { width: 20% !important; }
    .colonna[data-width-mobile="w-25p"] { width: 25% !important; }
    .colonna[data-width-mobile="w-30p"] { width: 30% !important; }
    .colonna[data-width-mobile="w-35p"] { width: 35% !important; }
    .colonna[data-width-mobile="w-40p"] { width: 40% !important; }
    .colonna[data-width-mobile="w-45p"] { width: 45% !important; }
    .colonna[data-width-mobile="w-50p"] { width: 50% !important; }
    .colonna[data-width-mobile="w-55p"] { width: 55% !important; }
    .colonna[data-width-mobile="w-60p"] { width: 60% !important; }
    .colonna[data-width-mobile="w-65p"] { width: 65% !important; }
    .colonna[data-width-mobile="w-70p"] { width: 70% !important; }
    .colonna[data-width-mobile="w-75p"] { width: 75% !important; }
    .colonna[data-width-mobile="w-80p"] { width: 80% !important; }
    .colonna[data-width-mobile="w-85p"] { width: 85% !important; }
    .colonna[data-width-mobile="w-90p"] { width: 90% !important; }
    .colonna[data-width-mobile="w-95p"] { width: 95% !important; }
    .colonna[data-width-mobile="w-100p"] { width: 100% !important; }
    
    /* COLONNE - Mobile Height */
    .colonna[data-height-mobile="h-0vh"] { height: 0vh !important; }
    .colonna[data-height-mobile="h-5vh"] { height: 5vh !important; }
    .colonna[data-height-mobile="h-10vh"] { height: 10vh !important; }
    .colonna[data-height-mobile="h-15vh"] { height: 15vh !important; }
    .colonna[data-height-mobile="h-20vh"] { height: 20vh !important; }
    .colonna[data-height-mobile="h-25vh"] { height: 25vh !important; }
    .colonna[data-height-mobile="h-30vh"] { height: 30vh !important; }
    .colonna[data-height-mobile="h-35vh"] { height: 35vh !important; }
    .colonna[data-height-mobile="h-40vh"] { height: 40vh !important; }
    .colonna[data-height-mobile="h-45vh"] { height: 45vh !important; }
    .colonna[data-height-mobile="h-50vh"] { height: 50vh !important; }
    .colonna[data-height-mobile="h-55vh"] { height: 55vh !important; }
    .colonna[data-height-mobile="h-60vh"] { height: 60vh !important; }
    .colonna[data-height-mobile="h-65vh"] { height: 65vh !important; }
    .colonna[data-height-mobile="h-70vh"] { height: 70vh !important; }
    .colonna[data-height-mobile="h-75vh"] { height: 75vh !important; }
    .colonna[data-height-mobile="h-80vh"] { height: 80vh !important; }
    .colonna[data-height-mobile="h-85vh"] { height: 85vh !important; }
    .colonna[data-height-mobile="h-90vh"] { height: 90vh !important; }
    .colonna[data-height-mobile="h-95vh"] { height: 95vh !important; }
    .colonna[data-height-mobile="h-100vh"] { height: 100vh !important; }
    .colonna[data-height-mobile="h-auto"] { height: auto !important; }
    .colonna[data-height-mobile="h-100p"] { height: 100% !important; }
    
    /* COLONNE - Mobile Padding */
    .colonna[data-padding-mobile="p-0"] { padding: 0px !important; }
    .colonna[data-padding-mobile="p-5"] { padding: 5px !important; }
    .colonna[data-padding-mobile="p-10"] { padding: 10px !important; }
    .colonna[data-padding-mobile="p-15"] { padding: 15px !important; }
    .colonna[data-padding-mobile="p-20"] { padding: 20px !important; }
    .colonna[data-padding-mobile="p-25"] { padding: 25px !important; }
    .colonna[data-padding-mobile="p-30"] { padding: 30px !important; }
    .colonna[data-padding-mobile="p-35"] { padding: 35px !important; }
    .colonna[data-padding-mobile="p-40"] { padding: 40px !important; }
    .colonna[data-padding-mobile="p-45"] { padding: 45px !important; }
    .colonna[data-padding-mobile="p-50"] { padding: 50px !important; }
    
    /* COLONNE - Mobile Margin */
    .colonna[data-margin-mobile="m-0"] { margin: 0px !important; }
    .colonna[data-margin-mobile="m-5"] { margin: 5px !important; }
    .colonna[data-margin-mobile="m-10"] { margin: 10px !important; }
    .colonna[data-margin-mobile="m-15"] { margin: 15px !important; }
    .colonna[data-margin-mobile="m-20"] { margin: 20px !important; }
    .colonna[data-margin-mobile="m-25"] { margin: 25px !important; }
    .colonna[data-margin-mobile="m-30"] { margin: 30px !important; }
}

/* ========================================
   GESTIONE AUTOMATICA RESPONSIVE
======================================== */

/* Automatico: 3 colonne desktop → 2 colonne tablet → 1 colonna mobile */
@media (min-width: 1025px) {
    .colonna[data-responsive="auto"] {
        width: 33.333% !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .colonna[data-responsive="auto"] {
        width: 50% !important;
    }
}

@media (max-width: 767px) {
    .colonna[data-responsive="auto"] {
        width: 100% !important;
    }
}

/* ========================================
   LAYOUT PREDEFINITI
======================================== */

/* Layout 3 colonne: desktop 3 → tablet 2+1 → mobile 1 */
.blocco-custom[data-layout="3-cols"] {
    display: flex;
    flex-wrap: nowrap;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .blocco-custom[data-layout="3-cols"] {
        flex-wrap: wrap !important;
    }
    
    .blocco-custom[data-layout="3-cols"] > .colonna:nth-child(1),
    .blocco-custom[data-layout="3-cols"] > .colonna:nth-child(2) {
        width: 50% !important;
    }
    
    .blocco-custom[data-layout="3-cols"] > .colonna:nth-child(3) {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .blocco-custom[data-layout="3-cols"] > .colonna {
        width: 100% !important;
    }
}

/* Layout 4 colonne: desktop 4 → tablet 2+2 → mobile 1 */
@media (min-width: 768px) and (max-width: 1024px) {
    .blocco-custom[data-layout="4-cols"] {
        flex-wrap: wrap !important;
    }
    
    .blocco-custom[data-layout="4-cols"] > .colonna {
        width: 50% !important;
    }
}

@media (max-width: 767px) {
    .blocco-custom[data-layout="4-cols"] > .colonna {
        width: 100% !important;
    }
}

/* ========================================
   EXTRA UTILITIES
======================================== */

/* Pixel values per casi speciali */
.blocco-custom[data-width="w-300px"] { width: 300px !important; }
.blocco-custom[data-width="w-400px"] { width: 400px !important; }
.blocco-custom[data-width="w-500px"] { width: 500px !important; }
.blocco-custom[data-width="w-600px"] { width: 600px !important; }
.blocco-custom[data-width="w-800px"] { width: 800px !important; }
.blocco-custom[data-width="w-1000px"] { width: 1000px !important; }
.blocco-custom[data-width="w-1200px"] { width: 1200px !important; }

.blocco-custom[data-height="h-200px"] { height: 200px !important; }
.blocco-custom[data-height="h-300px"] { height: 300px !important; }
.blocco-custom[data-height="h-400px"] { height: 400px !important; }
.blocco-custom[data-height="h-500px"] { height: 500px !important; }
.blocco-custom[data-height="h-600px"] { height: 600px !important; }

.colonna[data-width="w-300px"] { width: 300px !important; }
.colonna[data-width="w-400px"] { width: 400px !important; }
.colonna[data-width="w-500px"] { width: 500px !important; }
.colonna[data-width="w-600px"] { width: 600px !important; }

.colonna[data-height="h-200px"] { height: 200px !important; }
.colonna[data-height="h-300px"] { height: 300px !important; }
.colonna[data-height="h-400px"] { height: 400px !important; }
.colonna[data-height="h-500px"] { height: 500px !important; }
.colonna[data-height="h-600px"] { height: 600px !important; }

/* Background images support */
.blocco-custom[data-bg-img]:not([data-bg-img=""]) {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    position: relative;
}

.colonna[data-bg-img]:not([data-bg-img=""]) {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Hero/Full-screen blocco support */
.blocco-custom.parallax {
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

@media (max-width: 768px) {
    .blocco-custom.parallax {
        background-attachment: scroll;
    }
}


.paddingfooter {
    padding: 0px 20px !important;

}

@media (min-width: 768px) {
    .paddingfooter {
        padding: 0px 20px !important;
}
}