/* --- Variabili e Reset --- */
:root {
    --primary-color: #62b92c; /* Verde scuro pulsanti */
    --text-color: #333333;
    --bg-color: #fcfcfc;
    --gray-light: #e0e0e0;
    --dark-green: #354e3f;       /* Verde Scuro (Deep) */
    --accent-plum: #813d66;      /* Colore Aggressivo richiesto */
    --accent-plum-dark: #5a2a47;
    --text-color: #1a1a1a;
    --bg-light: #f8f9f8;
    /*--font-main: 'Nunito', Tahoma, Geneva, Verdana, sans-serif;*/
    --font-main: 'Montserrat', san-serif;
}

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

body {
    font-family: var(--font-main);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.5;
    overflow-x: hidden;

}

a {
    text-decoration: none;
    color: inherit;
}

a.linkVerde{
     color: #62b92c;
}

a.linkVerde:hover{
    color: #354e3f;
}

                                    /* --- Layout Base --- */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center { text-align: center;}
.section-padding { padding: 40px 0;}

                                    /* --- atomic classes --- */

.testoVerde{
    color:#62b92c;
    font-weight:600
}

.nonVisibile{display:inline;}

@media (max-width: 480px) {

    .nonVisibile{display:none;}

}
.grassetto{font-weight:550}
                                      /* --- Bottoni --- */
.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px;
    border-radius: 20px; /* Bordi arrotondati */
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s;
}

.btn:hover { background-color: #354e3f; }
.btn-product { border-radius: 20px; padding: 8px 25px; margin-top: 10px; }
.btn-productSmall { border-radius: 20px; padding: 6px 15px; margin-top: 10px; }
.btn-large { padding: 15px 30px; border-radius: 30px; font-size: 1.1rem; }

                                /* --- Header --- */
 .btn-header {
    background-color: var(--accent-plum);
    color: white;
    border: 2px solid var(--accent-plum);
    padding: 8px 18px;
    border-radius: 4px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s;
 }

 .btn-header:hover {
    background-color:transparent;
    color: white;var(--accent-plum);
 }

.site-header {
    background-color: #62b92c;
    padding: 15px 0px 0px 0px;
    border-bottom: 1px solid var(--gray-light);
}

.header-container {
    display: flex;w
    justify-content: space-between;
    align-items: center;
}

.logo strong {font-size: 1.5rem;}

.logo{
    background-color: white;
    padding:20px 30px 0px 30px;
    margin-bottom:10px;
    border-radius: 4px;
}

.main-nav {
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
     margin: 15px 10px 15px 10px;

}

.main-nav a {
   color:white;
   font-weight:200;
   font-size: 1.1rem;
}

.separator { color: var(--gray-light); }

                                /* --- Hero --- */

.hero .subtitle {
    color: var(--accent-plum);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.hero .main-title {
    font-size: 5.0rem;
    color: var(--primary-color);
    margin: 0;
    letter-spacing: 0.01em;
    font-weight:300;
}

.hero .main-titleHome {
    font-size: 7.5rem;
    color: var(--primary-color);
    margin: 0;
    letter-spacing: 0.02em;
    font-weight:100;
}

.hero .description {
    font-size: 1.1rem;
    margin-top: 10px;
}

section.hero.section-padding{padding-bottom:0px;}

                                /* --- Products --- */

.product-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.product-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    padding: 20px;
    text-align: center;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:60px;
}

.product-image-placeholder {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 10px;
    color: #888;
    margin-top: -70px;
    margin-bottom: 15px;
}

.product-image-placeholder img{
  width: 100%;
  height: auto;
}

.product-card h3 { font-size: 1.2rem; margin-bottom: 5px;}
.product-card p { font-size: 0.9rem; margin-bottom: 15px; color: #555;}

.availability {
    margin-top: 30px;
    font-size: 1.1rem;
}

                        /* --- Sezioni Titoli con Linee --- */

.section-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 30px;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ccc;
}

.section-divider h2 {
    padding: 0 20px;
    font-size: 1.7rem;
    color: var(--accent-plum);
}

@media (max-width: 600px) {
    .section-divider {
        flex-direction: column;
        gap: 15px; /* Aggiunge uno spazio verticale tra il testo e l'immagine */
    }

    /* Nascondiamo le linee laterali per il layout mobile */
    .section-divider::before,
    .section-divider::after {
        display: none;
    }

    .section-divider h2 {
        padding: 0; /* Rimuoviamo il padding laterale superfluo */
        font-size: 1.4rem; /* Opzionale: riduce leggermente il font sui piccoli schermi */
    }

    /* Forziamo l'immagine a prendersi più spazio sui display piccoli */
    .section-divider img {
        width: 60% !important; /* L'uso di !important serve a sovrascrivere lo stile inline style="width:30%" scritto nell'HTML */
        max-width: 250px;      /* Evita che l'immagine diventi troppo grande */
    }
}

                        /* --- Features (Perché Unico) --- */

.features-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-align: center;
    align-items: flex-start;
}

