*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    color: white;
    background-color: black;
     font-family: "Poppins", sans-serif;
    
}
nav{
    background-image: url(./asset/netflix\ bg\ image.jpg);
    height: 100vh;
    width: 100%;
    border-bottom: solid red;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}
.nav-left{
    display: flex;
    justify-content: space-between;
   padding: 1rem;
   gap: 1rem; 

}
.logo{
    height: 150px;
    width: 10rem;
    margin-left: 8rem;
    
}
.selector{
   background-position: right;
    font-weight: bold;
    justify-content:space-between;
    text-align: center;
    background-color: #101010;
    color: white;
    height: 5vh;
    width: 9vw;
    font-size: 15px;
    border-radius: 5px; 
}
button{
    height: 5vh;
    width: 5vw;
    background-color: #C11119;
    border-radius: 5px;
    text-align: center;
    border: none;
    color: white;
    font-size: 15px;
    margin-right: 10rem;
}
.title{
    font-weight:bolder;
    justify-content: center;
    display: flex;
    margin-top: 60px;
    font-size: 50px;
}
.bold{
      font-weight: bold;
      display: flex;
      justify-content: center;
      font-size: 20px;
      padding: 10px;

}
.watch{
    font-size: 15px;
    gap: 4rem;
    display: flex;
    justify-content: center;
    padding-top: 25px;
}
label{
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 10px;
}
.mail{
    display: flex;
    justify-content: center;
    background-color: #13100F;
    border-radius: 5px;
    color: white;
    height: 8vh;
    width: 25vw;
    padding: 15px;
    font-size: 20px;
    margin-left: 10rem;

}
.start-btn{
    height: 8vh;
    width: 16vw;
    font-weight: bold; 
    font-size: 25px;
    border-radius: 5px;
}
.trend{
    padding: 3rem;
    padding-left: 10rem;
    gap: 1rem;
    justify-content: center;
}
.movies{
    display: flex;
    flex-direction: column;
    gap: 1srem;
    height: 20vh;
    width: 15vw;
    padding-left: 10rem;
    border-radius: 10px;
}
.movie-card-list {
  display: flex;
  gap: 3rem;
  position: relative;
}
.movie-poster img{
  height: 35vh;
  width: 12vw;
  border-radius: 10px;
  position: relative;
   
}  
.rank{
    margin-top: 120px;
    margin-left: -10px;
    z-index: 1;
    position: absolute;
    font-size: 6rem;
    font-weight: 900;
    color: black;
    text-shadow:  3px 3px 10px white;
}

.movie-poster:hover {
    transition: all 1s;
    transform: scale(1.1);
}
.reason{
    display: flex;
    flex-direction: column;
     padding-top: 10rem;
    padding-left: 10rem;
    gap: 25rem;
    justify-content: center;
}
.info{
    display: flex;
    gap: 1rem;
    width: 100%;
    height: 10vh;
    padding-left: 10rem;
    border-radius: 10px;
}

.box{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    height: 300px;
    width: 300px;
     background-image: linear-gradient(#1C1933,#1F1527); 
     gap: 2rem  ;
     padding-left: 1rem;
    padding-top: 2rem;
    justify-content: left;
    border-radius: 15px; 
}
.para{
    display: flex;
    
    font-size: 15px;
    color: #B6B6BF;
   
}
.moniter{
    height: 8vh;
    width: 8vh;
    margin-left: 200px;
    margin-top: 30px;
}
.download{
     height: 8vh;
    width: 8vh;
    margin-left: 210px;
    margin-top: 15px;
}
.fire{
    height: 9vh;
    width: 9vh;
    margin-left: 200px;
    margin-top: 25px;
}
.img-4{
    height: 8vh;
    width: 9vh;
    margin-left: 200px;
    margin-top: 5px;
}


main{
  padding-left: 10rem;
   gap: 2rem;
   /* padding-top: 5rem; */
}

.faq{
    display: flex;
    justify-content: space-between;
    
}
.que-1{
    display: flex;
    flex-direction: column;
    padding-top: 20rem;
    gap: 25rem;
    justify-content: center;

}
.qns{
    height: 12vh;
    gap: 1rem;
    width: 80vw;
    padding: 25px;
    margin-top: 8px;
    font-size: 22px;
    background-color:#414141c3;
}
.plus{
    font-weight: lighter;
     font-size: 3rem;
     padding: 1px;
    
}

.mail-2{
    display: flex;
    justify-content: center;
    background-color: #13100F;
    border-radius: 5px;
    color: white;
    height: 8vh;
    width: 40vw;
    padding: 15px;
    font-size: 20px;
}
.watch-2{
    font-size: 17px;
    gap: 7rem;
    display: flex;
    justify-content: center;
    padding-top: 10rem;
}
footer{
    display: flex;
    flex-direction: column;
    padding-left: 10rem;
    margin-top: 20rem;
    color: whitesmoke;
    font-size: 15px;
}
.list{
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-right: 20rem;
    margin-top: 5rem;
}
li{
    list-style: none;
    padding: 5px;
}
a{
      color: whitesmoke; 
}
.english{
    margin-top: 4rem;
    padding-bottom: 10rem;
}
.last{
    gap: 4rem;
    padding-top: 3rem;
    font-size: 15px;
}
.last-2{
    gap: 4rem;
    padding-top: 3rem;
    font-size: 14px;
    color: gray;
}
.blue{
    color: #448EF4;
}