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

@font-face {
    font-family: "Rubik";
    src: url("../Rubik/Rubik-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --gn-font-family: Rubik, "Rubik Fallback", Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
.page-wrapper,
.dashboard-body,
.dashboard-page,
.main-header,
.main-menu,
.navigation,
.logo-text,
.auto-container,
.sec-title,
.section-title {
    font-family: var(--gn-font-family) !important;
}

body :where(a, p, span, div, label, li, td, th, small, strong, b, em, h1, h2, h3, h4, h5, h6, button, input, select, textarea, option) {
    font-family: var(--gn-font-family) !important;
}

.fa,
.fas,
.far,
.fab,
.fal,
.fad,
.fa:before,
.fas:before,
.far:before,
.fab:before,
.fal:before,
.fad:before,
[class^="fa-"]:before,
[class*=" fa-"]:before {
    font-family: "Font Awesome 5 Free" !important;
}

.fab,
.fab:before {
    font-family: "Font Awesome 5 Brands" !important;
}

[class^="flaticon-"]:before,
[class*=" flaticon-"]:before {
    font-family: "Flaticon" !important;
}

[class^="icon_"]:before,
[class*=" icon_"]:before,
[class^="arrow_"]:before,
[class*=" arrow_"]:before,
[class^="social_"]:before,
[class*=" social_"]:before {
    font-family: "ElegantIcons" !important;
}