.skill-main {
   width: 100%;
   max-width: 600px;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.skill-main .skill-wrrap {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.skill-main .skill-wrrap .skill-name {
   color: #939393;
   text-align: left;
   font-family: var(--font-poppins);
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
}

.skill-main .skill-wrrap .skill-bar {
   height: 20px;
   border-radius: 10px;
   background: #D9D9D9;
   box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.25) inset;
}

.skill-main .skill-wrrap .skill-per {
   height: 20px;
   background: #27C2B9;
   border-radius: 8px;
   width: 0;
   transition: 1s linear;
   position: relative;
}

.skill-main .skill-wrrap .skill-per:before {
   content: attr(per);
   position: absolute;
   padding: 0 6px;
   background-color: var(--blue);
   color: #fff;
   font-size: 10px;
   font-family: var(--font-poppins);
   border-radius: 4px;
   top: -36px;
   right: 0;
   transform: translateX(50%);
}

.skill-main .skill-wrrap .skill-per:after {
   content: "";
   position: absolute;
   width: 10px;
   height: 10px;
   background-color: var(--blue);
   top: -20px;
   right: 0;
   transform: translateX(50%) rotate(45deg);
   border-radius: 2px;
}