.banner-container {
    position: relative;
    width: 90%;
    margin-left: 5%;
    height: 350px;
    overflow: hidden;
}

.banner {
    position: absolute;
    width: 90%;
    height: auto;
    margin-left: 5%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.banner-img {
    position: relative;
    width: 90%;
    height: auto;
}

.banner.active {
    opacity: 1;
}

/* Transições */
.fade { transition: opacity 1s ease-in-out; }

.slide-left {
    animation: slideLeft 1s ease-in-out;
}
@keyframes slideLeft {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-right {
    animation: slideRight 1s ease-in-out;
}
@keyframes slideRight {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.zoom-in {
    animation: zoomIn 1s ease-in-out;
}
@keyframes zoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.zoom-out {
    animation: zoomOut 1s ease-in-out;
}
@keyframes zoomOut {
    from { transform: scale(1.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}




/* Estilo dos botões de navegação */
.prev-button, .next-button {
    position: absolute;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0); /* Botão transparente */
    border: none;
    padding: 0;                 /* Remove o espaçamento interno */
    width: 50px;                /* Define a largura */
    height: 50px;               /* Define a altura */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botão da esquerda */
.prev-button {
    left: 10px;
}

/* Botão da direita */
.next-button {
    right: 10px;
}

/* Estilo para a imagem dentro dos botões */
.prev-button img, .next-button img {
    width: 100%;     /* Ajusta a imagem para ocupar o tamanho do botão */
    height: auto;
}

/* Efeitos de hover */
.prev-button:hover, .next-button:hover {
    background-color: rgba(0, 0, 0, 0.2); /* Um leve fundo escuro ao passar o mouse */
}