last modification

all-product.html

@@ -5432,7 +5432,7 @@
         
             <!-- all product nav -->
             <section id="all-product-nav" class="mt-2 py-2 d-none d-lg-block">
-                <div class="container">
+                <div class="container padding-adjust">
                     <div class="swiper all-product-nav-slider">
                         <div class="swiper-wrapper">
                             <div class="swiper-slide">
@@ -5523,7 +5523,7 @@
         
             <!-- all products filter and product -->
             <section id="all-products" class="mt-5 position-relative">
-                <div class="container">
+                <div class="container padding-adjust">
         
                     <!-- short filter  count button-->
                     <div class="short-filter d-flex justify-content-between align-items-center px-3 pb-3">
@@ -5739,12 +5739,12 @@
                         <!-- filter end -->
         
                         <!-- products -->
-                        <div class="products flex-fill pt-0 p-2">
+                        <div class="products flex-fill pt-0 p-2 ">
 
                             
-                            <div class="d-flex justify-content-between flex-wrap ">
+                            <div class="d-flex justify-content-between flex-wrap padding-adjust">
         
-                                <div class="product-single p-1 p-md-2 ">
+                                <div class="product-single p-md-2 ">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -5804,7 +5804,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-1 p-md-2 ">
+                                <div class="product-single p-md-2 ">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -5864,7 +5864,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-1 p-md-2 ">
+                                <div class="product-single p-md-2 ">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -5924,7 +5924,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-1 p-md-2 ">
+                                <div class="product-single p-md-2 ">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -5984,7 +5984,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-1 p-md-2 ">
+                                <div class="product-single p-md-2 ">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6044,7 +6044,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-1 p-md-2 ">
+                                <div class="product-single p-md-2 ">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6104,7 +6104,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-1 p-md-2 ">
+                                <div class="product-single p-md-2 ">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6164,7 +6164,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-1 p-md-2 ">
+                                <div class="product-single p-md-2 ">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6224,7 +6224,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-1 p-md-2 ">
+                                <div class="product-single p-md-2 ">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6284,7 +6284,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-1 p-md-2 ">
+                                <div class="product-single p-md-2 ">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6344,7 +6344,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-1 p-md-2 ">
+                                <div class="product-single p-md-2 ">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6404,7 +6404,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-1 p-md-2 ">
+                                <div class="product-single p-md-2 ">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6476,350 +6476,345 @@
         
 
             <!-- checkout  sidebar-->
-            <section id="checkout" class="pt-2 ">
-
-                <div class="checkout-container position-fixed bg-white pb-5">
+            <section id="checkout" class="checkout-container position-fixed bg-white pb-5 pt-2">
 
-                    
+                
 
-                    <div class="cart-product-container px-3 pt-2 pb-5">
+                <div class="cart-product-container px-3 pt-2 pb-5">
 
-                        <!-- cart header -->
-                        <div class="title-container border-bottom border-1 border-extralight-gray pt-3 d-flex align-items-start justify-content-between">
-                            <h4 >CART</h4>
-                            <button class="cross-btn btn">
-                                <img src="./images/icon/cross-icon.svg" alt="">
-                            </button>
-                        </div>
+                    <!-- cart header -->
+                    <div class="title-container border-bottom border-1 border-extralight-gray pt-3 d-flex align-items-start justify-content-between">
+                        <h4 >CART</h4>
+                        <button class="cross-btn btn">
+                            <img src="./images/icon/cross-icon.svg" alt="">
+                        </button>
+                    </div>
 
 
-                        <!-- cart item -->
-                        <div class="cart-items mt-3">
+                    <!-- cart item -->
+                    <div class="cart-items mt-3">
 
-                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                        <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                <div class="d-flex justify-content-between">
-                                    <div class="item-details d-flex">
-                                        <div class="img-container">
-                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                        </div>
+                            <div class="d-flex justify-content-between">
+                                <div class="item-details d-flex">
+                                    <div class="img-container">
+                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
+                                    </div>
 
-                                        <div class="pt-2 ">
-                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                        </div>
-                                        
+                                    <div class="pt-2 ">
+                                        <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                        <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                     </div>
-                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                        <div class=" quantity text-center" >
-                                            <div class="title text-gray small">QTY</div>
-                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                        </div>
+                                    
+                                </div>
+                                <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                    <div class=" quantity text-center" >
+                                        <div class="title text-gray small">QTY</div>
+                                        <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
                                     </div>
                                 </div>
+                            </div>
 
 
-                                <div class="price text-end mt-3 fs-5">
-                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                    <span class="ms-3 text-gray">৳ 440</span>
-                                </div>
-
-                                <button class="btn delete-btn position-absolute">
-                                    <img src="./images/icon/delete-icon.svg" alt="">
-                                </button>
+                            <div class="price text-end mt-3 fs-5">
+                                <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                <span class="ms-3 text-gray">৳ 440</span>
                             </div>
 
