/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header nav.desktop-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px ;
    width: 100%;
}
header nav.desktop-nav ul {
    display: flex;
    margin: 0px;
    padding: 0;
    list-style-type: none;
}

header nav.desktop-nav ul li {
    margin-left: 20px;
}

header nav.desktop-nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px;
}

body, html {
    height: 100%;
    font-family: 'Arial', sans-serif;
    overflow-x: hidden; /* Prevent horizontal scrollbar */
}
.mobile-footer-info {
    display: none; /* Hidden by default */
    flex: 1 0 100%; /* Take full width of the nav bar */
    justify-content: center; /* Center content if using flexbox */
    text-align: center; /* Center text */
    color: #FFF; /* Adjust color based on your mobile tab bar's theme */
    font-size: 12px; /* Smaller font size for the footer info */
    padding: 10px; /* Add some padding */
}

/* Navigation Styles */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    position: fixed;
    width: 100%;
    z-index: 1000; /* Above all other content */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
}

nav .logo {
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}
.logo img {
    height: 100px; /* Adjust the height as needed */
    width: auto; /* Maintains the aspect ratio of the image */
    /* Add any additional styling as needed */
}

.active {
    color: #d4af37;; /* Gold color for active item */
    pointer-events: none; /* Disables clicking */
	cursor: default;}


nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
    margin-left: 20px;
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #aaa;
}

/* Video Background Styles */
.video-background {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
    background-color: black; /* Fallback color */
}

#background-video {
    width: 100%;
    height: 100vh;
    object-fit: cover; /* Cover the entire viewport */
}

/* After Video Content Styles */
.after-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none; /* Hidden initially */
    background-size: cover;
    background-position: center;
}

.after-video img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.header-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10; /* Above the background image */
    color:black;	
}

.tv-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Prevents the overlay from capturing mouse clicks */
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.05),  /* Adjust color and opacity for grid lines */
        rgba(255, 255, 255, 0.05) 1px,
        transparent 1px,
        transparent 3px  /* Adjust spacing for grid line thickness */
    );
    z-index: 1; /* Adjust if necessary to position over the video */
}

/* Styles for large screens */
nav ul {
    list-style-type: none;
    display: flex;
}

nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px;
    display: block;
}




body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0; /* Reset default margin */
	background-color: dimgray;
}

/* Make the content area grow to fill available space */
.youtube-live-stream {
    flex-grow: 1;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Responsive iframe styles */
.youtube-live-stream iframe {
    max-width: 100%;
    height: 70%;
    border: 0;
	width: 70%;
}

/* Footer Styles */
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    color: white;
    text-align: center;
    padding: 20px 0;
    z-index: 10;
	
}

footer p {
    margin: 5px 0; /* Spacing between lines */
    font-size: 0.9em; /* Adjust font size as needed */
}
main {
    width: 100%;
    margin-top: 75px; /* Adjust this value based on the actual height of your header */
    /* Additional styling for main content area */
}
button,
input[type="submit"],
input[type="button"],
a.button { /* Assuming you use <a> tags with a class for buttons as well */
    background-color: #333333; /* Dark grey background */
    color: #d4af37;; /* Gold font color */
    border: none; /* Removes the default border */
    padding: 10px 20px; /* Adjust padding as needed */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px; /* Adjust font size as needed */
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px; /* Optional: adds rounded corners */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover { /* Hover state for added interactivity */
    background-color: #4d4d4d; /* Slightly lighter grey for hover effect */
    color: #fff; /* Optional: change font color on hover */
}

/* Hide mobile tab bar on larger screens */

.desktop-nav {
    padding: 10px 0; /* Reduce padding to make the nav thinner */
	  display: flex; /* Enables flexbox */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    flex-direction: row; /* Ensures items are laid out in a row */
   
}

.mobile-tab-bar {
    display: none;
}

.logo-container {
	display: inline-block;
    text-align: left; /* Center the logo */
    padding: 0px 0; /* Add some padding around the logo */
	flex: 1;
}




.desktop-nav ul li {
    text-decoration: none;
    color: white;
    padding: 10px;
}


.logo-container img {
    max-width: 150px; /* Makes the logo responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Aligns the logo correctly within its container */
    margin:  0px auto; /* Centers the logo horizontally */
	padding: 10px;
	min-width: 10%;
	}

@media (max-width: 768px) {
    /* Hide desktop navigation on smaller screens */
	.desktop-nav{
		display: none;
	}
	.desktop-nav ul li{
		display: none;
	}
	.logo-container img{
		padding: 10px
	}
    /* Style and display mobile tab bar */
    .mobile-tab-bar {
        display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		text-align: center;
        justify-content: space-around;
        background-color: #333; /* Dark background for contrast */
        color: #fff;
        position: fixed;
        bottom: 0;
        width: 100%;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.2); /* Subtle shadow for elevation */
        z-index: 1000; /* Ensure it's above other content */
		padding-bottom: 20px;
		align-items: center;
		
    }

    .mobile-tab-bar a {
        text-align: center;
        flex-grow: 1;
        padding: 10px 0;
        color: #d4af37; /* Gold color for text */
        text-decoration: none;
        font-size: 14px;
    }

    .mobile-tab-bar a:active, .mobile-tab-bar a:focus, .mobile-tab-bar a:hover {
        background-color: #555; /* Slightly darker on interaction */
    }
		
main {
    width: 100%;
    margin-top: 80px; /* Adjust this value based on the actual height of your header */
	margin-bottom: 40px;
	margin-left: 10px;
	margin-right: 10px;
    /* Additional styling for main content area */
}
	
	footer{
		display: none;
	}
	
/* Styling for the mobile footer info */
.mobile-footer-info {
    display: flex; /* Use flexbox for layout */
    flex-direction:  row; /* Layout children in a row */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Align items vertically */
    width: 100%; /* Take full width to accommodate centering */

    box-sizing: border-box; /* Include padding in the width calculation */
}
	.mobile-footer-info p {
    margin: 0 5px; /* Add margin between paragraphs if needed */
    white-space: nowrap; /* Prevent wrapping to ensure one line */
		color: grey;
}
	 .mobile-tab-bar .mobile-footer-info {
        display: flex; /* Ensure it's displayed in mobile view */
    }
	
	
 
 
    


	
}