.hero {
    position: relative; /* Ensure hero section is a positioning context */
    overflow: hidden; /* Hide parts of images that extend beyond the hero section */
}

.hero-background-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire hero area, may crop */
    z-index: 0; /* Place behind hero content, but above parent's background */
}

/* Style for the first image (blobs) */
#hero-blobs-1 {
    opacity: 0.9;
    width: calc(100% + 600px);
    height: calc(100% + 400px);
    left: -480px;
    top: -350px;
    animation: moveBlob1 10s infinite alternate ease-in-out;
}

/* Style for the second blob image */
#hero-blobs-2 {
    opacity: 0.9;
    width: calc(100% + 600px);
    height: calc(100% + 810px);
    left: 0px;
    top: -155px;
    animation: moveBlob2 15s infinite alternate ease-in-out;
}

/* Style for the second image (network) */
#hero-network {
    opacity: 0.8;
    animation: subtlePulse 5s infinite alternate ease-in-out;
}

@keyframes subtlePulse {
    0% {
        transform: scale(0.99);
        opacity: 0.5;
    }
    20% {
        transform: scale(0.994);
        opacity: 0.2;
    }
    96% {
        transform: scale(1.07);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.07);
        opacity: 0.8;
    }
}

@keyframes moveBlob1 {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(500px, -100px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes moveBlob2 {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(-300px, -405px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}