@media (max-width: 600px) {

    .section {
        padding: 48px 0;
    }

    .hero {
        padding: 70px 0;
    }

    .nav-actions .btn {
        padding: 9px 12px;
    }

    .hero p {
        font-size: 17px;
    }

}


/* =========================
   RESPONSIVE HEADER
========================= */

@media (max-width: 800px) {

    .nav {
        position: relative;
    }

    .mobile-menu {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        flex-shrink: 0;
    }

   .site-nav {
    position: absolute;

    top: calc(100% + 1px);
    left: 0;
    right: 0;

    display: none;

    flex-direction: column;
    align-items: stretch;

    gap: 0;

    padding: 12px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--primary) 10%,
                transparent
            ),
            color-mix(
                in srgb,
                #06b6d4 8%,
                transparent
            ),
            color-mix(
                in srgb,
                #8b5cf6 10%,
                transparent
            )
        ),
        color-mix(
            in srgb,
            var(--bg) 88%,
            transparent
        );

    backdrop-filter:
        blur(20px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(150%);

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 20%,
            var(--border)
        );

    box-shadow:
        var(--shadow);
}

    .site-nav.open {
    display: flex;
}

    .site-nav > a:not(.btn) {
        display: flex;

        align-items: center;

        gap: 12px;

        padding: 13px 14px;

        border-radius: 10px;

        color: var(--text);
    }

    .site-nav > a:not(.btn):hover {
        background: var(--soft);
        color: var(--primary);
    }

    .site-nav .nav-actions {
        width: 100%;

        margin-top: 8px;

        padding-top: 8px;

        border-top:
            1px solid var(--border);
    }

    .site-nav .nav-actions .btn {
        width: 100%;
        justify-content: center;
    }

}