-                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                            <button class="btn delete-btn position-absolute">
+                                <img src="./images/icon/delete-icon.svg" alt="">
+                            </button>
+                        </div>
 
-                                <div class="d-flex justify-content-between">
-                                    <div class="item-details d-flex">
-                                        <div class="img-container">
-                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                        </div>
+                        <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                        <div class="pt-2 ">
-                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                        </div>
-                                        
+                            <div class="d-flex justify-content-between">
+                                <div class="item-details d-flex">
+                                    <div class="img-container">
+                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
                                     </div>
-                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                        <div class=" quantity text-center" >
-                                            <div class="title text-gray small">QTY</div>
-                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                        </div>
+
+                                    <div class="pt-2 ">
+                                        <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                        <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                     </div>
+                                    
                                 </div>
-
-
-                                <div class="price text-end mt-3 fs-5">
-                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                    <span class="ms-3 text-gray">৳ 440</span>
+                                <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                    <div class=" quantity text-center" >
+                                        <div class="title text-gray small">QTY</div>
+                                        <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                    </div>
                                 </div>
+                            </div>
+
 
-                                <button class="btn delete-btn position-absolute">
-                                    <img src="./images/icon/delete-icon.svg" alt="">
-                                </button>
+                            <div class="price text-end mt-3 fs-5">
+                                <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                <span class="ms-3 text-gray">৳ 440</span>
                             </div>
 
-                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                            <button class="btn delete-btn position-absolute">
+                                <img src="./images/icon/delete-icon.svg" alt="">
+                            </button>
+                        </div>
+
+                        <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                <div class="d-flex justify-content-between">
-                                    <div class="item-details d-flex">
-                                        <div class="img-container">
-                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                        </div>
+                            <div class="d-flex justify-content-between">
+                                <div class="item-details d-flex">
+                                    <div class="img-container">
+                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
+                                    </div>
 
-                                        <div class="pt-2 ">
-                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                        </div>
-                                        
+                                    <div class="pt-2 ">
+                                        <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                        <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                     </div>
-                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                        <div class=" quantity text-center" >
-                                            <div class="title text-gray small">QTY</div>
-                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                        </div>
+                                    
+                                </div>
+                                <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                    <div class=" quantity text-center" >
+                                        <div class="title text-gray small">QTY</div>
+                                        <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
                                     </div>
                                 </div>
+                            </div>
 
 
-                                <div class="price text-end mt-3 fs-5">
-                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                    <span class="ms-3 text-gray">৳ 440</span>
-                                </div>
-
-                                <button class="btn delete-btn position-absolute">
-                                    <img src="./images/icon/delete-icon.svg" alt="">
-                                </button>
+                            <div class="price text-end mt-3 fs-5">
+                                <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                <span class="ms-3 text-gray">৳ 440</span>
                             </div>
 
-                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                            <button class="btn delete-btn position-absolute">
+                                <img src="./images/icon/delete-icon.svg" alt="">
+                            </button>
+                        </div>
 
-                                <div class="d-flex justify-content-between">
-                                    <div class="item-details d-flex">
-                                        <div class="img-container">
-                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                        </div>
+                        <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                        <div class="pt-2 ">
-                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                        </div>
-                                        
+                            <div class="d-flex justify-content-between">
+                                <div class="item-details d-flex">
+                                    <div class="img-container">
+                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
                                     </div>
-                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                        <div class=" quantity text-center" >
-                                            <div class="title text-gray small">QTY</div>
-                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                        </div>
+
+                                    <div class="pt-2 ">
+                                        <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                        <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                     </div>
+                                    
                                 </div>
-
-
-                                <div class="price text-end mt-3 fs-5">
-                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                    <span class="ms-3 text-gray">৳ 440</span>
+                                <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                    <div class=" quantity text-center" >
+                                        <div class="title text-gray small">QTY</div>
+                                        <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                    </div>
                                 </div>
+                            </div>
 
-                                <button class="btn delete-btn position-absolute">
-                                    <img src="./images/icon/delete-icon.svg" alt="">
-                                </button>
+
+                            <div class="price text-end mt-3 fs-5">
+                                <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                <span class="ms-3 text-gray">৳ 440</span>
                             </div>
 
-                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                            <button class="btn delete-btn position-absolute">
+                                <img src="./images/icon/delete-icon.svg" alt="">
+                            </button>
+                        </div>
 
-                                <div class="d-flex justify-content-between">
-                                    <div class="item-details d-flex">
-                                        <div class="img-container">
-                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                        </div>
+                        <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                        <div class="pt-2 ">
-                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                        </div>
-                                        
+                            <div class="d-flex justify-content-between">
+                                <div class="item-details d-flex">
+                                    <div class="img-container">
+                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
                                     </div>
