.manus-pb-timeline-block {
position: relative; margin: 40px 0; }    .manus-pb-timeline-block.manus-pb-timeline-vertical { padding-left: 0;
width: 90%; max-width: 900px; margin: 40px auto; } .manus-pb-timeline-vertical .manus-pb-timeline-line { left: 50%;
top: 0;
bottom: 0;
width: 3px;
transform: translateX(-50%); background-color: #e0e0e0;
z-index: 0;
} .manus-pb-timeline-vertical .manus-pb-timeline-event {
position: relative;
margin-bottom: 50px;
width: 50%; padding: 10px 40px; box-sizing: border-box; } .manus-pb-timeline-vertical .manus-pb-timeline-event::before {
content: '';
position: absolute;
background-color: #fff;
border: 3px solid #80120c;
border-radius: 50%;
z-index: 1;
top: 25px; width: 15px;
height: 15px;
} .manus-pb-timeline-content {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
border: 1px solid #eee;
position: relative; } .manus-pb-timeline-content::after {
content: '';
position: absolute;
top: 28px;
width: 0;
height: 0;
border: 10px solid transparent;
}    .manus-pb-timeline-vertical .manus-pb-timeline-event:nth-child(odd) {
left: 0; text-align: right; } .manus-pb-timeline-vertical .manus-pb-timeline-event:nth-child(odd)::before {
right: -8px; } .manus-pb-timeline-vertical .manus-pb-timeline-event:nth-child(odd) .manus-pb-timeline-content::after {
right: -20px; border-left-color: #f9f9f9;
} .manus-pb-timeline-vertical .manus-pb-timeline-event:nth-child(odd) .manus-pb-timeline-date {
text-align: right;
} .manus-pb-timeline-vertical .manus-pb-timeline-event:nth-child(even) {
left: 50%; } .manus-pb-timeline-vertical .manus-pb-timeline-event:nth-child(even)::before {
left: -8px; } .manus-pb-timeline-vertical .manus-pb-timeline-event:nth-child(even) .manus-pb-timeline-content::after {
left: -20px; border-right-color: #f9f9f9;
} @media screen and (max-width: 768px) { .manus-pb-timeline-block.manus-pb-timeline-vertical {
width: 100%;
padding-left: 70px;
padding-right: 20px;
}
.manus-pb-timeline-vertical .manus-pb-timeline-line {
left: 40px; }
.manus-pb-timeline-vertical .manus-pb-timeline-event,
.manus-pb-timeline-vertical .manus-pb-timeline-event:nth-child(even) {
width: 100%;
left: 0; padding-left: 30px;
padding-right: 0;
text-align: left; }
.manus-pb-timeline-vertical .manus-pb-timeline-event::before,
.manus-pb-timeline-vertical .manus-pb-timeline-event:nth-child(odd)::before,
.manus-pb-timeline-vertical .manus-pb-timeline-event:nth-child(even)::before {
left: -17px; right: auto;
}
.manus-pb-timeline-vertical .manus-pb-timeline-content::after,
.manus-pb-timeline-vertical .manus-pb-timeline-event:nth-child(odd) .manus-pb-timeline-content::after {
left: -20px; right: auto;
border-right-color: #f9f9f9;
border-left-color: transparent;
}
} .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 #80120c; 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: -130px; 
width: 90px; text-align: right;
top: 25px; } .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: #ffbaba;
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 #7d1c17;
border-radius: 50%;
z-index: 1;
top: 0;
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);
}