:root{
    --color-green:#37ec99;
    --banner-button-bg:#33373c;
    --color-white:#FFF;
    --color-yellow:#ffd62c;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /*full viewport*/
}

main {
  flex: 1;
}

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

.hover{
    transition: all 0.2s linear;
    cursor: pointer;
}

.hover:hover{
    transform: scale(1.2);
}


/* #################################################################
                            Header
#################################################################### */

.home-header{
    padding: 10px 0;
    width: 100%;
    color: var(--secondary-color);
    background-color: var(--primary-color);
    opacity: 0.9;
    position:fixed;
    z-index: 1;
}

/* #################################################################
                            Main
#################################################################### */

/* ######################## Banner Section ##############################*/

.movie-banner {
    max-width: 100%;
    height: 560px;
    padding: 80px;
    background: linear-gradient(to top, #00050d 0%, #00050d 0%, #00050d 0%, transparent 30%), url('../images/home-banner.webp');
    background-size: cover;
    background-position: right;

}

.movie-rank{
    margin-top: 10px;
    color: var(--color-green);
}

.movie-description{
    color: #fff;
    max-width: 45%;
    margin-top: 10px;
    font-size: 20px;
}

.Movie-buttons{
    margin-top: 20px;
}

.Movie-buttons button{
    padding: 8px 13px;
    max-width: 150px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    color: var(--color-white);
    background-color: var(--banner-button-bg);
    transition: all 0.2s linear;
}

.button-hover:hover{
    color: var(--banner-button-bg);
    background-color: var(--color-white);
    transform: scale(1.05);
    box-shadow: 0 0 3px var(--color-white);
}

.Join-prime{
    font-size: 20px;
    margin-right: 15px;
    border-radius: 10px;
}

.add, .info-button{
    font-size: 35px;
    border-radius: 50%;
    margin-left: 10px;
}

.tag{
    margin-top: 20px;
    color: var(--color-white);
}

.tag i{
    color: var(--color-yellow);
}

/* ######################## Movies ##############################*/
.movie-card{
    display: flex;
    align-items: end;
    padding: 5px;
    width: 18%;
    height: 146px;
    border-radius: 10px;
    margin: 20px 20px 0px 0px;
    color: var(--color-yellow);
}

.movies-list{
    padding: 50px 0 0 0;
    color: var(--color-white);
}

.movies-list .title{
    font-size: 20px;
    font-weight: 600;
}

/* ######################## Movies in English ##############################*/

.en-movie-1{
    background-image: url('../images/movie-inception');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.en-movie-2{
    background-image: url('../images/movie-blade-runner-2049');
    background-size: 100% 100%;
    background-position: center;
}

.en-movie-3{
    background-image: url('../images/movie-hobbit');
    background-size: 100% 100%;
    background-position: center;
}

.en-movie-4{
    background-image: url('../images/movie-prisoners');
    background-size: 100% 100%;
    background-position: center;
}

.en-movie-5{
    background-image: url('../images/movie-the-dark-knight');
    background-size: 100% 100%;
    background-position: center;
}

/* ######################## Movies in hind ##############################*/

.hin-movie-1{
    background-image: url('../images/movie-bad-newz');
    background-size: 100% 100%;
    background-position: center;
}

.hin-movie-2{
    background: linear-gradient(to top, #000000e0 0%, #00000040 0%, #00000000 60%), url('../images/movie-bhool-chuk-maf');
    background-size: 100% 100%;
    background-position: center;
}

.hin-movie-3{
    background-image: url('../images/movie-bun-butter-jam');
    background-size: 100% 100%;
    background-position: center;
}

.hin-movie-4{
    background-image: url('../images/movie-single');
    background-size: 100% 100%;
    background-position: center;
}

.hin-movie-5{
    background-image: url('../images/movie-teri-batoon');
    background-size: 100% 100%;
    background-position: center;
}

/* ######################## Shop: Rent New Movies ##############################*/

.rent-movie-1{
    background-image: url('../images/MI-final.webp');
    background-size: 100% 100%;
    background-position: center;
}
.rent-movie-2{
    background: linear-gradient(to top, #000000e0 0%, #00000040 0%, #00000000 60%), url('../images/bad-guys-2.webp');
    background-size: 100% 100%;
    background-position: center;
}
.rent-movie-3{
    background-image: url('../images/FI-movie.webp');
    background-size: 100% 100%;
    background-position: center;
}
.rent-movie-4{
    background-image: url('../images/jurasic-park.webp');
    background-size: 100% 100%;
    background-position: center;
}
.rent-movie-5{
    background-image: url('../images/nakedgun.webp');
    background-size: 100% 100%;
    background-position: center;
}

/* ######################## Top Movies ##############################*/

.top-movie-1{
    background-image: url('../images/maalik-movies.webp');
    background-size: 100% 100%;
    background-position: center;
}
.top-movie-2{
    background-image: url('../images/coolie-movie.webp');
    background-size: 100% 100%;
    background-position: center;
}
.top-movie-3{
    background-image: url('../images/konnappa-movie.webp');
    background-size: 100% 100%;
    background-position: center;
}
.top-movie-4{
    background-image: url('../images/ice-road.webp');
    background-size: 100% 100%;
    background-position: center;
}
.top-movie-5{
    background-image: url('../images/paradha-movie.webp');
    background-size: 100% 100%;
    background-position: center;
}