.marketing-container {
    position: relative;
    width: 100%;
    height: 500px;
    background: #0f172a;
    /* Dark professional navy */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-content {
    z-index: 2;
    color: white;
    text-align: center;
    font-family: sans-serif;
}

/* Base Icon Style */
.icon {
    position: absolute;
    font-size: 3rem;
    opacity: 0;
    /* Start invisible */
    filter: grayscale(30%);
    /* Makes them look more like background elements */
    animation: flyAndFade 8s linear infinite;
}

/* Keyframes for Flying + Fade */
@keyframes flyAndFade {
    0% {
        transform: translateY(100px) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 0.5;
        /* Fade into 50% transparency */
    }

    80% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(-200px) rotate(20deg);
        opacity: 0;
        /* Fade out at the end */
    }
}

/* Randomize positions and timing */
.icon-1 {
    left: 10%;
    animation-delay: 0s;
}

.icon-2 {
    left: 25%;
    animation-delay: 2s;
    font-size: 4rem;
}

.icon-3 {
    left: 60%;
    animation-delay: 1s;
}

.icon-4 {
    left: 80%;
    animation-delay: 4s;
}

.icon-5 {
    left: 45%;
    animation-delay: 5s;
    font-size: 2.5rem;
}