/* --- الإعدادات العامة والمتغيرات --- */
:root {
    --primary-dark: #2F3E46; 
    --primary-light: #52796F; 
    --accent: #84A98C; 
    --text-dark: #1F2833;
    --text-light: #CAD2C5;
    --bg-white: #FFFFFF;
    --bg-light: #F4F4F9;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { color: var(--text-dark); background-color: var(--bg-white); line-height: 1.6; overflow-x: hidden; }
.container { width: 90%; max-width: 1200px; margin: auto; }
a { text-decoration: none; color: inherit; transition: color 0.3s; }
ul { list-style: none; }

/* --- الهيدر (شريط التنقل) --- */
header { background-color: var(--primary-dark); color: var(--bg-white); padding: 1rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
header .container { display: flex; justify-content: space-between; align-items: center; }
.logo h1 { font-size: 1.8rem; letter-spacing: 2px; margin: 0; }
.logo span { color: var(--accent); }
nav ul { display: flex; gap: 20px; margin: 0; }
nav ul li a { padding: 0.5rem; font-weight: 500; }
nav ul li a:hover { color: var(--accent); }

/* --- الأزرار --- */
.btn { display: inline-block; background: var(--primary-light); color: white; padding: 12px 25px; border-radius: 5px; margin-top: 15px; font-weight: bold; transition: background 0.3s, transform 0.2s; border: none; cursor: pointer; }
.btn:hover { background: var(--accent); color: var(--primary-dark); transform: translateY(-2px); }

/* --- تأثيرات الحركة (JavaScript Classes) --- */
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* --- الفوتر --- */
footer { background: var(--primary-dark); color: var(--text-light); text-align: center; padding: 2rem 0; margin-top: 4rem; }
footer .footer-links { margin-top: 15px; }
footer .footer-links a { margin: 0 15px; font-size: 0.95rem; }
footer .footer-links a:hover { color: var(--bg-white); text-decoration: underline; }

/* --- التجاوب مع الهواتف --- */
@media (max-width: 768px) {
    nav ul { flex-direction: column; gap: 10px; text-align: center; display: none; /* يمكن تطويرها لقائمة منسدلة لاحقاً */ }
    header .container { flex-direction: column; gap: 15px; }
}