/* from step33 this done. */
@import url("https://fonts.googleapis.com/css2?family=Martel+Sans:wght@600&family=Poppins:wght@300;400;700&display=swap");

/* step34: we always do this to keep margin and padding initially 0 to make everything look stuck to sides of the webpage with no padding & margin initially. */
* {
  padding: 0;
  margin: 0;
  /* step35: we had imported this font too to be default font of webpage : we can import multiple selected fonts at once from google fonts too in a single @import link like used above */
  font-family: "Poppins", sans-serif;
}

/* step43: we give black background to whole body like the netflix. */
body {
  background-color: black;
}
/* step44 : we see and set from 80vh to 70vh to both .main and ".main .box" as we want it to be a little lesser height on comparing to the original website. */

/* step4: include background image using below syntax*/
.main {
  background-image: url(assets/images/bg.jpg);
  height: 644px; /*set height in order to display image of that height*/
  position: relative; /*step9 : make it some relative position to change its default value static so that its children wehn use absolute ; it becomes w.r.t. this div.main as its closest ancestor*/
  /* step15: now we should also keep checking that its "responsive" i.e. it adapts to smaller screens too when scrolled form both sides in "inspect" mode*/
  background-position: center center; /*to make it show centre part of background image when the device size decreased*/
  /* step16: we see its repeating/tiling now when shrinking the device size : so stop it */
  background-repeat: no-repeat;
  background-size: max(
    100vw,
    1200px
  ); /*step17: It makes it easy when size increased-decreased of device and keeps it 100vw till 1200px i.e. background auto adjusts to display 100% of the background image as size changes ; but once it dcreases below 1200px , the background image remains 1200px size only and shrinks as device size also shrinks. */
}

/* step6 : style the box present over the background-image to help us write over the background image.*/
.main .box {
  height: 644px; /*kept it same as background image to fit it*/
  width: 100%; /*to cover full screen */
  background-color: black; /*makes it full black and hides background image : but we need it just a bit darker like netflix , so adjust its transparency now using opacity.*/
  opacity: 0.78;
  position: absolute; /*step10: we make absolute so it now : because earlier .main was below nav , so nav was pushing the block element div.main below : but we want that black shade(present in this .box) over the background image to be there only & navbar to be over it : so we fix it position to top at 0px/0% in order to make it stick over the top of background image : so it sticks/remains at 0px relative to its parent's top having non-static position now : which is (.main) having the background-image : so now navbar remains being written over the black shade of background-image now and not seperately / not pushes the div.main having the black shade below now !! */
  top: 0;
}

/* step14: make it flexbox now with these properties*/
nav {
  display: flex;
  max-width: 60vw; /*to have both netflix and buttons to come a bit towards centre of screen as now container has maxwidth 80vw only : so leaves space from both sides and comes centre when we put margin below.*/
  align-items: center; /*for items to be aligned at centre of the flexbox container from top & bottom vertically : thats why align items dont for veetically ; not justify content.*/
  margin: auto; /*to give left and right margins equally to the container , to make it come at centre */
  justify-content: space-between; /*start with centre and inspect > change it and see which suits best*/
  height: 100px; /* step18: increase the size of navbar to make the items come more at centre (more below from top) of that increased height navbar due to justify content and now we can remove the background color red as its work is done now. */
}

/* step22: make width of logo to increase which auto-adjusts height by itself & remains in centre of navbar only due to centre aligned there !! */
nav img {
  width: 130px;
  /* step23: change it position from static and make it come/pop out of the dark background image to look bright red. */
  position: relative;
  z-index: 1; /*-1 send more inside , 0 remains there ; 1 comes out at top of all; as +ve z axis is outside of screen by logic*/
}

nav button {
  /* step24 : same as step23 ; applied on buttons too of the navbar. */
  position: relative;
  z-index: 1;
}

