@media screen and (max-width: 640px) {
    
    /* -----navBar----- */
    
    .nav-links{
        display: none;
    }
    .menu-bars{
        display: inline;
    }
    .shopping-card{
        display: inline;
    }

    /* -----banner----- */

    .banner{
        flex-direction: column-reverse;
    }
    .banner-container01{
        text-align: center;
    }
    .banner-container02:last-child{
        width: 100%;
        height: 100%;
    }

    /* Sponsor-container */
    .sponsor-container{
        flex-wrap: wrap;
        justify-content: center;
        gap: 35px;
        border: 1px solid rgb(255, 255, 255); 
        padding: 0px 0px;
    }


    /* card */
    .cards-container{
        grid-template-columns: repeat(1, 1fr);
    }
    .card{
    padding: 17px 15px;
    max-width: 100%;
    }

    /* Featured */
    .featured{
        flex-direction: column-reverse;
        gap: 40px;
        text-align: center;
    }
    .featured-container-01{
        width: 100%;
    }
    .featured-container-01 img{
        width: 100%;
    }
}









/* medium device */

@media screen and (min-width: 640px) and (max-width:992px) {
    
    /* -----navBar----- */
    
    .nav-links{
        display: none;
    }
    .menu-bars{
        display: inline;
    }
    .shopping-card{
        display: inline;
    }

    /* -----banner----- */

    .banner{
        flex-direction: column-reverse;
    }
    .banner-container01{
        text-align: center;
    }
    .banner-container02:last-child{
        width: 100%;
        height: 100%;
    }

    /* Sponsor-container */
    .sponsor-container{
        flex-wrap: wrap;
        justify-content: center;
        gap: 35px;
        border: 1px solid rgb(255, 255, 255); 
        padding: 0px 0px;
    }


    /* card */
    .cards-container{
        grid-template-columns: repeat(2, 1fr);
    }
    .card{
    padding: 17px 15px;
    max-width: 100%;
    }

    /* Featured */
    .featured{
        flex-direction: column-reverse;
        gap: 40px;
        text-align: center;
    }
    .featured-container-01{
        width: 100%;
    }
    .featured-container-01 img{
        width: 100%;
    }
}