.card-container {
  display: flex;
  flex-direction: row;
  /* Mantiene las imágenes y el contenido en fila */
  align-items: center;
  /* Alinea verticalmente el contenido */
  background-color: #000000;
  padding: 20px;
  /* border: 3px solid #ccc; */
  border-radius: 5px;
  margin: 1%;
  text-align: justify;
  overflow: auto;
}

.card-container-detrabajo {
  display: flex;
  flex-direction: row;
  /* Mantiene las imágenes y el contenido en fila */
  align-items: center;
  /* Alinea verticalmente el contenido */
  /* background-color: #d3d3d3; */
  padding: 20px;
  /* border: 3px solid #ccc; */
  border-radius: 5px;
  margin: 1%;
  text-align: justify;
  overflow: auto;
}

.image {
  object-fit: cover;
  width: 500px;
  /* Ajusta el ancho según tus necesidades */
  height: 500px;
  /* Ajusta la altura según tus necesidades */
  margin-right: 30px;
  /* Espacio entre la imagen y el contenido de la tarjeta */
  border-radius: 2%;
}

.card-content {
  flex: 1;
  /* Permite que el contenido de la tarjeta tome el resto del espacio */
}

.texto_nosotros {
  font-family: "Livvic", sans-serif;
  color: #ffe26f;
}

.texto_nosotros2 {
  font-family: "Livvic", sans-serif;
  color: #000000;
}

.letrash1 {
  color: #ffcf2d;
  font-family: "Livvic", sans-serif;
  font-weight: 700;
}

.letrash3 {
  color: #ffe26f;
  font-family: "Livvic", sans-serif;
  line-height: 1.2;
  margin: 0 auto;
  width: 60%;
  text-align: justify;
}

.letrashr {
  border-color: #ffffff;
  border-width: 2px;
  width: 50%;
}

.letrashr2 {
  border-color: #000000;
  border-width: 2px;
  width: 50%;
}



.texto_tamano {
  font-size: 25px;
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 1024px) {
  .image {
    width: 300px;
    height: 300px;
    margin-right: 20px;
  }

  .texto_tamano {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .card-container {
    flex-direction: column;
    /* Cambia a columna para pantallas pequeñas */
    align-items: flex-start;
    /* Alinea los elementos al inicio en lugar de al centro */
  }

  .image {
    width: 100%;
    /* Imagen toma el 100% del ancho del contenedor */
    height: auto;
    /* Altura automática para mantener la proporción */
    margin-right: 0;
    /* Elimina el margen derecho */
    margin-bottom: 20px;
    /* Añade margen inferior para separar la imagen del contenido */
  }

  .texto_tamano {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .card-container {
    padding: 10px;
  }

  .texto_tamano {
    font-size: 16px;
  }
}


/* Segunda parte de vision y mision */

.cards {
  display: flex;
  flex-direction: row;
  /* Alinea las tarjetas en fila */
  flex-wrap: wrap;
  /* Permite que las tarjetas se envuelvan en líneas nuevas si no caben en una sola fila */
  gap: 50px;
  /* Reduce el espacio entre las tarjetas para pantallas más pequeñas */
  justify-content: center;
  /* Centra las tarjetas horizontalmente */
  margin: 3%;
  font-family: "Livvic", sans-serif;
  font-size: 30px;
}

.cards .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centra el contenido horizontalmente */
  justify-content: flex-start;
  /* Alinea el contenido verticalmente al inicio */
  width: calc(100% / 2 - 40px);
  /* Ajusta el ancho de las tarjetas para que quepan tres en una fila */
  border-radius: 10px;
  cursor: pointer;
  transition: 400ms;
  padding: 30px;
  /* Añadir padding a las tarjetas */
  box-sizing: border-box;
  /* Incluir el padding y el borde dentro del ancho y alto */
}

.cards .red {
  background-color: #ffcf2d;
  color: #000000;
}

.cards .blue {
  background-color: #000000;
  color: #ffcf2d;
}

.cards .tip {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
  /* Añadir un margen inferior para separar el título del contenido */
  text-align: center;
  /* Centra el texto del título */
  width: 100%;
  /* Asegura que el título ocupe todo el ancho del contenedor */
}

.cards .second-text {
  font-size: 0.7em;
  text-align: justify;
  width: 100%;
  /* Asegura que el párrafo ocupe todo el ancho del contenedor */
}

.cards .card:hover {
  transform: scale(1.1, 1.1);
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 1024px) {
  .cards .card {
    width: calc(100% / 2 - 40px);
    /* Ajusta el ancho para que quepan dos tarjetas por fila */
  }
}

@media (max-width: 768px) {
  .cards .card {
    width: calc(100% - 40px);
    /* Ajusta el ancho para que quepa una tarjeta por fila */
  }

  .cards {
    gap: 10px;
    /* Reduce el espacio entre las tarjetas para pantallas más pequeñas */
  }
}

@media (max-width: 480px) {
  .cards {
    font-size: 20px;
    /* Reduce el tamaño de la fuente para pantallas muy pequeñas */
  }

  .cards .tip {
    font-size: 1.2em;
  }

  .cards .second-text {
    font-size: 0.6em;
  }
}