/* =================================================================== */
/*	TUO CSS ORIGINALE (Layout Base & Stili Pagina)
/* =================================================================== */

.wsmenu {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: fit-content !important;
}

.header-wrapper {
    position: relative;
    width: 100%;
}

.wsmainwp {
    display: flex;
    width: 100%;
    flex-direction: row;
}

.wsmenu > .wsmenu-list {
    display: flex;
    justify-content: center;
    align-items: center;
}

#hero-11 {
    padding-top: 80px; /* Spazio per header fisso */
}

#page {
    /* Gradiente di sfondo originale */
    background: linear-gradient(to bottom, #12a19a38 0%, #ffffff 38%);
    background-size: 100% 900px; /* Considera se questa altezza fissa è sempre ideale */
    background-repeat: no-repeat;
}

/* Stile per centrare il blocco features nell'hero (se ancora usato nel HTML) */
.gino {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

/* =================================================================== */
/*	NUOVI STILI SUGGERITI (Enfasi Contenuto & Features)
/* =================================================================== */

/* Definizioni Colori (Esempio - Adatta al tuo tema es. red.css) */
:root {
  --darkblue-color: #003366; /* Blu scuro per titoli/testi */
  --highlight-red: #e41e3f; /* Rosso per prezzi/offerte/bottoni */
  --check-green: #28a745;   /* Verde per icone check */
  --unisex-blue: #007bff;   /* Blu per badge unisex */
  --text-grey: #555555;     /* Grigio per sottotitoli/testo */
  --light-grey-bg: #f8f9fa; /* Grigio chiaro per sfondi sezione */
}

/* Colore base (se non usi :root) */
.darkblue-color {
     color: var(--darkblue-color); /* #003366; */
}

/* Titoli e Sottotitoli Enfatizzati */
.emphasis-title {
    font-weight: 700;
    color: var(--darkblue-color); /* #003366; */
    margin-bottom: 15px;
    line-height: 1.3;
}

.section-subtitle {
    font-size: 1.1em;
    color: var(--text-grey); /* #555555; */
    margin-bottom: 25px;
    font-weight: 400;
    max-width: 700px; /* Limita larghezza per leggibilità */
    margin-left: auto;
    margin-right: auto;
}

/* Prezzo Evidenziato */
.highlight-price {
    color: var(--highlight-red); /* #e41e3f; */
    font-weight: bold;
    font-size: 1.2em;
}

/* Stile per le Liste Puntate (Features / Checklist) - Sostituisce .cbox-1 */
.feature-box {
    display: flex;
    align-items: flex-start; /* Allinea icona con prima riga di testo */
    margin-bottom: 15px;
    font-size: 1.05em;
    max-width: 450px; /* Limita larghezza se necessario */
    /* Rimuovi se .gino centra già il blocco */
    /* margin-left: auto; */
    /* margin-right: auto; */
    text-align: left; /* Assicura testo a sinistra dentro la box */
}

.feature-box i.fas.fa-check-circle {
    color: var(--check-green); /* #28a745; */
    margin-right: 10px;
    font-size: 1.3em;
    margin-top: 3px; /* Allineamento verticale fine */
    flex-shrink: 0; /* Impedisce all'icona di rimpicciolirsi */
}

/* Icone generiche nelle feature-box */
.feature-box i.fas {
     color: var(--darkblue-color); /* #0056b3; */
     margin-right: 10px;
     font-size: 1.2em;
     margin-top: 3px;
     flex-shrink: 0;
}

.feature-box p,
.feature-box strong,
.feature-box li { /* Applica anche a liste dentro feature box */
    margin-bottom: 0;
    line-height: 1.5;
}

/* Badge UNISEX */
.unisex-badge {
     display: inline-block;
     background-color: var(--unisex-blue); /* #007bff; */
     color: white;
     padding: 3px 8px;
     border-radius: 5px;
     font-size: 0.9em;
     font-weight: bold;
     margin-left: 5px;
     vertical-align: middle;
}

/* Stile Bottone (Adatta colori al tuo tema es. red.css) */
.bottone {
   display: inline-block;
   padding: 12px 25px;
   background-color: var(--highlight-red); /* #e41e3f; */
   color: white !important;
   text-align: center;
   border-radius: 5px;
   font-weight: bold;
   text-decoration: none !important;
   transition: background-color 0.3s ease, transform 0.2s ease;
   border: none;
   cursor: pointer;
   text-transform: uppercase;
   font-size: 1.1em;
}

.bottone:hover {
   background-color: #c8102e; /* Esempio di rosso più scuro per hover */
   transform: scale(1.03);
}

/* Stile Didascalie sotto Immagini */
.col-sm-6.col-md-3 div,
.col-sm-6.col-md-4 div {
    text-align: center; /* Centra immagine e testo */
}
.col-sm-6.col-md-3 div p,
.col-sm-6.col-md-4 div p {
    font-size: 0.95em;
    color: #333;
    margin-top: 10px;
    font-weight: 500; /* Leggermente bold */
}

/* Stile Disclaimer nel Footer */
.disclaimer {
    font-size: 0.85em !important;
    color: #b0b0b0 !important; /* Usa un grigio chiaro se lo sfondo del footer è scuro */
    line-height: 1.4;
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(0,0,0,0.1); /* Leggero sfondo per separare */
    border-radius: 4px;
    text-align: center; /* Centra il testo del disclaimer */
}

.disclaimer strong {
    color: #c7c7c7 !important; /* Evidenzia leggermente "Disclaimer:" */
}

/* Sezione Scura (es. "Resistenza") */
.download-section { /* Assumendo che sia la classe per la sezione scura */
   /* background-img-1 è probabilmente definito altrove, mantenere */
   padding-top: 50px; /* Spaziatura interna */
   padding-bottom: 50px;
}

.download-section .text-white { /* Rende testo più leggibile su sfondi scuri */
    color: #f8f9fa !important;
}

.download-section .section-subtitle {
     color: rgba(255, 255, 255, 0.85) !important;
}
.download-section .emphasis-title {
    color: #ffffff !important;
}
.download-section hr.line {
    border-top: 2px solid rgba(255, 255, 255, 0.5);
    margin-top: 20px;
    margin-bottom: 20px;
    width: 25%; /* Mantenuto dal tuo HTML */
    margin-left: auto;
    margin-right: auto;
}

/* Sfondi Sezione Alternati (se necessario) */
.bg-lightgrey {
    background-color: var(--light-grey-bg); /* #f8f9fa; */
    padding-top: 60px;
    padding-bottom: 60px;
}

.wsmobileheader {
    display: none !important;
}

@media (max-width: 800px) {
    .wsmenu-list {
        display: none !important;
    }
}

/* =================================================================== */
/*	RESPONSIVE (Esempio base, adatta alle tue esigenze)
/* =================================================================== */
@media (max-width: 767px) {
    .hero-txt .h3-lg,
    .emphasis-title {
        font-size: 1.8em; /* Riduci dimensione titoli */
    }
    .section-subtitle {
        font-size: 1em;
    }
    /* Assicura che le colonne vadano una sotto l'altra */
    .col-sm-12.col-md-6 {
        width: 100%;
        margin-bottom: 30px; /* Aggiungi spazio sotto ogni colonna su mobile */
    }
     /* Rimuovi margine all'ultimo elemento colonna */
    .row .col-sm-12.col-md-6:last-child {
       margin-bottom: 0;
    }

    /* Centra il bottone se necessario */
    .hero-txt .centro {
        text-align: center;
    }

    .feature-box {
        max-width: 100%; /* Occupa tutta la larghezza disponibile */
        padding-left: 15px; /* Aggiungi padding se necessario */
        padding-right: 15px;
    }

    /* Regola padding sezioni su mobile */
    .wide-60, .ptb-50, .bg-lightgrey {
      padding-top: 40px;
      padding-bottom: 40px;
    }

    #hero-11 {
        padding-top: 0; /* Riduci padding top se header è più piccolo su mobile */
    }

     /* Aggiusta il layout dell'offerta/form */
     #reviews-3 .col-sm-12.col-md-6:first-child { /* Immagine offerta */
        margin-bottom: 30px; /* Spazio sotto immagine prima del form */
    }
     #reviews-3 .img-block img {
        max-width: 90%; /* Riduci leggermente immagine offerta se troppo grande */
     }

}