.ew-floating-shapes-animation {
    position: relative;
    width: 100%;
    min-height: 200px;
    overflow: hidden;
}

.ew-shapes-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.ew-floating-shape {
    position: absolute;
    display: block;
    will-change: transform;
    pointer-events: none;
    border-radius: 50%;
    background-color: #ffffff;
    width: 20px;
    height: 20px;
    opacity: 0.6;
}

@keyframes ew-float {
    0% { 
        transform: translate(0, 0) rotate(0deg); 
        opacity: 0.2;
    }
    50% { 
        transform: translate(50px, -50px) rotate(180deg); 
        opacity: 0.8;
    }
    100% { 
        transform: translate(-30px, -100px) rotate(360deg); 
        opacity: 0.2;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .ew-floating-shapes-animation {
        min-height: 150px;
    }
}

@media (max-width: 480px) {
    .ew-floating-shapes-animation {
        min-height: 100px;
    }
    
    .ew-floating-shape {
        /* Smaller shapes on mobile */
        transform: scale(0.8);
    }
}