@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap');
*{
    box-sizing: border-box;
}
:root{
    --primary-color:#22254b;
    --secondary-color:#373b69;
}
body{
    margin: 0px;
    padding: 0px;
    font-family: 'Poppins',sans-serif;
    background-color: var(--primary-color);
}

/* <---------header styles starts----------> */

header{    /*website header*/
    padding: 0.8 rem;
    display: flex;
    /* background-color: var(--secondary-color); */
    background-color: #28c79f;
    justify-content: space-between;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    height:60px;
}

#title{   /* website title  */    
    color: white;
    cursor: pointer;
    font-size: 23px;
}

#title #logo{
    color:var(--secondary-color);
}

/*<---- Search related Styles------>*/

header form {
    position: relative;
    width: 1000px;
    display: flex;
    align-items:center;
}

.searchDiv{   /* serch input at header*/
    border: 2px solid var(--primary-color);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    margin-left:100px;
    width: 500px;
    display: flex;
    align-items: center;
    background-color: white;
}

.searchDiv input{
    width:92%;
    font-size: 1rem;
    font-family: inherit;
    color: rgb(14, 11, 151);
    border: none;
    outline: none;
}

.searchDiv input::placeholder{
    color: rgb(14, 11, 151);
}


.searchDiv i{
    margin-left: 10px;
    color: rgb(14, 11, 151);
}


#srcbtn{
    border: 2px solid var(--primary-color);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 1rem;
    font-family: inherit;
    color: rgb(14, 11, 151);
    background-color: rgb(247, 243, 42);
    cursor: pointer;
    margin-right: 30px;
    margin-left: 10px;
}
#srcbtn:hover{
    border: 2px white solid;
}


/* <------ login section style ------->*/

#loginbtn{
    border: 2px solid var(--primary-color);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 1rem;
    font-family: inherit;
    color: rgb(14, 11, 151);
    background-color: rgb(247, 243, 42);
    cursor: pointer;
    position: absolute;
    right:0;
}

#loginbtn:hover{
    border: 2px white solid;
}


header form i {
    color :white;
    font-size: 20px;
}

#user{
    color: white;
    margin-left: 10px;
    width: 140px;
    overflow:hidden;
    display: inline-block;
}

.loginModel{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    background-color: rgba(164, 230, 164,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font: inherit;
    backdrop-filter: blur(5px);
}

.loginModel #logcontainer {
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font: inherit;
    position: absolute;
    background-color: rgb(164, 230, 164);
    border-radius: 4px;
}

.loginModel #logcontainer label{
    margin-top: 5px;
    margin-bottom: 5px;
}

.loginModel #logcontainer input {
    padding: 5px;
    border-radius: 10px;
    width:220px;
    border: 1px black solid;
}

.loginModel #logcontainer #userlogin, #userCreate{
    border: 2px solid var(--primary-color);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 1rem;
    font-family: inherit;
    color: rgb(14, 11, 151);
    background-color: rgb(247, 243, 42);
    cursor: pointer;
    width:180px;
    margin-top: 10px;
    border: 1px black solid;
}

.loginModel #logcontainer #userlogin:hover,#userCreate:hover{
    border: 1px white solid;
}

.loginModel #logcontainer #close{
    position: absolute;
    left: 370px;
    top:3px;
    border: 3px green solid;
    cursor: pointer;
}

.loginModel #logcontainer #close:hover{
    transform: scale(1.1);
    border: 2px white solid;
}
/* <---------left sction Genre  styles starts----------> */

.gridContainer{   /* main body container*/
    display: grid;
    grid-template-columns: 15% 85%;
    grid-column-gap: 0px;
}

#genreBar{
    box-shadow: 1px 1px 5px rgb(245, 237, 237);
    height: 600px;
    overflow: auto;
}

#genTitle{
    color:rgb(132, 247, 24);
    margin: 0.8rem;
}

