/* Stili di base (si applicano sempre, ma verranno sovrascritti su desktop) */
/* Stile per i bullet point non attivi */
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    background-color: transparent;
    border: 1px solid #000; /* Bordo nero di default */
    opacity: 1;
    margin: 0 5px;
    border-radius: 50%;
    box-sizing: border-box;
}

/* Stile per il bullet point attivo */
.swiper-pagination-bullet-active {
    background-color: #000; /* Sfondo nero di default */
    border: 1px solid #000;
    box-sizing: border-box;
}

/* Stili specifici per la classe .bullet-point-bianco */
.bullet-point-bianco .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    border-color: #fff; /* Sovrascrive il colore del bordo in bianco */
}
  .bullet-point-bianco .swiper-pagination-bullet-active{
    background-color: #fff; /* Imposta il colore di sfondo su bianco */
    border-color: #fff;
}

/* Nascondi i pallini su schermi più larghi di 767px */
@media (min-width: 768px) {
    .swiper-pagination { /* Seleziona il contenitore dei pallini */
        display: none; /* Nascondi l'intero contenitore */
    }
}