.skill{box-sizing:border-box;padding-left:calc(150px + 5rem);padding-right:5rem;background-color:#1d1d1d;flex-direction:row;justify-content:space-between;align-items:center;gap:3rem;width:100%;min-height:100vh;padding-block:5rem;display:flex}.skill-left{flex-direction:column;gap:2rem;display:flex}.skill-heading{color:#08fdd8;font-family:Inconsolata;font-size:62px;line-height:36px}.skill-heading:before{top:-25px}.skill-para{color:#fff;max-width:525px;line-height:26px;animation:.5s 1.3s both fadeUp}.skill a{color:#08fdd8;text-decoration:none;position:relative}.skill a:before{content:"";transform-origin:100%;background-color:#08fdd8;width:100%;height:2px;transition:transform .2s;position:absolute;bottom:-2px;transform:scaleX(0)}.skill a:hover:before{transform-origin:0;transform:scaleX(1)}.skill-right{color:#fff;flex-direction:column;gap:2.5rem;width:50%;font-family:sans-serif;font-weight:600;display:flex}.skill-bar{flex-direction:column;gap:.5rem;width:100%;display:flex}.bar{background-color:#373737;width:100%;height:2px;position:relative}.bar:before{content:"";opacity:0;animation:1.5s cubic-bezier(.39,.81,.48,.98) forwards scaleRight;position:absolute;inset:0}.html:before{background-color:#08fdd8;width:95%;animation-delay:.1s}.css:before{background-color:#ff2253;width:90%;animation-delay:.2s}.tailwind:before{background-color:#38bdf8;width:90%;animation-delay:.3s}.js:before{background-color:#d26cd5;width:88%;animation-delay:.4s}.ts:before{background-color:#3282e6;width:70%;animation-delay:.5s}.react:before{background-color:#08fdd8;width:80%;animation-delay:.6s}.next:before{background-color:#ff0;width:55%;animation-delay:.7s}.gsap:before{background-color:#43ed5c;width:80%;animation-delay:.8s}.three:before{background-color:#915eff;width:30%;animation-delay:.9s}@keyframes scaleRight{0%{opacity:0;transform-origin:0;transform:scaleX(0)}to{opacity:1;transform-origin:0;transform:scaleX(1)}}@media (max-width:1080px){.skill{flex-direction:column;align-items:flex-start;padding:5rem}.skill-left,.skill-right,.skill-bar{width:100%}.skill-para{width:100%;max-width:1080px}}@media (max-width:720px){.skill{padding:5rem 3rem}}@media (max-width:440px){.skill-left{gap:.5rem}.skill-heading{margin-bottom:15px;font-size:44px;line-height:26px}.skill-heading:before{top:-18px}.skill-heading:after{bottom:-30px}}@media (max-width:340px){.skill{padding:5rem 2rem}.skill-heading{font-size:38px;line-height:22px}}