body {
    background-color: black;
}


.header_background {
	background-color: black;
    height: 8.0rem;
}

.box {
    height: 8.0rem;
    cursor: pointer;
}

.box2 {
    height: 40.0rem;
}
.header_background a {
    color: white; /* Change to any color you want */
    text-decoration: none; /* Optional: Remove underline */
}
.logo-container {
    text-align: center; /* Centers the logo */
    background-color: black;
    height: 50px;
}

.logo {
    width: 200px; /* Adjust width as needed */
    height: auto; /* Keeps aspect ratio */
    margin-top: -100px;
    margin-bottom: 100px;
}
.hideAll {
    display: none;
}
.hidden-links {
    display: none; /* Hides the entire container */
}
h1 {
    color: #fff;
}

h2 {
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: larger;
}
h3 {
    color: #fff;
    font-size: large;
}
h4 {
    color: #fff;
    font-size: medium;
}
h5 {
    color: #fff;
}
h6 {
    color: #fff;
}
.person-item h5 {
    font-size: medium;
    margin-left: 20px;
    font-weight: bold;
}
.person-item p {
    color: white;
    margin-left: 20px;
    margin-top: -10px;
}
.person-item img{
    margin-bottom: 10px;
}
.season-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: black;
    padding: 10px;
    margin-top: -20px;
}
.season-item h5 {
    font-weight: bolder;
    color: #cdc3a5;
    margin-top: 5px;
}
.season-item p {
    color: #fff;
    text-align: left;
    margin-top: -10px;
}
/* Background colors for different sections */
.seasons-bg {
    background-color: black; /* Light Red */
}

.episodes-bg {
    background-color:black; /* Light Green */
}

.episode-bg {
    background-color: black; /* Light Blue */
}

.people-bg {
    background-color: black; /* Light Yellow */
}


.season-box {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 1.5rem;
    text-decoration: none; 
    cursor: pointer;
    /* margin: 0.1rem; */
    padding: 0.15rem; 
    background-color: #cdc3a5;
    margin-left: -5px;
}
.season-box img {
    border: 2px solid #cdc3a5; 
    width: 100%;
    
}
.season-box:hover {
    transform: scale(1.05); /* Increases size by 5% */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow */
}
.trailer-box {
    height: 8rem;
    background-color: dimgray; /* Light grey background for the boxes */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    text-decoration: none; /* Remove underline from links */
    color: black;
    border: 2px solid #cdc3a5; /* Optional border */
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 0.6rem;
    margin-top: -10px;
    margin-left: -10px;
}

/* Hover effect for the boxes */
.trailer-box:hover {
    background-color: grey;
}
.episodes-container {
    margin-top: 15px;
    background-color: black; 
    padding: 2rem;
    border-top: 3px solid #d51919;
}
.episode-item {
    text-align: left; /* Centers content within each episode item */
    margin-bottom: 5rem; /* Adds space between rows */
    margin-top: 3rem;
    padding-top: 5px;
}
.episode-image {
    width: 100%; /* Makes the image responsive */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes inline spacing */
    border: 2px solid #cdc3a5;
}
#episode-title {
    display: block;
    visibility: visible;
    color: #cdc3a5;
    font-weight: bolder;
    margin-top: -15px;
}
/* Style for each episode box */
.episode-box {
    /* background-color: #808080;  */
    color: white;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    box-sizing: border-box;
    cursor: pointer;
    margin-bottom: 1rem;
    text-decoration: none; 
    margin: 0.5rem; 
}
.episode-box:hover {
    transform: scale(1.05); /* Increases size by 5% */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow */
}
.person-container {
    background-color:black; 
    padding: 0.5rem; 
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* To center the person boxes */
    border-top: 3px solid #d51919;
    margin-top: 5px;
}
.person-container img{
    cursor: pointer;
    border: 2px solid #cdc3a5;
    width: 100%;
    height: auto;
    margin-top: 10px;
}
.person-container h4{
    color: #cdc3a5;
    margin-top: 5px;
    font-weight: bold;
}
.person-container h5{
    font-weight: bold;
}
.person-container p{
    color: #fff;
    margin-top: -10px;
}
.person-box {
    color: white;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    margin: 10px;  /* Add margin around the boxes to create space */
    text-decoration: none;  
    width: 10%; /* Ensures full width on small screens */
    box-sizing: border-box;
    text-align: center;
    padding: 10px;
}
.person-box img {
    border: 2px solid #cdc3a5; /* Add the border directly to the image */
    width: 100%; /* Keep image at full width */
    height: auto; /* Maintain aspect ratio */
    box-sizing: border-box; /* Ensures the border is included in the image's size */
}

.grid-x {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between;
    padding: 0.5rem; /* Optional padding */
}
.seasons-container {
    padding: 20px;
    padding-top: 30px;
    background-color: black;
    border-top: 3px solid #d51919;
}

