/* ==========================================
   LARGE LAPTOPS
========================================== */

@media (max-width: 1200px) {

    .hero-content {
        gap: 3rem;
    }

}


/* ==========================================
   TABLETS
========================================== */

@media (max-width: 992px) {

    /* Navigation */

    .navbar {

        flex-wrap: wrap;

        gap: 1rem;

        height: auto;

        padding: 1rem 0;
    }

    .nav-links {

        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap: 1.2rem;
    }

    /* Hero */

    .hero {

        text-align: center;

        padding: 5rem 0;
    }

    .hero-content {

        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .hero-left {

        order: 1;
    }

    .hero-right {

        order: 2;
    }

    .hero-buttons {

        justify-content: center;
    }

    .hero-image-placeholder {

        height: 400px;
    }

    /* Products */

    .products-grid {

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

    /* Features */

    .features-grid {

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

    /* Workflow */

    .workflow-grid {

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

    /* Screenshots */

    .screenshots-grid {

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

    /* Stats */

    .stats-grid {

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

    /* Contact */

    .contact-wrapper {

        grid-template-columns: 1fr;
    }

    /* Footer */

    .footer-grid {

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

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    section {

        padding: 4rem 0;
    }

    /* Hero */

    .hero-left h1 {

        font-size: 2.5rem;
    }

    .hero-left p {

        font-size: 1rem;
    }

    .hero-image-placeholder {

        height: 320px;

        font-size: 1.5rem;
    }

    /* Products */

    .products-grid {

        grid-template-columns: 1fr;
    }

    /* Features */

    .features-grid {

        grid-template-columns: 1fr;
    }

    /* Workflow */

    .workflow-grid {

        grid-template-columns: 1fr;
    }

    /* Screenshots */

    .screenshots-grid {

        grid-template-columns: 1fr;
    }

    /* Statistics */

    .stats-grid {

        grid-template-columns: 1fr;

        gap: 2rem;
    }

    /* Footer */

    .footer-grid {

        grid-template-columns: 1fr;

        text-align: center;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .container {

        width: calc(100% - 1.5rem);
    }

    .logo-text {

        font-size: 1.4rem;
    }

    .hero-left h1 {

        font-size: 2rem;
    }

    .section-title {

        font-size: 2rem;
    }

    .btn-primary,
    .btn-secondary {

        width: 100%;

        justify-content: center;
    }

    .hero-buttons {

        flex-direction: column;
    }

    .hero-image-placeholder {

        height: 260px;
    }

}