/* ===========================================
   MB Bullion Live Future
   FINAL CSS - PART 1
=========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{
    background:#f5f5f5;
}

/* ===========================================
   CONTAINER
=========================================== */

.future-container{

    max-width:980px;

    margin:20px auto;

    padding:15px;

}

/* ===========================================
   TITLE
=========================================== */

.future-title{

    background:#2f3948;

    color:#FFD700;

    font-size:24px;

    font-weight:bold;

    text-align:center;

    padding:14px;

    border-top:2px solid #FFD700;

    border-bottom:2px solid #FFD700;

    margin-bottom:18px;

    letter-spacing:1px;

}

.future-title i{

    margin-right:10px;

}

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

.future-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-bottom:18px;

}

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

.future-card{

    background:#fff;

    border:1px solid #ddd;

    border-radius:8px;

    overflow:hidden;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

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

.future-head{

    background:#2f3948;

    color:#FFD700;

    text-align:center;

    padding:8px;

    font-size:18px;

    font-weight:bold;

    border-bottom:2px solid #FFD700;

    letter-spacing:.5px;

}

/* ===========================================
   BID ASK ROW
=========================================== */

.future-row{

    display:grid;

    grid-template-columns:1fr 1fr;

}

.future-row>div{

    text-align:center;

    padding:7px;

    border-right:1px solid #ececec;

}

.future-row>div:last-child{

    border-right:none;

}

/* ===========================================
   LABEL
=========================================== */

.future-label{

    font-size:13px;

    font-weight:bold;

    color:#666;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/* ===========================================
   PRICE BOX
=========================================== */

.future-price{

    display:inline-block;

    min-width:105px;

    padding:6px 8px;

    background:#fff;

    border:2px solid #ececec;

    border-radius:6px;

    font-size:24px;

    font-weight:bold;

    color:#111;

    text-align:center;

    transition:

    background .25s,

    color .25s,

    border-color .25s,

    box-shadow .25s;

}

/* ===========================================
   GREEN
=========================================== */

.flash-up{

    background:#00b300 !important;

    color:#fff !important;

    border-color:#00ff55 !important;

    box-shadow:

    0 0 16px rgba(0,255,60,.8);

}

/* ===========================================
   RED
=========================================== */

.flash-down{

    background:#d60000 !important;

    color:#fff !important;

    border-color:#ff5b5b !important;

    box-shadow:

    0 0 16px rgba(255,0,0,.8);

}

/* ===========================================
   HIGH LOW
=========================================== */

.future-highlow{

    border-top:1px solid #eee;

    padding:8px;

    text-align:center;

    font-size:14px;

    font-weight:bold;

}

.high{

    color:#0a9f3b;

}

.low{

    color:#d60000;

}

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

.usd-card{

    width:430px;

    margin:0 auto 20px;

    background:#fff;

    border:1px solid #dcdcdc;

    border-radius:8px;

    overflow:hidden;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.usd-head{

    background:#dcecff;

    color:#174a8b;

    text-align:center;

    font-size:18px;

    font-weight:bold;

    padding:8px;

    border-bottom:1px solid #c8daf8;

    letter-spacing:.5px;

}

.usd-values{

    display:grid;

    grid-template-columns:repeat(4,1fr);

}

.usd-values div{

    text-align:center;

    padding:10px 6px;

    border-right:1px solid #eee;

}

.usd-values div:last-child{

    border-right:none;

}

.usd-values span{

    display:block;

    color:#666;

    font-size:12px;

    font-weight:bold;

    margin-bottom:5px;

}

.usd-values h2{

    font-size:22px;

    color:#111;

    font-weight:bold;

}

.usd-values h3{

    font-size:15px;

    font-weight:bold;

}

.usd-values div:nth-child(3) h3{

    color:#11a63d;

}

.usd-values div:nth-child(4) h3{

    color:#d60000;

}

/* ===========================================
   LAST UPDATED
=========================================== */

.last-update{

    text-align:center;

    margin-top:18px;

    font-size:15px;

    font-weight:bold;

    color:#555;

}

.last-update span{

    color:#174a8b;

}

/* ===========================================
   HOVER EFFECTS
=========================================== */

.future-card:hover{

    transform:translateY(-2px);

    transition:.25s;

    box-shadow:0 5px 14px rgba(0,0,0,.12);

}

.usd-card:hover{

    transform:translateY(-2px);

    transition:.25s;

    box-shadow:0 5px 14px rgba(0,0,0,.12);

}

/* ===========================================
   TABLET
=========================================== */

/* ============================
   DESKTOP (1200px+)
============================ */

.future-container{
    width:100%;
    max-width:1200px;
    margin:20px auto;
    padding:15px;
}

.future-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.usd-card{
    width:50%;
    min-width:420px;
}

/* ============================
   TABLET
============================ */

@media (max-width:992px){

.future-container{
    max-width:100%;
    padding:12px;
}

.future-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.future-price{
    font-size:22px;
    min-width:90px;
}

.usd-card{
    width:70%;
    min-width:auto;
}

}

/* ============================
   MOBILE
============================ */

@media (max-width:768px){

.future-container{
    padding:8px;
    margin:0;
}

.future-title{
    font-size:18px;
    padding:12px;
}

.future-grid{
    grid-template-columns:1fr;
    gap:10px;
}

.future-card{
    width:100%;
}

.future-head{
    font-size:17px;
}

.future-row{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.future-price{
    width:100%;
    min-width:unset;
    font-size:28px;
}

.future-highlow{
    font-size:13px;
}

.usd-card{
    width:100%;
}

.last-update{
    font-size:14px;
}

/* Floating button */

#floatingGameBtn{

    width:56px;
    height:56px;
    right:15px;
    bottom:15px;
    font-size:26px;

}

}

/* ============================
   SMALL MOBILE
============================ */

@media (max-width:480px){

.future-title{

    font-size:16px;

}

.future-head{

    font-size:15px;

}

.future-price{

    font-size:24px;

}

.future-label{

    font-size:11px;

}

.future-highlow{

    font-size:11px;

}

.last-update{

    font-size:12px;

}

#floatingGameBtn{

    width:52px;
    height:52px;
    right:12px;
    bottom:12px;
    font-size:24px;

}

}

/* ==========================================
   TOP NAVIGATION
========================================== */

.topNav{

display:flex;

align-items:center;

justify-content:space-between;

background:#2f3948;

padding:15px 20px;

margin-bottom:20px;

border-top:3px solid #FFD700;

border-bottom:3px solid #FFD700;

border-radius:8px;

box-shadow:0 3px 10px rgba(0,0,0,.15);

}

.pageTitle{

display:flex;

align-items:center;

gap:12px;

font-size:30px;

font-weight:bold;

color:#FFD700;

letter-spacing:1px;

}

.navBtn{

display:flex;

align-items:center;

gap:8px;

padding:12px 18px;

background:#FFD700;

color:#222;

text-decoration:none;

font-size:16px;

font-weight:bold;

border-radius:8px;

transition:.3s;

}

.navBtn:hover{

background:#ffea70;

transform:translateY(-2px);

box-shadow:0 0 12px rgba(255,215,0,.5);

}

.detailsBtn{

animation:glowBtn 2s infinite;

}

@keyframes glowBtn{

0%{

box-shadow:0 0 0 rgba(255,215,0,0);

}

50%{

box-shadow:0 0 18px rgba(255,215,0,.8);

}

100%{

box-shadow:0 0 0 rgba(255,215,0,0);

}

}

@media(max-width:768px){

.topNav{

flex-direction:column;

gap:12px;

padding:15px;

}

.pageTitle{

font-size:22px;

text-align:center;

}

.navBtn{

width:100%;

justify-content:center;

}

}