/*********************************************
  SECCIÓN PRINCIPAL DEL SLIDER
*********************************************/
.my-hero-section {
  width: 100%;
  /* Si tu layout lo requiere, puedes agregar más estilos aquí */
}

/*********************************************
  CAROUSEL GENERAL
*********************************************/
.my-hero-carousel .carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Mantener la regla base de Bootstrap, que en su modo inactivo (sin .active) pone display:none */
.carousel-item {
  position: relative;
  /* NO fuerces display: flex aquí */
  min-height: 100vh;  
  background-size: cover;
  background-position: center;
}

/* Solamente la slide activa se muestra en “flex” */
.carousel-item.active {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}



/*********************************************
  CADA SLIDE
*********************************************/
/* Reglas comunes para los .carousel-item */
.my-hero-carousel .carousel-item {
  display: flex;              /* Para centrar vertical/horizontal */
  align-items: center;
  justify-content: center;
  text-align: center;

  min-height: 100vh;          /* Permite crecer si es necesario */
  margin: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Si quieres efecto "cover" total, ajusta a tu gusto */
}

/* Slide 1: imagen de fondo */
.my-hero-carousel .slide-1 {
  background-image: url('../images/Landing-web2_.jpg');
}

/* Slide 2: imagen de fondo */
.my-hero-carousel .slide-2 {
  background-image: url('../images/57d622fa-f85c-42c6-acd8-5d6297c78d3e.jpg');
}

/*********************************************
  CONTENIDO DEL SLIDE
*********************************************/
.slide-content {
  /* Centrado dentro del .carousel-item con flex,
     pero limitamos el ancho con col-12 col-md-8 col-lg-6 */
  padding: 20px; /* algo de padding interno */
}

/* Título del slide */
.slide-title {
  color: #fff;      /* Texto blanco */
  font-size: 2rem;  /* Ajusta a tu gusto */
  font-weight: 700; /* Negrita */
  margin-bottom: 1rem;
}

/* Texto del slide */
.slide-text {
  color: #fff;
  font-size: 1.125rem; /* 18px aprox. */
  margin: 0; 
  line-height: 1.4;
}

/*********************************************
  RESPONSIVE / MEDIA QUERIES
*********************************************/
/* Disminuir un poco la tipografía en móviles muy pequeños si fuera necesario */
@media (max-width: 575px) {
  .slide-title {
    font-size: 1.5rem; /* Más pequeño */
  }
  .slide-text {
    font-size: 1rem;
  }
}

/*********************************************
  OPCIONAL: si tienes un header fijo
*********************************************/
/*
.my-hero-carousel .carousel-item {
  min-height: calc(100vh - 70px); 
}
*/