/* Reset default margins and padding, apply box-sizing to all elements */
*,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set default font and max-width for the body */
body {
  font-family: Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu,
    sans-serif;
  max-width: 100%;
}

/* Header styling */
header {
  /* Apply gradient background with image overlay */
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.829),
      rgba(13, 13, 13, 0.582),
      rgba(0, 0, 0, 0.706)
    ),
    url("../assets/img/website_medium.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  border-bottom: 8px solid #222; /* Add a border at the bottom */
}

/* Styling for header content */
header .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 77%; /* Set width of header content */
  padding: 1.2rem 0;
}

/* Styling for logo */
.logo img {
  width: 158px;
  height: 48px;
}

/* Styling for sign-up button */
.header-content .sign-btn {
  /* Button appearance */
  text-decoration: none;
  color: #ffffff;
  background-color: #e50914;
  width: 76.91px;
  height: 32px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  place-items: center;
  padding: 4px 16px;
  user-select: none;
  border-radius: 0.25rem;
  white-space: nowrap;
}

/* Additional styling for sign-up button on hover */
.header-content .sign-btn:hover {
  background: #b8000a;
  transition-duration: 250ms;
}

/* Hero Section */
.hero-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Styling for content within hero section */
.hero-section .hero-content {
  color: #ffffff;
  padding: 200px; /* Add padding around hero content */
}

/* Styling for headings within hero section */
.hero-section h1 {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.8;
}

/* Styling for paragraph text within hero section */
.hero-section .hero-text p {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.8;
}

/* Styling for form controls */
.form-control {
  margin-top: 1rem;
}

/* Styling for form headline */
.form-control .form-headline {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
}

/* Styling for input controls within form */
.form-control .input-control {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 1.5rem;
}

/* Styling for input fields */
.input-control input {
  /* Input field appearance */
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  border: 1.5px solid #999;
  color: #ffffff;
  outline: none;
  line-height: 1.5;
  font-size: 1.2rem;
  padding: 1.5rem 1rem 0.5rem;
  width: 368.75px;
  height: 56px;
  border-radius: 0.25rem;
}

/* Additional styling for input field on focus */
.input-control input:focus {
  border: 2px solid #ffffff;
  transition-duration: 250ms;
}

/* Styling for input field placeholder text */
.input-control input::placeholder {
  color: #c1c1c2;
  font-weight: 400;
  font-size: 16px;
}

/* Styling for input button */
.input-control .input-btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #e50914;
  color: #fff;
  white-space: nowrap;
  border: none;
  user-select: none;
  cursor: pointer;
  padding: 0 12px;
  border-radius: 0.25rem;
  width: 160.94px;
  height: 56px;
  letter-spacing: normal;
  line-height: 1;
}

/* Styling for text within input button */
.input-control .input-btn p {
  font-size: 1.5rem;
  font-weight: 500;
  user-select: none;
  padding-right: 0.5rem;
}

/* Styling for icon within input button */
.input-btn i {
  font-size: 1.2rem;
}

/* Enjoy on your TV. styling */
.enjoy-section {
  display: flex;
  justify-content: center;
  background-color: black;
  border-bottom: 8px solid #222;
  color: #fff;
  padding: 4.5rem 0;
}
.enjoy-content {
  max-width: calc(83.33333333333334% - 6rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: auto;
}

.enjoy-text h1 {
  font-size: 3rem;
  font-weight: 900;
}

.enjoy-text p {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 1rem 0 0;
}
.tv-container {
  padding-left: 0.375rem;
  position: relative;
  z-index: 1;
}
.tv-frame {
  position: relative;
  width: 474px;
  height: 359.5px;
}

.tv-frame img {
  width: 100%;
  height: 100%;
}

.tv-video {
  position: absolute;
  top: 21%;
  left: 13%;
  width: 100%;
  height: 100%;
  max-width: 73%;
  max-height: 54%;
  object-fit: cover;
}

/* Download your shows to watch offline. styling */

.Download {
  position: relative;
}
.Download .mobile-img {
  max-width: 546px;
  height: 409.5px;
}
.Download-content .Download .stranger {
  max-width: 301px;
  width: 301px;
  height: 104px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 122px;
  bottom: 18px;
  border: 2px solid #222;
  background-color: black;
  padding: 8px 12px;
  border-radius: 18px;
}
.stranger-text {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.stranger .boxshot-img {
  width: 57.14px;
  height: 80px;
}
.stranger-text h4 {
  font-weight: 500;
  font-size: 1rem;
}
.stranger-text p {
  color: #0071eb;
  font-size: 0.875rem;
  font-weight: 400;
}

/* Watch everywhere.. section styling */
.watch-section {
  background-color: black;
  border-bottom: 8px solid #222;
  color: #fff;
  padding: 4.5rem 0;
}

.watch-content {
  width: 100%;
}
.watch {
  width: 50%;
  padding-left: 16rem;
}
.watch-section h1 {
  font-size: 3rem;
  font-weight: 900;
}

.watch-section p {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 1rem 0 0;
}

/* Enjoy on your TV. kids section- css */
.kids-img img {
  width: 474px;
  height: 355.5px;
  border: none;
}

/* Frequently Asked Questions section styling */
.fAQ-section {
  background-color: black;
  border-bottom: 8px solid #222;
  color: #fff;
  padding: 4.5rem 0;
}
.fAQ-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  max-width: calc(83.33333333333334% - 6rem);
}
.fAQ-content h1 {
  font-size: 3rem;
  font-weight: 900;
  text-align: center;
  margin: 0.83em 0;
}
.fAQ-items {
  padding: 0;
  z-index: 1;
  width: 100%;
}
/* Style for the collapsible within Frequently Asked Questions section */
.collapsible {
  background-color: #2d2d2d;
  color: #fff;
  cursor: pointer;
  padding: 1.5rem;
  width: 100%;
  border: none;
  border-bottom: 1px solid #000;
  text-align: left;
  outline: none;
  position: relative;
  z-index: 1;
  margin: 0 0 10px 0;
}

.collapsible:hover {
  background-color: #3d3d3d;
}

/* Style for the collapsible content */
.content {
  display: none;
  overflow: hidden;
  background-color: #2d2d2d;
  padding: 1.5rem;
  font-size: 1.5rem;
  font-weight: 400;
  transition: all 0.25s cubic-bezier(0.5, 0, 0.1, 1) 0s;
  margin: -10px 0 10px 0;
}
/* Style for the collapsible heading */
.collapsible span:nth-of-type(1) {
  font-size: 24px;
  font-weight: 400;
}

/* Style for the plus and minus icons */
.icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
}

