@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
    --primary-color: #162335;
    --hover-color: #5FCAFF;
    --sub-hover-color: #FFAE00;
    --secondary-color: #701018;
    --dark-color: #162335;
    --text-color-dark: #162335;
    --text-color-light: #FDF6ED;
    --body-color: #F9F5EA;
    --footer-bg: var(--dark-color);
    --footer-text-color: var(--text-color-light);
    --footer-link-color: var(--text-color-light);
    --footer-link-color-hover: var(--hover-color);
    --cta-light-bg-color: var(--text-color-light);
    --cta-light-text-color: var(--primary-color);
    --cta-dark-bg-color: var(--hover-color);
    --cta-bg-hover: var(--secondary-color);
    --cta-dark-text-color: var(--text-color-light);
    --card-title-linear-gradient: linear-gradient(180deg, rgba(30, 16, 20, 0) 0%, #1E1014 37.5%);
    --header-gradient-bg: var(--dark-color);
    --dash-color: #F0D290;
    --slider-book-info-item: #5FCAFF;
    --popular-books-holder: linear-gradient(0deg, #5FCAFF 0%, #162335 100%);
}

body {
    font-family: 'Montserrat', sans-serif;
    background: var(--body-color);
}


/* HEADER AND FOOTER */

.header-dark-bg {
    background: var(--body-color);
}

header .navbar-dark {
    z-index: 100;
}

.dropdown-menu {
    background: var(--secondary-color);
    padding: 0;
}

.dropdown-menu .dropdown-item {
    padding: 0.5rem 1.5rem;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-color-light);
}

.dropdown-item:hover {
    background: var(--primary-color);
}

footer {
    background-color: var(--footer-bg);
    color: var(--footer-text-color);
}

footer .nav-link {
    color: var(--footer-link-color);
}

footer .nav-link:hover,
footer.nav-link.active {
    color: var(--footer-link-color-hover);
}

.navbar-dark .navbar-nav .nav-link {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-color-dark);
}

.navbar-nav .nav-item.active .nav-link {
    color: var(--footer-link-color-hover);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--footer-link-color-hover);
}


/* ******************************** */


/* CAROUSEL */

.movie-slider .carousel-item {
    height: 520px;
    background: var(--text-color-dark) !important;
}

.movie-slider .carousel-indicators li {
    height: 15px;
    width: 15px;
    border-radius: 20px;
    border-top: none;
    border-bottom: none;
    background-color: transparent;
    border: 2px solid #EEFAE5;
}

.carousel-indicators .active {
    background-color: var(--sub-hover-color) !important;
    border: none !important;
    width: 19px !important;
    height: 19px !important;
}

.carousel-control-prev-icon {
    background-image: url(../img/carousel-control-prev-icon.png);
}

.carousel-control-next-icon {
    background-image: url(../img/carousel-control-next-icon.png);
}

.movie-slider .carousel-item .poster-holder {
    max-height: 420px;
    width: 290px;
    max-width: 290px;
    border-right: 10px solid var(--body-color);
    border-radius: 0px 7px 7px 0px;
    box-shadow: 4px 0px 0px 0px rgba(237, 234, 234, 0.49);
    -webkit-box-shadow: 4px 0px 0px 0px rgba(237, 234, 234, 0.49);
    -moz-box-shadow: 4px 0px 0px 0px rgba(237, 234, 234, 0.49);
}

.poster-text {
    position: absolute;
    width: 281px;
    margin-top: -150px;
    height: 150px;
    background-color: #080e10a6;
    right: 25px;
    text-align: center;
    line-height: 74px;
    font-size: 28px;
    color: #EEFAE5;
    font-weight: 700;
    overflow: hidden;
    padding: 7px;
}

.poster-watermark {
    background: url(../img/poster-watermark.png) top left no-repeat;
    width: 280px;
    height: 60px;
    position: absolute;
    margin-left: 157px;
    margin-top: 7px;
}

.info-holder .subtitle {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: var(--text-color-light);
    border-left: 3px solid var(--dash-color);
}

.info-holder h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 59px;
    color: var(--text-color-light);
}

.info-holder .tagline {
    font-style: italic;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: var(--dash-color);
}

.info-holder .book-info {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-color-light);
}

.book-info-section-1 {
    background-color: var(--slider-book-info-item);
    color: var(--text-color-dark);
    padding: 5px 25px 5px 25px;
    border-radius: 21px;
    line-height: 17px;
}