.genre{   /* Every indivudual Genre Item*/
    border: 1px solid var(--primary-color);
    padding: 0.1rem 1rem;
    margin-left:1.5rem;
    margin-right: 1rem;
    margin-top: 4px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: bold;
    color: rgb(14, 11, 151);
    background-color: rgb(101, 235, 48);
}

.genre:hover{
    border: 1px white solid;
    cursor: pointer;
}

.highlight{   /* class for selected genre*/
    background-color: rgb(247, 243, 42);
}
.no-result{  /*class when no result found*/
    color: white;
}

/* <---------right section styles starts----------> */

#main{  /* all movies cards Container*/
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    box-shadow: 1px 1px 5px rgb(245, 237, 237);
    height: 600px;
    overflow: auto;
}

#mainTitle{
    color:rgb(132, 247, 24);
    width:100%;
    margin-left: 1rem;
}

.movie{  /* all indivual movie card (div)*/
    width: 200px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0.2px 4px 5px rgb(20, 2, 2);
    background-color: var(--secondary-color);
    position: relative;
    overflow:hidden;
    cursor: pointer;
}
.movie:hover{
    box-shadow: 0.2px 4px 5px white;
}

.movie img {  /* Every movie image */
    width: 100%;
    height:280px;
}

.movieInfo{    /*Every movie info container*/
    align-items: center;
    padding:0.3rem 0.8rem;
    letter-spacing: 0.3px;
    color: white;
}
.movieInfo h3{  /* movie title*/
    margin-top: 0px;
}

.movieInfo #rating {  /* movie lang and rating container*/
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
}

.movieInfo span{  /* movie lang and rating*/
    padding: 0.2rem 0.3rem; 
    border-radius: 5px;
    font-weight: bold;
    background-color: var(--primary-color);
}

.movieInfo span.green{  /* movie rating color*/
    color: lightgreen;
}

.movieInfo span.orange{  /* movie rating color*/
    color: orange;
}

.movieInfo span.red{  /* movie rating color*/
    color: red;
}

.movieInfo .overview {   /* description of movies*/
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background-color: white;
    max-height: 100%;
    padding: 0.8rem;
    transform: translateY(101%);
    transition: transform 0.4s ease-in;
    height: 100%;
    overflow: auto;
}

.movieInfo:hover .overview{   /*make dispription available*/
    transform: translateY(0);
    color: black;
}


/* <--------- Discription pop up window style starts ----------> */

.discriptionDiv {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    background-color: rgba(164, 230, 164,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.discriptionDiv #descriptionModel{     /* main window - container*/
    width: 500px;
    position: absolute;
    background-color: rgb(164, 230, 164);
    display: flex;
    padding: 10px;
    justify-content: space-between;
    font: inherit;
    backdrop-filter: blur(5px);
}

#descriptionModel img {  /* Every movie image */
    width: 40%;
    height:350px;
}

#descriptionModel .discriptionMovieInfo{
    margin: 0px 10px;    
}

.discriptionMovieInfo #close{   /*cross sign*/
    background-color: green;
    position: absolute;
    left: 470px;
    top:3px;
    border: 2px green solid;
}

.discriptionMovieInfo #close:hover{
    transform: scale(1.2);
    border: 2px white solid;
    font-weight: bold;
    cursor: pointer;
}

.nodisplay{  /** for hiding discription div */
    display: none;
}

.discriptionMovieInfo .rating{
    margin-top: 0px;
}

.discriptionMovieInfo .rating #lang{
    text-transform: uppercase;
}

.discriptionMovieInfo .rating #genSym{
    margin-left: 10px;
    margin-bottom: 20px;
    font-size: 8px;
    outline: none;
    position:relative;
    top: -2px;
}

.discriptionMovieInfo .head{
    margin-top: 0px;
    margin-bottom: 0px;
    color: blue;
}

.discriptionMovieInfo .overview{
    height: 230px;
    overflow: auto;
    margin-right: 0px;
}

.discriptionMovieInfo #price{
    margin-top: 8px;
    font-weight: bold;
    color: blue;
}

