From f71d47f3b7007d1af29be8b3c2e356f0df8f4967 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Fri, 20 Mar 2026 02:42:04 +0530
Subject: [PATCH] fix: update HeroSection search form positioning and
 validation error message styling

---
 src/components/home/HeroSection.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 3fc8691..6ae8374 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -134,7 +134,7 @@ export function HeroSection({ content }: { content?: HeroContent }) {
         </div>
 
         {/* Search Form */}
-        <div className="max-w-5xl mx-auto">
+        <div className="max-w-5xl mx-auto relative">
           <div className="bg-[#e58625] rounded-[15px] shadow-lg p-3">
             <div className="flex flex-col md:flex-row gap-2">
               {/* Type Select */}
@@ -239,9 +239,9 @@ export function HeroSection({ content }: { content?: HeroContent }) {
 
           {/* Validation Error Message */}
           {validationError && (
-            <div className="mt-3 text-center">
-              <div className="text-white font-serif text-sm bg-red-500/90 rounded-[7px] py-2 px-4 inline-flex items-center gap-3">
-                <span>{validationError}</span>
+            <div className="absolute left-0 right-0 mt-2 text-center z-10 px-4">
+              <div className="text-white font-serif text-sm bg-red-500/90 rounded-[7px] py-2 px-4 inline-flex items-center gap-3 max-w-full">
+                <span className="text-left">{validationError}</span>
                 <button
                   onClick={handleClearError}
                   className="hover:bg-white/20 rounded-full p-0.5 transition-colors"