@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

:root{
    /*Button Color*/
    --btn_primary: #FCD535;
    --btn_secondary: #EAECEF;
    --btn_primary-hvr: #ffdd57;

    /*Font Color*/
    --font_success: #28cc93;
    --font_danger: #DB6579;

    /*Font Size*/
    --jumbo_text: 48px;
    --title: 16px;
    --btn_font-size: 16px;
    --sub_heading: 28px;
}

body{
    font-family: 'IBM Plex Sans Arabic', sans-serif;
}

a{text-decoration: none !important;}

/*===== Font Size ===== */

.jumbo-text{font-size: var(--jumbo_text);}
.title{font-size: var(--title);}
.sub-heading{font-size: var(--sub_heading);}
.btn_warning{
    font-size: var(--btn_font-size);
    font-weight: 600;
    background-color: var(--btn_primary);
    color: #212833;
}

.btn_warning:hover{
    font-size: var(--btn_font-size);
    font-weight: 600;
    background-color: var(--btn_primary-hvr);
    color: #212833;
}

/*=== End Font Size ===*/

.navbar-brand{
    color: var(--font_success) !important;
}

.menu_item{
    color: rgb(54, 54, 54) !important;
    font-size: 16px;
}

.market-name{
    width: 50px;
}

td{
    vertical-align: middle !important;
}

.btn-trade{
    background-color: #25B196;
    transition: 0.3s;
    border-radius: 50px;
    padding: 10px 35px;
    font-size: 12px;
    color: #fff;
    text-decoration: none !important;
}

.btn-trade:hover{
    background-color: #58d4bc;
    color: #fff;
}

.btn-dowload{
    display: flex;
    align-items: center;
    color: #212833;
    transition: 0.3s;
    padding: 15px 25px;
    border-radius: 5px;
    
}

.btn-dowload:hover{
    background-color: #F5F5F5;
    color: #212833;
}

.footer-link{
    color: #707A8A;
    font-size: 14px;
}

.footer-link:hover{
    color: #404041;
    font-size: 14px;
}

.footer-icon{
    color: #616161;
    transition: 0.3s;
}

.footer-icon:hover{
    color: #292929;
}

@media only screen and (min-width: 320px) and (max-width: 425px){
    .jumbo-text{font-size: 26px;}

    td h5{
        font-size: 14px !important;
    }

    td.h5{
        font-size: 14px !important;
    }

    .buy-btn, .coin{
        display: none !important;
    }
}