body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff; /* Cor de fundo branca */
    color: #333;
    font-family: Roboto, sans-serif;
    height: 100vh;
    background-image: url('bg-player.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.content-box{
    position: relative;
    width: 100%;
    background-color: rgba(255, 255, 255, .9);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, .5);
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.logo {
    width: 250px;
    margin: 0 0 30px 0;
}

audio {
    outline: none;
    width: 100%;
    max-width: 400px;
    border-radius: 50px;
    border: 2px solid #fff;
}

.whatsapp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 300px;
    margin: 30px auto;
    padding: 10px 20px;
    background-color: #00c307;
    color: white; /* Cor do texto */
    text-decoration: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
}

.whatsapp-button ion-icon {
    margin-right: 10px; /* Espaço entre ícone e texto */
    color: white; /* Cor do ícone do WhatsApp */
    font-size: 24px; /* Aumenta o tamanho do ícone do WhatsApp em 60% */

}

.whatsapp-button:hover {
    background-color: #009b06;
    color: #fff;
}

.icon-radio img{
    margin-bottom: 30px;
    max-width: 273px;
}

/* Estilos para as redes sociais e compartilhamento */
.social-share-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin: 30px auto; /* Espaço entre as redes sociais e o player */
}

.social-icons {
    display: flex;
    justify-content: center;
}

.social-icons ion-icon {
    color: #555; /* Cor dos ícones */
    margin: 0 5px !important;
}

.social-icons ion-icon:hover {
    color: #000; /* Cor ao passar o mouse */
}

.like-container {
    display: flex;
    align-items: center;
}

.icon-size {
    font-size: 20px; /* Tamanho dos ícones reduzido para 50% */
    color: #555; /* Cor inicial dos ícones */
    cursor: pointer; /* Muda o cursor ao passar sobre o ícone */
    margin-left: 10px; /* Espaço entre os ícones */
}

/* Mudanças para o ícone de like */
.liked {
    color: red; /* Cor do ícone de like quando clicado */
}

/* Estilos para a seção "Sobre a Rádio" */
.sobre-container {
    max-width: 600px; /* Limita a largura máxima do container */
    width: 100%; /* Para que ocupe toda a largura disponível até o máximo */
    text-align: left; /* Centraliza o texto dentro do container */
    margin: 20px auto; /* Espaçamento superior e inferior e centraliza horizontalmente */
}

.sobre-container a{
    color: #000;
    text-decoration: none;
}

.sobre-titulo {
    font-size: 36px; /* Aumenta o tamanho do título */
    font-weight: 800;
    margin-bottom: 15px; /* Espaço entre o título e o texto */
}

.sobre-texto {
    font-size: 16px; /* Tamanho do texto descritivo */
    line-height: 1.5; /* Aumenta a altura da linha para melhor legibilidade */
    margin-bottom: 15px !important;
}

/* Estilos para cabeçalhos */
h1 {
    font-size: 2.5em; /* Tamanho do h1 */
    color: #333; /* Cor do texto do h1 */
    margin: 20px 0; /* Margem superior e inferior */
}

h2 {
    font-size: 2em; /* Tamanho do h2 */
    color: #555; /* Cor do texto do h2 */
    margin: 15px 0; /* Margem superior e inferior */
}

h3 {
    font-size: 1.75em; /* Tamanho do h3 */
    color: #777; /* Cor do texto do h3 */
    margin: 10px 0; /* Margem superior e inferior */
}

p{
    margin-bottom: 5px !important;
    color: #333;
}

p, p a, a{
    color: #333;
}

/* Estilo do ponto vermelho */
.dot {
    height: 10px; /* Tamanho do ponto */
    width: 10px; /* Tamanho do ponto */
    background-color: red; /* Cor do ponto */
    border-radius: 50%; /* Faz o ponto ser redondo */
    margin-right: 5px; /* Espaçamento entre o ponto e a palavra "Live" */
}

/* Ajustes para a seção de rádio */
.radio-info {
    display: flex;
    flex-direction: column; /* Organiza os elementos em coluna */
    align-items: flex-start; /* Alinha à esquerda */
    text-align: left; /* Textos à esquerda */
}

.live-dot {
    display: flex;
    align-items: center; /* Alinha verticalmente o ponto e o texto "Live" */
    margin-bottom: 5px; /* Espaçamento entre 'Live' e 'Nome da sua Rádio' */
}

.radio-info h1 {
    font-size: 1.25em; /* Tamanho reduzido para 50% menor (de 2.5em para 1.25em) */
    font-weight: 700;
    color: #333; /* Cor do texto do h1 */
    margin: 5px 0; /* Espaçamento entre o título e a frequência */
}

.radio-info h2 {
    font-size: 1em; /* Tamanho do h2 */
    color: #888; /* Cor cinza para 106.7 MHz */
    margin: 0; /* Remove margens para alinhamento perfeito */
}

.logo-maxi{
    display: flex;
    margin-top: 30px;
    align-items: center;
}

.logo-maxi p{
    color: #fff;
}

.logo-maxi p .logomaxi {
    width: auto; /* Mantém a proporção da imagem */
    max-width: 150px; /* Limita a largura máxima a 200px */
    filter: brightness(0) invert(1);
}


/*RESPONSIVO*/
@media(max-width: 768px){
    body, .row.d-flex.align-items-center.h-100{
        display: block !important;
        height: unset !important;
    }
    body{
        padding: 60px 0;
    }
    .sobre-container{
        margin: 30px auto 20px auto;
        /*text-align: center;*/
    }
    .logo-maxi{
        justify-content: center;
    }
    .icon-radio img{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}