/* navbar */
.navbar{
    width: 100%;
  box-sizing: border-box;
  box-shadow: 3px 3px 3px rgb(235, 235, 235);
  position: sticky;
  }
  .nav-img>img{
  width: 25%;
  margin: auto;
  margin-top: 35px;
  display: block;
}
/* ram made changes */
#look{
    /* border: 1px solid black; */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(1,50px);
    margin-top: 20px;
}
/* #look > div{
    border: 1px solid orange;
} */
#look > div:nth-child(2){
    display: flex;
    justify-content: center;
    align-items: center;
}
#look > div:nth-child(2) > img{
    width: 80%;
    height: 70%;
}
#look > div:last-child {
    display: flex;
    justify-content:space-between;
    align-items: center;
    width: 90%;
    margin-left: 40px;
}
#look > div:last-child > div{
    /* border: 1px solid green; */
    width: 7%;
    height: 60%;
}
#look > div:last-child > div >img{
    width: 100%;
    height: 100%;
}
/* ram made changes */


  .box{
    display: flex;
    justify-content: space-evenly;
  
  }
  .box>a>h5{
    background-color: white;
    border: transparent;
    color: #333333;
    margin-bottom: 10px;
    cursor: pointer;
    font-weight: lighter;
    
  }
  .box>a>h5:hover{
    background-color: aqua;
  }
  .box>a{
    text-decoration: none;
    list-style: none;
  }
  .search{
    width:30%;
    display: flex;
    margin: auto;
    margin-right: 50px;
   margin-bottom: 20px;
  }
  .search>input{
    border: 1px solid #aaaaaa;
    padding: 10px;
    width:180%;
    
  }
  .image>img{
    width: 20%;
    margin-right: 25px;
  }
  .search>button{
    background-color: white;
    border: transparent;
    cursor: pointer;
  }
    /* navbar */

    #bag{
        /* border: 1px solid green; */
        width: 90%;
        display: flex;
        justify-content: space-between;
        margin: 50px auto 20px auto;
    }
    #bag > div:last-child > button{
        height: 100%;
    }
    #bag > div:last-child > button:first-child{
        width: 200px;
    }
    #bag > div:last-child > button:last-child{
        width: 200px;
        
    }
    #bag > div:last-child > button:first-child >img{
        width: 70%;
        height: 46%;
    }
    #bag > div:last-child > button:last-child > div{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #bag > div:last-child > button:last-child > div >svg{
        width: 15px;
        height: auto;
    }
    

    /* table,th,tr,td{
        border: 1px solid;
    } */
    table{
        width: 70%;
        margin: auto;
    }
    th{
        background-color: rgb(242,242,242);
        padding: 10px 0px 10px 0px;
    }
    #productDetails{
        /* border: 1px solid green; */
        height: 150px;
        display: flex;
        /* flex-direction: row-reverse; */
    }
    /* #productDetails > div{
        border: 1px dotted navy;
    } */
    #productDetails > div:first-child{
        width: 30%;
        height: 50%;
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #productDetails > div:last-child{
        width: 70%;
        
    }
    #productDetails > div:first-child > img{
        width: 70%;
        height: 100%;
    }
    #price{
        /* border: 1px solid teal; */
        margin-bottom: 95px;
    }
    #quantity{
        /* border: 1px solid rebeccapurple; */
        margin-bottom: 40px;
    }
    #quantity > div:first-child{
        /* border: 1px solid indianred; */
        display: flex;
    }
    #quantity > div > button{
        padding: 10px 15px 10px 15px;
    }
    #totalPrice{
        /* border: 1px solid violet; */
        display: flex;
        justify-content: space-between;
        margin-bottom: 90px;
    }
    #totalPrice > p{
        padding: 20px;
    }
    #totalPrice > h3{
        margin-top: 40px;
    }
    #updateBag{
        width: 70%;
        display: flex;
        flex-direction: row-reverse;
        margin: auto;
    }
    #updateBag > button{
        padding: 0px 40px 0px 40px;
    }
    #line1{
        width: 70%;
        margin: 40px auto 40px auto;
    }
    #payment{
        /* border: 1px solid black; */
        width: 70%;
        display: flex;
        margin: auto;
        height: 400px;
        justify-content:space-between;
    }
    /* #payment > div{
        border: 1px solid teal;
    } */
    #promocode > div{
        padding: 20px;
    }
    #promocode > div > h3{
        margin-top: -10px;
    }
    #payment > div:first-child{
        width: 35%;
    }
    #payment > div:first-child > div{
        border: 1px solid black;
        height: 23%;
        width: 80%;
    }
    #payment > div:last-child{
        width: 55%;
        /* background-color: rgb(239,239,239); */
    }
    #payment > div:last-child >div{
        /* border: 1px solid green; */
        height: 100%;
        
    }
    #checkout >div>div{
        background-color: rgb(242,242,242);
    }
    #payment > div:last-child >div >div:first-child{
        /* border: 1px solid rebeccapurple; */
        height: 25%;
        padding: 20px;
    }
    #payment > div:last-child >div >div:last-child{
        /* border: 1px solid rebeccapurple; */
        height: 35%;
        padding: 20px;
    }
    .pay{
        display: flex;
        justify-content: space-between;
        /* line-height: 1px; */
    }
    .pay > p{
        margin-top: -3px;
    }
    #bottom1 > div:first-child{
        display: flex;
        justify-content: space-between;
        margin-top: -25px;
    }
    #bottom1 > div:nth-child(2){
        margin-top: -10px;
    }
    #bottom1 > div:last-child{
        margin-top: -10px;
    }
    #bottom1 > p:last-child{
        margin-top: -10px;
    }
    #paymentBtn{
        display: flex;
        padding: 10px;
        justify-content: space-between;
        margin-top: 10px;
    }
    #paymentBtn > button:first-child{
        display: flex;
        height: 40px;
        width: 200px;
        justify-content: center;
        align-items: center;
        background-color: rgb(255,196,57);
        border: none;
    }
    #paymentBtn > button:last-child{
        display: flex;
        height: 40px;
        width: 200px;
        justify-content: center;
        align-items: center;
        background-color: green;
        color: white;
        border: none;
    }
    #paymentBtn > button:last-child >div{
        /* border: 1px solid black; */
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #paymentBtn > button:last-child >div > svg{
        width: 12px;
        padding-right: 5px;
        color: white;
    }
    #paymentBtn > button:first-child > img{
        width: 100px;
        height: 60%;
    }