.image-container {
  position: relative; /* Permite posicionar elementos hijos de forma absoluta dentro de él */
   width: 100%;
  height: auto;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;

}

.text-overlay {
  position: absolute; /* Posiciona el texto respecto al contenedor */
  top: 50%; /* Mueve el texto 50% desde la parte superior */
  left: 50%; /* Mueve el texto 50% desde la izquierda */
  transform: translate(-50%, -50%); /* Centra el texto correctamente */
  color: white; /* Cambia el color del texto a blanco */
  text-align: center; /* Centra el texto horizontalmente */
}