body {
    /*background-color: #FFFACD; /* Amarelo clarinho */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    
    background-image: url('favicons/back1.jpg'); /* Define a imagem de fundo */
    background-size: cover; /* Faz a imagem cobrir toda a tela */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita a repetição da imagem */
    background-attachment: fixed; /* Mantém a imagem fixa ao rolar a página */
}

h1 {
    margin: 20px;
    color: #00CED1;
    text-align: center;
}

p {
    margin: 0; /* Remove margens padrão dos parágrafos */
    padding: 5px;
    text-align: center; /* Centraliza o texto */
    word-wrap: break-word; /* Garante que o texto não "estoure" o container */
}

.button {
    width: 200px; /* Ajuste proporcional para telas responsivas */
    height: 100px;
    background-color: #000;
    border: 2px solid #fff; /* borda branca */
    border-radius: 10px;
    margin: 10px;
    text-align: center;
    line-height: 40px;
    font-size: 40px;
    /*font-weight: bold;*/
    color: #FFD700;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, background 0.3s, color 0.3s, border 0.3s;
    font-family: 'Roboto', sans-serif;
    font-weight: 600; /* ou 500, conforme desejado */

}

.button:hover {
    background-color: #222; /* Ciano escuro ao passar o mouse */
    transform: scale(1.1); /* Aumenta levemente o tamanho */
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px;
}

.photo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 130px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.photo-item img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.download-btn {
    text-decoration: none;
    color: #fff;
    background: #007BFF;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 30px;
}

.download-btn:hover {
    background: #0056b3;
}

img.lazy {
    opacity: 0;
    transition: opacity 0.5s;
}

img.lazy:not([src]) {
    background-color: #f0f0f0; /* Fundo de carregamento */
    width: 100%; /* Ajuste conforme necessário */
    height: auto;
}

img:not(.lazy) {
    opacity: 1;
}

.mural {
    display: flex;
    width: 80%;
    flex-direction: column;
    align-items: center;
    max-width: 450px;
    /*flex-wrap: wrap;*/
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
}

.mural img {
    width: 100%;
    height: auto;
    border: 2px solid #ddd;
    border-radius: 5px;
}

.search-box {
    position: relative;
    top: 10px;
    width: 90%; /* Largura do componente */
    max-width: 400px; /* Largura máxima */
    height: 200px; /* Altura fixa */
    background-color: rgba(0, 0, 0, 0.3); /* Cor de fundo */
    border: 8px solid #000000;
    border-radius: 30px; /* Bordas arredondadas */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3); /* Sombra para o elemento */
    display: flex; /* Usa flexbox */
    flex-direction: column; /* Organiza elementos verticalmente */
    overflow: hidden; /* Oculta conteúdo que transborda */
}

.carousel-container {
    position: relative; /* Para posicionar as setas lateralmente */
    flex: 1; /* Preenche o espaço restante no pai */
    overflow: hidden; /* Oculta o conteúdo que transborda */
    display: flex; /* Usa flexbox */
    align-items: center; /* Alinha verticalmente os itens */
}

.carousel {
    display: flex; /* Os itens são organizados em linha */
    gap: 10px; /* Espaçamento entre itens */
    transition: transform 0.3s ease; /* Transição suave ao mover */
}

.date-item {
    min-width: 80px; /* Largura mínima de cada item */
    max-width: 80px;
    height: 80px; /* Altura fixa de cada item */
    background-color: #4caf50; /* Cor de fundo padrão */
    color: #ffffff; /* Cor do texto */
    border-radius: 25px; /* Bordas arredondadas */
    display: flex; /* Alinha conteúdo com flexbox */
    flex-direction: column;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    text-align: center; /* Centraliza o texto */
    cursor: pointer; /* Mostra um cursor de mão ao passar */
    transition: transform 0.3s, background-color 0.3s; /* Animações ao interagir */
    overflow: hidden;
}

.date-item:hover {
    transform: scale(1.1); /* Aumenta levemente o tamanho */
    background-color: #388e3c; /* Muda a cor ao passar o mouse */
}

.date-item.active {
    background-color: #00257a; /* Destaque para o item ativo */
    transform: scale(1.1);
}

.horarios {
    flex: 1; /* Ocupa a outra metade do espaço disponível */
    display: grid; /* Usa grid layout */
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); /* Organiza em colunas flexíveis */
    gap: 10px; /* Espaçamento entre os itens */
    padding: 5px; /* Espaçamento interno */
    background-color: rgba(0, 0, 0, 0.2); /* Cor de fundo para diferenciação */
    border-top: 2px solid #000000; /* Linha separadora */
}

.hora-div {
    background-color: #2196f3; /* Cor de fundo dos horários */
    color: #ffffff; /* Cor do texto */
    border-radius: 8px; /* Bordas arredondadas */
    display: flex;
    justify-content: center; /* Centraliza o texto horizontalmente */
    align-items: center; /* Centraliza o texto verticalmente */
    height: 40px; /* Altura fixa dos blocos */
    
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s; /* Animações ao interagir */
}

.hora-div:hover {
    /*background-color: #1976d2; /* Cor ao passar o mouse */
    transform: scale(1.1); /* Leve aumento no tamanho */
}

.hora-div.active {
    background-color: #1976d2; /* Cor ao passar o mouse */
    transform: scale(1.1); /* Leve aumento no tamanho */
}

.div-quadras {
    color: #ffffff; /* Cor do texto */
    border-radius: 8px; /* Bordas arredondadas */
    display: flex;
    gap: 10px;
    justify-content: center; /* Centraliza o texto horizontalmente */
    align-items: center; /* Centraliza o texto verticalmente */
    height: 40px; /* Altura fixa dos blocos */
    
}

.quadras {
    background-color: #2196f3; /* Cor de fundo dos horários */
    color: #ffffff; /* Cor do texto */
    border-radius: 8px; /* Bordas arredondadas */
    display: flex;
    justify-content: center; /* Centraliza o texto horizontalmente */
    align-items: center; /* Centraliza o texto verticalmente */
    height: 40px; /* Altura fixa dos blocos */
    
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s; /* Animações ao interagir */
}

.quadras:hover {
    /*background-color: #1976d2; /* Cor ao passar o mouse */
    transform: scale(1.1); /* Leve aumento no tamanho */
}

.quadras.active {
    background-color: #1976d2; /* Cor ao passar o mouse */
    transform: scale(1.1); /* Leve aumento no tamanho */
}

.arrow {
    position: absolute; /* Posiciona as setas nas laterais */
    top: 25%; /* Centraliza verticalmente */
    transform: translateY(-50%); /* Ajusta para centralização perfeita */
    width: 40px; /* Largura das setas */
    height: 40px; /* Altura das setas */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
    color: #fff; /* Cor do ícone */
    border-radius: 50%; /* Deixa as setas redondas */
    display: flex; /* Centraliza o ícone com flexbox */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    cursor: pointer; /* Mostra cursor de mão ao passar */
    z-index: 10; /* Garante que as setas fiquem acima do conteúdo */
}

.video-container {
    margin-top: 30px;
    max-width: 600px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}

.video-item {
    width: 100%;
    max-width: 300px;
    max-width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}


.arrow.left {
    left: 10px; /* Posição à esquerda */
}

.arrow.right {
    right: 10px; /* Posição à direita */
}