index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.underline-animation {
  position: relative;
}

.underline-animation::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #fe8b00;
  visibility: hidden;
  transform: scaleX(0.1);
  transition: all 0.3s ease-in-out;
}

.underline-animation:hover::before {
  visibility: visible;
  transform: scaleX(0.8);
}

.no-scrollbar{
  &::-webkit-scrollbar {
    display: none;
  }
  /* Optional: Set scrollbar width to 0 for other browsers */
  scrollbar-width: none;
}

.shimmer {
  background: linear-gradient(
    to right,
    #f0f0f0 0%,
    #e0e0e0 20%,
    #f0f0f0 40%,
    #f0f0f0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 2s ease-in-out;
}

/* Spinner CSS */
.spinner {
  border: 6px solid rgba(0, 0, 0, 0.1);
  border-left-color: #fe8b00; 
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}