/* Define the font family */
@font-face {
  font-family: 'BrandFont';
  src: url('/assets/fonts/sriracha-regular/sriracha-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Create a helper class */
.font-brand {
  font-family: 'BrandFont', sans-serif !important;
}

#how-to-use i {
    /* Gives the icons a subtle "pop" without being heavy */
    background: rgba(13, 110, 253, 0.05);
    padding: 15px;
    border-radius: 50%;
}

/* Letter spacing for uppercase headers and badges */
.tracking-wider {
    letter-spacing: 0.1em;
}

/* Optional: Add a smooth hover effect to your blog cards */
.card.shadow-sm {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card.shadow-sm:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}