/* HK Grotesk Font Family - Zalf Fonts */

@font-face {
    font-family: 'HK Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./HKGrotesk-Medium.eot'); /* IE9 Compat Modes */
    src: url('./HKGrotesk-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./HKGrotesk-Medium.woff2') format('woff2'), /* Modern Browsers */
         url('./HKGrotesk-Medium.woff') format('woff'); /* Pretty Modern Browsers */
}

@font-face {
    font-family: 'HK Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./HKGrotesk-Bold.eot'); /* IE9 Compat Modes */
    src: url('./HKGrotesk-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./HKGrotesk-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('./HKGrotesk-Bold.woff') format('woff'); /* Pretty Modern Browsers */
}

/* CSS Custom Properties for easy usage */
:root {
    --font-hk-grotesk: 'HK Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Utility classes */
.font-hk-grotesk {
    font-family: var(--font-hk-grotesk);
}

.font-hk-grotesk-medium {
    font-family: var(--font-hk-grotesk);
    font-weight: 500;
}

.font-hk-grotesk-bold {
    font-family: var(--font-hk-grotesk);
    font-weight: 700;
}