.trailers-container {
    padding: 20px;
    background-color: black;
    border-top: 3px solid #d51919; 
}
.trailer-item {
    text-align: left;
    margin: 0.5rem;
}
.trailer-item h5 {
    color: #cdc3a5;
    font-weight: bolder;
    margin-left: -10px;
    margin-top: -5px;
}
.trailer-item p {
    color: #fff;
    font-size: 1rem;
    margin-left: -10px;
    margin-top: -10px;
}

.episode-container {
    padding: 20px;
    background-color: black;
    width: 1200px;
    height: auto;
    margin: auto;
    margin-left: 20px;
}
.episode-container img {
    border: 2px solid #cdc3a5;
    width: 100%; 
    height: auto;
}
#episode-image {
    max-width: 600px;
    height: auto;
}
.image-container {
    padding: 10px;
    background-color: transparent;
    text-align: center;
    height: auto;
    width: 100%;
    position: relative;
    
}
.episode-text {
    margin-top: 5px;
    font-size: 1rem; /* Adjust font size as needed */
    font-weight: bold; /* Makes the text bold */
    color: white; /* Adjust the text color */
    text-align: left;
}

.image-box {
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: black;
}

.content-container {
    padding: 20px;
    background-color: black;
    color: white;
    max-width: fit-content;
    /* background-color: aqua; */

}
.content-container p {
    font-size: large ;
    width: 400px;
}
.content-containers {
    /* background-color: darkseagreen; */
    color: white;
    max-width: fit-content;
    padding: 20px;
    margin-right: 180px;
}
.content-containers p {
    max-width: 400px; 
    width: auto; /* Allow it to shrink */
    font-size: large;
    overflow-wrap: break-word; /* Helps break long words */
}
.grid-padding-x {
    margin-bottom: 20px;
}
.footer {
    background-color: #d51919;  
    color: white;            
    padding: 15px 0;         
    position: relative;            
    width: 100%;             
    bottom: 0;
    margin-top: 50px;               
}
.footer .grid-x {
    width: 100%; /* Ensures the entire grid takes up full width */
    align-items: center; /* Centers content vertically */
}
.footer .grid-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
}
.social-icons {
    text-align: right; /* Aligns the icon image to the right */
}

.social-icon {
    width: 300px; /* Adjust width as needed */
    height: auto; /* Maintains aspect ratio */
}
.footer div {
    font-size: 16px;  
    text-align: center;       
}

.episode-image-container {
    background-color: black;
    height: auto;
    width: 100%;
}

#person-image, #person-description {
    display: block;
    visibility: visible;
    background-color: transparent;
}
#person-name {
    display: block;
    visibility: visible;
    color: #cdc3a5;
    font-weight: bolder;
    font-size: larger;
    margin-top: -15px;
}
.person-details-container {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align items */
    justify-content: flex-start; /* Ensure even spacing between image and content */
    gap: 2rem; /* Add space between the image and content */
    margin: auto;
    border-top: 3px solid #d51919;
    padding-bottom: 100px;
    /* background-color: aliceblue; */
    
}
.person-details-container img {
    border: 3px solid #cdc3a5; 
    object-fit: cover;
    width: 200px;
    max-width: none; /* Set a max width for the image */
    height: auto; /* Maintain aspect ratio */
   
}
#search {
    width: 50%;
    border: 2px solid #cdc3a5;
    border-radius: 10px;
    background-color: black;
    color: #cdc3a5;
}
.search-box {
    position: relative;
    background-color: black;
    margin-bottom: 50px;
    
}
.search-results {
    position: absolute;
    width: 20rem;
    /* top: 2rem; */
    background-color: #d51919;
    z-index: 20000000;
    display: none;
    cursor: pointer;
}
.search-container {
    position: absolute; /* Makes it stick to the top left */
    top: 50px; /* Adjust spacing from the top */
    left: 1000px; /* Adjust spacing from the left */
}

.search-bar {
    width: 230px; /* Adjust width as needed */
    padding: 5px 10px; /* Adjust padding for better spacing */
    background-color: black; /* Background color */
    color: #cdc3a5; /* Text color */
    border: 2px solid #cdc3a5; /* Border color */
    font-size: 0.9rem; /* Adjust font size */
    outline: none; /* Removes default focus outline */
    border-radius: 10px; /* Optional: Add rounded corners */
}

.search-bar::placeholder {
    color: #cdc3a5; /* Placeholder text color */
    opacity: 0.7; /* Optional: Adjust opacity of placeholder */
}
.episode-image-container {
    background-color: black;
    height: auto; /* Let the height adjust automatically based on the image size */
    width: 100%; /* Ensure it spans the container width */
    padding: 10px;
    text-align: center;
}

