/*Uso de fuegos ARTIFICIALES */
/*Estilos productos  */
#slider {
padding: 5px;
background-color: #f7f7f7;
text-align: center;
}

#slider h3 {
text-align: center;
margin-bottom: 10px;
font-size: 1.4rem;
font-family:sans-serif;
color: darkred;
display: inline-block;	
border-radius: 8px;	
border: 2px solid #000080; /* Borde verde alrededor del cuadro */
box-shadow: 0px 0px 15px 5px rgba(0, 150, 0, 0.7)	
}

/*uso de seguridad sus flechas*/
.slider-container {
  position: relative;
  max-width: 450px; /* Ajusta el ancho máximo según tus necesidades */
  margin: 0 auto;
}

.slide-content {
  
  flex-direction: column; /* Apila el contenido verticalmente */
  align-items: center;
  cursor: grab; /* Cursor de agarre al pasar sobre el contenido */
}

.image-box img {
	
  border-radius: 25px; /* Borde redondeado para la imagen */
  width: 85%; /* Ajusta el ancho de la imagen al 80% del contenedor */
  max-width: 390px; /* Establece un ancho máximo para la imagen */
  height: auto; /* Permite que la altura se ajuste automáticamente */
  border: 2px solid #000080; /* Borde verde alrededor del cuadro */
box-shadow: 0px 0px 15px 5px rgba(0, 150, 0, 0.7)	
}

.textos {
}
/* Ajustar el z-index del slider para asegurarse de que esté detrás del menú */
.slider {
position: relative;
z-index: 0;
}
/*<-llave sirve para cerrar todo lo que esta arriba y no afecte abajo*/
/* Carrusel slider automatico parte de arriba*/

.slider-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background-color: #ff8f46;
  color: white;
  font-size: 24px;
  cursor: pointer;
  width: 50px; /* Aumenta el tamaño de los botones */
  height: 60px; /* Aumenta el tamaño de los botones */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  z-index: 999; /* Asegura que los botones estén en la capa superior */
}

.prev-slide {
  left: 0px; /* Posición del botón izquierdo */
}

.next-slide {
  right: 10px; /* Posición del botón derecho */
}

.slider-button:hover {
  background-color: #d57b33; /* Color naranja oscuro al pasar el mouse */
}

@media screen and (max-width: 768px) {
  .textos {
    max-width: 100%; /* Ajusta el ancho máximo del texto en dispositivos móviles */
    margin-left: 0; /* Elimina el margen izquierdo del texto en dispositivos móviles */
  }

  .slide-content {
	  
    align-items:center; /* centra la imagen en dispositivos móviles y pantallas 17"*/
  }

 }