@media screen and (max-width: 768px){
    header .container{
        justify-content:flex-start;
    }
    
    .menu-desktop{
        display: none;
    }

    header .menu-mobile{
        display: block;
        order: 1;
    }

    .wraper-logo{
        order: 2;
        margin-left: 20px;
    }

    header .button{
        order: 3;
        margin-left: auto;
    }

    .menu-mobile ul{
        display: none;
        position: absolute;
        top: 90px;
        left: 0;
        list-style: none;
        background-color: #fff;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

    .menu-mobile ul li{
        padding: 15px 20px;
    }
    
    .menu-mobile ul li a{
        color: #65758B;
        font-size: 16px;
        text-decoration: none;
    }

    .menu-mobile i{
        font-size: 24px;
        cursor: pointer;
        color: #65758B;
    }

    /* banner */

    .banner h1{
        font-size: 36px;
    }

    /* footer */
    .footer .wraper-footer{
        flex-direction: column;
    }
    
}

@media screen and (max-width: 480px){
    header .wraper-logo h1{
        display: none;
    }

    header .button{
        font-size: 0;
    }

    header .button i{
        margin: 0;
        font-size: 14px;
    }
}