-                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                        <div class=" quantity text-center" >
-                                            <div class="title text-gray small">QTY</div>
-                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                        </div>
+
+                                    <div class="pt-2 ">
+                                        <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                        <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                     </div>
+                                    
                                 </div>
-
-
-                                <div class="price text-end mt-3 fs-5">
-                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                    <span class="ms-3 text-gray">৳ 440</span>
+                                <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                    <div class=" quantity text-center" >
+                                        <div class="title text-gray small">QTY</div>
+                                        <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                    </div>
                                 </div>
+                            </div>
 
-                                <button class="btn delete-btn position-absolute">
-                                    <img src="./images/icon/delete-icon.svg" alt="">
-                                </button>
+
+                            <div class="price text-end mt-3 fs-5">
+                                <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                <span class="ms-3 text-gray">৳ 440</span>
                             </div>
 
-                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                            <button class="btn delete-btn position-absolute">
+                                <img src="./images/icon/delete-icon.svg" alt="">
+                            </button>
+                        </div>
 
-                                <div class="d-flex justify-content-between">
-                                    <div class="item-details d-flex">
-                                        <div class="img-container">
-                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                        </div>
+                        <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                        <div class="pt-2 ">
-                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                        </div>
-                                        
+                            <div class="d-flex justify-content-between">
+                                <div class="item-details d-flex">
+                                    <div class="img-container">
+                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
                                     </div>
-                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                        <div class=" quantity text-center" >
-                                            <div class="title text-gray small">QTY</div>
-                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                        </div>
+
+                                    <div class="pt-2 ">
+                                        <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                        <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                     </div>
+                                    
                                 </div>
-
-
-                                <div class="price text-end mt-3 fs-5">
-                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                    <span class="ms-3 text-gray">৳ 440</span>
+                                <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                    <div class=" quantity text-center" >
+                                        <div class="title text-gray small">QTY</div>
+                                        <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                    </div>
                                 </div>
+                            </div>
+
 
-                                <button class="btn delete-btn position-absolute">
-                                    <img src="./images/icon/delete-icon.svg" alt="">
-                                </button>
+                            <div class="price text-end mt-3 fs-5">
+                                <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                <span class="ms-3 text-gray">৳ 440</span>
                             </div>
 
-                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                            <button class="btn delete-btn position-absolute">
+                                <img src="./images/icon/delete-icon.svg" alt="">
+                            </button>
+                        </div>
 
-                                <div class="d-flex justify-content-between">
-                                    <div class="item-details d-flex">
-                                        <div class="img-container">
-                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                        </div>
+                        <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                        <div class="pt-2 ">
-                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                        </div>
-                                        
+                            <div class="d-flex justify-content-between">
+                                <div class="item-details d-flex">
+                                    <div class="img-container">
+                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
                                     </div>
-                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                        <div class=" quantity text-center" >
-                                            <div class="title text-gray small">QTY</div>
-                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                        </div>
+
+                                    <div class="pt-2 ">
+                                        <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                        <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
+                                    </div>
+                                    
+                                </div>
+                                <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                    <div class=" quantity text-center" >
+                                        <div class="title text-gray small">QTY</div>
+                                        <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
                                     </div>
                                 </div>
+                            </div>
 
 
-                                <div class="price text-end mt-3 fs-5">
-                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                    <span class="ms-3 text-gray">৳ 440</span>
-                                </div>
-
-                                <button class="btn delete-btn position-absolute">
-                                    <img src="./images/icon/delete-icon.svg" alt="">
-                                </button>
+                            <div class="price text-end mt-3 fs-5">
+                                <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                <span class="ms-3 text-gray">৳ 440</span>
                             </div>
 
-                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                            <button class="btn delete-btn position-absolute">
+                                <img src="./images/icon/delete-icon.svg" alt="">
+                            </button>
+                        </div>
 
-                                <div class="d-flex justify-content-between">
-                                    <div class="item-details d-flex">
-                                        <div class="img-container">
-                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                        </div>
+                        <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                        <div class="pt-2 ">
-                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                        </div>
-                                        
+                            <div class="d-flex justify-content-between">
+                                <div class="item-details d-flex">
+                                    <div class="img-container">
+                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
                                     </div>
-                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                        <div class=" quantity text-center" >
-                                            <div class="title text-gray small">QTY</div>
-                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                        </div>
+
+                                    <div class="pt-2 ">
+                                        <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                        <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                     </div>
+                                    
                                 </div>
-
-
-                                <div class="price text-end mt-3 fs-5">
-                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                    <span class="ms-3 text-gray">৳ 440</span>
+                                <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                    <div class=" quantity text-center" >
+                                        <div class="title text-gray small">QTY</div>
+                                        <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                    </div>
                                 </div>
+                            </div>
+
 
-                                <button class="btn delete-btn position-absolute">
-                                    <img src="./images/icon/delete-icon.svg" alt="">
-                                </button>
+                            <div class="price text-end mt-3 fs-5">
+                                <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                <span class="ms-3 text-gray">৳ 440</span>
                             </div>
 