/* step27: design the text written over the background image now*/
.hero {
  color: white; /*as text was white*/
  /* step28: now same as step23 this done to make text come over the black shadowed background image and look brighter and not dull like the background-image. */
  position: relative;
  z-index: 1;
  /* step29: make it flex box now with flex direction column as we want the elements/items in this div.hero to be appearing one below the other & not in the same horizontal line. */
  display: flex;
  flex-direction: column;
  /* step30: done to bring it at centre of the flexbox container both horizontally and then vertically. */
  justify-content: center;
  align-items: center;
  /* step31: now there is no height of flexbox given yet so how will alignitems center work to bring it vertically centre from both bottom and top : like you can give border here to see the container of flexbox as below. */
  /* "border: 20px solid aqua;" : this can be done to see the current flexbox container */
  /* step32: so now we give it to take 100% of the height of its parent i.e. ".main" as its height was also set to 80vh : so since its parent height is set we can us "%" unit and make it 100% as the height of its parent class : and so now it comes vertically centred of the flexbox container too : */

  /*step48: but we saw that the border came a bit extra too out as it had 100% height of ".main" but due to 100px height of navbar it went 100px out so we subtract using "calc" function.*/
  height: calc(100% - 100px);
  /* step33: we download and add "whatfont" extension > reload the page > select text > go to extensions tool > click on whatfont > its shows the extension > go to google fonts > search the font > use it here.
    Import and put it on top of the stylesheet */
  /* step36: put the font we imported here. */
  font-family: "Martel Sans", sans-serif;
  /* step37 : whatfont extension also tells size and font weight so lets put that too here : but its for 1st line not for all so lets do in a seperate class below. */
  /* border: 4px solid aqua; */

  /* step45: we see that website is "NOT RESPONSIVE" i.e. on decreasing the device screen size , the text in ".hero" gets distorted : so lets make the texts central & with padding form each other too 
    So, we add padding and then the central text in ".hero" as well as all the other text elements that we have below!!*/
  padding: 0px 30px; /*want padding from left-right only here ; not from the top-bottom*/
  text-align: center;
}
/* step38: continuation of step37 done here : do fonts according to "whatfont" extension for each element in the flexbox "div.hero" */
/* step42: We wrote when without ">" it meant to Select the first child/n-th child(2)/(3).... : of ANY element inside ".hero" : so to resolve it we put ">" to apply for immediate 1st/2nd... child and not on all */
.hero > :first-child { /*can write first-child too*/
  font-weight: 900;
  font-size: 56px;
  text-align: center;
}
.hero > :nth-child(2) {
  font-weight: 900;
  font-size: 56px;
  text-align: center;
}
.hero > :nth-child(3) {
  font-weight: 900;
  font-size: 56px;
  text-align: center;
}
.hero > :nth-child(4) {
  font-weight: 500;
  font-size: 20px;
  text-align: center;
}
.hero > :nth-child(5) {
  font-weight: 400;
  font-size: 16px;
  /* step39: this is a bit more below the line above it so add top padding to it */
  padding-top: 35px;
  text-align: center;
}

/* step47: we style the seperation now : now see the problem that came in ".hero" in next step. */
.seperation {
  background-color: rgb(69,69,69); /*change as per you to match as the website*/
  height: 7px; /*adjust as per you*/
  /* THE SEPERATION LINE WAS HIDING BEHIND IMAGE IN 1ST SECTION ; SO WE USE Z-INDEX VALUE AND INCREASE IT FROM 1,2.... TILL WE GET IT OUTER SIDE : AS Z-INDEX MEANS COMING OUTER OF THE SCREEN ON +VE Z-AXIS. */
  position: relative;
  z-index: 11; /*keep increasing till you get it above of the black image hiding it, when not put there.*/
}
/* step51: we now style the buttons */
.btn {
  padding: 3px 8px; /*to give spacings in between the button's text and the border*/
  font-weight: 400;
  background-color: white;
  border-radius: 5px;
  font-size: 20px;
  /* style and make transparent with border */
  background-color: transparent;
  color: white;
  border: 1px solid rgb(120, 120, 120);
  gap: 106px;
  /* step56: add cursor pointer to bring human hand when hovered over the buttons. */
  cursor: pointer;
}
.btn-red1 {
  background-color: red;
  color: white;
  padding: 3px 24px 3px 24px;
  font-size: 20px;
  border-radius: 4px;
  border: none; /*to have no borders for these as we have applied the border to common class "btn" so may apply here too but we don't want here.*/
}
.btn-red2 {
  background-color: red;
  color: white;
  font-size: 20px;
  padding: 11px 17px;
  margin: 25px 0px 0px 7px; /*for left margin to the button , to maintain space between the input & the "red-button"*/
  border: none; /*to have no borders for these*/
}
/* step52: same as the "get started" button we style this too so that they look similar */
.main input {
  font-size: 20px;
  padding: 11px 90px 11px 17px; /*to give the paddings to make the input-box look like the website*/
  border-radius: 5px;
  margin: 25px 0px 0px 0px;
  border: 1px solid rgb(109, 109, 109);
  background-color: transparent;
}
/* to style the plceholder's font and color directly */
input::placeholder {
  color: rgb(175, 175, 175);
  font-size: 18px;
}
/* step62: make the section as flexbox to make its items i.e. text and image come in a single line. */
.first {
  color: white; /*make text white*/
  display: flex;
  justify-content: center; /*to bring them at centre of flexbox*/
  align-items: center; /*to bring it vertically at centre too*/
  margin: auto; /*to give margin equally from all the sides.*/
  /* gap: 250px; */
  max-width: 70vw; /*done to make them take a particular width only that is maintained even when decreasing the device screen's size*/
}
.secImg {
  /* step63: make position relative of this : to remove its position from static and now so that in next step we can make its child to be position w.r.t this using abolute positioning. */
  position: relative;
}
.secImg img {
  width: 555px;
  position: relative;
  z-index: 10; /*Step65: make it come towards +ve z-axis by z-index making equal to 1 : so that the image comes towards outer side of the video : to look it like video is inside the tv*/
}
.secImg video {
  /* step64: make it position absolute so that now whatever top left we give ; its applied w.r.t to its nearest parent that has non-static "position". */
  position: absolute;
  top: 51px;
  right: 0;
  width: 555px;
}

