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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}


@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

.text-gradient_indigo-purple {
  background: linear-gradient(90deg, #6366f1 0%, rgb(168 85 247 / 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


/* HeroCards background shadow */
.shadow-bg {
  position: absolute;
  background: hsl(var(--primary) / 0%);
  border-radius: 24px;
  rotate: 35deg;

  width: 260px;
  top: 750px;
  height: 400px;
  filter: blur(150px);
  animation: shadow-slide infinite 4s linear alternate;
}

@keyframes shadow-slide {
  from {
    background: violet;
    right: calc(50% - 120px); /* Adjusted to center the shadow */
  }
  to {
    background: indigo;
    right: calc(50% - 120px); /* Adjusted to center the shadow */
  }
}

@media (max-width: 1024px) {
  .shadow-bg {
    top: 70px;
  }

  @keyframes shadow-slide {
    from {
      background: hsl(var(--primary) / 20%);
      right: calc(50% - 130px); /* Adjusted to center the shadow */
    }
    to {
      background: hsl(var(--primary) / 50%);
      right: calc(50% - 130px); /* Adjusted to center the shadow */
    }
  }
}

@media (max-width: 768px) {
  .shadow-bg {
    top: 470px;
    width: 190px;
    height: 450px;
    filter: blur(60px);
  }

  @keyframes shadow-slide {
    from {
      background: indigo;
      right: calc(50% - 50px); /* Adjusted to center the shadow */
    }
    to {
      background: violet;
      right: calc(50% - 50px); /* Adjusted to center the shadow */
    }
  }
}