/* Timeline Icon Color Fixes - Maximum Priority */

/* Force red background for all timeline icons across all devices */
.timeline-icon,
div.timeline-icon,
.timeline-step .timeline-icon,
section .timeline-icon {
    background: #e32949 !important;
    background-color: #e32949 !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(227, 41, 73, 0.3) !important;
    color: white !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Desktop specific */
@media (min-width: 992px) {
    .timeline-icon {
        background: #e32949 !important;
        background-color: #e32949 !important;
        width: 50px !important;
        height: 50px !important;
    }
}

/* Mobile specific */
@media (max-width: 991px) {
    .timeline-icon {
        background: #e32949 !important;
        background-color: #e32949 !important;
        width: 60px !important;
        height: 60px !important;
    }
}

/* Override any potential Bootstrap or other library conflicts */
.timeline-icon i,
.timeline-icon .fas,
.timeline-icon .fa {
    color: white !important;
}