/* =========================
   JOB ROLES AFTER COMPLETION
   ========================= */

.roles-section {
  background-image: linear-gradient(180deg, #0B73D00F 0%, #0B73D005 100%);
  padding: 80px 0;
  text-align: center;
}

.roles-wrap {
  width: 90%;
  max-width: 1100px;
  margin: auto;
  padding: 60px 0;
}

/* TITLE */
.roles-title {
  color: #2c3e50;
  font-size: 32px;
  margin-bottom: 20px;
}

/* LIST */
.roles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 50px;
}

/* BADGE */
.role-badge {
  background: #ffffff;
  padding: 20px 35px 20px 50px;
  border-radius: 50px;
  border: 3px solid #317ffe;
  font-weight: 600;
  color: #2c3e50;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  position: relative;
  transition: all 0.3s ease;
}

.role-badge:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 35px rgba(49,127,254,0.25);
}

/* RESPONSIVE */
@media (max-width: 480px) {
  .role-badge {
    padding: 16px 28px;
    font-size: 14px;
  }
}