.task-wrap{padding:50px 0}.tasks{max-width:900px;margin:0 auto;padding:0;left:100px;position:relative}@media (max-width: 768px){.tasks{left:0}}.tasks li{position:relative;list-style:none;width:100%;height:190px}@media (max-width: 768px){.tasks li{height:155px}}.tasks li.gray{pointer-events:none}.tasks li.yellow img{animation:wiggle 0.5s infinite;cursor:pointer}.tasks li.yellow .tooltip button{background-color:#FDD53A}.tasks li.blue .tooltip button{background-color:#B9D9EF}.tasks li img{width:200px;height:200px;position:absolute;top:0}@media (max-width: 768px){.tasks li img{width:100px;height:100px}}@media (max-width: 768px){.tasks li::after{content:"" !important;background-image:url(../png/mobile_trail.png) !important;background-size:100%;background-repeat:no-repeat;position:absolute;left:0px;width:100px;height:56px;top:82px}}.tasks li:nth-child(odd) img{left:10px;top:-15px}@media (max-width: 768px){.tasks li:nth-child(odd) img{left:0}}.tasks li:nth-child(odd)::after{content:"";background-image:url(../png/path1.png);background-size:100%;background-repeat:no-repeat;width:69%;position:absolute;height:173px;right:70px;top:0;pointer-events:none}@media (max-width: 768px){.tasks li:nth-child(odd)::after{content:"";background-image:url(../png/mobile_trail.png);background-size:100%;background-repeat:no-repeat;position:absolute;left:0px;width:100px;height:56px;top:82px}}.tasks li:nth-child(odd) .tooltip{left:225px;top:15px}@media (max-width: 768px){.tasks li:nth-child(odd) .tooltip{left:110px;top:0}}.tasks li:nth-child(odd) .tooltip::before{content:"";position:absolute;top:50%;right:100%;margin-top:-15px;border-width:15px;border-style:solid;border-color:transparent rgba(0,30,106,0.9) transparent transparent}@media (max-width: 768px){.tasks li:nth-child(odd) .tooltip::before{top:30%;border-width:10px}}.tasks li:nth-child(even) img{right:55px;top:-20px}@media (max-width: 768px){.tasks li:nth-child(even) img{left:0;right:auto}}.tasks li:nth-child(even)::before{content:"";background-image:url(../png/path2.png);background-size:100%;background-repeat:no-repeat;width:70%;position:absolute;height:180px;left:14px;top:-4px;pointer-events:none}@media (max-width: 768px){.tasks li:nth-child(even)::before{content:none}}.tasks li:nth-child(even) .tooltip{right:270px;top:15px}@media (max-width: 768px){.tasks li:nth-child(even) .tooltip{left:110px;top:0;right:auto}}.tasks li:nth-child(even) .tooltip::after{content:"";position:absolute;top:50%;left:100%;margin-top:-15px;border-width:15px;border-style:solid;border-color:transparent transparent transparent rgba(0,30,106,0.9)}@media (max-width: 768px){.tasks li:nth-child(even) .tooltip::after{top:30%;right:100%;left:auto;border-width:10px;border-color:transparent rgba(0,30,106,0.9) transparent transparent}}.tasks li:first-child::before{content:"";background-image:url(../png/start.png);background-size:100%;position:absolute;width:200px;height:200px;left:-185px;top:16px;z-index:99}@media (max-width: 768px){.tasks li:first-child::before{content:none}}.tasks li:first-child::after{background-image:url(../png/effect-path-1.png)}.tasks li:last-child::before{content:none}@media (max-width: 768px){.tasks li:last-child::after{content:none !important}}.tasks li:nth-child(4)::before{background-image:url(../png/effect-path-2.png)}.tasks li:nth-child(6)::before{background-image:url(../png/effect-path-3.png)}.tasks li:nth-child(10)::before{background-image:url(../png/effect-path-4.png)}#task-popup{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background:#fff;border-radius:32px;padding:30px;z-index:1000;max-width:900px;display:flex;width:100%;gap:30px;box-shadow:1px 5px 18px rgba(0,0,0,0.5)}@media (max-width: 768px){#task-popup{flex-wrap:wrap;max-width:75%;padding:60px 30px 30px}}#task-popup .popup-left{flex:0 0 60%}@media (max-width: 768px){#task-popup .popup-left{flex:0 0 100%}}#task-popup .popup-right{display:flex;flex-wrap:wrap;align-content:space-between}#task-popup #popup-image{max-width:100%;border-radius:16px}#task-popup #popup-title{font-size:24px;color:#001E6A;font-weight:800;margin-top:0}#task-popup #popup-description{color:#001E6A;font-size:18px;line-height:28px}#task-popup #complete-task{background-color:#FDD53A;cursor:pointer;border:none;padding:12px;width:100%;border-radius:16px;font-size:18px;font-weight:700;color:#1C1C1F;margin-bottom:5px}#task-popup #complete-task:hover{background-color:#FFE271}#task-popup .done{background-color:#B9D9EF !important}#task-popup .done:hover{background-color:#B9D9EF !important}#task-popup #close-popup{cursor:pointer;position:absolute;right:-40px;background:transparent;border:none;font-size:30px;top:-40px}@media (max-width: 768px){#task-popup #close-popup{right:10px;top:20px;font-size:30px}}#task-popup #close-popup img{max-width:30px}#task-popup #close-popup img.desktop-close{display:block}@media (max-width: 768px){#task-popup #close-popup img.desktop-close{display:none}}#task-popup #close-popup img.mobile-close{display:none}@media (max-width: 768px){#task-popup #close-popup img.mobile-close{display:block}}.tooltip{position:absolute;background-color:rgba(0,30,106,0.9);width:65%;height:150px;padding:5px;border-radius:16px;display:none;z-index:10;display:flex;align-items:center;font-size:24px;color:#FFF;padding:0 30px;font-weight:700}@media (max-width: 768px){.tooltip{max-width:57%;width:100%;padding:20px;height:100px;font-size:18px;flex-wrap:wrap;align-items:center}}.tooltip button{display:block;width:100%;padding:8px;border-radius:16px;margin-top:20px;color:#1C1C1F;font-size:18px;font-weight:700;border:none}@keyframes wiggle{0%, 100%{transform:rotate(0deg)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}