.icon.plus::before {
  content: "+";
}

.icon.minus::before {
  content: "x";
}

.fAQ-section .form-control {
  text-align: center;
  margin-top: 2rem;
}

/* footer styling */
footer {
  font-size: 14px;
  font-weight: 400;
  max-width: 100%;
  background-color: #000;
  color: rgba(255, 255, 255, 0.7);
  padding: 4.5rem 2rem;
}

.footer-content {
  width: 83%;
  margin: 0 auto;
}

footer h3 {
  margin-bottom: 1.2rem;
}
footer h3 a {
  text-decoration: underline;
  font-size: 16px;
  font-weight: 600;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1rem;
}

footer a {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

footer .nig {
  margin-top: 1rem;
}

/* the styling displays when the screen width is less than or equal to 768px */
@media screen and (max-width: 768px) {
  header .header-content {
    width: 100%;
    padding: 1.5rem;
  }
  .logo img {
    width: 98px;
    height: 28px;
  }
  .hero-section {
    max-width: calc(100% - 3rem);
    margin: 0 auto;
  }
  .hero-section .hero-content {
    width: 100%;
    padding: 0;
  }
  .hero-section h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: normal;
  }
  .hero-section .hero-text p {
    line-height: normal;
    margin: 1rem 0 0;
    font-size: 1.185rem;
    font-weight: 400;
  }
  .form-control {
    margin: 1.5rem 0 0;
  }
  .form-control .form-headline {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    max-width: 61.5rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    content: "1";
  }
  .form-control .input-control {
    flex-direction: column;
    max-width: 61.5rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    content: "1";
    margin: 1rem auto 0;
  }

  .input-control input {
    width: 100%;
    max-width: 36.625rem;
    height: 48px;
  }
  .input-control .input-btn {
    height: 48px;
    font-size: 1rem;
    margin-top: 1rem;
  }
  .input-control .input-btn p {
    font-size: 1.2rem;
    padding-right: 0rem;
  }
  .hero-btn i {
    font-size: 1rem;
  }
  /* Enjoy on your TV. styling */
  .enjoy-section {
    padding: 3.5rem 0;
  }
  .enjoy-content {
    max-width: calc(100% - 3rem);
    flex-direction: column;
    text-align: center;
  }
  .enjoy-text h1 {
    font-size: 2rem;
    font-weight: 700;
    z-index: 1;
    width: 100%;
  }
  .enjoy-text p {
    font-size: 1.125rem;
    font-weight: 400;
  }
  .tv-container {
    margin: 1.5rem 0 0;
    padding-left: 0rem;
  }
  .tv-frame {
    width: 272px;
    height: 208px;
  }
  /* Download your shows to watch offline. styling */

  .Download-content {
    flex-direction: column-reverse;
  }
  .Download-content .Download .stranger {
    top: 152px;
    left: 0px;
    max-width: 264.78px;
    width: 264.78px;
    height: 64px;
  }
  .Download .mobile-img {
    max-width: 272px;
    height: 204px;
  }
  .stranger .boxshot-img {
    width: 34.28px;
    height: 48px;
  }
  /* Watch everywhere.. section styling */
  .watch-section {
    padding: 3.5rem 0;
  }
  .watch-content {
    max-width: calc(100% - 3rem);
    margin: auto;
    text-align: center;
  }
  .watch {
    width: 100%;
    padding-left: 0;
  }
  .watch-section h1 {
    font-size: 2rem;
    font-weight: 700;
    z-index: 1;
    width: 100%;
  }
  .watch-section p {
    font-size: 1.125rem;
    font-weight: 400;
  }
  /* Enjoy on your TV. kids section- css */
  .kids-content {
    flex-direction: column-reverse;
  }
  .kids-img img {
    width: 272px;
    height: 204px;
  }
  /* Frequently Asked Questions section styling */
  .fAQ-section {
    padding: 3.5rem 0;
  }
  .fAQ-content {
    margin: auto;
    max-width: calc(100% - 3rem);
  }

  .fAQ-section h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
  }

  .fAQ-items {
    margin: 1.5rem 0 0;
  }
  /* Style for the collapsible within Frequently Asked Questions section */
  .collapsible {
    margin: 0 0 0.5rem 0;
  }
  .content {
    margin: -0.5rem 0 0.5rem 0;
    font-size: 1.125rem;
  }
  .collapsible span:nth-of-type(1) {
    font-size: 18px;
  }
  /* footer styling */
  footer {
    padding: 2rem 1.5rem;
  }

  .footer-content {
    width: 100%;
  }

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