body {
  /*background: linear-gradient(to bottom right, #f0f0f0, #c0c0c0);  Cambia los colores según tus preferencias */
  /*background-image: url('../images/banner/banner9.png'); /* URL de tu imagen de fondo */
  background-color: #cad4d6;
  background-size: contain;
  margin: 0; /* Elimina el margen predeterminado del cuerpo */
	font-family: 'Poppins', sans-serif;}
/* ********************************** */
/*               BANNER               */
/* ********************************** */
/* Hero Carousel Styles */


.hero-carousel {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-carousel-item {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}

.hero-carousel-item.active {
  display: flex;
}

.image-container {
  width: 100%;
  height: 100%;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
}

.caption-text {
  width: 60%;
  margin-right: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Sombra de texto para mayor legibilidad */
}

.caption-text h2 {
  font-size: 3rem;
  margin-bottom: 15px;
  font-weight: bold;
  letter-spacing: 1px; /* Espaciado entre letras para mayor impacto */
  line-height: 1.2; /* Altura de línea para mejorar la legibilidad */
}

.caption-text p {
  font-size: 1.2rem;
  line-height: 1.8;
  letter-spacing: 0.5px; /* Espaciado entre letras */
}

.caption-image {
  width: 60%;
  text-align: center;
}

.caption-image .small-image {
  width: 100%;
  height: 100%;
}

.carousel-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;

  width: 100px;
}

.carousel-nav button {
  background: transparent;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
}

.carousel-nav button:hover {
  background-color: #ddd;
}

.carousel-nav button.prev {
  border-radius: 5px 0 0 5px;
}

.carousel-nav button.next {
  border-radius: 0 5px 5px 0;
}
.carousel-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


@media only screen and (max-width: 768px) {
  .hero-carousel {
    height: 50vh;
  }
  
  .carousel-caption {
    flex-direction: column;
    align-items: center;
    width: 90%;
  }
  
  .caption-text {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .caption-image {
    width: 100%;
    text-align: center;
  }
  
  .caption-image .small-image {
    width: 30%;
    height: 30%;
  }
  
  .carousel-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 10px;
  }
  
  .carousel-nav button {
    width: 100%;
    margin: 0;
  }
  
    .carousel-nav button.prev {
    float: left;
  }
  
  .carousel-nav button.next {
    float: right;
  }
  .image-container img {
    height: 80vh;
    object-fit: cover;
  }
}



/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------SIGUIENTE CONTENIDO------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------- */


/* Estilos para la sección de la galería

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  3 columnas en desktop 
    gap: 20px;  Espacio entre las imágenes 
    max-width: 1000px;  Ancho máximo de la galería 
    margin: 0 auto;  Centrar la galería horizontalmente 
  }
  
   Ajuste para dispositivos móviles 
  @media (max-width: 768px) {
    .gallery {
      grid-template-columns: repeat(2, 1fr);  2 columnas en tablets y móviles 
      gap: 15px;  Espacio entre las imágenes reducido 
      padding: 10px;  Espacio interno para mejor legibilidad 
    }
  }
  
   Estilo de las imágenes 
  .gallery img {
    width: 100%;  Ancho completo de las imágenes 
    height: auto;  Altura automática para mantener la proporción 
    border-radius: 8px;  Bordes redondeados 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  Sombra suave 
  }
   */


/* ------------------------------------------------------------------------------------------------------------------------------------------- */