-                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                            <button class="btn delete-btn position-absolute">
+                                <img src="./images/icon/delete-icon.svg" alt="">
+                            </button>
+                        </div>
 
-                                <div class="d-flex justify-content-between">
-                                    <div class="item-details d-flex">
-                                        <div class="img-container">
-                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                        </div>
+                        <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                        <div class="pt-2 ">
-                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                        </div>
-                                        
+                            <div class="d-flex justify-content-between">
+                                <div class="item-details d-flex">
+                                    <div class="img-container">
+                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
                                     </div>
-                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                        <div class=" quantity text-center" >
-                                            <div class="title text-gray small">QTY</div>
-                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                        </div>
+
+                                    <div class="pt-2 ">
+                                        <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                        <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                     </div>
+                                    
                                 </div>
-
-
-                                <div class="price text-end mt-3 fs-5">
-                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                    <span class="ms-3 text-gray">৳ 440</span>
+                                <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                    <div class=" quantity text-center" >
+                                        <div class="title text-gray small">QTY</div>
+                                        <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                    </div>
                                 </div>
+                            </div>
 
-                                <button class="btn delete-btn position-absolute">
-                                    <img src="./images/icon/delete-icon.svg" alt="">
-                                </button>
+
+                            <div class="price text-end mt-3 fs-5">
+                                <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                <span class="ms-3 text-gray">৳ 440</span>
                             </div>
 
+                            <button class="btn delete-btn position-absolute">
+                                <img src="./images/icon/delete-icon.svg" alt="">
+                            </button>
                         </div>
 
                     </div>
 
+                </div>
 
 
-                    <!-- proced button and utility -->
-                    <div class="content position-relative w-100">
 
-                        <div class="proceed-button-container position-fixed bg-white  bottom-0  px-2 py-3 d-flex align-items-center justify-content-between">
+                <!-- proced button and utility -->
+                <div class="content position-relative w-100">
 
-                            <div class="text-center w-50">
-                                <div class="fw-normal">SUBTOTAL</div>
-                                <div class="fw-semibold">৳1,550</div>
-                            </div>
+                    <div class="proceed-button-container position-fixed bg-white  bottom-0  px-2 py-3 d-flex align-items-center justify-content-between">
 
-                            <div class="text-center w-50">
-                                <a href="./checkout.html" class="btn rounded-0 bg-pink text-white py-2 px-3 fs-5 fw-semibold">
-                                    PROCEED 
-                                </a>
-                            </div>
+                        <div class="text-center w-50">
+                            <div class="fw-normal">SUBTOTAL</div>
+                            <div class="fw-semibold">৳1,550</div>
                         </div>
-                    </div>
 
+                        <div class="text-center w-50">
+                            <a href="./checkout.html" class="btn rounded-0 bg-pink text-white py-2 px-3 fs-5 fw-semibold">
+                                PROCEED 
+                            </a>
+                        </div>
+                    </div>
                 </div>
 
-            
             </section>
         
             <!-- checkout sidebar navigation button -->

checkout.html

@@ -5414,7 +5414,7 @@
         <!-- checkout  -->
 
         <section id="checkout-page">
-            <div class="container py-4">
+            <div class="container py-4 padding-adjust">
 
                 <!-- title -->
                 <div class="section-title text-start py-3 border-bottom border-2 border-extralight-black">CHECKOUT</div>

css/style.css

@@ -249,6 +249,12 @@ a {
 }
 
 
+.padding-adjust {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+}
+
+
 @media screen and (max-width: 992px) {
 
     .border-image {
@@ -283,8 +289,7 @@ a {
     
     .section-subtitle {
         font-size: 1em;
-    }
-    
+    }    
 
   }
 
@@ -322,7 +327,6 @@ a {
 
 .header {
     transition: all 2s ease-in-out;
-
 }
 
 .header.sticky {
@@ -666,6 +670,14 @@ a {
     width: 20%;
   }
 
+    .product-single:first-child {
+        padding-left: 0 !important;
+    }
+
+    .product-single:last-child {
+        padding-right: 0 !important;
+    }
+
   .product-single .product {
     box-shadow: var(--shadow-product);
     height: 100%;
@@ -811,6 +823,10 @@ border-bottom-width: 30px;
 border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
 }
 
+div#pills-tabContent {
+    padding: 0 !important;
+}
+
 
 /* whats-happening */
 #whats-happening .discover-more {
@@ -965,6 +981,7 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
 
 #all-products .products .product-single{
     width: 25%;
+    padding-left: 1rem !important;
 }
 
 #all-products .filter-product-price .form-range::-webkit-slider-thumb {
@@ -972,73 +989,72 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
 }
 
 
-#checkout .checkout-container {
+#checkout.checkout-container {
     bottom: 0;
     right: 0;
