.card-border-glow {
    position: relative;
    padding: 8px; /* this padding = border thickness */
    border-radius: 20px;
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      #ff0055 12%,
      #ff9900 24%,
      #ffee00 36%,
      #33ff77 48%,
      #00ccff 60%,
      #6633ff 72%,
      #ff00cc 84%,
      #ffffff 100%
    );
    background-size: 300% 300%;
    animation: wave-flow 6s ease-in-out infinite;
  }
 
  /* Glow behind the card, matching colors */
  .card-border-glow::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 26px;
    background: inherit;
    background-size: inherit;
    animation: inherit;
    filter: blur(20px);
    opacity: 0.7;
    z-index: -1;
  }
 
  /* Inner white content area sits on top, leaving only the padding visible as border */
  .card-inner-border-glow {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
  }
 
  @keyframes wave-flow {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
  }