@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap");*{box-sizing:border-box;font-family:Poppins,sans-serif;margin:0;padding:0}body{background-color:#fff;color:#000;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400;text-decoration:none}.container{height:fit-content;margin:80px auto;max-width:1200px}.box,.container{position:relative}.box{animation:animateBox .3s linear forwards;opacity:0;padding:1rem 3rem;width:50%}@keyframes animateBox{0%{opacity:.8;transform:translateY(500px) scale(0)}to{opacity:1;transform:translateY(0) scale(1)}}.box:nth-child(2){animation-delay:0s}.box:nth-child(3){animation-delay:.4s}.box:nth-child(4){animation-delay:.6s}.box:nth-child(5){animation-delay:.9s}.box:nth-child(6),.box:nth-child(7){animation-delay:1s}.box-left{left:0}.box-right{left:50%}.box i{align-items:center;background:linear-gradient(-311deg,#000,#003a40,#000);border-radius:50%;display:flex;font-size:25px;height:50px;justify-content:center;position:absolute;right:-25px;top:30px;width:50px;z-index:10}.box .angular,.box .css,.box .html,.box .javascript,.box .react,.box .vue{border:4px solid #00626c;color:#d6c90f}.box-right i{left:-25px}.info{borser-bottom:2px;background:#000;border-bottom:2px solid #00626c;border-radius:10px;box-shadow:0 5px 9px #000;color:#fafafa;padding:1rem 1.5rem;position:relative}.info h2{color:#d6c90f;font-size:1.4rem;font-weight:600}.info h2,.info p{margin-bottom:10px}.info p{font-size:14px}.info a{color:var(--blue);display:none;font-size:1rem;font-weight:500;text-decoration:none}.info a:hover{text-decoration:underline}.info:after{border-bottom:14px solid transparent;border-left:14px solid #002124;border-top:14px solid transparent;content:"";height:0;position:absolute;right:-14px;top:25px;width:0;z-index:10}.box-right .info:after{border-left:0;border-right:14px solid #002124;left:-14px}.vertical-line{animation:animateLine 3s linear forwards;background:linear-gradient(45deg,#051719,#003136 186%);border-radius:2px;height:100%;left:50%;position:absolute;top:0;transform:translateX(-50%);width:6px}@keyframes animateLine{0%{height:0}to{height:100%}}@media screen and (max-width:775px){.container{margin:40px auto}.vertical-line{left:60px}.box{padding-left:109px;width:100%}.box-left,.box-right{left:0}.box i{left:35px}.info:after{left:-16px}.box-left .info:after{border-left:0;border-right:14px solid #fff;left:-14px}}@media screen and (max-width:500px){.vertical-line{left:40px}.box{padding-left:85px;padding-right:1.5rem;width:100%}.box i{left:15px}}