.trayectoria{
    background-color: rgba(130, 252, 238, 0.5);
    width: 100%;
}

.trayectoria-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.trayectoria-texto{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.trayectoria-texto h2{
    color: #FA54AE;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}

.trayectoria-texto p {
    color: #180270;
    font-weight: 400;
}


.trayectoria-imagenes{
    flex: 1;
    display: grid;
   
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    justify-items: center;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 3 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 3 / 3 / 4; }
.div6 { grid-area: 3 / 1 / 4 / 4; }

.div1 img{
    width: 100%;
    max-width: 110px;
    animation-name: mover-nubes;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transition-timing-function: ease;
    animation-direction: alternate;
}

.div2 img{
    width: 100%;
    max-width: 120px;
    animation-name: mover-sol;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transition-timing-function: ease;
    animation-direction: alternate;
}

.div3 img{
     width: 100%;
    max-width: 150px;
    animation-name: mover-nubes;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transition-timing-function: ease;
    animation-direction: alternate;
}

.div4 img{
     width: 100%;
    max-width: 65px;
    animation-name: mover-nubes;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transition-timing-function: ease;
    animation-direction: alternate;
}

.div5 img{
     width: 100%;
    max-width: 65px;
    animation-name: mover-nubes;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transition-timing-function: ease;
    animation-direction: alternate;
}

.div6 img{
     width: 100%;
    max-width: 450px;
}

@keyframes mover-sol {
    from {
        transform: translateY(0px);
    }

    to{
        transform: translateY(20px)
    };
}

@keyframes mover-nubes {
    from {
        transform: translateX(0px);
    }

    to{
        transform: translateX(20px)
    };
}



@media screen and (min-width: 1000px) {
    
    .trayectoria-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 3rem;
    }

    .trayectoria-imagenes{
        flex: 1;
        display: grid;
       
        grid-column-gap: 50px;
        grid-row-gap: 50px;
        justify-items: center;
    }

    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 1 / 2 / 3 / 3; }
    .div3 { grid-area: 1 / 3 / 2 / 4; }
    .div4 { grid-area: 2 / 1 / 3 / 2; }
    .div5 { grid-area: 2 / 3 / 3 / 4; }
    .div6 { grid-area: 3 / 1 / 4 / 4; }

    .div1 img{
        width: 110px;
    }

    .div2 img{
        width: 120px;
    }

    .div3 img{
        width: 150px;
    }

    .div4 img{
        width: 65px;
    }

    .div5 img{
        width: 65px;
    }

    .div6 img{
     width: 450px;
    }


    .trayectoria-texto{
        flex: 1;
    }
    
}