style.css

body {
   background-color: rgba(15, 2, 2, 0.849);
   margin: 0px;
   padding: 0px;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#logo {
   height: 40px;
}

/* sign button ...................... */
#sign-in {
   background-color: #e50914;
   color: white;
   padding: 5px 12px;
   border: none;
   border-radius: 2px;
   cursor: pointer;
   font-size: 20px;
}

#sign-in:hover {
   filter: brightness(80%);
}

.navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 60px;
}

#container {

   height: 650px;
   background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("./NetFllix material/background.jpg");
   background-position: center;
   background-size: cover;

}

#content {
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-size: 20px;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin: 100px 0px 0px 360px;
   margin-left: auto;
   margin-right: auto;

}

.heading {
   margin: 10px;
   text-align: center;
}

.subheading {
   font-size: 20px;
   font-weight: light;
}

.paragraph {
   font-weight: lighter;
   font-size: 15px;
}

#input-email {
   width: 100%;
   margin-top: 10px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#input-email input {
   height: 50px;
   border-width: 1px;
   border-color: white;
   padding: 0px 100px 0px 15px;
   background-color: rgba(0, 0, 0, 0.4);
   border-radius: 7px;
   color: whitesmoke;
   font-weight: bold;
}


#input-email .getstarted {
   background-color: red;
   color: white;
   padding: 7px 20px;
   font-size: 23px;
   font-weight: 500;
   margin-left: 7px;
   border-radius: 3px;
}

.getstarted:hover {
   filter: brightness(80%);
}

/* content tab 2  */

.contentab{
  padding: 4em;
   margin-top: 8px;
   background-color: black;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;

}
.contentab div{
width: 35%;
margin-right: 20px;
}

.contentab img{
height: 350px ;
}
.second , .fourth{
   flex-direction: row-reverse;
}

.divide{
height: 6px;
background-color: rgba(15, 2, 2, 0.849);

}

/* Frequently Asked Questions */
#faq{
   background-color: black;
}

#faq h2{
   height: 100px;
   text-align: center;
   font-size: 48px;
   font-weight: 900;
   color: white;
   margin-top: 6px;
  padding-top: 90px;
  margin-bottom: 0px;
}
.faqbox{
   display: flex;
   padding: 20px;
   justify-content: space-between;
   color:white;
   text-align: center;
   border: 3px solid black;
   font-size: 24px;
   font-weight: 400; 
   background-color: rgb(58, 44, 44);
   max-width: 75vw;
   margin: auto;
   cursor: pointer;
   transition: all 1s;
   
}
.faqbox:hover{
   background-color: rgb(92, 77, 77);
}

/* second mail */

#secondmail{
   background-color: black;
   color: white;
   text-align: center;
   padding-top: 30px;
   padding-bottom: 50px;
}


/* footer */
.call{
   margin-left: 13vw;
  font-weight: lighter;
  font-size: 14px;
}

footer{
   color: white;
   background-color: black;

}
.footitems{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   max-width: 75vw;
   margin: auto;
   column-gap: 30vh;
}

.footitems div{
   display: flex;
   flex-direction: column;
   justify-content:space-between;

}
.footitems div span{
   font-size: 12px;
padding: 12px;
font-weight: lighter;
cursor: pointer;
}



/* language button  */
.languagebtn{
   background-color: black;
   margin-left: 12vw;
   color: white;
   font-size: 14px;
   font-weight: bold;
   padding: 5px 23px;
   border-radius: 5px;
  border-width: 2px;
  border: 2px solid white;

}

.netflixindia{
   color:white;
   display: flex;
   justify-content: flex-start;
   max-width: 75vw;
   margin: auto;
   font-size: 12px;
   word-spacing: 3px;
   margin: 10px;
   padding: 20px 185px;
   padding-bottom: 80px;
}

/* media query  */

@media screen and (max-width:700px) {
   .getstarted{
      margin: 10px;
   }
   #faq h2{
      font-size: 35px;
   }
   #logo{
      height: 25px;

   }
   .contentab div{
      width: 100%;
      text-align: center;
   }
   .contentab img{
      height: 300px;
   }
   .netflixindia{
      margin-left: 10px;
    
   }
  
   }