:root {
   --main-font-reg: sfuireg;
   --main-font-bold: sfuibold;
   --main-font-light: sfuilight;
   --main-font-medium: sfuimedium;
   --main-font-semibold: sfuisemibold;
   --bg-white: white;
   --white: white;
   --bg-blue: #5A85D7;
   --bg-blue-tr: #5A85D7C7;
   --blue: #5A85D7;
   --blue-active: #2153B4;
   --bg-blue-hover: #2A60C6;
   --bg-blue-active: #2153B4;
   --bg-blue-tr: #5A85D7C7;
   --bg-orange-gr: linear-gradient(317.41deg, #F35F0C 3.86%, #FE8312 88.96%);
   --orange: #FF5800;
   --bg-grey: #F5F5F5;
   --grey1: #848383;
   --grey2: #515151;
   --grey3: #CACACA;
   --grey4: #C8C8C8;
   --red: #FF0000;

}

@font-face {
    font-family: sfuireg;
    src: url('../fonts/sf-ui-display/SFUIDisplay-Regular.ttf');
    font-display: swap;
}

@font-face {
    font-family: sfuibold;
    src: url('../fonts/sf-ui-display/SFUIDisplay-Bold.ttf');
    font-display: swap;
}

@font-face {
    font-family: sfuisemibold;
    src: url('../fonts/sf-ui-display/SFUIDisplay-Semibold.ttf');
    font-display: swap;
}

@font-face {
    font-family: sfuilight;
    src: url('../fonts/sf-ui-display/SFUIDisplay-Light.ttf');
    font-display: swap;
}

@font-face {
    font-family: sfuimedium;
    src: url('../fonts/sf-ui-display/SFUIDisplay-Medium.ttf');
    font-display: swap;
}