.skill {
  margin-top: 30px;
}

.skills-card {
  padding: 25px;
  margin-bottom: 25px;
}

.skill-category {
  color: var(--orange-yellow-crayola);
  font-size: var(--fs-3);
  margin-bottom: 20px;
}

.skills-grid {
  display: grid;
  gap: 15px;
}

.skill-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: var(--border-gradient-onyx);
  padding: 18px;
  border-radius: 14px;

  transition: var(--transition-1);
}

.skill-box:hover {
  transform: translateY(-3px);
}

.skill-box h5 {
  color: var(--white-2);
  font-size: var(--fs-5);
  margin-bottom: 5px;
}

.skill-box p {
  color: var(--light-gray-70);
  font-size: var(--fs-6);
}

.skill-level {
  padding: 6px 14px;
  border-radius: 10px;
  font-size: var(--fs-7);
  font-weight: var(--fw-500);
  white-space: nowrap;
}

/* LEVEL COLOR */

.skill-level.basic {
  background: hsla(210, 100%, 60%, 0.15);
  color: hsl(210, 100%, 70%);
}

.skill-level.competent {
  background: hsla(145, 70%, 50%, 0.15);
  color: hsl(145, 80%, 65%);
}

.skill-level.advanced {
  background: hsla(35, 100%, 60%, 0.15);
  color: hsl(35, 100%, 70%);
}

.skill-level.expert {
  background: hsla(45, 100%, 60%, 0.15);
  color: var(--orange-yellow-crayola);
}

/* SOFT SKILL */

.soft-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.soft-item {
  background: var(--eerie-black-2);
  color: var(--white-2);

  padding: 12px 18px;
  border-radius: 12px;

  font-size: var(--fs-6);

  border: 1px solid hsla(0, 0%, 100%, 0.05);

  transition: var(--transition-1);
}

.soft-item:hover {
  border-color: var(--orange-yellow-crayola);
  color: var(--orange-yellow-crayola);

  transform: translateY(-2px);
}