html {
    scroll-behavior: smooth;
}

.image {
    position: absolute;
    height: 300px;
    aspect-ratio: 1;
    margin-right: -180px;
}


/* Mobile Menu Styling */
#navMenu {
    transition: all 0.3s ease-in-out;
}

#navMenu.hidden {
    display: none !important;
}

/* Mobile Navigation - Full width dropdown */
@media (max-width: 768px) {
    #navMenu {
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        background: rgba(5, 7, 10, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        flex-direction: column;
        gap: 0;
        padding: 0;
        width: 100%;
    }

    #navMenu a {
        padding: 16px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: block;
        transition: background-color 0.2s ease;
    }

    #navMenu a:hover {
        background-color: rgba(126, 81, 251, 0.1);
    }

    #navMenu a:last-child {
        border-bottom: none;
    }
}

/* Mobile Menu Button Animation */
#mobileMenuBtn {
    transition: all 0.3s ease;
}

#mobileMenuBtn:hover {
    color: rgb(255, 255, 255);
}

/* Ensure header stays on top of mobile menu */
header {
    z-index: 50;
}

#navMenu {
    z-index: 40;
}

/* Improved mobile padding and spacing */
@media (max-width: 640px) {
    nav {
        padding: 0 16px !important;
    }

    h1 {
        font-size: clamp(1.875rem, 5vw, 3.5rem);
    }

    h2 {
        font-size: clamp(1.5rem, 4vw, 2.25rem);
    }

    nav {
        height: 45px;
    }
}