@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700;800&display=swap');
:root {
    --primary-color: #ee293a;
    --hover-color: #e50036;
    --black-color: #000000;
    --primary-black-color: #141414;
    --secondary-black-color: #333333;
    --white-color: #ffffff;
    --gray-color: #b6b6b6;
    --border-radius: .5rem;
    --margin: 0 4% 12px;
}

* {
    margin: 0;
}

body {
    font-family: 'Oxanium', cursive;
    color: var(--white-color) !important;
    background-color: var(--primary-black-color) !important;
    position: relative;
    height: 100%;
}

.title-margin {
    margin: var(--margin);
}

.body-margin {
    margin: var(--margin);
}


/*nav start*/

.navbar-nav .nav-item .nav-link {
    color: var(--white-color);
    font-weight: 500;
}

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

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link {
    color: var(--primary-color);
}


/*login/signup button start*/

.login-btn {
    color: var(--primary-color);
    background-color: var(--white-color);
    border: none;
    outline: none;
    font-weight: 600;
    font-size: 16px;
}

.login-btn:hover {
    color: var(--white-color);
}

.btn-check:focus+.login-btn,
.login-btn:focus {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-check:focus+.login-btn,
.login-btn:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}


/*login/signup button end*/

.header {
    width: 100%;
    z-index: 99;
}

.navbar-scroll {
    background-color: var(--secondary-black-color);
    padding: 0;
    position: fixed;
    top: 0;
    z-index: 99;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    transition-duration: 0.6s;
}

.navbar-scroll .nav-item .nav-link {
    color: var(--white-color);
}

@media only screen and (min-width:1200px) {
    .nav-item>.nav-link {
        display: block !important;
    }
}

@media only screen and (max-width:992px) {
    .header-inner {
        background-color: var(--secondary-black-color)!important;
    }
}

.fa-search {
    color: var(--white-color);
    font-size: 28px;
}

.fa-search:hover {
    color: var(--primary-color);
}

.fa-chromecast {
    color: var(--white-color);
    font-size: 28px;
}

.fa-chromecast:hover {
    color: var(--primary-color);
}

.fa-bars {
    color: var(--white-color);
    font-size: 28px;
}

.fa-bars:hover {
    color: var(--primary-color);
}

.navbar-toggler {
    border: none;
}

.navbar-light .navbar-toggler {
    color: var(--primary-black-color);
    border-color: var(--primary-black-color);
}

.navbar-scroll .navbar-light .navbar-toggler {
    color: var(--secondary-black-color);
    border-color: var(--secondary-black-color);
}


/*nav end*/

.rounded {
    border-radius: var(--border-radius)!important;
}


/*Sign Up modal start*/

.modal-bg {
    color: var(--white-color);
    background-color: var(--secondary-black-color);
}


/*Sign Up modal end*/


/* banner start*/

.background {
    background: url(../images/slider-1.jfif) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 800px;
    position: relative;
    transition: .5s;
}

@media only screen and (max-width:992px) {
    .background {
        height: 400px;
    }
}

.background::before {
    content: '';
    position: absolute;
    background: linear-gradient(to top, var(--primary-black-color), transparent);
    width: 100%;
    height: 800px;
}

@media only screen and (max-width:992px) {
    .background::before {
        height: 401px;
    }
}

.background::after {
    content: '';
    position: absolute;
    background: linear-gradient(to bottom, var(--primary-black-color), transparent);
    width: 100%;
    height: 800px;
    top: 0;
}

@media only screen and (max-width:992px) {
    .background::after {
        height: 401px;
    }
}

.background-content {
    padding-top: 200px;
    position: relative;
    z-index: 1;
}

@media only screen and (max-width:992px) {
    .background-content {
        padding-top: 20px;
    }
}

.text-content {
    width: 60%;
}

@media only screen and (max-width:992px) {
    .text-content {
        width: 100%;
    }
}

.text-content h1 {
    color: var(--primary-color);
    font-weight: 700;
    text-transform: uppercase;
}

@media only screen and (max-width:992px) {
    .text-content h1 {
        font-size: 28px;
    }
}

