@import "tailwindcss";
@plugin '@tailwindcss/forms';

@import './_checkbox-radio-switch.css';
@import './_progress.css';
@import './_scrollbars.css';

@theme {
  --breakpoint-3xl: 119rem;
  --breakpoint-4xl: 150rem;
  
  --animate-fade-in: fade-in 250ms ease-in-out;
  --animate-fade-out: fade-out 250ms ease-in-out;
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
}

.scale-enter-active,
.scale-leave-active {
  transition: all 0.2s ease;
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

.card-container {
  position: relative;
  overflow: hidden;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* Ensure the video is behind other content */
  border-radius: 16px; /* Match the rounded corners of the card */
}

.card-content {
  position: relative;
  z-index: 1; /* Ensure content inside the card is above the video */
  padding: 20px; /* Add padding if needed */
  border-radius: 16px; /* Match the rounded corners of the card */
}

img {
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  #particles-js {
    min-width: 100vw;
    min-height: 100vh;
    position: absolute;
    z-index: -0.9;
  }
}

@media screen and (max-width: 768px) {
  #particles-js {
    min-width: 100vw;
    min-height: 100vh;
    position: absolute;
    z-index: 0;
  }
}

.animated-text {
    background-size: 200%;

    -webkit-animation: text-animation 3s ease infinite;
    -moz-animation: text-animation 3s ease infinite;
    animation: text-animation 3s ease infinite;
}

@keyframes text-animation {
    0%,
    100% {
        background-position: 0% 50%;
    }
    
    50% {
        background-position: 100% 50%;
    }
}