body {
    font-family: 'Inter', sans-serif;
    color: #E3E9F5;
    background-color: #0A0A1F;
}

h1, h2, h3 {
    font-family: 'Orbitron', sans-serif;
    color: #00FFF3;
    text-shadow: 0 0 8px rgba(0,255,243,0.6), 0 0 15px rgba(106,82,225,0.7);
}

header {
    position: relative;
    height: 500px; /* Adjust the height based on how much space you want */
    overflow: hidden;
    color: white; /* Ensure text stands out on the video background */
}

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Place the video behind the content */
}

.header-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 150px; /* Adjust based on your preferred content position */
}

.logo {
    width: 350px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Make sure the image behaves as a block element */
    margin: 20px auto;
}

nav {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 20px;
}

nav button {
    padding: 10px 22px;
    margin: 0 8px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;

    text-transform: uppercase;
    letter-spacing: 1px;

    background-color: #4A28CB; /* deep tech purple */
    color: #E3E9F5; /* frost white */
    border-radius: 6px;

    transition: 
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.2s ease,
        box-shadow 0.4s ease;
}

nav button:hover {
    background-color: #00D2FF;
    color: #0A0A1F;
    box-shadow: 0 0 20px #00D2FF, 0 0 35px rgba(0, 210, 255, .6);
    transform: translateY(-2px);
}

nav button {
    position: relative;
}

nav button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow:
        0 0 20px rgba(180, 140, 255, 0.9),
        0 0 40px rgba(120, 200, 255, 0.8);
}

nav button:hover::after {
    opacity: 1;
}


nav button.active {
    background-color: #6B52E1; 
    color: #E3E9F5;
    box-shadow: 0 0 15px #6B52E1;
}

h1 {
    color: rgb(0, 0, 0);
    text-align: center;
    margin: 10px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 3em;
}

main {
    padding: 20px;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    width: 100%;
    bottom: 0;
    
}

html {
    scroll-behavior: smooth;
}