@import "tailwindcss";
@plugin "daisyui";
@plugin "@tailwindcss/typography";
@plugin "@iconify/tailwind4";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

@layer base {
  body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-poppins), sans-serif;
  }
}

@layer components {

  /* Headings */
  .heading {
    font-family: var(--font-montserrat), sans-serif;
    font-weight: 700;
  }

  .section-title {
    font-family: var(--font-montserrat), sans-serif;
    font-weight: 600;
  }

  /* Body text */
  .body-text {
    font-family: var(--font-poppins), sans-serif;
  }
}

@keyframes carousel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

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

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.25s ease-out;
}

.animate-modalIn {
  animation: modalIn 0.3s ease-out;
}

.animate-carousel {
  animation: carousel 12s linear infinite;
  -webkit-animation: carousel 12s linear infinite;
}

.animate-carousel-reverse {
  animation-direction: reverse;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}