+    height: calc(100vh - 36.156px);
     width: 480px;
-    height: 77vh;
     box-shadow: var(--shadow-black);
-    border-radius: 5px 0 0 0;
     display: none;
-    z-index: 100;
+    z-index: 150;
 }
 
-#checkout .checkout-container .cart-product-container {
+#checkout.checkout-container .cart-product-container {
     height: 100%;
 }
 
-#checkout .checkout-container .title-container {
+#checkout.checkout-container .title-container {
     height: 3.5rem;
 }
 
-#checkout .checkout-container .cart-items {
+#checkout.checkout-container .cart-items {
     padding-bottom: 2rem;
     height: calc(100% - 3rem);
     overflow-y: auto;
 }
 
-#checkout .checkout-container .cart-items::-webkit-scrollbar {
+#checkout.checkout-container .cart-items::-webkit-scrollbar {
     display: none;
 }
 
 
-#checkout .checkout-container .cross-btn  {
+#checkout.checkout-container .cross-btn  {
     transform: translateY(-15px);
 }
 
-#checkout .checkout-container .cross-btn img {
+#checkout.checkout-container .cross-btn img {
     height: 15px;
     width: 15px;
 }
 
-#checkout .checkout-container .proceed-button-container {
+#checkout.checkout-container .proceed-button-container {
     box-shadow: var(--shadow-product);
     width: 480px;
 }
 
 
-#checkout .checkout-container .cart-product-container .cart-items .item {
+#checkout.checkout-container .cart-product-container .cart-items .item {
     box-shadow: var(--shadow-black);
 }
 
-#checkout .checkout-container .cart-product-container .cart-items .img-container {
+#checkout.checkout-container .cart-product-container .cart-items .img-container {
     height: 100px;
 }
 
-#checkout .checkout-container .cart-product-container .cart-items .delete-btn {
+#checkout.checkout-container .cart-product-container .cart-items .delete-btn {
     top: 10px;
     right: 10px;
 }
-#checkout .checkout-container .cart-product-container .cart-items .delete-btn:hover {
+#checkout.checkout-container .cart-product-container .cart-items .delete-btn:hover {
     transform: scale(1.1);
 }
 
-#checkout .checkout-container .cart-product-container .cart-items .delete-btn img {
+#checkout.checkout-container .cart-product-container .cart-items .delete-btn img {
     height: 25px;
     width: 25px;
 }
 
-#checkout .checkout-container .cart-product-container .cart-items .quantity-container .title {
+#checkout.checkout-container .cart-product-container .cart-items .quantity-container .title {
     font-size: .8em;
 }
 
@@ -1096,6 +1112,10 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
 
 
 @media screen and (max-width: 1200px) {
+
+    #checkout.checkout-container {
+        height: calc(100vh - 36.156px);
+    }
          
     #all-products .products .product-single{
         width: 33.33%;
@@ -1107,6 +1127,7 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
     
     #all-products .filter {
         min-width: 250px !important;
+        
     }
 
 }
@@ -1152,17 +1173,18 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
     }
     
     
-    #checkout .checkout-container {
+    #checkout.checkout-container {
         top: 0;
         bottom: 0;
         left: 0;
         width: 100vw;
         height: 100%;
+        border-radius: 0;
         box-shadow: var(--shadow-black);
         z-index: 150;
     }
     
-    #checkout .checkout-container .proceed-button-container {
+    #checkout.checkout-container .proceed-button-container {
         width: 100vw;
     }
 
@@ -1186,6 +1208,7 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
 
     #all-products .products .product-single{
         width: 100%;
+        margin-bottom: 1rem;
     }
 
 

js/app.js

@@ -3,7 +3,7 @@
 
 window.addEventListener('scroll', function(){
   var header = document.querySelector('.header');
-  header.classList.toggle("sticky", window.scrollY > 220);
+  header.classList.toggle("sticky", window.scrollY > 0);
 })
 
 
@@ -277,7 +277,7 @@ const searchButton = document.querySelector(".search-btn-mobile")
             slidesPerView: 4,
           },
           993: { 
-            slidesPerView: 5,
+            slidesPerView: 6,
 
           }
         },

product-details.html

@@ -5418,7 +5418,7 @@
 
                     <!-- top add -->
                 <section id="top-add" class="mt-3">
-                    <div class="container">
+                    <div class="container padding-adjust">
                         <div class="row justify-content-between">
                             <div class="add-container col-12 col-lg-8 mb-4">
                                 <div class="add text-center fs-3 p-2 h-100">Add</div>
@@ -5432,7 +5432,7 @@
 
                 <!-- product details -->
                 <section id="product-details">
-                    <div class="container">
+                    <div class="container padding-adjust">
                         <div class="row">
 
                             <!-- product carousel -->
@@ -5692,7 +5692,7 @@
 
                 <!-- product details tab -->
                 <section id="product-details-tab" class="mt-4"> 
