:root {
    --plid-h1-font-size-sm: 3.4rem;
    --plid-h1-line-height-sm: 4rem;
    --plid-h1-font-size-lg: 4.8rem;
    --plid-h1-line-height-lg: 5.7rem;
    
    --plid-h2-font-size-sm: 2.4rem;
    --plid-h2-line-height-sm: 2.8rem;
    --plid-h2-font-size-lg: 3.4rem;
    --plid-h2-line-height-lg: 4rem;
    
    --plid-h1-font-weight: 900;
    --plid-h1-font-size: var(--plid-h1-font-size-sm);
    --plid-h1-line-height: var(--plid-h1-line-height-sm);
    
    --plid-h2-font-weight: 800;
    --plid-h2-font-size: var(--plid-h2-font-size-sm);
    --plid-h2-line-height: var(--plid-h2-line-height-sm);
}


@media (min-width: 768px) {
    :root {
        --plid-h1-font-size: var(--plid-h1-font-size-lg);
        --plid-h1-line-height: var(--plid-h1-line-height-lg);
        --plid-h2-font-size: var(--plid-h2-font-size-lg);
        --plid-h2-line-height: var(--plid-h2-line-height-lg);;
    }
}

@font-face {
    font-family: StandardText;
    src: local('Inter-Regular'),
        url('../fonts/Inter-Regular.ttf') format('truetype-variations');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: StandardText;
    src: local('Inter-Medium'),
        url('../fonts/Inter-Medium.ttf') format('truetype-variations');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: StandardText;
    src: local('Inter-SemiBold'),
        url('../fonts/Inter-SemiBold.ttf') format('truetype-variations');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: StandardText;
    src: local('Inter-Bold'),
        url('../fonts/Inter-Bold.ttf') format('truetype-variations');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: HeadingText;
    src: local('Inter-Black'),
        url('../fonts/Inter-Black.ttf') format('truetype-variations');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: RtlText;
    src: local('ExpoArabic'),
        url('../fonts/ExpoArabic-Book.ttf') format('truetype-variations');
    font-style: normal;
}

@font-face {
    font-family: RtlText;
    src: local('ExpoArabic Bold'),
        url('../fonts/ExpoArabic-Bold.ttf') format('truetype-variations');
    font-weight: 700;
}

@font-face {
    font-family: RtlHeadingText;
    src: local('ExpoArabic SemiBold'),
        url('../fonts/ExpoArabic-SemiBold.ttf') format('truetype-variations');
    font-weight: 600;
    font-style: normal;
}

/*
    To override font-family for a specific customer you can do something like
    this in any theme-styles.css file:

    @font-face {
        font-family: StandardText;
        src: local('Times New Roman');
    }
*/

/*
    Make all rem units relative to 10px.
    62.5 * 16px (base) = 10px
    Now 1rem = 10px
*/
html {
    font-size: 62.5% !important; /* Will work when user changes browser font size. */
}

body {
    font-size: 1.4rem;
    line-height: 1.7rem;
    text-align: initial;
    color: #141414;
    font-family: StandardText, sans-serif;
    font-weight: 500;
}

h1,
h2 {
    font-family: HeadingText !important;
    text-align: initial;
}

h1 {
    font-size: var(--plid-h1-font-size) !important;
    line-height: var(--plid-h1-line-height) !important;
    font-weight: var(--plid-h1-font-weight) !important;
}

h2 {
    font-size: var(--plid-h2-font-size) !important;
    line-height: var(--plid-h2-line-height) !important;
    font-weight: var(--plid-h2-font-weight) !important;
}

/* RTL */

[dir="rtl"] body {
    font-family: RtlText;
}

[dir="rtl"] body h1,
[dir="rtl"] body h2 {
    font-family: RtlHeadingText;
}