body{
    background-color: blueviolet;
}


.wrapper {
    width: 100%;
    max-width:1200px;
    min-width: 500px;
    margin: auto;
}

.main-products{
  display: flex;
  flex-wrap: wrap;
}


.box{
    height: auto;
    min-width: 200px;
    flex: 1;
}
.main{
    display: flex;
}
.one{
    background-color: aqua;
    flex-grow: 2;
    
}

.two{
    background-color: aqua;
    flex-grow: 2;

}
 .three{
    background-color: aqua;
    flex-grow: 2;

}
.four{
    background-color: aqua;
    flex-grow: 2;
}
 .five{
        background-color: aqua;
        flex-grow: 2;
}

.six{
        background-color: aqua;
        flex-grow: 2;
}
.seven{
    background-color: aqua;
    flex-grow: 2;
}
.eight{
    background-color: aqua;
    flex-grow: 2;
}

.nav ul{
    text-decoration: none;
    list-style-type: none;

}

.nav a {
    text-decoration: none;
}
.nav a:hover{
    background-color: #555;
}
@media screen and (min-width:768px){

    .nav ul{
        display: flex;
        justify-content: flex-start;
    }
    .nav li{
        flex: 1 1 0;  
    }
   .search{
    flex-grow: 2;
   }
   .srch{
    flex: 1 1 0;
   }

   .catagories button{
    color: red;
   }

    




}