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

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    background:#000;

    font-family:Arial,sans-serif;

    color:#fff;
}

body{

    padding:10px;
zoom:0.80;

}

/* =========================
HEADER
========================= */

.top-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;
}

.logo-title{

    display:flex;

    align-items:center;

    gap:15px;
}

.logo{

    width:75px;
    height:75px;

    border:3px solid #FFD700;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#FFD700;

    font-size:32px;

    font-weight:bold;
}

.main-title{

    font-size:52px;

    font-weight:bold;

    color:#fff;

    text-transform:uppercase;
}

.main-title span{

    color:#FFD700;
}

/* =========================
DATE BOX
========================= */

.date-box{

    border:2px solid #FFD700;

    border-radius:12px;

    padding:10px 16px;

    min-width:220px;
}

.date-row{

    font-size:22px;

    font-weight:bold;

    line-height:1.4;
}

/* =========================
TOP GRID
========================= */

.top-section{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-bottom:12px;
}

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

.card{

    border-radius:15px;

    overflow:hidden;

    border:2px solid;
}

.gold-card{

    border-color:#B59410;
}

.exchange-card{

    border-color:#2fb344;
}

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

.card-header{

    padding:12px;

    text-align:center;

    font-size:32px;

    font-weight:bold;

    color:#fff;
}

.gold-card .card-header{

    background:linear-gradient(
    to right,
    #b8860b,
    #B59410
    );
}

.exchange-card .card-header{

    background:linear-gradient(
    to right,
    #0b7a1c,
    #2fb344
    );
}

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

.rate-table{

    width:100%;

    border-collapse:collapse;

    background:#fff;
}

.rate-table th{

    background:#111;

    color:#fff;

    font-size:22px;

    padding:10px;
}

.rate-table td{

    padding:8px;

    border-bottom:1px solid #ddd;

    text-align:center;
}

/* =========================
KARAT BOX
========================= */

.karat{

    background:linear-gradient(
    to bottom,
    #f7c948,
    #d4a017
    );

    color:#fff;

    border-radius:10px;

    font-size:30px;

    font-weight:bold;

    padding:10px;
}

.exchange-card .karat{

    background:linear-gradient(
    to bottom,
    #1f9d36,
    #0b7a1c
    );
}

/* =========================
RATE
========================= */

.rate{

    font-size:48px;

    font-weight:bold;

    line-height:1;

    color:#b8860b;
}

.exchange-card .rate{

    color:#0b7a1c;
}

/* =========================
SILVER
========================= */

.silver-card{

    border:2px solid #4d8dff;

    border-radius:15px;

    overflow:hidden;
}

.silver-header{

    background:linear-gradient(
    to bottom,
    #ffffff,
    #d6dce8
    );

    color:#002060;

    text-align:center;

    font-size:42px;

    font-weight:bold;

    padding:10px;
}

.silver-table{

    width:100%;

    border-collapse:collapse;

    background:#fff;
}

.silver-table th{

    background:#003c9e;

    color:#fff;

    font-size:22px;

    padding:10px;
}

.silver-table td{

    padding:8px;

    border-bottom:1px solid #ddd;

    text-align:center;
}

.silver-type{

    background:linear-gradient(
    to bottom,
    #005be3,
    #003c9e
    );

    color:#fff;

    border-radius:10px;

    font-size:30px;

    font-weight:bold;

    padding:10px;
}

.silver-rate{

    font-size:48px;

    font-weight:bold;

    color:#003c9e;
}

/* =========================
FOOTER
========================= */

.footer{

    text-align:center;

    margin-top:10px;

    font-size:18px;

    font-weight:bold;
}