html, body {
    max-width: 100vw;
    overflow-x: hidden;
    /* padding: 5px; */
}
body {
    font-family: 'Chewy', 'DynaPuff', sans-serif;
    background-color: #422845;
    background-image: url('backie2.png');
    background-blend-mode: overlay;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 10px; */
    min-height: 100vh;
}



.site-header {
    display: flex; /* Makes it a flex container */ 
    align-items: center; /* Vertically aligns items in the center */
    width: 100%;
    max-width: 2000px;
    min-width: 320px;
    position: fixed; 
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #0101156d;
    padding: 10px;
    margin-top: 10px; 
    margin-bottom: 10px;
    background-image:
        url('backie2.png'); /* Fallback color */
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
    box-sizing: border-box;
    position: fixed; 
}
.title-group {
    display: flex;             /* Makes the group a flex container */
    flex-grow: 1;
    flex-direction: column;    /* CRITICAL: Stacks the title and blurb vertically */
    align-items: center;       /* Centers the title/blurb text horizontally */
    margin: 0 10px;            /* Keeps existing horizontal spacing */
}
.site-title {
        font-size: clamp(2.5em, 5vw, 5em);
        font-weight: bold;
        color: #037274;
        text-align: center; 
        margin: 0 10px; /* Adjust left/right margins as needed for spacing from other elements */
        -webkit-text-stroke: 1px black;
        text-shadow:
            1px 1px 2px #333,
            -1px -1px 2px #fff,
            2px 2px 4px #075a62;
        line-height: 1.2;
}
.site-description-blurb {
        font-family: 'Permanent Marker', sans-serif;
        font-size: clamp(0.9em, 2vw, 1.5em); 
        font-weight: normal;
        text-shadow:
            1px 1px 2px #333,
            -1px -1px 2px #fff,
            2px 2px 4px #075a62;
        color: rgb(236, 123, 2);
        text-align: center;
        line-height: 1.2;
        letter-spacing: 0.1em;
        -webkit-text-stroke: 1px black; 
        margin-top: 5px; /* Pushes it down slightly from the main title */
}



.site-thumb {
        display: block; /* Ensures the image takes up its own space */
        max-width: 100%; /* Important for responsiveness */
        height: auto; /* Maintains aspect ratio */
        transition: opacity 0.3s ease-in-out; /* Smooth transition for fading out */
        width: clamp(60px, 8vw, 120px);
        object-fit: cover;
        border-radius: 50%; 
        box-shadow: 0 2px 6px rgba(0,0,0,0.9);
        aspect-ratio: 1 / 1; 
}
.site-thumb-caption {
    display: block;
    font-size: clamp(0.6em, 1.5vw, 1em); /* Scales font size: min 0.6em, preferred 1.5vw, max 1em */
    color: #eaf588; /* Adjust color to match your header theme */
    text-align: center;
    margin-top: 5px; /* Space between thumbnail and text */
    line-height: 1.2; /* Adjust line height if text wraps */
    -webkit-text-stroke: 0.5px black; /* Subtle stroke for readability */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5); /* Subtle shadow */
    white-space: nowrap; /* Prevents text from wrapping too early */
}
.thumb-and-caption-container {
    position: relative;
    display: inline-block; /* Keeps elements in flow */
    /* Add any other original styles for spacing, etc. */
}
.thumbnail-image-wrapper {
    position: relative; /* Essential for positioning the overlay precisely over the image */
    display: block; 
    overflow: hidden;
}
.thumbnail-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Covers the entire thumbnail-image-wrapper */
    height: 100%; /* Covers the entire thumbnail-image-wrapper */
    background-color: rgb(252, 249, 92); 
    border-radius: 50%; 
    display: flex; /* Use flexbox to center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Hidden from interactions */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s; /* Smooth transition */
    z-index: 5; /* Ensures it's above the image */
}
.contact-link {
    font-size: 1.2em;
    font-weight: bold;
    color: rgb(55, 1, 99);
    text-shadow: 3px 2px 2px white;
    text-decoration: none; /* Removes underline from the link */
    /* border-radius: 5px;  */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effect */
  
}
.contact-link:hover {
    color: #f9fbfb; /* Black text on hover */
}
.thumbnail-image-wrapper:hover .site-thumb {
    opacity: 0; /* Fades out the original thumbnail image */
}
.thumbnail-image-wrapper:hover .thumbnail-hover-overlay {
    opacity: 1; /* Fades in the overlay */
    visibility: visible; /* Makes the overlay interactive */
}
.thumb-and-caption-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the thumbnail and caption horizontally within this container */
    margin-right: 15px; /* Replaces the margin that was on site-thumb */
}



