@charset "utf-8";
/* CSS Document */

/* Timeline Mobile Responsive Styles */
/* Add this to your CSS to style the timeline numbers on small devices */

@media (max-width: 991.98px) {
    .timeline-wrapper .timeline .timeline-date {
        position: relative;
        margin-bottom: 30px;
    }

    .timeline-wrapper .timeline .timeline-date h1,
    .timeline-wrapper .timeline .timeline-date h2,
    .timeline-wrapper .timeline .timeline-date h3,
    .timeline-wrapper .timeline .timeline-date h4,
    .timeline-wrapper .timeline .timeline-date h5,
    .timeline-wrapper .timeline .timeline-date h6 {
        position: relative;
        text-align: left;
        margin: 0;
    }

    /* Style the numbers (01, 02, 03, etc.) */
    .timeline-wrapper .timeline .timeline-date .numbersTime {
        color: #6f6e70;
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 8px;
        display: block;
    }

    .timeline-wrapper .timeline .timeline-date .numbersOnly {
        color: #44477c;
        font-size: 24px;
        font-weight: 600;
        display: block;
        margin-bottom: 0;
    }

    /* Adjust dot position for small screens */
    .timeline-wrapper .timeline .timeline-date:before {
        top: 1px;
        left: -40px;
        width: 20px;
        height: 20px;
        background: #e2e6ea;
        border-radius: 50%;
    }

    .timeline-wrapper .timeline .timeline-date:after {
        top: 7px;
        left: -34px;
        width: 8px;
        height: 8px;
        background: #6f6e70;
        border-radius: 50%;
    }

    /* Align text with dots */
    .timeline-wrapper .timeline-content {
        margin-left: 0;
        padding-left: 30px;
    }
}

@media (max-width: 575.98px) {
    .timeline-wrapper {
        padding-left: 20px;
    }

    .timeline-wrapper .timeline .timeline-date {
        padding: 0;
    }

    .timeline-wrapper .timeline .timeline-date .numbersTime {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .timeline-wrapper .timeline .timeline-date .numbersOnly {
        font-size: 20px;
    }

    .timeline-wrapper .timeline .timeline-date:before {
        left: -30px;
    }

    .timeline-wrapper .timeline .timeline-date:after {
        left: -24px;
    }

    .timeline-wrapper .timeline-content {
        padding-left: 20px;
    }
}