.swiper-slide{
    width: 300px !important;
    padding: 10px;
  }
  
  .swiper-slide img{
    width: 100% !important;
    padding: 5px;
  }
  
  .swiper-slide{
    width: 80px;
    margin: 10px !important;
  }


/* Estilos para el logo en pantallas grandes (por defecto) */
#mainlogo{
  width: 10%; /* Ancho del 10% para pantallas grandes */
  height: auto; /* Mantiene la proporción de la imagen */
  display: block; /* Asegura que la imagen se comporte como un bloque */
  max-width: 100%; /* Evita que la imagen se desborde de su contenedor */
  transition: width 0.3s ease-in-out; /* Transición suave para el cambio de tamaño */
}
/* Media query para pantallas pequeñas (ej. móviles y tablets, hasta 768px de ancho) */
@media (max-width: 768px) {
  #mainlogo {
    width: 20%; /* Ancho del 20% para pantallas pequeñas */
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  #mainlogo {
    width: 15%;
}
.mobile-nav-toggle {
  font-size: 28px !important; /* Tamaño por defecto para pantallas grandes (ajusta a tu gusto) */
  color: white; /* Color del icono, ajusta si es necesario */
  /* Asegúrate de que no haya un 'width' o 'height' fijo que lo limite */
}

/* Media query para pantallas más pequeñas (móviles y tablets) */
@media (max-width: 991px) { /* Bootstrap suele usar 991px como breakpoint para navbars */
  .mobile-nav-toggle {
    font-size: 36px !important; /* Aumenta el tamaño en pantallas pequeñas para mayor visibilidad */
  }
}

/*
  Si el icono sigue siendo pequeño o no cambia de tamaño,
  podría ser que otra regla CSS esté sobrescribiendo esta.
  En ese caso, podrías necesitar aumentar la especificidad del selector
  o usar !important (con precaución) si es estrictamente necesario, por ejemplo:

.fixed-top .mobile-nav-toggle {
  font-size: 36px !important;
}
*/