.timeline{position:relative;width:100%}.timeline__wrap{position:relative}.timeline__items{position:relative}.timeline--horizontal{overflow:hidden}.timeline--horizontal .timeline__wrap{position:relative;width:100%}.timeline--horizontal .timeline__items{display:flex;position:relative;transition:transform .5s ease}.timeline--horizontal .timeline__item{flex:0 0 auto;width:calc(100% / var(--visible-items));position:relative}.timeline--horizontal .timeline__content{padding:20px;margin:0 10px;background:#f8f9fa;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);position:relative}.timeline--horizontal .timeline__content::before{content:'';position:absolute;width:20px;height:20px;background:#007bff;border-radius:50%;top:-10px;left:50%;transform:translateX(-50%);z-index:2}.timeline--horizontal .timeline__content::after{content:'';position:absolute;width:2px;background:#dee2e6;top:10px;left:50%;transform:translateX(-50%);height:calc(100% - 20px)}.timeline--horizontal .timeline__item:first-child .timeline__content::after{display:none}.timeline--horizontal .timeline__item:last-child .timeline__content::after{display:none}.timeline--horizontal .timeline__nav{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #dee2e6;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;box-shadow:0 2px 4px rgba(0,0,0,.1)}.timeline--horizontal .timeline__nav:hover{background:#f8f9fa}.timeline--horizontal .timeline__nav--prev{left:10px}.timeline--horizontal .timeline__nav--next{right:10px}.timeline--horizontal .timeline__nav::before{content:'';border:solid #6c757d;border-width:0 2px 2px 0;display:inline-block;padding:3px}.timeline--horizontal .timeline__nav--prev::before{transform:rotate(135deg)}.timeline--horizontal .timeline__nav--next::before{transform:rotate(-45deg)}.timeline--vertical{position:relative}.timeline--vertical::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:#dee2e6;transform:translateX(-50%)}.timeline--vertical .timeline__item{position:relative;margin:40px 0;opacity:0;transform:translateY(50px);transition:all .6s ease}.timeline--vertical .timeline__item.timeline__item--animate{opacity:1;transform:translateY(0)}.timeline--vertical .timeline__item:nth-child(odd) .timeline__content{margin-left:calc(50% + 30px)}.timeline--vertical .timeline__item:nth-child(even) .timeline__content{margin-right:calc(50% + 30px);text-align:right}.timeline--vertical .timeline__content{position:relative;padding:20px;background:#f8f9fa;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1)}.timeline--vertical .timeline__content::before{content:'';position:absolute;width:20px;height:20px;background:#007bff;border-radius:50%;top:50%;transform:translateY(-50%);z-index:2}.timeline--vertical .timeline__item:nth-child(odd) .timeline__content::before{left:-40px}.timeline--vertical .timeline__item:nth-child(even) .timeline__content::before{right:-40px}@media (max-width:768px){.timeline--horizontal{display:none}.timeline--vertical{display:block}.timeline--vertical::before{left:30px}.timeline--vertical .timeline__item:nth-child(odd) .timeline__content,.timeline--vertical .timeline__item:nth-child(even) .timeline__content{margin-left:60px;margin-right:0;text-align:left}.timeline--vertical .timeline__content::before{left:-40px!important;right:auto!important}}