cart.css

*{
   margin: 0;
   padding: 0;
   font-family: 'Spartan', sans-serif;;
}
.header{
   min-height: 100vh;
   width: 100vw;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   position: relative;
}
nav{
   display: flex;
   justify-content: space-between;
  background-color: #53c68c;
  max-height: 70px;
}
nav img{
   margin-top: 0%;
   height: 120px;
   width: 120px;
}
.nav-links{
   flex: 1;
   text-align: right;
}
.nav-links ul li{
   padding-top: 3%;
   list-style: none;
   display: inline-block;
   padding-right: 7%;
   position: relative;
}
.nav-links ul li a{
   color: white;
   text-decoration: none;
   font-size: 16 px;
}

nav .fas{
  display: none;
}

.gbtn{
  background-color: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  }

/* SEARCH BAR*/
.nav-search{
   width: 200px;
   border-radius: 5px;
   padding: 8px 32px 4px 26px;
   top: 0;
   left: 0;
   z-index: 5;
}
@media(max-width: 1366px){
  .header{
     background-color: #fff;
     overflow: hidden;
  }
  .nav-search{
    width: 95%;
  }
    .nav-links ul li{
     display: block;
    }
  .nav-links{
       position: absolute;
       background: #53c68c;
       height: 100vh;
       width: 200px;
       top: 0;
       right: -250px;
       text-align: left;
       z-index: 2;
       transition: 1s;
    }
  nav .fas{
      display: block;
      color: #fff;
      margin-top: 10%;
      margin-right: 8%;
      padding-right: 16px;
      font-size: 15px;
      cursor: pointer; 
    }
    .nav-links ul{
       padding: 30px;
    }
 }

 @media screen and (max-width: 500px) {
   .navbar a {
     float: none;
     display: block;
   }
 }
 .navbar input[type=text] {
   float: right;
   padding: 6px;
   background-color: white;
   margin-top: 15px;
   margin-right: 16px;
   margin-left: 190 px;
   padding-right: 5%;
   border: 2px;
   border-style: inset;
   border-radius: 15px;
   font-size: 17px;
   color: black;
 }
 
 @media screen and (max-width: 600px) {
   .navbar a, .navbar input[type=text] {
     float: none;
     display: block;
     text-align: left;
     width: 100%;
     margin: 0;
     padding: 14px;
   }
   .navbar input[type=text] {
     border: 1px solid black;  
   }
 }
.wrapper{
   min-height: 100vh;
   justify-content: center;
   display: flex;
   align-items: center;
}
.nav-search::placeholder{
   color: black;
}
.nav-search::-webkit-input-placeholder{
   color: black;
}

/*--cart items details--*/
.cart-page{
   margin: 80px 200px;
}
table{
   width: 100%;
   border-collapse: collapse;
}
.cart-info{
   display: flex;
   flex-wrap: wrap;
}
th{
   text-align: left;
   padding: 5px;
   color: #fff;
   background-color: #53c68c;
   font-weight: normal;
}
td{
   padding: 10px 5px;
}
td input{
   text-align: center;
   width: 40px;
   height: 30px;
   padding: 5px;
}
td a{
text-decoration: none;
color: #53c68c;  
}
td img{
   height: 100px;
   width: 100px;
}

.total-price{
   display: flex;
   justify-content: flex-end;
}
.total-price table{
   border-top: 3px solid #53c68c;
   width: 100%;
   width: 490px; 
}
td:last-child{
   text-align: right;
}
th:last-child{
   text-align: right;

}
@media(max-width:500px){
   .cart-page{
      margin: 50px 0px;
   }
}
/*Footer*/
.foot{
   padding-top: 2%;
   background-color: #f0f0f0;
   color: #383838;
   height: 400px;
   position: relative;
}
.foot-content{
   justify-content: space-between;
   display: flex;
}
.foot-shop{
flex-basis: 15%;
padding-left: 2%;
}
.foot-shop ul li{
list-style: none;
display:list-item;
}
.foot-shop ul li a{
text-decoration: none;
color: black;
}
.foot-company{
flex-basis: 15%;
}
.foot-company ul li{
list-style: none;
display:list-item;
}
.foot-company ul li a{
   color: #3e4444;
text-decoration: none;
}
.foot-help{
flex-basis: 15%;
}
.foot-help ul li{
list-style: none;
display:list-item;
}
.foot-help ul li a{
   color: #3e4444;
text-decoration: none;
}
.foot-icons{
flex-basis: 15%;
padding-right: 3%;
}
.fab{
margin: 0 13px;
cursor: pointer;
padding: 18px 0;
color: #3e4444;
}
.foot .foot-bottom{
background-color: #DCDCDC;
color: #3e4444;
height: 40px;
text-align: center;
position: absolute;
padding-top: 20px;
bottom: 0px;
left: 0px;
width: 100%;
}
@media(max-width:500px){
   .foot{
      height: 690px;
   }
   .foot .foot-content{
      flex-direction: column;
      margin-left: 5%; 
   }
   .foot .foot-content .foot-shop{
      font-size: 16px;
   }
   .foot .foot-content .foot-shop ul li a{
      color: #3e4444;
      text-decoration: none;
   }
   .foot .foot-content .foot-company{
      text-decoration: none;
      color: #3e4444;
      font-size: 16px;
   }
   .foot .foot-content .foot-company ul li a{
      color: #3e4444;
      text-decoration: none;
   }
   .foot .foot-bottom{
      text-decoration: none;
      height: 20px;
      font-size: 14px;
   }
   .foot .foot-content .foot-help ul li a{
      color: #3e4444;
      text-decoration: none;
   }
}