/* Navbar styling */
    .navbar {
      background-color: #141414;
      box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }

    .navbar-brand img {
      height: 60px;
      transition: transform 0.3s ease;
    }
    .navbar-brand img:hover {
      transform: scale(1.05);
    }

    .nav-link {
      color: #fff !important;
      font-size: 18px;
      font-weight: 500;
      position: relative;
    }
    .nav-link:hover {
      color: #e50914 !important;
    }
    .nav-link::after {
      content: "";
      display: block;
      width: 0;
      height: 2px;
      background: #e50914;
      transition: width 0.3s;
      margin: auto;
    }
    .nav-link:hover::after {
      width: 100%;
    }

    /* Button */
    .btn-custom {
      background: #e50914;
      color: #fff;
      border-radius: 25px;
      padding: 8px 20px;
      font-weight: bold;
      transition: all 0.3s ease;
      box-shadow: 0 3px 10px rgba(229, 9, 20, 0.5);
    }
    .btn-custom:hover {
      background: #ff1f2c;
      transform: scale(1.05);
    }
   
   .heading_label {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
  padding-left: 10px;
}

/* Poster Container */
.nf_data {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Poster Images */
/* Poster container */
.nf_data {
  width: 220px;       /* medium width */
  height: 300px;      /* medium height */
  margin: 0 auto;     /* center inside column */
  overflow: hidden;   /* crop overflow */
  border-radius: 8px;
}

/* Poster image */
.nf_data img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* crops while keeping proportions */
  display: block;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.nf_data img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.6);
}


/* Responsive Grid (Bootstrap handles most, but small adjustments) */
.row.g-3 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.col-6, .col-md-4, .col-lg-3 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Section Containers */
.container.my-5 {
  padding-left: 15px;
  padding-right: 15px;
}

/* Optional: smooth hover transition for entire poster */
.hover-scale {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Page background */
.page {
  background-image: url('https://i.pinimg.com/1200x/57/36/79/573679758fbfe7b4692dbca983a993e3.jpg'); 
  background-size: cover;         
  background-position: center;    
  background-repeat: no-repeat;   
  background-attachment: fixed;   
  color: #fff;                    
  font-family: Arial, sans-serif;
}
  html, body {
  height: 100%;
  margin: 0;
}

/* Flex wrapper pushes footer down */
.page-wrapper {
  min-height: 100vh;         /* Full height of screen */
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;                   /* Take remaining space */
}

/* Footer sticks at bottom */
.footer {
  margin-top: auto;
  background-color: #141414;
  color: #999;
  font-size: 16px;
  border-top: 1px solid #333;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
}
  
  /* Fullscreen carousel */
  
#heroCarousel,
#heroCarousel .carousel-item {
  height: 100vh; /* fullscreen */
  overflow: hidden;
  position: relative;
}

/* Video & image fill */
#heroCarousel .carousel-item video,
#heroCarousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* Dark overlay */
#heroCarousel .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}


.login-page {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .login_container {
      background: rgba(0,0,0,0.8);
      padding: 40px;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.6);
      width: 100%;
      max-width: 400px;
      text-align: center;
    }

    .login_label {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .field_label {
      text-align: left;
      font-size: 14px;
      margin: 10px 0 5px;
    }

    .field_value input {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 4px;
      outline: none;
      font-size: 16px;
    }

    .error {
      font-size: 13px;
      color: #e50914;
      margin-top: 5px;
      display: none;
    }

    .btn-netflix {
      background: #e50914;
      color: #fff;
      border: none;
      padding: 12px;
      width: 100%;
      font-size: 18px;
      margin-top: 20px;
      cursor: pointer;
      border-radius: 4px;
      transition: background 0.3s ease;
    }
    .btn-netflix:hover {
      background: #f40612;
    }

    .signup-link {
      display: block;
      margin-top: 15px;
      color: #bbb;
      font-size: 14px;
    }
    .signup-link a {
      color: #fff;
      text-decoration: none;
      font-weight: bold;
    }
    .signup-link a:hover {
      color: #e50914;
    }

    /* Toggle Password */
    .password-wrapper {
      position: relative;
    }
    .toggle-password {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: #999;
      font-size: 14px;
    }
    .toggle-password:hover {
      color: #fff;
    }
	
	
	
	  body { margin: 0; font-family: 'Segoe UI', sans-serif; background: #121212; color: #fff; }

  .video-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
  }

  .video-section video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .video-section:hover video {
    transform: scale(1.05);
  }

  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
  }

  /* Centered Play Button */
  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    background: #ff3d00;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 0 25px rgba(255,61,0,0.6);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
  }

  .play-button:hover {
    background: #ff5e2b;
    transform: scale(1.1) translate(-50%, -50%);
    box-shadow: 0 0 45px rgba(255,94,43,0.8);
  }

  .play-button .play-icon {
    width: 0; 
    height: 0; 
    border-left: 18px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
  }

  .details-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(to right, rgba(18,18,18,1) 0%, rgba(18,18,18,0.95) 100%);
  }

  .details-inner {
    padding: 50px 70px;   /*  spacing inside details */
  }

  .details-inner h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #ff3d00;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
  }

  .details-inner p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #f0f0f0;
    margin-bottom: 15px;
  }

  .details-inner .info-label {
    font-weight: bold;
    color: #ff3d00;
  }

  @media (max-width: 768px) {
    .video-section, .details-section {
      height: auto;
    }
    .details-inner {
      padding: 30px;   /* smaller padding for mobile */
    }
    .details-inner h1 {
      font-size: 2rem;
    }
    .play-button {
      top: 50%;
      left: 50%;
    }
  }
   /* register css */
     .body {
  background: url("https://i.pinimg.com/1200x/19/8b/2f/198b2f01e73b905772279616eccc7c65.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: Arial, sans-serif;
  color: #fff;
  margin: 0;
}

    .signup-page {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .signup_container {
      background: rgba(0,0,0,0.85);
      padding: 40px;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.6);
      width: 100%;
      max-width: 400px;
      text-align: center;
    }

    .signup_label {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .field_label {
      text-align: left;
      font-size: 14px;
      margin: 10px 0 5px;
    }

    .field_value input {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 4px;
      outline: none;
      font-size: 16px;
    }

    .error {
      font-size: 13px;
      color: #e50914;
      margin-top: 5px;
    }

    .btn-netflix {
      background: #e50914;
      color: #fff;
      border: none;
      padding: 12px;
      width: 100%;
      font-size: 18px;
      margin-top: 20px;
      cursor: pointer;
      border-radius: 4px;
      transition: background 0.3s ease;
    }
    .btn-netflix:hover {
      background: #f40612;
    }

    .login-link {
      display: block;
      margin-top: 15px;
      color: #bbb;
      font-size: 14px;
    }
    .login-link a {
      color: #fff;
      text-decoration: none;
      font-weight: bold;
    }
    .login-link a:hover {
      color: #e50914;
    }
	html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Make page full height */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Main wrapper grows */
.container-fluid {
  flex: 1;
}

/* Footer styling */
.footer {
  margin-top: auto;
  background-color: #141414;  /* Dark background */
  color: #999;
  font-size: 16px;
  border-top: 1px solid #333;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
}

.footer span {
  color: #e50914; /* Netflix red */
  font-weight: bold;
}

/* Links */
.footer-links a {
  color: #999;
  text-decoration: none;
  transition: color 0.3s;
  font-size: 14px;
}

.footer-links a:hover {
  color: #e50914;
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 767px) {
  .footer {
    text-align: center;
  }
  .footer-links {
    justify-content: center;
    margin-top: 10px;
  }
}