.timeline-wrapper {
position: relative;
width: 100%;
margin: 0 auto;
padding: 20px 0;
--line-width: 4px;
--card-line-spacing: 30px;
box-sizing: border-box;
} .timeline-line-path {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: var(--line-width);
background-color: #333333;
z-index: 1;
} .timeline-items {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
}
.timeline-item {
position: relative;
display: flex;
width: 100%;
margin-bottom: 40px;
box-sizing: border-box;
}
.timeline-item:last-child {
margin-bottom: 0;
} .timeline-marker {
position: absolute;
left: 50%;
top: 20px;
transform: translate(-50%, 0);
z-index: 10;
border-radius: 50%;
background-color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #333333;
box-sizing: border-box;
width: 30px;
height: 30px;
text-align: center;
} .timeline-marker i,
.timeline-marker svg,
.timeline-marker .elementor-icon-list-icon,
.timeline-marker > div {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 60% !important;
height: 60% !important;
font-size: 16px;
line-height: 1;
margin: 0 auto !important;
}
.timeline-marker svg {
width: 100% !important;
height: 100% !important;
}
.timeline-default-dot {
width: 30%;
height: 30%;
background-color: currentColor;
border-radius: 50%;
display: block;
} .timeline-card-wrapper {
width: 50%;
display: flex;
box-sizing: border-box;
}
.timeline-card {
background-color: #ffffff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
width: 100%;
box-sizing: border-box;
}  .timeline-align-alternate .timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.timeline-align-alternate .timeline-item:nth-child(odd) .timeline-card-wrapper {
padding-right: var(--card-line-spacing);
margin-left: 0;
margin-right: auto;
}
.timeline-align-alternate .timeline-item:nth-child(even) .timeline-card-wrapper {
padding-left: var(--card-line-spacing);
margin-right: 0;
margin-left: auto;
} .timeline-align-left .timeline-line-path {
left: auto;
right: 0;
transform: none;
}
.timeline-align-left .timeline-marker {
left: auto;
right: 0;
transform: translate(50%, 0);
}
.timeline-align-left .timeline-card-wrapper {
width: 100%;
padding-right: var(--card-line-spacing);
} .timeline-align-right .timeline-line-path {
left: 0;
transform: none;
}
.timeline-align-right .timeline-marker {
left: 0;
transform: translate(-50%, 0);
}
.timeline-align-right .timeline-card-wrapper {
width: 100%;
padding-left: var(--card-line-spacing);
margin-left: auto;
} .timeline-date {
font-size: 0.9em;
font-weight: 600;
margin-bottom: 10px;
display: block;
}
.timeline-img-wrapper {
margin-bottom: 15px;
overflow: hidden;
}
.timeline-img-wrapper img {
width: 100%;
height: auto;
display: block;
}
.timeline-title {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.3em;
}
.timeline-desc {
margin-bottom: 15px;
font-size: 0.95em;
line-height: 1.6;
}
.timeline-btn-wrapper {
margin-top: 15px;
}
.timeline-btn {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px;
font-weight: 500;
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
} .timeline-animate .timeline-item {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.timeline-animate .timeline-item.timeline-item-visible {
opacity: 1;
transform: translateY(0);
} @media (max-width: 1024px) {
.timeline-line-path {
left: 20px !important;
transform: translateX(-50%) !important;
}
.timeline-marker {
left: 20px !important;
transform: translate(-50%, 0) !important;
}
.timeline-item,
.timeline-align-alternate .timeline-item:nth-child(even) {
flex-direction: row !important;
}
.timeline-card-wrapper,
.timeline-align-alternate .timeline-item:nth-child(odd) .timeline-card-wrapper,
.timeline-align-alternate .timeline-item:nth-child(even) .timeline-card-wrapper,
.timeline-align-left .timeline-card-wrapper,
.timeline-align-right .timeline-card-wrapper {
width: calc(100% - 40px) !important;
padding-left: var(--card-line-spacing) !important;
padding-right: 0 !important;
margin-left: 40px !important;
margin-right: 0 !important;
}
} @media (prefers-reduced-motion: reduce) {
.timeline-animate .timeline-item {
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}