hero page modification

static/css/index.css

@@ -19,12 +19,6 @@
     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;
@@ -43,17 +37,32 @@
 }
 
 #hero h3 {
-    font-size: clamp(40px, 8vw, 80px);
+    font-size: clamp(40px, 8vw, 60px);
     /* color: var(--primary-color) !important; */
     opacity: 0.5;
 }
 
 #hero p {
     margin: 20px 0px 0px;
-    max-width: 540px;
+    max-width: 640px;
     opacity: 0.8;
 }
 
+#hero .image img {
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+    transition: box-shadow 0.3s;
+    padding: 0;
+    border: 0;
+    border: 2px solid var(--secondary-color);
+    border-radius: 1rem;
+}
+
+#hero .image img:hover {
+    box-shadow: 0 0 11px rgb(15 80 100 / 20%);
+    filter: contrast(1.2);
+    cursor: pointer;
+}
+
 #hero a.btn.social-icon {
     color: var(--primary-color) !important;
     line-height: 0%;