cart.css

.topsection{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin-bottom: 50px;
}
.logo{
    width: 90px;
    height: 90px;
}
.logo>img{
    width: 100%;
}
#bottomsection{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;

}
.itemsdetails{
width: 450px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding-top: 50px;
padding-bottom: 50px;
}
.itemsdetails>div{
width: 350px;
margin: auto;
text-align: center;

}
.itemsdetails>img{
width: 10px;
}
button {
display: inline-block;
background-color: #3e8e41;
border: none;
color: white;
text-align: center;
font-size: 16px;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}

button:hover {
    background-color: #ccc;
}

.img{
width: 35px;
height: 35px;
}
.img>img{
width: 100%;
}
.coupen{
display: flex;
}
.price,.charge,.tax,.amount{
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    
}
.card{
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 5px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
width: 600px;
margin-bottom: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    
}
.image{
width: 200px;

}
.image>img{
width: 100%;
height: 100%;
}
.amount p{
font-size: 19px ;
color: #EC407A;
}
#delete{
    margin-bottom: 10px;
    background-color: #3e8e41;
    /* height: 20px; */
    border-radius: 5px;
}
#delete:hover{
    cursor: pointer;
    background-color: #ccc;
}
@media screen and (max-width: 350px) {
    #bottomsection{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 20px;
    
    }
    .card{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
  }
  @media screen and (max-width: 750px) {
    #bottomsection{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 20px;
    
    }
   
  }