.banner {
    position: relative;
    width: 100%;
    margin-bottom: 20px; /* Espaçamento entre banners/imagens */
    overflow: hidden; /* Garante que o conteúdo não transborde o contêiner */
    margin: 35px auto;
}


.banner2 {
    position: relative;
    width: 100%;
    margin-bottom: 20px; /* Espaçamento entre banners/imagens */
    overflow: hidden; /* Garante que o conteúdo não transborde o contêiner */
    margin: 35px auto;
}
.banner img {
    width: 100%;
    height: auto;
    display: block; /* Garantir que a imagem ocupe toda a largura */
}
.banner2 img {
    width: 100%;
    height: auto;
    display: block; /* Garantir que a imagem ocupe toda a largura */
}
.banner-text {
    position: absolute;
    top: 15%; /* Centraliza o texto verticalmente */
    left: 5%; /* Centraliza o texto horizontalmente */

    color: white;
    font-size: 1.5em;
    padding: 20px; /* Espaçamento interno para o texto */
    max-width: 35%; /* Limita a largura do texto */
    box-sizing: border-box; /* Inclui o padding na largura total */
    text-align: left; /* Centraliza o texto dentro do bloco */
}


  @media (max-width: 768px) {
    .banner {
        height: 25vh; /* Aumenta a altura do banner para 60% da altura da tela */
        position: relative;
        text-align: left;
        display: flex; /* Adiciona o Flexbox */
        justify-content: center; /* Centraliza o conteúdo horizontalmente */
        align-items: center; /* Centraliza o conteúdo verticalmente */
    }

    .banner img {
        width: 100%;
        height: 100%; /* Faz a imagem ocupar 100% da altura do banner */
        object-fit: cover; /* Faz a imagem cobrir a área sem distorcer */
        display: block;
    }
    .banner2 {
        height: 25vh; /* Aumenta a altura do banner para 60% da altura da tela */
        position: relative;
        text-align: left;
        display: none; 
        justify-content: center; /* Centraliza o conteúdo horizontalmente */
        align-items: center; /* Centraliza o conteúdo verticalmente */
    }

    .banner2 img {
        width: 100%;
        height: 100%; /* Faz a imagem ocupar 100% da altura do banner */
        object-fit: cover; /* Faz a imagem cobrir a área sem distorcer */
        display: none; 
    }

    .banner-text {
        color: white;
        font-size: 1em; /* Reduz o tamanho da fonte */
        padding: 10px; /* Reduz o padding */
        max-width: 80%; /* Aumenta a largura do texto para usar mais espaço */
        box-sizing: border-box;
        text-align: center; /* Centraliza o texto no mobile */
        left: 10%;
    }
}