phone screen size styling and about section title

index.html

@@ -35,7 +35,7 @@ <h3>UI/UX</h3>
 
   <section id="about">
     <article>
-      <h4>Classical <span>x</span> Technology</h4> 
+      <h4>Classical <span>_</span> Technology</h4> 
       <p>
         The fusion of classical art with technology in design is a fascinating topic that has been explored by many artists and designers. Classical art is known for its emphasis on symmetry, balance, and proportion, while technology styles in design are characterized by their innovative use of digital toolsand techniques. 
       </p>

style.css

@@ -264,9 +264,13 @@ footer {
   }
   #about #about-img img {
     width: 240px;
+    top: 35px;
   }
 }
 @media screen and (max-width: 786px) {
+  #hero-content {
+    min-height: calc(75vh - 60px);
+  }
   #hero-content div h2 {
     font-size: 105px;
   }
@@ -324,6 +328,9 @@ footer {
     padding-top: 10px;
     padding-bottom: 46px;
   }
+  header h1 {
+    font-size: 22px;
+  }
   #hero-content div h2 {
     font-size: 62px;
   }
@@ -336,7 +343,7 @@ footer {
     z-index: -1;
     width: 72px;
     height: 72px;
-    bottom: 10%;
+    bottom: 18%;
     font-size: 11px;
     font-weight: 600;
   }

style.scss

@@ -241,14 +241,20 @@ footer {
 
     #about-img img {
       width: 240px;
+      top: 35px;
     }
   }
 }
 
 @media screen and (max-width: 786px) {
-  #hero-content div h2 {
-    font-size: 105px;
+  #hero-content {
+    min-height: calc(75vh - 60px);
+
+    div h2 {
+      font-size: 105px;
+    }
   }
+
 
   #scroll {
     width: 94px;
@@ -310,9 +316,14 @@ footer {
 }
 
 @media screen and (max-width: 430px) {
+
   header {
     padding-top: 10px;
     padding-bottom: 46px;
+
+    h1 {
+      font-size: 22px;
+    }
   }
 
   #hero-content div h2 {
@@ -329,7 +340,7 @@ footer {
     z-index: -1;
     width: 72px;
     height: 72px;
-    bottom: 10%;
+    bottom: 18%;
     font-size: 11px;
     font-weight: 600;
   }