@media (max-width: 992px) {
    /* Position the nav links off-screen to create the drawer */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Start off-screen */
        width: 80%;
        max-width: 320px;
        height: 100%;
        background: var(--bg-gradient);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        gap: 30px;
        z-index: 1001;
        transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        list-style: none;
    }

    /* The class that makes the drawer visible */
    .nav-links.active {
        right: 0; /* Slide in */
    }

    .nav-links li {
        margin: 0 auto!important;
    }

    .nav-links a {
        display: block;
        padding: 20px;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        text-decoration: none;
        color: var(--text-gray);
    }

    /* Show mobile-only elements */
    .hamburger {
        display: flex;
    }
    .drawer-header {
        display: flex;
        width: 100%;
    }

    /* Special handling for the contact button in the drawer */
    .nav-links .contact-btn {
        margin: 20px;
        width: calc(100% - 40px);
        text-align: center;
        justify-content: center;
    }
}

/* Media query for desktop view */
@media (min-width: 992px) {
    /* Show desktop nav links and hide hamburger */
    .nav-links {
        display: flex;
        position: static;
        height: auto;
        width: auto;
        background: none;
        border: none;
        flex-direction: row;
        padding: 0;
        transition: none;
        gap: 30px;
    }

    .hamburger {
        display: none;
    }

    /* Hide mobile-only elements on desktop */
    .drawer-header,
    .overlay {
        display: none !important;
    }

    .nav-links li {
        width: auto;
        justify-content: flex-start!important;
    }
    .nav-links .contact-btn {
        margin: 0;
        width: auto;
    }
}

@media (max-width: 768px) {
    .nav-links li a {
        padding: 0!important;
        border: none!important;
        background-color: transparent!important;
    }
}