.f-hero {
  @apply relative min-h-[600px] md:min-h-[700px] lg:min-h-[700px];
  @apply flex items-center overflow-hidden;
}

.f-hero-background {
  @apply absolute inset-0 w-full h-full object-cover z-0;
  object-position: center center;
}

.f-hero-overlay {
  @apply absolute inset-0 z-[1] bg-black/5;
}

.f-hero--right .f-hero-overlay {
  @apply md:bg-gradient-to-r;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 15%,
    rgba(0, 0, 0, 0.1) 30%,
    rgba(0, 0, 0, 0.5) 45%,
    rgba(0, 0, 0, 0.5) 55%,
    rgba(0, 0, 0, 0.5) 65%,
    rgba(0, 0, 0, 0.5) 75%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.f-hero--left .f-hero-overlay {
  @apply md:bg-gradient-to-l;
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.5) 60%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.f-hero--center .f-hero-overlay {
  @apply bg-black/50;
}

.f-hero-container {
  @apply relative z-[2] w-full max-w-[1400px] mx-auto;
  @apply px-6 md:px-8 py-8 md:py-1;
  @apply grid grid-cols-1 gap-4;
}

.f-hero--right .f-hero-container {
  @apply md:grid-cols-2;
}

.f-hero--right .f-hero-content {
  @apply md:col-start-2;
}

.f-hero--left .f-hero-container {
  @apply md:grid-cols-2;
}

.f-hero--left .f-hero-content {
  @apply md:col-start-1;
}

.f-hero--center .f-hero-container {
  @apply md:grid-cols-1 md:max-w-4xl md:text-center;
}

.f-hero-content {
  @apply flex flex-col gap-6 text-[--f-hero-text] mx-1;
}

.f-hero-titles {
  @apply space-y-2;
}

.f-hero-title {
  @apply text-4xl md:text-5xl lg:text-6xl text-[--f-hero-header];
  @apply font-bold leading-tight m-0;
  @apply drop-shadow-[0_2px_8px_rgba(0,0,0,0.8)];
}

.f-hero-subtitles {
  @apply space-y-4;
}

.f-hero-subtitle {
  @apply text-lg md:text-xl lg:text-2xl pl-9;
  @apply leading-relaxed m-0;
  @apply opacity-0 animate-fade-in-up;
  @apply drop-shadow-[0_1px_4px_rgba(0,0,0,0.8)];
  animation-delay: calc(var(--delay, 0) * 150ms);
}

.f-hero-description {
  @apply text-base md:text-lg leading-relaxed;
  @apply opacity-90 max-w-2xl m-0;
  @apply drop-shadow-[0_1px_4px_rgba(0,0,0,0.8)];
}

.f-hero-ctas {
  @apply flex flex-wrap gap-4 mt-2 justify-center;
}

.f-hero-ctas a {
  @apply w-full md:w-auto md:min-w-[280px] md:flex-1 md:max-w-[400px] justify-center;
}


@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}