/* Estilos específicos para dispositivos móveis com largura máxima de 320px e altura máxima de 578px */

body {
    display: flex;
    /* Define o layout do body como flexbox */
    justify-content: center;
    min-width: 320px;
    max-width: 520px;
    margin: 0 auto;
    /* Centraliza horizontalmente o conteúdo dentro do body */
    align-items: center;
    /* Centraliza verticalmente o conteúdo dentro do body */
    background-image: url('img/fundo_verde.png');
    /* Define uma imagem de fundo para o body */
    background-size: cover;
    /* Faz com que a imagem de fundo cubra todo o body */
}

@media screen and (min-width: 521px) {

    /* Estilos para a Tela 1 */
    body {
        background-image: none;
        /* Define a imagem de fundo */
        background-color: #4caf50;
        background-size: cover;
        /* Cobre todo o espaço do body com a imagem */
    }
}

.container {
    width: 100%;
    /* Define a largura da div container como 100% */
    max-width: 100%;
    /* Impede que a largura exceda 100% */
    padding: 0;
    margin: 0;
    /* Remove o padding interno da div container */
}

.top-section img {
    background: none;
    /* Remove qualquer background presente na imagem */
    border: none;
    /* Remove bordas da imagem */
    width: 100%;
    /* Define a largura da imagem como 100% do elemento pai */
    height: auto;
    /* Ajusta automaticamente a altura da imagem para manter a proporção */
}



.bottom-section a {
    width: 100%;
    display: inline-flex;    
    /* Usa o layout flexível */
    justify-content: center;
    /* Centraliza horizontalmente */
    align-items: center;
    /* Centraliza verticalmente */
}

.bottom-section a img {
    padding-top: 15%;    
    /* Adiciona um padding no topo da imagem do botão */
    width: 70%;
    /* Define a largura da imagem do botão como 70% do elemento pai */
    height: auto;
    /* Ajusta automaticamente a altura da imagem do botão para manter a proporção */
    cursor: pointer;
    /* Muda o cursor para indicar que o elemento é clicável */

}

.bottom-section a{
    /* Inicialmente, defina a posição de partida */
    text-align: center;
    ;animation: pulse 1.5s infinite;
    /* Adiciona animação */
    transition: transform 0.2s ease-in-out;
    /* Suaviza a transformação */
}

/* Animação de pulsação */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        /* Tamanho original */
    }

    50% {
        transform: scale(1.1);
        /* Aumenta ligeiramente */
    }
}

footer{
    position: fixed;
    bottom: 0%;
    color: rgb(0, 0, 0);
    font-size: medium;

}