.timeline{position:relative;padding:20px;margin:20px 0}.timeline-item{display:flex;align-items:flex-start;margin-bottom:40px;position:relative}.timeline-item::before{content:"";position:absolute;left:25px;top:0;bottom:0;width:2px;background:#ccc}.timeline-icon{flex:0 0 50px;height:50px;display:flex;justify-content:center;align-items:center;border:2px solid #ccc;border-radius:50%;background:#fff;margin-right:20px}.timeline-content{background:#f9f9f9;padding:10px 15px;border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.timeline-content h3{margin:0 0 10px;font-size:18px}.timeline-content p{margin:0;color:#555}.
.scroll-container{position:relative;height:300vh}.card{position:sticky;top:0;height:100vh;display:flex;justify-content:center;align-items:center;text-align:center;z-index:1;padding:20px;box-shadow:0 10px 20px rgba(0,0,0,0.3);transition:all 0.3s ease-in-out}.card-1{background-color:#e74c3c;z-index:1}.card-2{background-color:#3498db;z-index:2}.card-3{background-color:#2ecc71;z-index:3}.spacer{height:100vh}