/* Colores del scrollbar según la sección */
body.imadis-scroll::-webkit-scrollbar-thumb {
    background-color: #fcbc24;
}

body.empresa-scroll::-webkit-scrollbar-thumb {
    background-color: #fcbc24;
}

body.servicios-scroll::-webkit-scrollbar-thumb {
    background-color: #aaa1a1;
}

body.estancos-scroll::-webkit-scrollbar-thumb {
    background-color: #99142b;
}

body.mobidec-scroll::-webkit-scrollbar-thumb {
    background-color: #8b745c;
}

body.loterias-scroll::-webkit-scrollbar-thumb {
    background-color: #242c7c;
}

body.farmacias-scroll::-webkit-scrollbar-thumb {
    background-color: #4c9494;
}

/* SLIDER DE NAVEGACIÓN */

.navigation-slider {
    position: fixed !important; /* Permite que la barra de navegación permanezca fija en la pantalla */
    top: 50%; /* Centra verticalmente la barra de navegación */
    right: 20px; /* A 20px del borde derecho de la pantalla */
    transform: translateY(-50%); /* Ajusta la barra para que esté completamente centrada verticalmente */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    display: flex;
    flex-direction: column; /* Los círculos se organizan en una columna */
    gap: 10px; /* Espacio entre cada círculo */
}

.nav-circle {
    width: 15px; /* Ancho de los círculos */
    height: 15px; /* Alto de los círculos */
    border-radius: 50%; /* Hace que los círculos sean redondos */
    background-color: #ddd; /* Color de fondo de los círculos */
    transition: background-color 0.3s, transform 0.3s; /* Transiciones suaves en hover y cuando estén activos */
}

.nav-circle:hover,
.nav-circle.active {
    background-color: #fcbc24; /* Color de fondo cuando se hace hover o cuando está activo */
    transform: scale(1.2); /* Aumenta el tamaño al hacer hover o cuando esté activo */
}

/* Colores específicos para cada círculo */
.nav-circle.imadis-active {
    background-color: #fcbc24; /* Rojo Tomate para la sección Imadis */
}

.nav-circle.empresa-active {
    background-color: #4682b4; /* Azul Acero para la sección Empresa */
}

.nav-circle.servicios-active {
    background-color: #aaa1a1; /* Verde Lima para la sección Servicios */
}

.nav-circle.estancos-active {
    background-color: #99142b; /* Dorado para la sección Estancos */
}

.nav-circle.loterias-active {
    background-color: #242c7c; /* Azul Violeta para la sección Loterias */
}

.nav-circle.farmacias-active {
    background-color: #4c9494; /* Rosa Caliente para la sección Farmacias */
}

.nav-circle.mobidec-active {
    background-color: #8b745c; /* Naranja Rojo para la sección Mobidec */
}