/* step67: make the two texts in section.first different styles like the website : Use "whatfont" extension from the netflix website to get the fontsize and all.*/
/* we use ">" as it means the immediate "div" present in ".first" , uska 1st child to select ; without ">" it would select the first child of all divs present in ".first"  */
/* IN SYNTAX REMEMBER: WE HAVE SPACE AFTER "div" before ":" */
.section.first>div{
  display: flex;
  flex-direction: column;
  padding: 34px 0px;
}
.first > div :first-child {
  font-size: 48px;
  font-weight: bolder;
}

.first > div :nth-child(2) {
  font-size: 24px;
}
/* step75: style the h2 created there and give padding it has from the top there. */
.faq h2{
    color: white;
    text-align: center; /*to bring it horizontally at centre*/
    font-size: 48px; /*step80: used "whatfont" extension to know these*/
    
}
/* step83: to invert the color from its black color : to make it dircetly white. */
.faq img{
    filter: invert();
    height: 40px; /*to resize the svg*/
}
/* step76: design the boxes containing the FAQs. */
.faqbox{
    /* BEST WAY TO COPY COLOR IS : GO ON THAT WEBSITE : INSPECT : ELECT THE BOX : SET YOUR OWN COLOR IN "element-style{ }" SPACE : AND THEN ADD "color:red" > CLICK ON THE SQUARE CONTAINING "red" > CLICK ON DROPPER ICON : CHOOSE COLOR YOU WANT FORM WEBSITE > GET ITS CODE > COPYY HERE : SO, THIS SAVE STIME INSTEAD OF SEACRHING IN WHOLE SOURCE CODE THERE FOR THE COLOR OF THE BOX OR ANYTHING ; SAME CAN BE APPLIED THUS EVERYWHERE SIMILARLY.  */

    background-color: #2d2d2d;
    color: white;
    padding: 32px; /*to make the box appear large by making space between its text and the borders*/
    max-width: 69vw; /*to make its width less than full width , same as present on the website*/
    /* step78: to give proper margins as per the website. */
    margin: 12px auto 0px auto; /* to keep it equally positioned from left-right & have 20px space between topmost-box and the text above : will also be used for spaces between boxes later.*/
    /* step79: make it flex box in order to apply space-between: on svg and the text , to make it look like the website. */
    display: flex;
    justify-content: space-between;   
    font-size: 32px; /*step81: used "whatfont" extension to know these and then adjusted accordingly.: we already had sans-serif as default font-style of webpage in the *{ } scetion above in this CSS file : so no need to set that again.*/

    /* step82: to make human hand come when hover cusor over the boxes. */
    cursor: pointer;
    /* step86: put transition here for hover to occur like the website in a transition and not immediately : so type transition and can hove ron it > go to mdn-reference for syntax,etc.... */
    /* PUT BACKGROUND-COLOR : NOT "ALL" , ELS EIT WILL SHOW TRANSITION ON CHANGING HEIGHT WIDTH TOO WHEN DECREASING SCREEN'S SIZE IN "INSPECT" , WE DON'T WANT ANIMATION THERE : SO APPLY ONLY ON BACKGROUND-COLOR CHANGE , NOTHING ELSE !! */
    transition: background-color 1s ease-out;;
}
/* step77: add padding on the section containing FAQs to make the texts appear spaced form the seperation bar , like present on the website.*/
.faq{
    padding-top: 50px;
}
/* step84: to add hover effect when cursor hovered onto these faqboxes */
.faqbox:hover{
    /* step85: use pickcolor :colorzila : extension > click it > hover onto this and click again to get the color its getting on hovering on original website and then copy it to use it here. */
    background-color: #414141;
}

