/* Animation Classes */

/* This For btn-primary cause uses blue color in transform : start */
.btn-animated {
  animation: pulse 1.5s ease-in-out 5;
}
.btn-animated:hover {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

/* This For btn-primary cause uses blue color in transform : start */

/* 2 */
    .wiggle {
      animation: wiggle 0.3s ease-in-out 5;
    }

    @keyframes wiggle {
      0%   { transform: rotate(0deg); }
      25%  { transform: rotate(5deg); }
      50%  { transform: rotate(-5deg); }
      75%  { transform: rotate(5deg); }
      100% { transform: rotate(0deg); }
    }
/* 2 */

/* 3 */
    .bounce {
      animation: bounce 0.3s ease-in-out 5;
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      25% {
        transform: translateY(-10px);
      }
      50% {
        transform: translateY(0);
      }
      75% {
        transform: translateY(-5px);
      }
    }
/* 3 */

/* 4 */
    .pulse-text {
      animation: pulseColor 1s ease-in-out 5;
    }

    @keyframes pulse-text {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.1);
        opacity: 0.7;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .pulse-color {
      animation: pulseColor 1.2s ease-in-out 5;
      font-weight: bold;
    }

    @keyframes pulseColor {
      0% {
        transform: scale(1);
        color: #0d6efd; /* Bootstrap primary */
      }
      50% {
        transform: scale(1.1);
        color: #dc3545; /* Bootstrap danger */
      }
      100% {
        transform: scale(1);
        color: #0d6efd;
      }
    }
/* 4 */