@media screen and (max-width: 800px) {
    
    
    #work section {
        width: 100%;
    }

    h1{
        padding-left: 10px;
    }
    
    .service{
        box-sizing: border-box;
    }
    #services {
        grid-template-columns: 1fr 1fr;
    }
    .service span{
        font-size: 12px;
    }
    
    nav h1{
        padding-left: 0px !important;
    }
    nav h1 a{
        margin-left: 0px;
    }
    #banner{

        height: 220px;
    }
    #banner-info img{
        display: block;
        width: 100px;
        margin-left: 0px;
        /* margin: -50px auto 10px !important; */
    }

    .project {
        width: 100%;
    }

    #stack img{
        width: 40px;
    }

    .champs {
        width: 100%;
    }
    #stack {
        text-align: center;
        margin:auto;
        
    }
    form textarea{
        width: 100%;
    }

    nav{
        justify-content: space-between;
    }
    nav #links{
        display: none;
    }
    #burger{
        display: block;
    }

    .course{
        width: 100%;
        box-sizing: border-box;
    }
    .stack{
        width: 42%;
    }
    .stack div{
        display: inline-block;
        text-align: center;
        margin: 10px 10px;
    }
    .stack span{
        display: block;
    }

    #stack .flex{
        justify-content: center;
    }
}

@media screen and (max-width: 500px) {

    #projects{
        grid-template-columns: 1fr;
    }
    .service h3{
        font-size: 18px;
    }
    .service p{
        font-size: 12px;
    }
    .stack{
        width: 100%;
    }

    .banner-ecommerce{
        padding-bottom: 100px;
    }
    .banner-ecommerce h1, .banner-ecommerce h3{
        font-size: 20px;
    }
    #show{
        text-align: center;
    }

    #about div p{
        text-align: justify;
    }
    #banner-info div p{
        font-size: 10px;
    }
}