/* Estilo para la sección de blogs */
.container.blogs {
    margin: 0 auto; /* Centrar horizontalmente */
    padding: 20px; /* Espaciado interno */
    background-image: url('../images/footer/banner2.png'); 
    background-size: cover; /* Cubrir todo el área del contenedor */
    background-position: center; /* Centrar la imagen de fondo */
    position: relative; /* Para que los elementos hijos respeten este contenedor */
    z-index: 0; /* Asegurar que esté detrás de otros elementos */

  }
  
  /* Estilos para los encabezados */
  .heading-1 {
    color: #ffffff; /* Blanco para un alto contraste con el fondo verde */
    text-align: center;
    margin-bottom: 24px; /* Margen inferior para mejor separación */
    font-size: 36px; /* Tamaño de fuente equilibrado */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Fuente sans-serif moderna */
    font-weight: 700; /* Negrita para mayor impacto */
    line-height: 1.4; /* Mejora la legibilidad */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Sombra de texto para mayor legibilidad */
}

  
  
  /* Estilos para el contenedor de las tarjetas de blog */
  .container-blogs {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* Centrar las tarjetas horizontalmente */

  }
  


  
  /* Estilo para cada tarjeta de blog */
  .card-blog {
    background-color: rgba(20, 177, 189, 0.9); /* Color de fondo con transparencia */
    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9)); /* Gradiente de fondo */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar contenido verticalmente */
    text-align: center; /* Centrar texto horizontalmente */
    width: 30%; /* Ancho de cada tarjeta */
    min-width: 300px; /* Ancho mínimo para mantener una buena apariencia en pantallas más pequeñas */
    position: relative; /* Necesario para posicionar el overlay */
    transition: transform 0.3s ease, box-shadow 0.3s ease;

  }

  .card-blog:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
  
  /* Estilos para la imagen dentro de la tarjeta */
  .container-img {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* Centrar la imagen horizontalmente */
    margin-bottom: 15px; /* Espaciado inferior */
    
  }
  
  .container-img img {
    width: 100%; /* Ajustar la imagen al máximo del contenedor */
    height: 100%;
    border-radius: 8px; /* Bordes redondeados para la imagen */
    object-fit: cover; /* Ajustar para cubrir el contenedor */
    transition: transform 0.6s ease; /* Transición lenta para el efecto de zoom */
  }
  
  /* Estilos para el contenido del blog */
  .content-blog {
    padding: 20px;
  }
  
  /* Estilos para el título del blog */
  .content-blog h3 {
    font-size: 1.5rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 10px;
  }
  
  /* Estilos para el párrafo del blog */
  .content-blog p {
    font-size: 1rem;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    color: #666;
    text-align: justify;
  }
  
  /* Estilos para el botón "Leer más" */
.btn-read-more {
    position: absolute; /* Posiciona el botón de forma absoluta dentro de la tarjeta */
    bottom: 0;
    left: 0;
    width: 100%; /* Hace que el botón ocupe todo el ancho de la tarjeta */
    padding: 15px; /* Espaciado interno para mayor comodidad */
    background-color: #37d48d;
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 8px 8px; /* Bordes redondeados en la parte inferior */
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    box-sizing: border-box; /* Asegura que el padding no aumente el tamaño total del botón */
  }

  .card-blog:hover .container-img img {
    transform: scale(1.15); /* Escalar la imagen ligeramente al pasar el mouse */
  }
  .btn-read-more:hover {
    background-color: #a6a6a6;
  }
  
  /* Ajuste para dispositivos móviles */
  @media (max-width: 768px) {
    .container-blogs {
      grid-template-columns: 1fr; /* Una columna en dispositivos móviles */
    }
  }
  

/* ********************************** */
/*               imagenes de facebook 2        */
/* ********************************** */
.lenguajes {
  padding: 20px; /* Espaciado interno */
  text-align: center; /* Centrar contenido horizontalmente */
 /* background-image: url('../images/banner/banner2.png'); /* Ruta a tu imagen de fondo */
  background-size: cover; /* Ajustar para que la imagen se vea completa sin distorsión */
  background-position: center; /* Centrar la imagen de fondo */
  background-repeat: no-repeat; /* Evitar la repetición de la imagen de fondo */

}

.container11 {

    width: 90%; /* Ancho del contenedor ajustado */
    max-width: 1200px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrar horizontalmente */
    display: flex;
    justify-content: center;
    gap: 20px; /* Espacio entre imágenes */
    flex-wrap: wrap; /* Permitir el ajuste a múltiples filas */
}

