/* Zero Offline® Enterprise - responsive.css */

/* =========================
   Large screens
========================= */
@media (max-width: 1200px){

    .container{
        width:min(100% - 3rem,1100px);
    }

}

/* =========================
   Tablets
========================= */

@media (max-width:992px){

    .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
        gap:2.5rem;
    }

    .hero-text p{
        margin:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .nav-container{
        flex-direction:column;
        gap:1rem;
        padding:1rem 0;
    }

    .nav-menu{
        flex-wrap:wrap;
        justify-content:center;
    }

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

}

/* =========================
   Mobile
========================= */

@media (max-width:768px){

    .hero{
        min-height:auto;
        padding:70px 0;
    }

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

    .hero h2{
        font-size:1.5rem;
    }

    .section{
        padding:70px 0;
    }

    .problem-grid,
    .benefits-grid,
    .sectors-grid{
        grid-template-columns:1fr;
    }

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

    .btn{
        width:100%;
    }

    .hero-diagram{
        max-width:320px;
    }

}

/* =========================
   Small phones
========================= */

@media (max-width:480px){

    .logo{
        font-size:1.2rem;
    }

    .nav-menu{
        gap:.8rem;
        font-size:.9rem;
    }

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

    .hero h2{
        font-size:1.25rem;
    }

    .section-title h2{
        font-size:1.7rem;
    }

}