/* ========== ABOUT PAGE STYLES ========== */

/* Timeline ko reuse karein (main.css se) */
/* Lekin naye container mein */

.timeline-container {
    position: relative;
    max-width: 500px; /* Max-width on desktop */
}

/* Home page par yeh timeline-item :last-child border fix tha, */
/* Lekin yahaan zaroorat nahi hai, toh reset karein */
.timeline-item {
    position: relative;
    padding-left: 40px;
    padding-bottom: 32px;
    border-left: 2px solid var(--color-border-light);
}
.timeline-item:last-child {
    border-left: 2px solid var(--color-border-light); /* Reset */
    padding-bottom: 0; /* Last item ka padding hata dein */
}

/* Border ko last item ke dot par rokne ke liye */
.timeline-container::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2px;
    height: 32px; /* last-child ke padding-bottom jitna */
    background: var(--color-bg-primary); /* BG color se chhipa dein */
}

.timeline-dot {
    position: absolute;
    left: -10px;
    top: 0;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-radius: 50%;
    border: 3px solid var(--color-bg-primary);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
    z-index: 1;
}