@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

body {
    background-image: url('../img/bg-first-screen.webp'); /* Usei ./ para o caminho */
    background-size: cover; /* Ajusta a imagem para cobrir todo o fundo */
    background-position: center; /* Centraliza a imagem de fundo */
    display: grid;
    place-items: center;
    height: 100vh;
    margin: 0; /* Remove margens padrão */
    font-family: 'Poppins', sans-serif; /* Definindo a fonte globalmente */
}

.container {
    text-align: center;
    background: rgb(255 255 255 / 15%);
    padding: 30px;
    border-radius: 15px; /* Bordas arredondadas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Sombra suave */
    max-width: 90%; /* Limita a largura da container */
    margin: auto; /* Centraliza a container */
}

.logo img {
    width: 100%; /* Torna o logo responsivo */
    max-width: 500px; /* Limita o tamanho máximo do logo */
    height: auto; /* Mantém a proporção da imagem */
    margin-bottom: 20px;
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

.generic-button, 
.servicos-button,
.orcamento-button,
.mail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Centraliza o conteúdo do botão */
    background-color: #7c2dfa;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin: 10px;
    width: 90%; /* Largura responsiva */
    max-width: 200px; /* Largura máxima para os botões */
    height: 50px; /* Altura fixa para todos os botões */
    transition: background-color 0.3s; /* Efeito suave para a transição de cor */
}

.generic-button:hover,
.servicos-button:hover,
.orcamento-button:hover,
.mail-button:hover {
    background-color: #000;
    color: white;
}

.generic-button i,
.servicos-button i,
.orcamento-button i,
.mail-button i {
    margin-right: 5px;
}

.button-container i {
    margin-right: 5px; /* Espaçamento entre ícone e texto */
}

@keyframes moveBackground {
    0% {
        background-position: center 0%; /* Posição inicial (cima) */
    }
    100% {
        background-position: center 100%; /* Posição final (baixo) */
    }
}

@media (max-width: 768px) {
    .container {
        animation: moveBackground 5s linear infinite; /* Animação em dispositivos móveis */
        padding: 20px; /* Ajuste o preenchimento em telas menores */
    }
}

@media (min-width: 769px) {
    .container {
        padding: 20px 30px; /* Ajuste o preenchimento, se necessário */
    }

    .button-container {
        font-size: 12px; /* Diminui o tamanho da fonte para telas grandes */
    }

    .generic-button, 
    .servicos-button,
    .orcamento-button,
    .mail-button {
        width: 270px; /* Ajusta a largura dos botões, se necessário */
        height: 45px; /* Ajusta a altura dos botões, se necessário */
    }

    .icon {
        font-size: 20px; /* Diminui o tamanho do ícone em telas maiores */
    }
}

.icon-container {
    display: flex;
    justify-content: center; /* Centraliza os ícones horizontalmente */
    margin-bottom: 20px; /* Espaço entre os ícones e os botões */
}

.icon {
    font-size: 24px; /* Tamanho do ícone */
    color: #7c2dfa; /* Cor do ícone */
    margin: 0 15px; /* Espaço entre os ícones */
    transition: color 0.3s; /* Efeito suave para a transição de cor */
}

.icon:hover {
    color: #000; /* Cor do ícone ao passar o mouse */
}