/* إعدادات الصفحة */
body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #0a0a0a; /* لون داكن */
    color: white;
    margin: 0;
    text-align: center;
    position: relative;
    padding: 20px;
    overflow: hidden;
}

/* تأثير الخطوط المتحركة */
.background-animation::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2));
    opacity: 0.3;
    animation: moveGradient 8s infinite alternate;
}

/* تأثير الإضاءات النيون */
.background-animation::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.15) 10%, transparent 70%);
    opacity: 0.5;
    filter: blur(20px);
    animation: pulseLight 5s infinite alternate;
}

/* حاوية المحتوى */
.container {
    position: relative;
    z-index: 2;
    width: 80%;  /* تم تعديل العرض ليصبح أكبر */
    height: 80%;  /* تم تعديل الارتفاع ليصبح أكبر */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    border-radius: 10px;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
}

/* العنوان */
h1 {
    font-size: 60px;  /* تم تكبير حجم النص ليصبح أكبر */
    margin-bottom: 50px;
    animation: fadeIn 2s ease-in-out;
    color: #00eaff;
}

/* العداد */
.countdown {
    display: flex;
    gap: 50px;  /* تم زيادة المسافة بين المربعات لتصبح أكبر */
    justify-content: center;
    font-size: 100px;
    font-weight: bold;
    animation: zoomIn 2s ease-in-out;
}

/* مربعات العداد */
.countdown div {
    background: rgba(0, 0, 0, 0.5);
    padding: 80px 120px;  /* تم زيادة الحشوة داخل المربعات لتصبح أكبر */
    border-radius: 15px;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.7);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 3px solid #00eaff;
    font-size: 120px;  /* تم زيادة حجم النص داخل المربعات ليصبح أكبر */
}

/* تأثير عند التمرير على المربع */
.countdown div:hover {
    transform: scale(1.1) ; /* تكبير و تدوير عند المرور */
    box-shadow: 0 0 60px rgba(0, 255, 255, 1); /* زيادة التوهج عند المرور */
}

/* النصوص داخل العداد */
.countdown div span {
    display: block;
    font-size: 30px;
    margin-top: 10px;
    opacity: 0.8;
    color: #00eaff;
}

/* تأثير النص أسفل العداد */
.message {
    font-size: 50px; /* تكبير حجم النص أسفل العداد */
    color: #ff007f;
    text-shadow: 0 0 20px #ff007f, 0 0 30px #ff007f, 0 0 40px #ff007f;
    animation: glowText 2s ease-in-out infinite alternate;
    margin-top: 30px;
}

/* أنيميشنات الخلفية */
@keyframes moveGradient {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* تأثير التوهج على النص أسفل العداد */
@keyframes glowText {
    0% {
        text-shadow: 0 0 20px #ff007f, 0 0 30px #ff007f, 0 0 40px #ff007f;
    }
    50% {
        text-shadow: 0 0 40px #ff007f, 0 0 70px #ff007f, 0 0 90px #ff007f;
    }
    100% {
        text-shadow: 0 0 20px #ff007f, 0 0 30px #ff007f, 0 0 40px #ff007f;
    }
}

        /* استجابة للأجهزة الصغيرة (التابلت والهواتف) */
        @media (max-width: 768px) {
            h1 {
                font-size: 50px; /* تقليل حجم العنوان */
            }

            .countdown {
                font-size: 50px; /* تقليل حجم الخط في العداد */
                gap: 15px; /* تقليل المسافة بين المربعات */
            }



            .countdown div {
                padding: 5px 20px; /* تقليل الحشوة داخل المربعات */
                font-size: 50px; /* تقليل حجم النص داخل المربعات */
            }

            .countdown div span {
                font-size: 25px; /* تقليل حجم النص داخل المربعات */
            }

            .message {
                font-size: 25px; /* تقليل حجم النص أسفل العداد */
            }
        }

        /* استجابة للأجهزة الصغيرة جدًا (الهواتف) */
        @media (max-width: 480px) {
            h1 {
                font-size: 40px; /* تقليل حجم العنوان أكثر */
            }

            .countdown {
                font-size: 40px; /* تقليل حجم الخط في العداد */
                gap: 10px; /* تقليل المسافة بين المربعات */
            }

            .countdown div {
                padding: 5px 10px; /* تقليل الحشوة داخل المربعات */
                font-size: 40px; /* تقليل حجم النص داخل المربعات */
            }

            .countdown div span {
                font-size: 20px; /* تقليل حجم النص داخل المربعات */
            }

            .message {
                font-size: 20px; /* تقليل حجم النص أسفل العداد */
            }
        }