.video-link {
    color: black;
}

.video-link:hover {
    color: #5CBBFF;
}

.final {
    padding-bottom: 1.7rem;
}

/* Media Query for Small Screens */
@media (max-width: 768px) {
    /* Stack logo and nav items on smaller screens */
    nav {
        flex-direction: row; /* Keep the logo on the left */
        justify-content: space-between;
        text-align: center;
        padding: 1rem;
    }

    /* Reduce logo size for mobile */
    .homepage {
        max-width: 60px; /* Adjust logo size */
        margin-bottom: 1rem; /* Add margin for spacing */
    }

    .navigation ul {
        gap: 1rem; /* Add gap between items */
        font-size: 1.3rem; /* Reduce font size on mobile */
    }

    .video {
        width: 100%; /* Make the video container responsive */
        padding: 0; /* Remove any extra padding */
    }

    video {
        width: 100%; /* Make the video width scale to its container */
        height: auto; /* Maintain aspect ratio */
    }
}