.card-border-animation {
    position: relative;
    z-index: 1;
    background-color: white;
    border-radius: 0.75rem; /* matches Tailwind's rounded-xl */
    overflow: hidden;
  }
  
  .card-border-animation::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px; /* thickness of the border */
    background: linear-gradient(270deg, #00FFA3, #DC1FFF, #00FFA3);
    background-size: 600% 600%;
    border-radius: inherit;
    animation: borderAnimation 4s linear infinite;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
  }
  
  @keyframes borderAnimation {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 200% 50%;
    }
  }


  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  .animate-bounce {
    animation: bounce 1s infinite;
  }