.social-links-section {
    display: flex; 
    margin-bottom: 40px;
    margin-top: 40px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: relative;
    top: 150px;
    z-index: 999;

}
.social-links-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    opacity: 0.78;
    border: 2px solid #07c3c3;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(5, 43, 71, 0.5);
}
.social-button {
    background-color: #f4f956;
    opacity: 1;
    font-size: clamp(1.3em, 2.5vw, 1.7em); 
    color: #29024d;
    padding: clamp(8px, 1.5vw, 12px) clamp(12px, 2vw, 18px);
    border-radius: clamp(10px, 1.5vw, 15px);
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
    flex-grow: 1;
    box-sizing: border-box;
    text-align: center;
}
.social-button:hover {
    background-color: #05a1a1;
    transform: scale(1.05);
    color: white;
}






.main-content-wrapper {
    max-width: 1200px;
    width: 100%;   
    margin: 0 auto;
    padding: px; 
    box-sizing: border-box;   
}
.main-navigation {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
}


.nav-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'bahiana', sans-serif;
    font-size: 1.0em;
    list-style: none;
    padding-inline-start: 0;
    gap: 3px;
    padding: 0;
    margin: 0;            
    transition: color 0.3s ease;
}
.nav-item {
    margin: 0;
    padding: 0;
}
.nav-link {
    font-size: clamp(1.5em, 1.5vw, 1.5em); /* ADDED: Scales font-size */
    color: #eaf588;
    text-decoration: none;
    text-shadow: #090909 2px 2px 2px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9);
    display: block;
    padding: clamp(2px, 1.5vw, 2px);
    border-radius: 5px; 
    border: #f9fbc7 1px solid;
    background-color: rgba(2, 122, 130, 0.4);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, letter-spacing 0.3s ease;
    min-width: clamp(80px, 12vw, 100px); /* MODIFIED: Scales min-width */
    text-align: center;
    box-sizing: border-box; /* ADDED: Includes padding/border in width */
}
.nav-link:hover,
.nav-link:active {
    background-color: #eaf588;
    color: rgb(53, 1, 53);
    cursor: pointer;
    transform: scale(1.05);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.7);
    letter-spacing: 1px;
    text-shadow: 0 2px 2px white;
}


.form-group,
.form-title {
    color: white;
    font-size: 2em;
    -webkit-text-stroke: 2px black;
}

a,
a:link,
a:visited {
    /* color: #3a4302; */
    text-decoration: none;
    transition: color 0.3s, transform 0.2s, text-shadow 0.3s;
    transform: none;
    display: inline-block;
    text-shadow: 1px 1px 1px #ffd997;
}

a:hover,
a:active {
    color: #fdfcfe;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-shadow: black 1px 1px 1px;
    transform: scale(1.05);
}

/* CSS for TV Work page and other video pages */

