body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    min-height: 100%; /* Ensure it covers the content height */
    color: #fff;
    background: linear-gradient(to bottom, #001f4d, #003366);
    background-repeat: no-repeat;
    background-attachment: fixed; /* Optional: Keep gradient fixed while scrolling */
    display: flex;
    flex-direction: column;
}

.image-container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    height: 20vh; /* Adjust height to 80% of the viewport */
    padding: 0; /* Remove unnecessary padding */
    background-color: transparent; /* Optional: Same as page background */
}

.logo {
    max-width: 150px; /* Adjust size as needed */
    height: auto;
}


header {
    text-align: center;
    padding: 20px;
}


.hero {
    text-align: center;
    padding: 50px 20px;
    background: linear-gradient(to bottom, navy, #001f4d);
    color: white;
}

.hero .logo {
    max-width: 200px;
    margin: 20px auto;
    display: block;
}

.hero .info {
    max-width: 600px;
    margin: 20px auto;
    font-size: 1.2rem;
}

.hero .cta {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #ffcc00;
    color: #000134 !important;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1rem;
}

.hero .cta:hover {
    background: #e6b800;
}

footer {
    text-align: center;
    padding: 1em 0;
    background-color: #001f4d;
    color: #fff;
}

a {
    color: #ffcc00; /* Replace with your desired color */
    text-decoration: none; /* Optional: Remove underline */
}

a:hover {
    color: #e6b800; /* Replace with your hover color */
    text-decoration: underline; /* Optional: Add underline on hover */
}

a:visited {
    color: #d4a800; /* Replace with your visited link color */
}
body {
    background: linear-gradient(to bottom, #001f4d, #003366);
}
section {
    text-align: center;
    padding: 20px;
    margin: 20px auto;
    background-color: #003366;
    border-radius: 10px;
    max-width: 800px;
}


.cta:hover {
    background: #ff6600;
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
}
section::after {
    text-align: center;
    content: "";
    display: block;
    width: 50%;
    height: 2px;
    background-color: #ffcc00;
    margin: 20px auto;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

section {
    animation: fadeIn 2s;
}
section {
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}
.cta:hover {
    text-align: center;
    background: #ff6600;
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0px 5px 15px rgba(255, 102, 0, 0.5);
    transition: all 0.3s ease;
}

body {
    text-align: center;
    background: linear-gradient(45deg, #003366, #001f4d);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
header h1 {
    text-align: center;
    font-size: 3rem;
    background: linear-gradient(90deg, #ffcc00, #ffcc00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    animation: glowing 2s infinite alternate;
}

@keyframes glowing {
    0% {
        text-shadow: 0 0 10px #f6ff00, 0 0 10px #ffcc00;
    }
    100% {
        text-shadow: 0 0 10px #ffcc00, 0 0 40px #ffcc00;
    }
}
nav {
    display: flex;
    justify-content: center;
    background: #003366; /* Background color for the nav bar */
    padding: 10px 0;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Optional shadow for the bar */
}

nav {
    display: flex;
    justify-content: center;
    background: #003366; /* Background color for the nav bar */
    padding: 10px 0;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Optional shadow for the bar */
}

nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    margin: 0 10px;
}
nav ul li a {
    color: #ffffff !important; /* Force white text */
}

nav ul li a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #1696e0; /* Button background color */
    color: #ffffff; /* White font color */
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px; /* Rounded button edges */
    transition: background 0.3s, transform 0.2s; /* Smooth transitions */
}

nav ul li a:hover {
    background-color: #ffcc00; /* Button background on hover */
    color: #ffffff; /* Ensure white font color */
    transform: scale(1.1); /* Slight zoom effect */
}

#feedback-form.hidden {
    display: none;
}

#contact {
    text-align: center;
    padding: 40px 20px;
    background-color: #003366;
    color: #ffffff;
    border-top: 3px solid #ffcc00;
    border-bottom: 3px solid #ffcc00;
}

#contact h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.contact-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.contact-list {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

.contact-list li {
    margin: 10px 0;
}

.contact-list a, #feedback-btn {
    color: #ffcc00;
    text-decoration: none;
    font-size: 0.95rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.001px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px; 
}

.contact-list a:hover, #feedback-btn:hover {
    color: #ffcc00;
    text-decoration: underline;
}

/* Feedback Form */
#feedback-form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    z-index: 1000;
    width: 90%;
    max-width: 400px;
    display: none; /* Initially hidden */
}

