#hero {
    background-image: linear-gradient(220deg, #495BB2, #7A84CC);
    display: flex;
    color: #fff;
    height: 86vh;
    max-width:  100vw!important;
    position: relative;
    flex-direction: column;
    padding-left: -30px!important;
    padding-right: -15px!important;
    margin-left: 0!important;
    margin-right: 0!important;
    /* Ensure the content is in a column */
}

.hero-img {
    filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.3));
    /* Shadow coming from the top */
    position: relative;
    z-index: 1;
    /* Ensure comp.png is below pitagoras.png */
}

.hero-waves {
    display: block;
    margin-top: 60px;
    width: 100%;
    height: 60px;
    z-index: 5;
    bottom: 0px;
    position: absolute;
    left: 0;
}

.wave1 use {
    animation: move-forever1 10s linear infinite;
    animation-delay: -2s;
}

.wave2 use {
    animation: move-forever2 8s linear infinite;
    animation-delay: -2s;
}

.wave3 use {
    animation: move-forever3 6s linear infinite;
    animation-delay: -2s;
}

@keyframes move-forever1 {
    0% {
        transform: translate(85px, 0%);
    }

    100% {
        transform: translate(-90px, 0%);
    }
}

@keyframes move-forever2 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

@keyframes move-forever3 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

/* Elementos Flotantes */

.hero-animation-logos {
    z-index: 4;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    width: 90%;
    max-width: 1280px;
    top: 140px;
    margin: -140px auto 0;
}

.hero-animation-logos img.logos {

    width: 100px;
    position: relative;
    transform: scale(0.8);
}

.hero-animation-logos-pitagoras {
    -webkit-animation: pitagoras-float 2.9s 0s infinite ease-in-out;
    transform: scale(.9);
}

.hero-animation-logos-pitagoras img {
    top: 100px;
    left: -100px;
}

@keyframes pitagoras-float {
    from {
        transform: translate3D(0, 0, 0) scale(.88) rotate(0deg);
    }

    65% {
        transform: translate3D(4%, 8%, 0) scale(.95) rotate(5deg);
    }

    to {
        transform: translate3D(0, 0, 0) scale(.88) rotate(0deg);
    }
}

.hero-animation-logos-foto {
    -webkit-animation: foto-float 3s 0s infinite ease-in-out;
    transform: scale(.9);
}

.hero-animation-logos-foto img {
    top: -200px;
}

@keyframes foto-float {
    from {
        transform: translate3D(0, 0, 0) scale(.7) rotate(0deg);
    }

    65% {
        transform: translate3D(4%, 8%, 0) scale(.65) rotate(5deg);
    }

    to {
        transform: translate3D(0, 0, 0) scale(.7) rotate(0deg);
    }
}

.hero-animation-logos-lista {
    -webkit-animation: lista-float 3.1s 0s infinite ease-in-out;
    transform: scale(.9);
}

.hero-animation-logos-lista img {
    top: 0px;
}

@keyframes lista-float {
    from {
        transform: translate3D(0, 0, 0) scale(.78) rotate(0deg);
    }

    65% {
        transform: translate3D(4%, 8%, 0) scale(.85) rotate(5deg);
    }

    to {
        transform: translate3D(0, 0, 0) scale(.78) rotate(0deg);
    }
}

.hero-animation-logos-pintura {
    -webkit-animation: pintura-float 3.4s 0s infinite ease-in-out;
    transform: scale(.9);
}

.hero-animation-logos-pintura img {
    top: -250px;
    left: -50px;
}

@keyframes pintura-float {
    from {
        transform: translate3D(0, 0, 0) scale(.6) rotate(0deg);
    }

    65% {
        transform: translate3D(4%, 8%, 0) scale(.75) rotate(5deg);
    }

    to {
        transform: translate3D(0, 0, 0) scale(.6) rotate(0deg);
    }
}

.hero-animation-logos-musica {
    -webkit-animation: musica-float 3.2s 0s infinite ease-in-out;
    transform: scale(.9);
}

.hero-animation-logos-musica img {
    top: 200px;
    left: 50px;
}

@keyframes musica-float {
    from {
        transform: translate3D(0, 0, 0) scale(.58) rotate(0deg);
    }

    65% {
        transform: translate3D(4%, 8%, 0) scale(.65) rotate(5deg);
    }

    to {
        transform: translate3D(0, 0, 0) scale(.58) rotate(0deg);
    }
}