* {
  font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif !important;
}
body {
  background-color: #f7fafc !important;
}
/* Premium Output Card Design */
.output-card {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fafafa;
  transition: 0.25s ease;
  height: 300px;
}

.output-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0px 12px 26px rgba(0, 0, 0, 0.08);
}

.outputCardSize button {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.outputCardSize:hover button {
  opacity: 1;
}

.output-img {
  transition: 0.3s ease;
}

.output-card:hover .output-img {
  transform: scale(1.06);
}

/* Loader Pulse */
.loader-box {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(120deg, #f0f0f0, #ffffff);
  animation: loaderPulse 1.5s infinite ease-in-out;
}

@keyframes loaderPulse {
  0% {
    background-color: #e9e9e9;
  }
  50% {
    background-color: #f5f5f5;
  }
  100% {
    background-color: #e9e9e9;
  }
}

/* Global Fade Animation */
.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.loaderFull {
  width: 100%;
  height: 100%;
}

.buttons {
  background-color: #032313 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: #fefcfb !important;
  font-weight: 500 !important;
  border: 2px solid transparent !important;
  transition: all 0.5s ease-in-out;
  &:hover {
    /* background-color: transparent !important; */
    color: #032313 !important;
    border: 2px solid #032313 !important;
    color: #f9f9fb;
    background-color: #adc0b536 !important;
  }
}