/* Premium Smooth Glow Style */

/* Soft Moving Gradient Background */
.tools-section-wrapper {
  background: linear-gradient(135deg, #6a5af9, #ff6fd8, #3cd1ff);
  background-size: 250% 250%;
  animation: softBG 12s ease infinite;
  padding: 2rem 0;
}

@keyframes softBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Header Glow */
.header h1 {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
  transition: 0.3s ease;
}

.header h1:hover {
  transform: translateY(-3px);
}

/* Cards */
.tool-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  transition: 0.35s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* Subtle Shine Effect */
.tool-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  transition: 0.6s ease;
}

.tool-card:hover::after {
  left: 150%;
}

/* Hover effect */
.tool-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/* Icons */
.tool-icon {
  transition: 0.3s ease;
}

.tool-card:hover .tool-icon {
  transform: scale(1.15) rotate(6deg);
}

/* Text stays always visible */
.tool-card h3 {
  color: #2d2d2d;
  transition: 0.25s ease;
}

.tool-card p {
  color: #555;
  transition: 0.25s ease;
}

/* Add gentle color glow on hover (but keep text readable) */
.tool-card:hover h3 {
  color: #4a3eff;
}

.tool-card:hover p {
  color: #555; /* unchanged to avoid disappearing effect */
}

/* Responsive */
@media (max-width: 768px) {
  .tool-card:hover {
    transform: translateY(-5px) scale(1.02);
  }
}