.jd-slider {
  position: relative;
  height: 100vh; /* Altura del slider al 100% de la pantalla */
  width: 100vw; /* Asegurar que ocupe el 100% del ancho */
  overflow: hidden; /* Evitar desbordamientos */
  background: linear-gradient(180deg, #e0f7ff, #a8dbf0); /* Degradado celeste */
}

.jd-slider .controller {
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.jd-slider .slide-area li {
  display: flex;
  align-items: center; /* Centrar verticalmente el contenido */
  justify-content: center; /* Centrar horizontalmente el contenido */
  height: 100vh; /* Mantener cada slide ocupando toda la altura */
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, #e0f7ff, #a8dbf0); /* Fallback de degradado */
  overflow: hidden; /* Evitar desbordamiento del contenido */
}

.jd-slider .slide-area img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cubre todo el área del slider sin distorsión */
}

@media (max-width: 600px) {
  .jd-slider {
    display: none; /* Ocultar el slider en pantallas pequeñas */
  }
}

@media (max-width: 750px) {
  .jd-slider {
    height: 50vh; /* Reducir la altura en pantallas más pequeñas */
  }

  .jd-slider .slide-area img {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho */
    height: 100%; /* Asegura que la imagen ocupe toda la altura */
    object-fit: cover; /* Ajusta la imagen para cubrir completamente el área del slider*/
  }
}

.jd-slider .controller .indicate-area a:after {
  border: 0 !important;
  background-color: #eee !important;
  box-shadow: 0px 0px 5px black;
  width: 10px;
  height: 10px;
}

.jd-slider .controller .indicate-area a.on:after {
  border: 0 !important;
  background-color: #fff !important;
}

.slide-area li {
  position: relative;
}

.slideOpt.opt1 img,
.slideOpt.opt2 img {
  position: absolute;
}

.slideOpt.opt1 .slideText,
.slideOpt.opt2 .slideText,
.slideOpt.opt3 .slideText {
  position: absolute;
  padding: 10px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.25); /* Fondo semitransparente */
}

.slideOpt.opt1 .slideText,
.slideOpt.opt3 .slideText {
  top: 20%;
  left: 10%;
  width: 40%;
  color: #ffffff;
}

.slideOpt.opt2 .slideText {
  top: 20%;
  right: 15%;
  width: 40%;
  color: #ffffff;
}

.slideOpt h1, 
.slideOpt h2, 
.slideOpt h3 {
  font-family: "Ubuntu Condensed", sans-serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

@media (max-width: 768px) {
  .slideText h1, .slideText h2, .slideText h3 {
    font-size: 4vw; /* Ajusta el tamaño del texto para pantallas pequeñas */
  }

  .slideText {
    top: 30%; /* Ajusta la posición del texto en pantallas más pequeñas */
    left: 5%; /* Ajusta el margen izquierdo */
    width: 90%; /* Aumenta el ancho para mejorar la legibilidad */
    font-size: 2.5vw; /* Ajustar el tamaño general del texto */
    padding: 2vw 4vw; /* Aumentar padding en pantallas pequeñas */
  }

  .slideOpt button {
    font-size: 2.5vw; /* Ajustar el tamaño del texto del botón */
    padding: 1vw 2vw; /* Padding más grande en el botón */
  }
}

@media (max-width: 480px) {
  .slideText h1, .slideText h2, .slideText h3 {
    font-size: 5vw; /* Aumentar el tamaño del texto para pantallas muy pequeñas */
  }

  .slideText {
    font-size: 3.5vw; /* Asegurar que el texto sea legible en pantallas pequeñas */
    padding: 3vw 5vw; /* Mayor padding para mantener el espaciado adecuado */
  }

  .slideOpt button {
    font-size: 3vw; /* Aumentar el tamaño del texto del botón en pantallas pequeñas */
    padding: 2vw 3vw; /* Más espacio en el botón */
  }
}

.slideOpt.opt1 .slideText h1,
.slideOpt.opt1 .slideText h2,
.slideOpt.opt1 .slideText h3,
.slideOpt.opt2 .slideText h1,
.slideOpt.opt2 .slideText h2,
.slideOpt.opt2 .slideText h3,
.slideOpt.opt3 .slideText h1,
.slideOpt.opt3 .slideText h2,
.slideOpt.opt3 .slideText h3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* Contorno del texto */
}