From 9e9daba5baf382dffcfea552175a28ec6737bf0e Mon Sep 17 00:00:00 2001
From: abhiramtx <7253115-abhiramtx@users.noreply.replit.com>
Date: Sat, 8 Nov 2025 22:59:49 +0000
Subject: [PATCH] Make the hero section brighter and center its text content

Adjusted CSS variables in `static/css/styles.css` to increase brightness of hr element and center-align text within `.hero-text-container`, `.hero-title`, and `.hero-description`. Also updated positioning and transform properties for `.hero-text-container`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d21238ad-8e95-4779-8c03-ce66774f7dc0
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/XuUfYJo
---
 static/css/styles.css | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index 46b4158..19b12ea 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -370,7 +370,7 @@ hr {
     position: absolute;
     top: 0;
     left: 0;
-    filter: grayscale(100%) brightness(0.55);
+    filter: grayscale(100%) brightness(0.65);
 }
 
 .hero-overlay {
@@ -385,11 +385,13 @@ hr {
 
 .hero-text-container {
     position: absolute;
-    bottom: 64px;
-    left: 48px;
-    right: 48px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     z-index: 2;
     max-width: 800px;
+    width: 90%;
+    text-align: center;
 }
 
 .hero-title {
@@ -398,7 +400,7 @@ hr {
     font-size: clamp(32px, 5vw, 56px);
     color: var(--white);
     margin: 0 0 24px 0;
-    text-align: left;
+    text-align: center;
 }
 
 .hero-description {
@@ -407,7 +409,7 @@ hr {
     color: var(--gray-300);
     line-height: 1.8;
     margin: 0 0 20px 0;
-    text-align: left;
+    text-align: center;
 }
 
 .hero-description:last-child {
@@ -1347,9 +1349,7 @@ span.emoji:hover::after {
     }
 
     .hero-text-container {
-        bottom: 40px;
-        left: 24px;
-        right: 24px;
+        width: 90%;
     }
 
     .hero-title {