.no-scroll {
    overflow: hidden;
}

.mobile-nav-toggle {
    display: none;
}

.primary-nav-links {
    display: flex;
    gap: 25px;
}

.primary-nav-links li a {
    color: black;
}

@media (max-width: 767px) {
    .primary-navigation {
        position: fixed;
        height: 70dvh;
        width: 100vw;
        inset: 0 0 0 0;
        background-image: url(../images/test.jpg);
        background-size: contain;
        background-position: center;
        z-index: 1000;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transform: translateX(-100%);
    }

    .primary-nav-links {
        flex-direction: column;
        gap: 40px;
    }

    .primary-nav-links li a {
        color: rgb(35, 34, 34);
    }

    .secondary-navigation {
        position: fixed;
        height: 30dvh;
        width: 100dvw;
        inset: 70% 0 0 0;
        z-index: 6000;
        flex-direction: column;
        transform: translateX(100%);
        background-color: #0e754f;
    }

    .mobile-nav-toggle {
        display: block;
        position: absolute;
        z-index: 2000;
        right: 1rem;
        color: black;
        border: 1px solid black;
    }

    .mobile-nav-toggle::after {
        content: "\f0c9"; /* Font Awesome unicode for fa-bars */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 1rem; /* Adjust icon size */
        color: inherit; /* Inherit color from parent */
    }

    .mobile-nav-toggle[aria-expanded="true"] {
        color: black;
        border: 1px solid black;
    }

    .mobile-nav-toggle[aria-expanded="true"]::after {
        content: "\f00d"; /* Font Awesome unicode for fa-times */
    }
}