@media(max-width: 992px) {

    .hero-grid,
    .features-grid,
    .development-grid,
    .footer-grid {

        grid-template-columns: 1fr;
    }

    .menu {

        position: absolute;

        top: 90px;
        left: 0;
        right: 0;

        background: white;

        padding: 30px;

        flex-direction: column;

        display: none;

        box-shadow:
                0 20px 40px rgba(0,0,0,.08);
    }

    .show-menu {
        display: flex;
    }

    .mobile-btn {

        display: block;

        width: 52px;
        height: 52px;

        border: none;

        border-radius: 16px;

        background: var(--main);

        color: white;

        font-size: 22px;
    }

    .hero-title {
        font-size: 62px;
    }

    .hero-subtitle {
        font-size: 22px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .stats-grid {
        flex-direction: column;
    }

    .feature-card {
        padding: 35px;
    }
}

@media(max-width: 600px) {

    .logo-title {
        font-size: 24px;
    }

    .hero {
        padding: 70px 0;
    }

    .hero-title {
        font-size: 48px;
    }

    .hero-subtitle {
        font-size: 19px;
    }

    .section-title {
        font-size: 42px;
    }

    .development-title {
        font-size: 40px;
    }
}