@media screen and (max-width:576px) {
   main > section{
    margin-bottom: 50px;
}
header nav{
    position: relative;
}
    header nav ul .submenu{
      
        display: none;
    }

     header nav ul .submenu li{
border: 1px solid grey;
     }
    #hamburger{
        display: block;
    }


    .banner{
        flex-direction: column-reverse;
        gap: 14px;
    }
    .banner-title{
        width: 100%;
        text-align: center;
       
        align-items: center;
    }
    .banner-title button{
        width: 50%;
    }
    .banner-image{
        width: 100%;
    }



    /* companies  will same as usual*/
  

    /* popular collection section */
  .collection h3{
    text-align: center;
}
    .cards{
        grid-template-columns: repeat(1,1fr);
    }



    /* featured product */
    .featured-products{
        flex-direction: column-reverse;
    }
    .featured-products-img{
        width: 90%;
    }
        .featured-products-title{
            width: 90%;
            text-align: center;
        }
    
}