@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Source+Sans+3:wght@200;400;700&display=swap');
/* Paleta de colores
#004BB9 -- Azul
#F9D007 --- Amarillo
#4DAD33 --- Verde

Cambiar el inicio de vision y mision a verde
*/
html, body {
  margin: 0;
  padding: 0;
  background: #fff;
} 
/* Estilos de Barra de navegación */
.navbar-nav {
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    margin: 0%;
}
.nav-item .nav-link {
    font-weight: bold;
    color: #000000;
    font-family: century Gothic ;
}
.space{
    margin: 20px 20px 0px 20px;
}
.color:hover {
    color:  #004BB9;
} 
/*Estilo del Banner*/
.space_banner{
    width: 100%;
    height: 85px;
}
.main-image {
    position: relative;
    width: 100%;
    /* max-height: 500px; */
    overflow: hidden;
    margin: 0%;
} 

.main-image img{
    width: 100%;
    /* max-height: 500px; */
    display: block;
}

.buttons_container{
    position: absolute;
    top: 42%; /* Ajusta según la distancia que desees desde la parte inferior */
    left: 50%; /* Centra horizontalmente */
    transform: translateX(-50%); /* Centra horizontalmente */
    text-align: center;
    z-index: 1; /* Asegura que esté sobre la imagen */
    width: 100%; /* Opcional: para que los botones ocupen todo el ancho */

}

.buttons_container a {
    margin: 0 10px; /* Espacio entre los botones */
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: #ffffff;
    padding: 10px 24px;
    background: #f1f1f100;
    text-decoration: none;
    border-radius: 50px;
    border: 3px solid #ffffff;
    transition: .6s;

}

.h1-cont{
    font-family: "Caveat", cursive;
    margin: 0;
    font-size: calc(1.5em + 2vw); /* Tamaño responsivo */
    font-weight: 500; /* Grosor de la fuente */
    color: #ffff;
    text-shadow: 6px 8px 10px rgba(0,0,0,1);
}

.cen{
    
    margin: 30px;
    font-size: 20px;
    color: #ffff;
    font-size: 20px;
    font-weight: 500;
}


/* /* .container {
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    font-weight: 700;
    text-transform: none;
    margin: 0%;
}
.container .h1-cont {
    margin: 0;
    font-size: 44px;
    text-shadow: 6px 8px 10px rgba(0,0,0,0.6);
    font-weight: 1000;
} */

@media (max-width: 420px){
    .h1-cont{
        font-family: "Caveat", cursive;;
        font-size: calc(1em + 2vw);
        font-weight: 500;
    }
    .cen{
        font-size: 14px;
    }
}
@media (max-width: 550px) {
    .buttons_container {
        top: 10%; /* Ajusta según la distancia que desees desde la parte inferior */
    }
    
    .cen {
        margin: 5px 10px 5px 10px;
    }
}


@media (max-width: 690px){
    .buttons_container a{
        display: none;
    }
}

@media (max-width: 737px){
    .buttons_container{
        top: 20%;
    }
}





.button {
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: #ffffff;
    padding: 10px 24px;
    background: #f1f1f100;
    text-decoration: none;
    border-radius: 50px;
    border: 3px solid #ffffff;
    transition: .6s;
}

.button:hover {
    background: #ffffff; ;
    opacity: 1;
    color: #2b2a2afa;
} 
.down{
    position: absolute;
    margin: 70px 0px 0px 0px;
}

