.frame-container {
            display: flex;
            gap: 30px;
            max-width: 1200px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .frame {
            width: 320px;
            height: 300px;
            border-radius: 25px;
            position: relative;
            cursor: pointer;
            transition: transform 0.3s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        .frame:hover {
            transform: translateY(-15px) scale(1.05);
        }

        /* Frame 1 - Bouncing */
        .frame1 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-20px); }
            60% { transform: translateY(-10px); }
        }

        .frame1::before {
            content: '🎈';
            font-size: 3rem;
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateX(-50%) translateY(0px); }
            50% { transform: translateX(-50%) translateY(-15px); }
        }

        /* Frame 2 - Rotating */
        .frame2 {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            animation: wiggle 1.5s ease-in-out infinite;
        }

        @keyframes wiggle {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(3deg); }
            75% { transform: rotate(-3deg); }
        }

        .frame2::before {
            content: '⭐';
            font-size: 3rem;
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            from { transform: translateX(-50%) rotate(0deg); }
            to { transform: translateX(-50%) rotate(360deg); }
        }

        /* Frame 3 - Pulsing */
        .frame3 {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .frame3::before {
            content: '🌈';
            font-size: 3rem;
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            animation: rainbow 3s ease-in-out infinite;
        }

        @keyframes rainbow {
            0% { filter: hue-rotate(0deg); }
            100% { filter: hue-rotate(360deg); }
        }

        @keyframes circus {
            0%, 100% { transform: translateX(-50%) scale(1); }
            50% { transform: translateX(-50%) scale(1.2); }
        }

        /* Content styling */
        .frame-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(255,255,255,0.9);
            padding: 20px;
            border-radius: 0 0 25px 25px;
            text-align: center;
        }

        .frame-title {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

        .frame-text {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.4;
        }

        /* Hover effects */
        .frame1:hover { box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5); }
        .frame2:hover { box-shadow: 0 15px 40px rgba(240, 147, 251, 0.5); }
        .frame3:hover { box-shadow: 0 15px 40px rgba(79, 172, 254, 0.5); }
        .frame4:hover { box-shadow: 0 15px 40px rgba(250, 112, 154, 0.5); }

        /* Responsive design */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                align-items: center;
            }
            
            .frame {
                width: 280px;
                margin-bottom: 20px;
            }
        }

        /* Extra sparkle effects */
        .sparkle {
            position: absolute;
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 50%;
            animation: sparkle 1.5s ease-in-out infinite;
        }

        @keyframes sparkle {
            0%, 100% { opacity: 0; transform: scale(0); }
            50% { opacity: 1; transform: scale(1); }
        }

        .frame1 .sparkle:nth-child(1) { top: 30%; left: 20%; animation-delay: 0s; }
        .frame1 .sparkle:nth-child(2) { top: 60%; right: 25%; animation-delay: 0.5s; }
        .frame2 .sparkle:nth-child(1) { top: 40%; left: 15%; animation-delay: 0.2s; }
        .frame2 .sparkle:nth-child(2) { top: 70%; right: 20%; animation-delay: 0.8s; }
        .frame3 .sparkle:nth-child(1) { top: 35%; left: 25%; animation-delay: 0.3s; }
        .frame3 .sparkle:nth-child(2) { top: 65%; right: 15%; animation-delay: 0.9s; }
        .frame4 .sparkle:nth-child(1) { top: 45%; left: 18%; animation-delay: 0.1s; }
        .frame4 .sparkle:nth-child(2) { top: 55%; right: 22%; animation-delay: 0.6s; }