/* assets/css/styles.css */

#suggestions {
position: absolute;
background-color: #fff;
width: 100%;
max-height: 200px;
overflow-y: auto;
border: 1px solid #ced4da;
border-top: none;
z-index: 1000;
}

#suggestions a {
padding: 10px;
text-decoration: none;
display: block;
color: #000;
}

#suggestions a:hover {
background-color: #f8f9fa;
color: #000;
}
/* General header styles */


/* Title styling */
header h1 {
margin: 0; /* Remove default margin */
font-size: 2.5em; /* Increase font size for the title */
}

/* Navigation styles */
nav {
margin-top: 10px; /* Space between title and navigation */
}

nav a {
color: #61dafb; /* Light blue color for links */
text-decoration: none; /* Remove underline from links */
margin: 0 15px; /* Horizontal space between links */
font-size: 1.2em; /* Increase font size for navigation links */
transition: color 0.3s; /* Smooth color transition on hover */
}

/* Navigation link hover effect */
nav a:hover {
color: #21a1f1; /* Change link color on hover */
}

/* Horizontal line styling */
hr {
border: none; /* Remove default border */
height: 1px; /* Set height for the line */
background-color: #61dafb; /* Color of the line */
margin-top: 10px; /* Space above the line */
margin-bottom: 20px; /* Space below the line */
}




body, html {
font-family: 'Poppins', sans-serif;
background-color: black;
color: #f0f0f0;
margin: 0;
padding: 0;
overflow-x: hidden;
}

/* Navbar Styles */
.navbar {
background-color: #000000;
}

.navbar-brand {
font-size: 1.75rem;
font-weight: 700;
color: #ff3d00 !important;
letter-spacing: 1.2px;
}

.nav-link {
color: #f0f0f0 !important;
font-size: 1rem;
margin-right: 20px;
transition: color 0.3s ease;
}

.nav-link:hover {
color: #ff3d00 !important;
}

/* Search Bar */
.search-container {
position: relative;
}

#search-input {
border-radius: 30px;
padding: 0.75rem 1.5rem;
background-color: #1f1f1f;
border: 2px solid #ff3d00;
color: #fff;
}

#search-input::placeholder {
color: #bbb;
}

.search-container button {
border-radius: 50px;
background-color: #ff3d00;
border: none;
color: white;
padding: 0.5rem 1.25rem;
transition: background-color 0.3s ease;
}

.search-container button:hover {
background-color: #e53935;
}

/* Carousel Styles */
.carousel-item {
transition: transform 0.5s ease;
max-height: 600px;
background-color: #222;
}

.carousel-item img {
object-fit: cover;
max-height: 600px;
filter: brightness(80%);
}

.carousel-caption {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
padding: 20px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
background-color: #ff3d00;
border-radius: 50%;
}

/* Modal Styles */
.modal-content {
background-color: #1e1e1e;
color: white;
}

.modal-header {
border-bottom: 1px solid #ff3d00;
}

.modal-title {
font-size: 1.5rem;
color: #ff3d00;
}

/* Movie Card Layout for Mobile */
@media (max-width: 768px) {
.card {
margin-bottom: 20px;
}

.col-md-3 {
flex: 0 0 50%; /* 2 movie cards per row on mobile */
max-width: 50%;
}

.section-title {
font-size: 1.5rem;
}

.navbar-brand {
font-size: 1.5rem;
}

.card-img-top {
height: 200px;
}
}

/* Alphabetical Filter Styling for Mobile */
@media (max-width: 768px) {
.btn-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.btn-group .btn {
flex: 1 1 10%; /* Buttons will take 10% of the row each, adjust as needed */
margin: 2px;
font-size: 0.9rem;
padding: 0.5rem;
}
}



.modal-body iframe {
border-radius: 10px;
}

/* Movie Card Styles */
.card {
background-color: #1f1f1f;
border: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 4px 20px rgba(255, 61, 0, 0.4);
}

.card-img-top {
border-radius: 10px;
height: 250px;
object-fit: cover;
}

.card-title {
color: #ff3d00;
font-size: 1.25rem;
margin-top: 0.5rem;
}

.card-text {
color: #bbb;
}

/* Section Titles */


/* Button Styles */
.btn-primary {
background-color: #ff3d00;
border: none;
transition: background-color 0.3s ease;
}

.btn-primary:hover {
background-color: #e53935;
}

/* Carousel Button Alignment */
.carousel-control-prev, .carousel-control-next {
filter: drop-shadow(0 0 8px #ff3d00);
}

/* Responsive Styles */
@media (max-width: 768px) {
.section-title {
font-size: 1.5rem;
}

.navbar-brand {
font-size: 1.5rem;
}

.card-img-top {
height: 200px;
}
}

/* Enable smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Fade-in Animation */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-visible {
    opacity: 1;
    transform: translateY(0);
}
.container{
    background-color: #000;
}
/* Card container positioning */
.card {
    position: relative;
    overflow: hidden;
}

/* Play button styling */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    border: none;
    color: white;
    padding: 15px;
    border-radius: 50%;
    display: none;
    cursor: pointer;
    z-index: 10;
}

/* Show play button on card hover */
.card:hover .play-button {
    display: block;
}

/* Optional: Add transition for smooth appearance */
.play-button {
    transition: opacity 0.3s ease;
}

.card:hover .play-button {
    opacity: 1;
}


/* Add this to your show_more.css file */
.movie-card {
    position: relative;
    overflow: hidden;
}

.movie-card .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.movie-card:hover .play-button {
    opacity: 1;
}

.modal-trailer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-trailer iframe {
    width: 80%;
    height: 80%;
}

.close-trailer {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}
.card {
    position: relative;
    overflow: hidden; /* Ensure content doesn't overflow */
}

.play-btn {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the button */
    display: none; /* Hide the button by default */
    z-index: 10; /* Ensure it's above other elements */
}

.card:hover .play-btn {
    display: block; /* Show button on hover */
}