style.css

*{
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}
.new1:hover{
   background-color: lightgreen;
}

.btn{
   color: #fff;
   border: 1px solid #fff;
}
.navbar{
   margin-bottom: 20px;
   width: 100%;
   background-color:black;
}
.carousel-item{
  margin-top: 80px;
}
.carousel-item img{
   width: 100%;
   height: 80vh;
}
.navbar-nav li{
  margin-left: 20px;
  color: #fff;
}
.navbar-nav{
  color: #fff;
  margin-left: 40px;
}
.navbar-toggler{
  background-color: #fff;
}
@media only screen and (max-width: 450px){
   .carousel-item img{
     height: 200px;
   }
  .new-cart{
     margin-left: 20px;
   }
 }
#main{
   margin: 10px;
   display: flex;
   gap: 50px; 
   justify-content: center; 
   flex-wrap: wrap;
}
.item{
   border-radius: 10px;
   height: auto;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   
}
.item:hover{
   transition: 1.1;
}
.item img{
   filter: drop-shadow(10px 10px 5px #d3d3d3);
   padding-top: 20px;
   height: 35vh;
   border-radius: 5px;
}
.card img:hover{
   scale: 1.1;
   transition: 1.1s;
}
.btn1{
   background-color: blue;
   color: #fff;
   border: none;
   outline: none;
   border-radius: 20px;
   margin-top: 10px;
   padding: 10px 20px;
}
.btn1:hover{
   transition: 1.1s;
   background-color: transparent;
   color: blue;
   border: 1px solid blue !important;
}
.name{
   padding-top: 20px;
}
.div-1{
   justify-content: center;
   text-align: center;
}
.btn12 button{
   margin-bottom: 50px;
}
.icon{
   position: relative;
}
.icon .fa-solid{
   /* margin-top: 10px; */
   color: #fff;
   font-size: 2rem;
   padding: 0px 25px;
   /* position: relative; */
}
.quantity{
   background-color: red;
   color: #fff;
   padding: 2px 10px;
   border-radius: 50%;
   position: absolute;
   right: -0px; 
   top: -15px; 
}
.new-cart{
   background: linear-gradient(13deg, rgba(10, 0, 0, 0.274), rgba(19, 11, 11, 0.308));
   backdrop-filter: blur(30px);
   /* -webkit-overflow-scrolling: scrol; */
   overflow-x: hidden;
   /* background: #453e3b; */
   position: fixed;
   top: 0px;
   left: 100%;
   z-index: 1;
   width: 400px;
   height: 100vh;
   transition: 0.5s;
   color: #000;
}
#select{
   background-color: transparent;
   border: none;
   outline: none;
   color: #fff;
}
#select option{
   background-color: #fff;
   color: #000;
}
.new-cart h3{
   font-size: 3.5rem;
   text-align: center;
   color: #000;
   margin-top: 10px;
}
.new-cart .check-out{
   position: fixed;
   bottom: 0px;
   width: 100px;
   display: flex;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}
.new-cart .check-out button{
   width: 190px;
   height: 60px;
   /* gap: 30px; */
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: bold;
   cursor: pointer;
   color: #fff;
   background: linear-gradient(13deg, rgba(10, 0, 0, 0.274), rgba(19, 11, 11, 0.308));
   border: 1px solid black;
   outline: none;
   /* font-size: 1.5rem; */
}
.check-out .close:focus{ 
   background-color: #fff;
   color: #000; 
}
.active .new-cart{
   left: calc(100% - 400px);
}
.product-list{
   /* overflow: scroll; */
   padding: 15px;
   height: 5px;
   color: #000;
}
.product-list li{
   display: grid;
   grid-template-columns: 5px repeat(3, 2fr);
   color: #000;
   row-gap: 30px;
   margin-bottom: 20px;
   border-bottom: 1px solid;
}
.product-list  li .name1{
   margin-left: 50px;
}
.product-list li img{
   width: 50px;
   height: 50px;
   margin-top: 20px;
  }
.product-list li div{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
}
.product-list li button{
   /* padding: 5px; */
   background-color: #fff;
   color: #000;
   border: none;
   outline: none;
   width: 25px;
   border-radius: 10px;
}
.footer{
   color: #fff;
   background-color: black;
   flex-wrap: wrap;
   align-items: center;
}
.footer1 h1{
   font-size: 65px;
    font-weight: bold;
    color: #fff;
}
.footer1 p{
   font-size: 18px;
   font-weight: 400;
   margin-top: 20px;
}
.footer1 button{
   background-color: black;
   color: #fff;
}
.footer1 button:hover{
   transition: 1.1s;
   background-color: #fff;
   color: #000;
}