@media(max-width:1200px){

    .features-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .steps{
        grid-template-columns:repeat(3,1fr);
    }
    
     .hero-left h1{
        font-size:46px;
    }

    .hero-mockup{
        width:620px;
        margin-right:-40px;
    }

}


@media(max-width:992px){

    .menu{
        display:none;
    }

    .hero-grid{
        grid-template-columns:1fr;
    }

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

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

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

    .cta-grid{
        grid-template-columns:1fr;
    }

    .testimonials-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }
    
     .hero{
        padding:55px 0;
    }

    .hero-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .hero-left{
        text-align:center;
    }

    .hero-left h1,
    .hero-left p{
        margin-left:auto;
        margin-right:auto;
    }

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

    .hero-right{
        min-height:auto;
        justify-content:center;
    }

    .hero-mockup{
        width:100%;
        max-width:760px;
        margin-right:0;
    }

}

@media(max-width:768px){
    
    .hero{
        padding:45px 0;
    }

    .hero-left h1{
        font-size:38px;
    }

    .hero-left p{
        font-size:15px;
    }

    .hero-list{
        gap:12px;
        justify-content:center;
    }

    .hero-list div{
        font-size:13px;
    }

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

    .hero-buttons button{
        width:100%;
    }

    .hero-mockup{
        width:115%;
        margin-left:-7.5%;
    }

    .nav{
        height:auto;
        padding:20px 0;
        flex-direction:column;
        gap:20px;
    }

    .nav-buttons{
        width:100%;
        flex-direction:column;
    }

    .nav-buttons button{
        width:100%;
    }

    .hero{
        padding:60px 0;
    }

    .hero-left h1{
        font-size:42px;
    }

    .hero-left p{
        font-size:16px;
    }

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

    .hero-buttons button{
        width:100%;
    }

    .dashboard{
        padding:18px;
    }

    .kanban{
        grid-template-columns:1fr;
    }

    .features-grid{
        grid-template-columns:1fr;
    }

    .numbers-grid{
        grid-template-columns:1fr;
    }

    .steps{
        grid-template-columns:1fr;
    }

    .clients-row{
        justify-content:center;
    }

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

    .cta-left h2{
        font-size:36px;
    }

    .cta-right h2{
        font-size:28px;
    }

    .section-title h2{
        font-size:32px;
    }

    .final-grid{
        flex-direction:column;
        gap:25px;
        text-align:center;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .newsletter{
        flex-direction:column;
        gap:10px;
    }

    .newsletter input{
        border-radius:12px;
    }

    .newsletter button{
        width:100%;
        height:54px;
        border-radius:12px;
    }

}

@media(max-width:480px){

    .hero-left h1{
        font-size:32px;
    }

    .hero-mockup{
        width:130%;
        margin-left:-15%;
    }

}