.hero-bg-logo {
    position: relative;
    overflow: hidden;
}

.hero-bg-logo::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background-image: var(--hero-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.06;
    transform: translate(-50%, -50%);
    animation: moverLogo 20s linear infinite;
    z-index: 0;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
}

@keyframes moverLogo {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    25% {
        transform: translate(-48%, -52%) rotate(3deg) scale(1.03);
    }

    50% {
        transform: translate(-50%, -48%) rotate(-3deg) scale(1.05);
    }

    75% {
        transform: translate(-52%, -50%) rotate(2deg) scale(1.02);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}