Update src/style.css

src/style.css

@@ -3,10 +3,12 @@ html, body {
   margin: 0;
   padding: 0;
   height: 100%;
-  font-family: 'Segoe UI', sans-serif;
-  background: radial-gradient(ellipse at bottom, #021d34 0%, #000 100%);
+  /* Use the primary font family suggested by the brief */
+  font-family: 'Segoe UI', 'Open Sans', sans-serif;
+  /* Dark, elegant backdrop inspired by premium tech sites */
+  background: linear-gradient(145deg, #002d5b 0%, #001a33 100%);
   overflow: hidden;
-  color: white;
+  color: #f5faff;
 }
 
 /* === Floating Animated Circles === */
@@ -35,15 +37,16 @@ html, body {
   }
 }
 
+/* Soft floating circles tinted with primary and secondary brand colours */
 .circle {
   position: absolute;
-  width: 300px;
-  height: 300px;
-  background: radial-gradient(circle, #009fe3, #36ba01);
+  width: 320px;
+  height: 320px;
+  background: radial-gradient(circle, #004c97, #36ba01);
   border-radius: 50%;
-  opacity: 0.1;
-  animation: floatAround 10s ease-in-out infinite;
-  filter: blur(15px);
+  opacity: 0.12;
+  animation: floatAround 12s ease-in-out infinite;
+  filter: blur(20px);
 }
 
 .circle:nth-child(1) {
@@ -98,7 +101,8 @@ html, body {
 .cta-button {
   padding: 1rem 2rem;         
   font-size: 2rem; 
-  background-color: #009fe3;
+  /* Primary brand colour for the call-to-action button */
+  background-color: #004c97;
   border: none;
   border-radius: 60px;
   color: white;
@@ -124,4 +128,39 @@ main.stApp {
   background: transparent !important;
   position: relative;
   z-index: 1;
-} 
+} 
+
+/* === Timeline styles === */
+.timeline {
+  margin-top: 2rem;
+  z-index: 2;
+}
+
+/* Individual timeline entry styled as a card */
+.timeline-card {
+  display: flex;
+  align-items: flex-start;
+  background: rgba(255, 255, 255, 0.05);
+  border-left: 6px solid #36ba01;
+  border-radius: 12px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  backdrop-filter: blur(6px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+.timeline-card .icon {
+  font-size: 1.6rem;
+  line-height: 1;
+  margin-right: 1rem;
+  color: #36ba01;
+}
+.timeline-card h4 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: #f5faff;
+}
+.timeline-card p {
+  margin: 0.3rem 0 0;
+  font-size: 0.9rem;
+  color: #cad8e5;
+}