@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: #1D97CD;
    --secondary-color: #13729b;
    --dark-color: #0C0C0C;
    --text-color-dark: #1E1014;
    --text-color-light: #F5F1E7;
    --body-color: #F5F1E7;

    --footer-bg: var(--dark-color);
    --footer-text-color: var(--text-color-light);
    --footer-link-color: var(--text-color-light);
    --footer-link-color-hover: var(--primary-color);

    --cta-light-bg-color: var(--text-color-light);
    --cta-light-text-color: var(--primary-color);

    --cta-dark-bg-color: var(--primary-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: #1D97CD;
}

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

/* HEADER AND FOOTER */
.header-dark-bg {
    background: var(--header-gradient-bg);
}

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);
}

.gradient-bg {
    background: url(../img/header-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

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-light);
}

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

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

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

/* CAROUSEL */
.movie-slider .carousel-item {
    height: 800px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

.carousel-section-holder {
    margin-top: -70px;
}

.movie-slider .carousel-indicators li {
    height: 15px;
    width: 15px;
    border-radius: 20px;
    border-top: none;
    border-bottom: none;
    background-color: var(--primary-color)
}

.movie-slider .carousel-item .poster-holder {
    max-height: 600px;
    width: 100%;
    max-width: 400px;
}

.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 .movie-info {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-color-light);
}

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

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

/* ******************** */
/* POPULAR NOW SECTION */
.popular-now .title-holder {
    background: var(--card-title-linear-gradient);

}

.popular-now .title-holder {
    padding-left: 5px;
    padding-right: 5px;
    height: 140px;
    margin-top: -140px;
}

.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(--cta-dark-bg-color);
    padding: 10px 20px;
    color: var(--cta-dark-text-color);
    border-radius: 12px;
    border: 1px solid var(--cta-dark-bg-color);
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 27px;
}

.add-ext-btn-dark:hover {
    background-color: var(--cta-bg-hover);
    color: var(--cta-light-text-color);
}

/* CTA Section on bottom */
.last-section {
    background: url(../img/last-section-bg.jpg);
    background-repeat: no-repeat;
    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(--cta-light-bg-color);
    padding: 10px 20px;
    color: var(--cta-light-text-color);
    border-radius: 12px;
    border: 1px solid var(--cta-light-bg-color);
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 27px;

}

.last-section .add-ext-btn:hover {
    background-color: var(--cta-bg-hover);
}

/* ************************* */
.classics-animation-holder {
    background-color: var(--dark-color);
}

.classics-animation-holder p {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: var(--primary-color);
}

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

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


.classics-animation-items .img-holder img,
.movies-items .img-holder img {
    width: 100%;
    height: 100%;
}

.classics-animation-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;
}

.classics-animation-items .img-holder {
    height: 230px;
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.classics-animation-items .col {
    max-width: 180px;
}

/* 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(--primary-color);
}

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

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

.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;
}

.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.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 550px;
    margin-top: -70px;
}

.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: 600;
    font-size: 18px;
    line-height: 22px;
    color: var(--text-color-light);
}

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

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

.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;
}

.colorized-icon > path {
    fill: var(--primary-color) !important;
}

.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(--dark-color);
}

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

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

.searchbar button:focus {
    outline: none;
}

.searchbar-icon {
    color: var(--text-color-light);
}

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

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

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

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

#searchBarHolder {
    z-index: 99;
}

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


.user-score-holder svg {
    height: 45px;
    transform: rotate(-90deg);
    width: 45px;
}

.user-score-holder .progress-bar__background {
    fill: none;
    stroke: #204529;
    stroke-width: 1.8;
}

.user-score-holder .progress-bar__progress {
    fill: none;
    stroke: #204529;
    stroke: #22D07A;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    stroke-linecap: round;
    stroke-width: 1.8;
    transition: stroke-dashoffset 1s ease-in-out;
}

.user-score-num {
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    color: var(--text-color-light);
    position: absolute;
    top: 15px;
    left: 25px;

}

.user-score-holder span {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    color: var(--text-color-light);
    margin: auto auto auto 5px;
}

.cat-slider p {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-color-light);
}

.cat-slider a:hover p {
    color: var(--primary-color);
}

.cat-slider p.active {
    color: var(--primary-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);
}

/** scroller */

::-webkit-scrollbar {
    width: 7px;
}

 ::-webkit-scrollbar-track {
    background: var(--body-bg-color);
}

 ::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}

 ::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}