Spaces:
Running
Running
| :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; | |
| } | |
| } | |