/* General Styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #0d1b2a, #1b263b, #8d0801, #eab676);
  background-size: 400% 400%;
  animation: gradient-animation 15s ease infinite;
  color: #ffffff;
  position: relative;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Gradient Animation */
@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* General Styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #0d1b2a, #1b263b, #8d0801, #eab676);
  background-size: 400% 400%;
  animation: gradient-animation 15s ease infinite;
  color: #ffffff;
  position: relative;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Gradient Animation */
@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Title Styles */
h1 {
  font-family: 'Montserrat', sans-serif;  /* Elegant font */
  font-size: 3rem;  /* Slightly larger for emphasis */
  text-align: center;
  background: linear-gradient(90deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Gradient background */
  -webkit-background-clip: text;  /* Clip the gradient to the text */
  color: transparent;  /* Make the text itself transparent to show the gradient */
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);  /* Subtle shadow for depth */
  letter-spacing: 2px;  /* Slightly increased letter spacing */
  margin-bottom: 20px;  /* Add spacing below the title */
  animation: fadeIn 2s ease-in-out;  /* Subtle animation */
}

/* Animation for title */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

h1.small-heading {
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  color: #333;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 30px;
  opacity: 0.8;
  animation: fadeIn 2.5s ease-in-out;
}


/* Main Container */
.main-container {
  text-align: center;
  padding: 2rem;
  z-index: 2; /* Ensure above background posters */
}

/* Floating Posters */
.floating-poster {
  position: absolute;
  width: 100px;
  height: 150px;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  opacity: 0.4;
  animation: float-poster 20s infinite ease-in-out;
  pointer-events: none;
  z-index: 1; /* Behind main content */
}

/* Floating Poster Animation */
@keyframes float-poster {
  0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate(30px, -50px) scale(1.2); opacity: 0.6; }
  100% { transform: translate(-30px, 50px) scale(1); opacity: 0.4; }
}

/* Footer Section */
.footer {
  background-color: #1c1c1c;
  color: #cccccc;
  text-align: center;
  padding: 20px;
  font-size: 1rem;
  border-top: 2px solid #444;
  z-index: 2;
}

/* Sticky Footer (If Content is Short) */
body::after {
  content: '';
  display: block;
  height: 50px; /* Adjust based on footer height */
}

/* General Styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb, #a1c4fd, #c2e9fb, #b9fbc2);
  background-size: 400% 400%; /* Dynamic gradient effect */
  animation: gradient-animation 12s ease infinite;
  color: #ffffff;
  overflow: hidden;
  position: relative;
}

/* Gradient Animation */
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Floating Posters */
.floating-poster {
  position: absolute;
  width: 100px;
  height: 150px;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  opacity: 0.4; /* Blend into the background */
  z-index: 0; /* Behind main content */
  animation: float-poster 20s infinite ease-in-out;
  pointer-events: none; /* Not interactive */
}

/* Floating Poster Animation */
@keyframes float-poster {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(30px, -50px) scale(1.2);
    opacity: 0.6;
  }
  100% {
    transform: translate(-30px, 50px) scale(1);
    opacity: 0.4;
  }
}

/* Example Posters */
/* Example Posters */
.poster-1 { background-image: url('poster1.jpg'); top: 5%; left: 10%; }
.poster-2 { background-image: url('poster2.jpg'); top: 15%; left: 40%; }
.poster-3 { background-image: url('poster3.jpg'); top: 25%; left: 70%; }
.poster-4 { background-image: url('poster4.jpg'); top: 35%; left: 20%; }
.poster-5 { background-image: url('poster5.jpg'); top: 45%; left: 50%; }
.poster-6 { background-image: url('poster6.jpg'); top: 55%; left: 80%; }
.poster-7 { background-image: url('poster7.jpg'); top: 65%; left: 30%; }
.poster-8 { background-image: url('poster8.jpg'); top: 75%; left: 60%; }
.poster-9 { background-image: url('poster9.jpg'); top: 85%; left: 10%; }
.poster-10 { background-image: url('poster10.jpg'); top: 95%; left: 40%; }
.poster-11 { background-image: url('poster11.jpg'); top: 10%; left: 70%; }
.poster-12 { background-image: url('poster12.jpg'); top: 20%; left: 20%; }
.poster-13 { background-image: url('poster13.jpg'); top: 30%; left: 50%; }
.poster-14 { background-image: url('poster14.jpg'); top: 50%; left: 80%; }
.poster-15 { background-image: url('poster15.jpg'); top: 60%; left: 10%; }
.poster-16 { background-image: url('poster16.jpg'); top: 60%; left: 10%; }
/* Add more posters dynamically */

/* General Styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #0d1b2a, #1b263b, #303960, #16222a, #3a6073, #2c5364, #0d1b2a);
  background-size: 800% 800%; /* Enhance gradient movement */
  animation: cinematic-gradient-animation 25s ease infinite;
  color: #ffffff;
  overflow: hidden;
  position: relative;
}

/* Enhanced Cinematic Gradient Animation */
@keyframes cinematic-gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Subtle Light Streak Overlay */
.light-streak {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('light-streak.png'); /* Add a subtle light streak image */
  opacity: 0.05; /* Very subtle */
  animation: streak-move 30s linear infinite;
  pointer-events: none; /* Non-interactive */
  z-index: 1;
}

@keyframes streak-move {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Floating Poster Parallax Effect */
.floating-poster {
  position: absolute;
  width: 120px;
  height: 180px;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  opacity: 0.6;
  animation: float-poster 20s infinite ease-in-out;
  pointer-events: none;
  z-index: 2;
  transform: translateZ(0); /* Parallax smoothness */
}

.floating-poster:hover {
  transform: scale(1.1);
}

@keyframes float-poster {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(15px, -15px) scale(1.1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* Film Grain Overlay */
.film-grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('grain-overlay.png'); /* Subtle film grain texture */
  opacity: 0.03;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: soft-light; /* Soft blend with the background */
}
.poster-container {
  display: inline-block;
  margin: 10px;
}
.poster {
  width: 150px;
  height: auto;
}
.movie-info {
  text-align: center;
  font-size: 14px;
}
 /* General page setup */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  overflow-x: hidden;
  position: relative;
}

.main-container {
  position: relative;
  z-index: 2; /* Ensures content appears above the background posters */
}

/* Floating Posters */
.floating-poster {
  position: absolute;
  width: 150px;
  height: 225px;
  background-size: cover;
  background-position: center;
  animation: floatAnimation 20s linear infinite;
  z-index: 1; /* Ensure posters are behind the content */
}

.floating-poster.poster-1 { background-image: url('poster1.jpg'); top: 10%; left: 5%; }
.floating-poster.poster-2 { background-image: url('poster2.jpg'); top: 20%; left: 15%; }
.floating-poster.poster-3 { background-image: url('poster3.jpg'); top: 30%; left: 25%; }
.floating-poster.poster-4 { background-image: url('poster4.jpg'); top: 40%; left: 35%; }
/* Add additional posters with similar structure */

/* Main Content */
.header {
  position: relative;
  z-index: 2; /* Keeps the header in front */
  text-align: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.6); /* Optional to add background color */
}

.title {
  font-size: 2.5rem;
  color: #fff;
}

.subtitle {
  font-size: 1.2rem;
  color: #fff;
}

.content {
  padding: 20px;
  z-index: 2; /* Ensures this content stays above the floating posters */
}

.newsletter, .new-releases {
  position: relative;
  z-index: 2; /* Keeps these sections above the floating posters */
}

/* Background Poster */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  padding: 20px;
  z-index: 2; /* Keeps the grid in front of the background */
}

/* Keyframe animation for the floating posters */
@keyframes floatAnimation {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-50px) rotate(10deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* CSS styles for gradients, floating posters, and animations */

body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
    overflow-x: hidden;
}

header {
    text-align: center;
    padding: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

#poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
    margin: 0 auto;
    max-width: 1200px;
}

.poster-container {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.3s ease, filter 0.3s ease;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.6);
}

.poster-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    transition: transform 0.4s ease;
}

.poster-container .movie-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.poster-container:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
}

.poster-container:hover img {
    transform: scale(1.1);
}

.poster-container:hover .movie-info {
    opacity: 1;
    transform: translateY(0);
}

footer {
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.8);
    color: #aaa;
}

footer a {
    color: #ffd700;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #fff;
}
/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  color: #333;
}

.header {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 1rem;
}

.header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.header nav ul li a {
  color: #fff;
  text-decoration: none;
}

