.manus-pb-timeline-block {
position: relative; margin: 40px 0; } .manus-pb-timeline-block.manus-pb-timeline-vertical { padding-left: 100px; 
} .manus-pb-timeline-line {
position: absolute;
background-color: #e0e0e0; z-index: 0; }
.manus-pb-timeline-vertical .manus-pb-timeline-line { left: 100px; 
top: 0;
bottom: 0;
width: 3px; } .manus-pb-timeline-event {
position: relative; margin-bottom: 40px; }
.manus-pb-timeline-vertical .manus-pb-timeline-event { margin-left: 35px; 
} .manus-pb-timeline-event::before {
content: '';
position: absolute;
background-color: #fff; border: 3px solid #007cba; border-radius: 50%;
z-index: 1; }
.manus-pb-timeline-vertical .manus-pb-timeline-event::before { left: -44px; top: 5px; width: 15px;
height: 15px;
transform: translateX(-50%); } .manus-pb-timeline-date {
font-weight: bold;
color: #555;
font-size: 0.9em;
}
.manus-pb-timeline-vertical .manus-pb-timeline-date {
position: absolute; left: -105px; 
width: 90px; text-align: right;
top: 5px; } .manus-pb-timeline-content {
background-color: #f9f9f9; padding: 20px;
border-radius: 8px;
border: 1px solid #eee;
}
.manus-pb-timeline-title {
margin-top: 0;
margin-bottom: 10px;
color: #333;
font-size: 1.2em;
}
.manus-pb-timeline-description {
margin-top: 0;
margin-bottom: 15px;
color: #666;
line-height: 1.6;
}
.manus-pb-timeline-image {
max-width: 100%;
height: auto;
display: block;
border-radius: 5px;
margin-top: 15px;
}  .manus-pb-timeline-block.manus-pb-timeline-horizontal {
position: relative; padding: 40px 50px; overflow: hidden; } .manus-pb-timeline-horizontal .manus-pb-timeline-track {
display: flex;
overflow-x: auto; padding-bottom: 20px; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } .manus-pb-timeline-horizontal .manus-pb-timeline-track::-webkit-scrollbar {
display: none;
} .manus-pb-timeline-horizontal .manus-pb-timeline-line {
position: absolute;
top: 40px;
left: 0;
right: 0;
height: 3px;
background-color: #e0e0e0;
z-index: 0;
} .manus-pb-timeline-horizontal .manus-pb-timeline-event {
flex: 0 0 300px;
margin-right: 40px;
padding-top: 30px;
position: relative; }
.manus-pb-timeline-horizontal .manus-pb-timeline-event::before {
content: '';
position: absolute;
background-color: #fff;
border: 3px solid #007cba;
border-radius: 50%;
z-index: 1;
top: -8px;
left: 0;
width: 15px;
height: 15px;
} .manus-pb-timeline-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #ddd;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #333;
z-index: 10;
transition: all 0.2s ease-in-out;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.manus-pb-timeline-nav:hover {
background-color: #fff;
transform: translateY(-50%) scale(1.1);
color: #000;
}
.manus-pb-timeline-nav.prev {
left: 10px;
}
.manus-pb-timeline-nav.next {
right: 10px;
} .manus-pb-timeline-nav.disabled {
opacity: 0.3;
cursor: not-allowed;
transform: translateY(-50%) scale(1);
}