* {
    margin: 0;
    padding: 0;
}

section {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(#0d49a3, #428cfa);
    overflow: hidden;
}

section .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    opacity: 0.9;
    background: url(../Waves-Background/wave.png);
    animation: animate 8s linear infinite;
}

section .wave::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    background: url(../Waves-Background/wave.png);
    top: 0;
    left: 0;
    opacity: 0.5;
    animation: animate-reverse 8s linear infinite;
}

section .wave::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    background: url(../Waves-Background/wave.png);
    top: 0;
    left: 0;
    opacity: 0.7;
    animation: animate 16s linear infinite;
    animation-delay: -5s;
}

@keyframes animate {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 1360px;
    }
}

@keyframes animate-reverse {
    0% {
        background-position-x: 1360px;
    }

    100% {
        background-position-x: 0;
    }
}