*{
padding: 0;
margin: 0;
}
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
ul li{
list-style: none;
}
a{
    text-decoration: none;
    color: #666;
 }

 ul{
/* border: 1px solid rgb(89, 0, 255); */
}
.body{
    width: 1200px;
    margin: auto;
    line-height: 1;
}

.leftItem ul{
    display: flex;
    flex-direction:row-reverse;
}
.leftItem ul li{
    margin: 2px 13px;
    font-size: 14px;
}
.logo img{
    position: relative;
    max-width: 230px;
    max-height: 100px;
    top: -15px;
}
.leftItem ul li a img{
    width: 19px;
    height: 13px;
}
.nav{
    display: flex;
}
.rightItem{
    display: flex;
}
.searchbar{
    display: flex;
    width: 500px;
    height: 29px;
    border: 2px solid #ffda00;
    border-radius: 15px;
    margin: 10px 13%;
}
.searchbar input{
width: 310px;
border: none;
outline: none;
}
.searchbar p, .fa-angle-down {
font-size: 15px;
display: flex;
margin: 6px 3px;
}
.fa-search{
    background-color: #ffda00;
    color: black;
    width: 30px;
    border-top-right-radius: 11px;
    border-bottom-right-radius: 11px;
    padding: 5px 2px;
    font-size: 19px;
    float: left;
    text-align: center;
}
 .signupItem{
    /* border: 1px solid #ffda00; */
    width: 500px;
    display: flex;
    cursor: pointer;
}
.signupItem p{ 
margin: 10px 0px;
font-size: 18px;
}
.signupItem i{ 
margin: 10px 14px;
}
.signupItem img, svg{
width: 20px;
height: 20px;
margin: 10px 12px;
}
.signupItem span{
    width: 15px;
    height: 15px;
    font-size: 13px;
    border-radius: 50%;
    text-align: center;
    border: 1px solid red;
    background-color: red;
    color: rgb(255, 255, 255);
}
.second{
    width: 1200px;
    margin: auto;
    display: flex;
    height: 35px;
}
.second .black{
background-color: black;
color: white;
width:230px ;

}
.second .black p{
margin: 5px 55px;
font-weight: 700;
cursor: pointer;
}
.second .yellow{
    display: flex;
    background-color:#ffda00 ;
    color: #000;
    width:970px ;
    text-transform: uppercase;
}
.second .yellow p{
    margin: 5px 75px;
    font-weight: 700;
    cursor: pointer;
}
.second .yellow p:hover{
  border-bottom: 4px solid black;

}

.third{
    width: 1200px;
    margin: auto;
    display: flex;
    /* border: 1px solid rgb(235, 94, 13); */
}
.third .category{
    width:230px;
    background-color: #d8d8d8;
    /* display: none;  */
}
.third .category ul li{
margin: 5px 5px;
font-size: 17px;
height: 24px;
position: relative;
}
.third .category ul li:hover{
background-color: whitesmoke;
width: 100%;
margin: 5px 0px;
}

.slide img{ 
width: 970px;
height: 54.3%;
position: absolute;

}
.fourth{
    width: 1200px;
    margin: auto;
}
.fourth img{
    margin: 9px 3px;
}
.five{
width: 1200px;
margin:20px  auto;
}
.five .icon{
    display: flex;
}
.five i{
    font-size: 20px;
    margin: 6px ;
}
.five .container{
    display: flex;
}
.five .collection{
    border: 1px solid rgb(185, 183, 183);
    margin: 2px 4px;
text-align: center;
}
.five p {
}
.five img{
    width: 190px;
}
.six{
    width: 1200px;
    margin: 20px auto;
}
.six .icon{
    display: flex;
}
.six svg{
    font-size: 20px;
}
.six .container{
    display: flex;
    /* width: 0px; */
}
.six .one {
    width: 400px;
}
.six .one img{
    width: 100%;
}
.six .two{
    display: flex;
    width: 782px;

}
.six .two .img{
display: block;
border: 1px solid rgb(238, 237, 237);
}
.six .two .img:hover{
    box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}
.six .two img{
    height: 85%;
    width: 100%;
}
.six .two .img p{
text-align: center;
font-size: 18px;
font-weight: 600;
color: crimson;
}
.seven{
    width: 1200px;
    margin: 20px auto 0;
}
.seven .icon{
    display: flex;
}
.seven svg{
    font-size: 20px;
}
#data{
    display: grid;
    grid-template-columns: repeat(5, 20%);
}
#data > div{
    width: 210px;
    height: 330px;
    margin: 10px 15px;
    padding: 5px;
}
#data > div:hover{
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);

}
#data img{
    width: 100%;
}
#data p{
    margin: 10px;
    font-size: 10px;
    cursor: pointer;
}
#data p:hover{
    color: rgb(252, 135, 93);
}
#data .price{
    color: red;
    font-size: 15px;

}
.eight{
    margin-top: 40px;
    display: flex;
    width: 1200px;
    margin:30px  auto;
}
.eight .container{
display: grid;
grid-template-columns: repeat(7, 20%);
}
.eight p {
    font-size: 12px;
margin: 4px 8px;
}
.eight .container p{
    font-size: 12px;
    margin: 1px;
}