.vol-header h3 {
    margin-bottom: 25px !important;
}
.zone-sub {
    
    margin-bottom: 20px !important;
}

.compare-sub {
    
    margin-bottom: 20px !important;
}


body .card {
    padding-top: 30px !important;
    padding-bottom: 20px !important;
}

.swap-label {
    padding: 0px !important;
}



.faq-link{
  text-decoration:none !important;
  color: unset !important;
  display:block;
}


.pair-link{
  text-decoration:none !important;
  display:block;
}

.pair-link:link,
.pair-link:visited,
.pair-link:hover,
.pair-link:active{
  color: unset !important;
}


.ticker-link{
  text-decoration:none !important;
  display:block;
}


.forex-dashboard1 {
    margin: 0 0 40px 0 !important;
}


.card {
    padding: 20px !important;
}

@media (max-width: 767px) {
    .card {
        padding: 10px !important;
    }


}


.hero {
    border-radius: 12px !important;
    box-shadow: 0 0 15px rgb(0 0 0 / 55%) !important;
}



.market-value span {
    font-size: 14px;
}

.converter-desc{
  background:rgba(0,255,156,0.06);
  
}


.internal-link-box {
    margin-top: 20px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.internal-link-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.internal-link-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
    margin-bottom: 12px;
}

.internal-link-action {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #f5c542;
    text-decoration: none;
}

.internal-link-action:hover {
    text-decoration: underline;
}

.yellow {
    color: #f5c542;
    font-weight: 700;
}



.sell {
  padding: 4px 8px;
  border-radius: 6px;
}

.sell.green {
 background: rgb(0 200 0 / 18%);
	    display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: center;
}

.sell.red {
  background: rgb(255 0 0 / 19%);
	    display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: center;
}

.sell.yellow {
 background: rgb(255 200 0 / 21%);
	    display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: center;
}



.spinner {
  width: 35px;
  height: 35px;
  border: 4px solid rgba(0,255,156,0.2);
  border-top: 4px solid #00ff9c;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



.modern-table .row {
  grid-template-columns: 4fr 0.7fr !important;
}

@media (max-width: 767px) {
  .modern-table .row {
    grid-template-columns: 2fr 0.8fr !important;
  }
}



.swap-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #aaa;
    padding: 0 6px;
    font-size: 14px;
    gap: 5px;
}


.result-box #result {
    margin-bottom: 5px;
    font-size: 22px !important;
    font-weight: 700 !important;
}

.result-box {
    margin-top: 20px !important;
}


body .card {
    color: #fff;
}


.card #currencySelector {
    margin-top: 20px;
}


.card h3 {
    margin: 30px 0 1px 0;
}


.card.market-move .live-dot {
  display: inline-block;
  margin-top: 20px;
}

.card.rates-card .live-dot {
  display: inline-block;
  margin-top: 20px;
}




.card.volatility-card .pulse {
  display: inline-block;
  margin-top: 20px;
}

.card.zone-card .live-dot {
  display: inline-block;
  margin-top: 20px;
}

.market-grid {
  display: none !important;
}

.market-grid.is-visible {
  display: grid !important;
}

.snapshot-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:10px;
}

.snapshot-note{
  font-size:13px;
  line-height:1.6;
	margin-top: 30px;
  margin-bottom:18px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
}

/* directional styling */
.snapshot-note.up{
  background:rgba(0,255,156,0.06);
  
}

.snapshot-note.down{
  background:rgba(255,82,82,0.06);
 
}

.snapshot-note.neutral{
  background:rgba(255,204,0,0.06);
 
}


/* RESULT GRID */
.market-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

/* CARD */
.market-card{
  position:relative;
  padding:16px;
  border-radius:16px;

  background:linear-gradient(145deg,#0a1f44,#061630);
  border:1px solid rgba(255,255,255,0.06);

  box-shadow:0 10px 25px rgba(0,0,0,0.45);
  overflow:hidden;

  transition:0.3s ease;
}

.market-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,0.6);
}

/* subtle glow */
.market-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(0,255,156,0.08),transparent);
  opacity:0;
  transition:0.4s;
}

.market-card:hover::before{
  opacity:1;
}