.header nav ul li a.active {
  font-weight: bold;
  text-decoration: underline;
}

.content {
  padding: 2rem;
  background: #fff;
}

.releases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.movie {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.movie:hover {
  transform: scale(1.05);
}

.movie img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  cursor: pointer;
}

.movie h3 a {
  text-decoration: none;
  color: #333;
}

.movie h3 a:hover {
  color: #007BFF;
}

.footer {
  text-align: center;
  padding: 1rem;
  background: #333;
  color: #fff;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .releases-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #f4f4f4;
  animation: backgroundColorChange 20s infinite;
  transition: background-color 1s ease-in-out;
}

@keyframes backgroundColorChange {
  0% { background-color: #0f0f0f; } /* Dark Charcoal */
  14% { background-color: #0c1c1c; } /* Midnight Blue */
  28% { background-color: #006994; } /* Ocean Blue */
  42% { background-color: #ff6f61; } /* Coral Orange */
  57% { background-color: #283593; } /* Royal Blue */
  71% { background-color: #ffd700; } /* Golden Yellow */
  85% { background-color: #8e44ad; } /* Purple */
  100% { background-color: #333; }   /* Dark Grey */
}

/* Header Section */
.header {
  background: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.header .title {
  font-size: 2rem;
}

.header .subtitle {
  font-size: 1rem;
  margin-top: 10px;
  color: #ccc;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

nav ul li a {
  color: #fff;
  font-size: 1rem;
}

nav ul li a:hover,
nav ul li a.active {
  font-weight: bold;
  text-decoration: underline;
}

/* Main Content Area */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 80vh;
}

.content {
  max-width: 1200px;
  width: 100%;
}

.releases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.movie {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease;
}

.movie:hover {
  transform: translateY(-5px);
}

.movie img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.movie h3 {
  font-size: 1.1rem;
  margin: 10px 0;
}

.movie p {
  font-size: 0.9rem;
  color: #555;
}

.movie a {
  color: #333;
}

.movie a:hover {
  color: #007BFF;
}

/* Floating Posters */
.floating-poster {
  position: absolute;
  width: 150px;
  height: 225px;
  background-size: cover;
  background-position: center;
  animation: floatAnimation 20s linear infinite;
  z-index: 1;
  transition: top 0.3s ease, left 0.3s ease;
}

/* Bouncing Effect */
@keyframes floatAnimation {
  0% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

/* Posters Specific Styles */
.floating-poster.poster-1 { background-image: url('poster1.jpg'); top: 10%; left: 5%; }
.floating-poster.poster-2 { background-image: url('poster2.jpg'); top: 20%; left: 15%; }
.floating-poster.poster-3 { background-image: url('poster3.jpg'); top: 30%; left: 25%; }
.floating-poster.poster-4 { background-image: url('poster4.jpg'); top: 40%; left: 35%; }
.floating-poster.poster-5 { background-image: url('poster5.jpg'); top: 50%; left: 45%; }
.floating-poster.poster-6 { background-image: url('poster6.jpg'); top: 60%; left: 55%; }
.floating-poster.poster-7 { background-image: url('poster7.jpg'); top: 70%; left: 65%; }
.floating-poster.poster-8 { background-image: url('poster8.jpg'); top: 80%; left: 75%; }
.floating-poster.poster-9 { background-image: url('poster9.jpg'); top: 90%; left: 85%; }
.floating-poster.poster-10 { background-image: url('poster10.jpg'); top: 15%; left: 90%; }
.floating-poster.poster-11 { background-image: url('poster11.jpg'); top: 25%; left: 20%; }
.floating-poster.poster-12 { background-image: url('poster12.jpg'); top: 35%; left: 10%; }
.floating-poster.poster-13 { background-image: url('poster13.jpg'); top: 45%; left: 30%; }
.floating-poster.poster-14 { background-image: url('poster14.jpg'); top: 55%; left: 50%; }
.floating-poster.poster-15 { background-image: url('poster15.jpg'); top: 65%; left: 60%; }

/* Footer Section */
.footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
}

.footer a {
  color: #fff;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer p {
  margin-top: 10px;
  color: #ccc;
}

/* Newsletter Signup */
.newsletter {
  padding: 2rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 30px 0;
  text-align: center;
}

.newsletter h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

#signup-form input {
  padding: 10px;
  margin-right: 10px;
  width: 250px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

#signup-form button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}

#signup-form button:hover {
  background-color: #0056b3;
}

/* Grid Layout for Movie Posters */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #f4f4f4;
  animation: backgroundColorChange 20s infinite;
  transition: background-color 1s ease-in-out;
}

@keyframes backgroundColorChange {
  0% { background-color: #0f0f0f; } /* Dark Charcoal */
  14% { background-color: #0c1c1c; } /* Midnight Blue */
  28% { background-color: #006994; } /* Ocean Blue */
  42% { background-color: #ff6f61; } /* Coral Orange */
  57% { background-color: #283593; } /* Royal Blue */
  71% { background-color: #ffd700; } /* Golden Yellow */
  85% { background-color: #8e44ad; } /* Purple */
  100% { background-color: #333; }   /* Dark Grey */
}

/* Header Section */
.header {
  background: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.header .title {
  font-size: 2rem;
}

.header .subtitle {
  font-size: 1rem;
  margin-top: 10px;
  color: #ccc;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

nav ul li a {
  color: #fff;
  font-size: 1rem;
}

nav ul li a:hover,
nav ul li a.active {
  font-weight: bold;
  text-decoration: underline;
}

/* Main Content Area */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 80vh;
}

.content {
  max-width: 1200px;
  width: 100%;
}

.releases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.movie {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease;
}

.movie:hover {
  transform: translateY(-5px);
}

.movie img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.movie h3 {
  font-size: 1.1rem;
  margin: 10px 0;
}

.movie p {
  font-size: 0.9rem;
  color: #555;
}

.movie a {
  color: #333;
}

.movie a:hover {
  color: #007BFF;
}

/* Floating Posters */
.floating-poster {
  position: absolute;
  width: 150px;
  height: 225px;
  background-size: cover;
  background-position: center;
  animation: floatAnimation 20s linear infinite;
  z-index: 1;
  transition: top 0.3s ease, left 0.3s ease;
}

/* Bouncing Effect */
@keyframes floatAnimation {
  0% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

/* Posters Specific Styles */
.floating-poster.poster-1 { background-image: url('poster1.jpg'); top: 10%; left: 5%; }
.floating-poster.poster-2 { background-image: url('poster2.jpg'); top: 20%; left: 15%; }
.floating-poster.poster-3 { background-image: url('poster3.jpg'); top: 30%; left: 25%; }
.floating-poster.poster-4 { background-image: url('poster4.jpg'); top: 40%; left: 35%; }
.floating-poster.poster-5 { background-image: url('poster5.jpg'); top: 50%; left: 45%; }
.floating-poster.poster-6 { background-image: url('poster6.jpg'); top: 60%; left: 55%; }
.floating-poster.poster-7 { background-image: url('poster7.jpg'); top: 70%; left: 65%; }
.floating-poster.poster-8 { background-image: url('poster8.jpg'); top: 80%; left: 75%; }
.floating-poster.poster-9 { background-image: url('poster9.jpg'); top: 90%; left: 85%; }
.floating-poster.poster-10 { background-image: url('poster10.jpg'); top: 15%; left: 90%; }
.floating-poster.poster-11 { background-image: url('poster11.jpg'); top: 25%; left: 20%; }
.floating-poster.poster-12 { background-image: url('poster12.jpg'); top: 35%; left: 10%; }
.floating-poster.poster-13 { background-image: url('poster13.jpg'); top: 45%; left: 30%; }
.floating-poster.poster-14 { background-image: url('poster14.jpg'); top: 55%; left: 50%; }
.floating-poster.poster-15 { background-image: url('poster15.jpg'); top: 65%; left: 60%; }
.floating-poster.poster-15 { background-image: url('poster16.jpg'); top: 65%; left: 60%; }



/* Footer Section */
.footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
}

.footer a {
  color: #fff;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer p {
  margin-top: 10px;
  color: #ccc;
}

/* Newsletter Signup */
.newsletter {
  padding: 2rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 30px 0;
  text-align: center;
}

.newsletter h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

#signup-form input {
  padding: 10px;
  margin-right: 10px;
  width: 250px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

#signup-form button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}

#signup-form button:hover {
  background-color: #0056b3;
}

/* Grid Layout for Movie Posters */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
/* General Styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  color: #ffffff;
  overflow-x: hidden;
  position: relative;
  animation: gradient-animation 15s ease infinite;
  background: linear-gradient(135deg, #0d1b2a, #1b263b, #8d0801, #eab676);
  background-size: 400% 400%;
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Main Container */
.main-container {
  text-align: center;
  padding: 2rem;
  z-index: 2;
}

/* Floating Posters */
.floating-poster {
  position: absolute;
  width: 120px;
  height: 180px;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  opacity: 0.4;
  animation: float-poster 20s infinite ease-in-out;
  pointer-events: none;
  z-index: 1;
}

@keyframes float-poster {
  0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate(30px, -50px) scale(1.2); opacity: 0.6; }
  100% { transform: translate(-30px, 50px) scale(1); opacity: 0.4; }
}

/* Example Posters - Positioning */
.poster-1 { background-image: url('poster1.jpg'); top: 5%; left: 10%; }
.poster-2 { background-image: url('poster2.jpg'); top: 15%; left: 40%; }
.poster-3 { background-image: url('poster3.jpg'); top: 25%; left: 70%; }
.poster-4 { background-image: url('poster4.jpg'); top: 35%; left: 20%; }
.poster-5 { background-image: url('poster5.jpg'); top: 50%; left: 30%; }
.poster-6 { background-image: url('poster6.jpg'); top: 60%; left: 60%; }
.poster-7 { background-image: url('poster7.jpg'); top: 70%; left: 40%; }
.poster-8 { background-image: url('poster8.jpg'); top: 80%; left: 10%; }

/* Footer Section */
.footer {
  background-color: #1c1c1c;
  color: #cccccc;
  text-align: center;
  padding: 20px;
  font-size: 1rem;
  border-top: 2px solid #444;
  z-index: 2;
}

/* Sticky Footer (If Content is Short) */
body::after {
  content: '';
  display: block;
  height: 50px;
}

/* Light Streak Animation */
.light-streak {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('light-streak.png');
  opacity: 0.05;
  animation: streak-move 30s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes streak-move {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Film Grain Overlay */
.film-grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('grain-overlay.png');
  opacity: 0.03;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

/* Responsive Styles for smaller screens */
@media (max-width: 768px) {
  .poster-1 { top: 10%; left: 15%; }
  .poster-2 { top: 20%; left: 45%; }
  .poster-3 { top: 30%; left: 75%; }
  .poster-4 { top: 40%; left: 30%; }
  .poster-5 { top: 50%; left: 10%; }
  .poster-6 { top: 60%; left: 80%; }
  .poster-7 { top: 70%; left: 50%; }
  .poster-8 { top: 80%; left: 20%; }
}

/* Hover Effects for Posters */
.floating-poster:hover {
  transform: scale(1.1) rotate(5deg);
  transition: transform 0.3s ease;
  opacity: 0.8;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Animating Text */
.animated-text {
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  animation: text-animation 3s ease infinite;
}

@keyframes text-animation {
  0% { opacity: 0; transform: translateY(-20px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(20px); }
}

/* Button Styles */
.button {
  padding: 10px 20px;
  background-color: #8d0801;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #eab676;
}

.button:focus {
  outline: none;
}
/* Global Styles */
body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #ff6f61, #6a5acd);
    color: #fff;
    margin: 0;
    padding: 0;
    text-align: center;
}

h1 {
    font-size: 3.5em;
    margin-top: 40px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.small-heading {
    font-size: 1.2em;  /* Increased font size for better readability */
    font-weight: normal;
    margin: 10px 0;
}


/* Anticipated Monthly Releases Section */
.anticipated {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
    padding: 20px;
    gap: 15px;
}

.anticipated .movie {
    position: relative;
    width: 240px;
    height: 350px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.anticipated .movie:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.anticipated .movie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.anticipated .movie:hover img {
    opacity: 0.7;
}

.movie-info {
    position: absolute;
    bottom: 20px;
    left: 10px;
    right: 10px;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Downloaded Releases Section */
.downloaded-releases {
    background-color: #0a0a0a; /* Dark background for a cinematic look */
    padding: 40px;
    color: white;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 40px;
}

.downloaded-title {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 20px;
    color: #f5f5f5;
    text-align: center;
}

/* Movie List Grid */
.movie-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Movie Cards */
.movie-card {
    background-color: #222222;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.movie-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.movie-card:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.movie-card:hover img {
    transform: scale(1.1); /* Slight zoom-in effect on image */
}

/* Movie Details */
.movie-details {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-size: 0.9em;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 5px;
    display: none; /* Hide by default */
}

.movie-card:hover .movie-details {
    display: block; /* Show movie details on hover */
}

/* Add Movie Form */
.add-movie-form {
    background-color: #222222;
    padding: 20px;
    border-radius: 10px;
    margin-top: 40px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.add-movie-form h3 {
    font-size: 1.5em;
    color: #f5f5f5;
    margin-bottom: 20px;
}

.add-movie-form label {
    font-size: 1em;
    color: #f5f5f5;
    margin-bottom: 10px;
    display: block;
}

.add-movie-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: none;
    background-color: #333333;
    color: white;
    font-size: 1em;
}

.add-movie-form button {
    padding: 10px 20px;
    background-color: #FF4B2B; /* A vibrant color for the button */
    border: none;
    color: white;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

.add-movie-form button:hover {
    background-color: #e84a3f;
}

/* Newsletter Section */
.newsletter {
    background-color: #444;
    text-align: center;
    padding: 40px 20px;
    margin-top: 50px;
    border-radius: 10px;
}

.newsletter h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #fff;
}

.newsletter p {
    font-size: 1.2em;
    color: #ccc;
}

.newsletter input[type="email"] {
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    width: 60%;
    margin-right: 10px;
}

.newsletter button {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #f39c12;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
}

.newsletter button:hover {
    background-color: #e67e22;
    transform: scale(1.1);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .anticipated {
        flex-direction: column;
        gap: 20px;
    }

    .downloaded .release {
        width: 90%;
    }

    .newsletter input[type="email"] {
        width: 80%;
    }
}
/* General layout for a cinematic, sleek look with bright tones */
body {
    font-family: 'Arial', sans-serif;
    color: #1c1c1c;  /* Dark text color for contrast */
    background-color: #f5f5f5;  /* Bright background for a fresh, light feel */
}

/* Header styles: sleek and minimalist, inspired by IMDb and Netflix */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #ff5733;  /* Bright red-orange for a vibrant header */
    color: white;
    border-radius: 8px;
}

header h1 {
    font-size: 1.8em;
    font-weight: bold;
    color: #fff;
}

nav {
    display: flex;
    gap: 20px;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1em;
}

nav a:hover {
    color: #ffcc00;  /* Bright yellow for hover effect */
}

/* Movie Grid (Pinterest-like card layout) */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Movie Card Design */
.movie-card {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.movie-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom: 3px solid #ff5733;
}

.movie-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.movie-card .details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.movie-card:hover .details {
    opacity: 1;
}

/* Title and Release Year */
.movie-card .details h2 {
    font-size: 1.2em;
    margin: 0;
    font-weight: bold;
}

.movie-card .details span {
    font-size: 0.9em;
}

/* Carousels for Trending and New Releases */
.carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px;
    margin-bottom: 30px;
    background-color: #eaf1f3;
    border-radius: 8px;
}

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

.carousel-item {
    width: 200px;
    height: 300px;
    background-color: #ffffff;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Styling for Trending Movies Section */
.trending-title {
    font-size: 2em;
    font-weight: bold;
    color: #ff5733;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

/* Footer Section: refined and cinematic with links */
footer {
    background-color: #ff5733;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

footer a {
    color: #ffcc00;
    text-decoration: none;
    margin: 0 10px;
}

footer a:hover {
    text-decoration: underline;
}

/* Carousels for Trending and New Releases */
.carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px;
    margin-bottom: 30px;
    background-color: #eaf1f3;
    border-radius: 8px;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    width: 200px;
    height: 300px;
    background-color: #ffffff;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Image scaling and ease-in/out effect for a more dynamic hover */
.carousel-item:hover {
    transform: scale(1.1) rotate(3deg); /* Adds a slight rotation for a dynamic feel */
    opacity: 0.9; /* Slight opacity decrease on hover for visual depth */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */
    transition: all 0.4s ease-in-out;
}

/* Image hover effect with additional glow */
.carousel-item:hover img {
    filter: brightness(1.2) saturate(1.3); /* Brightens the image on hover */
    box-shadow: 0 0 15px rgba(255, 87, 51, 0.8); /* Adding a cinematic glow effect */
}

/* Animating the scaling and smooth out effect */
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-in-out;
}

.carousel-item:hover img {
    transform: scale(1.05); /* Smooth zoom-in effect */
}

/* Optional: Add a slight bouncing effect when hover starts */
.carousel-item:hover {
    animation: bounce 0.4s ease-in-out forwards;
}

/* Bounce effect */
@keyframes bounce {
    0% {
        transform: scale(1) translateY(0);
    }
    30% {
        transform: scale(1.05) translateY(-5px);
    }
    50% {
        transform: scale(1) translateY(0);
    }
}
.instagram-link {
  color: #E1306C; /* Instagram pink */
  text-decoration: none;
  font-weight: bold;
}

.instagram-link:hover {
  text-decoration: underline;
  color: #c13584; /* Slightly darker shade on hover */
}

/* Currently Watching INSTAGRAM UPDATE */
.instagram-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, rgba(255, 100, 120, 0.8), rgba(255, 50, 100, 1));
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 4px 15px rgba(255, 50, 100, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  margin-bottom: 10px;
  cursor: pointer;
}

.instagram-link img {
  width: 60%;
  height: 60%;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.instagram-link:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(255, 50, 100, 0.6);
  background: radial-gradient(circle, rgba(255, 70, 130, 0.8), rgba(255, 100, 180, 1));
}

.movie-header {
  text-align: center;
  margin-bottom: 10px;
}

.movie-info {
  margin-top: 10px;
  font-size: 14px;
  color: #777;
}

.movie-info span[contenteditable="true"] {
  color: #333;
  font-weight: bold;
}

.movie-info p {
  color: #333;
  font-size: 16px;
}
/* General Styling for Currently Watching Section */
.currently-watching {
    background: linear-gradient(45deg, #FF6347, #FF4500, #FF8C00); /* Vibrant, warm gradient */
    padding: 40px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin-top: 30px;
}

.currently-watching h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    color: #fff;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.currently-watching h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    color: #f5f5f5;
    margin-bottom: 30px;
    opacity: 0.8;
}

/* Movie Container */
.movie-container {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
    flex-wrap: wrap;
}

/* Individual Movie Styling */
.movie {
    width: 250px;
    height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    transition: transform 0.5s ease, box-shadow 0.3s ease;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5); /* Translucent background for effect */
}

.movie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 15px;
}

/* Hover Effects for Movies */
.movie:hover {
    transform: translateY(-10px) scale(1.05); /* Slight lift and scale on hover */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}

/* Hover Effect for Movie Image */
.movie:hover img {
    transform: scale(1.1); /* Zoom in on hover */
    filter: brightness(0.8); /* Darken slightly */
}

/* Movie Info - Who’s Watching */
.movie p {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-family: 'Arial', sans-serif;
    color: white;
    font-size: 1.1rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    margin: 0;
}

/* Animated Glow on "Who's Watching" text */
.movie:hover p {
    color: #FF6347;
    text-shadow: 0 0 15px rgba(255, 99, 71, 1), 0 0 20px rgba(255, 69, 0, 1); /* Fiery glow */
}

/* "Who's Watching" span with interaction effect */
.movie span {
    font-weight: bold;
    color: #FFDB00;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .movie-container {
        flex-direction: column;
        align-items: center;
    }
    .movie {
        width: 80%;
        margin-bottom: 20px;
    }
}
/* Styling for Instagram Link Above Movie Poster */
.instagram-link {
    position: absolute;
    top: -20px; /* Position above the movie poster */
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1; /* Ensure the link is on top */
}

.instagram-link img {
    width: 70%;
    height: 70%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Hover Effects for Instagram Logo */
.instagram-link:hover {
    transform: scale(1.2); /* Zoom in the logo */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* Styling for Movie Poster */
.movie {
    position: relative;
    width: 250px;
    height: 400px;
    margin: 20px;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.3s ease;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5); /* Translucent background for effect */
}

.movie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 15px;
}

/* Hover Effects for Movies */
.movie:hover {
    transform: translateY(-10px) scale(1.05); /* Slight lift and scale on hover */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}

/* Hover Effect for Movie Image */
.movie:hover img {
    transform: scale(1.1); /* Zoom in on hover */
    filter: brightness(0.8); /* Darken slightly */
}

/* Movie Info - Who’s Watching */
.movie-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-family: 'Arial', sans-serif;
    color: white;
    font-size: 1.1rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    margin: 0;
    transition: opacity 0.3s ease;
    opacity: 0; /* Initially hidden */
}

/* Reveal Movie Info on Hover */
.movie:hover .movie-info {
    opacity: 1;
}

/* Who's Watching Details */
.movie-info p {
    margin: 5px 0;
}

/* Movie Info Date and Time Styling */
.movie-info p span {
    font-weight: bold;
    color: #FFDB00;
}

/* Animated Glow on "Who's Watching" text */
.movie:hover .movie-info p {
    color: #FF6347;
    text-shadow: 0 0 15px rgba(255, 99, 71, 1), 0 0 20px rgba(255, 69, 0, 1); /* Fiery glow */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .movie-container {
        flex-direction: column;
        align-items: center;
    }
    .movie {
        width: 80%;
        margin-bottom: 20px;
    }
}
/* Styling for the Currently Watching Section */
.currently-watching {
    background: linear-gradient(120deg, rgba(0, 0, 0, 0.8), rgba(255, 97, 97, 0.3)); /* Cinematic background */
    padding: 60px 20px;
    text-align: center;
    color: #f1f1f1;
    position: relative;
}

.currently-watching h2 {
    font-size: 2.8rem;
    color: #ff6347;
    text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.6);
}

.currently-watching h3 {
    font-size: 1.3rem;
    color: #f1f1f1;
    margin-bottom: 40px;
}

/* Movie Container */
.movie-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* Movie Block */
.movie {
    position: relative;
    width: 250px;
    height: 380px;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Instagram Logo Above the Movie (Smaller & Above Poster) */
.movie-logo {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.movie-logo img {
    width: 60%;
    height: 60%;
}

/* Instagram Hover Effect (Creative Reaction) */
.movie-logo:hover {
    transform: scale(1.2) rotate(360deg); /* Rotation + Scaling */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}

/* Movie Poster */
.movie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

/* Movie Info Section */
.movie-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-size: 1.2rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 8px;
}

/* Reveal Info on Hover */
.movie:hover .movie-info {
    opacity: 1;
}

/* Hover Effects for Movies */
.movie:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}

/* Movie Info - Who's Watching */
.movie-info span {
    font-weight: bold;
    color: #ffdb00;
}

/* Responsive Layout */
@media (max-width: 768px) {
    .movie-container {
        flex-direction: column;
        align-items: center;
    }
    .movie {
        width: 80%;
        margin-bottom: 30px;
    }
}
/* General Styles */
.contact-info {
    text-align: center;
    position: relative;
    margin-top: 50px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
}

/* Gift box that toggles the contact details */
.gift-box {
    font-size: 60px;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    animation: shake 1s ease-in-out infinite; /* Shaking effect */
}

.gift-box:hover {
    transform: scale(1.2);
    color: #f76c6c;
}

/* Shaking animation for the gift box */
@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Contact Details styling */
.contact-details {
    display: none;
    margin-top: 20px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: #333;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

.contact-details.show {
    display: block;
    animation: burstOpen 1s ease-out forwards; /* Burst open effect */
}

@keyframes burstOpen {
    0% {
        opacity: 0;
        transform: scale(0) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Contact Details Title */
.contact-details h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #ff6347;
    font-weight: bold;
}

/* List Style for the contact icons */
.contact-details ul {
    list-style-type: none;
    padding: 0;
}

.contact-details li {
    font-size: 18px;
    margin: 15px 0;
    color: #555;
    display: flex;
    align-items: center;
}

.contact-details a {
    text-decoration: none;
    display: flex;
    align-items: center;
    color: #333;
    transition: all 0.3s ease;
}

.contact-details a:hover {
    color: #f76c6c;
    transform: scale(1.1);
}

/* Contact Icons */
.contact-icon img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.contact-icon.instagram img:hover {
    transform: rotate(20deg);
}

.contact-icon.snapchat img:hover {
    transform: scale(1.1);
}

.contact-icon.whatsapp img:hover {
    transform: scale(1.2);
}

.contact-text {
    margin-top: 20px;
    font-size: 18px;
    color: #555;
    font-weight: bold;
}

/* Responsive Design for Mobile */
@media (max-width: 600px) {
    .gift-box {
        font-size: 50px;
    }

    .contact-details h2 {
        font-size: 20px;
    }

    .contact-details li {
        font-size: 16px;
    }
}
html, body {
  height: 100%;
  overflow: auto;
}
.container {
  overflow: visible;
  position: relative;
}
.fixed-header {
  height: 50px; /* Adjust this value based on your layout */
  position: fixed;
  top: 0;
  width: 100%;
}
.floating-poster {
  position: absolute; /* or fixed */
  top: 50px; /* Adjust this value */
  left: 50px; /* Adjust this value */
  overflow: visible;
}
.parent-container {
  overflow: visible; /* Change this to allow the child elements to show */
}
#specific-container .floating-poster {
  position: absolute;
  z-index: 1000;
  display: block; /* Ensure it's not set to display: none */
}
.gift-box {
  display: none;
  transition: all 0.3s ease;
}

.gift-box.open {
  display: block;
}

/* General Styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #0d1b2a, #1b263b, #303960, #16222a, #3a6073, #2c5364, #0d1b2a);
  background-size: 800% 800%; /* Enhance gradient movement */
  animation: cinematic-gradient-animation 25s ease infinite;
  color: #ffffff;
  overflow: hidden;
  position: relative;
}

/* Enhanced Cinematic Gradient Animation */
@keyframes cinematic-gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Subtle Light Streak Overlay */
.light-streak {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('light-streak.png'); /* Add a subtle light streak image */
  opacity: 0.05; /* Very subtle */
  animation: streak-move 30s linear infinite;
  pointer-events: none; /* Non-interactive */
  z-index: 1;
}

@keyframes streak-move {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Floating Poster Parallax Effect */
.floating-poster {
  position: absolute;
  width: 120px;
  height: 180px;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  opacity: 0.6;
  animation: float-poster 20s infinite ease-in-out;
  pointer-events: none;
  z-index: 2;
  transform: translateZ(0); /* Parallax smoothness */
}

.floating-poster:hover {
  transform: scale(1.1);
}

@keyframes float-poster {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(15px, -15px) scale(1.1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* Film Grain Overlay */
.film-grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('grain-overlay.png'); /* Subtle film grain texture */
  opacity: 0.03;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: soft-light; /* Soft blend with the background */
}
.poster-container {
  display: inline-block;
  margin: 10px;
}
.poster {
  width: 150px;
  height: auto;
}
.movie-info {
  text-align: center;
  font-size: 14px;
}
 /* General page setup */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  overflow-x: hidden;
  position: relative;
}

.main-container {
  position: relative;
  z-index: 2; /* Ensures content appears above the background posters */
}

/* Floating Posters */
.floating-poster {
  position: absolute;
  width: 150px;
  height: 225px;
  background-size: cover;
  background-position: center;
  animation: floatAnimation 20s linear infinite;
  z-index: 1; /* Ensure posters are behind the content */
}

.floating-poster.poster-1 { background-image: url('poster1.jpg'); top: 10%; left: 5%; }
.floating-poster.poster-2 { background-image: url('poster2.jpg'); top: 20%; left: 15%; }
.floating-poster.poster-3 { background-image: url('poster3.jpg'); top: 30%; left: 25%; }
.floating-poster.poster-4 { background-image: url('poster4.jpg'); top: 40%; left: 35%; }
/* Add additional posters with similar structure */

/* Main Content */
.header {
  position: relative;
  z-index: 2; /* Keeps the header in front */
  text-align: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.6); /* Optional to add background color */
}

.title {
  font-size: 2.5rem;
  color: #fff;
}

.subtitle {
  font-size: 1.2rem;
  color: #fff;
}

.content {
  padding: 20px;
  z-index: 2; /* Ensures this content stays above the floating posters */
}

.newsletter, .new-releases {
  position: relative;
  z-index: 2; /* Keeps these sections above the floating posters */
}

/* Background Poster */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  padding: 20px;
  z-index: 2; /* Keeps the grid in front of the background */
}

/* Keyframe animation for the floating posters */
@keyframes floatAnimation {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-50px) rotate(10deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* CSS styles for gradients, floating posters, and animations */

body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
    overflow-x: hidden;
}

header {
    text-align: center;
    padding: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

#poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
    margin: 0 auto;
    max-width: 1200px;
}

.poster-container {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.3s ease, filter 0.3s ease;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.6);
}

.poster-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    transition: transform 0.4s ease;
}

.poster-container .movie-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.poster-container:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
}

.poster-container:hover img {
    transform: scale(1.1);
}

.poster-container:hover .movie-info {
    opacity: 1;
    transform: translateY(0);
}

footer {
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.8);
    color: #aaa;
}

footer a {
    color: #ffd700;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #fff;
}
/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  color: #333;
}

.header {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 1rem;
}

.header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.header nav ul li a {
  color: #fff;
  text-decoration: none;
}

.header nav ul li a.active {
  font-weight: bold;
  text-decoration: underline;
}

.content {
  padding: 2rem;
  background: #fff;
}

.releases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.movie {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.movie:hover {
  transform: scale(1.05);
}

.movie img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  cursor: pointer;
}

.movie h3 a {
  text-decoration: none;
  color: #333;
}

.movie h3 a:hover {
  color: #007BFF;
}

.footer {
  text-align: center;
  padding: 1rem;
  background: #333;
  color: #fff;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .releases-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #f4f4f4;
  animation: backgroundColorChange 20s infinite;
  transition: background-color 1s ease-in-out;
}

@keyframes backgroundColorChange {
  0% { background-color: #0f0f0f; } /* Dark Charcoal */
  14% { background-color: #0c1c1c; } /* Midnight Blue */
  28% { background-color: #006994; } /* Ocean Blue */
  42% { background-color: #ff6f61; } /* Coral Orange */
  57% { background-color: #283593; } /* Royal Blue */
  71% { background-color: #ffd700; } /* Golden Yellow */
  85% { background-color: #8e44ad; } /* Purple */
  100% { background-color: #333; }   /* Dark Grey */
}

/* Header Section */
.header {
  background: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.header .title {
  font-size: 2rem;
}

.header .subtitle {
  font-size: 1rem;
  margin-top: 10px;
  color: #ccc;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

nav ul li a {
  color: #fff;
  font-size: 1rem;
}

nav ul li a:hover,
nav ul li a.active {
  font-weight: bold;
  text-decoration: underline;
}

/* Main Content Area */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 80vh;
}

.content {
  max-width: 1200px;
  width: 100%;
}

.releases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.movie {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease;
}

.movie:hover {
  transform: translateY(-5px);
}

.movie img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.movie h3 {
  font-size: 1.1rem;
  margin: 10px 0;
}

.movie p {
  font-size: 0.9rem;
  color: #555;
}

.movie a {
  color: #333;
}

.movie a:hover {
  color: #007BFF;
}

/* Floating Posters */
.floating-poster {
  position: absolute;
  width: 150px;
  height: 225px;
  background-size: cover;
  background-position: center;
  animation: floatAnimation 20s linear infinite;
  z-index: 1;
  transition: top 0.3s ease, left 0.3s ease;
}

/* Bouncing Effect */
@keyframes floatAnimation {
  0% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

/* Posters Specific Styles */
.floating-poster.poster-1 { background-image: url('images/poster1.jpg'); top: 10%; left: 5%; }
.floating-poster.poster-2 { background-image: url('images/poster2.jpg'); top: 20%; left: 15%; }
.floating-poster.poster-3 { background-image: url('images/poster3.jpg'); top: 30%; left: 25%; }
.floating-poster.poster-4 { background-image: url('images/poster4.jpg'); top: 40%; left: 35%; }
.floating-poster.poster-5 { background-image: url('images/poster5.jpg'); top: 50%; left: 45%; }
.floating-poster.poster-6 { background-image: url('images/poster6.jpg'); top: 60%; left: 55%; }
.floating-poster.poster-7 { background-image: url('images/poster7.jpg'); top: 70%; left: 65%; }
.floating-poster.poster-8 { background-image: url('images/poster8.jpg'); top: 80%; left: 75%; }
.floating-poster.poster-9 { background-image: url('images/poster9.jpg'); top: 90%; left: 85%; }
.floating-poster.poster-10 { background-image: url('images/poster10.jpg'); top: 15%; left: 90%; }
.floating-poster.poster-11 { background-image: url('images/poster11.jpg'); top: 25%; left: 20%; }
.floating-poster.poster-12 { background-image: url('images/poster12.jpg'); top: 35%; left: 10%; }
.floating-poster.poster-13 { background-image: url('images/poster13.jpg'); top: 45%; left: 30%; }
.floating-poster.poster-14 { background-image: url('images/poster14.jpg'); top: 55%; left: 50%; }
.floating-poster.poster-15 { background-image: url('images/poster15.jpg'); top: 65%; left: 60%; }

.floating-poster {
  position: absolute;
  width: 150px;
  height: 225px;
  background-size: cover;
  background-position: center;
  animation: floatAnimation 20s linear infinite;
}

@keyframes floatAnimation {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

/* Footer Section */
.footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
}

.footer a {
  color: #fff;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer p {
  margin-top: 10px;
  color: #ccc;
}

/* Newsletter Signup */
.newsletter {
  padding: 2rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 30px 0;
  text-align: center;
}

.newsletter h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

#signup-form input {
  padding: 10px;
  margin-right: 10px;
  width: 250px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

#signup-form button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}

#signup-form button:hover {
  background-color: #0056b3;
}

/* Grid Layout for Movie Posters */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #f4f4f4;
  animation: backgroundColorChange 20s infinite;
  transition: background-color 1s ease-in-out;
}

@keyframes backgroundColorChange {
  0% { background-color: #0f0f0f; } /* Dark Charcoal */
  14% { background-color: #0c1c1c; } /* Midnight Blue */
  28% { background-color: #006994; } /* Ocean Blue */
  42% { background-color: #ff6f61; } /* Coral Orange */
  57% { background-color: #283593; } /* Royal Blue */
  71% { background-color: #ffd700; } /* Golden Yellow */
  85% { background-color: #8e44ad; } /* Purple */
  100% { background-color: #333; }   /* Dark Grey */
}

/* Header Section */
.header {
  background: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.header .title {
  font-size: 2rem;
}

.header .subtitle {
  font-size: 1rem;
  margin-top: 10px;
  color: #ccc;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

nav ul li a {
  color: #fff;
  font-size: 1rem;
}

nav ul li a:hover,
nav ul li a.active {
  font-weight: bold;
  text-decoration: underline;
}

/* Main Content Area */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 80vh;
}

.content {
  max-width: 1200px;
  width: 100%;
}

.releases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.movie {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease;
}

.movie:hover {
  transform: translateY(-5px);
}

.movie img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.movie h3 {
  font-size: 1.1rem;
  margin: 10px 0;
}

.movie p {
  font-size: 0.9rem;
  color: #555;
}

.movie a {
  color: #333;
}

.movie a:hover {
  color: #007BFF;
}

/* Floating Posters */
.floating-poster {
  position: absolute;
  width: 150px;
  height: 225px;
  background-size: cover;
  background-position: center;
  animation: floatAnimation 20s linear infinite;
  z-index: 1;
  transition: top 0.3s ease, left 0.3s ease;
}

/* Bouncing Effect */
@keyframes floatAnimation {
  0% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

/* Posters Specific Styles */
.floating-poster.poster-1 { background-image: url('poster1.jpg'); top: 10%; left: 5%; }
.floating-poster.poster-2 { background-image: url('poster2.jpg'); top: 20%; left: 15%; }
.floating-poster.poster-3 { background-image: url('poster3.jpg'); top: 30%; left: 25%; }
.floating-poster.poster-4 { background-image: url('poster4.jpg'); top: 40%; left: 35%; }
.floating-poster.poster-5 { background-image: url('poster5.jpg'); top: 50%; left: 45%; }
.floating-poster.poster-6 { background-image: url('poster6.jpg'); top: 60%; left: 55%; }
.floating-poster.poster-7 { background-image: url('poster7.jpg'); top: 70%; left: 65%; }
.floating-poster.poster-8 { background-image: url('poster8.jpg'); top: 80%; left: 75%; }
.floating-poster.poster-9 { background-image: url('poster9.jpg'); top: 90%; left: 85%; }
.floating-poster.poster-10 { background-image: url('poster10.jpg'); top: 15%; left: 90%; }
.floating-poster.poster-11 { background-image: url('poster11.jpg'); top: 25%; left: 20%; }
.floating-poster.poster-12 { background-image: url('poster12.jpg'); top: 35%; left: 10%; }
.floating-poster.poster-13 { background-image: url('poster13.jpg'); top: 45%; left: 30%; }
.floating-poster.poster-14 { background-image: url('poster14.jpg'); top: 55%; left: 50%; }
.floating-poster.poster-15 { background-image: url('poster15.jpg'); top: 65%; left: 60%; }
.floating-poster.poster-15 { background-image: url('poster16.jpg'); top: 65%; left: 60%; }



/* Footer Section */
.footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
}

.footer a {
  color: #fff;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer p {
  margin-top: 10px;
  color: #ccc;
}

/* Newsletter Signup */
.newsletter {
  padding: 2rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 30px 0;
  text-align: center;
}

.newsletter h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

#signup-form input {
  padding: 10px;
  margin-right: 10px;
  width: 250px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

#signup-form button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}

#signup-form button:hover {
  background-color: #0056b3;
}

/* Grid Layout for Movie Posters */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
/* General Styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  color: #ffffff;
  overflow-x: hidden;
  position: relative;
  animation: gradient-animation 15s ease infinite;
  background: linear-gradient(135deg, #0d1b2a, #1b263b, #8d0801, #eab676);
  background-size: 400% 400%;
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Main Container */
.main-container {
  text-align: center;
  padding: 2rem;
  z-index: 2;
}

/* Floating Posters */
.floating-poster {
  position: absolute;
  width: 120px;
  height: 180px;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
  opacity: 0.4;
  animation: float-poster 20s infinite ease-in-out;
  pointer-events: none;
  z-index: 1;
}

@keyframes float-poster {
  0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate(30px, -50px) scale(1.2); opacity: 0.6; }
  100% { transform: translate(-30px, 50px) scale(1); opacity: 0.4; }
}

/* Example Posters - Positioning */
.poster-1 { background-image: url('poster1.jpg'); top: 5%; left: 10%; }
.poster-2 { background-image: url('poster2.jpg'); top: 15%; left: 40%; }
.poster-3 { background-image: url('poster3.jpg'); top: 25%; left: 70%; }
.poster-4 { background-image: url('poster4.jpg'); top: 35%; left: 20%; }
.poster-5 { background-image: url('poster5.jpg'); top: 50%; left: 30%; }
.poster-6 { background-image: url('poster6.jpg'); top: 60%; left: 60%; }
.poster-7 { background-image: url('poster7.jpg'); top: 70%; left: 40%; }
.poster-8 { background-image: url('poster8.jpg'); top: 80%; left: 10%; }

/* Footer Section */
.footer {
  background-color: #1c1c1c;
  color: #cccccc;
  text-align: center;
  padding: 20px;
  font-size: 1rem;
  border-top: 2px solid #444;
  z-index: 2;
}

/* Sticky Footer (If Content is Short) */
body::after {
  content: '';
  display: block;
  height: 50px;
}

/* Light Streak Animation */
.light-streak {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('light-streak.png');
  opacity: 0.05;
  animation: streak-move 30s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes streak-move {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Film Grain Overlay */
.film-grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('grain-overlay.png');
  opacity: 0.03;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

/* Responsive Styles for smaller screens */
@media (max-width: 768px) {
  .poster-1 { top: 10%; left: 15%; }
  .poster-2 { top: 20%; left: 45%; }
  .poster-3 { top: 30%; left: 75%; }
  .poster-4 { top: 40%; left: 30%; }
  .poster-5 { top: 50%; left: 10%; }
  .poster-6 { top: 60%; left: 80%; }
  .poster-7 { top: 70%; left: 50%; }
  .poster-8 { top: 80%; left: 20%; }
}

/* Hover Effects for Posters */
.floating-poster:hover {
  transform: scale(1.1) rotate(5deg);
  transition: transform 0.3s ease;
  opacity: 0.8;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Animating Text */
.animated-text {
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  animation: text-animation 3s ease infinite;
}

@keyframes text-animation {
  0% { opacity: 0; transform: translateY(-20px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(20px); }
}

/* Button Styles */
.button {
  padding: 10px 20px;
  background-color: #8d0801;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #eab676;
}

.button:focus {
  outline: none;
}
/* Global Styles */
body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #ff6f61, #6a5acd);
    color: #fff;
    margin: 0;
    padding: 0;
    text-align: center;
}

h1 {
    font-size: 3.5em;
    margin-top: 40px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.small-heading {
    font-size: 1.2em;  /* Increased font size for better readability */
    font-weight: normal;
    margin: 10px 0;
}


/* Anticipated Monthly Releases Section */
.anticipated {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
    padding: 20px;
    gap: 15px;
}

.anticipated .movie {
    position: relative;
    width: 240px;
    height: 350px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.anticipated .movie:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.anticipated .movie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.anticipated .movie:hover img {
    opacity: 0.7;
}

.movie-info {
    position: absolute;
    bottom: 20px;
    left: 10px;
    right: 10px;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Downloaded Releases Section */
.downloaded-releases {
    background-color: #0a0a0a; /* Dark background for a cinematic look */
    padding: 40px;
    color: white;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 40px;
}

.downloaded-title {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 20px;
    color: #f5f5f5;
    text-align: center;
}

/* Movie List Grid */
.movie-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Movie Cards */
.movie-card {
    background-color: #222222;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.movie-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.movie-card:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.movie-card:hover img {
    transform: scale(1.1); /* Slight zoom-in effect on image */
}

/* Movie Details */
.movie-details {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-size: 0.9em;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 5px;
    display: none; /* Hide by default */
}

.movie-card:hover .movie-details {
    display: block; /* Show movie details on hover */
}

/* Add Movie Form */
.add-movie-form {
    background-color: #222222;
    padding: 20px;
    border-radius: 10px;
    margin-top: 40px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.add-movie-form h3 {
    font-size: 1.5em;
    color: #f5f5f5;
    margin-bottom: 20px;
}

.add-movie-form label {
    font-size: 1em;
    color: #f5f5f5;
    margin-bottom: 10px;
    display: block;
}

.add-movie-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: none;
    background-color: #333333;
    color: white;
    font-size: 1em;
}

.add-movie-form button {
    padding: 10px 20px;
    background-color: #FF4B2B; /* A vibrant color for the button */
    border: none;
    color: white;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

.add-movie-form button:hover {
    background-color: #e84a3f;
}

/* Newsletter Section */
.newsletter {
    background-color: #444;
    text-align: center;
    padding: 40px 20px;
    margin-top: 50px;
    border-radius: 10px;
}

.newsletter h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #fff;
}

.newsletter p {
    font-size: 1.2em;
    color: #ccc;
}

.newsletter input[type="email"] {
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    width: 60%;
    margin-right: 10px;
}

.newsletter button {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #f39c12;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
}

.newsletter button:hover {
    background-color: #e67e22;
    transform: scale(1.1);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .anticipated {
        flex-direction: column;
        gap: 20px;
    }

    .downloaded .release {
        width: 90%;
    }

    .newsletter input[type="email"] {
        width: 80%;
    }
}
/* General layout for a cinematic, sleek look with bright tones */
body {
    font-family: 'Arial', sans-serif;
    color: #1c1c1c;  /* Dark text color for contrast */
    background-color: #f5f5f5;  /* Bright background for a fresh, light feel */
}

/* Header styles: sleek and minimalist, inspired by IMDb and Netflix */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #ff5733;  /* Bright red-orange for a vibrant header */
    color: white;
    border-radius: 8px;
}

header h1 {
    font-size: 1.8em;
    font-weight: bold;
    color: #fff;
}

nav {
    display: flex;
    gap: 20px;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1em;
}

nav a:hover {
    color: #ffcc00;  /* Bright yellow for hover effect */
}

/* Movie Grid (Pinterest-like card layout) */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Movie Card Design */
.movie-card {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.movie-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom: 3px solid #ff5733;
}

.movie-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.movie-card .details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.movie-card:hover .details {
    opacity: 1;
}

/* Title and Release Year */
.movie-card .details h2 {
    font-size: 1.2em;
    margin: 0;
    font-weight: bold;
}

.movie-card .details span {
    font-size: 0.9em;
}

/* Carousels for Trending and New Releases */
.carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px;
    margin-bottom: 30px;
    background-color: #eaf1f3;
    border-radius: 8px;
}

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

.carousel-item {
    width: 200px;
    height: 300px;
    background-color: #ffffff;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Styling for Trending Movies Section */
.trending-title {
    font-size: 2em;
    font-weight: bold;
    color: #ff5733;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

/* Footer Section: refined and cinematic with links */
footer {
    background-color: #ff5733;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

footer a {
    color: #ffcc00;
    text-decoration: none;
    margin: 0 10px;
}

footer a:hover {
    text-decoration: underline;
}

/* Carousels for Trending and New Releases */
.carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px;
    margin-bottom: 30px;
    background-color: #eaf1f3;
    border-radius: 8px;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    width: 200px;
    height: 300px;
    background-color: #ffffff;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Image scaling and ease-in/out effect for a more dynamic hover */
.carousel-item:hover {
    transform: scale(1.1) rotate(3deg); /* Adds a slight rotation for a dynamic feel */
    opacity: 0.9; /* Slight opacity decrease on hover for visual depth */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */
    transition: all 0.4s ease-in-out;
}

/* Image hover effect with additional glow */
.carousel-item:hover img {
    filter: brightness(1.2) saturate(1.3); /* Brightens the image on hover */
    box-shadow: 0 0 15px rgba(255, 87, 51, 0.8); /* Adding a cinematic glow effect */
}

/* Animating the scaling and smooth out effect */
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-in-out;
}

.carousel-item:hover img {
    transform: scale(1.05); /* Smooth zoom-in effect */
}

/* Optional: Add a slight bouncing effect when hover starts */
.carousel-item:hover {
    animation: bounce 0.4s ease-in-out forwards;
}

/* Bounce effect */
@keyframes bounce {
    0% {
        transform: scale(1) translateY(0);
    }
    30% {
        transform: scale(1.05) translateY(-5px);
    }
    50% {
        transform: scale(1) translateY(0);
    }
}
.instagram-link {
  color: #E1306C; /* Instagram pink */
  text-decoration: none;
  font-weight: bold;
}

.instagram-link:hover {
  text-decoration: underline;
  color: #c13584; /* Slightly darker shade on hover */
}

/* Currently Watching INSTAGRAM UPDATE */
.instagram-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, rgba(255, 100, 120, 0.8), rgba(255, 50, 100, 1));
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 4px 15px rgba(255, 50, 100, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  margin-bottom: 10px;
  cursor: pointer;
}

.instagram-link img {
  width: 60%;
  height: 60%;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.instagram-link:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(255, 50, 100, 0.6);
  background: radial-gradient(circle, rgba(255, 70, 130, 0.8), rgba(255, 100, 180, 1));
}

.movie-header {
  text-align: center;
  margin-bottom: 10px;
}

.movie-info {
  margin-top: 10px;
  font-size: 14px;
  color: #777;
}

.movie-info span[contenteditable="true"] {
  color: #333;
  font-weight: bold;
}

.movie-info p {
  color: #333;
  font-size: 16px;
}
/* General Styling for Currently Watching Section */
.currently-watching {
    background: linear-gradient(45deg, #FF6347, #FF4500, #FF8C00); /* Vibrant, warm gradient */
    padding: 40px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin-top: 30px;
}

.currently-watching h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    color: #fff;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.currently-watching h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    color: #f5f5f5;
    margin-bottom: 30px;
    opacity: 0.8;
}

/* Movie Container */
.movie-container {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
    flex-wrap: wrap;
}

/* Individual Movie Styling */
.movie {
    width: 250px;
    height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    transition: transform 0.5s ease, box-shadow 0.3s ease;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5); /* Translucent background for effect */
}

.movie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 15px;
}

/* Hover Effects for Movies */
.movie:hover {
    transform: translateY(-10px) scale(1.05); /* Slight lift and scale on hover */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}

/* Hover Effect for Movie Image */
.movie:hover img {
    transform: scale(1.1); /* Zoom in on hover */
    filter: brightness(0.8); /* Darken slightly */
}

/* Movie Info - Who’s Watching */
.movie p {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-family: 'Arial', sans-serif;
    color: white;
    font-size: 1.1rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    margin: 0;
}

/* Animated Glow on "Who's Watching" text */
.movie:hover p {
    color: #FF6347;
    text-shadow: 0 0 15px rgba(255, 99, 71, 1), 0 0 20px rgba(255, 69, 0, 1); /* Fiery glow */
}

/* "Who's Watching" span with interaction effect */
.movie span {
    font-weight: bold;
    color: #FFDB00;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .movie-container {
        flex-direction: column;
        align-items: center;
    }
    .movie {
        width: 80%;
        margin-bottom: 20px;
    }
}
/* Styling for Instagram Link Above Movie Poster */
.instagram-link {
    position: absolute;
    top: -20px; /* Position above the movie poster */
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1; /* Ensure the link is on top */
}

.instagram-link img {
    width: 70%;
    height: 70%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Hover Effects for Instagram Logo */
.instagram-link:hover {
    transform: scale(1.2); /* Zoom in the logo */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* Styling for Movie Poster */
.movie {
    position: relative;
    width: 250px;
    height: 400px;
    margin: 20px;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.3s ease;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5); /* Translucent background for effect */
}

.movie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 15px;
}

/* Hover Effects for Movies */
.movie:hover {
    transform: translateY(-10px) scale(1.05); /* Slight lift and scale on hover */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}

/* Hover Effect for Movie Image */
.movie:hover img {
    transform: scale(1.1); /* Zoom in on hover */
    filter: brightness(0.8); /* Darken slightly */
}

/* Movie Info - Who’s Watching */
.movie-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-family: 'Arial', sans-serif;
    color: white;
    font-size: 1.1rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    margin: 0;
    transition: opacity 0.3s ease;
    opacity: 0; /* Initially hidden */
}

/* Reveal Movie Info on Hover */
.movie:hover .movie-info {
    opacity: 1;
}

/* Who's Watching Details */
.movie-info p {
    margin: 5px 0;
}

/* Movie Info Date and Time Styling */
.movie-info p span {
    font-weight: bold;
    color: #FFDB00;
}

/* Animated Glow on "Who's Watching" text */
.movie:hover .movie-info p {
    color: #FF6347;
    text-shadow: 0 0 15px rgba(255, 99, 71, 1), 0 0 20px rgba(255, 69, 0, 1); /* Fiery glow */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .movie-container {
        flex-direction: column;
        align-items: center;
    }
    .movie {
        width: 80%;
        margin-bottom: 20px;
    }
}
/* Styling for the Currently Watching Section */
.currently-watching {
    background: linear-gradient(120deg, rgba(0, 0, 0, 0.8), rgba(255, 97, 97, 0.3)); /* Cinematic background */
    padding: 60px 20px;
    text-align: center;
    color: #f1f1f1;
    position: relative;
}

.currently-watching h2 {
    font-size: 2.8rem;
    color: #ff6347;
    text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.6);
}

.currently-watching h3 {
    font-size: 1.3rem;
    color: #f1f1f1;
    margin-bottom: 40px;
}

/* Movie Container */
.movie-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* Movie Block */
.movie {
    position: relative;
    width: 250px;
    height: 380px;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Instagram Logo Above the Movie (Smaller & Above Poster) */
.movie-logo {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.movie-logo img {
    width: 60%;
    height: 60%;
}

/* Instagram Hover Effect (Creative Reaction) */
.movie-logo:hover {
    transform: scale(1.2) rotate(360deg); /* Rotation + Scaling */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}

/* Movie Poster */
.movie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

/* Movie Info Section */
.movie-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-size: 1.2rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 8px;
}

/* Reveal Info on Hover */
.movie:hover .movie-info {
    opacity: 1;
}

/* Hover Effects for Movies */
.movie:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}

/* Movie Info - Who's Watching */
.movie-info span {
    font-weight: bold;
    color: #ffdb00;
}

/* Responsive Layout */
@media (max-width: 768px) {
    .movie-container {
        flex-direction: column;
        align-items: center;
    }
    .movie {
        width: 80%;
        margin-bottom: 30px;
    }
}
/* General Styles */
.contact-info {
    text-align: center;
    position: relative;
    margin-top: 50px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
}

/* Gift box that toggles the contact details */
.gift-box {
    font-size: 60px;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    animation: shake 1s ease-in-out infinite; /* Shaking effect */
}

.gift-box:hover {
    transform: scale(1.2);
    color: #f76c6c;
}

/* Shaking animation for the gift box */
@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Contact Details styling */
.contact-details {
    display: none;
    margin-top: 20px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: #333;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

.contact-details.show {
    display: block;
    animation: burstOpen 1s ease-out forwards; /* Burst open effect */
}

@keyframes burstOpen {
    0% {
        opacity: 0;
        transform: scale(0) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Contact Details Title */
.contact-details h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #ff6347;
    font-weight: bold;
}

/* List Style for the contact icons */
.contact-details ul {
    list-style-type: none;
    padding: 0;
}

.contact-details li {
    font-size: 18px;
    margin: 15px 0;
    color: #555;
    display: flex;
    align-items: center;
}

.contact-details a {
    text-decoration: none;
    display: flex;
    align-items: center;
    color: #333;
    transition: all 0.3s ease;
}

.contact-details a:hover {
    color: #f76c6c;
    transform: scale(1.1);
}

/* Contact Icons */
.contact-icon img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.contact-icon.instagram img:hover {
    transform: rotate(20deg);
}

.contact-icon.snapchat img:hover {
    transform: scale(1.1);
}

.contact-icon.whatsapp img:hover {
    transform: scale(1.2);
}

.contact-text {
    margin-top: 20px;
    font-size: 18px;
    color: #555;
    font-weight: bold;
}

/* Responsive Design for Mobile */
@media (max-width: 600px) {
    .gift-box {
        font-size: 50px;
    }

    .contact-details h2 {
        font-size: 20px;
    }

    .contact-details li {
        font-size: 16px;
    }
}
html, body {
  height: 100%;
  overflow: auto;
}
.container {
  overflow: visible;
  position: relative;
}
.fixed-header {
  height: 50px; /* Adjust this value based on your layout */
  position: fixed;
  top: 0;
  width: 100%;
}
.floating-poster {
  position: absolute; /* or fixed */
  top: 50px; /* Adjust this value */
  left: 50px; /* Adjust this value */
  overflow: visible;
}
.parent-container {
  overflow: visible; /* Change this to allow the child elements to show */
}
#specific-container .floating-poster {
  position: absolute;
  z-index: 1000;
  display: block; /* Ensure it's not set to display: none */
}
.gift-box {
  display: none;
  transition: all 0.3s ease;
}

.gift-box.open {
  display: block;
}
/* General Styles */
.contact-info {
    text-align: center;
    position: relative;
    margin-top: 50px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
}

/* Gift box that toggles the contact details */
.gift-box {
    font-size: 60px;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    animation: shake 1s ease-in-out infinite; /* Shaking effect */
}

.gift-box:hover {
    transform: scale(1.2);
    color: #f76c6c;
}

/* Shaking animation for the gift box */
@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Contact Details styling */
.contact-details {
    display: none;
    margin-top: 20px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: #333;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

.contact-details.show {
    display: block;
    animation: burstOpen 1s ease-out forwards; /* Burst open effect */
}

@keyframes burstOpen {
    0% {
        opacity: 0;
        transform: scale(0) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Contact Details Title */
.contact-details h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #ff6347;
    font-weight: bold;
}

/* List Style for the contact icons */
.contact-details ul {
    list-style-type: none;
    padding: 0;
}

.contact-details li {
    font-size: 18px;
    margin: 15px 0;
    color: #555;
    display: flex;
    align-items: center;
}

.contact-details a {
    text-decoration: none;
    display: flex;
    align-items: center;
    color: #333;
    transition: all 0.3s ease;
}

.contact-details a:hover {
    color: #f76c6c;
    transform: scale(1.1);
}

/* Contact Icons */
.contact-icon img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.contact-icon.instagram img:hover {
    transform: rotate(20deg);
}

.contact-icon.snapchat img:hover {
    transform: scale(1.1);
}

.contact-icon.whatsapp img:hover {
    transform: scale(1.2);
}

.contact-text {
    margin-top: 20px;
    font-size: 18px;
    color: #555;
    font-weight: bold;
}

/* Responsive Design for Mobile */
@media (max-width: 600px) {
    .gift-box {
        font-size: 50px;
    }

    .contact-details h2 {
        font-size: 20px;
    }

    .contact-details li {
        font-size: 16px;
    }
}
/* General Reset */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

/* Header */
header {
  text-align: center;
  background-color: #282c34;
  color: #fff;
  padding: 20px 0;
}

header h1 {
  font-size: 2rem;
  margin: 0;
}

/* Movie Grid */
#movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Movie Card */
.movie-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.movie-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Poster Image */
.movie-card img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
}

/* Movie Info */
.movie-info {
  padding: 15px;
  text-align: center;
}

.movie-info h3 {
  font-size: 1.25rem;
  margin: 10px 0;
}

.movie-info p {
  font-size: 0.9rem;
  margin: 5px 0;
  color: #666;
}

/* Links */
.movie-info a {
  text-decoration: none;
  color: #007bff;
}

.movie-info a:hover {
  text-decoration: underline;
}