h1 {
    font-family: 'Exo 2', sans-serif;
}

h3 {
    font-family: 'Exo 2', sans-serif;
}

p, ul {
    font-family: 'Exo 2', sans-serif;
    color: white;
}

a {
    color: white;
    text-decoration: none;
}

body {
    margin: 0px;
    color: white;
}

/* Loading Screen Styles */
#loading-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

#loading-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader {
    border: 8px solid #333;
    border-top: 8px solid white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.Header {
    display: flex;
    margin: auto;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    height: 80px;
}

.Header .Title {
    justify-content: center;
    margin: 0px;
}

.Header .Title h1 {
    margin: 0px;
}

.Header .Title p {
    margin: 0px;
}

.NavDiv {
    margin: 0;
    padding: 0;
    width: auto;
    border: none;
}

.NavList {
    display: flex;
    list-style-type: none;
    gap: 20px;
    padding: 0;
    margin: 0;
}

/*
    Video Section
    This section contains the main video and is part of the normal document flow.
*/

.HeroVideoSection {
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

.HeroVideoSection video {
    width: 90%;
    max-width: 1200px;
    height: auto;
    border-radius: 10px;
}

.VimeoSection {
    background-color: #000;
    padding: 50px 0;
}

.VimeoContainer {
    width: 90%;
    max-width: 1200px; /* Limits the section width to 1200px */
    margin: 0 auto; /* Centers the container on the page */
}

.VimeoContainer h1 {
    text-align: left;
    color: white; /* Ensures the text is visible */
    margin-bottom: 20px; /* Adds space between the header and the video */
    font-size: 2em; /* Adjust the font size as needed */
}

.VideoSection {
    width: 100%;
    margin-top: 100px;
    /*text-align: center;*/
}

.VideoSection video {
    max-width: 1200px;
    height: auto;
    border-radius: 10px;
}

.VideoContainer {
    width: 90%;
    max-width: 1200px; /* Limits the section width to 1200px */
    margin: 0 auto; /* Centers the container on the page */
}

.VideoSection h1 {
    text-align: left;
    color: white; /* Ensures the text is visible */
    margin-bottom: 20px; /* Adds space between the header and the video */
    font-size: 2em; /* Adjust the font size as needed */
}



/*
    New Section Styles
    This container holds the new content and defines its width.
*/

.NewSection {
    background-color: #black;
    padding: 50px 0;
}

.SectionContainer {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/*
    Flexbox Layout for Content Block
    This makes the video and text sit side-by-side on large screens and stack on mobile.
*/
.ContentBlock {
    display: flex;
	margin-top:30px;
    justify-content: space-between;
    align-items: center; /* This will vertically center both the text and the video */
    gap: 40px;
}

.ImageContainer {
    flex-basis: 60%;
    max-width: 60%;

}

.ImageContainer video {
    width: 100%;
    height: auto;
    max-height: 800px; /* Example value. Adjust to your preference. */
    border-radius: 10px;
    /* border: 2px solid white; */
}

.ImageContainer img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    /*border: 2px solid white;  Added white border */
}

.TextContent {
	display: flex;
	flex-direction: column;
	align-items: left;
	justify-content: center;
    flex-basis: 40%;
    max-width: 40%;
    color: white;
}

.TextContent h3 {
    font-size: 2em;
    margin-bottom: 0.1em;
}

.TextContent .Date {
    font-size: 0.8em;
    color: #bbb;
    margin-bottom: 0.01em;
}

.TextContent .Tags {
    font-size: 0.8em;
    color: #bbb;
    margin-bottom: 0.1em;
}

/*
    Contact Section
    This section is a call-to-action with contact information. --------------------------------
*/

.ContactSection {
    background-color: #000;
    padding: 80px 0;
    text-align: center;
}

.ContactContainer {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
}

.ContactContainer h3 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.ContactIntro {
    font-size: 1.2em;
    color: #bbb;
    margin-bottom: 40px;
}

.ContactInfo p {
    font-size: 1.1em;
    line-height: 1.6;
}

.ContactInfo a {
    color: #00aaff;
    text-decoration: underline;
}

/* Adds space between the last section and the footer */
.SiteFooter {
    background-color: #000;
    color: #888;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
    margin-top: 50px; /* Adds space between the last section and the footer */
}

/*
    Media Query for Mobile Devices
    This ensures the layout stacks vertically on smaller screens.
*/
@media (max-width: 768px) {
    .ContentBlock {
        flex-direction: column;
    }

    .ImageContainer, .TextContent {
        flex-basis: 100%;
        max-width: 100%;
    }
}