dynamic banner img format-updated

components/layout/Breadcrumb.js

@@ -1,10 +1,11 @@
 import Link from "next/link"
 
-export default function Breadcrumb({breadcrumbTitle}) {
+export default function Breadcrumb({breadcrumbTitle, background}) {
     return (
         <>
             <section className="page_header_default pg_bg_cover alignment_center">
-                <div className="bakground_cover" style={{ backgroundImage: 'url(assets/images/page-image-1-min.jpg)' }} />
+                <div className="bakground_cover" 
+                style={{ backgroundImage: `url(${background})` }} />
                 <div className="page_header_content">
                     <div className="container">
                         <div className="row">

components/layout/Layout.js

@@ -17,7 +17,7 @@ import Header3 from "./header/Header3"
 import Header4 from "./header/Header4"
 import Header5 from "./header/Header5"
 import Header6 from "./header/Header6"
-export default function Layout({ headerStyle, footerStyle, pageCls, breadcrumbTitle, children }) {
+export default function Layout({ headerStyle, footerStyle, pageCls, breadcrumbTitle, background, children }) {
     // Search
     const [isSearch, setSearch] = useState(false)
     const handleSearch = () => setSearch(!isSearch)
@@ -57,7 +57,7 @@ export default function Layout({ headerStyle, footerStyle, pageCls, breadcrumbTi
                 <StickyHeader scroll={scroll} handleSearch={handleSearch} handleOptionalPanel={handleOptionalPanel} handleMobileMenu={handleMobileMenu} />
 
                 <div id="wrapper_full" className="content_all_warpper">
-                    {breadcrumbTitle && <Breadcrumb breadcrumbTitle={breadcrumbTitle} />}
+                    {breadcrumbTitle && <Breadcrumb breadcrumbTitle={breadcrumbTitle}  background={background} />}
                     <div id="content" className="site-content">
                         {children}
                     </div>

pages/contact.js

@@ -89,7 +89,7 @@ export default function Contact() {
 
   return (
     <>
-      <Layout breadcrumbTitle="Contact" footerStyle={2}>
+      <Layout breadcrumbTitle="Contact" background="/assets/images/contact/contact-banner.jpg" footerStyle={2}>
         <section className="contact-section">
           <div className="pd_top_90" />
           <div className="container">

public/assets/css/theme.css

@@ -13685,8 +13685,8 @@ body .navbar_nav .menu-item .sub_menu li a.image_big_on_menu_two .img-link {
   content: "";
   width: 100%;
   height: 100%;
-  background: var(--color-set-one-2);
-  opacity: 0.75;
+  background: #ff6600;
+  opacity: 0.40;
   top: 0;
   right: 0;
   bottom: 0;