#feedback-form form {
    display: flex;
    flex-direction: column;
    text-align: left;
}

#feedback-form label {
    margin-bottom: 5px;
    font-weight: bold;
}

#feedback-form input, #feedback-form textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#feedback-form button {
    background-color: #ffcc00;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

#feedback-form button:hover {
    background-color: #ffcc00;
    color: #fff;
}

/* Timeline Section */
#timeline {
    text-align: center;
    padding: 40px 20px;
    background-color: #003366;
    color: #ffffff;
    border-top: 3px solid #ffcc00;
    border-bottom: 3px solid #ffcc00;
}

#timeline h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.timeline-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Ensures it adapts on smaller screens */
    gap: 20px; /* Space between timeline items */
}

.timeline-item {
    background: #ffcc00;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.3s, background 0.3s;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.timeline-item:hover {
    background: #ffcc00;
    transform: scale(1.1);
    color: #ffffff;
}

#timeline-details {
    margin-top: 20px;
    padding: 20px;
    background: #ffffff;
    color: #003366;
    border-radius: 10px;
    display: none; /* Initially hidden */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
/* Who Lives Here Section */
/* Who Lives Here Section */
#who-lives-here {
    text-align: center;
    padding: 40px 20px;
    background-color: #003366;
    color: #ffffff;
}

#who-lives-here h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.apartment {
    margin-bottom: 30px;
}

.apartment h3 {
    background: #ffcc00;
    color: #003366;
    padding: 10px;
    border-radius: 5px;
}

/* Resident Styling */
.resident {
    display: flex;
    flex-direction: column;  /* Stacks image and name vertically */
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.resident:hover {
    background: #ffcc00;
    color: #ffffff;
}

/* Ensure images don’t stretch */
.resident img {
    width: 100px;  /* Set fixed width */
    height: auto;  /* Maintain aspect ratio */
    border-radius: 50%;
    border: 2px solid #ffcc00;
}

/* Name below the image */
.resident-name {
    margin-top: 8px;
    font-size: 1.1rem;
    font-weight: bold;
}

/* Bio */
.bio {
    display: none;
    padding: 15px;
    margin: 10px 0;
    background: #ffffff;
    color: #003366;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.hidden {
    display: none;
}
.disclaimer {
    font-size: 0.8rem;  /* Smaller font size */
    font-style: italic; /* Italic text */
    color: #cccccc;     /* Light grey for subtle appearance */
    text-align: center; /* Center the text */
    margin-top: 20px;
}
/* Table Styling */
/* Table Styling */
.scene-table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    text-align: center;
    color: navy; /* Font color set to navy blue */
}

.scene-table th, .scene-table td {
    border: 2px solid black;
    padding: 10px;
}

.scene-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.scene-table td {
    background-color: #ffffff;
}

/* CTA Button Styling */
.cta-button {
    display: block;
    width: fit-content;
    margin: 20px auto;  /* Center the button below the table */
    padding: 12px 24px;
    background-color: #ffcc00;  /* Button color */
    color: #000033;  /* Very dark navy blue text */
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s, transform 0.2s;
}

/* Hover and Click Effects */
.cta-button:hover {
    background-color: #f1e104; /* Darker navy on hover */
}

.cta-button:active {
    transform: scale(0.95); /* Slight shrink effect when clicked */
}
/* CTA Button - Consistent Style Across Pages */
.cta, .cta-button {
    display: block;
    width: fit-content;
    margin: 20px auto;  /* Center the button */
    padding: 12px 24px;
    background-color: #ffcc00;  /* Button color */
    color: #000134 !important; /* Very dark navy blue text */
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s, transform 0.2s;
}

/* Hover and Click Effects */
.cta:hover, .cta-button:hover {
    background-color: #e6b800; /* Slightly darker yellow on hover */
    color: navy;
}

.cta:active, .cta-button:active {
    transform: scale(0.95); /* Slight shrink effect when clicked */
}

/* Center the "Hear the Play" section */
#hear-the-play {
    text-align: center;
    padding: 50px 20px;
    background: #003366;
    color: white;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    max-width: 900px;
    margin: 40px auto;
}

