/*
 * Shared styles for the service page templates: SEO Services, Social Media,
 * Email Marketing, 360 Digital Marketing and Web Design.
 *
 * Only rules that none of main.css, style.css, about-blog-common.css or
 * contact-work-common.css already provide live here. Utility classes, the
 * reveal/spread/value-card animations and the Tailwind base are all supplied
 * by main.css, so they are deliberately not repeated.
 */

/* Cards that pulse a yellow glow on hover — 360 Digital Marketing, Email
   Marketing, Web Design. */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 192, 1, 0.6);
  }
  100% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  }
}

.card-glow-hover {
  transition: all 0.3s ease !important;
}

.card-glow-hover:hover {
  animation: pulseGlow 1.5s ease-in-out infinite !important;
  border-color: #ffc001 !important;
  z-index: 10;
  position: relative;
}

/* Marching dotted connector between process steps — Email Marketing,
   Social Media. The gray variant lives in page-360-digital-marketing.css and
   reuses the run-dots keyframes below. */
@keyframes run-dots {
  to {
    background-position: -20px 0;
  }
}

.animated-dotted-line {
  background-image: linear-gradient(to right, #ffc001 50%, transparent 50%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  animation: run-dots 0.8s linear infinite;
  border: none !important;
  height: 2px !important;
}