@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
    --white:#FFF;
    --black:#000;
    --primaryColor:#F4C13C;
    --secondaryColor:#FFB200;
    --terciaryColor:#070E27;
    --title:#181B32;
    --title2:#050823;
    --light-gray:#F2ECFF;
    --gray-bg:#F9F7FE;
    --gray-input:#3F425E;
    --gray-btn:#8D8D9D;
    --gray-bg-2:#F8F9FA;
    --blue-border:#A994FF;
    --gray-text-btn:#C3CBD6;
    --green:#25D366;
    --poppins:"Poppins", sans-serif;
    --inter:"Inter", sans-serif;

}

body, *{
    font-family: var(--poppins);
}

.navbar{
    padding-left: 4rem;
    padding-right: 4rem;
}

.nav-item{
    padding-left: 1rem;
    padding-right: 1rem;
}

li.nav-item.nav-item-right{
    margin-left: auto;
    display: flex;
    align-items: center;
}

li.nav-item.nav-item-right i{
    color: var(--green);
}
.logo-navbar{
    width: 50px;
}

.navbar-brand{
    display: flex;
    gap: 10px;
    align-items: center;
}

.name-cu{
    font-size: 14px;
    font-weight: 700;
    font-family: var(--inter);
    margin: 0;
    padding: 0;
    line-height: 16px;
}
a.nav-link{
    font-weight: 600;
    font-size: 13px;
    color: var(--title);
}

