/*
|--------------------------------------------------------------------------
| VALORABANK
| EXCHANGE RATES CSS
|--------------------------------------------------------------------------
*/

.exchange-hero{

    min-height:55vh;

    display:flex;
    align-items:center;

    background:
    linear-gradient(
        rgba(8,31,77,.92),
        rgba(8,31,77,.78)
    ),
    url('../images/banking/exchange-hero.jpg');

    background-size:cover;
    background-position:center;

    color:#fff;

}

.exchange-hero h1{

    font-size:3.2rem;
    font-weight:800;

}

.exchange-section{

    padding:100px 0;

    background:#f8fafc;

}

/* ==============================
CARD
============================== */

.exchange-card{

    background:#fff;

    border-radius:30px;

    padding:30px;

    box-shadow:0 25px 80px rgba(0,0,0,.08);

}

/* ==============================
TABLE
============================== */

.rate-table{

    width:100%;

    border-collapse:collapse;

}

.rate-table th,
.rate-table td{

    padding:14px;

    border-bottom:1px solid #e5e7eb;

    text-align:left;

}

.rate-table th{

    color:#081F4D;

    font-weight:800;

}

/* ==============================
CHANGE COLORS
============================== */

.up{

    color:#16a34a;

    font-weight:700;

}

.down{

    color:#dc2626;

    font-weight:700;

}

/* ==============================
GRAPH
============================== */

.chart-box{

    margin-top:20px;

    padding:20px;

    background:linear-gradient(135deg,#081F4D,#103A8C);

    border-radius:20px;

    color:#fff;

}

/* ==============================
RESPONSIVE
============================== */

@media(max-width:768px){

    .exchange-hero h1{

        font-size:2.2rem;

    }

}