/*=========================================
    1400px
=========================================*/

@media (max-width:1400px){

    .hero h1{

        font-size:60px;

    }

    .services-grid{

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

    }

    .workflow-grid{

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

    }

}

/*=========================================
    1200px
=========================================*/

@media (max-width:1200px){

    .header .btn{

        display:none;

    }

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .hero-image{

        justify-content:center;

    }

    .stats .container{

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

    }

    .contacts-grid{

        grid-template-columns:1fr;

    }

    .contacts{

        text-align:center;

    }

    .contacts ul{

        display:inline-block;

        text-align:left;

    }

    .contacts img{

        margin:auto;

        width:260px;

    }

}

/*=========================================
    992px
=========================================*/

@media (max-width:992px){

    .header{

        position:relative;

    }

    .header .container{

        height:auto;

        padding:25px 0;

        flex-direction:column;

        gap:25px;

    }

    .nav{

        gap:22px;

        flex-wrap:wrap;

        justify-content:center;

    }

    .hero{

        padding-top:70px;

    }

    .hero h1{

        font-size:52px;

    }

    .hero p{

        font-size:17px;

    }

    .hero-buttons{

        flex-wrap:wrap;

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

    }

    .workflow-grid{

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

    }

}

/*=========================================
    768px
=========================================*/

@media (max-width:768px){

    .logo h2{

        font-size:30px;

    }

    .logo p{

        font-size:11px;

        letter-spacing:3px;

    }

    .section-title{

        font-size:38px;

        margin-bottom:50px;

    }

    .hero h1{

        font-size:42px;

    }

    .hero-buttons{

        width:100%;

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .stats .container{

        grid-template-columns:1fr;

    }

    .workflow-grid{

        grid-template-columns:1fr;

    }

    .card{

        padding:35px;

    }

    .stat{

        padding:40px;

    }

    .step{

        padding:35px;

    }

    .contacts{

        padding:80px 0;

    }

}

/*=========================================
    480px
=========================================*/

@media (max-width:480px){

    .container{

        width:94%;

    }

    .logo{

        gap:12px;

    }

    .logo img{

        width:46px;

    }

    .logo h2{

        font-size:24px;

    }

    .logo p{

        font-size:9px;

    }

    .nav{

        flex-direction:column;

        align-items:center;

        gap:15px;

    }

    .hero{

        padding-bottom:70px;

    }

    .hero h1{

        font-size:34px;

    }

    .hero p{

        font-size:15px;

    }

    .subtitle{

        font-size:12px;

        letter-spacing:2px;

    }

    .section-title{

        font-size:30px;

    }

    .card h3{

        font-size:24px;

    }

    .stat h3{

        font-size:46px;

    }

    .contacts h2{

        font-size:34px;

    }

    input,
    textarea{

        padding:15px;

    }

    .btn{

        height:52px;

        font-size:15px;

    }

}