/* =========================
TABLET
========================= */

@media(max-width:1024px){

.hero-grid{
grid-template-columns:1fr;
text-align:center;
}

.hero-buttons{
justify-content:center;
}

.hero-left h1{
font-size:55px;
}

.hero-left h2{
font-size:30px;
}

.stats-grid{
grid-template-columns:repeat(2,1fr);
}

.news-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

.container{
padding:0 15px;
}

header{
top:45px;
}

.logo img{
height:45px;
}

.mobile-btn{
display:block;
}

nav{
position:absolute;
top:85px;
left:0;
width:100%;
background:#08172e;
display:none;
flex-direction:column;
padding:20px;
gap:15px;
border-top:1px solid rgba(255,255,255,.08);
}

nav.active{
display:flex;
}

.hero{
padding:50px 0;
}

.hero-left h1{
font-size:42px;
}

.hero-left h2{
font-size:24px;
}

.hero-left p{
font-size:15px;
}

.hero-buttons{
flex-direction:column;
}

.btn-primary,
.btn-secondary{
width:100%;
text-align:center;
}

.stats-grid{
grid-template-columns:repeat(2,1fr);
}

.news-grid{
grid-template-columns:1fr;
}

.section-title{
font-size:28px;
}

.stat-box h3{
font-size:28px;
}

.league-tabs{
overflow-x:auto;
justify-content:flex-start;
padding-bottom:10px;
}

.league-tabs button{
white-space:nowrap;
}

.bottom-menu{
height:65px;
}

.bottom-menu i{
font-size:18px;
}

.bottom-menu span{
font-size:11px;
}

table{
font-size:13px;
}

#liveScoreContainer{
grid-template-columns:1fr;
}

.match-card{
padding:15px;
}

.match-score{
font-size:22px;
}

.schedule-grid{
grid-template-columns:1fr;
}

.league-grid{
grid-template-columns:repeat(2,1fr);
}

.wc-box{
padding:25px;
}

.wc-box h2{
font-size:24px;
}

.wc-box p{
font-size:14px;
}

.hero-right{
margin-top:30px;
}

.hero-right img{
max-width:400px;
margin:auto;
}

}

/* =========================
SMALL MOBILE
========================= */

@media(max-width:480px){

.hero-left h1{
font-size:34px;
}

.hero-left h2{
font-size:20px;
}

.hero-left p{
font-size:14px;
}

.section{
padding:60px 0;
}

.news-card h3{
font-size:18px;
}

.league-grid{
grid-template-columns:1fr;
}

.stats-grid{
grid-template-columns:1fr;
}

.wc-box h2{
font-size:20px;
}

}