* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 /* HEAD PART */

 header .back {
     background-image: url(back_netflix.jpg);
     height: 100vh;
     width: 100vw;

 }

 .black {
     height: 100vh;
     width: 100vw;
     background-color: rgba(0, 0, 0, 0.597);
     position: absolute;
     top: 0;
 }

 .head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 60px;
     width: 70vw;
     margin: auto;
 }

 .btn {
     display: flex;
     height: 60px;
     width: 160px;
     justify-content: center;
     align-items: center;
     gap: 10px;
 }

 .sell {
     height: 30px;
     width: 100px;
     border: 2px solid white;
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 7px;
     gap: 5px;
 }

 #language,
 #language_2 {
     color: white;

 }

 .red_btn {
     background-color: red;
     height: 30px;
     width: 70px;
     border-radius: 7px;
     color: white;
     padding: 5px;
 }

 /* main part  */

 .main {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     margin-top: 160px;
 }

 .content {
     color: white;
     font-family: unset;
     font-size: 3.5rem;
     font-weight: 900;
 }

 .para {
     color: white;
 }

 .para h5 {
     text-align: center;
     font-family: unset;
     font-size: 1.25rem;
     font-weight: 500;
     margin-bottom: 2rem;
 }

 .para:nth-child(2) {
     color: rgb(255, 255, 255);
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
 }

 .search input {
     background-color: transparent;
     width: 270px;
     height: 45px;
     color: rgb(255, 0, 0);
     border-radius: 7px;
     text-align: left;

 }

 .search input::placeholder {
     color: white;
     padding: 15px;
 }

 .search button {
     background-color: red;
     height: 50px;
     width: 170px;
     border-radius: 7px;
     color: white;
     font-size: large;
     padding: 5px;
 }

 .search button:hover {
     background-color: rgba(255, 0, 0, 0.647);
 }

 /* cards */

 /* Trending section */
 .top_10 {
     padding: 40px;
     padding-left: 80px;
     overflow: hidden;
 }

 .grid {
     display: flex;
     gap: 20px;
     overflow-x: auto;
     scroll-behavior: smooth;
     padding-bottom: 10px;
 }

 /* Hide scrollbar */
 .grid::-webkit-scrollbar {
     display: none;
 }

 /* Cards */
 .card {
     flex: 0 0 auto;
     width: 180px;
     height: 250px;
     background-size: cover;
     background-position: center;
     border-radius: 10px;
     position: relative;
     transition: transform 0.3s ease;
 }

 .card:hover {
     transform: scale(1.1);
     cursor: pointer;
 }

 /* Number label */
 .num {
     position: absolute;
     bottom: 10px;
     left: 10px;
     font-size: 100px;
     color: black;
     text-shadow: 0 0 5px black;
     -webkit-text-stroke: 2px white;
     font-family: "Momo Trust Display", sans-serif;
 }

 .bighead {
     /* margin-left: 100px; */
     align-self: flex-start;
     margin-bottom: 20px;
 }

 .middle {
     background-color: black;
 }

 ::-webkit-scrollbar {
     display: none;
 }


 /* middle card reason sections  */

 .more {
     display: grid;
     grid-template-columns: 315px 315px 315px 315px;


 }

 .part {
     width: 300px;
     height: 270px;

     background: #1A2043;
     background: linear-gradient(155deg, rgba(26, 32, 67, 0.89) 71%, rgba(204, 0, 85, 0.89) 100%);
     border-radius: 15px;
     padding: 7px;
 }

 .part h2 {
     color: white;
 }

 .part p {
     color: rgb(153, 151, 151);
     font-weight: bold;
 }

 .reason {
     display: flex;
     flex-direction: column;
     align-items: start;
     padding-left: 20px;
     padding-top: 20px;
     gap: 25px;
 }

 .img {
     display: flex;
     justify-content: end;
     margin-top: 31px;
     margin-right: 20px;

 }

 .join {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     width: 83vw;
     /* border: 2px solid red; */
     margin: auto;
     gap: 20px;
     margin-top: 20px;


 }

 .join .head_2 {
     align-self: self-start;
 }

 /* Frequently asked question Section  */
 .frequently {
     width: 83vw;
     /* border: 2px solid red; */
     margin: auto;
     display: flex;
     flex-direction: column;
     align-items: start;
     margin-top: 80px;
     gap: 10px;
 }

 .question {
     height: 90px;
     width: 80vw;
     /* border: 2px solid yellow; */
     display: flex;
     justify-content: space-between;
     padding: 20px;
     align-items: center;
     background-color: rgb(65, 65, 65);
 }

 .question p {
     color: white;
     font-size: 1.5rem;
 }

 .question i {
     color: white;
     font-size: 2rem;
 }

 .question:hover {
     background-color: grey;
 }

 .member {
     margin: auto;
     width: 70vw;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     margin-top: 70px;
     gap: 20px;
     margin-bottom: 70px;
 }

 /* footer style  */
 .foot {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     /* border: 2px solid red; */
     width: 85vw;
     margin: auto;
 }

 .foot_item ul li a {
     color: rgb(179, 179, 162);
 }

 .foot_item ul {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 footer {
     /* border: 2px solid green; */
     width: 85vw;
     /* margin: 50px 0px 100px 0px; */
     margin: auto;
     display: flex;
     flex-direction: column;
     gap: 40px;
     margin-bottom: 150px;
 }

 select {
     border: none;
     outline: none;
 }

 select option {
     color: black;
     outline: none;
     border: none;
 }

 body {
     background-color: black;
 }


 @media (max-width: 900px) {
     .head {
         width: 90vw;
     }

     .content {
         font-size: 2.5rem;
     }

     .more {
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
     }

     .part {
         width: 100%;
         height: auto;
     }

     .foot {
         grid-template-columns: repeat(2, 1fr);
     }

 }

 /* Mobiles (600px and below) */
 @media (max-width: 600px) {
     header .back {
         height: 80vh;
     }

     .main {
         margin-top: 30px;
     }

     .head {
         width: 90vw;
         flex-direction: column;
         gap: 10px;
         height: auto;
         padding-top: 10px;
     }

     .content {
         font-size: 1.8rem;
         text-align: center;
     }

     .para h5 {
         font-size: 1rem;
         padding: 0 10px;
     }

     .para p {
         font-size: 1rem;
         margin-left: 30px;
         padding: 0 10px;
     }

     .search {
         display: flex;
         flex-direction: column;
         gap: 10px;
     }

     .search button {
         width: 100%;
     }

     .more {
         grid-template-columns: 1fr;
         gap: 15px;
     }

     .part {
         height: auto;
         padding: 15px;
     }

     .member {
         width: 70vw;
         text-align: center;
     }

     .foot {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .foot_item ul {
         align-items: center;
     }

     .top_10 {
         padding-left: 20px;
     }
 }

 @media (min-width: 900px) and (max-width: 1300px) {
     .head {
         width: 85vw;
     }

     .content {
         font-size: 3rem;
         text-align: center;
     }

     .more {
         grid-template-columns: repeat(2, 1fr);
         gap: 25px;
         justify-content: center;
     }

     .part {
         width: 100%;
         height: auto;
         padding: 15px;
     }

     .foot {
         grid-template-columns: repeat(3, 1fr);
         gap: 20px;
     }

     .search input {
         width: 300px;
     }

     .search button {
         width: 150px;
     }

     .member {
         width: 80vw;
     }
 }