body {
    font-family: Arial, sans-serif;
    background-image: url('./imagens/Yuriddtc2.png'); /* Caminho da imagem de fundo */
    background-size: cover; /* Ajusta a imagem de fundo para cobrir todo o corpo */
    background-repeat: repeat; /* Faz com que a imagem se repita */
    background-attachment: fixed; /* Faz com que o fundo fique fixo em relação à tela */
    background-position: center top; /* Alinha a imagem de fundo ao centro e no topo */
    color: #262e4e;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.nav-buttons {
    display: flex; /* Flexbox para layout horizontal dos botões */
    gap: 15px; /* Espaçamento entre os botões */
}

.nav-button {
    color: #fff; /* Cor do texto dos botões */
    text-decoration: none; /* Remove sublinhado */
    padding: 5px 10px; /* Espaçamento interno dos botões */
    background-color: #6C4581; /* Cor de fundo dos botões */
    border-radius: 5px; /* Borda arredondada */
    transition: background-color 0.3s; /* Transição suave para a cor de fundo */
}


.top-banner {
    background-color: #1ABC9C; /* Cor de fundo do banner */
    color: #fff; /* Cor do texto */
    display: flex; /* Flexbox para layout horizontal */
    justify-content: space-between; /* Espaça o conteúdo entre os dois lados */
    align-items: center; /* Alinha verticalmente no centro */
    padding: 10px 20px; /* Espaçamento interno */
    width: 100%; /* Largura total da tela */
    box-sizing: border-box; /* Inclui padding e border na largura total */
}

.community-name {
    font-size: 18px; /* Tamanho da fonte */
    font-weight: bold; /* Peso da fonte */
}

/* Adicione o seguinte código ao seu arquivo mobile.css */

/* Adicionando ao seu arquivo mobile.css */

/* mobile.css */
.left-image {
    position: absolute;
    top: 120px; /* Ajuste a posição vertical conforme necessário */
    left: 0; /* Ajuste a posição horizontal conforme necessário */
    width: 500px; /* Ajuste a largura conforme necessário */
    height: 500px; /* Ajuste a altura conforme necessário */
    z-index: 10; /* Garante que a imagem fique acima de outros elementos */
    pointer-events: none;
}

.left-image img {
    display: block;
    width: 100%; /* Ajusta a largura da imagem para preencher o contêiner */
    height: 100%; /* Ajusta a altura da imagem para preencher o contêiner */
    object-fit: cover; /* Faz a imagem cobrir o contêiner sem distorcer */
}

.image-container {
    position: relative;
    display: flex;
    align-items: center; /* Alinha verticalmente os itens */
}

.overlay-box {
    width: 1300px; /* Ajuste conforme necessário */
    height: 400px; /* Ajuste conforme necessário */
    background-color: rgba(0, 0, 0, 0.5); /* Cor preta com 50% de opacidade */
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed; /* Fixa o quadrado preto na tela */
    right: 0; /* Posiciona o quadrado no lado direito */
    top: 50%; /* Posiciona verticalmente no meio da tela */
    transform: translateY(-50%); /* Centraliza verticalmente */
    /* Ajuste da posição vertical */
}

.overlay-text {
    color: #0fdd53; /* Cor do texto */
    font-size: 24px; /* Tamanho da fonte */
    font-family: 'Lobster', sans-serif; /* Fonte do texto */
    text-align: center; /* Alinha o texto no centro */
    padding: 10px; /* Espaçamento interno */
    max-width: 50%; /* Largura máxima do texto */
    margin: 20px; /* Você pode ajustar esse valor para posicionar o texto */
    position: relative; /* Permite ajustar a posição com 'top', 'right', 'bottom', 'left' */
    top: -60px; /* Ajuste a posição vertical */
    left: 110px; /* Ajuste a posição horizontal */
    pointer-events: none;
}

.main-content {
    display: flex;
    align-items: center; /* Centraliza verticalmente os itens dentro do contêiner */
    justify-content: flex-end; /* Alinha os itens ao lado direito */
    height: 100vh; /* Faz com que o contêiner ocupe a altura total da tela */
    padding-right: 20px; /* Espaçamento à direita da tela */
    position: relative; /* Para posicionar a imagem dentro do contêiner */
}

.discord-button {
    display: inline-block; /* Mantém o botão no fluxo normal do documento */
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #50C878;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 20px; /* Você pode ajustar esse valor para posicionar o botão */
    position: relative; /* Permite ajustar a posição com 'top', 'right', 'bottom', 'left' */
    top: 150px; /* Ajuste a posição vertical */
    left: -350px; /* Ajuste a posição horizontal */
    width: fit-content; /* Ajusta a largura do botão ao conteúdo */
}

.discord-button:hover {
    background-color: #5b6eae;
}

.icon {
    width: 40px; /* Defina a largura do ícone */
    height: 40px; /* Defina a altura do ícone */
    margin-right: 10px; /* Espaço entre o ícone e o texto */
    vertical-align: middle; /* Alinha verticalmente o ícone ao meio do texto */
}

#prev-btn:disabled {
    opacity: 0.5; /* Torna o botão sem clique visualmente diferente */
    cursor: not-allowed;
}

body, a, .nav-button {
    cursor: url('./divulgacoes/mouse.png'), auto; /* Caminho para a imagem do cursor */
}