.banners {
  width: 100%;
  position:relative;
display: flex
;
    align-items: center;
    justify-content: center;
}

/* Contenedor del carrusel, se usa flex para alinear las imágenes horizontalmente */
.div-banner {
  display: flex;
  flex-direction: row; /* Alineamos las imágenes en una fila horizontal */
  width: 100%;
  transition: transform 1s ease-in-out; /* Animación para el deslizamiento */
  align-items: center;
    justify-content: center;
}

.imagen-for-mobile{
    display:none;
}

.banners-mobile{
    display:none;
}
/* Estilo para cada imagen de banner */
.img-banner {
  width: 100%; /* Cada imagen ocupará un 100% del ancho del contenedor */
  display: block; /* Las imágenes se mostrarán de forma continua */
  cursor:pointer;
}
.img-banner img {
  width: 100%;
  height: auto; /* Mantiene la proporción de las imágenes */
}







.texto-portada{
    position:absolute;
    z-index:2;
   display: flex
;
    align-items: center;
    justify-content: center;
}

.texto-titulo-portada{
     display:flex;

    justify-content:center;
    flex:1;
    flex-direction:column;
   
}

.texto-titulo-portada span {
    color: #fff;
    font-size: 126px;
    font-weight: 700;
}

.texto-titulo-portada p{
    color:#fff;
    font-size:24px;
    font-weight:500;
    margin:0;
      
}

.imagen-portada-curso{
  
    flex:1;
    
}
.imagen-portada-curso img{
    width:100%;
}



