/* styles.css */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .transition-navbar {
    transition: all 0.3s ease-in-out;
  }

  .text-balance {
    text-wrap: balance;
  }

  .animate-shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
  }

  @keyframes shake {

    10%,
    90% {
      transform: translateX(-1px);
    }

    20%,
    80% {
      transform: translateX(2px);
    }

    30%,
    50%,
    70% {
      transform: translateX(-4px);
    }

    40%,
    60% {
      transform: translateX(4px);
    }
  }

  .card-shadow {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }

  .transition-custom {
    transition: all 0.3s ease;
  }

  .faq-item {
    margin-bottom: 1.5rem;
  }

  .faq-marker {
    width: 2rem;
    height: 2rem;
    background-color: theme('colors.primary/10');
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
  }
}