@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFPro.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Text';
  src: url('../fonts/SFPro.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro';
  src: url('../fonts/SFPro.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Arabic';
  src: url('../fonts/SFArabic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sf: 'SF Pro Display', 'SF Pro Text', 'SF Arabic', -apple-system, BlinkMacSystemFont, 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

input, textarea, select, button, optgroup, option {
  font-family: inherit;
}