h1{
    font-size:49px !important;
    color:#333333;
    text-align: center;
    font-weight: 700 !important;
  }
  
  
  .fondo-atras{
      width: 100%;
    height: auto;
    background-image: url(https://capedu.edu.pe/img/newWeb/marca-agua-gris.png);
    background-size: 30%;
    background-position: right;
    background-repeat: no-repeat;
      
  }
  
  .div-container-cabecera{
      background:#F2F2F2;
  }
  
  .div-contacto{
      padding:40px 0px;
  }
  
  .lista-contacto {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center; /* Distribuye las cajas equitativamente */
    width: 100%;
   
}

.sub-lista-caja{
    display:flex;
    gap:115px;
}

/* Contenedor individual de cada caja de contacto */
.caja-contacto {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%; /* Cada caja tiene un ancho del 33% */
    padding: 10px;
}

/* Estilo de la imagen dentro de cada caja */
.caja-imagen {
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
        padding: 25px;
    margin-bottom: 10px; /* Espacio debajo de la imagen */
}

/* Imagen dentro de la caja */
.caja-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Campo de texto */
.caja-campo {
   
    border-radius: 20px;
    padding: 10px 20px;
    margin-bottom: 10px; /* Espacio debajo del campo */
}

.caja-campo span {
    color: #333333;
    font-size: 17px;
    font-weight: 600;
}

.caja-abajo{
  
        display: flex
;
    background: #0E2B6D;
    padding: 15px;
    border-radius: 30px;
}

/* Texto debajo de cada caja */
.caja-abajo span {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-align:center;
}

.caja-abajo span a{
    text-decoration:none;
    color:#fff;
}
  
.div-mapa{
    
}  
  
.div-sub-mapa {
    padding: 40px 0;

    position: relative; /* Necesario para posicionar el contenedor */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
}

.div-sub-mapa iframe {
  
    width: 100%; /* Hace que el iframe se ajuste al 100% del contenedor */
    height: 348px; /* Mantiene la altura al 100% del contenedor */
    border: 0; /* Opcional, elimina el borde del iframe */
}



  
.div-about {
    padding: 40px 0px;
}

.div-about h1 span {
    color: #18A74F;
    border-bottom: 4px solid #18A74F;
}

.lista-dirigido{
       display: flex;
    gap: 40px;
    margin: 30px 0px;
}


.caja-dirigido{
      flex: 1;
    background: #18A74F;
    padding: 20px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    cursor:pointer;
    
}

.caja-dirigido-1{
  
    background: #0E2B6D;
 
    
}

.caja-dirigido-texto{
    width:100%;
}
.caja-dirigido-texto p{
    color:#fff;
    font-weight:400;
    font-size:17px;
    margin:0px;
    text-align:justify;
}



.caja-dirigido-texto span{
    color:#fff;
    font-weight:600;
    font-size:17px;
    margin:0px;
}

.caja-dirigido-imagen{
        width: 110px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.caja-dirigido-imagen img{
    width: 100%;
    height:100%;
}
.div-objetivos{
    background:#F2F2F2;
}

.div-sub-objetivos{
    padding:40px 0px;
}

.lista-objetivos{
    display: flex
;
    flex-direction: column;
    gap: 10px;
}

.caja-objetivo {
    display: flex
;
    align-items: center;
    background: #0E2B6D;
    padding: 10px;
    border-radius: 20px;
    cursor:pointer;
}
.objetivo-imagen img{
    width:65px;
    height:65px;
}

.objetivo-parrafo p{
    margin:0px;
    font-size:17px;
    font-weight:500;
    color:#fff;
}





.container-sub-objetivo{
    display:flex;
        align-items: center;
}

.container-izquierdo, .container-derecho{
    flex:1;
}





.container-imagen-objetivo img{
    width:100%;
}

.div-dudas{
    padding:40px 0px;
}
.div-dudas h1 span {
    color: #18A74F;
    border-bottom: 4px solid #18A74F;
}


.parrafo-dudas p{
    color:#333333;
    font-size:17px;
    font-weight:500;
   
    margin: 40px 0px;
}

.imagen-pregunta{
    width:400px;
}

.imagen-pregunta img{
    width:100%;
    height:100%;
}





.izquierdo-dudas{
    display: flex
;
    flex-direction: column;
    align-items: center;


}

.lista-dudas{
        display: flex
;
    flex-direction: column;
    gap: 20px;
}
.pregunta-abrir{
    display: flex
;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 50%;
  border:1px solid #18A74F;
    width: 30px;
    height: 30px;


}

.pregunta-abrir svg{
    width:100%;
}

.caja-deduda{
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid #18A74F;
    padding: 20px;
    border-radius: 15px;
    cursor:pointer;

}


.caja-deduda p{
    color:#333333;
    font-size:17px;
    font-weight:500;
 margin:0px;
}


.caja-respuesta{
    padding:0px 20px;
}

.caja-respuesta p{
    font-weight: 500;
    color: #333333;
    margin: 0;
    font-size: 17px;
    text-align: justify;
}

.caja-deduda.active{
     background:#18A74F;
}

.caja-deduda.active  p{
     color:#fff;
}
.caja-deduda.active .pregunta-abrir{
    border:1px solid #fff;
}

.caja-deduda.active .cls-docentes {
    stroke: #fff !important; 
}
.caja-respuesta{
    display:none;
}

.caja-respuesta.active{
    display:flex;
   
}

@media (max-width: 991px) {
       .container{
           padding:20px;
       }
    .texto-portada {
            flex-direction: column;
    }
    
    .texto-titulo-portada{
     flex-direction: column;
             align-items: center;
    }
.lista-dirigido{
    flex-direction: column;
}
    .div-about h1 span {
    color: #18A74F;
    border-bottom: none;
}
    .container-sub-objetivo{
            flex-direction: column;
    }
    
    .texto-titulo-portada span{
        font-size:30px;
    }
    
       .texto-titulo-portada p{
           font-size:18px;
           text-align:center;
       }
        .div-banner {
    width: 100%; /* Mantén el 100% del ancho */
   
  }
      .imagen-for-mobile{
    display:flex;
}

.imagen-for-web{
    display:none;
}

.sub-lista-caja {
    display: flex
;
    flex-direction: column;
    gap: 10px;
}
.caja-contacto{
    width:100%;
}
h1 {
    font-size: 30px !important;
}

.caja-imagen {
    width: 100px;
    height: 100px;
}

.caja-abajo span {
    color: #fff;
    font-size: 14px;
}

.div-about h1{
    line-height:3rem;
}
.caja-dirigido{
    flex-direction:column;
}

.caja-dirigido-imagen {
    width: 90px;
}

.caja-dirigido-texto p {
    
    font-size: 14px;
}
.objetivo-parrafo p {
    margin: 0px;
    font-size: 14px;
}
.imagen-pregunta {
    width: 100%;
}

.parrafo-dudas p {
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    margin: 40px 0px;
    text-align: center;
}
.caja-deduda p {
  
    font-size: 14px;
}
.caja-respuesta p {
   
    font-size: 14px;
}
  }