/* Center the episode table */
.episode-table-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* Styling for the episode table */
.episode-table {
    width: 90%;
    max-width: 800px;
    border-collapse: collapse;
    text-align: center;
    background: #ffffff;
    color: #003366;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Table headers */
.episode-table th {
    background-color: #ffcc00;
    color: #003366;
    padding: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    border-bottom: 2px solid #003366;
}

/* Table rows */
.episode-table td {
    padding: 12px;
    border-bottom: 1px solid #ccc;
}

/* Alternate row background for better readability */
.episode-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Hover effect on rows */
.episode-table tr:hover {
    background-color: #ffe680;
    transition: background 0.3s ease-in-out;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .episode-table {
        width: 100%;
        font-size: 1rem;
    }
    #hear-the-play {
        padding: 30px 10px;
    }
}
/* Center the section */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px 20px;
}

/* Style the episodes section */
section {
    background: #003366;
    color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
    max-width: 900px;
    width: 100%;
}

/* Center table and make background transparent */
table {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border-collapse: collapse;
    background: transparent;
    color: white;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Table headers */
table th {
    background-color: rgba(255, 204, 0, 0.9); /* Gold with slight transparency */
    color: #003366;
    padding: 15px;
    font-size: 1.2rem;
    border-bottom: 2px solid #ffcc00;
}

/* Table rows */
table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Light separator */
}

/* Alternating row effect with transparency */
table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Hover effect */
table tr:hover {
    background-color: rgba(255, 204, 0, 0.2);
    transition: background 0.3s ease-in-out;
}

/* Style episode links */
table a {
    color: #ffcc00;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

table a:hover {
    color: #ff6600;
    text-decoration: underline;
}

/* Style the ACT titles */
.act-title {
    background-color: #002f5e; /* Darker contrast */
    color: #ffcc00;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 10px;
}

/* Style the full-play button */
/* Center the "HEAR THE WHOLE PLAY!" button */
.full-play {
    display: block;
    background-color: #ffcc00;
    color: #003366;
    padding: 15px;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    transition: background 0.3s ease-in-out;
    width: 100%; /* Ensures full width for centering */
}

/* Make sure the table cell spans both columns and centers content */
table td[colspan="2"] {
    text-align: center;
}


/* Meet the Team Section */
#meet-the-team {
    text-align: center;
    padding: 40px 20px;
    background-color: #002244; /* Adjust as needed */
    color: white;
}

#meet-the-team h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Align text to the left but keep section structured */
.team-list {
    max-width: 600px;
    margin: 0 auto;
    text-align: left; /* Align names to the left */
    font-size: 1rem;
    line-height: 1.6;
}
/* Cast Section */
#cast {
    text-align: center;
    padding: 40px 20px;
    background-color: #002244; /* Adjust as needed */
    color: white;
}

#cast h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Align cast names to the left */
.cast-list {
    max-width: 600px;
    margin: 0 auto;
    text-align: left; /* Align names to the left */
    font-size: 1rem;
    line-height: 1.6;
}

/* 🎭 Transparent Table Styling */
.scene-table {
    width: 90%;
    margin: 30px auto;
    border-collapse: collapse;
    color: #ffcc00; /* Golden Yellow */
    font-size: 1.2rem;
    background: transparent; /* ✅ Transparent background */
    border-radius: 10px;
    overflow: hidden;
}

/* Table Header */
.scene-table th {
    background: rgba(0, 31, 77, 0.8); /* ✅ Semi-transparent navy */
    color: white;
    padding: 15px;
    font-size: 1.4rem;
    text-transform: uppercase;
}

/* Table Rows */
.scene-table td {
    text-align: center;
    padding: 15px;
    border-bottom: 2px solid #ffcc00; /* Golden Divider */
    background: rgba(0, 31, 77, 0.5); /* ✅ Semi-transparent rows */
}

/* 🎨 Row Hover Effect */
.scene-table tr:hover {
    background: rgba(0, 43, 92, 0.6); /* ✅ Slightly darker hover effect */
}