/* Sección de Bienvenida mision y vision*/
.responsive-two-column-grid {
    display:block;
}
.responsive-two-column-grid > * {
    padding:1rem;
}
.div-bienvenido{
 background-color: #004BB9;
 justify-content: center;
}
.div-img{
    display: flex; 
    justify-content: center; 
    align-items: center;
    margin: 0%;
    height: 100%;
    text-align: center;
}   
@media (min-width:850px) {
    .responsive-two-column-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.titulo{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: #ffffff;
    font-weight: 700;
    margin: 25px 35px 15px 35px;
}

/*Mision y vision*/
.titulosub{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: #ffffff;
    font-weight: 700;
    margin: 15px 30px 15px 20px;
    text-align: center;
}

.texto{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: #ffffff;
    font-weight: 500;
    margin: 15px 30px 20px 30px;
    text-align: center;
}
/* Cards Slider del Personal Educativo */
.card-space{
    margin: 8px 10px 8px 10px;
    justify-items: center;
    text-align: center;
    align-content: center;
}

@media(max-width: 575px){
    .card-space{
        margin: 5px 100px 5px 100px;
    }
}

.img-profile{
    margin: 20px 10px 10px 10px;
    border-radius: 200px;
    height: 140px;
    width: 140px;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    border: 7px solid  #F9D007;
    outline: 8px solid #4DAD33;
    background-size: 100% auto;
    text-align: center;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
    font-size: 3.5rem;
    }
}
.card {
    align-items: center;
    border: 0;
    width: 12rem;
}
.card-title {
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    font-weight: 700;
    color: black;
    text-align: center;
}
.text-body-secondary {
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 700;
    color: #505050;
    text-align: center;
}
.card-text {
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    font-weight: 500;
    color: black;
    text-align: center;
} 

/* Carrusel del Personal Educativo */
.div-carrusel{
    background-color: #FFFFFF;
}
.h1-event{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: #000000;
    text-align: center;
    margin: 20px 20px 20px 20px;
    font-weight: 700;
    border-bottom: 5px solid #004BB9;
    padding-bottom: 10px! important;
}
.carrusel {
    display: flex;
    gap: 10px;
    justify-content: center;
} 
.carrusel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 1030px;
    scroll-behavior: smooth;
} 
.carrusel-fotos {
    display: flex;
    gap: 10px;
    overflow: auto;
} 
.carrusel-fotos img {
    width: 300px;
    height: 200px;
    object-fit: contain;
}
.carrusel-menu {
    display: none;
}
@media screen and (min-width: 500px) {
    .carrusel-fotos {
        overflow: hidden;
    }
    .carrusel-fotos img {
        width: 500px;
        height: 400px;
    }
    .carrusel-menu {
        display: block;
    }
    .carrusel-menu img {
        box-sizing: border-box;
        width: 50px;
        height: 40px;
        border: 10px solid #FFFFFF;
    }
    .carrusel-menu img:hover {
        border: none;
    }
}

/*Carrusel de Nuestros Alumnos y Egresados*/

.card-space2{
    margin: 0px 10px 0px 10px;/*Margen de la tarjeta*/
    justify-items: center;
    text-align: center;
    align-content: center;
}

/* @media(max-width: 575px){
    .card-space2{
        margin: 5px 110px 5px 110px;
    }
} */

.titulo-info2 {
    background-color: #F9D007;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    font-family: century Gothic;
    font-weight: bold;
    color: #ffffff;
    padding-top: 10px;
    scroll-margin-top: 85px;/*Cambio por el boton de conocenos y contacto*/
}
.img-egresados{
    margin: 10px 10px 10px 10px;
    border-radius: 20px;
    height: 300px;
    width: 300px;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 20%;
    /* border: 7px solid  #F9D007;
    outline: 8px solid #4DAD33; */
    background-size: 100% auto;
    text-align: center;
}


.card-title2 {
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    font-weight: 700;
    color: #e9e9ef;
    text-align: center;
}

.card-text2 {
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    font-weight: 500;
    color: #ffffff;
    text-align: center;
} 


/* Sección Quienes Somos */
.box-somos{
    display: flex;
    flex-flow: wrap;
    justify-content: center;
  }
.box-somos img{
    max-width: 350px;
    padding: 1rem;
    border-radius: 50px;
  }
.h1-somos{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 700;
    color: #000000;
    text-align: center;
}

