/*====================================================
      BIG-FM BRASIL 2.0
      RESPONSIVE.CSS
      Desenvolvido por STUDIOFESTY BRASIL
====================================================*/

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

@media(max-width:1400px){

.container{

max-width:1200px;

}

.hero h1{

font-size:62px;

}

.hero p{

font-size:20px;

}

}

/*=========================================
NOTEBOOKS
=========================================*/

@media(max-width:1200px){

header .container{

padding:0 25px;

}

.hero-content{

margin-left:5%;

}

.hero h1{

font-size:55px;

}

.hero p{

font-size:19px;

}

.logo img{

width:120px;

}

.player-card{

max-width:95%;

}

}

/*=========================================
TABLETS
=========================================*/

@media(max-width:992px){

header{

padding:0;

}

header .container{

height:auto;

padding:18px;

flex-wrap:wrap;

justify-content:center;

gap:20px;

}

nav{

width:100%;

}

nav ul{

justify-content:center;

flex-wrap:wrap;

gap:18px;

}

.hero{

height:90vh;

}

.hero-content{

margin:auto;

padding:30px;

text-align:center;

}

.hero h1{

font-size:48px;

}

.hero p{

font-size:18px;

margin:auto;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.cards{

grid-template-columns:repeat(2,1fr);

}

.galeria-grid{

grid-template-columns:repeat(2,1fr);

}

.patrocinadores-grid{

grid-template-columns:1fr;

}

.player-top{

flex-direction:column;

gap:15px;

}

}

/*=========================================
CELULARES GRANDES
=========================================*/

@media(max-width:768px){

header{

background:#050505ef;

backdrop-filter:blur(18px);

}

.logo img{

width:110px;

}

nav ul{

flex-direction:column;

gap:15px;

}

.btn-ouvir{

width:100%;

text-align:center;

}

.hero{

height:100vh;

}

.hero-content{

padding:20px;

}

.hero h1{

font-size:38px;

line-height:1.15;

}

.hero p{

font-size:17px;

}

.badge{

font-size:13px;

padding:10px 16px;

}

.btn-primary,

.btn-secondary{

width:100%;

justify-content:center;

}

.section-title h2{

font-size:34px;

}

.section-title p{

font-size:16px;

}

.cards{

grid-template-columns:1fr;

}

.galeria-grid{

grid-template-columns:1fr;

}

.news .cards{

grid-template-columns:1fr;

}

.player-card{

padding:30px;

}

.player-logo img{

width:140px;

}

#musicaAtual{

font-size:24px;

}

.player-buttons{

flex-direction:column;

}

#volume{

width:100%;

}

.cidade-box{

flex-direction:column;

}

#cidade{

width:100%;

}

#ouvirCidade{

width:100%;

}

.contato-info{

flex-direction:column;

gap:20px;

}

.redes{

flex-wrap:wrap;

}

.footer-logo{

width:130px;

}

}

/*=========================================
CELULARES PEQUENOS
=========================================*/

@media(max-width:480px){

.hero h1{

font-size:30px;

}

.hero p{

font-size:15px;

}

.hero-buttons{

gap:15px;

}

.section-title h2{

font-size:28px;

}

.card{

padding:25px;

}

.card h3{

font-size:22px;

}

.card i{

font-size:42px;

}

.player-card{

padding:22px;

}

.player-logo img{

width:120px;

}

#musicaAtual{

font-size:21px;

}

.player-buttons button{

width:55px;

height:55px;

}

.contato-info div{

font-size:16px;

}

.redes a{

width:48px;

height:48px;

}

#topo{

width:50px;

height:50px;

right:18px;

bottom:18px;

}

}

/*=========================================
TVs / MONITORES 4K
=========================================*/

@media(min-width:1800px){

.container{

max-width:1700px;

}

.hero h1{

font-size:90px;

}

.hero p{

font-size:28px;

}

.logo img{

width:170px;

}

.section-title h2{

font-size:60px;

}

.cards{

gap:45px;

}

}