/* =========================
GLOBAL MOBILE FIX
========================= */

html,body{
overflow-x:hidden;
}

/* container padding mobile */

@media(max-width:768px){

.max-w-7xl{
padding-left:20px;
padding-right:20px;
}

}

/* =========================
HERO SECTION
========================= */

@media(max-width:1024px){

.hero h1{
font-size:38px;
line-height:1.2;
}

}

@media(max-width:768px){

.hero{
text-align:center;
}

.hero h1{
font-size:34px;
}

.hero p{
font-size:15px;
}

}

/* =========================
CARDS
========================= */

@media(max-width:768px){

.card{
padding:20px;
}

}

/* =========================
GRID STACK MOBILE
========================= */

@media(max-width:768px){

.grid{
grid-template-columns:1fr !important;
}

}

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

.mobile-menu{
position:fixed;
top:0;
left:-100%;
width:70%;
height:100vh;
background:#020617;
padding:40px;
transition:.4s;
z-index:9999;
}

.mobile-menu.active{
left:0;
}

.mobile-menu a{
display:block;
padding:12px 0;
color:#ccc;
font-size:16px;
}

/* =========================
CRYPTO MAP
========================= */

@media(max-width:768px){

.map-container{
overflow-x:auto;
}

.world-map{
min-width:700px;
}

}

/* =========================
SLIDER
========================= */

.slider-wrapper{
overflow:hidden;
width:100%;
}

.slide{
padding:10px;
}

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

@media(max-width:768px){

footer .grid{
grid-template-columns:1fr;
text-align:center;
}

footer img{
margin:auto;
}

}

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

@media(max-width:768px){

.btn{
display:block;
width:100%;
text-align:center;
}

}

/* =========================
FONT SCALE MOBILE
========================= */

@media(max-width:768px){

h1{
font-size:32px!important;
}

h2{
font-size:28px!important;
}

h3{
font-size:22px!important;
}

}

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

#chart{
height:300px!important;
}