/* Define a fonte padrão do site */
html{
    overflow-x: hidden;
  }
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
/* Header do site (Redes sociais, no ar, capa de álbum e nome da música/apresentador - nome do programa) */
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0 40px;
    background-color: #fff;
}   
#header .social-icons {
    display: flex;
    align-items: center;
    margin-left: 290px;
}
#header .social-icons img {
    height: 30px;
}
#header .social-icons a {
    margin: 0 10px;
}
#header .social-icons span {
    color: #373737;
    font-weight: 700;
    margin-left: 10px;
    width: 100px;
}
#header .on-air {
    margin-left: 500px;
}
#header .on-air {
    width: 100px;
    margin: 0;
    margin-left: 10px;
}
/* Estilo do círculo verde com o texto No AR */
.on-air {
    display: flex;
    flex-direction: column; /* Altera a direção para coluna */
    align-items: right;
    margin-right: 20px;
}
.on-air .status-container {
    display: flex;
    align-items: center;
    margin-bottom: 1px; /* Adiciona espaço entre o status e o horário */
}
.on-air .circle {
    width: 7px;
    height: 7px;
    background-color: green;
    border-radius: 50%;
    margin-right: 10px;
}
.on-air .status {
    font-weight: 700;
}
.on-air .time {
    font-size: 14px;
    color: #555;
}
/* Estilo do player e informações do programa */
.program-info {
    display: flex;
    align-items: center;
}
.program-info img.play {
    width: 45px;
    height: 45px;
    margin-right: 15px;
    cursor: pointer;
}
.program-info img.cover {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    object-fit: cover;
}
.program-info .text {
    display: flex;
    flex-direction: column;
}
.program-info .music-name {
    font-weight: 700;
}
.program-info .program-name {
    font-weight: 400;
    font-size: 14px;
} 
/* ÁREA DO BANNER */
#banner-interno {
    position: relative;
}
#banner-interno .logo {
    position: absolute; 
    top: -55px; 
    left: 30px; 
    height: 180px;
}
/* Menu Interno */
#menu {
    display: flex;
    justify-content: right;
    margin-top: 10px;
    width: 100%;
    font-weight: 700;
    position: absolute; 
    top: 10px;
}
#menu a {
    text-decoration: none;
    color: white;
    margin: 0 35px;
    padding-bottom: 40px;
    font-size: 20px;
}
@media (max-width: 1024px){
    #menu a{
        margin: 0;
    }
    #menu {
        right: 15px;
        gap: 15px;
    }
}
#menu a:hover span{
    border-bottom: 2px solid white; /* Traço branco */
}
#menu a.selected span {
    font-weight: 700; /* Negrito para página selecionada */
    border-bottom: 2px solid white; /* Traço branco */
}
#title-navigator {
    margin-left: 10%
}
#title-navigator {
    color: #FFF;
}
#title-navigator .title {
    font-weight: 800; 
    font-size: 80px; 
    color: #FFF; 
    position: absolute; 
    top: 55%;
}
@media (max-width: 1024px){
    #title-navigator .title { 
        font-size: 65px; 
    }
}
#title-navigator .navigator {
    font-size: 20px; 
    color: #FFF; 
    position: absolute; 
    top: 75%;
}
#title-navigator .navigator a {
    text-decoration: none;
    color: #FFF;
}
#title-navigator .navigator a:hover {
    color: #FFDC00;
}
/*Formulário de pedido Musical */
form {
    margin: 0 auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    flex-wrap: wrap; /* Permite que os inputs se ajustem em telas menores */
}
input[type="text"] {
    padding: 15px;
    margin: 10px;
    border-radius: 25px;
    border: 1px solid #ccc;
    font-size: 16px;
    flex: 1 1 200px; /* Faz com que os inputs cresçam conforme o espaço disponível */
    max-width: 300px; /* Define o tamanho mínimo dos inputs */
}
/* Customiza a cor do placeholder */
input[type="text"]::placeholder {
    color: #333; /* Cor cinza para o placeholder */
    opacity: 1; /* Garante que a cor seja aplicada completamente */
}
button {
    background-color: #5f0700; /* Vermelho escuro */
    color: white;
    padding: 15px 150px;
    border: none;
    border-radius: 25px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}
button:hover {
    background-color: #980c01; /* Tom mais claro ao passar o mouse */
}
div .botao{
    width: 100%;
    text-align: center;
    margin-top: 35px;
}
#body {
    width: 70%; 
    min-height: 500px;
}
#pedido-musical {
    background: url('../images/menu/texturaFundo.png') no-repeat center center; 
    min-height: 700px; 
    position: relative;
}
#pedido-musical .pedido {
    width: 20%;
    margin: 30px 40%; 
    margin-top: 40px;
}
#pedido-musical .slogan {
    width: 30%;
    margin: 30px 35%; 
    margin-top: 40px;
}
#pedido-musical .barra-pedido {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    margin: 0; 
    padding: 0;
}
.contato {
    position: relative; 
    height: 600px;
}
.contato .aplicativo {
    position: relative; 
    top: 190px; 
    left: 100px; 
    float: left;
    max-width: 20%;
}