.feature-item {
    flex: 1;
    font-size: 0.85rem;
}

.feature-item h4 { margin: 10px 0; font-size: 0.9rem; font-weight:400}
.feature-item span{color: var(--primary-color); font-weight:bold}
.feature-item p { margin-bottom: 3px;}

.icon-placeholder {
    background-color: #e9ecef;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #666;
}

.icon-placeholder.rounded { width: 80px; height: 80px; border-radius: 50%; }
.icon-placeholder.rounded img { width: 100%; height: auto; border-radius: 50%; }
.icon-placeholder.square { width: 100px; height: 80px; border-radius: 10px; }
.icon-placeholder.square img { width: 100%; height: auto; border-radius:10px; }

                        /* --- Perché Usare BioVal e Griglie --- */

.use-cases-grid {
    display: grid;
    /* 3 colonne di default su desktop */
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
    }

.use-case-item {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #f0f0f0;
}

.use-case-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.icon-wrapper {
    width: 100%;
    max-width: 250px;
    height: auto;
    margin: auto;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper img {
    max-width: 100%;
    max-height: 100%;
    width:170px;
    height:auto;
    object-fit: contain;
}

.use-case-item p {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--dark-green);
    line-height: 1.3;
    margin: 0;
    text-transform: uppercase;
}

/* --- Media Queries Specifici per la Griglia --- */

