/* Box Model Hack */
* {
     box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}


:root {
     --ff-primary: 'Source Sans Pro', sans-serif;
     --ff-secondary: 'Source Code Pro', monospace;

     --fw-reg: 300;
     --fw-bold: 900;

     --clr-light: #fff;
     --clr-dark: #000000;
     --clr-dark-less: #303030;
     --clr-yellow: #F5C518;
     --clr-gray: rgb(185, 181, 181);
     --fs-h1: 3rem;
     --fs-h2: 2.25rem;
     --fs-h3: 1.25rem;
     --fs-body: 1rem;

     --bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25),
          0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
}

@media (min-width: 800px) {
     :root {
          --fs-h1: 4.5rem;
          --fs-h2: 3.75rem;
          --fs-h3: 1.5rem;
          --fs-body: 1.125rem;
     }
}


/******************************************
/* BASE STYLES
/*******************************************/

/* endable this to add smooth scrolling */
html {
     scroll-behavior: smooth;
}


body {
     background: var(--clr-dark);
     color: var(--clr-light);
     margin: 0;
     font-family: var(--ff-primary);
     font-size: var(--fs-body);
     line-height: 1.6;
}

.container {
     height: 100%;
     margin: 0 auto;
     max-width: 1600px;
}

@media (max-width:600px) {
     .container {
          width: 95%;
     }
}

section {
     padding: 2em;
     margin: 0;
}

@media (max-width:600px) {
     section {
          padding: 10px
     }
}

.section--title {
     font-size: var(--fs-h3);
     font-weight: var(--fw-bold);
     text-align: center;
     margin: 0;
     margin-bottom: 2em;
}

img {
     display: block;
     max-width: 100%;
     height: 100%;
     object-fit: cover;
}

strong {
     font-weight: var(--fw-bold)
}

:focus {
     outline: 3px solid var(--clr-accent);
     outline-offset: 3px;
}

/* Buttons */

.btn {
     display: inline-block;
     padding: .5em 2.5em;
     margin: 0 50px;
     text-decoration: none;
     cursor: pointer;
     font-size: .8rem;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-weight: var(--fw-bold);
     transition: .3s ease-out;
     transition: transform 50ms ease-in-out;
     background: var(--clr-dark);
}

a {
     display: inline-block;
     text-decoration: none;
     cursor: pointer;
     transition: .3s ease-out;
}

.navigation-link {
     border: 1px solid var(--clr-yellow);
     padding: 0.25em 1.25em;
     border-radius: 50px;
     background: var(--clr-dark);
     color: var(--clr-yellow);
}

.navigation-link:hover {
     border: 0;
     background: var(--clr-yellow);
     color: var(--clr-dark);
}

.fa-star {
     color: var(--clr-yellow);
     display: inline-block;
     margin-right: 1em;
}

.btn:active {
     transform: scale(.9);
}

/* Typography */

h1,
h2,
h3 {
     line-height: 1;
     margin: 0;
}

h1 {
     font-size: var(--fs-h1)
}

h2 {
     font-size: var(--fs-h2)
}

h3 {
     font-size: var(--fs-h3)
}

/******************************************
/* LAYOUT
/*******************************************/
header {
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     z-index: 1000;
}

nav {
     background: var(--clr-dark);
     z-index: 100;
}

nav .nav-container {
     padding: 1em;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
}

.nav-logo {
     font-size: var(--fs-h3);
     font-weight: var(--fw-bold);
     color: var(--clr-yellow);
}

.nav-ul {
     display: flex;
     list-style: none;
}

.nav--li {
     margin: 1em;
}

.nav--li a {
     text-decoration: none;
     color: var(--clr-light);
}

.nav--li>*.active {
     color: var(--clr-yellow);
     font-weight: var(--fw-bold);
}

.nav--li a:hover,
.nav--li a:active {
     color: var(--clr-yellow);
}

.toggler-container {
     display: none;
}

.toggler-container input[type="checkbox"] {
     opacity: 0;
}

@media (max-width: 768px) {
     .toggler-container {
          display: block;
     }



     label i {
          font-size: 2rem;
     }

     .nav-ul {
          flex-direction: column;
          align-items: center;
          position: absolute;
          right: 0%;
          top: 50px;
          padding: 1em;
          background: var(--clr-yellow);
          display: none;
     }

     .nav--li a.active {
          color: var(--clr-dark);
     }
}

/******************************************
/* SEARCH 
/*******************************************/
form>div {
     position: relative;
     width: 350px;
     margin: 2rem auto;
     border-radius: 1.5rem;
     overflow: hidden;

}

form i {
     position: absolute;
     right: 1rem;
     top: 50%;
     color: var(--clr-dark);
     transform: translateY(-50%);
}

.search-result {
     display: none;
}

.search-result-card-container,
.pagination-container {
     flex-wrap: wrap;
     justify-content: center;
}

.search-bar {
     background: var(--clr-light);
     padding: .5em 1em;
     border: none;
     width: 100%;
     font-size: 1.2rem;
     word-wrap: break-word;
}

/******************************************
/* PAGINATION
/*******************************************/
.pagination {
     display: none;
}

.pagination .showMoreBtn {
     display: none;
}

.pagination .section--title {
     color: var(--clr-yellow);
}

/******************************************
/* HERO
/*******************************************/

/* Slider */

.hero--slider-container {
     width: 100%;
     aspect-ratio: 16/9;
     overflow: hidden;
     position: relative;
}

.slider {
     display: flex;
     aspect-ratio: 16/9;
     transition: transform 0.5s ease-in-out;
}