/* Información */
.div-info {
    background-color: #F6D125; 
}
.titulo-info {
     margin-top: 10px;
     text-align: center;
     font-family: century Gothic;
     font-weight: bold;
     color: #004BB9;
     scroll-margin-top: 85px;/*Cambio por el boton de conocenos y contacto*/
}
.p-info {
     font-family: century Gothic;
     text-align: justify;
     font-size: 90%;
}
.info {
    display:block;
    margin: 0% 7% 0% 7%;
}
.info > * {
    padding:1rem;
}
@media (min-width:768px) {
    .info {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}
/* Egresados se comento el codigo enlazado a estos estilos*/
.div-eg {
    background-color: #004BB9; 
    color: #fff;
}
.titulo-eg {
    text-align: center;
    font-family: century Gothic;
    font-weight: bold;
    color: #fff;
}
.p-eg {
    text-align: justify;
    font-family: Century Gothic;
    margin: 0px 7% 0px 7%;
    color: #fff;
}
.gallery{
    display: flex;
    margin: 0px 7% 0px 7%;
}
.gallery .image{
    display: flex;
}
.gallery .image .img-eg1{
    width: 90%;
    vertical-align: middle;
    transition: all 0.3s ease;
    border-radius:10px;
}
.gallery .image:hover .img-eg1{
    transform: scale(1.1);
}
.lightbox {
    display: none; 
    position: fixed; 
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.7);
}
.lightbox .img-eg { 
    max-width: 65%;
    max-height: 65%;
    text-align: center;
    margin-top: 10%;
}
.lightbox:target { 
    outline: none;
    display: block;
}
.exit { 
    position: fixed;
    top: 2%;
    right: 7%;
}

/*          Quienes somos bloques nosotros_colección     */
/* .nosotros_two_column1{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
}

.nosotros_two_column1 > div {
    flex: 1;
    box-sizing: border-box;
}

.info1 {
    display: flex;
    comentario background-color: #4DAD33;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 1rem;
}

.titulo_info1{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: #ffffff;
    font-weight: 700;
}

.texto_info1{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: #ffffff;
    font-weight: 500;
}

.nosotros_img{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0px 20px 0px;
}

.img_nosotros {
    max-width: 80%;
    height: auto;
    border-radius: 20px;
}

@media (max-width: 800px) {
    .nosotros_two_column1 {
        flex-direction: column; Los elementos hijos se colocan en columna 
        align-items: center;  Centrar los elementos en la columna 
    }

    .nosotros_two_column1 > div {
        width: 100%;  Cada div ocupa el ancho completo  
    }
    
    .nosotros_img{
        padding: 20px 0px 20px 0px;
    }
} */


/* Pie de Página */
.div-footer{
    background-color: #4DAD33;
}
.h1-contact{
    text-align: center;
    font-family: century Gothic;
    font-weight: bold;
    color: #FFFFFF;
    padding: 15px 0px 15px 0px;
    scroll-margin-top: 100px;
}
/* container */
.responsive-three-columns {
    display:flex;
    flex-wrap:wrap;
}
.div-map{
    text-align: center;
    background-color: #4DAD33;
}
.form-design{
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: 20px;
}
.div-social{
    background-color: #4DAD33;
    text-align: left;
}
.div-contact{
    background-color: #4DAD33;
}
/* columns */
.responsive-three-columns > * {
    width:100%;
    padding:1rem;
}
/* tablet breakpoint */
  @media (min-width:768px) {
    .responsive-three-columns > * {
        width:calc(100% / 3);
    }
  }
