/* الحاوية الكلية للقسمين */
.timeline-cta-wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-md) * 3);
    direction: rtl;

    max-width: 1200px;
    margin-inline: auto;
    /* لتوسيط القسم في منتصف الشاشة */
    width: 100%;
}

@media (max-width: 1440px) {
    .timeline-cta-wrapper {
        width: 95%;

    }
}

/* =========================================
   1- قسم الجدول الزمني المتوقع
   ========================================= */
.timeline-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-md) * 2);
    padding: calc(var(--space-md) * 2.5);
    background-color: var(--clr-semi-light2);
    border: 1px solid var(--clr-semi-light);
    border-radius: var(--space-md);
    text-align: center;
}

.timeline-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: var(--space-md);
}

@media (max-width: 480px) {
    .timeline-grid {
        flex-direction: column;
        gap: calc(var(--space-md) * 2);
    }
}

.timeline-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.timeline-value {
    font-size: var(--fs-xl);
    font-weight: 800;
}

/* ألوان القيم بناءً على الصورة */
.val-dark {
    color: var(--clr-dark);
}

.val-primary {
    color: var(--clr-primary);
}

.val-gold {
    color: var(--clr-gold);
}

.timeline-label {
    color: var(--clr-muted);
    font-size: var(--fs-sm);
}