@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Tahoma', 'Arial', sans-serif;
}

.gradient-text {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-white {
    background: linear-gradient(135deg, #ffffff, #f0f9ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dark Mode Styles */
.dark .gradient-text-white {
    background: linear-gradient(135deg, #f0f9ff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Progress Bar */
.progress-bar {
    background: linear-gradient(90deg, #e2e8f0, #cbd5e1);
    height: 8px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.dark .progress-bar {
    background: linear-gradient(90deg, #374151, #4b5563);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1e40af);
    border-radius: 4px;
    transition: width 2s ease-out;
}

/* Interactive Timeline */
.timeline-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

.timeline-item:hover {
    transform: scale(1.05);
}

.timeline-item.active {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
}

/* Counter Animation */
.counter {
    font-variant-numeric: tabular-nums;
}