:root {
    --bs-primary: #102C57 !important;
    --bs-primary-rgb: 16, 44, 87 !important;
    --bs-white: #F8F0E5;
    --bs-yellow: #DAC0A3 !important;
    --bs-yellow-rgb: 218, 192, 163 !important;
    --bs-yellow-bege: #EADBC8 !important;
    --bs-yellow-bege-rgb: 234, 219, 200 !important;
    --bs-gray: #333333 !important;
    --bs-gray-rgb: 51, 51, 51 !important;
    --bs-body-font-family: 'League Spartan', Arial, sans-serif !important;
    --bs-heading-font-family: 'League Spartan', Arial, sans-serif !important;

    --bs-body-bg: #F8F0E5 !important;
    --bs-body-bg-rgb: 248, 240, 229 !important;

    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .200rem;


}

.navbar-toggler {
    --bs-navbar-color: var(--bs-white) !important;
    border: none !important;
    --bs-navbar-toggler-padding-y: 0.25rem !important;
    --bs-navbar-toggler-padding-x: 0.25rem !important;

}

nav ul img {
    width: 150px;
}

.sobre-filme {
    margin: 40px 0;
}

.cartaz img {
    width: 400px;
    height: 600px;
    object-fit: cover;
}

.text-yellow {
    color: var(--bs-yellow) !important;
}

.text-yellow-bege {
    color: var(--bs-yellow-bege);
}

.text-gray {
    color: var(--bs-gray) !important;
}

.bg-yellow-bege {
    background-color: var(--bs-yellow-bege);
}

.btn {
    --bs-btn-font-size: 1.5rem !important;
    --bs-btn-line-height: 1 !important;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-color: var(--bs-yellow-bege) !important;

    --bs-btn-hover-color: var(--bs-primary) !important;
    --bs-btn-hover-bg: var(--bs-yellow-bege) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-border-color: var(--bs-primary) !important;
}

.elenco-img {
    width: 190px;
    height: 190px;
    object-fit: cover;
}

.lateral-clara-direita {
    right: 0px;

}

.videos {
    width: 400px;
    height: 225px;

}

#posters {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

#posters>div {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.posters-img {
    width: 100%;
    min-width: 295px;
    max-width: 295px;
    border-radius: 8px;
    object-fit: cover;
}

@media (min-width: 992px) {
    #posters {
        overflow-x: visible;
        flex-wrap: wrap;
        gap: 0;
        padding-bottom: 0;
        justify-content: space-between;
    }

    #posters>div {
        flex: 0 0 23%;
        max-width: 23%;
        scroll-snap-align: unset;
    }

    .posters-img {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 991.98px) {
    #posters {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 1.5rem;
    }

    #posters>div {
        flex: 0 0 auto;
        max-width: 295px;
    }

    .posters-img {
        min-width: 295px;
        max-width: 295px;
    }
}

#elenco {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
}

#elenco>div {
    flex: 0 0 auto;
    scroll-snap-align: start;
    max-width: 190px;
}

.elenco-img {
    width: 100%;
    min-width: 190px;
    max-width: 190px;
    height: 190px;
    object-fit: cover;
    border-radius: 50%;
}

@media (max-width: 991.98px) {
    #elenco {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 1.5rem;
        padding-bottom: 1rem;
    }

    #elenco>div {
        flex: 0 0 auto;
        max-width: 190px;
    }

    .elenco-img {
        min-width: 190px;
        max-width: 190px;
    }
}

#videos {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: flex;
    gap: 1.5rem;
}

#videos>div {
    flex: 0 0 auto;
    scroll-snap-align: start;
    max-width: 400px;
}

.videos-frame {
    width: 100%;
    min-width: 400px;
    max-width: 400px;
    aspect-ratio: 16/9;
    border-radius: 8px;
    object-fit: cover;
}

@media (min-width: 992px) {
    #videos {
        overflow-x: visible;
        flex-wrap: wrap;
        gap: 0;
        padding-bottom: 0;
        justify-content: space-between;
    }

    #videos>div {
        flex: 0 0 32%;
        max-width: 32%;
        scroll-snap-align: unset;
    }

    .videos-frame {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 991.98px) {
    #videos {
        flex-wrap: nowrap;
        gap: 1.5rem;

    }

    #videos>div {
        flex: 0 0 auto;
        max-width: 295px;
    }

    .videos-frame {
        min-width: 295px;
        max-width: 295px;
        height: 166px;
    }
}

#fundo {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

#fundo>div {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.imagens-fundo-img {
    width: 100%;
    min-width: 610px;
    max-width: 610px;
    height: 343px;
    border-radius: 8px;
    object-fit: cover;
}

@media (min-width: 992px) {
    #fundo {
        flex-wrap: wrap;
        gap: 0;
        display: flex;
        justify-content: space-between;
    }

    #fundo>div {
        flex: 0 0 49%;
        max-width: 49%;
        scroll-snap-align: unset;
    }

    .imagens-fundo-img {
        min-width: 0;
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 991.98px) {
    #fundo {
        display: flex;
        flex-wrap: nowrap;
        gap: 1.5rem;
        overflow-x: auto;
    }

    #fundo>div {
        flex: 0 0 auto;
        max-width: 610px;
    }

    .imagens-fundo-img {
        min-width: 610px;
        max-width: 610px;
        height: 343px;
    }
}

@media (max-width: 575.98px) {
    #fundo>div {
        max-width: 295px;
    }

    .imagens-fundo-img {
        min-width: 295px;
        max-width: 295px;
        height: 166px;
    }
}

#recomendacoes {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
}

#recomendacoes>div {
    flex: 0 0 auto;
    scroll-snap-align: start;
    max-width: 190px;
}

.recomendacoes-img {
    width: 100%;
    min-width: 190px;
    max-width: 190px;
    height: 285px;
    object-fit: cover;
    border-radius: 8px;
}

@media (min-width: 992px) {
    #recomendacoes {
        overflow-x: visible;
        flex-wrap: wrap;
        gap: 0;
        padding-bottom: 0;
        justify-content: space-between;
    }

    #recomendacoes>div {
        flex: 0 0 15%;
        max-width: 15%;
        scroll-snap-align: unset;
    }

    .recomendacoes-img {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 991.98px) {
    #recomendacoes {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 1.5rem;
        padding-bottom: 1rem;
    }

    #recomendacoes>div {
        flex: 0 0 auto;
        max-width: 190px;
    }

    .recomendacoes-img {
        min-width: 190px;
        max-width: 190px;
    }
}

@media (max-width: 575.98px) {
    .btn {
        --bs-btn-font-size: 1rem !important;
    }

    .cartaz img {
        width: 100%;
        height: auto;
    }
}

.resenha-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 16;
    overflow: hidden;
    text-overflow: ellipsis;
}

.horizontal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.horizontal-scroll::-webkit-scrollbar {
    display: none;
}

.aspect-poster {
    --bs-aspect-ratio: 149%;
}