.jo-timeline{position:relative;padding:60px 0 20px;max-width:1000px;margin:0 auto}.jo-timeline::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:3px;background:linear-gradient(to bottom,#ddd,#bbb);border-radius:1.5px;transform:translateX(-50%);z-index:0}.timeline-item{position:relative;display:flex;align-items:center;margin-bottom:40px}.timeline-marker{position:absolute;top:50%;left:50%;width:20px;height:20px;background-color:#fff;border:3px solid #007bff;border-radius:50%;box-shadow:0 0 8px rgba(0,0,0,0.1);transform:translate(-50%,-50%) scale(0.8);opacity:1;transition:opacity 0.3s ease,transform 0.3s ease;z-index:2}.timeline-item:hover .timeline-marker,.timeline-item:focus-within .timeline-marker{opacity:1;transform:translate(-50%,-50%) scale(1)}.timeline-content{position:relative;padding:20px;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);width:calc(50% - 15px);transition:opacity 0.3s ease,transform 0.3s ease,box-shadow 0.3s ease;z-index:1;opacity:1}.timeline-content:hover{opacity:1;transform:translateY(-5px);box-shadow:0 6px 20px rgba(0,0,0,0.15)}.timeline-item-left .timeline-content{margin-right:auto;background-color:#e9ecef;text-align:left;margin-left:5px}.timeline-item-right .timeline-content{margin-left:auto;background-color:#f9f9f9;text-align:right;margin-right:5px}.timeline-time{font-size:14px;color:#666;margin-bottom:10px;font-weight:600}.timeline-title{font-size:20px;font-weight:bold;margin-bottom:10px;color:#333}.timeline-description{font-size:16px;color:#555;line-height:1.6}.timeline-image img{max-width:100%;height:auto;border-radius:8px;margin:auto auto 15px;display:block}.jo-timeline.zigzag1::before{background:linear-gradient(to bottom,#ddd,#bbb)}.timeline-item.zigzag1{margin-bottom:50px}.timeline-content.zigzag1{width:calc(50% - 15px)}.jo-timeline.zigzag2{position:relative;padding:60px 0;max-width:1000px;margin:0 auto}.jo-timeline.zigzag2::before{background:linear-gradient(to bottom,#ddd,#bbb)}.timeline-item.zigzag2{position:relative;display:flex;align-items:center;margin-bottom:50px;opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease}.timeline-item.zigzag2.show{opacity:1;transform:translateY(0)}.timeline-marker.zigzag2{position:absolute;top:50%;left:50%;width:24px;height:24px;background-color:#fff;border:4px solid #007bff;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,0.15);transform:translate(-50%,-50%);z-index:2}.timeline-content.zigzag2{position:relative;padding:25px;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,0.1);width:calc(50% - 50px);transition:transform 0.4s ease,box-shadow 0.4s ease;z-index:1}.timeline-content.zigzag2:hover{transform:translateY(-10px);box-shadow:0 10px 30px rgba(0,0,0,0.2)}.timeline-item-left .timeline-content.zigzag2{margin-right:auto;background-color:#e9ecef;text-align:left;margin-left:48px}.timeline-item-right .timeline-content.zigzag2{margin-left:auto;background-color:#f9f9f9;text-align:right;margin-right:48px}.jo-timeline.vertical{display:flex;flex-direction:column;align-items:center}.jo-timeline.vertical::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:3px;background:linear-gradient(to bottom,#ddd,#bbb);transform:translateX(-50%);z-index:0}.timeline-item.vertical{display:flex;flex-direction:column;align-items:center;margin-bottom:40px;position:relative}.timeline-marker.vertical{position:absolute;top:0;left:50%;transform:translateX(-50%)}.timeline-content.vertical{width:100%;max-width:600px;margin-top:20px;text-align:center;background-color:#f9f9f9;padding:20px;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1)}.jo-timeline.horizontal{display:flex;overflow-x:auto;padding:20px 0;scroll-snap-type:x mandatory}.jo-timeline.horizontal::before{display:none}.timeline-item.horizontal{display:flex;flex-direction:column;align-items:center;min-width:300px;scroll-snap-align:start;margin:0 20px}.timeline-item.horizontal:hover .timeline-marker,.timeline-item.horizontal:focus-within .timeline-marker{transform:translate(0%,-50%) scale(1)}.timeline-marker.horizontal{position:relative;top:0;left:0;transform:translate(0%,0%) scale(0.8)}.timeline-marker.horizontal:hover{transform:translate(0%,0%) scale(1)}.timeline-content.horizontal{width:100%;text-align:center;background-color:#f9f9f9;padding:20px;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1)}.jo-timeline.chat1{position:relative;padding:40px 0;max-width:800px;margin:0 auto}.jo-timeline.chat1::before{display:none}.timeline-item.chat1{display:flex;justify-content:flex-start;margin-bottom:20px;position:relative}.timeline-item-left.chat1{justify-content:flex-start}.timeline-item-right.chat1{justify-content:flex-end}.timeline-content.chat1{position:relative;padding:15px 20px;border-radius:20px;max-width:70%;box-shadow:0 4px 10px rgba(0,0,0,0.1);transition:transform 0.3s ease,box-shadow 0.3s ease;z-index:1}.timeline-item-left .timeline-content.chat1{background-color:#28a745;text-align:left;margin-left:0}.timeline-item-right .timeline-content.chat1{background-color:#007bff;color:#fff;text-align:right;margin-right:0}.timeline-time.chat1{font-size:26px;color:#aaa;margin-bottom:5px;font-weight:400;position:absolute;top:50%;transform:translateY(-55%)}.timeline-item-left .timeline-time.chat1{left:100%;margin-left:30px}.timeline-item-right .timeline-time.chat1{right:100%;margin-right:30px}.timeline-marker.chat1{position:absolute;top:50%;left:50%;width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%);z-index:2}.timeline-item-left .timeline-marker.chat1{background-color:#28a745}.timeline-item-right .timeline-marker.chat1{background-color:#007bff}.timeline-content.chat1:hover{transform:translateY(-5px);box-shadow:0 6px 15px rgba(0,0,0,0.15)}.jo-timeline.chat2{position:relative;padding:40px 0;max-width:800px;margin:0 auto}.jo-timeline.chat2::before{display:none}.timeline-item.chat2{display:flex;justify-content:flex-start;margin-bottom:30px}.timeline-item-left .timeline-content.chat2{margin-right:auto;background-color:transparent;text-align:left;padding:10px 20px;border-left:3px solid #ddd}.timeline-item-right .timeline-content.chat2{margin-left:auto;background-color:transparent;text-align:right;padding:10px 20px;border-right:3px solid #ddd}.timeline-time.chat2{font-size:26px;color:#aaa;margin-bottom:5px;font-weight:400;position:absolute;top:50%;transform:translateY(-55%)}.timeline-item-right .timeline-time.chat2{right:100%;margin-right:30px}.timeline-item-left .timeline-time.chat2{left:100%;margin-left:30px}.timeline-title.chat2{font-size:18px;font-weight:bold;margin-bottom:5px;color:#333}.timeline-description.chat2{font-size:14px;color:#555;line-height:1.6}.jo-timeline.circular{position:relative;padding:80px 0 40px;max-width:1000px;margin:0 auto}.jo-timeline.circular::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:3px;background:linear-gradient(to bottom,#ddd,#bbb);transform:translateX(-50%);z-index:0}.timeline-item.circular{position:relative;display:flex;align-items:center;margin-bottom:40px}.timeline-marker.circular{position:absolute;top:50%;left:50%;width:80px;height:80px;background-color:transparent;border:4px solid #007bff;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,0.1);transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;justify-content:center;font-size:14px;color:#007bff}.timeline-time.circular{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;width:80px;height:80px;border-radius:50%;transform:translate(-50%,-50%);font-size:18px;color:#007bff;margin:0;line-height:1.3;text-align:center;pointer-events:none;background:#fff}.timeline-item-left .timeline-time.circular{left:100%;transform:translate(-46%,-50%)}.timeline-item-right .timeline-time.circular{left:0%;transform:translate(-54%,-50%)}.timeline-content.circular{position:relative;padding:20px;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);width:calc(50% - 100px);transition:transform 0.3s ease,box-shadow 0.3s ease;z-index:1}.timeline-item-left .timeline-content.circular{margin-right:auto;background-color:#e9ecef;text-align:left;margin-left:97px}.timeline-item-right .timeline-content.circular{margin-left:auto;background-color:#f9f9f9;text-align:right;margin-right:97px}.timeline-content.circular:hover{transform:none;box-shadow:none}.jo-timeline.card1{position:relative;padding:40px 0;max-width:1200px;margin:0 auto}.jo-timeline.card1::before{display:none}.timeline-item.card1{display:flex;justify-content:flex-start;margin-bottom:60px}.timeline-marker.card1{display:none}.timeline-content.card1{position:relative;padding:30px;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,0.1);width:100%;max-width:600px;transition:transform 0.3s ease,box-shadow 0.3s ease;z-index:1}.timeline-item-left .timeline-content.card1{margin-right:auto;background-color:#e9ecef;text-align:left}.timeline-item-right .timeline-content.card1{margin-left:auto;background-color:#f9f9f9;text-align:right}.timeline-image img{max-width:100%;height:auto;border-radius:8px;margin-bottom:15px}.timeline-title.card1{font-size:24px;font-weight:bold;margin-bottom:10px;color:#333}.timeline-description.card1{font-size:16px;color:#555;line-height:1.6}.jo-timeline.card2{position:relative;padding:60px 0;max-width:1000px;margin:0 auto}.jo-timeline.card2::before{display:none}.timeline-item.card2{display:flex;justify-content:flex-start;margin-bottom:60px}.timeline-marker.card2{display:none}.timeline-content.card2{position:relative;padding:25px;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,0.1);width:calc(50% - 30px);transition:transform 0.3s ease,box-shadow 0.3s ease;z-index:1}.timeline-item-left .timeline-content.card2{margin-right:auto;background-color:#e9ecef;text-align:left;margin-left:60px}.timeline-item-right .timeline-content.card2{margin-left:auto;background-color:#f9f9f9;text-align:right;margin-right:60px}.timeline-content.card2:hover{transform:translateY(-10px);box-shadow:0 10px 30px rgba(0,0,0,0.2)}.jo-timeline.icons{position:relative;padding:40px 0;max-width:1000px;margin:0 auto}.jo-timeline.icons::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:3px;background:linear-gradient(to bottom,#ddd,#bbb);transform:translateX(-50%);z-index:0}.timeline-marker.icons{position:absolute;top:50%;left:50%;width:50px;height:50px;background-color:#fff;border:2px solid #007bff;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,0.1);transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;justify-content:center;font-size:20px;color:#007bff}.timeline-marker.icons::before{content:'\f005';font-family:'Font Awesome 6 Free';font-weight:900;font-size:28px;color:#007bff}.timeline-item-left .timeline-marker.icons::before{content:'\f3e5'}.timeline-item-right .timeline-marker.icons::before{content:'\f064'}.jo-timeline.thumbnails{position:relative;padding:40px 0;max-width:1000px;margin:0 auto}.jo-timeline.thumbnails::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:3px;background:linear-gradient(to bottom,#ddd,#bbb);transform:translateX(-50%);z-index:0}.timeline-marker.thumbnails{position:absolute;top:50%;left:50%;width:100px;height:100px;background-color:transparent;border:4px solid #007bff;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,0.1);transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;justify-content:center;font-size:14px;color:#007bff}.timeline-content.thumbnails .timeline-image{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;width:100px;height:100px;border-radius:50%;font-size:26px;color:#007bff;margin:0;line-height:1;text-align:center;pointer-events:none;background:#fff;overflow:hidden}.timeline-item-left .timeline-content.thumbnails .timeline-image{left:100%;transform:translate(-46%,-50%)}.timeline-item-right .timeline-content.thumbnails .timeline-image{left:0%;transform:translate(-55%,-50%)}.timeline-content.thumbnails .timeline-image img{min-height:100px;object-fit:cover}.timeline-content.thumbnails{position:relative;padding:20px;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);width:calc(50% - 60px);transition:transform 0.3s ease,box-shadow 0.3s ease;z-index:1}.timeline-content.thumbnails:hover{transform:none;box-shadow:none}.timeline-item-left .timeline-content.thumbnails{margin-right:auto;background-color:#e9ecef;text-align:left;margin-left:56px}.timeline-item-right .timeline-content.thumbnails{margin-left:auto;background-color:#f9f9f9;text-align:right;margin-right:55px}.timeline-item-left .timeline-description.thumbnails{margin-right:30px}.timeline-item-right .timeline-description.thumbnails{margin-left:30px}.jo-timeline.progress-bar{position:relative;padding:40px 0;max-width:1000px;margin:0 auto}.jo-timeline.progress-bar::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:6px;background:linear-gradient(to bottom,#ddd,#bbb);transform:translateX(-50%);z-index:0}.jo-timeline.progress-bar .progress-fill{content:'';position:absolute;top:0;left:50%;width:6px;background:#007bff;transform:translateX(-50%);transition:height 0.3s ease}.timeline-marker.progress-bar{position:absolute;top:50%;left:50%;width:20px;height:20px;background-color:#fff;border:2px solid #007bff;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,0.1);transform:translate(-50%,-50%);z-index:2}.timeline-content.progress-bar{position:relative;padding:20px;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);width:calc(50% - 40px);transition:transform 0.3s ease,box-shadow 0.3s ease;z-index:1}.timeline-item-left .timeline-content.progress-bar{margin-right:auto;background-color:#e9ecef;text-align:left;margin-left:20px}.timeline-item-right .timeline-content.progress-bar{margin-left:auto;background-color:#f9f9f9;text-align:right;margin-right:20px}@media (max-width:768px){.timeline-item{flex-direction:column;align-items:center}.timeline-item-left .timeline-content,.timeline-item-right .timeline-content{width:90%;margin:0 auto;text-align:center;margin-left:0;margin-right:0}.timeline-marker{top:0%}.timeline-image img{max-width:100%;height:auto}.timeline-marker.zigzag2{top:0%}.timeline-item.zigzag2{flex-direction:column;align-items:center}.timeline-item-left .timeline-content.zigzag2,.timeline-item-right .timeline-content.zigzag2{width:90%;margin:0 auto;text-align:center;margin-left:0;margin-right:0}.timeline-marker.chat1,.timeline-marker.chat2{display:none}.timeline-item-left .timeline-content.card2,.timeline-item-right .timeline-content.card2{width:80%}.timeline-item.chat1{margin-bottom:50px}.timeline-time.chat1{font-size:18px;font-weight:600}.timeline-item-left .timeline-time.chat1{margin-left:0px;bottom:0%;top:unset;left:0%;transform:translateY(120%)}.timeline-item-right .timeline-time.chat1{margin-right:0px;bottom:0%;top:unset;right:0%;transform:translateY(120%)}.timeline-item.chat2{margin-bottom:50px}.timeline-time.chat2{font-size:18px;font-weight:600}.timeline-item-left .timeline-time.chat2{margin-left:0px;bottom:0%;top:unset;left:0%;transform:translateY(120%)}.timeline-item-right .timeline-time.chat2{margin-right:0px;bottom:0%;top:unset;right:0%;transform:translateY(120%)}.timeline-item-left .timeline-content.chat2,.timeline-item-right .timeline-content.chat2{width:70%}.timeline-item-right .timeline-time.chat2{margin-right:10px}.timeline-item-left .timeline-time.chat2{margin-left:10px}.timeline-item.circular{flex-direction:column;align-items:center;margin-bottom:80px}.timeline-item.circular:last-child{margin-bottom:20px}.timeline-item-left .timeline-content.circular,.timeline-item-right .timeline-content.circular{width:100%;text-align:center;margin-left:0;margin-right:0}.timeline-marker.circular{font-size:12px;top:0%}.timeline-item-left .timeline-time.circular,.timeline-item-right .timeline-time.circular{top:0%;left:50%;transform:translate(-50%,-50%)}.timeline-item.icons{margin-bottom:80px}.timeline-item.icons:last-child{margin-bottom:20px}.timeline-marker.icons{top:0%}.timeline-item:hover .timeline-marker.icons{transform:translate(-50%,-60%) scale(1)}.timeline-marker.progress-bar{top:0%;transform:translate(-50%,0%)}.jo-timeline.thumbnails{padding:100px 0 70px}.timeline-item.thumbnails{margin-bottom:90px}.timeline-item.thumbnails:last-child{margin-bottom:0px}.timeline-content.thumbnails{width:100%}.timeline-marker.thumbnails{display:none}.timeline-item-left .timeline-content.thumbnails{margin-left:0}.timeline-item-right .timeline-content.thumbnails{margin-right:0}.timeline-item-left .timeline-content.thumbnails .timeline-image{top:0%;left:50%;border:4px solid #007bff;transform:translate(-50%,-70%)}.timeline-item-right .timeline-content.thumbnails .timeline-image{top:0%;left:50%;border:4px solid #28a745;transform:translate(-50%,-70%)}.timeline-item-left .timeline-description.thumbnails{margin-right:0px}.timeline-item-right .timeline-description.thumbnails{margin-left:0px}}.jo-timeline[data-mode="dark"]::before{background:linear-gradient(to bottom,#444,#333)}.jo-timeline[data-mode="dark"] .timeline-marker{background-color:#333;border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,0.2)}.jo-timeline[data-mode="dark"] .timeline-content{background-color:#333;color:#fff;box-shadow:0 4px 15px rgba(255,255,255,0.1)}.jo-timeline[data-mode="dark"] .timeline-content:hover{box-shadow:0 6px 20px rgba(255,255,255,0.2)}.jo-timeline[data-mode="dark"] .timeline-time{color:#ccc}.jo-timeline[data-mode="dark"] .timeline-title{color:#fff}.jo-timeline[data-mode="dark"] .timeline-description{color:#ddd}.jo-timeline.horizontal[data-mode="dark"] .timeline-content{background-color:#333;color:#fff;box-shadow:none}.jo-timeline.horizontal[data-mode="dark"] .timeline-content:hover{transform:scale(1.05)}