.lisos_cacheados_container {
    position: relative;
    width: 80%; 
    margin-top: 100px;
    margin-bottom: -150px;
    margin-left: auto;
    margin-right: auto
}

.fundo {
    width: 100%; 
    height: auto; 
    display: block; 
}

.lisos_cacheados {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    display: flex;
    justify-content:space-evenly;
    align-items: center; 
}

.lisos {
    position: relative;
    z-index: 1; 
    transition: transform 0.3s ease; 
}

.lisos:hover {
    transform: translateY(-10px); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}

.cacheados {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease; 
}

.cacheados:hover {
    transform: translateY(-10px); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}

.lisos_cacheados {
    text-align: center;
}

.banner_cacheados {
    width: 100%; /* O banner ocupa 100% da largura disponível */
    max-width: 100%; /* Garante que o banner não ultrapasse 100% da largura */
    height: auto; /* Ajusta a altura proporcionalmente */
    text-align: center; /* Centraliza o conteúdo dentro do banner */
    margin-top: 5%;
    margin-bottom: 5%;
    object-fit: cover;
}




@media (max-width: 1440px) {
   .lisos, .cacheados {
        max-width: 90%; /* Ajusta a largura máxima das imagens para 90% da tela */
    }

    .lisos_cacheados {
        padding: 50px; 
    }

    .banner {
        width: 90%; /* O banner ocupará 90% da largura da tela em telas menores */
    }
}

@media (max-width: 1293px) {
    .lisos, .cacheados {
        max-width: 90%;
    }

    .banner {
        width: 80%; /* O banner ocupará 90% da largura da tela em telas menores */
    }
}

@media (max-width: 1000px) {
    .banner {
        width: 70%; /* O banner ocupará 90% da largura da tela em telas menores */
        margin-top: 100px;
    }

    .lisos, .cacheados {
        margin-bottom: 10px;
    }
}