*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#efefef;
    font-family:'Vazirmatn',sans-serif;
    display:flex;
    justify-content:center;
    padding:25px;
}

.phone{

    width:390px;
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.18);

}

header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:28px 22px;

}

.left{

    text-align:right;

}

.day{

    font-size:12px;
    font-weight:700;

}

.date{

    margin-top:8px;
    font-size:10px;

}

.logo{

    text-align:center;

}

.logo img{

    width:52px;
    margin-bottom:10px;

}

.logo h2{

    font-size:10px;
    font-weight:700;

}

.menu{

    font-size:12px;
    cursor:pointer;

}

hr{

    border:none;
    border-top:2px solid #0f6b67;

}

.topInfo{

    display:flex;
    justify-content:space-between;
    padding:20px 22px;
    font-size:20px;

}

.title{

    padding:0 22px;
    margin-bottom:20px;
    font-size:10px;
    font-weight:800;

}

.balanceBox{

    display:flex;
    gap:18px;
    padding:0 18px;
    margin-bottom:28px;

}

.card{

    flex:1;
    background:#f5f5f5;
    border-radius:18px;
    padding:22px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.cardTitle{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    font-size:25px;
    font-weight:700;

}

.line{

    height:1px;
    background:#ddd;
    margin:18px 0;

}

.price{

    text-align:center;
    color:#888;
    letter-spacing:4px;
    font-size:28px;

}

.trade{

    margin:18px;
    border:2px solid #d7d7d7;
    border-radius:20px;
    padding:18px;
    position:relative;

}

.tradeTitle{

    position:absolute;
    right:25px;
    top:155px;

    background:#fff;

    padding:8px 18px;

    border-radius:12px;

    font-size:28px;
    font-weight:700;

}

.buyRow,
.sellRow{

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:20px;

}

.priceGreen{

    background:#0f6b67;

    color:#fff;

    width:200px;
    height:82px;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:12px;
    font-weight:bold;

}

.priceRed{

    background:#e34d59;

    color:#fff;

    width:200px;
    height:82px;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:10px;
    font-weight:bold;

}

.buy,
.sell{

    width:130px;
    height:82px;

    background:#f4f4f4;

    border:none;

    border-radius:14px;

    font-size:10px;

    font-family:inherit;

    font-weight:700;

}

.arrow,
.arrowRed{

    width:70px;
    height:82px;

    border-radius:12px;

    color:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:12px;

}

.arrow{

    background:#0f6b67;

}

.arrowRed{

    background:#e34d59;

}

.gram{

    text-align:center;

    margin-bottom:25px;

    font-size:12px;

    color:#555;

}