/* Tablet: 2 colonne */
@media (max-width: 992px) {

    .use-cases-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile: 1 colonna */
@media (max-width: 600px) {
    .use-cases-grid {
        grid-template-columns: 1fr;
        padding: 0 10px;
    }

    .use-case-item {padding: 25px 15px;}

    .icon-wrapper {
        width: 100px;
        height: auto;
    }
}

@media (max-width: 480px) {

    .use-cases-grid {grid-template-columns: 1fr !important;}

    .icon-wrapper img {
        max-width: 130%;
        max-height: 130%;
    }

}
            /* --- SEZIONE FARMACISTA (Ottimizzata con l'immagine reale) --- */

.cta-pharmacist {
    position: relative;
    width: 100%;
    min-height: 400px; /* Altezza minima aumentata per mostrare bene l'immagine */
    margin-top: 80px;
    display: flex;
    align-items: center;

    /* Background robusto */
    background-image: url('/img/mortaio.jpg');
    background-repeat: no-repeat;
    background-position: left center; /* Mortaio a sinistra */
    background-size: cover;
    background-color: #e6dced; /* Fallback che richiama il viola dell'immagine */
}

.pharmacist-container {
    display: flex;
    justify-content: flex-end; /* Sposta la card a destra */
    width: 100%;
    z-index: 10;
    padding-right:0px;
}

.cta-card {
    background: rgba(255, 255, 255, 0.98);
    padding: 30px 40px;
    border-radius: 35px;
    box-shadow: 0 30px 90px rgba(0,0,0,0.2);
    text-align: center;
    max-width: 550px;
    height:auto;
    width: 100%;
    margin-right: 0px /* Margine dal bordo destro per equilibrio */
    border: 1px solid rgba(129, 61, 102, 0.1);
}

 /*.cta-card {
                    width: 100%;
                    padding: 30px 15px;
                    margin-top:140px;
                }
*/

.cta-card h2 {
    color: #62b92c;
    font-size: 2.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.1;
    text-transform: uppercase;
}

.cta-card p {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 40px;
    font-weight: 600;
}

.btn-plum-large {
    display: inline-block;
    background-color: #62b92c;
    color: white !important;
    padding: 22px 45px;
    border-radius: 50px;
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(129, 61, 102, 0.3);
}

.btn-plum-large:hover {
    background-color: var(--accent-plum-dark);
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 15px 35px rgba(129, 61, 102, 0.45);
}

/* --- Responsive farmacista  --- */

@media (max-width: 992px) {

    .cta-pharmacist { background-position: -100px center; min-height: 550px; }
    .cta-card { max-width: 450px; padding: 40px; margin-right: 20px; }
    .cta-card h2 { font-size: 2.2rem; }

}

@media (max-width: 768px) {

    .cta-pharmacist {
        background-position: center;
        min-height: auto;
        padding: 100px 0;
        margin-top: 40px;
    }

    .pharmacist-container {justify-content: center;}
    .cta-card { margin: 0 20px; max-width: 100% }

}

/* --- Footer --- */

    /* grid 2 COLONNE */

    .grid2colonne {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0px;
        padding:0 20px;
    }

    .grid2colonneItem1{
        grid-column:1;
        grid-row:1;
    }

    .grid2colonneItem2{
        grid-column:2;
        grid-row:1;
    }

@media (max-width:992px){

	.grid2colonne {grid-template-columns: 1fr;}

	.grid2colonneItem1{
		grid-column:1;
		grid-row:1;
	}

	.grid2colonneItem2{
		grid-column:1;
		grid-row:2;
	}

}

.site-footer {
    background-color: white;
    padding: 30px 0px;
    border-top: 1px solid var(--gray-light);
    margin-top: 0px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: bold;
}

.socials a, footer-links a {margin-left: 20px;}
.socials a:first-child { margin-left: 0; }


/* --- Responsive Base (Mobile) --- */

@media (max-width: 900px) {
    .header-container { flex-direction: column; gap: 15px; }
    .features-grid { flex-wrap: wrap; }
    .feature-item { min-width: 45%; margin-bottom: 20px; }
    .cta-container { justify-content: center; }
    .pharmacist-bg-placeholder { display: none; /* Nascondiamo l'immagine su mobile per pulizia */ }
    .footer-container { flex-direction: column; gap: 20px; }
    .footer-links a { margin: 0 10px; }
}

/* --- OTTIMIZZAZIONE RESPONSIVE --- */

@media (max-width: 992px) {

    .hero .main-title {font-size: 5.2rem; /* Ridimensiono il titolo grande */}
     .hero .main-titleHome {font-size: 5.0rem; /* Ridimensiono il titolo grande */}

    .features-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 colonne su tablet */
        gap: 20px;
    }

    .main-nav {margin: 15px 0px 15px 20px;}
    .header-container {padding-bottom: 25px;}
}

@media (max-width: 768px) {
    /* Header: spostiamo gli elementi in verticale o diamo spazio */
    .header-container {
        flex-direction: column;
        padding-bottom: 15px;
    }

    .main-nav {
        margin: 15px 0px 15px 0px;
        flex-wrap: wrap;
        justify-content: center:
        gap: 10px;
        text-align:center;
    }

    .btn-header {
        width: 100%;
        text-align: center;
    }

    /* Hero */
    .hero .main-title {
        font-size: 4.5rem;
    }


    /* Griglie */
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonne su smartphone orizzontale */
    }

    .product-grid {
        flex-direction: column;
        align-items: center;

    }

    .product-card {
        width: 100%;
        max-width: 350px;
    }

    /* Sezione Farmacista Header*/
    .cta-container {
        justify-content: center;
        padding: 40px 20px;
    }

/*
    .cta-card {
        width: 100%;
        padding: 30px 15px;
        margin-top:140px;
    }
 */

     .product-grid{margin-top:0px}

    .pharmacist-bg-placeholder {
        display: none; /* Rimuoviamo l'immagine decorativa che coprirebbe il testo */
   }
}

