/* 10/2025 Mods */
#section-category {
  position: relative;
  background-color: #FAF6F1;
  padding: 60px 0;
}

/* Light grain/texture overlay for warmth */
#section-category::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.6), transparent 70%),
                    radial-gradient(circle at 80% 80%, rgba(255, 230, 250, 0.6), transparent 70%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Icon boxes */
.icon-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(230, 230, 230, 0.8);
  border-radius: 18px;
  padding: 18px 0;
  color: #4A4453;
  box-shadow: 0 2px 8px rgba(168, 147, 248, 0.08);
  transition: all 0.25s ease;
  backdrop-filter: blur(6px);
}

.icon-box i {
  font-size: 2rem;
  color: rgb(168, 147, 248);
  transition: all 0.25s ease;
  filter: drop-shadow(0 0 4px rgba(236, 102, 161, 0.3));
}

.icon-box span {
  margin-top: 8px;
  font-weight: 600;
  color: #3b3344;
  letter-spacing: 0.5px;
}

/* Hover effect — pastel neon pop */
.icon-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(168, 147, 248, 0.25);
  border-color: rgba(236, 102, 161, 0.5);
  background: rgba(255, 255, 255, 0.85);
}

.icon-box:hover i {
  transform: scale(1.15);
  color: rgb(236, 102, 161);
  filter: drop-shadow(0 0 10px rgba(222, 142, 249, 0.6));
}

/* Soft pulse animation */
@keyframes softPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.08); }
}

.icon-box:hover i {
  animation: softPulse 1.8s infinite ease-in-out;
}

/* Skill Card */
.skill-card {
  background:#fff;
  border:2px solid #1e1b29;
  border-radius:6px;
  padding:28px 10px 20px;
  box-shadow:3px 3px 0 #1e1b29;
  transition:all .2s ease-in-out;
  font-family:'Chakra Petch',sans-serif;
}

.skill-card i {
  font-size:1.8rem;
  color:rgb(132,33,245);
  margin-bottom:10px;
}

.skill-card p {
  font-weight:700;
  margin:0;
  font-size:0.95rem;
  color:#1e1b29;
}

.skill-card:hover {
  transform:translateY(-4px);
  box-shadow:5px 5px 0 rgb(168,147,248);
  border-color:rgb(168,147,248);
}

@media (max-width:576px){
  .skill-card{padding:20px 5px;}
  .skill-card i{font-size:1.6rem;}
}
/*
  #back-to-top svg {
    transform: rotate(270deg);
  }
*/