@font-face {
    font-family: var(--font-roboto-regular);
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: var(--font-roboto-light);
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto-Light.eot');
    src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Light.woff2') format('woff2'),
        url('../fonts/Roboto-Light.woff') format('woff'),
        url('../fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: var(--font-roboto-bold);
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.eot');
    src: url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Bold.woff2') format('woff2'),
        url('../fonts/Roboto-Bold.woff') format('woff'),
        url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: var(--font-roboto-boldCondensed);
    font-family: 'Roboto-BoldCondensed';
    src: url('../fonts/Roboto-BoldCondensed.eot');
    src: url('../fonts/Roboto-BoldCondensed.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-BoldCondensed.woff2') format('woff2'),
        url('../fonts/Roboto-BoldCondensed.woff') format('woff'),
        url('../fonts/Roboto-BoldCondensed.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: var(--font-Jameel-Noori-Nastaleeq);
    font-family: 'Jameel-Noori-Nastaleeq';
    src: url('../fonts/JameelNooriNastaleeq.woff2') format('woff2'),
        url('../fonts/JameelNooriNastaleeq.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {
    --color-red: #cc1532;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-light-white: #f3f3f3;
    --font-roboto-regular: 'Roboto-Regular';
    --font-roboto-light: 'Roboto-Light';
    --font-roboto-bold: 'Roboto-Bold';
    --font-Roboto-BoldCondensed: 'Roboto-BoldCondensed';
    --font-Jameel-Noori-Nastaleeq: 'Jameel-Noori-Nastaleeq';
}