/* step87: copying the above used these buttons and placeholders again to be displayed again , like present in the website. */
.again {
    color: white;
  font-weight: 400;
  font-size: 18px;
  padding-top: 55px;
  text-align: center;
}
/* step88: copying the above used these buttons and placeholders again to be displayed again , like present in the website. */
.buttons_again{
    margin-top: -15px;
}
/* step89: copying the above used these buttons and placeholders again to be displayed again , like present in the website. */
.placeholder_again {
  font-size: 20px;
    padding: 11px 190px 11px 17px; /*right margin is given bit more to make it look longer like the website*/
    border-radius: 5px;
    margin: 25px 0px 0px 0px;
    border: 1px solid rgb(109, 109, 109);
    background-color: transparent;
}
/* step90: last seperation made bit down using margin else it was sticking to the email-address placeholder. */
.seperation_last {
  background-color: rgb(69,69,69); /*change as per you to match as the website*/
  height: 7px; /*adjust as per you*/
  margin-top: 65px;
}

/* step98: style the footer tag now for the things not part of grid obviously. */
footer{
    color: white;
    max-width: 60vw; /*makes the container containing them to become smaller to 60vw width and not full screen width : can see border color by drawing border : to know more*/
    margin: auto; /*once width of container has reduced: we put equal margins from all sides to make the <span> and grid containing these columns & all items of footer , to come to the center* by getting equal margins form all sides automatically.*/
    padding: 50px; /*step101: to give padding to whole footer in order to shidt its contents more to inner side from the borders.*/
    color: rgb(174, 174, 174); /*step105: make the common color for all texts in "footer" to this: same as present in the orginal website too.*/
}

/* step92: we make footer as grid like discussed in step91. */
/* step97: after step96 , this change of name from "footer" to ".footer" done here*/
.footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /*as we want 4 columns like on the original netflix's website*/
    /* step95: make the color of texts in footer as white */
}

/* step94: style the footer-items made in the grid */
.footer-item{
    display: flex;
    flex-direction: column; /*to make them appear as 4 different columns now: with all items dropped one below the other due to the flex-direction set to "columns" here*/
    /* step100: now we add gaps between elemnts of flex containers. */
    gap: 15px;
}
/* step99: change color of anchor tags and if wanted we can also remove the underline present below it by default. */
.footer a{
    /*text-decoration: none; : can be done to remove the underline present below it by default*/
    color: rgb(174, 174, 174);
    font-size: 18px; /*given using "whatfont" extension & can adjust as per our wish to make it like the original website font's size.*/
}
/* step102: we tried giving padding to it and margins but couldn't as its inline elment maybe : so better to make it div in .html document. */
footer .questions{
    font-size: 20px; /*given using "whatfont" extension for the text , which is not part of the grid & can adjust as per our wish to make it like the original website font's size..*/
    padding: 0px 0px 50px 0px; /*step104: we give bottom padding inorder to give space between the .questions "div" and the grid columns present below*/
}
/* step107: style the button with copied css as used earlie rin navbar : only margin from top increased to increase its gap from footer links above it / on(from) its top. */
.btn_again {
  margin: 70px 0px 0px 0px; /*margin from top increased to increase its gap from footer links above it / on(from) its top.*/
  padding: 2px 30px 2px 30px;
  background-color: white;
  border-radius: 5px;
  font-size: 20px;
  background-color: transparent;
  color: white;
  border: 1px solid rgb(120, 120, 120);
  gap: 106px;
  cursor: pointer;
}
/* step109: design the bottom two lines added at end. */
.bottom1{
  font-size: 20px;
  padding: 45px 0px 45px 0px;
}
.bottom2{
  font-size: 16px;
  padding: 0px 0px 140px 0px;
}
/* step110: used extension colorpicker to get color of anchor tag from the original website. */
.bottom2 a{
  color: #3980f1;
}
/* NOW, NEXT STEPS MADE TO MAKE IT RESPONSIVE AND ADAPT TO VARIOUS CHANGES IN SIZE OF THE DEVICE'S SCREEN WHEN CHANGED USING "INSPECT" : SO FOR THIS SEE THE "RESPONSIVE.TXT" FILE FOR SEEING HOW WE SET THE RESPONSIVENESS HERE !!*/

