menu card section responsive issues updated

components/sections/home3/Fluid.js

@@ -16,11 +16,11 @@ export default function Fluid() {
         <>
             {/* Fluid Section Two */}
             <section className="fluid-section-two">
-                <div className="section-text">Recipe book</div>
-                <div className="outer-container clearfix">
+                {/* <div className="section-text">Recipe book</div> */}
+                <div className="outer-container clearfix row d-flex align-items-center">
 
                     {/* Content Column */}
-                    <div className="content-column">
+                    <div className="col-lg-6 content-column">
                         <div className="inner-column">
                             {/* Title Box */}
                             <div className="title-box">
@@ -48,10 +48,15 @@ export default function Fluid() {
                     </div>
 
                     {/* Image Column */}
-                    <div className="image-column" style={{ backgroundImage: `url(${selectedImage})` }}>
-                        <figure className="image-box">
-                            <img src={selectedImage} alt="Selected Book" />
-                        </figure>
+                   <div className="col-lg-6">
+                        <div className="w-100">
+                            <img
+                                src={selectedImage}
+                                alt="Selected Book"
+                                className="img-fluid rounded shadow"
+                                style={{ width: "100%", height: "auto", objectFit: "cover" }}
+                            />
+                        </div>
                     </div>
                 </div>
             </section>