.animated-words {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    color: #007BFF;
    font-weight: bold;
    white-space: nowrap; /* Ensure no wrapping */
    height: 1.5rem; /* Adjust container height */
}

.word {
    display: block;
    background: #00FF37;
    background: repeating-linear-gradient(to left, #00FF37 0%, #00C8FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100%;
    height: 100%; /* Ensure words fill the container */
    animation: flipWords 15s infinite;
    text-align: center; /* Center the words */
}

@keyframes flipWords {
    0% { transform: translateY(0);}
    12.5% { transform: translateY(-100%); }
    25% { transform: translateY(-200%); }
    37.5% { transform: translateY(-300%); }
    50% { transform: translateY(-400%); }
    62.5% { transform: translateY(-500%); }
    75% { transform: translateY(-600%); }
    87.5% { transform: translateY(-700%); }
}
 .card {
  position: relative;
  border-radius: 16px;
  padding: 30px;
  width: 70%;
  height: 80%;
  overflow: hidden;
  z-index: 1;
  background-color: #fff; /* fallback */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -1;
  background: linear-gradient(200deg, #c1b6ff 0%, #ffffff 45.21%);
  animation: rotateGradient 30s ease-in-out infinite;
  transform-origin: center;
  border-radius: 50%;
}

@keyframes rotateGradient {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(150deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

    .tab-group {
      display: flex;
      margin-bottom: 20px;
    }

    .tab {
      padding: 10px;
      margin: 0 4px;
      border-radius: 8px;
      cursor: pointer;
      transition: 0.3s;
    }

    .label {
      margin-top: 20px;
      margin-bottom: 5px;
      color: #555;
    }

    .slider-container {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    input[type=range] {
      width: 100%;
      accent-color: #6C55F9;
    }

    input[type=number] {
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid #ccc;
      width: 100%;
    }

    .result {
      margin-top: 30px;
      font-weight: bold;
    }