.book-info-section-2 {
    color: var(--slider-book-info-item);
    line-height: 28px;
}

.info-holder .description {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    color: var(--text-color-light);
}

.watch-now-btn {
    max-width: 280px;
}

.page-item.active .page-link,
.page-item .page-link:hover {
    color: var(--hover-color) !important;
}


/* ******************** */


/* POPULAR NOW SECTION */

.popular-now .title-holder {
    padding-left: 5px;
    padding-right: 5px;
    height: 40px;
    margin-top: -40px;
    background: #080e10d7 url(../img/book-icon.svg) 5px center no-repeat;
}

.popular-now .watch-now {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-color-light);
}

.add-ext-btn-dark {
    background-color: var(--sub-hover-color);
    padding: 10px 20px;
    color: var(--text-color-dark);
    border-radius: 12px;
    border: 1px solid var(--sub-hover-color);
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 27px;
}

.add-ext-btn-dark:hover {
    border: 1px solid var(--text-color-light);
    color: var(--text-color-light);
}

.searchbar-icon-holder{
    color: var(--text-color-dark) !important;
}

.searchbar-icon a:hover {
    color: var(--footer-link-color-hover);
}


/* CTA Section on bottom */

.last-section {
    background: url(../img/last-section-bg.jpg);
    background-repeat: repeat-x;
    background-position: center;
    min-height: 370px;
}

.last-section .subtitle {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: var(--text-color-light);
}

.last-section .title {
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    color: var(--text-color-light);
}

.last-section .text {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: var(--text-color-light);
}

.last-section .add-ext-btn {
    background-color: var(--sub-hover-color);
    padding: 10px 20px;
    color: var(--text-color-dark);
    border-radius: 12px;
    border: 1px solid var(--sub-hover-color);
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 27px;
}

.last-section .add-ext-btn:hover {
    border: 1px solid var(--text-color-light);
    color: var(--text-color-light);
}


/* ************************* */

.discover-books-holder {
    background: url(../img/discover-book-bg.png) 3% 100% no-repeat;
    background-size: 13%;
}

.popular-books-holder {
    background: var(--popular-books-holder);
}

#carouselBookSlider .carousel-item {
    background: linear-gradient(180deg, #5FCAFF 0%, #162335 100%) !important;
}