/* HEADER */
.market-card h4{
  font-size:15px;
  font-weight:700;
  margin-bottom:12px;

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

  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

/* BODY GRID */
.market-body{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* BLOCK */
.market-block{
  padding:12px;
  border-radius:12px;

  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);

  transition:0.25s;
}

.market-block:hover{
  background:rgba(0,255,156,0.06);
  transform:scale(1.02);
}

/* TITLE */
.market-title{
  font-size:12px;
  color:rgba(255,255,255,0.6);
  margin-bottom:6px;
}

/* VALUE */
.market-value{
  font-size:15px;
  font-weight:700;
}

/* BIG PRICE */
.market-price{
  font-size:20px;
  font-weight:800;
  margin-bottom:6px;
}

/* COLORS */
.green{color:#00ff9c;}
.red{color:#ff5252;}
.yellow{color:#ffcc00;}

/* movement row */
.market-moves{
  font-size:13px;
  line-height:1.6;
}



.comparefield {     
display: flex;    
 flex-direction: row;    
 gap: 10px; 
}


.rate-strip{
  background: linear-gradient(145deg,#0e224a,#071a3a);
  border: 1px solid rgba(255,255,255,0.05);
  margin-top: 20px;
}

.rate-strip-box{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 10px;
}

.strip-item{
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}

.strip-item .label{
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}

.strip-item .value{
  font-size: 14px;
  font-weight: 700;
  margin-top: 5px;
}

.green{ color:#00ff9c; }
.red{ color:#ff5252; }

@media(max-width:768px){
  .rate-strip-box{
    grid-template-columns:1fr;
  }
}




/* =========================
   FAQ SECTION (PREMIUM STYLE)
========================= */

.faq-card{
  background: linear-gradient(145deg,#0e224a,#081a3a);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  border-radius: 14px;
  padding: 18px;
}

.faq-card h3{
  margin-bottom: 12px;
  font-size: 16px;
  color: #fff;
}

/* list container */
.faq-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* each item */
.faq-item{
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  transition: 0.25s ease;
  position: relative;
  overflow: hidden;
}

/* hover glow */
.faq-item:hover{
  transform: translateY(-3px);
  background: rgba(0,255,156,0.06);
  border-color: rgba(0,255,156,0.15);
}

/* question */
.faq-q{
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}

/* answer */
.faq-a{
  font-size: 14px;
  color: #ffcc00;
  font-weight: 700;
}

/* highlight value */
.faq-a b{
  color: #00ff9c;
}







.card {
    margin-top: 40px !important;
}

.modern-table .row {
font-size: 14px !important;
}



.market-body {
    font-size: 14px !important;
}


.result-box p {
    font-size: 14px !important;
    color: #ffcc00 !important;
    font-weight: 600;
}

.compare-chart-box {
    margin-top: 20px;
}


/* =========================
   MARKET SIDE-BY-SIDE FIX
========================= */

.market-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 16px;
  align-items: stretch;
}

/* each card = equal height + strong visual balance */
.market-card{
  background: linear-gradient(145deg,#0e224a,#071a3a);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  transition: 0.25s ease;
}

/* hover glow = eye catch */
.market-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,255,156,0.10);
  border-color: rgba(0,255,156,0.15);
}

/* header inside each card */
.market-card h4{
  font-size: 13px;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.5px;
}

/* content area */
.market-body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}

/* highlight values */
.market-body b{
  color: #00ff9c;
}

/* badge spacing fix */
.market-body span{
  display: inline-block;
}

/* loader alignment */
.spin{
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,0.2);
  border-top-color:#00ff9c;
  border-radius:50%;
  display:inline-block;
  animation: spin 0.8s linear infinite;
  margin-right:6px;
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

/* =========================
   MOBILE FIX
========================= */
@media(max-width:768px){


  .market-card{
    min-height: auto;
  }
}



#from,
#to,
#compareFrom,
#compareTo {

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  /* ✅ ADD ARROW BACK */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNyAxMGw1IDUgNS01eiIvPjwvc3ZnPg==") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
}



.rates-card {
    margin-top: 40px !important;
    margin-bottom: 20px !important;
}


.bar div {
    animation: none !important;
}

.liq-meta{
  display:block;
  margin-top:2px;
  margin-bottom:12px;
  font-size:12px;
  color:rgba(255,255,255,0.55);
  letter-spacing:0.3px;
  font-style:italic;
}


#currencySelector {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  padding: 10px 35px 10px 12px !important; /* 👈 extra right space for arrow */
  border-radius: 10px !important;
  outline: none !important;
  font-size: 14px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  /* ✅ ADD ARROW BACK */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNyAxMGw1IDUgNS01eiIvPjwvc3ZnPg==") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
}


@media (min-width: 768px) and (max-width: 1024px){

  /* 2 columns only for input + select */
 
  .converter-card .converter-grid{
    grid-template-columns:1fr 1fr 1fr !important;
  }


  /* force button full width under */
  .converter-grid .convert-btn{
    grid-column: 1 / -1 !important;
  }

  /* force result full width under button */
  .converter-grid .result-box{
    grid-column: 1 / -1 !important;
  }

}

.converter-card{
  background: linear-gradient(145deg,#0f2b5a,#081a3a);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  border-radius: 14px;
}

/* grid layout */
.converter-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-top:10px;
}

/* input field wrapper */
.field label{
  font-size:11px;
  color:rgba(255,255,255,0.6);
  margin-bottom:5px;
  display:block;
}


.converter-card input,
.converter-card input[type="text"],
.converter-card input[type="number"],
.converter-card select,
.converter input,
.converter input[type="text"],
.converter input[type="number"] {
  width: 100%;
  padding: 12px 10px;
  border-radius: 10px;

  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;

  color: #fff !important;
  outline: none;

  font-size: 14px;
  transition: 0.3s;

  backdrop-filter: blur(8px);
}



/* 🔥 FIXED INPUT STYLE (NO MORE WHITE UGLY BOX) */
.converter-card input,
.converter-card select, .converter input {
  width:100%;
  padding:12px 10px;
  border-radius:10px;

  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;

  color:#fff !important;
  outline:none;

  font-size:14px;
  transition:0.3s;
  
  backdrop-filter: blur(8px);
}

/* focus glow */
.converter-card input:focus,
.converter-card select:focus{
  border-color:#00ff9c;
  box-shadow:0 0 0 3px rgba(0,255,156,0.15);
  transform: scale(1.02);
}

/* dropdown styling */
.converter-card select option{
  background:#081a3a;
  color:#fff;
}

/* button upgrade */
.convert-btn{
  width:100%;
  margin-top:14px;
  padding:12px;
  border:none;
  border-radius:10px;

  background: linear-gradient(90deg,#00ff9c,#00c853);
  color:#000;
  font-weight:700;
  cursor:pointer;

  transition:0.3s;
  letter-spacing:0.5px;
}

.convert-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 20px rgba(0,255,156,0.2);
}

/* result box */
.result-box{
  margin-top:12px;
  padding:12px;
  border-radius:10px;

  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
}

.result-box p{
  font-size:14px;
  color:#ffcc00;
  font-weight:600;
}

/* responsive */
@media(max-width:768px){
  .converter-grid{
    grid-template-columns:1fr;
  }
}


.forex-dashboard1{
	font-family:'Inter',sans-serif;
  background:#071a3a url('https://www.transparenttextures.com/patterns/cubes.png') !important;
  color:#fff !important;
}
.fmd-flag{
    width:18px;
    height:12px;
    object-fit:cover;
    margin-right:6px;
    vertical-align:middle;
    border-radius:2px;
}

 .compare-tool-card{  
  background: linear-gradient(145deg,#0e224a,#071a3a);  
  border: 1px solid rgba(255,255,255,0.06);  
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);  
  border-radius: 14px;  
  padding: 18px;  
  overflow: hidden;  
  box-sizing: border-box;  
}  
  
/* header text */  
.compare-sub{  
  font-size:12px;  
  color:rgba(255,255,255,0.65);  
  margin-bottom:12px;  
}  
  
/* GRID FIX (this is the REAL fix) */  
.compare-tool-grid{  
  display:grid;  
  grid-template-columns:repeat(2, minmax(0, 1fr));  
  gap:12px;  
  margin-top:10px;  
}  
  
/* FIELD WRAPPER FIX */  
.field{  
  min-width:0;  
  width:100%;  
}  
  
/* SELECT FIX (critical) */  
.field select{  
  width:100%;  
  max-width:100%;  
  box-sizing:border-box;  
  display:block;  
  
  padding:10px 12px;  
  border-radius:10px;  
  
  background:rgba(255,255,255,0.04) !important;  
  border:1px solid rgba(255,255,255,0.08) !important;  
  color:#fff;  
  
  outline:none;  
  
  white-space:nowrap;  
  overflow:hidden;  
  text-overflow:ellipsis;  
}  
  
/* button */  
.compare-btn{  
  width:100%;  
  margin-top:14px;  
  padding:12px;  
  border:none;  
  border-radius:10px;  
  font-weight:700;  
  cursor:pointer;  
  background:linear-gradient(90deg,#00ff9c,#00c853);  
  color:#000;  
  transition:0.3s;  
}  
  
.compare-btn:hover{  
  transform:translateY(-2px);  
  box-shadow:0 10px 20px rgba(0,255,156,0.2);  
}  
  
/* result panel */  
.compare-result{  
  margin-top:15px;  
  padding:14px;  
  border-radius:12px;  
  background:rgba(255,255,255,0.03);  
  border:1px solid rgba(255,255,255,0.05);  
  box-sizing:border-box;  
}  
  
.compare-head{  
  display:flex;  
  justify-content:space-between;  
  margin-bottom:10px;  
  font-size:12px;  
  color:rgba(255,255,255,0.7);  
}  
  
.compare-box{  
  display:grid;  
  grid-template-columns:repeat(2, minmax(0, 1fr));  
  gap:10px;  
}  
  
.compare-item{  
  padding:10px;  
  border-radius:10px;  
  background:rgba(255,255,255,0.04);  
  border:1px solid rgba(255,255,255,0.06);  
  transition:0.3s;  
  box-sizing:border-box;  
}  
  
.compare-item:hover{  
  transform:scale(1.03);  
  background:rgba(0,255,156,0.06);  
}  
  
.compare-item .label{  
  font-size:11px;  
  color:#aaa;  
}  
  
.compare-item .value{  
  font-size:14px;  
  font-weight:700;  
  margin-top:4px;  
}  
  
.compare-item .green{color:#00ff9c;}  
.compare-item .red{color:#ff5252;}  
.compare-item .yellow{color:#ffcc00;}

/* =========================
   SAFE vs DEAD ZONES
========================= */

.zone-card{
  background: linear-gradient(145deg,#0e224a,#071a3a);
  border: 1px solid rgba(255,255,255,0.05);
}

.zone-sub{
  font-size:12px;
  color:rgba(255,255,255,0.65);
  margin-bottom:12px;
}

.zone-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.zone{
  padding:14px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  transition:0.3s;
  position:relative;
  overflow:hidden;
}

.zone:hover{
  transform:translateY(-4px);
}

/* SAFE ZONE STYLE */
.zone.safe{
  box-shadow:0 0 20px rgba(0,255,156,0.08);
}

/* DEAD ZONE STYLE */
.zone.dead{
  box-shadow:0 0 20px rgba(255,82,82,0.08);
}

.zone-title{
  font-size:13px;
  font-weight:700;
  margin-bottom:6px;
}

.zone.safe .zone-title{
  color:#00ff9c;
}

.zone.dead .zone-title{
  color:#ff5252;
}

.zone-desc{
  font-size:11px;
  color:rgba(255,255,255,0.65);
  margin-bottom:10px;
}

.zone-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
}

.zone-list span{
  font-size:10px;
  padding:4px 8px;
  border-radius:20px;
  background:rgba(255,255,255,0.05);
}

.zone.safe .zone-list span{
  border:1px solid rgba(0,255,156,0.2);
}

.zone.dead .zone-list span{
  border:1px solid rgba(255,82,82,0.2);
}

/* BAR */
.zone-bar{
  height:6px;
  background:rgba(255,255,255,0.06);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:6px;
}

.zone-bar div{
  height:100%;
  border-radius:10px;
  animation: flow 2s linear infinite;
}

.zone.safe .zone-bar div{
  background:linear-gradient(90deg,#00ff9c,#00c853);
}

.zone.dead .zone-bar div{
  background:linear-gradient(90deg,#ff5252,#b71c1c);
}

@keyframes flow{
  0%{transform:translateX(-40%)}
  100%{transform:translateX(40%)}
}
/* =========================
   YESTERDAY VS TODAY CARD
========================= */
#compareForm{
  display:grid;
 
  gap:12px;
  margin-top:10px;
  width:100%;
}
.compare-card{
  background: linear-gradient(145deg,#0e224a,#071a3a);
  border: 1px solid rgba(255,255,255,0.05);
}

.compare-grid{
  display:flex;
  flex-direction:column;
  gap: 13px;
  margin-top:10px;
}

.compare-row{
  display:grid;
  grid-template-columns: 1fr 2fr 0.8fr;
  align-items:center;
  padding: 15px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  transition:0.3s;
}

.compare-row:hover{
  transform:scale(1.02);
  background:rgba(0,255,156,0.06);
}

/* currency */
.compare-row .currency{
  font-weight:700;
  letter-spacing:0.5px;
}

/* values */
.values{
  display:flex;
  justify-content:space-around;
  font-size:12px;
  color:rgba(255,255,255,0.8);
}

.yest{
  color:#ffcc00;
}

.today{
  color:#00ff9c;
  font-weight:600;
}

/* difference */
.diff{
  text-align:right;
  font-weight:700;
  font-size:12px;
}

.diff.up{
  color:#00ff9c;
}

.diff.down{
  color:#ff5252;
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-content{
  position:relative;
  z-index:2;
}
.hero{
  position:relative;
  z-index:1;
}
.hero{
  position:relative;
  padding:80px 20px;
  text-align:center;
  background:linear-gradient(135deg,#06162f,#0b2f63);
  overflow:hidden;
}

/* glowing overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  background:
  radial-gradient(circle at 20% 20%, rgba(0,255,156,0.12), transparent 45%),
  radial-gradient(circle at 80% 80%, rgba(255,204,0,0.08), transparent 50%),
  linear-gradient(180deg,#06162f 0%, #081f44 60%, #071a3a 100%);
}

/* badge */
.hero-badge{
  display:inline-block;
  padding:6px 12px;
  font-size:11px;
  border-radius:20px;
  background:rgba(0,255,156,0.12);
  color:#00ff9c;
  margin-bottom:15px;
  font-weight:600;
  letter-spacing:0.5px;
}

.hero::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:140px;
  background:linear-gradient(to bottom, transparent, #071a3a);
  pointer-events:none;
}

/* title */
.hero-content h1{
  font-size:38px;
  font-weight:800;
  margin-bottom:10px;
  letter-spacing:1px;
}

/* subtitle */
.hero-content p{
  color:rgba(255,255,255,0.75);
  font-size:15px;
  margin-bottom:25px;
}

/* buttons */
.hero-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:25px;
}

.primary,
.secondary{
  padding:12px 22px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  border:none;
  transition:0.3s;
}

.primary{
  background:linear-gradient(45deg,#00c853,#00ff9c);
  color:#000;
}

.secondary{
  background:rgba(255,255,255,0.08);
  color:#fff;
  border:1px solid rgba(255,255,255,0.15);
}

/* hover */
.primary:hover,
.secondary:hover{
  transform:translateY(-2px);
}

/* stats row */
.hero-stats{
  display:flex;
  justify-content:center;
  gap:25px;
  margin-top:20px;
  flex-wrap:wrap;
}

.h-stat{
  background:rgba(255,255,255,0.04);
  padding:10px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  min-width:90px;
}

.h-stat strong{
  display:block;
  font-size:16px;
  color:#00ff9c;
}

.h-stat small{
  font-size:11px;
  color:rgba(255,255,255,0.6);
}
/* =========================
   CONVERTER PREMIUM UPGRADE
========================= */


/* === INTELLIGENCE PANEL === */
.intel-card{
  background:linear-gradient(145deg,#0e224a,#081733);
}

.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

/* TABS */
.tabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}

.tab{
  padding:6px 12px;
  font-size:12px;
  border-radius:20px;
  background:rgba(255,255,255,0.05);
  cursor:pointer;
}

.tab.active{
  background:linear-gradient(90deg,#00ff9c,#00c853);
  color:#000;
  font-weight:700;
}

/* INTEL ITEMS */
.intel-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:10px 0;
}

.intel-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:10px;
  background:rgba(255,255,255,0.03);
  transition:0.3s;
}

.intel-item:hover{
  transform:translateX(5px);
  background:rgba(255,255,255,0.06);
}

.icon{
  font-size:18px;
}

/* TEXT */
.text strong{
  display:block;
  font-size:13px;
}

.text small{
  font-size:11px;
  color:rgba(255,255,255,0.6);
}

/* PILL */
.pill{
  margin-left:auto;
  font-size:10px;
  padding:3px 8px;
  border-radius:20px;
  font-weight:700;
}

.pill.green{background:#00ff9c22;color:#00ff9c;}
.pill.red{background:#ff525222;color:#ff5252;}
.pill.yellow{background:#ffcc0022;color:#ffcc00;}

/* TREND */
.trend-line{
  font-size:12px;
  padding:6px 0;
}

.trend-line.up{color:#00ff9c;}
.trend-line.down{color:#ff5252;}
.trend-line.mid{color:#ffcc00;}

/* === NEWS TIMELINE === */
.news-card{
  background:linear-gradient(145deg,#0e224a,#081733);
}

.news-timeline{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

.news-node{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border-radius:10px;
  background:rgba(255,255,255,0.03);
  transition:0.3s;
}

.news-node:hover{
  background:rgba(255,255,255,0.06);
  transform:scale(1.02);
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  margin-top:6px;
}

.dot.green{background:#00ff9c;}
.dot.red{background:#ff5252;}
.dot.yellow{background:#ffcc00;}

.news-text strong{
  display:block;
  font-size:13px;
}

.news-text small{
  font-size:11px;
  color:rgba(255,255,255,0.6);
}

/* mobile */
@media(max-width:900px){
  .bottom{
    grid-template-columns:1fr;
  }
}
/* CARD HEADER */
.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

/* NEW CARD STYLE */
.gainers-card{
  background:linear-gradient(145deg,#0e224a,#081733);
  border:1px solid rgba(255,255,255,0.05);
}

/* GRID */
.gainers-losers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* SIDES */
.side{
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  backdrop-filter:blur(6px);
}

.gainers{
  box-shadow:0 0 15px rgba(0,255,156,0.08);
}

.losers{
  box-shadow:0 0 15px rgba(255,82,82,0.08);
}

.side-title{
  font-size:12px;
  font-weight:600;
  margin-bottom:10px;
  opacity:0.8;
}

/* ITEM */
.list-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px;
  border-radius:10px;
  margin-bottom:8px;
  transition:0.3s;
  background:rgba(255,255,255,0.02);
}

/* LEFT */
.left{
  display:flex;
  flex-direction:column;
}

.left small{
  font-size:10px;
  color:rgba(255,255,255,0.5);
}

/* RIGHT */
.right{
  text-align:right;
}

/* VALUE COLORS */
.gainers .value{
  color:#00ff9c;
  font-weight:600;
}

.losers .value{
  color:#ff5252;
  font-weight:600;
}

/* MINI BARS */
.mini-bar{
  width:80px;
  height:4px;
  background:rgba(255,255,255,0.08);
  border-radius:10px;
  margin-top:4px;
  overflow:hidden;
}

.mini-bar div{
  height:100%;
  border-radius:10px;
}

.gainers .mini-bar div{
  background:linear-gradient(90deg,#00ff9c,#00c853);
}

.losers .mini-bar div{
  background:linear-gradient(90deg,#ff5252,#ff1744);
}

/* HOVER */
.list-item:hover{
  transform:translateX(4px) scale(1.02);
  background:rgba(255,255,255,0.05);
}

/* MOBILE */
@media(max-width:768px){
  .gainers-losers{
    grid-template-columns:1fr;
  }
}
.stats-box{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:10px;
}

.stat{
  padding:10px;
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.05);
  text-align:center;
  transition:0.3s;
  position:relative;
  overflow:hidden;
}

/* subtle glow animation */
.stat::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(255,255,255,0.1), transparent 60%);
  opacity:0;
  animation:statGlow 4s infinite;
}

@keyframes statGlow{
  0%,100%{opacity:0;}
  50%{opacity:1;}
}

.stat:hover{
  transform:translateY(-3px) scale(1.03);
}

.label{
  font-size:11px;
  color:#aaa;
  margin-bottom:4px;
}

.value{
  font-size:16px;
  font-weight:700;
}

/* COLORS */
.high .value{ color:#00ff9c; }
.low .value{ color:#ff5252; }
.range .value{ color:#ffcc00; }
@media (max-width: 767px){
  .ticker-grid{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.market-move{
  background:linear-gradient(145deg,#0f2b5a,#071a3a);
}

.ticker-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap: 13px;
}



.ticker-grid .ticker{
  display:flex;
  justify-content:space-between;
  padding: 15px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.05);
  transition:0.3s;
}

.ticker-grid .ticker:hover{
  transform:scale(1.03);
  background:rgba(0,255,156,0.08);
}



/* HEADER */
.rates-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.live-dot{
  background:#00ff9c;
  color:#000;
  font-size:10px;
  padding:4px 8px;
  border-radius:20px;
  font-weight:700;
  animation:pulse 1.2s infinite;
}

/* TABLE */
.rates-card{
  background:linear-gradient(145deg,#0e224a,#081733);
}

.modern-table .row{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  padding: 15px 12px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:13px;
  transition:0.25s;
}

/* header row */
.modern-table .head{
  font-size:11px;
  color:#aaa;
  text-transform:uppercase;
  letter-spacing:0.5px;
  border-bottom:1px solid rgba(255,255,255,0.15);
}

/* zebra effect */
.modern-table .row:nth-child(even){
  background:rgba(255,255,255,0.02);
}

/* hover glow */
.modern-table .row:hover{
  background:rgba(0,255,156,0.08);
  transform:scale(1.01);
}

/* pair style */
.pair{
  font-weight:600;
  letter-spacing:0.5px;
}



/* LEFT ALIGN EVERYTHING */
.modern-table span{
  text-align:left;
}

/* add spacing so it doesn't look cramped */
.modern-table .row span{
  padding-left:6px;
}

/* colors */
.green{
  color:#00ff9c;
  font-weight:600;
}

.red{
  color:#ff5252;
  font-weight:600;
}
.volatility-card{
  background:linear-gradient(145deg,#0e224a,#081733);
  padding:15px;
}

.vol-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.pulse{
  background:#ff5252;
  padding:4px 8px;
  border-radius:20px;
  font-size:11px;
  animation:pulse 1.2s infinite;
}

@keyframes pulse{
  0%{opacity:1}
  50%{opacity:0.4}
  100%{opacity:1}
}

.forecast{
  font-size:12px;
  color:#ffcc00;
  margin:10px 0;
}

.vol-row{
  display:grid;
  grid-template-columns:0.9fr 70px 1.3fr;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

/* Tablet */
@media (min-width: 768px){
  .vol-row{
    grid-template-columns:0.6fr 100px 1.3fr !important;
  }
}

/* Desktop */
@media (min-width: 1024px){
  .vol-row{
    grid-template-columns:0.6fr 100px 1.3fr !important;
  }
}

.vol-row.head{
  font-size:11px;
  color:#aaa;
}

.badge{
  padding:3px 8px;
  border-radius:6px;
  font-size:11px;
  text-align:center;
}

.badge.high{background:#00ff9c22;color:#00ff9c;}
.badge.medium{background:#ffcc0022;color:#ffcc00;}
.badge.low{background:#ff525222;color:#ff5252;}

.range-box{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.numbers{
  display:flex;
  justify-content:space-between;
  font-size:11px;
}

.high-val{color:#00ff9c;}
.low-val{color:#ff5252;}
.range-val{color:#ffcc00;font-weight:600;}

.bar{
  height:6px;
  background:rgba(255,255,255,0.08);
  border-radius:10px;
  overflow:hidden;
}

.bar div{
  height:100%;
  animation:flow 2s linear infinite;
}

.high .bar div{background:linear-gradient(90deg,#00ff9c,#00c853);}
.medium .bar div{background:linear-gradient(90deg,#ffcc00,#ff9800);}
.low .bar div{background:linear-gradient(90deg,#ff5252,#ff1744);}

@keyframes flow{
  0%{transform:translateX(-30%)}
  100%{transform:translateX(30%)}
}

.stat:hover{
  transform:translateY(-3px) scale(1.03);
}

.label{
  font-size:11px;
  color:#aaa;
  margin-bottom:4px;
}

.value{
  font-size:16px;
  font-weight:700;
}

/* COLORS */
.high .value{ color:#00ff9c; }
.low .value{ color:#ff5252; }
.range .value{ color:#ffcc00; }
hr{
  border:none;
  height:1px;
  background:rgba(255,255,255,0.1);
}



/* GRID */
.liquidity-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:10px;
}

/* CARD */
.liq-item{
  background:rgba(255,255,255,0.04);
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.05);
  position:relative;
  overflow:hidden;
  transition:0.3s;
}

/* subtle glow pulse */
.liq-item::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(0,255,156,0.15), transparent 60%);
  opacity:0;
  animation:pulse 3s infinite;
}

@keyframes pulse{
  0%,100%{opacity:0;}
  50%{opacity:1;}
}

.liq-item:hover{
  transform:translateY(-4px) scale(1.02);
}

/* HEADER */
.liq-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
}

.currency{
  font-weight:700;
  letter-spacing:1px;
}

.badge{
  font-size:11px;
  padding:3px 8px;
  border-radius:20px;
  font-weight:700;
}

/* BADGES */
.high-badge{background:rgba(0,255,156,0.15);color:#00ff9c;}
.med-badge{background:rgba(255,204,0,0.15);color:#ffcc00;}
.low-badge{background:rgba(255,82,82,0.15);color:#ff5252;}

/* BAR */
.bar{
  height:6px;
  background:rgba(255,255,255,0.08);
  border-radius:20px;
  overflow:hidden;
  position:relative;
}

/* moving flow layer */
.bar div{
  height:100%;
  width:0%;
  border-radius:20px;
  position:relative;
  overflow:hidden;
}

/* animated flow effect */
.bar div::after{
  content:'';
  position:absolute;
  top:0;
  left:-50%;
  width:50%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation:flow 1.5s linear infinite;
}

@keyframes flow{
  0%{left:-50%;}
  100%{left:120%;}
}

/* COLORS */
.high .bar div{background:linear-gradient(90deg,#00ff9c,#00c853);}
.medium .bar div{background:linear-gradient(90deg,#ffcc00,#ff9800);}
.low .bar div{background:linear-gradient(90deg,#ff5252,#b71c1c);}

.liq-item small{
  color:rgba(255,255,255,0.6);
  font-size:11px;
}
.primary{
  background:linear-gradient(45deg,#00c853,#00e676);
  border:none;
  padding:10px 20px;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  color:#000;
}

.secondary{
  background:linear-gradient(45deg,#ff7a00,#ffb347);
  border:none;
  padding:10px 20px;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  color:#000;
}

/* mobile */
@media(max-width:600px){
  .hero-content h1{
    font-size:24px;
  }
}





.gainers-losers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.side{
  background:rgba(255,255,255,0.03);
  padding:10px;
  border-radius:10px;
}

.side-title{
  font-size:13px;
  font-weight:600;
  margin-bottom:8px;
}

.list-item{
  padding:10px;
  border-radius:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  font-weight:500;
  transition:0.3s;
}

/* Gainers */
.gain{
  background:linear-gradient(145deg,#0f5132,#0a3d28);
}
.gain span:last-child{
  color:#00ff9c;
}

/* Losers */
.loss{
  background:linear-gradient(145deg,#5c1a1a,#3d0f0f);
}
.loss span:last-child{
  color:#ff5252;
}

/* Hover effect (pro feel) */
.list-item:hover{
  transform:scale(1.03);
}





@media (min-width: 1000px) {
  .grid .card:first-child {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 1000px) {
  .bottom .news-card {
    grid-column: 1 / -1 !important;
  }
}



   /* CONVERTER */

.yellow{
  color:#ffcc00;
}
.converter button{
  margin-top:10px;
  padding:10px;
  width:100%;
  background:#00e676;
  border:none;
  border-radius:6px;
  font-weight:bold;
}

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

/* mobile */
@media(max-width:768px){
  .grid-column2{
    grid-template-columns:1fr;
  }
}


.wrapper h3{
  margin:30px 0 1px 0;
}



   
*{box-sizing:border-box;margin:0;padding:0}            
          
.header{            
  display:flex;justify-content:space-between;align-items:center;            
  padding:16px 30px;            
  background:#0e2a5a;            
}            
.logo{font-weight:700;font-size:20px;display:flex;gap:8px;align-items:center}            
.logo:before{content:'📈'}            
.nav button{            
  margin-left:10px;padding:8px 16px;border:none;border-radius:6px;            
  font-weight:600;cursor:pointer            
}            
.deposit{background:linear-gradient(45deg,#ff7a00,#ffb347)}            
.trade{background:linear-gradient(45deg,#00c853,#00e676)}            
.wrapper{padding:20px 0px;display:flex;flex-direction:column;gap:20px}.ticker{ background:linear-gradient(145deg,#1b3f8b,#132b5c); padding:12px;border-radius:10px; display:flex;justify-content:space-between;align-items:center;font-size:14px } .flag{font-size:18px;margin-right:6px} .green{color:#00ff9c} .red{color:#ff5252}.tickers{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}             
            
.grid{ display:grid; grid-template-columns:2fr 2fr 1.5fr; gap:20px; } .card{ background:linear-gradient(145deg,#132b5c,#0e224a); border-radius:12px; padding:20px 10px; box-shadow:0 0 15px rgb(0 0 0 / 55%); } .card h3{margin-bottom:10px;font-size:16px}            
            
.chart{ height:140px; background:linear-gradient(to top,rgba(0,255,150,0.2),transparent), repeating-linear-gradient(90deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 40px); border-radius:8px; position:relative; } .chart:after{ content:''; position:absolute; width:100%;height:100%; background:linear-gradient(120deg,transparent 40%,rgba(0,255,150,0.3)); }            
            
.gainers-losers{display:grid;grid-template-columns:1fr 1fr;gap:10px} .list-item{ padding:10px;margin:10px 0 10px 0;border-radius:8px; display:flex;justify-content:space-between; } .gain{background:#0f5132} .loss{background:#5c1a1a}            
            
.invite{ text-align:center; background:linear-gradient(145deg,#1a4fb0,#133c85) } .invite::after{ content:'🔔';font-size:40px;display:block;margin-top:10px } .invite button{ margin-top:10px;padding:10px 20px;border:none;border-radius:6px; background:#00e676;font-weight:600;color:#000 } .bonus{ margin-top:10px;padding:12px;border-radius:8px; background:linear-gradient(45deg,#ff7a00,#ffb347); color:#000;font-weight:700;text-align:center }            
            
.bottom{display:grid;grid-template-columns:2fr 1fr;gap:20px} .table{width:100%;margin-top:10px} .row{ display:grid;grid-template-columns:2fr 1fr 1fr 1fr; padding:10px;border-bottom:1px solid rgba(255,255,255,0.1); align-items:center } .row:nth-child(odd){background:rgba(255,255,255,0.03)} .tabs{display:flex;gap:10px;margin-bottom:10px} .tab{padding:6px 12px;border-radius:6px;background:#1b3f8b}            
            
.news-item{margin-bottom:10px} .news-chart{ height:90px; background:repeating-linear-gradient(90deg,rgba(0,255,150,0.2) 0 4px,transparent 4px 10px); border-radius:6px }            
            
@media(max-width:1000px){ .grid{grid-template-columns:1fr} .bottom{grid-template-columns:1fr} .tickers{grid-template-columns:1fr 1fr} }