.h2-footer{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 600;
    color: #ffffff;
    text-align: left;
    font-size: 1.2em;
    margin: 0px 0px 15px 0px;
}
.h1-footer{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    font-size: 3em;
    margin: 0px 0px 15px 0px;
}
.ul-reds {
    list-style-type: none;
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: #FFFFFF;
    font-weight: 600;
}
.link{
    color: #ffffff;
}
/*Oferta Educativa_Inscripciones*/
.div-ins {
    background-color: #F6D125; 
}
.titulo-ins {
    text-align: center;
    font-family: century Gothic;
    font-weight: bold;
    color: #000000;
}
.ins {
    display:block;
    margin: 0% 7% 0% 7%;
}
.ins > * {
    padding:1rem;
}
@media (min-width:768px) {
    .ins {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}
/* Oferta Educativa_ Cursos */

.h1-cursos{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    margin-top: 88px;
    font-weight: 700;
    color: #004BB9;
    text-align: center;
}

.box-cursos{
    display: flex;
    justify-items: center;
    justify-content: center;
    /* gap: 1rem; Ajusta espacio entre elementos */
    flex-wrap: wrap;
}

.box-cursos img{
    max-width: 350px;
    padding: 0.8rem;
    border-radius: 50px;
}

.img-zoom{
    transition: transform .2s;
}

.img-zoom:hover{
    transform: scale(0.9);
}



/* .box-cursos{
    display: flex;
    flex-flow: wrap;
    justify-content: center;
  }
.box-cursos img{
    max-width: 350px;
    padding: 0.8rem;
    border-radius: 50px;
}
.h1-cursos{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    margin-top: 88px;
    font-weight: 700;
    color: #004BB9;
    text-align: center;
}
.fila::after {
    content: "";
    clear: both;
    display: table;
    align-content: center;
}
.img-zoom {
    transition: transform .2s; 
}
.img-zoom:hover {
    transform: scale(0.9); 
} */


/*     Estilos curso_info    */

.curso_container{
    margin-top: 90px;                                                                                                                                                   
    margin: 90px auto 70px;
    width: 95%;
    display: block;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 20px;
}

@media (min-width: 800px){
    .curso_container{
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        margin: 90px auto 70px;
        width: 95%;  
    }

    .curso_img{
        padding-left: 0px;
    }
    
}

.curso_datos{
    padding: 1.5rem;
}

.curso_datos hr{
    opacity: 0.9;
    border: none;
    height: 3px;
}

.titulo_info{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    text-align: center;
    font-weight: 700;
}

.curso_img{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 10px;
    padding-left: 10px;
}

.curso_img img{
    width: 100%;
    height: auto;
    border-radius: 50px;
}

.infop_button{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.info_button {
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: #ffffff;
    padding: 5px 5px;
    background: #17b111;
    text-decoration: none;
    border-radius: 50px;
    border: 3px solid #17b111;
    transition: .6s;
    display: flex;
    align-items: center;
    width: auto;
    max-width: max-content;
}

.info_button:hover {
    background: #25D366;
    opacity: 1;
    color: #ffffff;
} 



.img_icon{
    height: 22px;
}

/* Oferta Educativa_Horario */
.hor-text1 {
    text-align: center;
    font-family: Century Gothic;
    font-weight: bold;
}
.hor-text2 {
    text-align: center;
    font-family: Century Gothic;
    font-weight: bold;
    color: #004BB9;
}
.hor-text3 {
    text-align: center;
    font-family: Century Gothic;
}
.hor-titulo {
    text-align: left;
    font-family: Century Gothic;
    font-weight: bold;
    color: #000000;
}
.horario {
    margin: 0% 10% 0% 10%;
}


/* Horarios_Calendario */
.calendar{
    margin: 0 10% 0 10%;
}
.h1-calendar{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 700;
    color: #000000;
    text-align: center;
}
/* Salones */
.salones{
    background-color: #F9D007;
}
.box-salones{
    display: flex;
    flex-flow: wrap;
    justify-content: center;
  }
.box-salones img{
    max-width: 350px;
    padding: 0.8rem;
    border-radius: 50px;
}
.h1-salones{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 800;
    color: #000000;
    text-align: center;
}
.p-salones{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    text-align: center;
    margin: 0 5% 0 5%;
}
.name-room{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    text-align: center;
    font-weight: 800;
    position: absolute;
}
.fila::after {
    content: "";
    clear: both;
    display: table;
}

.form-oe {
    margin: 0 10% 0 10%;
}

.p-oe{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color:#004BB9;
}
.text-oe{
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}