.miko-timeline {
    position: relative;
    overflow: hidden;
}
.miko-timeline .miko-center {
    position: absolute;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 270px;
    text-align: center;
    z-index: 9;
}
.timeline-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.timeline-item p {
    margin-bottom: 0;
    text-align: center;
}
.miko-timeline .circle-center {
    width: 100%;
}
.miko-timeline .circle-one,
.miko-timeline .circle-two,
.miko-timeline .circle-three {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}
.miko-timeline .circle-one {
    z-index: 1;
}
.miko-timeline .circle-two {
    z-index: 3;
}
.miko-timeline .circle-three {
    z-index: 5;
}
.timeline-item {
    transform-origin: center;
    transition: all 0.3s ease-in-out;
}
.timeline-item:hover{
    transform: translateY(-4px);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
/* Đung đưa nhẹ */
.timeline-item.swings {
    animation: swings 2.5s ease-in-out infinite;
}
@keyframes swings {
    0%,
    100% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
}
/* Lơ lửng lên xuống */
.timeline-item.floats {
    animation: floats 2s ease-in-out infinite;
}
@keyframes floats {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}
/* Nghiêng nhẹ */
.timeline-item.tilts {
    animation: tilts 3s ease-in-out infinite;
}
@keyframes tilts {
    0%,
    100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-2deg);
    }
    75% {
        transform: rotate(2deg);
    }
}
/* Phồng nhẹ */
.timeline-item.pulses {
    animation: pulses 2s ease-in-out infinite;
}
@keyframes pulses {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
}
@media screen and (max-width: 1024px) {
    .miko-timeline .circle-one,
    .miko-timeline .circle-two,
    .miko-timeline .circle-three {
        max-width: 100%;
    }
}
@media screen and (max-width: 823px) {
    .miko-timeline .circle-center {
        height: 600px;
    }
}
@media screen and (max-width: 640px) {
    .miko-timeline {
    }
    .miko-timeline .timeline-item {
        zoom: 0.6
    }
    .miko-timeline .circle-one,
    .miko-timeline .circle-two,
    .miko-timeline .circle-three{
        display: none;
    }
}