.text-content p {
    line-height: 2;
}

@media only screen and (max-width:992px) {
    .text-content p {
        line-height: 1.3;
    }
}

.popular {
    margin-top: 100px;
}

@media only screen and (max-width:992px) {
    .popular {
        margin-top: 20px;
    }
}

.popular h5 {
    color: var(--primary-color);
}

@media only screen and (max-width:992px) {
    .popular h5 {
        font-size: 18px;
    }
}

.popular .row {
    margin-top: 0px;
}

@media only screen and (max-width:992px) {
    .popular .row {
        margin-top: 0px;
    }
}

.popular .row img {
    transition: .3s;
    cursor: pointer;
}

.popular .row img:hover {
    transform: translateY(-16px);
}

@media only screen and (max-width:992px) {
    .popular .row img:hover {
        transform: translateY(-8px);
    }
}

.img-size {
    width: 100%;
}

.banner-des {
    color: var(--gray-color);
}


/*banner end*/

.custom-margin-news {
    margin-top: 60px;
}

@media only screen and (max-width:992px) {
    .custom-margin-news {
        margin-top: 40px;
    }
}

.custom-margin {
    margin-top: 35px;
}

@media only screen and (max-width:992px) {
    .custom-margin {
        margin-top: 40px;
    }
}


/*recommended start*/

.card-recommended {
    border: none;
    background-color: var(--secondary-black-color);
}

.ico-size {
    width: 60px;
    height: 40px;
}

.ico-size:hover {
    color: var(--primary-color);
}


/*icon mobile*/

.ico-size-m {
    width: 100%;
    height: 20px;
}

.ico-size-m:hover {
    color: var(--primary-color);
}

.custom-text {
    font-size: 14px;
    font-weight: 500;
}

.custom-link {
    color: var(--white-color);
    text-decoration: none;
    font-weight: 500;
}

.custom-link:hover {
    color: var(--primary-color);
    font-weight: 500;
    letter-spacing: .5px;
}

.bg-img {
    background-image: url(/images/english-movies.png);
    position: relative;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}


/*recommended end*/


/*news start*/

.news-margin {
    margin-left: 4%;
}

.news-banner {
    background-image: url(/images/star-war.png);
    min-height: 200px;
    position: relative;
    background-position: center center;
    background-size: cover;
}

.news-banner1 {
    background-image: url(/images/end-game.png);
    min-height: 200px;
    position: relative;
    background-position: center center;
    background-size: cover;
}

.news-banner2 {
    background-image: url(/images/joker.png);
    min-height: 200px;
    position: relative;
    background-position: center center;
    background-size: cover;
}

.des-margin {
    margin-left: 16px;
}

.rm-margin {
    margin-right: 16px;
}

.news-des {
    font-size: 14px;
    font-weight: 400;
    vertical-align: text-bottom;
}

.news-date-card {
    color: var(--white-color);
    background-color: var(--primary-color);
    margin-left: 16px;
    width: 60px;
    height: 100%;
    border: none;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.news-date {
    font-size: 24px;
    font-weight: 600;
}

.news-mon {
    font-weight: 500;
}

.news-rm {
    font-size: 14px;
    font-weight: 500;
    color: var(--white-color);
    text-decoration: none;
}

.news-rm:hover {
    color: var(--primary-color);
    font-weight: 500;
}

.bottom {
    position: absolute;
    bottom: 0;
}


/*news end*/

.name {
    color: var(--white-color);
    text-decoration: none;
}

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

.year {
    color: var(--gray-color);
    font-size: 14px;
    text-decoration: none;
}

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


/*collection start*/

.slider-image {
    width: 100%;
}


/*collection end*/

.categori-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--white-color);
    text-decoration: none;
}

.categori-title:hover {
    color: var(--primary-color);
    text-decoration: none;
}

@media only screen and (max-width:576px) {
    .categori-title {
        font-size: 22px;
    }
}


/*movie hover start*/

.swiper-slide .hover-card {
    position: absolute;
    top: 15px;
    width: 100%;
    background-color: var(--black-color);
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    transition: 0.9s;
}

