:root
{
    /* font-size */
    --extra-small-text: 11px;
    --small-text: 14px;
    --large-text: 16px;
    --x-large-text: 18px;
    --h5: 20px;
    --h4: 25px;
    --h3: 28px;
    --h2: 39px;
    --h1: 49px;

    /* colors */
    --white: #fff;

    --black-75: #A5A3A4;
    --black-100: #333;
    --black-200: #484546;
    
    --primary-50: #EAEAF4;
    --primary-300: #2E3192;
    --primary-500: #1C1E59;

    --secondary-500: #9C7C3E;

    --purple-1: #874CE1;
    --purple-2: #652EBA;

    --error: #EE1D52;

    --g-1: linear-gradient(90deg,#FF3BFF, #ECBFBF, #5C24FF, #D94FD5);
    --g-2: linear-gradient(193deg, #FFBB89 0%, #7B6AE0 100%);
    --g-3: linear-gradient(221deg, #2E3192 0%, #4300B1 100%);
    
}

*{
    font-family: Expo-Arabic;
}
a{
    text-decoration: none;
}

/* responsive font-size */
@media screen and (max-width: 991px) {
    :root{
        --extra-small-text: 11px;
        --small-text: 12px;
        --large-text: 14px;
        --x-large-text: 16px;
        --h5: 18px;
        --h4: 22px;
        --h3: 26px;
        --h2: 35px;
        --h1: 45px;
    }
}
@media screen and (max-width: 576px) {
    :root{
        --extra-small-text: 11px;
        --small-text: 11px;
        --large-text: 12px;
        --x-large-text: 14px;
        --h5: 16px;
        --h4: 20px;
        --h3: 23px;
        --h2: 28px;
        --h1: 35px;
    }
}

/* text colors */
.white{ color: var(--white); }
.error{ color: var(--error); }
.black-75{ color: var(--black-75); }
.black-100{ color: var(--black-100); }
.black-200{ color: var(--black-200); }
.primary-50{ color: var(--primary-50); }
.primary-300{ color: var(--primary-300); }
.primary-500{ color: var(--primary-500); }
.secondary-500{ color: var(--secondary-500); }
.purple-1{ color: var(--purple-1); }
.purple-2{ color: var(--purple-2); }
/* background colors colors */
.bg-black-75{ background: var(--black-75); }
.bg-black-100{ background: var(--black-100); }
.bg-black-200{ background: var(--black-200); }
.bg-primary-300{ background: var(--primary-300); }
.bg-primary-500{ background: var(--primary-500); }
.bg-secondary-500{ background: var(--secondary-500); }
.bg-purple-1{ background: var(--purple-1); }
.bg-purple-2{ background: var(--purple-2); }
/* background gradient colors */
.bg-g1 { background: var(--g-1); }
.bg-g2 { background: var(--g-2); }

.active-primary-50:hover{ color: var(--primary-50); }
.secondary-500-hover:hover{ color: var(--secondary-500); }

/* font weihts */
.weight-700{
    font-weight: 700 !important;
}
.weight-600{
    font-weight: 600 !important;
}
.weight-500{
    font-weight: 500 !important;
}
.weight-400{
    font-weight: 400 !important;
}
.weight-300{
    font-weight: 300 !important;
}

body, html{
    overflow-x: hidden;
}

/* font size */
.extra-small-text{
    font-size: var(--extra-small-text);
}
.small-text{
    font-size: var(--small-text);
}
.large-text{
    font-size: var(--large-text);
}
.x-large-text{
    font-size: var(--x-large-text);
}
h1, .h1{
    font-size: var(--h1) !important;
}
h2, .h2{
    font-size: var(--h2) !important;
}
h3, .h3{
    font-size: var(--h3) !important;
}
h4, .h4{
    font-size: var(--h4) !important;
}
h5, .h5{
    font-size: var(--h5) !important;
}

.max-min-lines-4{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5em;
    min-height: 6em;
}