Alert Messages is not looking proper give me proper code

index.html

@@ -11,28 +11,34 @@
 
 <main id="main" class="w-full">
   <!-- Alert Messages -->
-  <div id="fail_email" class="hidden fixed top-4 right-4 max-w-md bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-lg z-50">
-    <div class="flex items-center">
-      <i data-feather="alert-triangle" class="w-5 h-5 mr-2"></i>
-      <div class="flex-1">
-        Could not send an email! Please try again later.
+  <div id="fail_email" class="hidden fixed top-6 right-6 max-w-md w-full bg-white border border-red-200 rounded-lg shadow-xl z-50 overflow-hidden">
+    <div class="flex bg-red-50 px-4 py-2">
+      <div class="flex items-center">
+        <i data-feather="alert-triangle" class="w-5 h-5 text-red-600 mr-2"></i>
+        <span class="font-medium text-red-800">Error</span>
       </div>
-      <button onclick="removeQuery()" class="ml-4 text-red-700 hover:text-red-900">
-        <i data-feather="x" class="w-5 h-5"></i>
+      <button onclick="removeQuery()" class="ml-auto text-red-500 hover:text-red-700 focus:outline-none">
+        <i data-feather="x" class="w-4 h-4"></i>
       </button>
     </div>
+    <div class="p-4 text-red-700">
+      <p>Could not send an email! Please try again later.</p>
+    </div>
   </div>
 
-  <div id="success_email" class="hidden fixed top-4 right-4 max-w-md bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-lg z-50">
-    <div class="flex items-center">
-      <i data-feather="check-circle" class="w-5 h-5 mr-2"></i>
-      <div class="flex-1">
-        We have sent you an email. Please check your inbox. If you cannot view it in your primary inbox, please check your Spam or Junk folder.
+  <div id="success_email" class="hidden fixed top-6 right-6 max-w-md w-full bg-white border border-green-200 rounded-lg shadow-xl z-50 overflow-hidden">
+    <div class="flex bg-green-50 px-4 py-2">
+      <div class="flex items-center">
+        <i data-feather="check-circle" class="w-5 h-5 text-green-600 mr-2"></i>
+        <span class="font-medium text-green-800">Success</span>
       </div>
-      <button onclick="removeQuery()" class="ml-4 text-green-700 hover:text-green-900">
-        <i data-feather="x" class="w-5 h-5"></i>
+      <button onclick="removeQuery()" class="ml-auto text-green-500 hover:text-green-700 focus:outline-none">
+        <i data-feather="x" class="w-4 h-4"></i>
       </button>
     </div>
+    <div class="p-4 text-green-700">
+      <p>We have sent you an email. Please check your inbox. If you can't find it in your primary inbox, please check your Spam or Junk folder.</p>
+    </div>
   </div>
 <!---Twitter Card data -->
     <meta name="twitter:card" content="summary_large_image">
@@ -477,40 +483,33 @@
 
             $('#fail_email').hide();
             $('#success_email').hide();
+    let result = getUrlVars()["result"];
 
-            let result = getUrlVars()["result"];
-
-            if(typeof(result) != 'undefined'){
-
-                if(result.includes('success'))
-                {
-                    $('#success_email').show();
-                    $('#fail_email').hide();
-                }
-                else
-                {
-                    $('#fail_email').show();
-                    $('#success_email').hide();
-                }
-
-            }
-
-
-        });
-
-        function removeQuery() {
-
-            let url = window.location.href;
-
-            let a = url.indexOf("?");
-            let b =  url.substring(a);
-            let c = url.replace(b,"");
-            window.location.href = c;
-
+    if(typeof(result) != 'undefined'){
+        if(result.includes('success')) {
+            $('#success_email').show().fadeIn(300);
+            $('#fail_email').hide();
+            setTimeout(() => {
+                $('#success_email').fadeOut(500, () => removeQuery());
+            }, 5000);
+        } else {
+            $('#fail_email').show().fadeIn(300);
+            $('#success_email').hide();
+            setTimeout(() => {
+                $('#fail_email').fadeOut(500, () => removeQuery());
+            }, 5000);
         }
-
-
-    </script>
+    }
+});
+function removeQuery() {
+    let url = window.location.href;
+    if (url.includes('?')) {
+        url = url.split('?')[0];
+        history.replaceState(null, '', url);
+        $('#success_email, #fail_email').fadeOut(300);
+    }
+}
+</script>
 
     <script src="https://www.google.com/recaptcha/api.js?render=6LfWu2YcAAAAAPooSewjuw82sSxhAdh657M4VvzT"></script>
 

style.css

@@ -35,71 +35,35 @@ body {
     color: var(--vlc-ink);
     line-height: 1.6;
 }
+/* Alert Messages */
+#fail_email, 
+#success_email {
+  transition: all 0.3s ease;
+  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
+}
 
-/* Notification alerts */
-.notification {
-    position: fixed;
-    top: 1rem;
-    right: 1rem;
-    max-width: 24rem;
-    width: 90%;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    z-index: 9999;
-    display: flex;
-    align-items: center;
-    opacity: 0;
-    transform: translateY(-20px);
-    transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.notification.show {
-    opacity: 1;
-    transform: translateY(0);
-}
-.notification.success {
-    background-color: #f0fdf4;
-    border-left: 4px solid #10b981;
-    color: #065f46;
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
-}
-
-.notification.error {
-    background-color: #fef2f2;
-    border-left: 4px solid #ef4444;
-    color: #991b1b;
-    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
-}
-
-.notification.warning {
-    background-color: #fffbeb;
-    border-left: 4px solid #f59e0b;
-    color: #92400e;
-    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
-}
-
-.notification.info {
-    background-color: #eff6ff;
-    border-left: 4px solid #3b82f6;
-    color: #1e40af;
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
-}
-.notification i {
-    margin-right: 0.75rem;
-    flex-shrink: 0;
-}
-
-.notification-content {
-    flex-grow: 1;
-}
-
-.notification-close {
-    margin-left: 0.75rem;
-    cursor: pointer;
-    background: none;
-    border: none;
-    padding: 0;
+#fail_email {
+  border: 1px solid #fecaca;
+}
+
+#success_email {
+  border: 1px solid #bbf7d0;
+}
+
+#fail_email .bg-red-50 {
+  background-color: #fef2f2;
+}
+
+#success_email .bg-green-50 {
+  background-color: #f0fdf4;
+}
+
+#fail_email button:hover {
+  color: #dc2626;
+}
+
+#success_email button:hover {
+  color: #16a34a;
 }
 h1, h2, h3, h4 {
     color: var(--vlc-navy);