.swiper-slide:hover .hover-card {
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transform: scale(1.12);
}

.hover-video {
    width: 100%;
    padding: 0;
    margin: 0;
}


/*movie hover end*/


/*movie hover detailes start*/

.rating {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
}

.rating-des {
    color: var(--gray-color);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.rating-des:hover {
    color: var(--primary-color);
}

.card-movie-title {
    font-size: 18px;
    font-weight: 600;
}

.card-movie-hours {
    color: var(--gray-color);
    font-size: 12px;
    font-weight: 400;
}

.card-movie-des {
    color: var(--gray-color);
    font-size: 12px;
    font-weight: 500;
}

.text-justify {
    text-align: justify;
    text-justify: inter-word;
}

.card-movie-q {
    font-size: 14px;
    font-weight: 600;
}

.card-movie-q-r {
    color: var(--gray-color);
    font-size: 12px;
    font-weight: 500;
}

.fa-plus-square:hover {
    color: var(--primary-color);
}

.fa-heart:hover {
    color: var(--primary-color);
}

.card-movie-btn {
    color: var(--primary-color);
    background-color: var(--black-color);
    border-color: var(--primary-color);
    border-radius: .3rem;
}

.card-movie-btn:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
}


/*movie hover detailes end*/


/*Movie hove mobile start*/

.modal-content {
    border: none;
    background-color: var(--black-color);
}


/*Movie hover mobile end*/


/*Live tv start*/

.thumbTiles.swiper-channel {
    padding: 0 4%;
}


/*Live tv end*/


/*movie card start*/


/* img {
    object-fit: cover;
} */


/* .card-height {
    max-height: 431px;
} */

.swiper-container {
    width: auto;
    height: auto;
    overflow: hidden;
}

.swiper-slide {
    height: auto;
}

.thumbTiles.swiper-crew {
    padding: 0 4%;
}

.thumbTiles.swiper-news {
    padding: 0 4%;
}

.thumbSection {
    padding-top: 0%;
    color: var(--white-color);
}

.thumbTitle {
    margin: 0 4% 12px;
}

.thumbTiles.swiper-movies {
    padding: 0 4%;
    padding-top: 18px;
    padding-bottom: 20px;
}

.thumbTile {
    width: 20%;
}

.thumbTiles .swiper-button-prev,
.thumbTiles .swiper-button-next {
    height: 52%;
    width: 4%;
    width: calc(3.3% - 5px);
    top: 0;
    bottom: 0;
    margin: 0;
    background-color: rgba(20, 20, 20, 0.116);
}