.popular-books-holder img.book-cover-fallback {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.genres-bg {
    background: url(../img/genres-bg.png) 92% 50% no-repeat;
    background-size: 13%;
}

.popular-books-holder p {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 18px;
    color: var(--text-color-light) !important;
    font-family: Open sans-serif, sans-serif;
}

.popular-books-holder h2 {
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 36px !important;
    line-height: 44px !important;
    color: var(--text-color-light) !important;
    text-align: center;
    font-family: 'Google Sans', sans-serif;
}

.title-holder .item-title {
    font-style: normal;
    font-size: 13px;
    line-height: 17px;
    color: var(--text-color-light);
    text-align: right;
    font-weight: 600;
}

.item-holder-link {
    font-size: 15px;
    color: var(--text-color-dark);
    font-weight: 600;
}

.item-holder-link:hover {
    color: var(--text-color-dark);
    font-weight: 700;
}

.small-images-items .img-holder img,
.movies-items .img-holder img {
    width: 100%;
    height: auto;
}

.small-images-items .col {
    max-width: 180px;
}

.movies-items .img-holder {
    height: 255px;
    width: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.movies-items .col {
    max-width: 205px;
}

.small-images-items .img-holder {
    height: 280px;
    width: 186px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
}

.small-images-items .button-holder {
    width: 112px;
    height: 20px;
    margin-top: 100px;
    font-size: 14px;
    line-height: 1px;
    border-radius: 7px;
    padding: 8px 12px;
}

.small-images-items .col {
    max-width: 217px;
}

.not-found-text {
    color: var(--text-color-dark);
    font-weight: 600;
    font-size: 18px;
}


/* CTA Middle section Home Page */

.cta-middle-holder .subtitle,
.popular-now .subtitle {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: var(--text-color-dark);
    font-family: 'Montserrat', sans-serif;
}

.cta-middle-holder h2,
.popular-now h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    color: var(--text-color-dark);
    font-family: sans-serif;
}

.genres-bg h2 {
    margin: auto;
    border-bottom: 2px solid var(--hover-color);
    padding-bottom: 7px;
    max-width: 50%;
}

.popular-now-items .img-holder-link {
    height: 430px;
    width: 245px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.small-images-items .img-holder:hover {
    border: 2px solid var(--hover-color);
}

.popular-now-items .col {
    max-width: 275px;
}

.popular-now-items .img-holder img {
    height: 100%;
    width: 100%;
}

.popular-now-items .title-holder {
    max-width: 245px;
}

.all-popular-btn {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 18px;
    padding: 3px 20px 3px 20px;
    border-radius: 9px;
    color: var(--body-color);
    border: 2px solid var(--body-color);
}

.all-popular-btn:hover {
    color: var(--dash-color);
    border: 2px solid var(--dash-color);
    opacity: 0.8;
}

.cta-middle-holder p {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: var(--text-color-dark);
}

.cta-middle-holder .streaming-option {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-color-dark);
    align-items: center;
}

.cta-middle-holder .icon-holder {
    width: 37px;
    text-align: center;
}


/* HOW TO USE PAGE */

.welcome-holder {
    background: url(../img/welcome-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 448px;
}

.welcome-holder h1 {
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 59px;
    color: var(--text-color-light);
}

.welcome-holder p {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: var(--text-color-light);
}

.welcome-holder svg defs linearGradient stop {
    stop-color: var(--hover-color);
}

.welcome-holder .border-bottom {
    border-bottom: 3px solid var(--hover-color) !important;
}

.htu-container h2,
.using-widget h2,
.additional-options h2 {
    font-weight: 700;
    font-size: 24px;
}

.open-widget {
    background: url(../img/discover-book-bg.png) 3% 60% no-repeat;
}

.additional-options {
    background: url(../img/htu-bottom-right.png) 3% 86% no-repeat;
}

.using-widget {
    background: url(../img/using-widget-bg.png) 96% 103% no-repeat;
}

.htu-container img {
    width: 100%;
    max-width: 650px;
}

.additional-options img {
    max-width: 825px;
}

.using-widget img {
    max-width: 1130px;
}

a:hover {
    text-decoration: none;
}


/* **************** */


/* Movie details */

.detailed-movies-section {
    background-color: var(--dark-color);
}

.detailed-movies-section h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-color-light);
}

.modal-backdrop.show {
    opacity: 0.9 !important;
}

.movie-options-holder .movie-option,
.movie-options-holder .movie-option a {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    color: var(--text-color-light);
}

.movie-options-holder .movie-option:hover {
    cursor: pointer;
}

.more-similar-movies .more-similar-title {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    color: var(--text-color-dark);
    border-left: 3px solid var(--dash-color);
}

.more-similar-movies .item-title {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: var(--text-color-dark);
}

.modal .modal-content {
    background: var(--body-color);
}

.modal .close {
    color: var(--text-color-light);
}

.modal .close:hover {
    cursor: pointer;
}

.modal .modal-title {
    border-left: 3px solid var(--dash-color);
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    color: var(--text-color-dark);
}

.modal .modal-header {
    border: none;
}

.copy-link-holder {
    border: 1px solid var(--primary-color);
    border-radius: 20px;
}

.copy-link-holder input {
    background-color: transparent;
    border-color: transparent;
    width: 80%;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: var(--text-color-dark);
    outline: none;
}

.copy-link-holder input:focus-visible {
    border: none !important;
    outline: none;
}

.copy-link-holder button {
    background: var(--primary-color);
    border-radius: 36px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    color: var(--text-color-light);
    border: 1px solid var(--primary-color);
}


/* **************** */


/* Subtitle holder */

.subtitle-holder {
    background: var(--dark-color);
}

.subtitle-holder h1 {
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    color: var(--primary-color);
    text-transform: uppercase;
}

.subtitle-holder span {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-color-light);
}


/* ******************* */


/* TOP 10 HOLDER */

.number-circle {
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    background-color: var(--body-color);
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    color: var(--text-color-dark);
    width: 50px;
    height: 50px;
    margin-top: -50px;
    margin-left: -40px;
}

.top-movie-card-holder {
    border: 1px solid rgba(12, 12, 12, 0.1);
    box-shadow: 0px 0px 8px rgba(12, 12, 12, 0.1);
    border-radius: 12px;
}

.top-movie-card-holder img {
    max-height: 230px;
    width: auto;
}

.top-movie-card-holder h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    color: var(--text-color-dark);
}


/* **************** */


/* Trivia holder */