-                    <div class="container">
+                    <div class="container padding-adjust">
 
                         <!-- tab button -->
                         <ul class="nav nav-tabs" id="myTab" role="tablist" >
@@ -5763,7 +5763,7 @@
 
                 <!-- related product -->
                 <section id="related-product" class="my-4">
-                    <div class="container">
+                    <div class="container padding-adjust">
 
                         <div class="display-6 border-bottom border-1 py-3 text-black-light">Related Products</div>
 
@@ -6079,7 +6079,7 @@
 
                 <!-- also like this product -->
                 <section id="also-like-product" class="my-4">
-                    <div class="container">
+                    <div class="container padding-adjust">
 
                         <div class="display-6 border-bottom border-1 py-3 text-black-light">You May Also like this</div>
 
@@ -6395,327 +6395,325 @@
 
                 
                 <!-- checkout  sidebar-->
-                <section id="checkout" class="pt-2 ">
+                <section id="checkout" class="checkout-container position-fixed bg-white pb-5 pt-2">
 
-                    <div class="checkout-container position-fixed bg-white pb-5">
+                    
 
-                        
-
-                        <div class="cart-product-container px-3 pt-2 pb-5">
+                    <div class="cart-product-container px-3 pt-2 pb-5">
 
-                            <!-- cart header -->
-                            <div class="title-container border-bottom border-1 border-extralight-gray pt-3 d-flex align-items-start justify-content-between">
-                                <h4 >CART</h4>
-                                <button class="cross-btn btn">
-                                    <img src="./images/icon/cross-icon.svg" alt="">
-                                </button>
-                            </div>
+                        <!-- cart header -->
+                        <div class="title-container border-bottom border-1 border-extralight-gray pt-3 d-flex align-items-start justify-content-between">
+                            <h4 >CART</h4>
+                            <button class="cross-btn btn">
+                                <img src="./images/icon/cross-icon.svg" alt="">
+                            </button>
+                        </div>
 
 
-                            <!-- cart item -->
-                            <div class="cart-items mt-3">
+                        <!-- cart item -->
+                        <div class="cart-items mt-3">
 
-                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                    <div class="d-flex justify-content-between">
-                                        <div class="item-details d-flex">
-                                            <div class="img-container">
-                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                            </div>
+                                <div class="d-flex justify-content-between">
+                                    <div class="item-details d-flex">
+                                        <div class="img-container">
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
+                                        </div>
 
-                                            <div class="pt-2 ">
-                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                            </div>
-                                            
+                                        <div class="pt-2 ">
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                         </div>
-                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                            <div class=" quantity text-center" >
-                                                <div class="title text-gray small">QTY</div>
-                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                            </div>
+                                        
+                                    </div>
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                        <div class=" quantity text-center" >
+                                            <div class="title text-gray small">QTY</div>
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
                                         </div>
                                     </div>
+                                </div>
 
 
-                                    <div class="price text-end mt-3 fs-5">
-                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                        <span class="ms-3 text-gray">৳ 440</span>
-                                    </div>
-
-                                    <button class="btn delete-btn position-absolute">
-                                        <img src="./images/icon/delete-icon.svg" alt="">
-                                    </button>
+                                <div class="price text-end mt-3 fs-5">
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                    <span class="ms-3 text-gray">৳ 440</span>
                                 </div>
 
-                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                                <button class="btn delete-btn position-absolute">
+                                    <img src="./images/icon/delete-icon.svg" alt="">
+                                </button>
+                            </div>
 
-                                    <div class="d-flex justify-content-between">
-                                        <div class="item-details d-flex">
-                                            <div class="img-container">
-                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                            </div>
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                            <div class="pt-2 ">
-                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                            </div>
-                                            
+                                <div class="d-flex justify-content-between">
+                                    <div class="item-details d-flex">
+                                        <div class="img-container">
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
                                         </div>
-                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                            <div class=" quantity text-center" >
-                                                <div class="title text-gray small">QTY</div>
-                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                            </div>
+
+                                        <div class="pt-2 ">
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                         </div>
+                                        
                                     </div>
-
-
-                                    <div class="price text-end mt-3 fs-5">
-                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                        <span class="ms-3 text-gray">৳ 440</span>
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                        <div class=" quantity text-center" >
+                                            <div class="title text-gray small">QTY</div>
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                        </div>
                                     </div>
+                                </div>
 
-                                    <button class="btn delete-btn position-absolute">
-                                        <img src="./images/icon/delete-icon.svg" alt="">
-                                    </button>
+
+                                <div class="price text-end mt-3 fs-5">
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                    <span class="ms-3 text-gray">৳ 440</span>
                                 </div>
 
-                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                                <button class="btn delete-btn position-absolute">
+                                    <img src="./images/icon/delete-icon.svg" alt="">
+                                </button>
+                            </div>
 