.thumbTiles .swiper-button-prev {
    margin-top: 18px;
    left: 0;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.thumbTiles .swiper-button-next {
    margin-top: 18px;
    right: 0;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.thumbTiles .swiper-button-prev::after,
.thumbTiles .swiper-button-next::after {
    color: var(--primary-color);
    font-size: 1.2vw;
    font-weight: bold;
    transition: transform 0.1s ease-out;
}

@media screen and (min-width: 640px) {
    .thumbTiles .swiper-button-prev::after,
    .thumbTiles .swiper-button-next::after {
        display: none;
        font-size: 1.2vw;
    }
    .thumbTiles .swiper-button-prev:hover::after,
    .thumbTiles .swiper-button-next:hover::after {
        transform: scale(1.25);
    }
    .thumbTiles:hover .swiper-button-prev::after,
    .thumbTiles:hover .swiper-button-next::after {
        display: block;
    }
}


/*movie card end*/


/*footer start*/

.bar {
    height: 5px;
    background-color: var(--white-color);
}

.footer-a {
    color: var(--gray-color);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}

.footer-a:hover {
    color: var(--primary-color);
}

.copyright-c {
    text-decoration: none;
    color: var(--white-color);
    letter-spacing: 1px;
}

.custom-fa {
    color: var(--primary-color);
}

.copyright-a {
    text-decoration: none;
    color: var(--white-color);
}

.copyright-a:hover {
    text-decoration: none;
    color: var(--primary-color);
}


/*footer end*/


/*Filter start*/

.btn-primary {
    font-weight: 500;
    letter-spacing: .5px;
    color: var(--white-color);
    background-color: var(--secondary-black-color);
    border-color: var(--secondary-black-color);
}

.btn-primary:hover {
    color: var(--white-color);
    background-color: var(--hover-color);
    border-color: var(--hover-color);
}

.btn-check:focus+.btn-primary,
.btn-primary:focus {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: none;
}

.btn-check:active+.btn-primary,
.btn-check:checked+.btn-primary,
.btn-primary.active,
.btn-primary:active,
.show>.btn-primary.dropdown-toggle {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-check:active+.btn-primary:focus,
.btn-check:checked+.btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}

.filter-card {
    background-color: var(--secondary-black-color);
}

.bar-filter {
    height: 2px;
    background-color: var(--primary-black-color);
}

.general-tab {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .5px;
    color: var(--gray-color);
}

.general-tab:hover {
    color: var(--white-color);
}

.media-tab {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .5px;
    color: var(--gray-color);
}

.media-tab:hover {
    color: var(--white-color);
}

.btn-filter {
    font-weight: 500;
    letter-spacing: .5px;
    color: var(--white-color);
    background-color: var(--primary-black-color);
    border-color: var(--primary-black-color);
}

.btn-filter:hover {
    color: var(--white-color);
    background-color: var(--hover-color);
    border-color: var(--hover-color);
}

.btn-check:focus+.btn-filter,
.btn-filter:focus {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: none;
}

.btn-check:active+.btn-filter,
.btn-check:checked+.btn-filter,
.btn-filter.active,
.btn-filter:active,
.show>.btn-filter.dropdown-toggle {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-check:active+.btn-filter:focus,
.btn-check:checked+.btn-filter:focus,
.btn-filter.active:focus,
.btn-filter:active:focus,
.show>.btn-filter.dropdown-toggle:focus {
    box-shadow: none;
}

.form-filter {
    font-size: 14px;
    color: var(--gray-color);
    border: none;
    background-color: var(--primary-black-color);
}

.form-lbl {
    color: var(--gray-color);
    padding-bottom: 2px;
}

.form-control:focus {
    color: var(--white-color);
    background-color: var(--primary-black-color);
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: none;
}


/*Filter end*/


/*Movies internal page start*/

.m-page-link {
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-color);
    text-decoration: none;
}

.m-page-link:hover {
    color: var(--hover-color);
}

.nav-link.active {
    color: var(--white-color);
    font-weight: 500;
}

.nav-link {
    padding-left: 0;
    padding-right: 24px;
}


/*Movies internal page end*/


/*Single movie page start*/

.s-play-icon {
    padding-top: 20vw;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 576px) {
    .s-play-icon {
        padding-top: 23vw;
    }
}

.fa-play-circle {
    font-size: 60px;
    color: var(--primary-color);
}

.s-background-content {
    padding-top: 100px;
    text-align: center;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 576px) {
    .s-background-content {
        padding-top: 5px;
    }
}

@media screen and (max-width: 992px) {
    .s-background-content {
        padding-top: 10px;
    }
}

.s-movie-title {
    color: var(--white-color);
    font-weight: 600;
    text-transform: uppercase;
}

.s-movie-genre {
    color: var(--gray-color);
    letter-spacing: .5px;
}

.s-movies-director {
    color: var(--gray-color);
    letter-spacing: .5px;
}

.s-movie-quality {
    color: var(--gray-color);
    font-weight: 400;
    letter-spacing: .5px;
}

.s-movie-des {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .5px;
    color: var(--gray-color);
}

.crew-name {
    font-size: 14px;
    text-decoration: none;
    color: var(--gray-color);
}

.crew-name:hover {
    color: var(--white-color);
}


/*Single movie page end*/


/*Single Collection page start*/

.swiper-slide-collection .hover-card {
    position: absolute;
    top: 15px;
    width: 100%;
    background-color: var(--black-color);
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    transition: 0.9s;
}

.swiper-slide-collection:hover .hover-card {
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transform: scale(1.32);
}


/*Single collection page end*/