Update pages/3Life Cycle of Machine Learning Project.py

pages/3Life Cycle of Machine Learning Project.py

@@ -65,7 +65,7 @@ st.markdown(
             position: relative;
             width: 300px; /* Rectangle width */
             height: 60px; /* Rectangle height */
-            background-color: #F8F9FA; /* Light background */
+            background-color: #E0E0E0; /* Neutral light background */
             color: #000000; /* Black text */
             border-radius: 8px; /* Rounded edges */
             display: flex;
@@ -81,25 +81,27 @@ st.markdown(
 
         /* Arrow styling */
         .arrow {
-            position: relative;
-            width: 20px;
-            height: 20px;
-            margin: 10px 0;
-            font-size: 24px;
-            color: #000000; /* Black arrow */
+            width: 40px;
+            height: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 24px; /* Larger arrow size */
+            color: #4F4F4F; /* Neutral dark arrow color */
+            margin: 10px 0; /* Space for arrow */
         }
 
-        /* Custom light colors for each phase */
-        .phase-1 { background-color: #E6F4EA; } /* Light Green */
-        .phase-2 { background-color: #E0F7FA; } /* Light Blue */
-        .phase-3 { background-color: #FFF9C4; } /* Light Yellow */
-        .phase-4 { background-color: #FFE0B2; } /* Light Orange */
-        .phase-5 { background-color: #DCEDC8; } /* Light Green */
-        .phase-6 { background-color: #D1C4E9; } /* Light Purple */
-        .phase-7 { background-color: #F8BBD0; } /* Light Pink */
-        .phase-8 { background-color: #CFD8DC; } /* Light Gray-Blue */
-        .phase-9 { background-color: #B2EBF2; } /* Light Cyan */
-        .phase-10 { background-color: #FFE082; } /* Light Amber */
+        /* Custom slightly darker colors for each phase */
+        .phase-1 { background-color: #D4ECDD; } /* Slightly darker green */
+        .phase-2 { background-color: #CDE7F0; } /* Slightly darker blue */
+        .phase-3 { background-color: #FFF4B3; } /* Slightly darker yellow */
+        .phase-4 { background-color: #FFD8A8; } /* Slightly darker orange */
+        .phase-5 { background-color: #CCE1B5; } /* Slightly darker light green */
+        .phase-6 { background-color: #C2B9DA; } /* Slightly darker purple */
+        .phase-7 { background-color: #F2A2B7; } /* Slightly darker pink */
+        .phase-8 { background-color: #BAC6CF; } /* Slightly darker gray-blue */
+        .phase-9 { background-color: #9FD5DC; } /* Slightly darker cyan */
+        .phase-10 { background-color: #FFD572; } /* Slightly darker amber */
 
         .phase:hover {
             transform: scale(1.05);