/* NAV */
nav{
position:fixed;
width:100%;
top:0;
background:rgba(0,0,0,.85);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,.08);
z-index:1000;
}

.nav-container{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
padding-bottom:10px;
}

/* LOGO */
.logo{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
text-align:center;
}

.logo img{
width:38px;
height:38px;
object-fit:contain;
filter:drop-shadow(0 0 8px rgba(247,181,0,0.3));
transition:.3s;
}

.logo:hover img{
transform:scale(1.1);
}

.brand{
font-size:14px;
font-weight:800;
letter-spacing:2px;
color:#fff;
}

.highlight{
color:#f7b500;
font-size:18px;
font-weight:900;
text-shadow:0 0 12px rgba(247,181,0,.7);
}

/* LINKS */
.nav-links{
display:flex;
gap:25px;
}

.nav-links a{
color:#ccc;
text-decoration:none;
transition:.3s;
}

.nav-links a:hover{
color:#f7b500;
}

/* MENU BUTTON */
.menu-btn{
display:none;
cursor:pointer;
}

.menu-btn div{
width:25px;
height:3px;
background:white;
margin:5px;
}

/* MOBILE MENU */
.mobile-menu{
position:fixed;
top:90px;
right:-260px;
width:260px;
height:100vh;
background:#111;
transition:.3s;
}

.mobile-menu.active{
right:0;
}

.mobile-menu a{
display:block;
padding:15px;
border-bottom:1px solid #222;
color:white;
text-decoration:none;
}

/* RESPONSIVE */
@media(max-width:768px){
.nav-links{display:none;}
.menu-btn{display:block;}
}

/* ========================= */
/* DESKTOP DROPDOWN */
/* ========================= */

.nav-item{
position:relative;
}

.market-link{
display:flex;
align-items:center;
gap:6px;
}

.arrow{
font-size:24px;
line-height:1;
transition:.3s;
display:inline-flex;
align-items:center;
justify-content:center;
}
.market-link{
height:100%;
}

.dropdown-menu{
position:absolute;
top:100%;
left:0;
background:#111;
min-width:200px;
border:1px solid #222;
border-radius:10px;
overflow:hidden;
display:none;
flex-direction:column;
z-index:9999;
}

.nav-item.active .dropdown-menu{
display:flex;
}

.nav-item.active .arrow{
transform:rotate(180deg);
}

.dropdown-menu a{
padding:12px 15px;
display:block;
color:#ccc;
text-decoration:none;
border-bottom:1px solid #1f1f1f;
transition:.3s;
}

.dropdown-menu a:hover{
background:#1a1a1a;
color:#f7b500;
}

.dropdown-menu a.all{
color:#f7b500;
}

/* ========================= */
/* MOBILE DROPDOWN (INSIDE MENU) */
/* ========================= */

@media(max-width:768px){

.dropdown-menu{
position:static;
background:#0f0f0f;
border:none;
display:none;
}

.nav-item.active .dropdown-menu{
display:flex;
flex-direction:column;
}

.mobile-item{
border-bottom:1px solid #222;
}

.mobile-submenu{
display:none;
flex-direction:column;
background:#0f0f0f;
}

.mobile-item.active .mobile-submenu{
display:flex;
}

.mobile-submenu a{
padding:12px 25px;
border-bottom:1px solid #1f1f1f;
color:#ccc;
}

.mobile-submenu a:hover{
color:#f7b500;
}

.arrow{
transition:.3s;
vertical-align: text-bottom;
}

.mobile-item.active .arrow{
transform:rotate(180deg);
        vertical-align: middle;
}
}