/*
Version: 1.06
Author: JMMREVIEW
*/
/* Main Timeline Container */
.timeline {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

/* Center Line */
.timeline-line {
    position: absolute;
    width: 4px;
    background: #ffffff; /* White center line */
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px; /* Half of the line's width */
    z-index: 1;
}

/* Timeline Item Common Styles */
.timeline-item {
    position: relative;
    width: 45%;
    padding: 20px;
    box-sizing: border-box;
}

/* Left-side Items */
.timeline-item-left {
    left: 0;
    text-align: right;
    border-right: 2px solid #ffffff; /* White border for left items */
    padding-right: 40px;
}

/* Right-side Items */
.timeline-item-right {
    left: 55%; /* Offset to the right side */
    text-align: left;
    border-left: 2px solid #ffffff; /* White border for right items */
    padding-left: 40px;
}

/* Image Styling */
.timeline-img img {
    max-width: 100%;
    border-radius: 8px;
}

/* Content Styling */
.timeline-content {
    background-color: #000000; /* Black background */
    color: #ffffff; /* White text */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.timeline-content h2,
.timeline-content p,
.timeline-content strong {
    color: #ffffff; /* White text */
}

/* Links inside the timeline content */
.timeline-content a {
    color: #ffffff; /* White links */
    text-decoration: underline;
}

.timeline-content a:hover {
    color: #bbbbbb; /* Slightly lighter color on hover */
}

/* Media Queries for Responsiveness */
@media screen and (max-width: 768px) {
    .timeline-item {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .timeline-item-left,
    .timeline-item-right {
        left: 0;
        text-align: left;
        border: none;
    }

    .timeline-line {
        left: 10px;
    }
}