modified the css of exclusive deals section

style.css

@@ -783,14 +783,16 @@ body.dark-mode {
 .popup-content button:hover {
   background-color: #0056b3;
 }
+
+
 /* deals */
-.deals-section {
-  padding: 50px;
+.deals-section { 
+  padding: 90px 50px;    /* modified padding */
   background-color: #f8f9fa;
 }
 
 .deals-section h2 {
-  font-size: 2em;
+  font-size: 2.2em;
   margin-bottom: 20px;
   text-align: center;
 }
@@ -802,24 +804,34 @@ body.dark-mode {
 }
 
 .deals-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  gap: 20px;
+  max-width: 80%;
+  justify-content: center;
+  padding: 40px 0;
+  margin: 0 auto;
+  display: grid;  
+  grid-template-columns: repeat(3, 300px); /* Three equal columns */
+  grid-template-rows: repeat(2, auto); /* Two rows with automatic height */
+  gap: 30px; /* Space between grid items */
 }
-
 .deal-item {
   background-color: #fff;
-  padding: 20px;
+  padding: 25px 30px;    /* added padding left and right*/
   border-radius: 10px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   max-width: 300px;
   text-align: center;
   color: #090f15;
+  transition: transform 0.4s cubic-bezier(0.30, 0.1, 0.25, 1); /* for smooth hover tranform animation*/
 }
 
+/* added hover effect */
+.deal-item:hover {
+  transform: translateY(-10px); 
+  cursor: pointer;
+}
 .deal-item h3 {
   font-size: 1.5em;
+  font-weight: 600;  /* made heading bold */
   margin-bottom: 15px;
   color: #090f15;
 }
@@ -844,6 +856,7 @@ body.dark-mode {
   border: none;
   border-radius: 5px;
   cursor: pointer;
+  margin-bottom: 10px;
   transition: background-color 0.3s;
 }