/* THE RESPONSIVENESS ADDED HERE !! */
@media screen and (max-width: 1300px) {
    /* This entire block will only apply when the screen width is 1300px or less.
       It helps the page adjust layout for tablets, small laptops, or when you inspect with smaller width.
    */

    nav {
        max-width: 90vw; /* Set navbar width to 90% of the viewport width (vw),
                            so that it doesn't look too wide on small screens.
                            Prevents overflow and keeps things centered nicely. */
    }

    .first {
        flex-wrap: wrap; /* When .first has flex children, this allows them to wrap
                            to the next line on smaller screens to avoid squeezing. */
    }

    .secImg img {
        width: 305px; /* Reduce the TV image width to fit nicely on smaller screens,
                        otherwise it would overflow or look too large. */
    }

    .secImg video {
        width: 305px; /* Same as image — scale down the video to match the smaller TV size
                        so that video still fits perfectly inside TV image. */
    }
    /* NOW , WE ALOS REDUCE FONT SIZE AS THE DEVICE SIZE REDUCES IN ORDER TO FIT IT THERE AND THE WEBSITE'S STRUCTURE TO BE MAINTAINED AND NOT DISTORTED. */
    .hero > :nth-child(1) {
        font-size: 32px; /* Reduce font size of the main hero heading
                           so that it doesn’t overflow or wrap awkwardly. */
    }

    .hero > :nth-child(2) {
        font-size: 18px; /* Reduce font size of the second line in hero section,
                           to maintain readability without consuming too much space. */
    }

    .hero > :nth-child(3) {
        font-size: 18px; /* Reduce size of the third hero line for same reason —
                           better readability and less vertical space. */
    }
    /* THIS WAS MADE TO APPLY STYLES TOGETHER ON THE BUTTONS BELONGING TO THIS CLASS TOGETHER. */
    .hero-buttons {
        display: flex;
        flex-direction: column; /* Stack the buttons vertically instead of side by side
                                  to prevent them from squeezing or overflowing. */
        align-items: center; /* Center the buttons horizontally inside their container. */
        justify-content: center; /* Vertically center buttons if needed. */
        gap: 16px; /* Maintain space between stacked buttons for better UX. */
    }

    .faq h2 {
        text-align: center; /* Center align FAQ heading text for better visual balance
                               on narrow screens when the device screen reduces. */
        font-size: 32px; /* Reduce heading font size so that long words don’t overflow or wrap badly. */
    }

    footer {
        max-width: 90vw; /* Restrict footer width to 90% of screen width,
                            keeping content centered and not overflowing on small devices. */
        padding: 75px 0; /* Add vertical padding (top and bottom) for good breathing space.
                            0px left and right to prevent horizontal scroll. */
    }

    .footer-item {
        align-items: center; /* Center items inside each footer column for better appearance
                                when layout changes from 4 columns to 2. */
    }

    .footer {
        display: grid;
        grid-template-columns: 1fr 1fr; /* When device size reduces we do that : Instead of showing 4 columns (which would be too cramped),we now show only 2 columns in the footer for better readability : AND YAHI TOH MAIN-USECASE THA OF THE REASON WHY WE USED GRIDS FOR FOOTER : TO MAKE THIS CHANGE IN RESPONSIVENESS FROM 4 COLUMNS TO 2 COLUMNS FAST AND VEYR EAYS TO USE AND DO IN THE @media query HERE. */
        gap: 25px; /* AND ALSO AFTE RTHE TWO COLUMNS ARE MADE : We Add spacing between those 2 columns so it doesn’t look crowded between each other😊😁 !! */
    }
    /* done as size of it was coming very large in phone */
    .placeholder_again{
      padding: 9px 1px 9px 1px;
    }
    .main input{
      padding: 9px 1px 9px 1px;
    }
}