.discriptionMovieInfo button{
    padding: 8px;
    border: 2px black solid;
    background-color:rgb(28, 143, 28);
    color: white;
    border-radius: 3px;
    width:200px;
    margin-left: 20px;
}

.discriptionMovieInfo button:hover{
    border: 2px white solid;
    transform: scale(1.2);
    cursor: pointer;
}

/* <--------- Checkout pop up window style starts ----------> */

.checkout{   /*Main Container*/
    width :100vw;
    height: 100vh;
    position: fixed;
    top:0;
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color:rgb(250, 244, 244);
    border-radius: 5px;
    z-index: 4;
    backdrop-filter: blur(5px);
}

.checkout #checkHead{   /*checkout title*/
    position: absolute;
    top:20px;
    left:600px;
    margin-top: 5px;
}

.checkout #back{    /*back button*/
    position: absolute;
    top:10px;
    left:20px;
    margin-top: 5px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    background-color:rgb(153, 153, 236);
    color: white;
}

.checkout #back:hover{
    border: 2px white solid;
    transform: scale(1.2);
}

.summary{   /*summary div*/
    width:300px;
    height:380px;
    background-color:rgb(101, 235, 48);
    padding: 5px 15px;
    border-radius: 5px
}

.summary h1,h3{
    margin-top: 0px;
    margin-bottom: 0px;
}

.summary div{
    display: flex;
    width:270px;
    color : brown;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0px;
    padding : 1px 3px;
    font-weight: 600;
}

.summary input{
    width: 60px;
    height:30px;
    border: 1px black solid;
}

.summary span{
    color:blue;
}

.summary #totalHead{
    color:black;
    margin-top:40px;
}


/* <----- payment div style ----------> */

.payment{ 
    width:900px;
    height:380px;
    background-color:aqua;
    margin-left: 10px;
    margin-right: 10px;
    padding:8px;
    border-radius: 5px
}

.payment h1{
    margin-top: 0px;
    margin-bottom: 0px;
}

.payment #userDetails label {
    margin-left: 10px;
}

.payment #userDetails input {
    height: 25px;
    border-radius: 5px;
    width: 200px;
    border: 1px black solid
}

.payment #paySection {
    display: flex;
    padding: 10px;
}

.payment #paySection #section1{
    margin-right:10px;
}

#paySection #section1 #cardType{
    margin-bottom: 15px;
}
#paySection #section1 #cardType input, #upi{
    width: 15px;
    height: 15px;
}

#cardDetails {
    display: flex;
}

#cardDetaisl #cardinputs input, #upinumber {
    height: 25px;
    border-radius: 5px;
    width: 200px;
    border: 1px black solid
}

#cardlabels label, #section2 label{ /*labels of the card detaisl */
    display: inline-block;
    margin-right: 30px;
    height: 25px;
    margin-top: 5px;
}

#cardinputs input{
    height: 25px;
    border-radius: 5px;
    width: 200px;
    margin-top: 5px;
    border: 1px black solid;
}
#paySection hr {
    margin: 0px 10px 0px 10px;
}

.payment .payBtn{
    padding : 7px;
    margin: 20px 20px 0px 10px;
    width:350px;
    background-color: rgb(75, 75, 226);
    color: white;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
} 


/* <---------Footer section styles starts----------> */
footer{
    display: flex;
    align-items: start;
    padding: 20px 0px;
    justify-content: space-evenly;
    background-color: white;
}

.headingClass{
    display: inline;
    margin: 0px 0px 20px 0px;
    padding: 0px;
    color: var(--primary-color);
}

.activeLink{
    cursor: pointer;
}

footer #copywrite p{
    font-size: 13px;
}

footer #community a, #help a{ 
    display: block;
    text-decoration: none;
    font-size: 15px;
    color:black;
}

footer #community a:hover, #help a:hover {
    color:blueviolet;
}

footer #community a i, #help a i{
    margin-right: 10px;
}

footer #contact-us p {
    font-size: 15px;
    margin: 0px;
    padding: 0px;
}

footer #contact-us p i{
    margin-right: 10px;
}