@media (max-width: 480px) {

    .hero .main-title {font-size: 4.0rem;}
    .features-grid {grid-template-columns: 1fr; /* 1 colonna su smartphone piccoli */}

    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-links a {margin: 0;
    }

     .product-card {margin-top:140px;}
     .product-grid{margin-top:0px}

}

                            /* PAGINA PRODOTTI */

 /* Sezioni Prodotto (1° Livello) */
  .product-section { padding: 40px 0; border-bottom: 1px solid #eee; }
  .product-section:nth-child(even) { background-color: #fafafa; }
  .product-flex { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
  .product-section:nth-child(even) .product-flex { flex-direction: row-reverse; }

        .product-image { flex: 1; min-width: 300px; text-align: center; }
        .product-image img { max-width: 100%; height: auto; border-radius: 20px; /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); */ }

        .product-info { flex: 1.2; min-width: 300px; }
        .product-info h2 { font-size: 2.5rem; color: var(--primary-color); font-weight: 900; margin-bottom: 10px; }
        .product-tagline { font-size: 1.2rem; font-weight: 700; color: var(--accent-plum); margin-bottom: 20px; display: block; }

        .badges { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }
        .badge { background: #fff; border: 1px solid var(--primary-color); color: var(--primary-color); padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }

        .product-description { font-size: 1.05rem; margin-bottom: 25px; color: #444; }

        .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
        .info-box h4 { color: var(--dark-green); font-size: 1.1rem; margin-bottom: 10px; text-transform: uppercase; border-bottom: 2px solid var(--primary-color); display: inline-block; }
        .info-box ul { list-style: none; }
        .info-box li { font-size: 0.9rem; margin-bottom: 6px; padding-left: 18px; position: relative; }
        .info-box li::before { content: '•'; color: var(--primary-color); position: absolute; left: 0; font-weight: bold; }

        .btn-more { display: inline-block; background: var(--primary-color); color: white; padding: 15px 35px; border-radius: 50px; font-weight: 800; cursor: pointer; border: none; transition: 0.3s; box-shadow: 0 4px 15px rgba(98, 185, 44, 0.3); }
        .btn-more:hover { background: var(--dark-green); transform: translateY(-3px); }

  /* --- Drawer (2° Livello) --- */
        .drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 200; opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(4px); }
        .drawer-overlay.active { opacity: 1; visibility: visible; }

        .drawer { position: fixed; top: 0; right: -100%; width: 100%; max-width: 550px; height: 100%; background: white; z-index: 201; transition: 0.5s cubic-bezier(0.77,0,0.175,1); overflow-y: auto; padding: 60px 40px 40px; }
        .drawer.active { right: 0; }
        .close-drawer { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border-radius: 50%; cursor: pointer; font-size: 1.5rem; font-weight: bold; color: var(--accent-plum); transition: 0.3s; }
        .close-drawer:hover { background: var(--accent-plum); color: white; }

        .drawer-content h3 { font-size: 2rem; color: var(--primary-color); margin-bottom: 25px; border-bottom: 3px solid #eee; padding-bottom: 10px; }
        .drawer-section { margin-bottom: 35px; }
        .drawer-section h5 { color: var(--accent-plum); font-size: 1.1rem; text-transform: uppercase; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
        .drawer-section h5::after { content: ''; flex: 1; height: 1px; background: #eee; }

        .feature-card { background: #f9fbf8; padding: 20px; border-radius: 15px; margin-bottom: 15px; border-left: 5px solid var(--primary-color); }
        .feature-card strong { display: block; color: var(--dark-green); margin-bottom: 5px; font-size: 1rem; }
        .feature-card p { font-size: 0.95rem; margin: 0; color: #555; }

        /* Footer */
        .site-footer { padding: 20px 0px; background: #fff; border-top: 1px solid #eee; text-align: center; }

        /* Mobile */
        @media (max-width: 768px) {
            .hero .main-title { font-size: 2.2rem; }
            .product-flex { gap: 30px; text-align: center; }
            .info-grid { grid-template-columns: 1fr; text-align: left; }
            .product-info h2 { font-size: 2rem; }
            .drawer { max-width: 100%; padding: 60px 20px 20px; }
        }

/*elemento dinamico UNICO*/

        #target-word {
            display: inline-block;
            margin-left: 8px;
            color: var(--accent-color);
            /* Riserva lo spazio necessario per la parola per evitare salti del layout */
            min-width: 140px;
            text-align: left;
        }

        .letter {
            display: inline-block;
            opacity: 0;
            transform: translateY(20px) scale(0.6);
            transition:
                opacity 1.2s ease-out,
                transform 1.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 1.2s ease-out;
            filter: blur(8px);
            white-space: pre; /* Mantiene gli spazi se necessari */
        }

        .letter.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);

        }


        /* form */

        /* --- STILI SPECIFICI AGGIUNTI PER IL FORM CONTATTI --- */

        .form-container {
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            padding: 40px;
            max-width: 700px;
            margin: 0 auto;
            border: 1px solid var(--gray-light);
        }

        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-group {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: left;
            margin-bottom: 20px;
        }

        .form-row .form-group {
            margin-bottom: 0; /* Rimuove il margine inferiore se il gruppo è in una riga */
        }

        .form-group label {
            font-weight: 800;
            color: var(--dark-green);
            margin-bottom: 8px;
            font-size: 0.95rem;
        }

        .form-control {
            width: 100%;
            padding: 14px 18px;
            border: 1px solid var(--gray-light);
            border-radius: 12px;
            font-family: var(--font-main);
            font-size: 1rem;
            color: var(--text-color);
            background-color: var(--bg-light);
            transition: all 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            background-color: white;
            box-shadow: 0 0 0 3px rgba(98, 185, 44, 0.15); /* Effetto focus verde chiaro */
        }

        textarea.form-control {
            resize: vertical;
            min-height: 150px;
        }

        .form-submit-wrapper {
            margin-top: 30px;
            text-align: center;
        }

        /* Adattamento per dispositivi mobili */
        @media (max-width: 600px) {
            .form-row {
                flex-direction: column;
                gap: 20px;
            }
            .form-container {
                padding: 25px 20px;
            }
        }

        /* =========================================
                   --- MENU A TENDINA CONTATTACI ---
        ========================================= */

                .header-dropdown {
                    position: relative;
                    display: inline-block;
                }

                .dropdown-menu {
                    position: absolute;
                    top: calc(100% + 7px); /* Distanza dal bottone */
                    right: 0; /* Allineato al bordo destro del bottone */
                    background-color: white;
                    min-width: 185px;
                    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
                    border-radius: 8px;
                    overflow: hidden;
                    z-index: 1000;
                    opacity: 0;
                    visibility: hidden;
                    transform: translateY(-10px);
                    transition: all 0.3s ease;
                    border: 1px solid var(--gray-light);
                }

                /* Questa classe viene aggiunta/rimossa dal JavaScript al click */
                .dropdown-menu.show {
                    opacity: 1;
                    visibility: visible;
                    transform: translateY(0);
                }

                .dropdown-menu a {
                    color: var(--text-color);
                    padding: 14px 20px;
                    text-decoration: none;
                    display: block;
                    font-weight: 700;
                    font-size: 0.95rem;
                    transition: background-color 0.2s, color 0.2s;
                }

                .dropdown-menu a:hover {
                    background-color: var(--bg-light);
                    color: var(--accent-plum);
                }

                /* --- Responsive per il Dropdown e Header --- */
                @media (max-width: 992px) {
                    .main-nav { margin: 15px 0px 15px 20px; }
                    .header-container { padding-bottom: 25px; }
                }

                @media (max-width: 768px) {
                    .header-container { flex-direction: column; padding-bottom: 15px; }
                    .main-nav {
                        margin: 15px 0px;
                        flex-wrap: wrap;
                        justify-content: center;
                        gap: 10px;
                        text-align: center;
                    }
                    .btn-header { width: 100%; text-align: center; display: block; }

                    .header-dropdown {
                        width: 100%;
                        text-align: center;
                    }
                    .dropdown-menu {
                        right: 50%;
                        transform: translateX(50%) translateY(-10px);
                        width: 250px;
                    }
                    .dropdown-menu.show {
                        transform: translateX(50%) translateY(0);
                    }
                }

                /* elenco puntato con spunta*/

.lista-spunte {
  list-style-type: none; /* Rimuove il pallino di default */
  padding-left: 0;       /* Rimuove il rientro di default della lista */
  text-align:left;
}

.lista-spunte li {
  position: relative;
  padding-left: 25px;    /* Crea lo spazio per inserire la spunta */
  margin-bottom: 10px;   /* Distanza tra gli elementi (opzionale) */
}

.lista-spunte li::before {
  content: "✓";          /* Inserisce il simbolo della spunta */
  position: absolute;
  left: 0;
  top: 0;
  color: #2ecc71;        /* Un bel colore verde per la spunta */
  font-weight: bold;     /* Rende la spunta più visibile */
}