.s-banner {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
/* Individual animations */
.box1 {
    animation-name: slideInLeft;
    animation-delay: 0.3s;
}
.box2 {
    animation-name: slideInRight;
    animation-delay: 0.6s;
}
.box3 {
    animation-name: slideInTop;
    animation-delay: 0.9s;
}
.box4 {
    animation-name: slideInBottom;
    animation-delay: 1.2s;
}
.box5 {
    animation-name: slideInLeft;
    animation-delay: 1.5s;
}
.box6 {
    animation-name: slideInRight;
    animation-delay: 1.8s;
}

/* Keyframes for animations */
@keyframes slideInLeft {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInTop {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInBottom {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}