.zs-timeline-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0;
overflow: visible;
}
.zs-timeline {
position: relative;
padding: 0;
} .zs-timeline::before {
content: '';
position: absolute;
top: 35px; bottom: 35px; left: 50%;
transform: translateX(-50%);
width: 2px;
background-color: #7D6B9D;
z-index: 1;
} .zs-timeline-item {
position: relative;
width: 50%; padding-top: 15px;
padding-bottom: 15px;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
opacity: 1;
transform: none;
transition: all 0.6s ease-out;
} .zs-timeline-item.left {
padding-right: 35px; }
.zs-timeline-item.right {
padding-left: 35px; } .zs-use-animation {
opacity: 0;
transform: translateY(30px);
}
.zs-timeline-item.is-visible {
opacity: 1;
transform: translateY(0);
}
.zs-timeline-item.left {
left: 0;
text-align: left;
}
.zs-timeline-item.right {
left: 50%;
text-align: left;
} .zs-timeline-dot {
position: absolute;
width: 14px;
height: 14px;
background-color: #7D6B9D;
border: 3px solid #fff;
border-radius: 50%;
top: 35px; left: auto;
right: auto;
z-index: 5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.left .zs-timeline-dot {
right: -8px; }
.right .zs-timeline-dot {
left: -8px;
} .zs-timeline-year {
position: absolute;
top: 30px; font-weight: 700;
font-size: 1.2rem;
color: #7D6B9D;
white-space: nowrap;
z-index: 10;
}
.left .zs-timeline-year {
left: calc(100% + 40px); }
.right .zs-timeline-year {
right: calc(100% + 40px);
} .zs-timeline-content {
position: relative;
padding: 30px;
background: #ffffff;
border-radius: 20px; border: 1px solid #D1D18B; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.zs-timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
} .zs-timeline-content::after {
content: '';
position: absolute;
top: 35px;
border: 15px solid transparent;
z-index: 2; } .left .zs-timeline-content::after {
right: -29px;
border-left-color: #D1D18B; } .zs-timeline-content::before {
content: '';
position: absolute;
top: 35px;
border: 15px solid transparent;
z-index: 3;
}
.left .zs-timeline-content::before {
right: -28px; border-left-color: #ffffff;
}
.right .zs-timeline-content::after {
left: -29px;
border-right-color: #D1D18B;
}
.right .zs-timeline-content::before {
left: -28px;
border-right-color: #ffffff;
} .zs-timeline-image {
margin-bottom: 25px;
border-radius: 12px;
overflow: hidden;
}
.zs-timeline-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
} .zs-timeline-text h3 {
margin: 0 0 15px 0;
font-family: 'Raleway', sans-serif;
font-size: 1.6rem;
line-height: 1.2;
}
.zs-timeline-description {
font-size: 1rem;
line-height: 1.7;
color: #555;
} .elementor-editor-active .zs-timeline-item {
opacity: 1 !important;
transform: none !important;
} @media (max-width: 991px) {
.zs-timeline-item {
padding-top: 10px;
padding-bottom: 10px;
}
}
@media (max-width: 767px) {
.zs-timeline::before {
left: 30px;
} .zs-timeline-item {
width: 100%;
left: 0 !important;
padding-left: 70px !important; padding-right: 0 !important;
margin-bottom: 30px;
}
.zs-timeline-dot {
left: 23px !important;
right: auto !important;
top: 20px !important;
} .zs-timeline-year {
position: relative;
top: 0 !important;
transform: none;
margin-bottom: 5px;
display: block;
left: 0 !important;
right: auto !important;
font-size: 1rem;
text-align: left;
}
.zs-timeline-content::after,
.zs-timeline-content::before {
top: 25px !important;
}
.zs-timeline-content::after {
left: -29px !important;
right: auto !important;
border-right-color: #D1D18B !important;
border-left-color: transparent !important;
}
.zs-timeline-content::before {
left: -28px !important;
right: auto !important;
border-right-color: #ffffff !important;
border-left-color: transparent !important;
}
}