.banner{
    width: 100%;
    height: 100vh;
}

.banner-sm{
    height: auto !important;
    max-height: 600px !important;
    min-height: 600px !important;
}

.banner-sm .banner-item{
    height: auto !important;
    max-height: 600px !important;
    min-height: 600px !important;
}

.banner-sm .banner-img img{
    max-width: 500px;
    margin-left: auto;
}

.banner .banner-item{
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner .banner-tools{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.banner-hover{
    transition: .7s;
}

.banner-hover:hover{
    filter: brightness(1.1) contrast(1.1);
    transform: scale(1.1);
}

@media only screen and (max-width: 956px) {
    .banner{
        width: 100%;
        height: auto;
        min-height: 500px !important;
    }
    .banner .banner-item{
        flex-direction: column;
        height: auto;
        min-height: 500px !important;
    }
    .banner-content, .banner-img{
        width: 100% !important;
    }
    .banner-img{
        order: -1;
    }
    .banner-sm{
        width: 100% !important;
        height: auto !important;
        max-height: max-content !important;
        min-height: 500px !important;
    }
    .banner-sm .banner-item{
        flex-direction: column !important;
        height: auto !important;
        max-height: max-content !important;
        min-height: 500px !important;
    }
}

.banner .banner-content{
    width: 50%;
    flex: 50%;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.banner-btns{
    margin-top: 20px;
}

.banner .banner-content h1{
    font-size: 50px;
    line-height: 50px;
    color: #ededed;
}

.banner .banner-content h2{
    font-size: 38px;
    line-height: 38px;
    color: #ededed;
}

.banner .banner-content p{
    font-size: 20px;
    color: #ededed;
}

.banner .banner-img{
    width: 50%;
    flex: 50%;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner .banner-img img{
    width: 100%;
}

.fade-left-carousel {
    top: 0;
    position: absolute;
    transform: scale(0) translateX(-100%) translateY(-100%) translateZ(-100px); /* Ajuste para sair da tela, mas não causando overflow */
    opacity: 0;
    transition: transform 0.7s ease, opacity 0.7s ease;
    z-index: -999;
}

.fade-right-carousel {
    top: 0;
    position: absolute;
    transform: scale(0) translateX(100%) translateY(-100%) translateZ(-100px); /* O mesmo para a direita */
    opacity: 0;
    transition: transform 0.7s ease, opacity 0.7s ease;
    z-index: -999;
}

.show-carousel {
    position: initial;
    opacity: 1;
    transform: scale(1) translateX(0) translateX(0) translateZ(0) !important; /* Volta ao tamanho normal */
    z-index: 1;
}