:root { --primary: #6d28d9; --primary-light: #8b5cf6; --primary-dark: #4c1d95; --secondary: #10b981; --secondary-light: #34d399; --secondary-dark: #059669; --accent: #ec4899; --accent-light: #f472b6; --accent-dark: #db2777; --light: #f8fafc; --dark: #1e293b; --gray: #64748b; --gray-light: #e2e8f0; } body { font-family: 'Rubik', sans-serif; line-height: 1.6; color: var(--dark); background-color: var(--light); direction: rtl; } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: var(--primary-dark); } a { color: var(--primary); text-decoration: none; transition: all 0.3s ease; } a:hover { color: var(--primary-light); } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 0.375rem; font-weight: 600; text-align: center; transition: all 0.3s ease; } .btn-primary { background-color: var(--primary); color: white; } .btn-primary:hover { background-color: var(--primary-light); transform: translateY(-2px); } .btn-secondary { background-color: var(--secondary); color: white; } .btn-secondary:hover { background-color: var(--secondary-light); transform: translateY(-2px); } .section { padding: 5rem 0; } .section-title { font-size: 2.5rem; margin-bottom: 3rem; text-align: center; position: relative; } .section-title:after { content: ''; display: block; width: 80px; height: 4px; background: var(--primary); margin: 1rem auto 0; } .card { background: white; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; overflow: hidden; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .card-img { width: 100%; height: 200px; object-fit: cover; } .card-body { padding: 1.5rem; } .text-center { text-align: center; } .mb-0 { margin-bottom: 0; } .py-3 { padding-top: 1rem; padding-bottom: 1rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .bg-light { background-color: var(--light); } .bg-primary { background-color: var(--primary); color: white; } .text-primary { color: var(--primary); } .text-secondary { color: var(--secondary); } .text-accent { color: var(--accent); } .font-bold { font-weight: 700; } .rounded-lg { border-radius: 0.5rem; } .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .transition { transition: all 0.3s ease; } @media (max-width: 768px) { .section { padding: 3rem 0; } .section-title { font-size: 2rem; } }