*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    margin: 0 auto;
    position: relative;
    background-position: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    padding: 120px 0px 0;
}


.slider-box{
    width: 1800px;
    margin: 50px auto 0;
    overflow: hidden;
}


.slider-box ul{
    display: flex; 
    padding: 0;
    width: 400%;
    animation: slide 15s infinite alternate ease-in-out;
}


.slider-box li{
    width: 100%;
    list-style: none;
    position: relative;
}

.slider-box img{
    width: 1800px;
}

@keyframes slide{
    0% {margin-left: 0;}
    20% {margin-left: 0;}

    25% {margin-left: -100%;}
    45% {margin-left: -100%;}

    50% {margin-left: -200%;}
    70% {margin-left: -200%;}

    75% {margin-left: -300%;}
    100% {margin-left: -300%;}
}

.contenedor-historia{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;  
}

.historia{
    background-color: white;
    border-radius: 10px;
    width: 1022px;
    height: 400px;
    position: relative;
}

div h1{
    color: rgb(109, 106, 108);
}

.texto-historia{
    width: 90%;
    font-size: 25px;
    width: fit-content;
    height: fit-content;
    margin: 5%;
    color: rgb(109, 106, 108);
}

.titulo-historia{
    font-size: 30px;
    color: rgb(26, 23, 25);
}

.historia::after{
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    background: #0575E6; 
    background: -webkit-linear-gradient(to right, #021B79, #0575E6); 
    background: linear-gradient(to right, #021B79, #0575E6);

    width: 100%;
    height: 100%;
    filter: blur(10px);
    z-index: -1;
}

.titulo-cualidades{
    font-size: 50px;
}

.contenedor-cualidades{
    display: flex;
    display: grid;
    justify-content: center;
}

.cualidades1 {
    display: grid;
    display: flex;
    gap: 20px;
    padding: 20px;
}

.cualidades2 {
    display: grid;
    display: flex;
    gap: 20px;
    padding: 20px;
}



.titulo-confiable, .titulo-transparente, .titulo-etica, 
.titulo-profecional, .titulo-certificada, .titulo-especializada {
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
}


.confiable{
    background-color: white;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    position: relative;
}

.titulo-confiable{
    font-size: 27px;
    color: rgb(26, 23, 25);
}

.texto-confiable{
    width: 90%;
    font-size: 22px;
    width: fit-content;
    height: fit-content;
    padding: 9%;
    color: rgb(109, 106, 108);
}

.confiable::after{
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';/* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5); 
    background: linear-gradient(to right, #ACB6E5, #74ebd5); 

    width: 100%;
    height: 100%;
    filter: blur(10px);
    z-index: -1;
}

.transparente{
    background-color: white;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    position: relative;
}

.titulo-transparente{
    font-size: 27px;
    color: rgb(26, 23, 25);
}

.texto-transparente{
    width: 90%;
    font-size: 22px;
    width: fit-content;
    height: fit-content;
    padding: 9%;
    color: rgb(109, 106, 108);
}

.transparente::after{
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    background: #74ebd5; 
    background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);  
    background: linear-gradient(to right, #ACB6E5, #74ebd5); 

    width: 100%;
    height: 100%;
    filter: blur(10px);
    z-index: -1;
}

.etica{
    background-color: white;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    position: relative;
}

.titulo-etica{
    font-size: 27px;
    color: rgb(26, 23, 25);
}

.texto-etica{
    width: 90%;
    font-size: 22px;
    width: fit-content;
    height: fit-content;
    padding: 9%;
    color: rgb(109, 106, 108);
}

.etica::after{
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    background: #74ebd5; 
    background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5); 
    background: linear-gradient(to right, #ACB6E5, #74ebd5); 
    width: 100%;
    height: 100%;
    filter: blur(10px);
    z-index: -1;
}

.profecional{
    background-color: white;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    position: relative;
}

.titulo-profecional{
    font-size: 27px;
    color: rgb(26, 23, 25);
}

.texto-profecional{
    width: 90%;
    font-size: 22px;
    width: fit-content;
    height: fit-content;
    padding: 9%;
    color: rgb(109, 106, 108);
}

.profecional::after{
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    background: #74ebd5;  
    background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5); 
    background: linear-gradient(to right, #ACB6E5, #74ebd5);

    width: 100%;
    height: 100%;
    filter: blur(10px);
    z-index: -1;
}

.certificada{
    background-color: white;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    position: relative;
}

.titulo-certificada{
    font-size: 27px;
    color: rgb(26, 23, 25);
}

.texto-certificada{
    width: 90%;
    font-size: 22px;
    width: fit-content;
    height: fit-content;
    padding: 9%;
    color: rgb(109, 106, 108);
}

.certificada::after{
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    background: #74ebd5; 
    background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);  
    background: linear-gradient(to right, #ACB6E5, #74ebd5); 

    width: 100%;
    height: 100%;
    filter: blur(10px);
    z-index: -1;
}

.especializada{
    background-color: white;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    position: relative;
}

.titulo-especializada{
    font-size: 27px;
    color: rgb(26, 23, 25);
}

.texto-especializada{
    width: 90%;
    font-size: 22px;
    width: fit-content;
    height: fit-content;
    padding: 9%;
    color: rgb(109, 106, 108);
}

.especializada::after{
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    background: #74ebd5;  
    background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);  
    background: linear-gradient(to right, #ACB6E5, #74ebd5); 

    width: 100%;
    height: 100%;
    filter: blur(10px);
    z-index: -1;
}

.contenedor-mision{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;  
}

.mision{
    background-color: white;
    border-radius: 10px;
    width: 1022px;
    height: 400px;
    position: relative;
}

.texto-mision{
    width: 90%;
    font-size: 25px;
    width: fit-content;
    height: fit-content;
    margin: 5%;
    color: rgb(109, 106, 108);
}

.titulo-mision{
    font-size: 30px;
    color: rgb(26, 23, 25);
}

.mision::after{
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    background: #000046; 
    background: -webkit-linear-gradient(to right, #1CB5E0, #000046);  
    background: linear-gradient(to right, #1CB5E0, #000046); 
 

    width: 100%;
    height: 100%;
    filter: blur(10px);
    z-index: -1;
}

.contenedor-vision{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;  
}

.vision{
    background-color: white;
    border-radius: 10px;
    width: 1022px;
    height: 400px;
    position: relative;
}

.texto-vision{
    width: 90%;
    font-size: 25px;
    width: fit-content;
    height: fit-content;
    margin: 5%;
    color: rgb(109, 106, 108);
}

.titulo-vision{
    font-size: 30px;
    color: rgb(26, 23, 25);
}

.vision::after{
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    background: #000046;  
    background: -webkit-linear-gradient(to right, #1CB5E0, #000046); 
    background: linear-gradient(to right, #1CB5E0, #000046); 
 

    width: 100%;
    height: 100%;
    filter: blur(10px);
    z-index: -1;
}
