.timeline-container{position:relative;width:100%;margin:0 auto 40px;overflow:hidden;display:flex;flex-direction:column;align-items:center}.timeline-frames-wrapper{position:relative;width:100%;overflow:hidden;height:600px;display:flex;justify-content:center}.timeline-frames{display:flex;position:absolute;transition:transform .5s ease;height:100%;width:max-content;left: calc(1200px + 40%);transform:translateX(-50%)}.timeline-year{display:flex;align-items:center;padding:0;position:relative;min-width:150px;margin:0;justify-content:center;height:100%}.timeline-frame{width:160px;height:600px;transition:all .3s ease;opacity:.7;display:flex;flex-direction:column;align-items:center}.timeline-frame.active{opacity:1;transform:scale(1.05)}.timeline-frame.near{opacity:.85}.timeline-frame.far{opacity:.5}.frame-image-container{height:530px;width:100%;overflow:hidden;border-radius:8px 8px 0 0}.frame-content{padding:10px;text-align:center;flex-grow:1;display:flex;flex-direction:column;justify-content:center;background-color:#fff;position:absolute}.top .frame-content{top:calc(50% - 120px)}.bottom .frame-content{top: calc(50% + 220px)}.frame-content h5{margin:0;line-height:1;white-space:nowrap;font-size:14px;font-weight:600;color:#333}.frame-content p{margin:0;font-size:12px;color:#6c757d}.year-label{font-size:18px;font-weight:600;color:#fff;text-align:center;padding:15px 10px;width:100%;position:absolute;background-color:#586994;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%,15px 50%);min-height:50px;display:flex;align-items:center;justify-content:center;top:50%;transform:translateY(-50%);z-index:5}.nav-btn{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;filter:invert(1) grayscale(100);border:0;opacity:.5;transition:opacity .15s ease}.nav-btn span{width:40px;height:40px;border-radius:50%;background-color:#fff;border:1px solid #ddd;box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:10;display:flex;align-items:center;justify-content:center;background-color:#fff;transition:all .3s ease}.nav-btn:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.prev-btn{left:10px}.prev-btn span{}.next-btn{right:10px}.next-btn span{}.nav-btn i{color:#007bff;font-size:16px}.timeline-pagination{display:flex;justify-content:center;align-items:center;margin-top:20px}.pagination-dot{width:10px;height:10px;border-radius:50%;background-color:#dee2e6;margin:0 5px;cursor:pointer;transition:all .3s ease}.pagination-dot.active{width:12px;height:12px;background-color:#007bff}.event{position:relative}.event.top{top:calc(50% - 34px)}.event.bottom{top: calc(50% + 35px)}.timeline-dot{position:absolute;width:8px;height:8px;border-radius:50%;background-color:#334270;left:50%;transform:translateX(-50%);z-index:2}.top .timeline-dot{top:0}.bottom .timeline-dot{bottom:0}.timeline-dot::before{content:'';position:absolute;width:2px;height:30px;background-color:#334270;left:50%;transform:translate(-50%,-50%);z-index:1}.top .timeline-dot::before{top:-15px}.bottom .timeline-dot::before{top:15px}.image-circle{position:absolute;width:160px;height:160px;border-radius:50%;border:2px solid #334270;transform:translate(-50%,-50%);z-index:3}.top .image-circle{bottom:10px}.bottom .image-circle{top:102px}