/* =========================
   1400px
========================= */

@media(max-width:1400px){

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

.section-title h2{
font-size:60px;
}

}

/* =========================
   1200px
========================= */

@media(max-width:1200px){

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

.hero-content{
order:2;
}

.hero-image{
order:1;
max-width:650px;
margin:auto;
}

.hero p{
margin:auto;
}

.hero-buttons{
justify-content:center;
}

.hero-stats{
justify-content:center;
}

.game-grid{
grid-template-columns:repeat(3,1fr);
}

.feature-grid{
grid-template-columns:repeat(2,1fr);
}

.timeline-wrapper{
grid-template-columns:repeat(2,1fr);
}

}

/* =========================
   991px
========================= */

@media(max-width:991px){

.nav-menu{

position:fixed;

top:90px;
left:-100%;

width:100%;
height:calc(100vh - 90px);

background:#060816;

display:flex;
flex-direction:column;

justify-content:center;
align-items:center;

gap:30px;

transition:.4s;

}

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

.nav-buttons{
display:none;
}

.hamburger{
display:flex;
}

.stats-grid{
grid-template-columns:repeat(2,1fr);
}

.leader-grid{
grid-template-columns:1fr;
}

.footer-grid{
grid-template-columns:repeat(2,1fr);
}

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

.hero h2{
font-size:28px;
}

.section-title h2{
font-size:55px;
}

}

/* =========================
   768px
========================= */

@media(max-width:768px){

.game-grid{
grid-template-columns:repeat(2,1fr);
}

.feature-grid{
grid-template-columns:1fr;
}

.timeline-wrapper{
grid-template-columns:1fr;
}

.hero{
padding-top:140px;
}

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

.hero h2{
font-size:24px;
}

.cta h2{
font-size:45px;
}

.section-title h2{
font-size:48px;
}

}

/* =========================
   576px
========================= */

@media(max-width:576px){

.container{
width:92%;
}

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

.hero h2{
font-size:22px;
}

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

.hero-buttons{
flex-direction:column;
}

.btn-primary,
.btn-secondary{
width:100%;
text-align:center;
}

.hero-stats{
flex-direction:column;
}

.stats-grid{
grid-template-columns:1fr;
}

.game-grid{
grid-template-columns:1fr;
}

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

.section-title h2{
font-size:40px;
}

.cta h2{
font-size:36px;
}

.live-card h3{
font-size:32px;
}

}

/* =========================
   400px
========================= */

@media(max-width:400px){

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

.section-title h2{
font-size:34px;
}

}