updated the mega menu

dev/sass/base/_global.scss

@@ -147,13 +147,6 @@ button {
 	}
 }
 
-.custom-overlay {
-	position: fixed;
-	inset: 0;
-	z-index: 112;
-	background-color: rgba(0, 0, 0, 0.6);
-}
-
 .download-popup {
 	position: fixed;
 	top: 80px;
@@ -188,18 +181,6 @@ button {
 	}
 }
 
-.custom-overlay,
-.download-popup {
-	opacity: 0;
-	visibility: hidden;
-	transition: all 0.3s ease-in-out;
-
-	&.active {
-		opacity: 1;
-		visibility: visible;
-	}
-}
-
 .toc {
 	ul {
 		li {

dev/sass/base/_header.scss

@@ -190,7 +190,7 @@
 								position: absolute;
 								top: 50%;
 								right: 0;
-								transform: translateY(-50%) rotate(90deg);
+								transform: translateY(-50%) rotate(180deg);
 								width: 10px;
 								height: 7px;
 								background: url(../img/angle-right.svg) no-repeat center/contain;
@@ -206,7 +206,7 @@
 							}
 							a {
 								&::before {
-									transform: translateY(-50%) rotate(-90deg);
+									transform: translateY(-50%) rotate(0);
 								}
 							}
 						}

dev/sass/base/_mega-menu.scss

+.custom-overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 9;
+	background-color: rgba(255, 255, 255, 0.2);
+	opacity: 0;
+	visibility: hidden;
+	transition: all 0.3s ease-in-out;
+	backdrop-filter: blur(20px);
+
+	&.active {
+		opacity: 1;
+		visibility: visible;
+	}
+}
+
+.navbar {
+	position: relative;
+	.mega-menu-wrapper {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 100%;
+		padding: 4px 0 24px;
+		background-color: $white;
+		box-shadow: 0px 30px 30px 0px #0000001a;
+		max-height: 100vh;
+		overflow: auto;
+		opacity: 0;
+		visibility: hidden;
+		transform: translateX(0);
+		transition: all 0.3s ease-in-out;
+
+		&.active {
+			opacity: 1;
+			visibility: visible;
+			transform: translateX(0);
+		}
+
+		.mega-menu-box {
+			display: none;
+			&.active {
+				display: block;
+			}
+		}
+
+		.close-mega-menu {
+			background-color: transparent;
+			border: none;
+			outline: none;
+		}
+
+		.mega-menu-title {
+			margin: 20px 0 16px;
+		}
+		ul {
+			li {
+				a {
+					color: $grey;
+
+					&:hover {
+						color: $primary;
+					}
+				}
+
+				&:not(:last-child) {
+					margin-bottom: 12px;
+				}
+			}
+		}
+
+		ul + a {
+			display: block;
+			margin-top: 16px;
+			color: $primary;
+
+			&:hover {
+				color: $background-dark;
+
+				svg {
+					path {
+						stroke: $background-dark;
+					}
+				}
+			}
+		}
+
+		.featured-template-list {
+			.featured-template {
+				border: 1px solid #00000033;
+				padding: 8px 4px;
+				border-radius: 8px;
+				// max-width: 371px;
+
+				&:hover {
+					border-color: $primary;
+					a {
+						color: $primary;
+					}
+				}
+
+				.ft-image {
+					border-radius: 8px;
+					overflow: hidden;
+					width: 92px;
+					height: 80px;
+				}
+				.ft-content {
+					padding: 8px 12px 8px 16px;
+
+					a {
+						font-size: 16px;
+						line-height: 22px;
+						font-weight: 600;
+						display: block;
+						margin-bottom: 12px;
+					}
+					p {
+						font-size: 14px !important;
+						line-height: 19px;
+					}
+				}
+				&:not(:last-child) {
+					margin-bottom: 8px;
+				}
+			}
+		}
+	}
+}
+
+// .mc-toast {
+// 	position: fixed;
+// 	width: 35%;
+// 	bottom: 20%;
+// 	right: 0;
+// 	padding: 28px;
+// 	border-radius: 8px;
+// 	z-index: 9;
+// 	opacity: 0;
+// 	visibility: hidden;
+// 	transform: translateX(100%);
+// 	transition: all 0.3s ease-in-out;
+
+// 	&.error,
+// 	&.success {
+// 		border: 0px;
+// 		opacity: 1;
+// 		visibility: visible;
+// 		transform: translateX(0);
+// 		transition: 0.3s ease-in-out;
+// 	}
+
+// 	&.error {
+// 		background: #ebc8c4;
+// 		color: #dc3232;
+// 		border: 2px solid #dc3232;
+// 		border-color: #dc3232 !important;
+// 	}
+// 	&.success {
+// 		background: #cce8f4;
+// 		color: #4d728a;
+// 		border: 2px solid #4d728a;
+// 		border-color: #4d728a !important;
+// 	}
+// 	@media (max-width: 767.98px) {
+// 		width: 80%;
+// 		padding: 16px;
+// 	}
+// }
+
+@media (min-width: 992px) {
+	.navbar {
+		.mega-menu-wrapper {
+			padding: 40px 0;
+			.mega-menu-title {
+				margin: 0 0 16px;
+			}
+		}
+	}
+}

dev/sass/style.scss

@@ -25,6 +25,7 @@ $body-font: "Sora", sans-serif;
 @import "base/custom_base";
 @import "base/base";
 @import "base/header";
+@import "base/mega-menu";
 @import "base/footer";
 @import "base/new-breadcrumb";
 @import "pages/index";