/* Estilos base (para todas as telas) */
.Home {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5% 10%; /* Ajuste para o padding de forma mais proporcional */
    background-color: hwb(0 97% 3%);
    color: white;
    height: 75vh; /* Garante que a seção ocupe a altura total da tela */
}

.Apresentacao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 5% 10%; /* Ajuste no padding para maior aproveitamento de espaço */
    font-family: 'Ubuntu', sans-serif;
    color: #5f2fb8;
    margin-top: 0; /* Remove a margem superior para melhor aproveitamento */
    width: 100%; /* Garante que ocupe toda a largura disponível */
}

.Apresentacao h1 {
    font-size: 4rem; /* Aumenta o tamanho da fonte */
    margin: 0;
}

.Apresentacao h3 {
    font-size: 1.5rem; /* Aumenta o tamanho da fonte */
    margin: 10px 0;
    font-weight: 300;
}

.Apresentacao a {
    display: inline-block;
    padding: 20px 40px; /* Aumenta o tamanho do botão */
    background-color: #5f2fb8; 
    color: rgb(27, 0, 49); 
    text-align: center;
    text-decoration: none;
    border-radius: 7px; 
    font-size: 32px; /* Aumenta o tamanho do texto */
    transition: background-color 0.3s ease; 
}

.Apresentacao a:hover {
    background-color: rgb(75, 20, 201); 
    opacity: 0.7;
}

.home-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%; /* Garante que ocupe toda a largura disponível */
    padding: 0 10%; /* Ajusta o padding para não perder muito espaço */
}

.home-img img {
    width: 350px; /* Aumenta o tamanho da imagem */
    height: auto;
    border-radius: 60%;
    box-shadow: 7px 10px 12px rgba(0, 0, 0, 0.2); 
}

.home-img ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px; /* Aumenta o espaço entre os ícones */
    margin-top: 20px;
}

.home-img a img {
    width: 60px; /* Aumenta o tamanho dos ícones */
    height: auto;
    transition: 0.3s;
}

.home-img a img:hover {
    transform: scale(1.5); /* Aumenta o zoom do ícone */
    opacity: 0.8;
}

/* Media Queries para Responsividade */

/* Telas pequenas (celulares - até 767px) */
@media (max-width: 767px) {
    .Home {
        flex-direction: column-reverse; /* Altera a direção do flex para empilhar os elementos */
        padding: 10% 5%; /* Reduz o padding para economizar espaço */
        height: auto; /* Remove a altura fixa */
    }

    .Apresentacao {
        align-items: center; /* Centraliza o conteúdo */
        text-align: center; /* Centraliza o texto */
        padding: 5%; /* Reduz o padding */
    }

    .Apresentacao h1 {
        font-size: 2.5rem; /* Reduz o tamanho da fonte do título */
    }

    .Apresentacao h3 {
        font-size: 1.25rem; /* Reduz o tamanho da fonte do subtítulo */
    }

    .Apresentacao a {
        padding: 15px 30px; /* Reduz o tamanho do botão */
        font-size: 1.5rem; /* Reduz o tamanho da fonte do botão */
    }

    .home-img {
        padding: 5%; /* Reduz o padding */
    }

    .home-img img {
        width: 250px; /* Reduz o tamanho da imagem */
    }

    .home-img a img {
        width: 40px; /* Reduz o tamanho dos ícones */
    }
}

/* Telas grandes (desktops - a partir de 1024px) */
@media (min-width: 1024px) {
    .Home {
        padding: 5% 10%; /* Mantém o padding original */
        height: 75vh; /* Mantém a altura fixa */
    }

    .Apresentacao h1 {
        font-size: 4rem; /* Mantém o tamanho da fonte do título */
    }

    .Apresentacao h3 {
        font-size: 1.5rem; /* Mantém o tamanho da fonte do subtítulo */
    }

    .Apresentacao a {
        padding: 20px 40px; /* Mantém o tamanho do botão */
        font-size: 2rem; /* Mantém o tamanho da fonte do botão */
    }

    .home-img img {
        width: 350px; /* Mantém o tamanho da imagem */
    }

    .home-img a img {
        width: 60px; /* Mantém o tamanho dos ícones */
    }
}