.banner-rot {
    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-rot img {
    width: 100%;
    height: auto;
    display: block; /* Garantir que a imagem ocupe toda a largura */
}

.banner-container {
    position: relative;
    width: 100%;
    max-width: 1142px; /* Ajuste conforme a largura da sua imagem */
    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-container2 {
    position: relative;
    width: 100%;
    max-width: 1142px; /* Ajuste conforme a largura da sua imagem */
    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-container img {
    width: 100%;
    height: auto;
}
.banner-container2 img {
    width: 100%;
    height: auto;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center; /* Alinha verticalmente o texto no centro */
    justify-content: space-between; /* Adiciona espaço entre os elementos */
    padding: 0 20px; /* Espaçamento interno lateral */
    box-sizing: border-box; /* Inclui padding e borda na largura total */
    overflow: hidden; /* Garante que o texto não saia do contêiner */
    
}

.side-image img {
    width: 540px;
    height: 400px;
}

.side-text-left, .side-text-right {
    position: absolute;

    color: white;
    max-width: 40%; /* Limita a largura do bloco de texto */
  
    box-sizing: border-box;
    font-size: 18px; /* Ajusta o tamanho da fonte */
}

.side-text-left {
    left: 20px; /* Ajuste conforme necessário para o posicionamento à esquerda */
}

.side-text-right {
    right: 20px; /* Ajuste conforme necessário para o posicionamento à direita */
}
.banner-mobile {
    display: none!important;
  }
  .carousel-item {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 100vh; /* evita que ultrapasse a altura da janela */
    overflow: hidden;
  }

.side-image-block img{
    max-width: 80%;
    height: auto;
}

.texto-folheto-mobile {
    display: none!important;
  }
/* Ajuste para telas menores (ex: celulares) */
@media (max-width: 768px) {
    .banner-rot img {
        width: 100%;
        height: auto;
        display: none; /* Garantir que a imagem ocupe toda a largura */
    }
    .banner-container {
        height: 45vh;
    }
    .banner-container2 {
        height: 25vh;
    }
    .banner-container 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; /* Garante que a imagem ocupe a largura inteira */
    }
    .banner-container2 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; /* Garante que a imagem ocupe a largura inteira */
    }
    .banner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; /* Garantir que o overlay ocupe toda a altura do contêiner */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Alinha o conteúdo ao topo */
        padding: 20px; /* Espacemento interno ajustado */
    }

    .side-image {
        width: 100%;
        height: auto; /* Garantir que a imagem tenha uma altura proporcional */
        margin-bottom: 0; /* Remove a margem inferior da imagem */
    }

    .side-text-left, .side-text-right {
        position: relative;
        max-width: 100%; /* Ajusta a largura do texto para caber na tela */
        font-size: 16px; /* Ajuste no tamanho da fonte para algo legível */
        color: black; /* Cor do texto */
        line-height: 1.4; /* Aumenta a altura das linhas para melhorar a legibilidade */
        text-align: center; /* Centraliza o texto */
        justify-content: center; /* centraliza verticalmente */
         /* Reduz o espaço entre a imagem e o texto */
    
    }

    .side-text-left {
        left: auto; /* Remove a posição à esquerda no mobile */
    }

    .side-text-right {
        right: auto; /* Remove a posição à direita no mobile */
    }
    .banner-desktop {
        display: none!important;
      }
      .banner-mobile {
        display: block!important;
      }
      .texto-folheto-mobile {
        display: block!important;
      }

      .texto-folheto-desktop{
        display: none!important;
      }
      .carousel-item img {
        width: 100%!important;
        height: auto;
        object-fit: cover; /* garante que a imagem preencha bem o espaço */
        display: block;
      }
      .side-image-block img{
        max-width: 100%;
        height: auto;
    }
}