/*
  This file is for custom styles that are not covered by the standard Tailwind CSS utility classes.
*/

/* --- Google Font: Inter --- */
/* This sets the default font for the entire application. */
body {
    font-family: 'Inter', sans-serif;
}

/* --- Custom Animations for Hero Section --- */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
  Applying the animations.
  The 'forwards' value ensures the element retains the style of the last keyframe.
*/
.animate-fade-in-down {
  /* Animation for the main headline */
  animation: fadeInDown 0.8s ease-out forwards;
}

.animate-fade-in-up {
  /* Animation for the sub-headline, with a slight delay to start after the main one */
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
  /* Start as invisible until animation begins to prevent content flash */
  opacity: 0; 
}