.home-banner{
    background-image: url('../img/landing/banner-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: 97vh;
    display: grid;
    align-content: center;
    position: relative;
}

.title-home{
    font-weight: 700;
    color: var(--white);
    font-size: 60px;
}

.title-home span{
    color: var(--primaryColor);
}

.subtitle-home{
    font-weight: 700;
    font-size: 28px;
    color: var(--white);
    line-height: 32.2px;

}

.subtitle-home span{
    color: var(--secondaryColor);
}

.bienvenida{
    background: var(--gray-bg);
    padding: 5rem;
}

.bienvenida-text{
    display: grid;
    align-content: center;
}

.title-section{
    font-weight: 600;
    color: var(--title);
    font-size: 48px;
}

.title-section span{
    color: var(--primaryColor);
}
.subtitle-section{
    font-size: 28px;
    color: var(--black);
    font-weight: 400;
    line-height: 42px;
}

.subtitle-section span{
    font-weight: 700;
    color: var(--primaryColor);
    
}

.bienvenida .title-section{
    font-weight: 700;
    color: var(--black);
}

.img-bienvenida{
    width: 100%;
}

.btn.btn-primary{
    background: var(--primaryColor);
    color: var(--white);
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    padding: 0.8rem 2.5rem;
}

.item-oferta{
    display:flex ;
    gap: 1rem;
    align-items: center;
}

.item-oferta.licenciaturas{
    display: block;
}

.item-oferta.licenciaturas ul li{
    font-size: 16px;
    font-weight: 600;
    color: var(--title);
    margin-left: 2.5rem;
}

.num-oferta{
    padding: 5px 16px;
    border-radius: 50%;
    border: 1px solid var(--primaryColor);
    background: var(--light-gray);
    font-size: 20px;
    font-weight: 700;
    color: var(--primaryColor);
}

.name-oferta{
    font-size: 20px;
    font-weight: 600;
    color: var(--title);

}

.img-oferta-container{
    position: relative;
}
.img-oferta{
    position: relative;
    width: 100%;
}

.img-oferta-float{
    position: absolute;
}

.img-oferta-float.one{
    top: -50px;
    right: -50px;
}
.img-oferta-float.two{
    top: 50px;
    left: -30px;
}
.img-oferta-float.three{
    top: 250px;
    right: -30px;
}
.img-oferta-float.four{
    bottom: 100px;
    left: -50px;
}

.oferta-academica{
    padding: 5rem;
}

.oferta-container{
    margin-top: 5rem;
}

.servicios, .servicios-cucg {

    padding: 5rem;
    background: var(--gray-bg);
}

.card-servicios{
    border: 1px solid var(--blue-border);
    border-radius: 15px;
    padding: 1.5rem 1rem;
}
.card-servicios-cucg{
    border: 1px solid var(--blue-border);
    border-radius: 15px;
    padding-left: 1rem;
}

.card-title-servicios-cucg{
    font-size: 28px;
    font-weight: 600;
    color: var(--secondaryColor);
}

.img-servicios-cucg{
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    width: 100%;
}

.card-servicios-cucg .row.g-0{
    display: flex;
    align-items: center;
}
.img-servicios-container{
    display: flex;
    align-items: center;
}

.img-servicios{
    width: 100%;
}

.title-second{
    font-size: 28px;
    font-weight: 600;
    color: var(--title2);
}

.text-second{
    font-size: 16px;
    font-weight: 400;
    color: var(--title2);
}

.link{
    color: var(--primaryColor);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s all ease-in-out;
}

.link:hover{
    color: var(--secondaryColor);
}

.servicios-container{
    background: var(--gray-bg-2);
    padding: 1.5rem 1rem;
    border-radius: 10px;
    margin-top: 3rem;
}

.icon-servicio{
    margin-left: 1rem;
}

.title-servicio{
    font-size: 14px;
    color: var(--secondaryColor);
    font-weight: 700;
}

.cursos{
    padding: 5rem;
}

.img-curso{
    width: 100%;
    height: 115px;
    object-fit: cover;
    border-radius: 15px;
}

.card-curso{
    padding: 1rem 3rem;
    box-shadow: 0px 2px 8px 0px #0000001A;
    border: none;
    border-radius: 16px;
}

.curso-info-container{
    display: grid;
    align-items: center;
}

.title-curso{
    font-size: 18px;
    font-weight: 600;
}

.card-razones-container{
    display: flex;
    justify-content: center;
    margin-top: 5rem;
    margin-bottom: 1rem;
}

.porque-elegir{
    background: var(--gray-bg);
    padding-top: 8rem;
    padding-bottom: 8rem;
}
.card-razones{
    box-shadow: 0px 0px 12px 0px #0000001A;
    border: none;
    border-radius: 16px;
}
.razones-container{
    display: flex;
    align-items: center;
}
.img-razones{
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
}

.text-razones{
    padding-left: 4rem;
}

.title-section.small{
    font-size: 36px;
}

.razon-item{
    font-size: 16px;
    line-height: 24px;
    margin-left: 1rem;
}

.link02{
    font-size: 14px;
    color: var(--title);
    transition: 0.3s all ease-in-out;
}

.link02:hover{
    color: var(--primaryColor);
}


.convenios-container{
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 5rem;
}
.img-convenio{
    width: 180px;
}

.contactanos{
    padding-top: 10rem;
    padding-bottom: 10rem;
    background: var(--terciaryColor);
    color: var(--white);
}

.title-contactanos{
    font-size: 44px;
    font-weight: 600;
}

.text-contactanos{
    font-size: 16px;
    font-weight: 400;
}

.yellow-bg{
    font-weight:700 ;
    color: var(--secondaryColor);
}

.contactanos label{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contactanos .form-control{
    background: var(--gray-input);
    padding: 0.9rem;
    border: none;
    color: var(--white);
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus{
    box-shadow: none;
}

.contactanos .btn.btn-secondary{
    font-size: 18px;
    font-weight: 600;
    background: var(--gray-btn);
    border-radius: 5px;
    padding: 0.9rem;
    color: var(--gray-text-btn);
    margin-top: 2rem;
}

.img-contactanos{
    width: 100%;
}

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


footer{
    padding-top: 3rem;
}

footer .container .row{
    display: flex;
    align-items: center;
}

.logo-footer{
    width: 100%;
}
.name-logo-footer{
    font-family: var(--inter);
    font-weight: 700;
    font-size: 14px;
}

footer .container{
    max-width: 100%;
    padding: 2.5rem;
}
.text-footer{
    font-size: 14px;
}

.title-footer{
    font-size: 16px;
    font-weight: 600;
    color: var(--title);
}

.ul-footer{
    list-style: none;
    padding-left: 0;
    margin-top: 2rem;
}

.li-footer{
    font-size: 14px;
    color: var(--title);
    margin-bottom: 1rem;
}

.items-contact{
    display: flex;
    justify-content:space-evenly;
}

.menu-container{
    display: grid;
    justify-content: center;
}

.span-underline{
    color: var(--white) !important;
    text-decoration: underline;
}

.down-item{
    background: var(--white);
    border-radius: 50%;
    padding: 10px 15px;
    width: fit-content;
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translate(-50%, 0%);
}

main{
    overflow-x: hidden;
}

.carreras-container{
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.carrera-item{
    display: block;
    width: 17%;
}

.img-carrera{
    width: 100%;
    object-fit: cover;
}

.carrera-name{
    font-size: 14px;
    font-weight: 600;
}

.carreras{
    padding: 5rem 1rem;
}

@media(max-width:767px){
    .servicios-cucg{
        padding: 5rem 0.5rem;
    }
    .card-servicios-cucg{
        padding-left: 0;
    }
    .carreras-container{
        flex-wrap: wrap;
    }
    .carrera-item{
        width: 65%;
    }
}

@media(min-width:768px) and (max-width:1023px){
    .carreras-container{
        flex-wrap: wrap;
    }
    .carrera-item{
        width: 30%;
    }
    .servicios-cucg{
        padding: 5rem 2rem;
    }
    .card-servicios-cucg{
        padding-left: 0;
    }
}