/* ========================================
   Responsive navigatie
   ======================================== */

@media (max-width: 768px) {

    .nav-container {
        position: relative;
    }

    .menu-toggle {
        display: block;

        border: none;
        background: none;
        color: var(--color-white);

        font-size: 2rem;
        cursor: pointer;

        padding: 5px;
    }

    .nav-menu {
        display: none;

        position: absolute;
        top: 70px;
        left: 0;
        right: 0;

        background: var(--color-primary);

        flex-direction: column;
        gap: 0;

        z-index: 1000;
    }

    .nav-menu.is-open {
        display: flex;
    }

    .nav-menu li {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-menu a {
        display: block;
        padding: 15px 20px;
    }

    .nav-menu a:hover {
        background: var(--color-secondary);
    }

    .hero {
        min-height: 60vh;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .hero p {
        font-size: 1.1rem;
    }
}