@media (max-width: 1024px){
    .contato .aplicativo {
        left: 30px;
        max-width: none; 
    }
}

.contato .aplicativo .info1 {
    font-size: 43px; 
    height: 30px;
}
.contato .aplicativo .info2 {
    font-weight: 800; 
    color: #980c01; 
    font-size: 70px;
}
.contato .aplicativo .info3 {
    font-size: 20px; 
    color: #333; 
    margin-bottom: 40px;
}
.contato .aplicativo .loja {
    width: 45%;
}
.contato .visual {
    float: left; 
    position: relative; 
    height: 600px;
}
.contato .visual .elipse {
    position: absolute; 
    bottom: 0; 
    left: 140px;
    height: 45%;
}
@media (max-width: 1024px) {
    .contato .visual .elipse {
      left: -60px;
      height: 30%;
    }
}
.contato .visual .device {
    position: absolute; 
    bottom: 0; 
    left: 210px;
    height: 100%;
}

@media (max-width: 1024px){
    .contato .visual .device{
        left: 0px;
        height: 60%;
    }
}

.contato .info-contato {
    float: right; 
    position: relative; 
    top: 100px;
    max-width: 30%;
}

@media (max-width: 1024px){
    .contato .info-contato {
        right: -20px;
        max-width: none;
    }
}

.contato .info-contato .titulo {
    font-size: 3vw; 
    color: #980c01; 
    font-weight: 800; 
    margin: 40px 30px;
}
.contato .info-contato .whatsapp {
    font-size: 1.5vw; 
    color: #333; 
    margin: 30px;
}
.contato .info-contato .whatsapp img {
    height: 40px;
}
.contato .info-contato .whatsapp span {
    position: relative;
    top: -8px; 
    padding-left: 15px;
}
.contato .info-contato .email {
    font-size: 1.3vw;  
    color: #333; 
    margin: 30px;
}
.contato .info-contato .email img {
    height: 30px;
}
.contato .info-contato .email span {
    position: relative;
    top: -8px; 
    padding-left: 15px;
}
.contato .info-contato .localizacao {
    font-size: 1.5vw;  
    color: #333; 
    margin: 30px;
}
.contato .info-contato .localizacao img {
    height: 40px;
}
.contato .info-contato .localizacao span {
    position: relative;
    top: -8px; 
    padding-left: 25px;
}
footer {
    background: #980c01; 
    color: #FFF; 
    padding: 10px 0;
}
footer .direitos {
    float: left; 
    width: 40%; 
    text-align: center; 
    margin: 10px;
}
footer .social-icons {
    float: right; 
    width: 45%; 
    text-align: center;
}
footer .social-icons a img {
    height: 40px;
    margin: 10px;
}
footer .social-icons a {
    text-decoration: none;
}
@media (max-width: 768px) {
    .triangle-inverted img{
      max-width: 10%;
    }
    #naParada{
      margin: 0;
    }
    .contato{
      display: flex;
      flex-direction: column-reverse;
    }
    .contato .info-contato{
      top: 10px;
    }
    .contato .aplicativo {
      width: 50%;
      top: -20px;
    }
    .contato .aplicativo .info1{
      font-size: 20px;
    }
    .contato .aplicativo .info2{
      font-size: 35px;
    }
    .contato .aplicativo .info3{
      font-size: 14px;
    }
    .contato .aplicativo .loja{
      width: 50%;
    }
    .contato .visual .device{
      left: 0;
      top: 34px;
      left: 250px;
      height: 200px;
    }
    footer{
      display: flex;
      flex-direction: column;
    }
    footer .direitos{
      width: 100%;
    }
    footer .social-icons{
      width: 100%;
    }
    .contato .info-contato .titulo {
        font-size: 12vw;
    }

    .contato .info-contato .whatsapp, .contato .info-contato .email, .contato .info-contato .localizacao {
        font-size: 4vw;
    }
    #banner-interno .logo {
        height: 65px;
        left: 5px;
    }
    #title-navigator .title {
        font-size: 30px;
    }
    #menu {
        right: 15px;
        gap: 10px;
    }
    #menu a{
        margin: 0;
        font-size: 12px;
    }
    #header .social-icons{
        display: none !important;
    }
    #header{
        padding: 0 95px !important;
    }
    .header-info .program-info{
        margin-right: -165px;
    }
    #header .on-air{
        margin: 0;
        font-size: 12px;
    }
    #pedido-musical .pedido, #pedido-musical .slogan{
        width: 50%;
        margin: 30px 25%;
    }
    .on-air .time {
        max-width: none; 
    }
  }