.banner-small {
    position: relative;
    text-align: left;
    margin: 50px;
    width:70%;
  
  }
  
  .banner-small img {
    width: 100%;
    max-height: 350px;
  }

  .banner-text21 {
    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-small {
        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 */
        width:100%;
    }

    .banner-small 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;
    }
    .banner-text21 {
        color: black !important;
        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%;
    }
    
}