-                                    <div class="d-flex justify-content-between">
-                                        <div class="item-details d-flex">
-                                            <div class="img-container">
-                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                            </div>
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                            <div class="pt-2 ">
-                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                            </div>
-                                            
+                                <div class="d-flex justify-content-between">
+                                    <div class="item-details d-flex">
+                                        <div class="img-container">
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
                                         </div>
-                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                            <div class=" quantity text-center" >
-                                                <div class="title text-gray small">QTY</div>
-                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                            </div>
+
+                                        <div class="pt-2 ">
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                         </div>
+                                        
                                     </div>
-
-
-                                    <div class="price text-end mt-3 fs-5">
-                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                        <span class="ms-3 text-gray">৳ 440</span>
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                        <div class=" quantity text-center" >
+                                            <div class="title text-gray small">QTY</div>
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                        </div>
                                     </div>
+                                </div>
+
 
-                                    <button class="btn delete-btn position-absolute">
-                                        <img src="./images/icon/delete-icon.svg" alt="">
-                                    </button>
+                                <div class="price text-end mt-3 fs-5">
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                    <span class="ms-3 text-gray">৳ 440</span>
                                 </div>
 
-                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                                <button class="btn delete-btn position-absolute">
+                                    <img src="./images/icon/delete-icon.svg" alt="">
+                                </button>
+                            </div>
 
-                                    <div class="d-flex justify-content-between">
-                                        <div class="item-details d-flex">
-                                            <div class="img-container">
-                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                            </div>
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                            <div class="pt-2 ">
-                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                            </div>
-                                            
+                                <div class="d-flex justify-content-between">
+                                    <div class="item-details d-flex">
+                                        <div class="img-container">
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
                                         </div>
-                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                            <div class=" quantity text-center" >
-                                                <div class="title text-gray small">QTY</div>
-                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                            </div>
+
+                                        <div class="pt-2 ">
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                         </div>
+                                        
                                     </div>
-
-
-                                    <div class="price text-end mt-3 fs-5">
-                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                        <span class="ms-3 text-gray">৳ 440</span>
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                        <div class=" quantity text-center" >
+                                            <div class="title text-gray small">QTY</div>
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                        </div>
                                     </div>
+                                </div>
 
-                                    <button class="btn delete-btn position-absolute">
-                                        <img src="./images/icon/delete-icon.svg" alt="">
-                                    </button>
+
+                                <div class="price text-end mt-3 fs-5">
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                    <span class="ms-3 text-gray">৳ 440</span>
                                 </div>
 
-                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                                <button class="btn delete-btn position-absolute">
+                                    <img src="./images/icon/delete-icon.svg" alt="">
+                                </button>
+                            </div>
 
-                                    <div class="d-flex justify-content-between">
-                                        <div class="item-details d-flex">
-                                            <div class="img-container">
-                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                            </div>
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                            <div class="pt-2 ">
-                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                            </div>
-                                            
+                                <div class="d-flex justify-content-between">
+                                    <div class="item-details d-flex">
+                                        <div class="img-container">
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
                                         </div>
-                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                            <div class=" quantity text-center" >
-                                                <div class="title text-gray small">QTY</div>
-                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                            </div>
+
+                                        <div class="pt-2 ">
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                         </div>
+                                        
                                     </div>
-
-
-                                    <div class="price text-end mt-3 fs-5">
-                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                        <span class="ms-3 text-gray">৳ 440</span>
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                        <div class=" quantity text-center" >
+                                            <div class="title text-gray small">QTY</div>
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                        </div>
                                     </div>
+                                </div>
+
 
-                                    <button class="btn delete-btn position-absolute">
-                                        <img src="./images/icon/delete-icon.svg" alt="">
-                                    </button>
+                                <div class="price text-end mt-3 fs-5">
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                    <span class="ms-3 text-gray">৳ 440</span>
                                 </div>
 
-                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                                <button class="btn delete-btn position-absolute">
+                                    <img src="./images/icon/delete-icon.svg" alt="">
+                                </button>
+                            </div>
 
-                                    <div class="d-flex justify-content-between">
-                                        <div class="item-details d-flex">
-                                            <div class="img-container">
-                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                            </div>
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                            <div class="pt-2 ">
-                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                            </div>
-                                            
+                                <div class="d-flex justify-content-between">
+                                    <div class="item-details d-flex">
+                                        <div class="img-container">
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
                                         </div>
-                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                            <div class=" quantity text-center" >
-                                                <div class="title text-gray small">QTY</div>
-                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                            </div>
+
+                                        <div class="pt-2 ">
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                         </div>
+                                        
                                     </div>
-
-
-                                    <div class="price text-end mt-3 fs-5">
-                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                        <span class="ms-3 text-gray">৳ 440</span>
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                        <div class=" quantity text-center" >
+                                            <div class="title text-gray small">QTY</div>
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                        </div>
                                     </div>