.container11 img {
    width: 180px; /* Ancho base de las imágenes */
    height: auto; /* Altura automática para mantener la proporción */
    object-fit: cover; /* Ajuste para cubrir el contenedor */
    border-radius: 10px; /* Bordes redondeados */
    border: 2px solid #ffffff; /* Borde blanco */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

.container11 img:hover {
    transform: scale(1.1); /* Escalar la imagen al 110% */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave al agrandar */
}

@media (max-width: 768px) {
    .container11 img {
        width: 35%; /* Ajustar el tamaño de las imágenes en pantallas pequeñas */
    }
}








/* Estilos generales para pantallas grandes (se oculta el carrusel) */
.container22 {
  display: flex;
  overflow: hidden; /* Oculta el contenido que desborda */
  width: 80%; /* Limita el ancho al 80% del contenedor principal */
  max-width: 1200px; /* Limita el ancho máximo para evitar que sea demasiado grande en pantallas grandes */
  height: 450px; /* Ajusta según sea necesario */
  margin: 0 auto; /* Centra el contenedor horizontalmente */
  gap: 15px; /* Espacio entre los elementos */
  border-radius: 15px; /* Bordes redondeados del contenedor principal */
}

/* Estilo base para los contenedores de imagen */
.image-container22 {
  position: relative; /* Permite posicionar el texto sobre la imagen */
  flex: 1; /* Asegura que los contenedores de imágenes ocupen el mismo espacio */
  display: flex;
  justify-content: center;
  align-items: center; /* Centra las imágenes y el texto dentro del contenedor */
  overflow: hidden; /* Asegura que las imágenes no desborden sus contenedores */
  transition: transform 0.5s ease-in-out; /* Transición suave para el efecto hover */
  border-radius: 10px; /* Bordes redondeados para los contenedores de imagen */
  border: 3px solid #fff; /* Borde blanco para los contenedores */
}

/* Estilo para las imágenes */
.image-container22 img {
  width: 100%; /* Ocupa el 100% del contenedor */
  height: 100%; /* Ocupa el 100% del contenedor */
  object-fit: cover; /* Mantiene la proporción de la imagen */
  transition: transform 0.5s ease-in-out; /* Transición suave para la transformación */
  border-radius: 10px; /* Bordes redondeados en la imagen */
}

/* Efecto hover para el contenedor de imagen */
.image-container22:hover {
  transform: scale(1.1); /* Escala el contenedor al pasar el mouse */
  z-index: 1; /* Asegura que el contenedor se mantenga arriba */
}

/* Efecto hover para la imagen dentro del contenedor */
.image-container22:hover img {
  transform: scale(1.1); /* Escala la imagen en el hover */
}

/* Estilo para el texto sobre la imagen */
.free {
  position: absolute; /* Permite que el texto esté sobre la imagen */
  top: 50%; /* Centra el texto verticalmente */
  left: 50%; /* Centra el texto horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta la posición para que el texto esté completamente centrado */
  background: rgba(0, 0, 0, 0.6); /* Fondo oscuro semitransparente para el texto */
  color: white; /* Color del texto */
  padding: 15px; /* Espaciado alrededor del texto */
  border-radius: 8px; /* Bordes redondeados del fondo del texto */
  font-size: 20px; /* Ajusta el tamaño del texto según sea necesario */
  text-align: center; /* Centra el texto dentro del fondo */
  font-weight: bold; /* Negrita para el texto */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Sombra sutil alrededor del fondo del texto */
}
/* Estilos específicos para pantallas móviles */

@media (max-width: 768px) {
  .freegoes {
    position: relative;
  }

  .container22 {
    display: flex;
    flex-direction: column; /* Coloca las imágenes en una columna */
    overflow: hidden; /* Oculta el contenido que desborda */
    width: 100%;
    height: auto; /* Ajusta la altura automáticamente */
    position: relative; /* Permite posicionar los botones de navegación */
  }

  .image-container22 {
    flex: 0 0 100%; /* Cada imagen ocupará el 100% del ancho del contenedor */
    box-sizing: border-box;
    position: relative; /* Necesario para posicionar el texto sobre la imagen */
  }

  .container22 img {
    width: 100%; /* Ajusta la imagen al ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Asegura que la imagen se muestre correctamente */
  }

.free {
  position: absolute; /* Permite que el texto esté sobre la imagen */
  bottom: 30px; /* Ajusta la posición del texto en la parte inferior */
  left: 50%; /* Centra el texto horizontalmente */
  transform: translateX(-50%); /* Ajusta la posición del texto */
  background: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente para el texto */
  color: white; /* Color del texto */
  padding: 20px 15px; /* Ajusta el espaciado alrededor del texto (más largo verticalmente y más angosto horizontalmente) */
  border-radius: 6px; /* Bordes redondeados del fondo del texto */
  text-align: center; /* Centra el texto dentro del contenedor */
  z-index: 1; /* Asegura que el texto esté sobre la imagen */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Sombra sutil alrededor del fondo del texto */
  font-size: 18px; /* Tamaño del texto */
}


}




 /*------------------------------------------------*/
 
 .container33 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 40px;
  background-color: #cad4d6;
  padding: 20px;
}