.project-section .project-title {
    width: 100%;
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 2.8em;
    line-height: 1.2;
}
.project-section {
    margin-top: 180px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    /* margin: 20px 0; */
    padding: 40px 20px;
    border-bottom: 1px solid #eee;
    background-image: url('wackybacky.png');
    background-blend-mode: exclusion;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    border: 1px solid black;
    box-shadow: 2px 2px 4px rgba(3, 3, 3, 0.9);
    box-sizing: border-box;
}
.project-section.alt-background {
    background-color: rgba(255, 255, 255, 0.2);
    background-image: url('backie5.png');
}
.project-title {
    font-family: 'Permanent Marker', sans-serif;
    font-size: clamp(.8em, 2vw, 1.8em); /* Default font size for title */
    color: #faa317;
    text-shadow: rgba(176, 133, 236, 0.872) 1px 1px 2px;
    -webkit-text-stroke: 1px black; /* Still using this from your original */
    width: 100%;
    text-align: center; 
    margin-top: 0;
    margin-bottom: 30px;
    line-height: 1.2;
}
.project-content {
    flex: 1;
    min-width: 250px;
    padding: 0 20px; 
    box-sizing: border-box;
    margin-bottom: 20px; /* Space below content on small screens */
}
.project-description {
    font-family: 'Bebas Neue', sans-serif;
    color: #026868;
    width: 100%;
    margin-bottom: 20px;
    font-size: clamp(1.1em, 2vw, 1.6em) ; /* Using relative unit for better scaling */
    text-align: center; /* Centers description text on smaller screens */
    -webkit-text-stroke: 1px black;
    line-height: 1.2;
    
}
.video-embed-container {
    width: 100%; /* Takes full width of parent on small screens */
    max-width: 560px; /* Limits max width to video's intrinsic width */
    margin: 20px auto; /* CENTERS THE CONTAINER HORIZONTALLY and adds vertical space */
    display: flex; /* Make it a flex container */
    justify-content: center; 
    /* align-items: center;
    overflow: hidden;  */
}
.video-embded-container iframe {
    width: 100%;
    height: 315px;
    max-width: 560px;
}
 
















/* ========================================================= */
/* CSS for Career Timeline Slider */
/* ========================================================= */

/* Base Layout & Container */
.career-slider-container {
    position: relative;
    max-width: 90%; 
    margin-top: 120px;
    /* margin: 0px auto; */
    overflow: hidden; 
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9; 
    border: 1px solid #e0e0e0; /* Subtle professional border */
}
.career-slider-track {
    display: flex; 
    transition: transform 0.5s ease-in-out; 
}
.career-card {
    flex: 0 0 100%; /* Each card takes up 100% of container width */
    box-sizing: border-box;
    padding: 0; /* Important: No padding here */
    max-height: 600px;/* min-height: 250px;  */
    display: flex; /* Use flex for side-by-side (image and content) */
    background-color: rgba(170, 169, 179, 0.9); 
    background-image: url('backie5.png');
    background-blend-mode: overlay;
}
.card-image-wrapper {
    flex: 0 0 40%; 
    overflow: hidden; 
}
.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills space cleanly */
    display: block;
}
.card-content {
    flex: 0 0 60%;
    font-family: 'bebas neue', sans-serif;
    padding: 20px; /* Padding for the text block */
    margin: 10px;
    box-sizing: border-box;
    text-align: left; 
    font-size: 1.0em;
    color: #698795; 
    display: flex;             /* 1. Turn the content container into a flex container */
    flex-direction: column;    /* 2. Arrange the text/children vertically (top-to-bottom) */
    justify-content: flex-start;   /* 3. Center all children along the main axis
    /* line-height: 1.5; */
    -webkit-text-stroke: 1px black; 

}
.card-content h2 {
    font-family: 'bahiana', sans-serif;
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 5px;
    color: #911a56;
    -webkit-text-stroke: 1px black; 
}
.card-content p {
    font-family: 'Permanent Marker', sans-serif;
    font-size: 1.1em;
    margin: 10px 0;
     -webkit-text-stroke: .1px black;
}
.card-content p1 {
    font-family: 'Marker felt', sans-serif;
    font-size: 1.3em;
    margin: 10px 0;
     -webkit-text-stroke: .1px black;
}
.card-content p2 {
    font-family: 'bahiana', sans-serif;
    font-size: 1.4em;
    margin: 10px 0;
     -webkit-text-stroke: .1px black;
}
.card-content .date {
    color: #007aff; /* Apple-friendly blue */
    -webkit-text-stroke: 1px black; 
    font-size: 0.9em;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 15px;
}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    font-size: 1em;
    border-radius: 6px;
    transition: background 0.3s;
}
.slider-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}
.prev-btn {
    left: 10px;
}
.next-btn {
    right: 10px;
}
.slider-btn:disabled {
    background: rgba(180, 180, 180, 0.6);
    cursor: not-allowed;
}
.card-image-wrapper img {
    /* Existing Styles */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
    /* NEW: Apply a smooth transition for the transformation */
    transition: transform 0.4s ease-in-out; 
}
.card-image-wrapper:hover img {
    /* NEW: Scale the image to 120% (20% larger) */
    transform: scale(1.2); 
}
.career-card {
    /* NEW: Ensures any scaled image part is clipped to the card boundaries */
    overflow: hidden; 
}



