/* =========================================================
   06. Drupal Developer Skills
   ========================================================= */

.hi-dev-skills-section {
  background:
    radial-gradient(
      circle at top left,
      rgba(0, 97, 255, 0.22),
      transparent 28%
    ),
    linear-gradient(135deg, #020b21 0%, #031b47 48%, #020b21 100%);
}

.hi-dev-skills-heading {
  max-width: 1180px;
}

.hi-dev-skills-heading h2 {
  font-size: 44px;
}
.hi-dev-skills-heading p {
  font-size: 18px !important;
}
.skill-card h3 {
  font-size: 22px !important;
}

.hi-section-kicker {
  color: #ff6a00;
  font-weight: 800;
}

.hi-section-kicker span,
.orange-line {
  width: 54px;
  height: 2px;
  background: #ff6a00;
  display: block;
}

.skill-card,
.skill-proof-strip {
  border-color: rgba(31, 123, 255, 0.55) !important;
  background: rgba(4, 28, 72, 0.72);
}

.skill-card p,
.skill-proof-strip span {
  color: rgba(255, 255, 255, 0.86);
}

.skill-icon {
  width: 86px;
  height: 86px;
  font-size: 38px;
  background: rgba(13, 97, 223, 0.2);
}

.icon-blue {
  color: #59a5ff;
}

.icon-orange {
  color: #ff7a00;
}

.icon-purple {
  color: #b770ff;
}

.icon-green {
  color: #8ce873;
}

.icon-cyan {
  color: #23cfff;
}

.skill-line {
  border-color: rgba(54, 137, 255, 0.65);
  opacity: 1;
}

.skill-tag {
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  padding: 8px 14px;
  border: 1px solid rgba(52, 137, 255, 0.8);
  border-radius: 50rem;
  background: rgba(0, 62, 145, 0.38);
}

.proof-main-icon {
  width: 76px;
  height: 76px;
  background: linear-gradient(135deg, #0d61df, #003aa8);
  color: #ffffff;
  font-size: 34px;
}

.proof-item i {
  font-size: 38px;
}
/* Bottom proof strip separators */
.skill-proof-strip .row > [class*="col-"]:not(:first-child) {
  border-left: 1px solid rgba(75, 143, 255, 0.55);
}

.skill-proof-strip .row > [class*="col-"] {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Keep first title area clean */
.skill-proof-strip .row > [class*="col-"]:first-child {
  border-left: 0;
}

/* Tablet/mobile: remove vertical lines */
@media (max-width: 1199px) {
  .skill-proof-strip .row > [class*="col-"] {
    border-left: 0 !important;
  }
}
.skill-proof-strip .row > [class*="col-"]:not(:first-child) {
  border-left: 1px solid rgba(75, 143, 255, 0.75);
}
.skill-proof-strip-icon {
  background-color: transparent;
}

@media (max-width: 575px) {
  .skill-icon {
    width: 70px;
    height: 70px;
    font-size: 30px;
  }

  .hi-section-kicker span {
    width: 34px;
  }
}
@media (max-width: 1399px) {
  .hi-dev-skills-heading h2 {
    font-size: 32px;
  }
  .hi-dev-skills-heading p {
    font-size: 15px !important;
  }
  .hi-dev-skills-heading {
    max-width: 960px;
  }
  .skill-card h3 {
    font-size: 16px !important;
  }
  .skill-card p,
  .proof-item {
    font-size: 14px;
  }
  .skill-tag {
    font-size: 12px;
  }
  .skill-proof-strip h3,
  .proof-item strong {
    font-size: 22px;
  }
}