/* Basic Styles */
body, html {
    margin: 0;
    padding-right: var(--scrollbar-width, 0px); /* Dynamically adjust padding for scrollbar */
    overflow-y: scroll; /* Allow scrolling */
    scrollbar-width: none; /* For Firefox: Hides scrollbar */    
    width: 100%;
    height: 100%;
    font-family: Helvetica, Arial, sans-serif;
    color: white;
    background: black;
    z-index: -2; /* Move background behind the video */
    position: relative; /* Ensure it participates in stacking */

}


/* Video Background */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Keep it in the background */
    overflow: hidden;
    transition: opacity 0.3s ease;
    
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Header and Navbar */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0px; /* Adjust side padding as needed */
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Ensure full width */
    z-index: 3;
    background: white; 
    
}

.site-title {
    font-size: 20px;
    font-weight: 1000;
    color: black;
    margin-left: 10px; /* Adjust this value to move it further left */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0 0; /* Moves links slightly to the left */
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-end; /* Align links to the right */
    flex-grow: 1; /* Allow the links to take available space */ 
    margin: 0 15px 0 0; /* Reduce the right margin further */

}

nav ul li {
    position: relative;
}


nav ul li:nth-child(1) {
    margin-right: 10px; /* Adjust this value for more/less space */
}

nav ul li a {
    text-decoration: none;
    color: black;
    font-weight: 500;
    padding: 0px;
    transition: color 0.3s ease;
    font-size: 20px; /* Adjust font size */
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #00bcd4;
}

.arrow-down {
    margin-left: 0px;
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(45deg);
    transition: border-color 0.3s;
}

nav ul li a:hover .arrow-down {
    border-color: #00bcd4;
}


.site-title a {
    text-decoration: none; /* Remove underline */
    color: black; /* Ensure the text matches the header color */
}

.site-title a:hover {
    color: #00bcd4; /* Add a hover effect */
}


.navbar-spacer {
    height: 20px; /* Adjust height as needed */
    background: transparent; /* Ensure it doesn't have a visible color */
}



/* Dropdown Parent */
.dropdown {
    position: relative; /* Create a positioning context for the mega-menu */
}



/* Mega Menu Styling */
.mega-menu {
    display: none; /* Hidden by default */
    position: fixed; /* Keeps the menu aligned properly */
    left: 0;
    top: calc(0% + 60px); /* Adjust the value based on the gap size */
    width: 100vw; /* Full width of the viewport */
    overflow: clip; /* Prevents the menu from being affected by the scroll gap */
    background-color: white;
    z-index: 20;
    font-size: 20px;


}



/* Mega Menu Content */
.mega-menu-content {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align text to the left */
    gap: 10px; /* Add spacing between links */
    padding: 20px 152px; /* Adjust left padding to move content */   
    margin: 0 auto; /* Center the content horizontally */
    max-width: 1200px; /* Limit the width of the dropdown */
    max-width: 182px;
    position: relative;
    margin: 0 0 0 auto; /* Align menu to the right within the container */


}




.dropdown:hover .mega-menu {
    display: block; /* Show the menu on hover */
    
}

/* Columns inside the Mega Menu */
.menu-column {
    margin-top: -30px; /* Adjust this value to move text up */
    flex: 1;
    padding: 0px;
}

.menu-column a {
    display: block;
    padding: 8px 0;
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
    
}

.menu-column a:hover {
    color: #00bcd4;
}

/* Overlay Styling */
.overlay {
    position: fixed; /* Covers the entire screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.30); /* Semi-transparent black */
    z-index: -1; /* Above the content but below the menu and navbar */
    display: none; /* Hidden by default */
    
}











/* Mobile Menu */
.mobile-menu {
    display: flex; /* Flex layout for alignment */
    flex-direction: column;
    justify-content: center; /* Center links vertically */
    align-items: center; /* Center links horizontally */
    position: fixed;
    top: 60px; /* Leave space for the navbar */
    left: 0;
    background: white; /* White background */
    width: 100%; /* Full width */
    height: calc(100px - 50px + 200px); /* Extend background by 100px */
    z-index: 3;
    list-style: none;
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    gap: 20px; /* Spacing between links */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Ensure it's not interactable */
    transition: opacity 0.3s ease-in-out; /* Opacity animation */
}

/* Show Mobile Menu */
.mobile-menu.show {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Make menu interactable */
}


/* Mobile Menu Links */
.mobile-menu li {
    text-align: center;
}

.mobile-menu li a {
    text-decoration: none;
    font-size: 20px;
    font-weight: normal;
    color: black; /* Black text for white background */
    transition: color 0.3s ease;
}

.mobile-menu li a:hover {
    color: #00bcd4; /* Highlight color */

}

/* Keep Navbar Visible */
.header-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4; /* Ensure it's above the mobile menu */
    background: white; /* Ensure consistent navbar background */

}

/* Hamburger Menu */
.hamburger-menu {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 5; /* Keep it above other elements */
    position: absolute; /* Use absolute positioning */
    top: 50%; /* Center vertically */
    right: 14px; /* Move to the left */
    transform: translateY(-50%); /* Adjust for vertical centering */
}


.hamburger-menu span {
    display: block;
    height: 3px;
    background-color: black;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* Responsive Breakpoint */
@media screen and (max-width: 768px) {
    .desktop-menu {
        display: none; /* Hide desktop menu */
    }

    .hamburger-menu {
        display: flex; /* Show hamburger menu */
    }
}

/* Prevent Scrolling */
.no-scroll {
    overflow: hidden;
}

/* Mobile Overlay Styling */
.mobile-overlay {
    position: fixed; /* Covers the entire screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Semi-transparent dark background */
    z-index: 2; /* Below the menu but above the content */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Ensure it's not interactable */
    transition: opacity 0.3s ease-in-out; /* Smooth fade-in and fade-out */
}

/* Show Mobile Overlay */
.mobile-overlay.show {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Make overlay interactable */
}






















/* Intro Text - Desktop View */
.intro-text {
    position: absolute;
    top: 55%; /* Desktop-specific positioning */
    left: 100px; /* Desktop-specific alignment */
    transform: translateY(-50%); /* Center vertically */
    text-align: left; /* Align text to the left */
    z-index: 0;
    color: white; /* Text color */
}

.intro-text h2 {
    font-size: 36px; /* Default heading font size */
    font-weight: 700;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Add subtle shadow */

}

.intro-text p {
    font-size: 18px; /* Default paragraph font size */
    font-weight: 400;
    margin-top: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Add subtle shadow */

}

/* Intro Text - Responsive View */
@media screen and (max-width: 768px) {
    .intro-text {
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* True centering */
        text-align: center; /* Center-align the text */
        width: 90%; /* Optional: Prevent text from overflowing */
    }

    .intro-text h2 {
        font-size: 24px; /* Smaller heading font size for responsive view */
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Adjust shadow for smaller text */

    }

    .intro-text p {
        font-size: 14px; /* Smaller paragraph font size for responsive view */
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Adjust shadow for smaller text */

    }
}

/* Optional: Extra Small Screens */
@media screen and (max-width: 480px) {
    .intro-text h2 {
        font-size: 20px; /* Further reduce heading font size */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Slightly softer shadow */
    }

    .intro-text p {
        font-size: 12px; /* Further reduce paragraph font size */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Slightly softer shadow */
    }
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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