diff --git a/assets/css/main.css b/assets/css/main.css
index f9308b3..930c803 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -309,10 +309,15 @@ a:hover {
     z-index: 2;
     width: 40%;
     padding: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
 }
 
 .hero-text {
     color: var(--secondary-color);
+    text-align: center;
 }
 
 .hero-title {
@@ -332,6 +337,7 @@ a:hover {
     display: flex;
     gap: 0.75rem;
     flex-wrap: wrap;
+    justify-content: center;
 }
 
 .hero-buttons .btn {
@@ -954,7 +960,7 @@ a:hover {
     }
     
     .hero {
-        height: 100vh;
+        height: 80vh;
         margin-top: 80px;
     }
     
@@ -971,14 +977,19 @@ a:hover {
     
     .hero-content {
         width: 100%;
-        padding: 1rem 1.5rem 2rem;
+        padding: 1.5rem 1.5rem 2rem;
         background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: 45%;
     }
     
     .hero-image {
         position: relative;
         width: 100%;
-        height: 65%;
+        height: 55%;
         order: -1;
     }
     
@@ -1086,12 +1097,27 @@ a:hover {
 }
 
 @media (max-width: 480px) {
+    .hero {
+        height: 70vh;
+    }
+    
+    .hero-content {
+        min-height: 50%;
+        padding: 1rem 1rem 1.5rem;
+    }
+    
+    .hero-image {
+        height: 50%;
+    }
+    
     .hero-title {
-        font-size: 2rem;
+        font-size: 1.8rem;
+        margin-bottom: 0.8rem;
     }
     
     .hero-subtitle {
-        font-size: 1rem;
+        font-size: 0.9rem;
+        margin-bottom: 1.2rem;
     }
     
     .btn {