diff --git a/assets/css/hero.css b/assets/css/hero.css
index 9318695..81b3650 100644
--- a/assets/css/hero.css
+++ b/assets/css/hero.css
@@ -184,22 +184,26 @@
 @media (max-width: 767px) {
 
   .hero-first {
-    height: 65vh;
+    height: auto;
     width: 100%;
     flex-direction: column;
   }
 
   .hero-content {
-    height: 20vh;
+    height: auto;
     width: 80vw;
   }
 
   .hero-logo {
-    width: 35vw; 
+    width: 30vw; 
+  }
+
+  .hero-title {
+    font-size: 1.8rem; /* Adjust for smaller screens */
+    margin-bottom: 1.5rem;
   }
 
   .hero-screenshots {
-    height: 20vh;
     width: 80vw;
     align-items: center;
     justify-content: center;