diff --git a/static/TuxAinrom.webp b/static/TuxAinrom.webp
new file mode 100644
index 0000000..da4a879
Binary files /dev/null and b/static/TuxAinrom.webp differ
diff --git a/static/style.css b/static/style.css
index 6d0b92c..4b46af8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -157,11 +157,15 @@ p {
 
 /* Hero Section */
 .hero {
-    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
+    background: linear-gradient(135deg, rgba(236, 253, 245, 0.85) 0%, rgba(209, 250, 229, 0.85) 100%), url('/static/TuxAinrom.webp');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
     padding: 4rem 0;
     display: flex;
     align-items: center;
     min-height: 80vh;
+    position: relative;
 }
 
 .hero-content {
@@ -178,12 +182,14 @@ p {
     font-size: 3rem;
     color: #047857;
     margin-bottom: 1rem;
+    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
 }
 
 .hero-subtitle {
     font-size: 1.25rem;
     color: #374151;
     margin-bottom: 2rem;
+    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
 }
 
 .hero-buttons {
@@ -987,6 +993,8 @@ footer {
     
     .hero {
         padding: 3rem 0;
+        background-size: cover;
+        background-position: center top;
     }
     
     .hero-content h2 {
@@ -1085,6 +1093,9 @@ footer {
     
     .hero {
         padding: 2rem 0;
+        background-size: cover;
+        background-position: center top;
+        min-height: 60vh;
     }
     
     .hero-content h2 {
@@ -1203,6 +1214,8 @@ footer {
 @media (max-width: 768px) and (orientation: landscape) {
     .hero {
         padding: 2rem 0;
+        background-size: cover;
+        background-position: center center;
     }
     
     .hero-content h2 {