#full-image-modal {
    position: fixed; /* Fixes it in relation to the viewport */
    top: 0;
    left: 0;
    width: 90%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Dark semi-transparent background */
    display: flex; /* Centers the image inside the modal */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensures it's above everything else on the page */
}
#modal-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain; /* Ensures the whole image is visible without cropping */
}
#modal-close-btn {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
#modal-close-btn:hover {
    opacity: 1;
}





.front-career-card {
    flex: 0 0 100%; 
    box-sizing: border-box;
    border-radius: 12px;
    padding: 0; /* Important: No padding here */
    /* min-height: 250px;  */
    /* display: flex; Use flex for side-by-side (image and content) */
    background-color: rgba(255, 255, 255, 0.9); 
    background-image: url('backie2.png');
    background-blend-mode: overlay;
    opacity: .8;
    max-width: 1400px; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px; 
    margin-bottom: 0px;
  
    
}   
.front-card-image-wrapper {
    position: relative;
    height: auto;
    overflow:  hidden;  
    opacity: .7;

}
.front-career-card img {
  /* This ensures the image shrinks to 100% of the max-width 
     set on its parent container (.front-career-card) */
    max-width: 100%;
    width: 100%;
    height: auto; 
    /* object-fit: cover; */
    display: block;
}






 @media (min-width: 768px) { /* Styles for screens 768px and wider (tablets and desktops) */
    .project-section {
        /* justify-content: space-between; Distribute items with space between them */
        align-items: flex-start; /* Align content to the top of the flex container */
    }

    .project-title {
        text-align: left; /* Align title to the left on larger screens */
        font-size: 3.5em; /* Larger font for desktop titles */
        margin-bottom: 20px; /* Reduce bottom margin a bit */
    }

    .project-content {
        flex: 1 1 calc(50% - 30px); /* Take roughly half width, allow shrinking, with gap */
        order: 1; /* Ensure content comes first visually */
        padding: 0 20px 0 0; /* Padding on the right, no left padding */
        margin-right: 20px; /* Space between content and video */
        Max-width: 65ch; /* Limit max width for better readability */
    }

    .project-description {
        text-align: left; /* Align description text to the left */
    }

    .video-embed-container {
        flex: 0 0 560px; /* Fixed width for video, prevent shrinking/growing */
        margin: 0; /* Remove auto margins to let flex handle spacing */
        order: 2; /* Ensure video comes second visually */
    }

}


/* --- Responsive Design (Mobile / iPhone) --- */
@media (max-width: 650px) {
    /* Stack content vertically */
    .career-card {
        flex-direction: column; 
    }

    .card-image-wrapper, 
    .card-content {
        /* flex: none; Reset flexible sizing */
        min-width: 100%; 
        min-height: auto;
    }

    .career-slider-container {
        width: 95%; 
    }
}









.site-footer{
    font-family: Limelight, sans-serif; 
    color: rgb(255, 249, 78);
    box-shadow: 1pt 1pt 1pt black;

}