updated hero and about

static/css/index.css

@@ -6,11 +6,17 @@
     max-width: 100%;
 }
 
+@media all and (min-width:768px) and (max-width: 992px) {
+    #hero {
+        min-height: 60vh;
+    }
+}
+
 #hero .hero-bottom-svg {
     opacity: 0.5;
     position: absolute;
     bottom: -50px;
-    left: -130px;
+    left: -150px;
 }
 
 #hero .subtitle {
@@ -35,9 +41,27 @@
     opacity: 0.8;
 }
 
+#hero a.btn.social-icon {
+    color: var(--primary-color);
+    line-height: 0%;
+    border-radius: 50% ;
+    margin-top: 50px;
+    padding: 0.7rem;
+    border: 1px solid var(--primary-color);
+    transition: none;
+}
+
+#hero a.btn.social-icon img {
+    width: 1em;
+}
+
+#hero a.btn.social-icon:hover {
+    opacity: 0.8;
+}
+
 #hero a.btn {
     margin-top: 50px;
-    padding: 1rem 1.75rem;
+    padding: 0.7rem 1.75rem;
     border: 1px solid var(--primary-color);
     border-radius: .75rem;
     transition: none;
@@ -53,6 +77,11 @@
     opacity: 0.9;
 }
 
+#hero a.btn.social-icon:hover {
+    background-color: var(--background-color) !important;
+    opacity: 0.7;
+}
+
 #hero .hero-content > a {
     display: inline-block;
     text-decoration: none;
@@ -81,7 +110,6 @@
 }
 
 #about .image img {
-    max-width: 300px !important;
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     transition: box-shadow 0.3s;
 }