.trivia-holder h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    text-align: center;
    color: var(--text-color-light);
}

.movies-trivia-holder {
    min-height: 270px;
    background: url(../img/movie-trivia.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.trivia-holder .play-link {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: var(--text-color-light);
    padding: 10px 20px;
    border: 1px solid var(--text-color-light);
    border-radius: 15px;
    max-width: 160px;
}

.trivia-holder .play-link:hover {
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border: 1px solid var(--primary-color);
}

.shows-trivia-holder {
    min-height: 270px;
    background: url(../img/show-trivia.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.embed-responsive {
    border-radius: 15px;
}

.back-link {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    color: var(--text-color-dark);
}

.back-link:hover {
    color: var(--primary-color);
}


/* ************** */

.fdbck-header-holder {
    background: url(../img/last-section-bg.jpg);
}

.card-footer {
    background-color: transparent;
    border-top: none;
}

.feedback-btn {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    border: 1px solid var(--primary-color);
}

.feedback-btn:hover {
    background-color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color);
}

.search-holder {
    background-color: var(--body-color);
}

.searchbar {
    max-width: 650px;
    border: 1px solid var(--text-color-dark);
    border-radius: 20px;
}

.searchbar button {
    background: transparent;
    border: none;
}

.searchbar button:focus {
    outline: none;
}

.searchbar-icon {
    border-left: 2px solid var(--text-color-dark);
    padding-left: 22px;
}

.searchbar-icon-holder:hover {
    cursor: pointer;
}

.searchbar-icon-holder:hover .searchbar-icon {
    color: var(--hover-color);
}

.search-input {
    background: transparent;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: var(--text-color-dark) !important;
    border: none;
    outline: none;
    border-radius: 22px;
}

.search-input:focus {
    background: transparent;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: var(--text-color-light);
    border: none;
    outline: none;
    box-shadow: none;
}

#searchBarHolder {
    z-index: 10000;
    width: 600px;
    top: 0px;
    position: absolute;
    left: 48%;
}

.searchbar-close-icon:hover {
    color: var(--hover-color);
}

.movies-items .title-holder .item-title {
    color: var(--text-color-dark);
}

.fdbc-img-holder {
    background: transparent;
    border: 2px solid var(--dark-color);
}

.cat-slider a {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    color: var(--body-color);
    width: 287px;
    height: 313px;
    line-height: 313px;
    background-size: cover;
}

.cat-slider a:hover,
.cat-slider a.active {
    color: var(--hover-color);
}

.cat-slider .carousel-control-prev {
    left: 174px;
    top: 186px;
}

.cat-slider .carousel-control-next {
    right: 174px;
    top: 186px;
}

.cat-slider .carousel-control-prev-icon {
    background: url(../img/categoty-carousel-control-prev-icon.png) center center no-repeat !important;
    width: 30px;
}

.cat-slider .carousel-control-next-icon {
    background: url(../img/categoty-carousel-control-next-icon.png) center center no-repeat !important;
    width: 30px;
}

.category-page h2 {
    font-family: sans-serif;
    font-weight: 700;
}

.search-page .discover-books-holder {
    background: none !important;
}

.categories-submenu {
    background-color: var(--dark-color);
    height: 60px;
    display: inline-block;
    overflow-y: hidden;
}

.categories-submenu .nav-link {
    color: var(--body-color);
    font-size: 18px;
    font-weight: 600;
}

.categories-submenu .nav-link:hover,
.categories-submenu .nav-link.active {
    color: var(--sub-hover-color);
}


/* PAGINATION */

.page-link {
    background: transparent;
    border: none;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: var(--text-color-dark);
}

.page-link:hover {
    color: var(--primary-color);
    background-color: transparent;
    border: none;
}

.page-item.active .page-link {
    background-color: transparent;
    border: none;
    color: var(--primary-color);
}

.page-item.disabled .page-link {
    background-color: transparent;
}


/* *************** */

.empty-search-holder h2,
.empty-search-holder h3 {
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    color: var(--text-color-dark);
}

.empty-search-holder p {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: var(--text-color-dark);
}

.empty-search-holder img {
    height: 200px;
    width: auto;
}

.static-view h1 {
    margin-top: 15px;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    color: var(--text-color-dark);
}

.static-view p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-color-dark);
}

.static-title h1 {
    font-size: 1.75rem;
}

@media only screen and (max-width: 768px) {
    .movie-slider .carousel-item {
        height: 700px !important;
    }
}