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

@media (max-width: 991px)
{
    .navbar-collapse
    {
        padding:
            20px 0;
    }

    .navbar-nav
    {
        align-items:
            stretch !important;
    }

    .nav-cta
    {
        display:
            inline-block;

        margin-top:
            10px;
    }

    .footer-grid
    {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .footer-bottom
    {
        flex-direction:
            column;
    }
}


@media (max-width: 575px)
{
    .container
    {
        width:
            min(
                calc(100% - 28px),
                var(--container-width)
            );
    }

    .navbar
    {
        min-height:
            70px;
    }

    .site-logo
    {
        width:
            42px;

        height:
            42px;
    }

    .brand-name
    {
        font-size:
            15px;
    }

    .brand-tagline
    {
        font-size:
            10px;
    }

    .footer-grid
    {
        grid-template-columns:
            1fr;
    }
}
@media (max-width: 991px)
{
    .kss-hero
    {
        padding:
            80px 0;
    }

    .kss-hero-visual
    {
        min-height:
            520px;

        margin-top:
            30px;
    }

    .kss-phone-main
    {
        right:
            80px;
    }

    .kss-phone-back
    {
        right:
            220px;
    }
}


@media (max-width: 575px)
{
    .kss-hero
    {
        padding:
            65px 0;
    }

    .kss-hero h1
    {
        font-size:
            42px;

        letter-spacing:
            -2px;
    }

    .kss-hero-description
    {
        font-size:
            16px;
    }

    .kss-hero-actions
    {
        flex-direction:
            column;
    }

    .kss-hero-actions > *
    {
        width:
            100%;

        justify-content:
            center;

        text-align:
            center;
    }

    .kss-hero-visual
    {
        min-height:
            480px;

        transform:
            scale(.82);

        transform-origin:
            center top;

        margin-bottom:
            -80px;
    }

    .kss-floating-orders
    {
        left:
            -10px;
    }

    .kss-floating-growth
    {
        right:
            -10px;
    }
}