fix: Hide wave and socials before it overlaps with hero

src/layout/Hero/HeroImage.svelte

@@ -20,7 +20,7 @@
 		background-color: var(--surface-seven);
 		user-select: none;
 	}
-	@media (max-width: 1700px) {
+	@media screen and (max-width: 1700px) {
 		.hero-img {
 			height: 100vh;
 			right: 6rem;

src/layout/Hero/HeroSection.svelte

@@ -46,10 +46,9 @@
 	}
 
 	.social-buttons {
-		justify-content: center;
+		max-width: 30rem;
 		position: absolute;
 		bottom: 1rem;
-		z-index: 1;
 		transition: opacity 0.1s var(--bezier-one);
 	}
 
@@ -69,18 +68,41 @@
 	span {
 		color: var(--primary);
 	}
-	@media (max-width: 1700px) {
+
+	@media screen and (max-width: 1700px) {
 		.hero {
 			height: 80vh;
 		}
 	}
 
+	@media screen and (max-height: 820px) {
+		.social-buttons {
+			bottom: initial;
+			left: initial;
+			position: initial;
+			width: initial;
+			opacity: 100% !important;
+		}
+	}
+	@media screen and (max-width: 1100px) or (min-height: 820px) {
+		.social-buttons {
+			transform: translateX(-50%);
+			width: 100%;
+			position: absolute;
+			justify-content: center;
+		}
+	}
+
 	@media screen and (max-width: 450px) {
 		.internal-buttons {
 			flex-direction: column;
 			gap: 1rem;
 		}
 
+		.social-buttons {
+			justify-content: center;
+		}
+
 		.hero {
 			height: initial;
 		}

src/layout/Navbar/NavHost.svelte

@@ -202,6 +202,7 @@
 	}
 
 	#nav-container {
+		z-index: 1;
 		top: 0;
 		position: sticky;
 		width: 100%;