/*for the video part*/
        main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px 0; /* Removed side padding to allow full-width mobile */
        }

        /* --- THE VIDEO CONTAINER --- */
        .video-container {
            position: relative;
            /* Desktop Size: Smaller, similar to your original image */
            width: 70%; 
            max-width: 800px; 
            aspect-ratio: 16 / 9;
            margin-bottom: 30px;
            background: #000;
            transition: width 0.3s ease;
        }

        video {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: contain;
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
        }

        video.active {
            opacity: 1;
            z-index: 3;
        }

        #project-title {
            font-size: clamp(1rem, 2vw, 1.3rem);
            margin: 10px 20px;
            font-weight: 400;
        }

        .description {
            max-width: 600px;
            font-size: 0.9rem;
            line-height: 1.6;
            color: #aaa;
            margin: 0 20px 40px 20px;
        }

        /* --- FOOTER --- */
        .navigation-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 40px 60px;
            width: 100%;
            box-sizing: border-box;
            margin-top: auto;
        }

        .nav-btn {
            background: none;
            border: none;
            color: white;
            font-size: clamp(0.85rem, 1.5vw, 1rem);
            cursor: pointer;
            display: flex;
            align-items: center;
            max-width: 45%;
        }

        .nav-btn:disabled { visibility: hidden; }
        .prev::before { content: "< "; margin-right: 8px; }
        .next::after { content: " >"; margin-left: 8px; }

        /* --- MOBILE ADAPTATION --- */
        @media (max-width: 768px) {
            .video-container {
                width: 100%; /* Video takes full width on mobile */
                max-width: none;
                margin-bottom: 20px;
            }
            
            .navigation-footer {
                padding: 30px 20px;
            }

            header {
                padding: 15px 20px;
            }
        }




 .title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Space between text and icon */
    margin-top: 10px;
}

#project-title {
    margin: 0; /* Remove default margins to align with icon */
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 400;
}

.mute-toggle {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    transition: opacity 0.3s;
}

.mute-toggle:hover {
    opacity: 0.6;
}

/* Optional: style for when muted to make it look 'dimmed' */
.is-muted {
    color: #666;
}


.credits {
    width: 100%;
    text-align: center;
    padding-bottom: 30px; /* Space from the very bottom edge */
    font-style: italic;
    font-size: 0.85rem;
    color: #555; /* Subtle grey so it doesn't distract from main content */
}

/* Ensure the footer doesn't squash the credits on small screens */
.navigation-footer {
    margin-top: auto;
    padding-bottom: 20px; 
}

.title-row {
    display: flex;
    justify-content: center;
    /* This ensures the bottom of the letters in the title and link line up */
    align-items: baseline; 
    gap: 12px;
    margin-bottom: 10px;
}

.vr-link {
    font-size: 0.75rem; /* Smaller than the title */
    color: #fff;
    text-decoration: underline;
    font-style: italic;
    opacity: 0.8;
    transition: opacity 0.2s, color 0.2s;
}

.vr-link:hover {
    opacity: 1;
    color: #ffff00; /* Subtle yellow highlight on hover */
}

.mute-toggle {
    background: none;
    border: none;
    padding: 0;
    /* Nudge the icon slightly so it doesn't look too high next to the text baseline */
    transform: translateY(3px); 
    cursor: pointer;
}

.header{
    z-index: 5;
}