Improve visual effects and element styling on the page

Updated CSS to adjust linear gradient for hr element, remove hover effect on hero image, and change text color for hero title and sub-header.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: f545e057-7f32-44d4-81ad-176fe8baa353
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/bcwvOLs

static/css/styles.css

@@ -357,8 +357,8 @@ hr {
     top: 0;
     left: 0;
     width: 100%;
-    height: 150px;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
+    height: 250px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 30%, transparent 100%);
     z-index: 2;
     pointer-events: none;
 }
@@ -1535,7 +1535,7 @@ body::before {
 }
 
 .hero-image-section:hover::before {
-    opacity: 1;
+    opacity: 0;
 }
 
 .stats-button,
@@ -1772,10 +1772,7 @@ body {
 
 .sub-header,
 .hero-title {
-    background: linear-gradient(135deg, #ffffff, #a0a0a0);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    color: var(--white);
 }
 
 .border-triangle {