div.jumbotron.carousel-hero {
  color: #fff;
  text-align: center;
  background-size: cover;
  background-position: center;
  padding-top: 200px;
  padding-bottom: 100px;
  margin-bottom: 0;
  height: 500px; /* Fijar la altura de todos los slides */
  display: flex;
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: center; /* Centra el contenido horizontalmente */
  flex-direction: column; /* Asegura que los elementos estén en columna */
}

@media (max-width: 768px) {
  div.jumbotron.carousel-hero {
    height: auto; /* Permite que el contenido defina la altura */
    min-height: 300px; /* Evita que el slider sea demasiado pequeño */
    padding: 50px 20px; /* Reduce el padding en móviles */
    text-align: center;
  }

  h1.hero-title {
    font-size: 1.5rem; /* Reduce el tamaño del título en móviles */
  }

  p.hero-subtitle {
    font-size: 1rem; /* Ajusta el tamaño del subtítulo */
    padding: 0 15px; /* Agrega padding lateral para mejor lectura */
  }

  .hero-button {
    font-size: 0.9rem; /* Reduce el tamaño del botón */
    padding: 8px 15px;
  }
}

@media (max-width: 480px) {
  h1.hero-title {
    font-size: 1.3rem; /* Reduce aún más el título en pantallas pequeñas */
  }

  p.hero-subtitle {
    font-size: 0.9rem; /* Ajusta el subtítulo para no ocupar tanto espacio */
  }

  .hero-button {
    width: 100%; /* Hace que los botones ocupen el ancho completo en móviles */
    max-width: 250px; /* Pero con un límite para que no sean demasiado grandes */
  }
}

div.jumbotron.hero-nature {
  background-image: url('../../../Img/tents/portada.jpg');
}

div.jumbotron.hero-photography {
  background-image: url('../../../Img/tables/IMG_6292.jpg');
}

div.jumbotron.hero-technology {
  background-image: url('../../../Img/inflatables/IMG_6457.jpg');
}

div.jumbotron.hero-technology2 {
  background-image: url('../../../Img/inflatables/IMG_5294.jpg');
}

div.jumbotron.hero-technology3 {
  background-image: url('../../../Img/chairs/IMG_5629.jpg');
}

h1.hero-title, h2.hero-title, h3.hero-title {
  font-family: Helvetica;
  bottom: -20px;
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

p.hero-subtitle {
  max-width: 600px;
  margin: 25px auto;
  padding: 10px 15px;
  color: rgb(0, 0, 0);
}