.section-title {
    @apply text-2xl font-bold text-white border-l-4 border-cyan-400 pl-4 mb-4;
}

.section-content {
    @apply bg-slate-800/50 p-6 rounded-lg;
}

.card {
    @apply bg-slate-800 p-6 rounded-lg shadow-lg border border-slate-700/50 transition-all duration-300 hover:border-cyan-400/50 hover:shadow-cyan-400/10;
}

.card-title {
    @apply text-lg font-bold text-cyan-400;
}

.timeline-container {
    @apply relative pl-8;
}

.timeline-container::before {
    content: '';
    @apply absolute top-0 left-3 h-full w-0.5 bg-slate-700;
}

.timeline-item {
    @apply relative mb-10;
}

.timeline-dot {
    @apply absolute -left-5 top-1.5 w-4 h-4 bg-slate-600 rounded-full border-4 border-slate-800 transition-colors duration-300;
}

.timeline-item:hover .timeline-dot {
    @apply bg-cyan-400;
}

.timeline-content {
    @apply bg-slate-800 p-6 rounded-lg border border-slate-700/50;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}