/* Estilos para ícones de redes sociais */
.social-icon {
    width: 32px; /* Ajuste do tamanho para manter a proporção */
    height: auto; /* Altura automática para manter a proporção da imagem */
    margin: 0 10px; /* Espaçamento entre os ícones */
}

/* Estilos padrão */

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden; /* Alterado de 'hidden' para 'overflow-x: hidden' para evitar rolagem vertical indesejada */
}

#video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#logo {
    width: 50%; /* Alterado de 400px para 50% para ser mais responsivo */
    max-width: 600px; /* Adicionado max-width para garantir que o logo não fique muito grande em monitores grandes */
}

#titulo, #descricao {
    color: white;
    text-align: center;
}

#titulo {
    font-size: 2em; /* Tamanho da fonte ajustável */
    font-family: 'Oswald', sans-serif; /* Aplicando Oswald para o título e descrição */
}

#descricao {
    font-size: 1em; /* Tamanho da fonte ajustável */
    font-family: 'Roboto', sans-serif; /* Aplicando Roboto como a fonte padrão */
}

#redes-sociais p {
    color: white;
    text-align: center;
    font-size: 0.8em; /* Tamanho da fonte ajustável */
    font-family: 'Roboto', sans-serif; /* Aplicando Roboto como a fonte padrão */
}

#botao {
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    background: blue;
    color: white;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
}

#botao:hover {
    box-shadow: 0 0 10px #00aaff;
}

/* Media queries */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 767px) {
    /* Styles */
    #titulo {
        font-size: 1.5em; /* Menor para caber em telas menores */
    }

    #descricao {
        font-size: 0.8em; /* Menor para caber em telas menores */
    }

    #logo {
        width: 70%; /* Maior percentual da tela */
    }
}

/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
    /* Styles */
    #titulo {
        font-size: 1.75em; /* Tamanho intermediário */
    }

    #descricao {
        font-size: 0.9em; /* Tamanho intermediário */
    }
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    /* Styles */
    #titulo {
        font-size: 2em; /* Tamanho padrão para telas grandes */
    }

    #descricao {
        font-size: 1em; /* Tamanho padrão para telas grandes */
    }
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    /* Styles */
    #titulo {
        font-size: 2.5em; /* Maior para telas muito grandes */
    }

    #descricao {
        font-size: 1.2em; /* Maior para telas muito grandes */
    }
}

/* Posicionar redes-sociais na parte inferior da página */
#redes-sociais {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 20px 0; /* Adiciona um pouco de padding na parte inferior */
}

/* Aumentar o espaço entre a descrição e o botão */
#descricao {
    margin-bottom: 20px; /* Aumenta a margem inferior */
}

/* Ajuste adicional para o botão, se necessário */
#botao {
    margin-top: 20px; /* Aumenta a margem superior para adicionar espaço */
}