style changes

src/app/components/items-carousel/items-carousel.component.scss

@@ -3,6 +3,7 @@
   padding: 2rem 0;
   max-width: 1400px;
   margin: 0 auto;
+  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   
   ::ng-deep {
     // PrimeNG carousel wrapper
@@ -21,8 +22,8 @@
         height: 3rem;
         border-radius: 50%;
         background: white;
-        border: 2px solid #e5e7eb;
-        color: #374151;
+        border: 2px solid #d3dad9;
+        color: #1e3c38;
         transition: all 0.3s ease;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         align-self: center;
@@ -31,13 +32,13 @@
         
         &:hover {
           background: #f9fafb;
-          border-color: #d1d5db;
+          border-color: #d3dad9;
           transform: scale(1.05);
         }
         
         &:not(:disabled):hover {
-          background: var(--primary-color, #5568d3);
-          border-color: var(--primary-color, #5568d3);
+          background: var(--primary-color, #497671);
+          border-color: var(--primary-color, #497671);
           color: white;
         }
       }
@@ -63,7 +64,7 @@
         flex-shrink: 0;
       }
       
-      // Pagination dots - using actual PrimeNG rendered classes
+      // Pagination dots
       .p-carousel-indicator-list {
         display: flex !important;
         justify-content: center !important;
@@ -79,20 +80,20 @@
             width: 12px !important;
             height: 12px !important;
             border-radius: 50% !important;
-            background-color: #d1d5db !important;
+            background-color: #d3dad9 !important;
             border: 0 !important;
             padding: 0 !important;
             cursor: pointer !important;
             transition: all 0.3s ease !important;
             
             &:hover {
-              background-color: #9ca3af !important;
+              background-color: #a1b4b5 !important;
               transform: scale(1.2);
             }
           }
           
           &.p-carousel-indicator-active .p-carousel-indicator-button {
-            background-color: var(--primary-color, #5568d3) !important;
+            background-color: var(--primary-color, #497671) !important;
             width: 32px !important;
             border-radius: 6px !important;
           }
@@ -106,14 +107,14 @@
 .carousel-empty {
   text-align: center;
   padding: 3rem 1rem;
-  color: #666;
+  color: #697777;
 
   .spinner {
     width: 40px;
     height: 40px;
     margin: 0 auto 1rem;
     border: 4px solid #f3f3f3;
-    border-top: 4px solid var(--primary-color, #5568d3);
+    border-top: 4px solid var(--primary-color, #497671);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
@@ -124,12 +125,13 @@
   100% { transform: rotate(360deg); }
 }
 
-// Item card styles matching your existing design
+// Item card styles
 .item-card {
   background: white;
-  border-radius: 12px;
+  border-radius: 13px;
+  border: 1px solid #d3dad9;
   overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease;
   position: relative;
   height: 100%;
@@ -140,7 +142,7 @@
   margin: 0 auto;
 
   &:hover {
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
     transform: translateY(-4px);
   }
 }
@@ -159,7 +161,7 @@
   height: 140px;
   overflow: hidden;
   background: #f5f5f5;
-  border-radius: 12px;
+  border-radius: 13px;
   
   img {
     width: 100%;
@@ -181,10 +183,10 @@
   position: absolute;
   top: 12px;
   right: 12px;
-  background: #e74c3c;
+  background: #ef4444;
   color: white;
   padding: 0.4rem 0.8rem;
-  border-radius: 6px;
+  border-radius: 20px;
   font-size: 0.875rem;
   font-weight: 700;
   z-index: 10;
@@ -211,11 +213,11 @@
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  color: #1a1a1a;
+  color: #1e3c38;
   transition: color 0.2s;
 
   &:hover {
-    color: var(--primary-color, #5568d3);
+    color: var(--primary-color, #497671);
   }
 }
 
@@ -226,12 +228,12 @@
   font-size: 0.75rem;
 
   .rating-stars {
-    color: #fbbf24;
+    color: #497671;
     font-weight: 600;
   }
 
   .rating-count {
-    color: #6b7280;
+    color: #697777;
   }
 }
 
@@ -253,26 +255,26 @@
   .discounted-price {
     font-size: 0.9375rem;
     font-weight: 700;
-    color: #1a1a1a;
+    color: #1e3c38;
   }
 
   .discounted-price {
-    color: #e74c3c;
+    color: #ef4444;
   }
 
   .original-price {
     font-size: 0.8125rem;
-    color: #9ca3af;
+    color: #697777;
     text-decoration: line-through;
   }
 }
 
 .cart-icon-btn {
   padding: 0.5rem;
-  background: var(--primary-color, #5568d3);
+  background: var(--primary-color, #497671);
   color: white;
   border: none;
-  border-radius: 8px;
+  border-radius: 10px;
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
@@ -285,7 +287,7 @@
   }
 
   &:hover {
-    background: var(--primary-hover, #4456b3);
+    background: var(--primary-hover, #3d635f);
     transform: scale(1.05);
   }
 
@@ -301,14 +303,14 @@
       .p-carousel-prev,
       .p-carousel-next {
         &:not(:disabled):hover {
-          background: var(--primary-color, #5568d3);
-          border-color: var(--primary-color, #5568d3);
+          background: var(--primary-color, #497671);
+          border-color: var(--primary-color, #497671);
         }
       }
       
       .p-carousel-indicators {
         .p-carousel-indicator.p-highlight button {
-          background: var(--primary-color, #5568d3);
+          background: var(--primary-color, #497671);
         }
       }
     }
@@ -319,10 +321,10 @@
   }
 
   .cart-icon-btn {
-    background: var(--primary-color, #5568d3);
+    background: var(--primary-color, #497671);
 
     &:hover {
-      background: var(--primary-hover, #4456b3);
+      background: var(--primary-hover, #3d635f);
     }
   }
 }