.raffle-container {
            width: 100%;
            height: 100vh;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            overflow: hidden;
            padding-right:5%;
        }
        .drum {
            width: 400px;
            height: 300px;
            background: linear-gradient(45deg, #df4000 0%, #ff5722 50%, #df4000 100%);
            border-radius: 50px;
            position: relative;
            box-shadow: 
                inset 0 10px 20px rgba(255,255,255,0.2),
                inset 0 -10px 20px rgba(0,0,0,0.2),
                0 10px 30px rgba(223,64,0,0.4);
            animation: drumRotate 3s ease-in-out infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
         .drum::before {
            content: '';
            position: absolute;
            width: 280px;
            height: 180px;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
            border-radius: 40px;
            animation: shine 3s ease-in-out infinite;
        }
        .ball {
            width: 40px;
            height: 40px;
            background: radial-gradient(circle at 30% 30%, #ffffff, #e0e0e0);
            border-radius: 50%;
            position: absolute;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            font-size: 16px;
        }

       .ball1 { animation: ballBounce1 3s ease-in-out infinite; }
        .ball2 { animation: ballBounce2 3s ease-in-out infinite 0.1s; }
        .ball3 { animation: ballBounce3 3s ease-in-out infinite 0.2s; }
        .ball4 { animation: ballBounce4 3s ease-in-out infinite 0.3s; }
        .ball5 { animation: ballBounce5 3s ease-in-out infinite 0.4s; }
       .winning-number-gif {
            padding-top: 20px;
            font-size: 28px;
            font-weight: bold;
            color: #df4000;
            padding-right:8%;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: numberReveal 3s ease-in-out infinite;
        }
        
        .title {
            padding-bottom: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #df4000;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #df4000;
            border-radius: 50%;
            animation: particleFloat 4s ease-in-out infinite;
        }

        .particle:nth-child(2n) {
            background: #ff5722;
            animation-delay: -1s;
        }

        .particle:nth-child(3n) {
            background: #ffb74d;
            animation-delay: -2s;
        }
        @keyframes drumRotate {
            0%, 100% { transform: rotate(0deg) scale(1); }
            25% { transform: rotate(-5deg) scale(1.02); }
            50% { transform: rotate(0deg) scale(1.05); }
            75% { transform: rotate(5deg) scale(1.02); }
        }

        @keyframes shine {
            0%, 100% { opacity: 0; transform: translateX(-100px); }
            50% { opacity: 1; transform: translateX(100px); }
        }

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

        @keyframes ballBounce2 {
            0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
            25% { transform: translate(80px, 50px) rotate(-80deg); }
            50% { transform: translate(-50px, -65px) rotate(-160deg); }
            75% { transform: translate(-70px, 40px) rotate(-240deg); }
        }

        @keyframes ballBounce3 {
            0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
            25% { transform: translate(10px, -80px) rotate(100deg); }
            50% { transform: translate(-70px, 10px) rotate(200deg); }
            75% { transform: translate(60px, 50px) rotate(300deg); }
        }

        @keyframes ballBounce4 {
            0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
            25% { transform: translate(-80px, -50px) rotate(110deg); }
            50% { transform: translate(60px, 40px) rotate(220deg); }
            75% { transform: translate(80px, -30px) rotate(330deg); }
        }

        @keyframes ballBounce5 {
            0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
            25% { transform: translate(70px, 60px) rotate(-110deg); }
            50% { transform: translate(-60px, -40px) rotate(-220deg); }
            75% { transform: translate(-80px, 20px) rotate(-330deg); }
        }

        @keyframes numberReveal {
            0%, 70% { opacity: 0; transform: scale(0.5); }
            80% { opacity: 1; transform: scale(1.2); }
            90% { transform: scale(0.9); }
            100% { opacity: 1; transform: scale(1); }
        }

        @keyframes particleFloat {
            0% { 
                opacity: 0; 
                transform: translateY(100px) translateX(0px) scale(0); 
            }
            10% { 
                opacity: 1; 
                transform: translateY(80px) translateX(10px) scale(1); 
            }
            90% { 
                opacity: 1; 
                transform: translateY(-80px) translateX(-10px) scale(1); 
            }
            100% { 
                opacity: 0; 
                transform: translateY(-100px) translateX(0px) scale(0); 
            }
        }

        .glow {
            position: absolute;
            width: 120%;
            height: 120%;
            background: radial-gradient(circle, rgba(223,64,0,0.1) 0%, transparent 70%);
            animation: glowPulse 3s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes glowPulse {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(1.1); }
        }

        /* small mobile :320px. */
@media (max-width: 767px) {
        .raffle-container{
            display:none;
        }
}
/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {
        .drum {
                    width: 300px;
                    height: 200px;
        }
}