/* 🔘 Listen Buttons */
.play-button {
    background: linear-gradient(135deg, #ffcc00, #ffb300); /* Gold Gradient */
    color: #001f4d; /* Dark navy text */
    font-weight: bold;
    border: none;
    padding: 12px 20px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Hover Effect */
.play-button:hover {
    background: #ffdb4d; /* Brighter gold */
    transform: scale(1.1);
}
/* 🎬 Popup Modal */
.popup {
    display: none;  /* Initially hidden */
    position: fixed;  /* ✅ Fixed positioning */
    top: 50%;  /* ✅ Center vertically */
    left: 50%;  /* ✅ Center horizontally */
    transform: translate(-50%, -50%);  /* ✅ Adjust to be fully centered */
    background-color: rgba(0, 0, 0, 0.8);
    width: 80%;
    max-width: 700px;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    z-index: 1000;  /* ✅ Ensures popup is always on top */
}

/* General Styles */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom, #001f4d, #003366);
    color: #fff;
}

/* Header Container */
.header-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Centers the logo/title horizontally */
    padding: 15px 20px;
    background: linear-gradient(to bottom, #001f4d, #003366); /* Matches page colors */
    position: relative; /* Needed so .nav-menu can be absolutely placed below */
}

/* Logo + Title Container (optional wrapper if you use one) */
.logo-title-container {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.logo {
    max-height: 50px;
    width: auto;
    border-radius: 5px;
}

/* BIGGER Title */
.site-title {
    font-size: 2.5rem;  /* Increase or decrease to taste */
    color: yellow;
    margin: 0;
}

/* Menu Toggle (Hamburger Icon) */
.menu-toggle {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: white;
    margin-left: 20px; /* Space between title and icon */
}

/* Navigation Menu: now absolutely positioned below header */
.nav-menu {
    display: none;
    position: absolute;
    top: 100%; /* Start right below the header container */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #001f4d, #003366);
    padding: 10px;
    border-radius: 8px;
    width: 200px;
    text-align: center;
    z-index: 9999;
}

/* Show the menu when toggled via JS */
.nav-menu.show {
    display: block;
}

/* Nav Links */
.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nav-menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    display: block;
    padding: 10px;
    background: royalblue;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.nav-menu ul li a:hover {
    background: #ffcc00;
    color: #001f4d;
}

/* Hero Section (example) */
.hero {
    text-align: center;
    padding: 50px 20px;
    background: linear-gradient(to bottom, navy, #001f4d);
    color: white;
}
.hero .info {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.2rem;
}
.cta {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #ffcc00;
    color: #000134 !important;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1rem;
}
.cta:hover {
    background: #e6b800;
}

/* Footer */
footer {
    text-align: center;
    padding: 1em 0;
    background-color: #001f4d;
    color: #fff;
}

/* 🎭 Main Container */
.listen-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 20px auto; /* Reduced margin */
    gap: 20px;         /* Slightly less gap */
}

/* 🎬 Video Preview on Top */
.video-preview {
    order: -1;        /* Ensures the video preview is placed first */
    width: 60%;       /* Slightly narrower video container */
    text-align: center;
    margin-bottom: 20px;
}

.video-preview iframe {
    width: 100%;
    height: 320px;    /* Reduced height */
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

/* 🔵 Table Styling */
.scene-table {
    order: 0;         /* Default order; appears after the video preview */
    width: 100%;       /* Expanded table width */
    border-collapse: collapse;
    color: #ffcc00;   /* Golden Yellow */
    font-size: 1.1rem;/* Slightly smaller text */
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;   /* Center the table */
}

/* Table Header */
.scene-table th {
    background: rgba(0, 31, 77, 0.8);
    color: white;
    padding: 12px;    /* Slightly smaller padding */
    font-size: 1.2rem;/* Slightly smaller header text */
    text-transform: uppercase;
}

/* Table Rows */
.scene-table td {
    text-align: center;
    padding: 12px;    /* Slightly smaller padding */
    border-bottom: 2px solid #ffcc00;
    background: rgba(0, 31, 77, 0.5);
}

/* 🎨 Row Hover Effect */
.scene-table tr:hover {
    background: rgba(0, 43, 92, 0.6);
}

/* 🔘 Listen Buttons */
.play-button {
    background: linear-gradient(135deg, #ffcc00, #ffb300);
    color: #001f4d;
    font-weight: bold;
    border: none;
    padding: 10px 18px;  /* Slightly smaller padding */
    font-size: 0.95rem;  /* Reduced font size */
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Hover Effect */
.play-button:hover {
    background: #ffdb4d;
    transform: scale(1.1);
}

/* 📱 Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .listen-container {
        width: 95%;
        margin: 10px auto;
        gap: 15px;
    }

    .video-preview {
        width: 90%;
    }

    .video-preview iframe {
        height: 220px;  /* Adjust video height for smaller screens */
    }

    .scene-table {
        width: 90%;
        font-size: 1rem; /* Slightly smaller on mobile */
    }

    .scene-table th {
        font-size: 1.1rem;
        padding: 10px;
    }

    .scene-table td {
        padding: 10px;
    }

    .play-button {
        font-size: 0.85rem;
        padding: 8px 14px;
    }
}

/* Additional Mobile Tweaks */
@media screen and (max-width: 768px) {
    /* Header & Navigation */
    .header-container {
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }
    .logo-title-container {
        margin-bottom: 10px;
    }
    .logo {
        max-height: 40px; /* Reduce logo size */
    }
    .site-title {
        font-size: 2rem; /* Smaller site title */
    }
    .menu-toggle {
        font-size: 24px; /* Slightly smaller hamburger icon */
        margin-top: 5px;
    }
    .nav-menu {
        width: 100%;
        left: 0;
        top: 100%;
        transform: none;
        padding: 10px 0;
    }
    .nav-menu ul {
        flex-direction: column;
    }
    .nav-menu ul li {
        margin: 5px 0;
    }
  
    /* Hero Section */
    .hero {
        padding: 30px 10px;
    }
    .hero .info {
        font-size: 1rem;
        margin: 0 10px;
    }
    .cta, .cta-button {
        font-size: 1rem;
        padding: 8px 16px;
    }
    
    /* Sections & General Spacing */
    section {
        padding: 20px;
        margin: 10px auto;
        max-width: 100%;
    }
    
    /* Tables */
    table, .scene-table, .episode-table {
        width: 100%;
        font-size: 0.9rem;
        margin: 10px auto;
    }
    table th, .scene-table th {
        padding: 8px;
        font-size: 1rem;
    }
    table td, .scene-table td {
        padding: 8px;
    }
    
    /* Listen Container Adjustments */
    .listen-container {
        width: 100%;
        gap: 10px;
    }
    .video-preview {
        width: 100%;
    }
    .video-preview iframe {
        height: 200px;
    }
    
    /* Resident Images on Who Lives Here */
    .resident img {
        width: 80px;
    }
    
    /* Footer Text */
    footer {
        font-size: 0.9rem;
        padding: 10px 0;
    }
  }
  
  .bio {
    display: none;
    padding: 15px;
    margin: 10px 0;
    background: rgba(0, 31, 77, 0.8); /* Dark navy background matching the theme */
    color: #ffcc00; /* Golden yellow text for better contrast */
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Unified Bio Styling */
.bio {
    display: none;
    padding: 15px;
    margin: 10px 0;
    background: rgba(0, 31, 77, 0.85); /* Dark navy background */
    color: #ffcc00; /* Golden yellow for contrast */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Improved Header for Mobile */
@media screen and (max-width: 768px) {
  .header-container {
      flex-direction: column;
      align-items: center;
      padding: 10px;
  }
  .logo-title-container {
      margin-bottom: 10px;
  }
  .logo {
      max-height: 40px;
  }
  .site-title {
      font-size: 2rem;
  }
  .menu-toggle {
      font-size: 24px;
      margin-top: 5px;
  }
  .nav-menu {
      width: 100%;
      left: 0;
      top: 100%;
      transform: none;
      padding: 10px 0;
  }
  .nav-menu ul {
      flex-direction: column;
  }
  .nav-menu ul li {
      margin: 5px 0;
  }
}
@media (max-width: 768px) {
    .header-container {
      flex-wrap: wrap;       /* Allows the title and toggle to move if needed */
      justify-content: center; /* Centers everything if you like that look */
    }
  
    .logo {
      max-height: 70px;      /* Make the logo even bigger on mobile if desired */
    }
  
    .site-title {
      font-size: 2rem;       /* Slightly smaller title on mobile to prevent overflow */
      margin: 10px 0;        /* Some spacing around the title */
      text-align: center;
      width: 100%;           /* Forces title onto its own line if needed */
    }
  
    .menu-toggle {
      font-size: 26px;       /* Adjust icon size to match new proportions */
      margin: 10px 0;
      order: 3;              /* Ensures toggle can appear below the title if you want */
    }
  }

  .house-image-container {
    text-align: center;
    margin: 20px 0; /* Vertical spacing around the container */
}

.house-image-container img {
    max-width: 600px;   /* Adjust as needed */
    width: 80%;         /* Responsive width on smaller screens */
    height: auto;       /* Maintains aspect ratio */
    border-radius: 10px; /* Soft rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle drop shadow */
}