/* =========================================
   ملف التصميم الشامل لأكاديمية Aramio
   الهوية البصرية: أزرق داكن (فخامة) + أخضر (ثقة)
========================================= */
:root {
    --primary-color: #0b1c3f;
    --secondary-color: #f8f9fc;
    --accent-color: #1cc88a;
    --text-color: #333333;
}

html, body {
    max-width: 100%;
    overflow-x: hidden; /* يمنع الشاشة من التحرك يمينا ويسارا في الهاتف */
    font-family: 'Cairo', sans-serif;
    color: var(--text-color);
    background-color: #ffffff;
}

/* =========================================
   1. شريط التنقل والأزرار
========================================= */
.navbar-custom { background-color: var(--primary-color); box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 12px 0; }
.navbar-custom .navbar-brand, .navbar-custom .nav-link { color: #ffffff !important; font-weight: 600; transition: 0.3s; }
.navbar-custom .nav-link:hover { color: var(--accent-color) !important; }
.btn-login { background-color: transparent; border: 2px solid #ffffff; color: #ffffff; border-radius: 25px; padding: 6px 20px; font-weight: bold; transition: 0.3s; }
.btn-login:hover { background-color: #ffffff; color: var(--primary-color); }
.btn-accent { background-color: var(--accent-color); color: white; padding: 8px 25px; border-radius: 25px; font-weight: bold; border: none; transition: 0.3s; }
.btn-accent:hover { background-color: #159f6d; color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(28, 200, 138, 0.4); }

/* =========================================
   2. الهيرو (الواجهة العلوية)
========================================= */
.hero-section {
    background: linear-gradient(rgba(11, 28, 63, 0.85), rgba(11, 28, 63, 0.95)), url('https://images.unsplash.com/photo-1524178232363-1fb2b075b655?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover fixed;
    color: white; padding: 160px 0 100px 0; text-align: center;
}
.hero-section h1 { font-size: 3.5rem; font-weight: 800; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

/* =========================================
   3. العداد التنازلي (مضبوط 100% للهاتف)
========================================= */
.promo-banner {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a3673 100%);
    padding: 60px 0; color: white; border-bottom: 4px solid var(--accent-color);
}
.countdown-container {
    display: flex; justify-content: center; gap: 15px; direction: ltr; margin-top: 25px; flex-wrap: nowrap;
}
.time-box {
    background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15);
    color: white; padding: 15px 20px; border-radius: 12px; min-width: 85px; text-align: center;
}
.time-box span { display: block; font-size: 2.5rem; font-weight: 800; color: var(--accent-color); line-height: 1; }
.time-box small { font-size: 1rem; font-weight: 600; opacity: 0.9; }

/* =========================================
   4. الإحصائيات (الخلفية الفخمة الجديدة)
========================================= */
.stats-section {
    /* خلفية هندسية احترافية بدلاً من الأبيض التافه */
    background-color: var(--secondary-color);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230b1c3f' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 80px 0;
}
.stat-box { 
    background: white; padding: 30px 15px; border-radius: 20px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.3s; height: 100%; border-bottom: 4px solid var(--accent-color);
}
.stat-box:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.stat-icon {
    width: 70px; height: 70px; background-color: rgba(28, 200, 138, 0.1); color: var(--accent-color);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 15px auto;
}
.stat-box h3 { font-size: 2.2rem; font-weight: 800; color: var(--primary-color); margin-bottom: 5px; }
.stat-box p { color: #666; font-weight: 600; font-size: 1rem; margin: 0; }

/* =========================================
   5. البطاقات (الدورات، المدربين، الآراء)
========================================= */
.course-card { border: none; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); transition: 0.3s; overflow: hidden; }
.course-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.course-img { height: 200px; object-fit: cover; width: 100%; }

.trainer-img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 4px solid white; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

.testimonial-card { 
    background: white; padding: 40px 20px 20px 20px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); 
    border-top: 4px solid var(--accent-color); margin-top: 40px; /* لكي لا تغطي الصورة النص */
}
.testimonial-card img { width: 75px; height: 75px; object-fit: cover; border: 4px solid var(--accent-color); margin-top: -80px; background: white; }

/* =========================================
   تجاوب الموبايل (سحر التصميم للشاشات الصغيرة)
========================================= */
@media (max-width: 576px) {
    .hero-section h1 { font-size: 2.2rem; }
    
    /* تصغير العداد التنازلي ليتسع في سطر واحد بالهاتف */
    .promo-banner { padding: 40px 0; }
    .countdown-container { gap: 8px; margin-top: 15px; }
    .time-box { min-width: 65px; padding: 10px 5px; border-radius: 8px; }
    .time-box span { font-size: 1.6rem; }
    .time-box small { font-size: 0.8rem; }
    
    /* تصغير الأيقونات والخطوط في الإحصائيات لكي تبدو جميلة عندما تكون 2 بجوار بعض */
    .stat-box { padding: 20px 10px; border-radius: 15px; }
    .stat-icon { width: 50px; height: 50px; font-size: 1.5rem; margin-bottom: 10px; }
    .stat-box h3 { font-size: 1.5rem; }
    .stat-box p { font-size: 0.85rem; }
}