@font-face {
  font-family: "Jost";
  src: url("Jost-VariableFont_wght.ttf") format("truetype"),
    url("Jost-Black.ttf") format("truetype"),
    url("Jost-BlackItalic.ttf") format("truetype"),
    url("Jost-Bold.ttf") format("truetype"),
    url("Jost-BoldItalic.ttf") format("truetype"),
    url("Jost-ExtraBold.ttf") format("truetype"),
    url("Jost-ExtraBoldItalic.ttf") format("truetype"),
    url("Jost-ExtraLight.ttf") format("truetype"),
    url("Jost-ExtraLightItalic.ttf") format("truetype"),
    url("Jost-Italic-VariableFont_wght.ttf") format("truetype"),
    url("Jost-Italic.ttf") format("truetype"),
    url("Jost-Light.ttf") format("truetype"),
    url("Jost-LightItalic.ttf") format("truetype"),
    url("Jost-Medium.ttf") format("truetype"),
    url("Jost-MediumItalic.ttf") format("truetype"),
    url("Jost-Regular.ttf") format("truetype"),
    url("Jost-SemiBold.ttf") format("truetype"),
    url("Jost-SemiBoldItalic.ttf") format("truetype"),
    url("Jost-Thin.ttf") format("truetype"),
    url("Jost-ThinItalic.ttf") format("truetype"),
    url("Jost-VariableFont_wght.ttf") format("truetype"),
    url("arial.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arial" sans-serif;
  src: url("Arial.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* Roboto Regular */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Roboto Italic */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Roboto Thin */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Roboto Thin Italic */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* Roboto ExtraLight */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Roboto ExtraLight Italic */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Roboto Light */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Roboto Light Italic */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Roboto Medium */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Roboto Medium Italic */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Roboto SemiBold */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Roboto SemiBold Italic */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Roboto Bold */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Roboto Bold Italic */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Roboto ExtraBold */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Roboto ExtraBold Italic */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Roboto Black */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Roboto Black Italic */
@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Roboto Condensed Black */
@font-face {
  font-family: "Roboto Condensed";
  src: url("Roboto/Roboto_Condensed-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Roboto Condensed Black Italic */
@font-face {
  font-family: "Roboto Condensed";
  src: url("Roboto/Roboto_Condensed-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Roboto Condensed Bold */
@font-face {
  font-family: "Roboto Condensed";
  src: url("Roboto/Roboto_Condensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Roboto Condensed Bold Italic */
@font-face {
  font-family: "Roboto Condensed";
  src: url("Roboto/Roboto_Condensed-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Roboto Condensed ExtraBold */
@font-face {
  font-family: "Roboto Condensed";
  src: url("Roboto/Roboto_Condensed-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Roboto Condensed ExtraBold Italic */
@font-face {
  font-family: "Roboto Condensed";
  src: url("Roboto/Roboto_Condensed-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Roboto Condensed ExtraLight */
@font-face {
  font-family: "Roboto Condensed";
  src: url("Roboto/Roboto_Condensed-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Roboto Condensed ExtraLight Italic */
@font-face {
  font-family: "Roboto Condensed";
  src: url("Roboto/Roboto_Condensed-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Roboto Condensed Italic */
@font-face {
  font-family: "Roboto Condensed";
  src: url("Roboto/Roboto_Condensed-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Roboto Condensed Light */
@font-face {
  font-family: "Roboto Condensed";
  src: url("Roboto/Roboto_Condensed-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Roboto SemiCondensed Light Italic */
@font-face {
  font-family: "Roboto SemiCondensed";
  src: url("Roboto/Roboto_SemiCondensed-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Roboto SemiCondensed Medium */
@font-face {
  font-family: "Roboto SemiCondensed";
  src: url("Roboto/Roboto_SemiCondensed-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Roboto SemiCondensed Medium Italic */
@font-face {
  font-family: "Roboto SemiCondensed";
  src: url("Roboto/Roboto_SemiCondensed-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Roboto SemiCondensed Regular */
@font-face {
  font-family: "Roboto SemiCondensed";
  src: url("Roboto/Roboto_SemiCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Roboto SemiCondensed SemiBold */
@font-face {
  font-family: "Roboto SemiCondensed";
  src: url("Roboto/Roboto_SemiCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Roboto SemiCondensed SemiBold Italic */
@font-face {
  font-family: "Roboto SemiCondensed";
  src: url("Roboto/Roboto_SemiCondensed-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Roboto SemiCondensed Thin */
@font-face {
  font-family: "Roboto SemiCondensed";
  src: url("Roboto/Roboto_SemiCondensed-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Roboto SemiCondensed Thin Italic */
@font-face {
  font-family: "Roboto SemiCondensed";
  src: url("Roboto/Roboto_SemiCondensed-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}