+                                </div>
+
 
-                                    <button class="btn delete-btn position-absolute">
-                                        <img src="./images/icon/delete-icon.svg" alt="">
-                                    </button>
+                                <div class="price text-end mt-3 fs-5">
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                    <span class="ms-3 text-gray">৳ 440</span>
                                 </div>
 
-                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                                <button class="btn delete-btn position-absolute">
+                                    <img src="./images/icon/delete-icon.svg" alt="">
+                                </button>
+                            </div>
 
-                                    <div class="d-flex justify-content-between">
-                                        <div class="item-details d-flex">
-                                            <div class="img-container">
-                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                            </div>
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                            <div class="pt-2 ">
-                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                            </div>
-                                            
+                                <div class="d-flex justify-content-between">
+                                    <div class="item-details d-flex">
+                                        <div class="img-container">
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
                                         </div>
-                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                            <div class=" quantity text-center" >
-                                                <div class="title text-gray small">QTY</div>
-                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                            </div>
+
+                                        <div class="pt-2 ">
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                         </div>
+                                        
                                     </div>
-
-
-                                    <div class="price text-end mt-3 fs-5">
-                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                        <span class="ms-3 text-gray">৳ 440</span>
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                        <div class=" quantity text-center" >
+                                            <div class="title text-gray small">QTY</div>
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                        </div>
                                     </div>
+                                </div>
 
-                                    <button class="btn delete-btn position-absolute">
-                                        <img src="./images/icon/delete-icon.svg" alt="">
-                                    </button>
+
+                                <div class="price text-end mt-3 fs-5">
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                    <span class="ms-3 text-gray">৳ 440</span>
                                 </div>
 
-                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                                <button class="btn delete-btn position-absolute">
+                                    <img src="./images/icon/delete-icon.svg" alt="">
+                                </button>
+                            </div>
 
-                                    <div class="d-flex justify-content-between">
-                                        <div class="item-details d-flex">
-                                            <div class="img-container">
-                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                            </div>
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                            <div class="pt-2 ">
-                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                            </div>
-                                            
+                                <div class="d-flex justify-content-between">
+                                    <div class="item-details d-flex">
+                                        <div class="img-container">
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
                                         </div>
-                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                            <div class=" quantity text-center" >
-                                                <div class="title text-gray small">QTY</div>
-                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                            </div>
+
+                                        <div class="pt-2 ">
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                         </div>
+                                        
                                     </div>
-
-
-                                    <div class="price text-end mt-3 fs-5">
-                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                        <span class="ms-3 text-gray">৳ 440</span>
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                        <div class=" quantity text-center" >
+                                            <div class="title text-gray small">QTY</div>
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                        </div>
                                     </div>
+                                </div>
+
 
-                                    <button class="btn delete-btn position-absolute">
-                                        <img src="./images/icon/delete-icon.svg" alt="">
-                                    </button>
+                                <div class="price text-end mt-3 fs-5">
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                    <span class="ms-3 text-gray">৳ 440</span>
                                 </div>
 
-                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
+                                <button class="btn delete-btn position-absolute">
+                                    <img src="./images/icon/delete-icon.svg" alt="">
+                                </button>
+                            </div>
 
-                                    <div class="d-flex justify-content-between">
-                                        <div class="item-details d-flex">
-                                            <div class="img-container">
-                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
-                                            </div>
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
-                                            <div class="pt-2 ">
-                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
-                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
-                                            </div>
-                                            
+                                <div class="d-flex justify-content-between">
+                                    <div class="item-details d-flex">
+                                        <div class="img-container">
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
                                         </div>
-                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
-                                            <div class=" quantity text-center" >
-                                                <div class="title text-gray small">QTY</div>
-                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
-                                            </div>
+
+                                        <div class="pt-2 ">
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
                                         </div>
+                                        
                                     </div>
-
-
-                                    <div class="price text-end mt-3 fs-5">
-                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
-                                        <span class="ms-3 text-gray">৳ 440</span>
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
+                                        <div class=" quantity text-center" >
+                                            <div class="title text-gray small">QTY</div>
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
+                                        </div>
                                     </div>
+                                </div>
+
 
-                                    <button class="btn delete-btn position-absolute">
-                                        <img src="./images/icon/delete-icon.svg" alt="">
-                                    </button>
+                                <div class="price text-end mt-3 fs-5">
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
+                                    <span class="ms-3 text-gray">৳ 440</span>
                                 </div>
 
+                                <button class="btn delete-btn position-absolute">
+                                    <img src="./images/icon/delete-icon.svg" alt="">
+                                </button>
                             </div>
 
                         </div>
 
+                    </div>
+
 
 
                     <!-- proced button and utility -->
@@ -6736,9 +6734,6 @@
                         </div>
                     </div>
 
-                    </div>
-
-                
                 </section>
             
                 <!-- checkout sidebar navigation button -->