.history { background-color: #5c3e70; padding: 230px 0; overflow: hidden; position: relative; display: flex; align-items: center; } .history__timeline-wrapper { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1400px; margin: 0 auto; z-index: 2; } .history__line { position: absolute; top: 50%; left: 10%; right: 10%; height: 1px; background: rgba(255, 255, 255, 0.3); transform: translateY(-50%); z-index: -1; } .history__item { position: relative; display: flex; flex-direction: column; align-items: center; width: 20%; cursor: pointer; } .history__circle { width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); padding: 8px; position: relative; z-index: 5; } .history__item:hover .history__circle { transform: scale(1.1); border-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .history__image { width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; transition: transform 0.5s ease; } .history__content { width: 100%; text-align: center; position: absolute; left: 50%; transform: translateX(-50%); } .history__content--top { bottom: 100%; margin-bottom: 30px; } .history__content--bottom { top: 100%; margin-top: 30px; } .history__year { sans-serif; font-weight: 800; font-size: 32px; color: #fff; margin-bottom: 5px; line-height: 1; } 

.history__description { 
    sans-serif; font-size: 19px; font-weight: 500; color: rgba(186,175,195, 1); opacity: 0.9; 

    margin-top: 13px; 
    margin-bottom: 13px; 
line-height: 1.3; 
}

.history__location { sans-serif; font-size: 14px; color: rgba(186,175,195, 1); margin: 0; } @media (max-width: 992px) { .history__timeline-wrapper { flex-direction: column; gap: 100px; padding: 50px 0; } .history__line { width: 1px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); } .history__item { width: 100%; } .history__content { position: relative; left: 0; transform: none; margin: 20px 0 !important; } .history__content--top { order: 2; } .history__circle { order: 1; } }


.history__image {
    transform-origin: center center;
    will-change: transform;
}

.history {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}