.servicio {
  background-color: #37d48d; /* Color de fondo del servicio */
  border-radius: 10px;
  overflow: hidden;
  margin: 10px;
  width: calc(25% - 20px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.servicio:hover {
  transform: translateY(-10px); /* Efecto de levantamiento al pasar el mouse */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.image-container33 {
  padding: 20px;
  background-color: #f4f4f4; /* Color de fondo de la imagen */
}

.image-container33 img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.image-text {
  font-size: 16px;
  color: #333333; /* Color del texto */
  margin: 20px;
  text-align: center;
}


@media (max-width: 768px) {
  .servicio {
    width: 90vw; /* Ancho ajustado para mejorar la visibilidad en móviles */
    height: auto; /* Altura automática para mantener la proporción */
    max-height: 70vh; /* Altura máxima para evitar que la tarjeta sea demasiado alta */
    margin: 15px 0; /* Espacio vertical alrededor de las tarjetas */  }
}


/* PARTE DEL REVERSO PORQUE NOSOTROSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS*/

.wrapper {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;

    
}

.escogernos {
  margin: 0 auto; /* Centrar horizontalmente */
  background-image: url('../images/banner/escogernos2.png'); 
  background-size: cover; /* Cubrir todo el área del contenedor */
  background-position: center; /* Centrar la imagen de fondo */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */

}

.card {
    width: 16vw;
    height: 22vw;
    perspective: 1000px;
}
.card-front p  {
  text-align: center;
  font-weight: bold;
  margin-top: 30px; /* Espacio entre la imagen y el texto */


}
.card-back p{
  text-align: justify;
  font-weight: bold;

}

.card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card-back {
  background-color: #ffffff; /* Fondo blanco para mejor legibilidad */
  color: #333333; /* Color de texto oscuro para un buen contraste */
  padding: 20px; /* Espaciado interno para mejorar la legibilidad */
  border-radius: 8px; /* Bordes redondeados para un aspecto más moderno */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para darle profundidad */
  text-align: left; /* Alineación del texto a la izquierda para una mejor lectura */
  font-size: 16px; /* Tamaño de fuente adecuado para la lectura en dispositivos móviles y escritorios */
  line-height: 1.6; /* Mayor interlineado para mejorar la legibilidad */
}


.card-front {
  background-color: #fff;
  color: #000;
  display: flex;
  flex-direction: column; /* Alinea la imagen y el texto en una columna */
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  padding: 10px; /* Añade un poco de relleno para separar la imagen del borde */
}

.card-front img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.card-back {
    background-color: #333333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateY(180deg);
    border: 1px solid #ddd;
}

.card:hover .card-front {
    background-color: #ddd;
}

.card:hover .card-back {
    background-color: #0a8b85;
}

/* Media queries para hacer la tarjeta responsive */
@media (max-width: 768px) {
  .wrapper {
    flex-direction: column; /* Cambia la dirección a columna en pantallas pequeñas */
    align-items: center; /* Alinea las tarjetas al centro horizontalmente */
}

.card {
    width: 65vw; /* Ancho de la tarjeta en pantallas pequeñas */
    height: auto; /* Ajusta la altura automáticamente para mantener la proporción */
    aspect-ratio: 4 / 5; /* Mantiene una proporción fija para las tarjetas */
}
.card-front p, .card-back p {
  font-size: 12px; /* Tamaño de fuente más pequeño para pantallas móviles */
  margin: 15px; /* Menos espacio alrededor del texto */
}


}