/* Add here all your CSS customizations */
.box.has-dark {
    background: #344066;
	color: #fff;}

.box.has-dark2 {
    background: #fff;
	color: #344066;}


.box {
    padding: 20px 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.box .box-particles2 {
    position: absolute;
    top: -1rem;
    right: -1rem;
}

.box .row {
    padding: 0;
    margin: 0;
}

.box .col, .box .col-auto {
    padding: 0;
    margin: 0;
}

.col-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.box .col {
    margin-left: 10px;
}

.box .col, .box .col-auto {
    padding: 0;
    margin: 0;
}
.box.has-left-icon .box-title {
    margin: 5px 0 10px;
}
.box.has-dark .box-title {
    color: white;
}
.box .box-title {
    margin-bottom: 15px;
    font-size: 18px;
    transition: 0.25s;
}
.box.has-dark .box-desc {
    color: white;
}
.box .box-desc {
    font-size: 15px;
}

.box.has-dark2 .box-title2 {
    color: #344066;
}
.box.has-dark2 .box-desc2 {
    color: #344066;
}


/* Estilize sua div da maneira que desejar */
.zoom-effect {
    transition: transform 2s ease; /* Adiciona uma transição suave de 0.3 segundos */
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.50);
	
}

/* Quando o mouse estiver em cima da div, aplique o efeito de zoom */
.zoom-effect:hover {
    transform: scale(1.01); /* Aumenta a escala da div para 110% */
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.90);
}

/* Estilize sua div da maneira que desejar */
.zoom-effect2 {
    transition: transform 2s ease; /* Adiciona uma transição suave de 0.3 segundos */
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.20);
	
}

/* Quando o mouse estiver em cima da div, aplique o efeito de zoom */
.zoom-effect2:hover {
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.40);
}

/* Estilize sua div da maneira que desejar */
.zoom-effect3 {
    transition: transform 0.3s ease; /* Adiciona uma transição suave de 0.3 segundos */
	text-shadow: 0px 2px 15px rgba(0, 0, 0, 0.20);
	
}

/* Quando o mouse estiver em cima da div, aplique o efeito de zoom */
.zoom-effect3:hover {
	text-shadow: 0px 2px 15px rgba(0, 0, 0, 0.90);
	 transform: scale(1.2);
}



/* Adiciona a classe img-responsive no CSS */
.rev_slider .slide-overlay {
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
}



<style>
    .slider-container {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .slider-container .slider {
        width: 100%;
    }

    .slider-container .slide-overlay img {
        width: 100%;
        height: auto;
    }
</style>

<div class="slider-container">
    <div id="revolutionSlider" class="slider rev_slider" data-version="5.4.8"
         data-plugin-revolution-slider
         data-plugin-options="{'sliderLayout': 'fullscreen', 'delay': 9000, 'gridwidth': 1170, 'gridheight': 700, 'disableProgressBar': 'on', 'responsiveLevels': [4096,1200,992,500,300], 'parallax': { 'type': 'scroll', 'origo': 'enterpoint', 'speed': 1000, 'levels': [2,3,4,5,6,7,8,9,12,50], 'disable_onmobile': 'on' }}">
        <ul>
            <li class="slide-overlay" data-transition="fade">
                <img src="imagens/banners/04.jpg" alt=""
                     data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"
                     class="rev-slidebg">
            </li>
            <!-- Outras li's aqui -->
        </ul>
    </div>
</div>