html{
    scroll-behavior: smooth;
}

body{
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;    
    overflow-x: hidden;
    background: linear-gradient(90deg, rgb(22, 45, 71), rgb(57, 114, 179));
}

h1{
    font-size: 2em;
    background: linear-gradient(90deg, rgb(57, 114, 179), rgb(22, 45, 71));
    -webkit-background-clip: text;
    color: transparent;
}

h2{
    font-size: 2.5em;
    background: linear-gradient(90deg, rgb(161, 183, 209), rgb(57, 114, 180));
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
}
h3{
    font-size: 2em;
    color: rgb(102, 169, 245);
    padding: 5px;
    margin: 0;
    text-align: center;
}
h4{font-size: 1.2em;}

li{
    border-top: 2px solid rgb(25, 120, 230);
    margin-bottom: 10px;
    font-size: 1.2em;
}
a{
    font-size: 1.1em;
    color: black;
    text-decoration: none;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgb(245, 245, 245);
    align-items: center;
}

header .titulo{
    display: flex;
    align-items: center;
}

header .logo{
    width: 50px;
    height: 50px;
    margin: 10px;
    background-image: url('imagenes/imagenes-decoracion/logo-100x100.png');
    background-size: cover;
}

header nav{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
    height: 1vh;
    border-radius: 15px;
    margin: 10px 0;
}

header a::after{
    display: block;
    content: '';
    height: 0.5vh;
    width: 0;
    border-radius: 20px;
    background-color: rgb(57, 114, 179);
    transform: translateY(-50%);
    transition: width 0.2s ease;
}

header a:hover{
    color: rgb(57, 114, 179);
    font-weight: bold;
}

header a:hover::after{
    width: 100%;
}

#section-clientes{
    background: linear-gradient(90deg, rgb(57, 114, 179), rgb(22, 45, 71));
    height: max-content;
}

#section-clientes h2{
    color: white;
    text-align: center;
    margin-top: 0;
    padding: 0 40px;
}

#section-clientes .container{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#section-clientes .container ul{
    position: relative;
    display: flex;
    width: max-content;
    overflow: hidden;
    gap: 50px;
}

#section-clientes .container ul:first-child{
    animation: spin 15s linear infinite;
}

#section-clientes .container ul:nth-child(2){
    animation: spin 25s linear infinite;
}

#section-clientes .container ul:nth-child(3){
    animation: spin 30s linear infinite;
}

#section-clientes .container ul:nth-child(4){
    animation: spin 18s linear infinite;
}

#section-clientes .container ul img{
    position: relative;
    width: 100px;
    height: 100px;
    object-fit: contain;
    background-color: white;
    border-radius: 20px;
}

@keyframes spin{
    to{ translate: -100%;}
    from{translate: 100%;}
}

#servicio-gestion{
    background-image: linear-gradient(90deg,
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.6))
    ,url('imagenes/imagenes-decoracion/gestion.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#servicio-gestion h2{
    margin-bottom: 0;
}

.carta{
    padding: 20px;
    margin: 40px;
    background-color: white;
    border-radius: 20px;
}

#servicio-gestion .carta ul{
    padding: 10px 20px; 
    margin: 0;
}

#servicio-juridico{
    background-image: linear-gradient(90deg, rgb(0,0,0,0.5), rgb(0,0,0,0.5)),url('imagenes/imagenes-decoracion/juridica.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px 0;
}

#servicio-juridico h2,
#servicio-empresarial h2{
    font-size: 2em;
}

#servicio-juridico ul{
    padding: 20px;
    font-size: 1.3em;
}

#servicio-empresarial{
    background-image: linear-gradient(90deg, rgb(0,0,0,0.6),rgb(0,0,0,0.6)), url('imagenes/imagenes-decoracion/empresarial.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
}

#servicio-empresarial h3{
    text-align: center;
}

#servicio-empresarial .carta{
    padding: 10px;
}

#servicio-empresarial ul{
    padding: 10px;
}

#servicio-formacion{
    background-image: linear-gradient(90deg,  rgb(0,0,0,0.6), rgb(0,0,0,0.6)),  url('imagenes/imagenes-decoracion/formacion.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
}

#servicio-formacion ul{
    padding: 10px;
}

#section-nosotros{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 300px;
}

#section-nosotros *{
    position: relative;
    z-index: 2;
}

#section-nosotros section{
    padding: 40px 0;
    margin-bottom: 50px;
    border-radius: 15px;
    background-color: rgb(46, 74, 105);
    box-shadow: 2px 2px 20px rgb(46, 74, 105);
    width: 80%;
    color: white;
}

#section-nosotros .img-valores{
    background-image: linear-gradient(90deg, rgb(0,0,0,0.6), rgb(0,0,0,0.6)), url('imagenes/imagenes-decoracion/manos.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100px;
    position: absolute;
    z-index: 1;
}

#section-nosotros .img-empresa{
    background-image: linear-gradient(90deg, rgb(0,0,0,0.6), rgb(0,0,0,0.6)), url('imagenes/imagenes-decoracion/mundo.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100px;
    position: absolute;
    z-index: 1;
}

#section-nosotros .img-oferta{
    background-image: linear-gradient(90deg, rgb(0,0,0,0.6), rgb(0,0,0,0.6)), url('imagenes/imagenes-decoracion/preferir.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100px;
    position: absolute;
    z-index: 1;
}

#section-nosotros section p{
    text-align: justify;
    padding: 10px;
}

#section-oferta h2{
    font-size: 1.5em;
    margin-bottom: 50px;
}

#section-convenios{
    background-color: rgba(0, 0, 0, 0.655);
    padding: 50px 0px;
    color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 20px rgb(0,0,0,0.6);
    margin-bottom: 100px;
}

#section-convenios p{
    text-align: center;
}

#section-convenios .imagenes{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

#section-convenios .imagenes img{
    object-fit: contain;
    object-position: center;
    background-color: white;
    width: 100px;
    height: 100px;
    border-radius: 20px;
}

footer{
    background-color: rgb(0,0,0,0.6);
    color: gray;
    display: flex;
    flex-direction: column;
}

footer li{
    border: none;
}

@media (min-width: 700px){
    a{
        font-size: 1.5em;
    }

    li{
        font-size: 1.5em;
    }

    p{
        font-size: 1.5em;
    }

    header {
        flex-direction: row;
    }

    header nav{
        justify-content: end;
        padding-right: 30px;
    }

    section{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #section-clientes .container ul:first-child{
        animation: spin 15s linear infinite;
    }

    #section-clientes .container ul:nth-child(2){
        animation: spin 25s linear infinite;
    }

    #section-clientes .container ul:nth-child(3){
        animation: spin 30s linear infinite;
    }

    #section-clientes .container ul:nth-child(4){
        animation: spin 18s linear infinite;
    }

    #section-clientes .container ul img{
        width: 130px;
        height: 130px;
    }

    #servicio-gestion .container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .carta{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40%;
    }

    #section-nosotros{
        align-items: center;
        margin-top: 100px;
    }

    #section-convenios{
        display: flex;
        flex-direction: column;
    }

    #section-convenios .imagenes img{
        width: 150px;
        height: 150px;
    }
}

@media (min-width: 1100px){
    

    #section-nosotros{
        flex-direction: row;
        justify-content: space-evenly;
    }

    #section-nosotros section{
        width: 32%;
        height: 50%;
    }

    #section-nosotros p{font-size: 1.5em;}

    footer .contacto{
        display: flex;
        gap: 20px;
    }

    footer .group{
        display: flex;
        flex-direction: column;
    }

}