.slide {
     position: relative;
     height: 100%;
     min-width: 100%;
     overflow: hidden;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background-size: cover;
     transition: 0.6s linear;
}

.main--text-content {
     position: absolute;
     top: 50%;
     left: 0;
     transform: translatey(-50%);
}

.main--text-content>div {
     padding: 1rem;
     display: flex;
     flex-direction: column;
     gap: 1rem;
}

.main--text-content h2 {
     font-weight: var(--fw-bold);
}

.main--overview {
     max-width: 450px;
     color: var(--clr-light);
     line-height: 1.3;
     -webkit-line-clamp: 5;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.slide::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--clr-dark);
     opacity: .5;
     /* z-index: -2; */
}

.slide-rating i {
     color: var(--clr-yellow);
     display: inline-block;
     margin-left: 10px;
}

@media (max-width:800px) {
     .main--overview {
          display: none;
     }

     .main--ul li:nth-child(2) {
          display: none;
     }

     .slider-movie-name {
          font-size: 1rem;
     }
}

/******************************************
/* POPULAR MOVIES
/*******************************************/

.popular-movies {
     background: var(--clr-yellow);
}

.cards-container {
     display: flex;
     /* flex-wrap: wrap; */
     align-items: center;
     overflow-x: auto;
}

.cards-container::-webkit-scrollbar {
     width: 0;
}

.movie-card {
     max-width: 100%;
     width: 350px;
     aspect-ratio: 9/16;
     border: 1px solid black;
     margin: 1em;
     padding: 1em;
     background: var(--clr-dark);
     flex-shrink: 0;
     transition: all .4s ease-in;
}

.movie-card:hover {
     transform: scale(1.05);
}

.movie-image {
     overflow: hidden;
     max-width: 100%;
}

.card--movie-name {
     font-size: var(--fs-h3);
     font-weight: var(--fw-bold);
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     display: -webkit-box;
     overflow: hidden;
}

/* TOP RATED MOVIES CARD */
.top-rated-movies .movie-card {
     background-color: var(--clr-yellow);
}

/* VIEW MORE BUTTON */
.show-more {
     padding: .5em 3rem;
     font-size: var(--fs-h3);
     font-weight: var(--fw-bold);
     cursor: pointer;
     display: flex;
     align-items: center;
}

.prev,
.next {
     background: transparent;
     border: 1px solid var(--clr-yellow);
     padding: .5em 1em;
     border-radius: 1em;
     margin: 1em 2em;
     cursor: pointer;
     color: var(--clr-yellow);
}

/******************************************
/* MOVIE INFO FILE
/*******************************************/


.movie-info {
     display: flex;
     flex-wrap: wrap;
     margin-top: 150px;
     justify-content: space-evenly;
     width: 100%;
     padding: 1rem;
     position: relative;
}

.movie-info-content>* {
     margin-bottom: 1em;
}

.movie-info-image {
     width: 350px;
     max-width: 100%;
     aspect-ratio: 9/16;
     border: 1px solid var(--clr-yellow);
     margin-right: 1em;
}

.movie-info-name {
     font-size: var(--fs-h3);
     font-weight: var(--fw-bold);
     margin-bottom: 1em;
}

.movie-info-ratiing {
     margin-bottom: 1em;
}

.movie-info-overview {
     color: var(--clr-gray);
     line-height: 1.3;
     max-width: 600px;
}

.movie-info-genres {
     font-weight: var(--fw-bold);
     list-style: none;
}

.movie-info-genre-item {
     display: block;
     font-weight: var(--fw-reg);
}

.movie-info-homepage-link,
.movie-info-add-to-fav,
.movie-info-play-trailer-link {
     text-decoration: none;
     padding: 1em;
     border: 1px solid var(--clr-yellow);
     color: var(--clr-light);
     text-transform: uppercase;
     transition: all .3s ease-in-out;
     display: inline-block;
     margin: 1.5em 0;
     margin-right: 1em;
     border-radius: 2em
}

.movie-info-add-to-fav {
     display: block;
     margin: 1rem 0;
     transition: 100ms;
}

.movie-info-homepage-link:hover,
.movie-info-play-trailer-link:hover {
     background-color: var(--clr-yellow);
     border: 0;
     color: var(--clr-dark);
}

.movie-info-additional {
     display: flex;
     flex-direction: column;
}

.movie-info-additional>li {
     border-bottom: .05em solid var(--clr-gray);
     margin-bottom: .5em;
}

.movie-info-additional>*>span {
     color: var(--clr-yellow);
     margin: 0 8px
}

.movie-info-production>h3 {
     font-size: var(--fs-h3);
     font-weight: var(--fw-bold);
     margin: 1em 0;
}

/******************************************
/* GENRE FILE STYLES
/*******************************************/
.genre-cards-container,
.genre-movies {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
}

.genre-card {
     width: 300px;
     height: 300px;
     max-width: 100%;
     max-width: 100%;
     margin: 1em;
     border: 1px solid var(--clr-yellow);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all .3s ease-in;
     background: rgb(112, 111, 111);
     background-position: center;
     background-size: cover;
     background-blend-mode: multiply;
}

.genre-card:hover {
     scale: 1.1;
}

.genre {
     display: none;
}

.toasts {
     position: fixed;
     right: 1rem;
     bottom: 1rem;
}


.toast {
     background: #fff;
     color: #FF6969;
     padding: .5rem 1rem;
     margin: 1em;
     border-radius: 8px;
}