*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  justify-content: center;
  
}

/* ---------header start------- */
header {
width: 100%;    
z-index: 100;
background-color: #030303;
}
#upper {
background-color: #030303;
height: 100px;
width: 100%;
padding: 20px 50px;
margin-top: -15px;
display: flex;
justify-content: space-around;
position: fixed;
top: 0;
z-index: 100;
}
.box1,
.box2,
.box3 {
margin-left: -180px;
width: 300px;
height: 100%;
gap: 15px;
background-color: #030303;
}
.box1 > img {
width: 100%;

}
#ip {
width: 450px;
height: 50px;
background-color: white;
border: none;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
font-size: 20px;
padding-left: 0px;
margin-left: -200px;
margin-top: 7.5px;
}
.form > input:nth-child(2) {
height: 55px;
width: 90px;
background-color: rgb(255, 255, 255);
color: rgb(6, 6, 6);
font-size: 18px;

border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
margin-left: -5px;
}
.box2,
.box3 {
margin-top: 11px;
margin-right: -20px;
width: 150px;
gap: 10px;
display: flex;
justify-content: center;
align-items: center;
background-color: #030303;
}
.box2 img {
width: 40px;
height: 40px;
}
.box2 p {
color: rgb(255, 255, 255);
text-decoration: none;
}
.box3 img {
width: 40px;
height: 40px;
}
.box3 {
margin-right: -150px;
justify-content: space-around;
color: white;
text-decoration: none;
}

/* Lower */
header{
position: fixed;
top: 70px;
width: 100%;
box-shadow: rgba(244, 239, 239, 0.24) 0px 3px 8px;
height: auto;
background-color: rgb(29, 28, 28);

}
#nav{
width: 100%;
height: 40px;    
display: flex;  

}

#nav>form>input{
height: 100%;
}

#navbar>ul{
overflow: auto;
  
}
#navbar>ul>li{
float: left;
list-style: none; 
margin: 20px 10px;
display: block;
font-size: 14PX;


}
#navbar>ul>li>a{
padding: 0px 10px;
text-decoration: none;
color: rgb(255, 255, 255);
}
#navbar>ul>li>a:hover{
font-weight: bold;
}
.dd1{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
list-style: none;    
position: absolute;
top: 55px;
display: none;
margin-left: 30px;
line-height: 30px;
color: rgb(11, 11, 11);
background-color: white;
}
.dd1>li{

margin-left: 0px;
margin-right: 60px;
font-size: 12PX;
}
#navbar>ul>li:hover .dd1{
display: block;
}

.bg-text {
    /* The image used */
    background-image: url("https://sugar-mobile-application.s3.amazonaws.com/collection-web-banner/Lips.jpg");
   text-align: center;
   margin-top: 125px;
   filter: blur(1px);
  }
  .bg-text img{
    width: 90%;
    text-align: center;
  }
.body{
    margin-top: 20px;
    border: 1px solid red;
    display: flex;
    justify-content: space-between;
}
.left{
    border: 1px solid red;
    width: 20%;
}

#right {
  background-color: rgb(88, 88, 145);
    justify-content: space-between;
    margin-left: 10px;
    
    margin-top: 50px;
    display: flex;
    margin: auto;
    gap: 15px;
    justify-content: center;
    align-items: center;
   
  }
  #right img{
    width: 120px;
    height: 200px;
    border-radius: 15px;
    margin: auto;
    
  }
  #right h3{
    font-size: x-large;
    cursor: pointer;

  }
  .fas fa-shopping-cart{
    color: black;
  }
  #right h3:nth-child(1):hover{
    color: red;
  }
  #right h3:nth-child(2){
    font-size: xx-large;
  }
  #right h3:nth-child(2):hover{
    color: rgb(110, 112, 106);
  }
  #right > div{
    width: 200px;
    height: 350px;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    background-color: white;
    border-radius: 15px;
    margin-left: 10px;
    margin-right: 15px;
    gap: 15px;

  }
  #right > div >div{
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10%;
  }
  hr {
    width:5%;
    margin-top: -5px;
    
}

#footer {
    width: 100%;
    height: auto;
    background-color: black;
    padding-bottom: 5px;
  }
  #footer > img {
    width: 20%;
    display: block;
    margin: auto;
  }
  #media {
    width: 13%;
    margin: auto;
    margin-bottom: 30px;  
  }
  #media > i {  
    margin: 5px;
    color: white;
  }
  #bigger {
    width: 90%;
    border-bottom: 2px solid grey;
    margin: auto;
    line-height: 40px;
    padding: 0 30px;
  }
  #bigger > div {
    margin-bottom: 20px;
  }
  .ip2 {
    width: 250px;
    background-color: black;
  }
  #form2 > input {
    height: 40px;
    padding: -10px;
    font-size: 15px;
    border: none;
    color: rgb(190, 190, 190);
    border-bottom: 2px solid white;
  }
  #form2 > input:nth-child(2) {
    width: 70px;
    color: white;
    background-color: #f82caa;
    border: none;
    border-radius: 5px;
  }
  .stores {
    display: flex;
  }
  .stores > img {
    height: auto;
    width: 60px;
    margin: 0 8px;
  }
  
  .stage1 {
    width: 70%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .stage1 > div > p {
    color: white;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .stores > div > p {
    color: rgb(190, 190, 190);
  }
  .stage2 > div {
    display: flex;
    width: 60%;
    justify-content: space-between;
  }
  .stage2 > p,
  .stage3 > p {
    color: white;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .info > div {
    color: rgb(190, 190, 190);
  }
  .stage3 {
    width: 100%;
  }
  .cont {
    display: flex;
    justify-content: space-between;
    line-height: 20px;
  
    color: rgb(190, 190, 190);
  }
  .cont > div > p:nth-child(1),
  .stage3 > p {
    color: white;
    font-weight: bold;
  }
  .copy {
    font-size: 20px;
    text-align: center;
    color: white;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #path{
    margin-top: 15px;
    padding-left: 10px;
    background-color: rgb(122, 116, 109);
    border-radius: 15px;
    width: 150px
  }
  #sort_price{
    background-color: black;
    color: white;
    margin-top: 30px;
    width: 150px;
    border-radius: 15px;
    font-size:large;
  }
  #sort_price option{
    background-color: black;
    color: white;
    margin-top: 30px;
    width: 150px;
    border-radius: 15px;
    font-size:large;
  }