.waves-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; 
    overflow: hidden;
    line-height: 0;
}


.wave {
    position: absolute;
    width: 200%;
    height: 100%;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23fff" d="M0,229L48,197.3C96,171,192,117,288,106.7C384,96,480,128,576,138.7C672,149,768,139,864,128C960,117,1056,107,1152,138.7C1248,171,1344,245,1486,224L1440,325L15215,329L0,490Z"></path></svg>'); /* Usamos la forma de la ola como máscara */
    animation: moveWaves 10s infinite linear;
}


.wave-1 {
    background: linear-gradient(90deg, #460091, #001d47);
    bottom: -30%;
    z-index: -997;
    animation-duration: 50s;
}


.wave-2 {
    background: linear-gradient(15deg, #1900c0, #9700ff);
    bottom: 0%;
    z-index: -998;
    animation-duration: 30s;
}


.wave-3 {
    background: linear-gradient(175deg, #be00ff, #0006ff);
    bottom: 20%;
    z-index: -999;
    animation-duration: 15s;
}

@keyframes moveWaves {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-15%);
    }
    100% {
        transform: translateX(0);
    }
}

@media (max-width: 600px) {
    .waves-container {

        height: 90vh;
        width: 115vh;

    }
    

    .waves {
        min-height: 500px;
        min-width: 1000px;
    }
    
    .wave-1 {
        bottom: -49%;
    }

    .wave-2 {
        bottom: -39%;
    }

    .wave-3 {
        bottom: -29%;
    }
}

@media (max-width: 1025px) {
    .waves-container {

        height: 90vh;
        width: 125vh;

    }
    

    .waves {
        min-height: 500px;
        min-width: 1000px;
    }
    
    .wave-1 {
        bottom: -53%;
    }

    .wave-2 {
        background: linear-gradient(59deg, #1900c0, #9700ff);
        bottom: -39%;
    }

    .wave-3 {
        background: linear-gradient(25deg, #be00ff, #0006ff);
        bottom: -27%;
    }
}