/* bottom-bar.css */

.bottom-bar {
   background-color:#007bff;
   color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
  position: fixed; /* Para que se quede en la parte inferior de la página */
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: 0;
  z-index: 1; /* Asegura que esté en la parte superior de otros elementos */
}

.bottom-bar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.bottom-bar li {
  padding: 10px 15px; /* Reduce el espacio vertical y horizontal */
  font-family: qatar2022, sans-serif;
  font-size: 1.5em;
  display: flex;
  align-items: center; /* Centra verticalmente el contenido */
}

.bottom-bar .bottom {
  color: #ffffff; /* Cambia el color de texto a blanco (#ffffff) o el color deseado */
}

.bottom li{
  font-size: 10px;  
    color: white;
    
}

.bottom-bar img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.bottom-bar i {
  margin-right: 3px; /* Espacio entre el icono y el texto */
}

/* Estilo al pasar el mouse por encima */
.bottom-bar li:hover {
  background-color: #f0f7ff;
  color: #007bff;
  cursor: pointer;
}

/* Estilo para dispositivos móviles */
@media (max-width: 768px) {
  .bottom-bar {
    width: 100%; /* Ocupar todo el ancho disponible */
    text-align: center; /* Centrar el texto en dispositivos móviles */
  }

  .bottom-bar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around; /* Distribuye los elementos equitativamente */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en filas en caso de que no quepan en una sola fila */
  }

  .bottom-bar li {
    padding: 0;
    font-size: 1em; /* Tamaño de fuente proporcional al ancho del viewport */
    display: flex;
    flex-direction: column; /* Coloca el icono arriba del texto */
    align-items: center; /* Centra horizontalmente los elementos */
    margin-bottom: 10px; /* Espacio vertical entre elementos */
  }
  
  .bottom-bar img {
    width: 24px; /* Tamaño de los íconos */
    height: 24px;
    margin-bottom: 4px; /* Espacio entre la imagen y el texto */
  }
  
  /* Puedes agregar más reglas personalizadas aquí si es necesario */
}