.episode-image-container img {
    width: 200%; /* Adjust the width to make it larger */
    height: auto; /* Maintain aspect ratio */
    max-width: none; /* Optional: Limit the maximum width */
}
.seasons-header {
    text-align: center; /* Centers the image */
    margin-bottom: 3rem; /* Adds space below the image */
    margin-top: -30px;
}
.seasons-banner {
    width: 100%; /* Makes the image responsive */
    max-width: 800px; /* Optional: Limits the maximum width */
    height: auto; /* Maintains the aspect ratio */
    border-radius: 100px; /* Optional: Slight rounding of corners */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); /* Soft blurry shadow */
}
.sci-fi-thrillers {
    background-color: black;
    padding-top: 10px;
    border-top: 3px solid #d51919;
}
.thriller-item h5 {
    margin-top: 15px;
    font-weight: bold;
}
.thriller-item p {
    color: #fff;
    margin-top: -10px;
    padding-top: -10px;
}
.thriller-item img {
    border: 2px solid #cdc3a5;
}
.related-movies-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background-color: black;
    border-top: 3px solid #d51919;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}

.related-movie {
    flex: 0 1 200px; /* Each image will take up to 200px */
    text-align: left; /* Aligns text if there are labels under the images */
}

.related-movie img {
    width: 100%;
    height: auto;
    border: 2px solid #ccc; /* Optional: Adds a border */
    
}
.related-movies-container img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border: 2px solid #cdc3a5;
    
}
.related-movies-container p{
    margin-top: 5px;
}

/* Inline Loader Styles */
.inline-loader {
    margin: auto;
    width: 100px;             
    height: 100px;            
    border-radius: 50%;       

    border: 8px solid #000000;
    border-top-color: #ff0000;

    
    animation: spin 1s linear infinite; 
}

/* Keyframes for the spinning animation (same as before) */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


@media (max-width: 768px) {
.person-details-container {
    flex-direction: column; /* Stack image and description vertically */
    /* align-items: center; Center align for a clean look */
    text-align: center; /* Center the text content */
    padding: 20px;
    margin: 0 auto;
    
}

.person-details-container img {
    max-width: 200px; /* Make the image fill most of the screen */
    margin-top: -40px; /* Add space below the image */
    height: auto;
    margin: auto;
}
.person-container img {
    width: 100%;
    height: auto;
    margin-top: 10px;
    
    
}
.person-container {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
    text-align: center;
    gap: 20px; */
    display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two images per row */
        gap: 20px;
}
.episode-image-container {
    width: 100%; 
    padding: 0 10px; /* Adjust padding as needed */
    margin-bottom: 15px; 
    max-width: 300px;
}
.episode-container {
    width: auto; /* Remove fixed width */
        max-width: 100%; /* Prevent exceeding screen width */
        margin-left: 0; /* Remove fixed left margin */
        padding: 15px; /* Adjust padding for mobile */
        /* height: auto; */ /* Already auto, but good to keep in mind */
}
.episode-image-container img {
    width: 100%; /* Make image fill its container */
    max-width: 400px; /* Optional: Set a max visual size for the image */
    margin: 0 auto; /* Center the image if container is wider */
    display: block;
}
.season-item {
    padding-top: 20px;
}
.season-item h5{
    padding-top: 5px;
}
.season-item p{
    padding-top: 5px;
}
.episode-item {
    padding-bottom: 50px;
    padding-top: 50px;
}
.person-item {
    padding-top: 20px;
    padding-bottom: 20px;
}
.person-item h5 {
    padding-top: 10px;
}
#person-name {
    /* margin-top: 20px; */
    text-align: center;
}
#person-description {
    max-width: 300px;
}
/* .content-container {
    margin: auto;
    text-align: left;

}
.content-container p {
    max-width: 300px;
} */

.content-containers {
    width: 100%; /* Ensure it takes full width */
    max-width: 100%; /* Override any potential max-width: fit-content issue */
    margin-right: 0; /* Remove the large right margin */
    padding: 0 10px; /* Adjust padding */
    text-align: left;
}
.content-containers p {
    max-width: 100%; /* Allow text to use full container width */
    width: auto; /* Ensure it overrides the general 400px rule */
    font-size: medium; /* Optional: Slightly smaller font on mobile */
}
#search {
    margin: auto;
    margin-bottom: 20px;
}
.search-container {
    position: relative; /* Change positioning to relative for better flexibility */
    top: 20px; /* Reset top spacing */
    left: 80px; /* Reset left spacing */
    margin: 0 auto; /* Center the container horizontally */
    text-align: center; /* Center the content inside */
    width: 100%; /* Make it take full width of the screen */
}
.search-bar {
    width: 80%; /* Adjust width to fit better on smaller screens */
    max-width: 300px; /* Optional: Limit maximum width */
}
.trailer-item {
    width: 50%;
    margin: 0 auto;
    padding-bottom: 20px;
}
.episode-box {
    margin-top: -20%;
}
.episodes-container {
    padding-top: 20%;
}
}