/* Our Process Section - Cinematic Vertical Timeline */

/* Smooth transitions for all changing colors */
.transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Light Mode Styles */
.process-section { 
    background-color: #ffffff; 
}

.expertise-badge { 
    background-color: rgba(255, 255, 255, 0.7); 
    border-color: rgba(229, 231, 235, 0.5); 
}
.expertise-badge-text { color: #1f2937; }

.main-heading { color: #111827; }
.main-desc { color: #4b5563; }

.process-card {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(229, 231, 235, 0.5);
}

.card-title { color: #111827; }
.card-desc { color: #4b5563; }
.card-substep { color: #374151; }

.process-bg-number {
    color: #111827;
}

/* Timeline specific tweaks */
.timeline-dot {
    /* Helps position the dot exactly on the line */
    margin-left: 1px;
}

/* Dark Mode Overrides */
.dark-mode .process-section { 
    background-color: #0a0a0a !important; 
}

.dark-mode .expertise-badge { 
    background-color: rgba(31, 41, 55, 0.5); 
    border-color: rgba(55, 65, 81, 0.5); 
}
.dark-mode .expertise-badge-text { color: #e5e7eb; }

.dark-mode .main-heading { color: #ffffff; }
.dark-mode .main-desc { color: #9ca3af; }

.dark-mode .process-card {
    background-color: rgba(17, 24, 39, 0.6);
    border-color: rgba(55, 65, 81, 0.5);
}

.dark-mode .card-title { color: #ffffff; }
.dark-mode .card-desc { color: #9ca3af; }
.dark-mode .card-substep { color: #e5e7eb; }

.dark-mode .process-bg-number {
    color: #ffffff;
    opacity: 0.05;
}

.dark-mode .dark-dot-override {
    background-color: #111827;
    border-color: #6366f1; /* indigo-500 */
}

/* Mobile responsive adjustments for timeline */
@media (max-width: 768px) {
    .timeline-dot {
        margin-left: 0;
    }
}