/* Floating Elements Animation */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Large floating balls */
.circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Pink colored balls */
.circle.pink {
    background: rgba(255,107,107,0.3);
}

/* Teal colored balls */
.circle.teal {
    background: rgba(23,162,183,0.3);
}

/* Animation Keyframes */
@keyframes float1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -20px) rotate(90deg); }
    50% { transform: translate(0, -40px) rotate(180deg); }
    75% { transform: translate(-20px, -20px) rotate(270deg); }
}

@keyframes float2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.2); }
}

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

@keyframes float4 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(15px, -15px) rotate(180deg); }
}

@keyframes float5 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-15px, 15px) scale(1.5); }
}

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

@keyframes float7 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-10px, 10px) rotate(90deg); }
}

@keyframes float8 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(15px, -15px) scale(1.3); }
}

@keyframes float9 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-25px, -25px) rotate(90deg); }
    50% { transform: translate(0, -50px) rotate(180deg); }
    75% { transform: translate(25px, -25px) rotate(270deg); }
}

@keyframes float10 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, 30px) scale(1.4); }
}

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

@keyframes float12 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-20px, 20px) rotate(180deg); }
}

@keyframes float13 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.6); }
}

@keyframes float14 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(15px, -15px) rotate(180deg); }
}

@keyframes float15 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-10px, 10px) scale(1.3); }
}

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

@keyframes float17 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-15px, 15px) rotate(90deg); }
}

@keyframes float18 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(18px, -18px) scale(1.4); }
}