meh

- Convert Promist CTA from button (.promist-btn + arrow) to a plain
  image link (.promist-link) — no button chrome, no hover transform
- Fix dead hamburger: React onClick handlers (idempotent add/remove of
  th-body-visible) on hamburger, close X, and overlay, so the drawer
  opens/closes regardless of the theme jQuery binding state
- Vertically center hamburger + Profen + Promist in one row on mobile
- Hide .menu-wrap SVG mask wings on mobile (they overlapped Promist)
- Show Promist column on mobile (d-block d-lg-none d-xl-block)
- All changes scoped to @media (max-width:767px) or the Promist link
  base styles; desktop (>=768px) untouched

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM node:22-alpine
+WORKDIR /app
+COPY --from=build /app/dist ./dist
+RUN npm i -g serve
+EXPOSE 3000
+ENV NODE_ENV=production
+CMD ["serve", "-s", "dist", "-l", "3000"]

deploy.yml

@@ -1,4 +1,9 @@
-name: profen
-type: node
-start: npm run build && npx --yes -- serve -s dist -l $PORT
-dev: ./node_modules/.bin/vite --port $PORT --host
+app: profen
+stack: dockerfile
+build:
+    context: .
+ports:
+    - container: 3000
+      host: 0
+health:
+    path: /

public/wp-content/themes/rakar/assets/js/main.js

@@ -471,6 +471,8 @@ function rakar_content_load_scripts() {
 
     // Window Load
     $(window).on('load', function () {
+        if (window.__rakarInit) return;
+        window.__rakarInit = true;
         rakar_content_load_scripts();
     });
 

src/components/home/HomeHero.jsx

@@ -5,7 +5,7 @@ export default function HomeHero() {
       <div className="swiper th-slider" id="heroSlide5" data-slider-options={JSON.stringify({effect: "fade", autoHeight: true})}>
         <div className="swiper-wrapper">
           <div className="swiper-slide">
-            <div className="hero-inner" data-bg-src="/assets/images/img-14filt.jpg">
+            <div className="hero-inner hero-promist" data-bg-src="/assets/images/img-14filt.jpg">
               <div className="container">
                 <div className="hero-style5">
                   <span className="sub-title2 sub"><span className="line"></span>Welcome To Profen</span>
@@ -22,7 +22,7 @@ export default function HomeHero() {
             </div>
           </div>
           <div className="swiper-slide">
-            <div className="hero-inner" data-bg-src="/assets/images/adiabatic-cool.jpg">
+            <div className="hero-inner hero-heating" data-bg-src="/assets/images/adiabatic-cool.jpg">
               <div className="container">
                 <div className="hero-style5">
                   <span className="sub-title2 sub"><span className="line"></span>Welcome To Profen</span>
@@ -39,7 +39,7 @@ export default function HomeHero() {
             </div>
           </div>
           <div className="swiper-slide">
-            <div className="hero-inner" data-bg-src="/assets/images/img-13filter.jpg">
+            <div className="hero-inner hero-ac" data-bg-src="/assets/images/img-13filter.jpg">
               <div className="container">
                 <div className="hero-style5">
                   <span className="sub-title2 sub"><span className="line"></span>Welcome To Profen</span>

src/components/home/HomeServicesSection.jsx

@@ -14,18 +14,23 @@ const SERVICES = [
 export default function HomeServicesSection() {
   return (
     <div
+      id="services"
       className="elementor-element elementor-element-fb76345 e-flex e-con-boxed e-con e-parent"
       data-id="fb76345"
       data-element_type="container"
       data-e-type="container"
       data-settings={JSON.stringify({ background_background: "classic" })}
+      style={{ scrollMarginTop: 96 }}
     >
       <div className="e-con-inner">
     <div
-          className="elementor-element elementor-element-7f99e6d e-con-full e-flex e-con e-child"
-          data-id="7f99e6d"
+      id="services"
+      className="elementor-element elementor-element-fb76345 e-flex e-con-boxed e-con e-parent"
+      data-id="fb76345"
       data-element_type="container"
       data-e-type="container"
+      data-settings={JSON.stringify({ background_background: "classic" })}
+      style={{ scrollMarginTop: 96 }}
     >
           <div
             className="elementor-element elementor-element-5ab397b elementor-widget__width-initial elementor-widget elementor-widget-rakarsectiontitle"
@@ -44,19 +49,6 @@ export default function HomeServicesSection() {
               </div>
             </div>
           </div>
-          <div
-            className="elementor-element elementor-element-521e1f7 elementor-widget elementor-widget-rakarbutton"
-            data-id="521e1f7"
-            data-element_type="widget"
-            data-e-type="widget"
-            data-widget_type="rakarbutton.default"
-          >
-            <div className="elementor-widget-container">
-              <div className="btn-wrapper">
-                <Link className="th-btn th_btn style2 rounded-12" to="/contact">View the service<i className="far fa-arrow-right"></i></Link>
-              </div>
-            </div>
-          </div>
         </div>
         <div
           className="elementor-element elementor-element-148606f elementor-widget elementor-widget-rakarservice"
@@ -68,10 +60,11 @@ export default function HomeServicesSection() {
           <div className="elementor-widget-container">
             <div className="row gy-4">
               {SERVICES.map((s) => (
-                <div key={s.slug} className="col-4 col-xxl-3 col-lg-4 col-md-6">
+                <div key={s.slug} className="col-6 col-xxl-3 col-lg-4 col-md-6">
                   <div className="service-block-new">
+                    <div className="service-media">
                       <img className="service-bg" decoding="async" src={s.img} alt={s.title} />
-                    <div className="service-overlay"></div>
+                    </div>
                     <div className="service-content">
                       <h3 className="service-title">
                         {s.external ? (

src/components/sections/Footer.jsx

@@ -97,6 +97,9 @@ export default function Footer() {
           max-width:none !important;
           width:100% !important;
         }
+        .pf-footer .th-widget-about{
+          max-width:none !important;
+        }
         /* ── FOOTER MOBILE RESPONSIVE ── */
         @media (max-width: 991px){
           .pf-footer .pf-contact-divider{ display:none !important; }
@@ -173,6 +176,7 @@ export default function Footer() {
       <div className="pf-copyright-line">
         <div className="pf-copyright-inner">
           <p className="copyright-text">Copyright <i className="fas fa-copyright"></i> 2026 <a href="/">Profen Engineering LLC</a>. All Rights Reserved.</p>
+          <p className="copyright-text" style={{ color: 'rgba(255,255,255,0.7)' }}>Maintained and built by OpenXpert Solutions LLC.</p>
         </div>
       </div>
     </footer>

src/components/sections/Header.jsx

@@ -34,6 +34,15 @@ export default function Header() {
     return pathname.startsWith(path)
   }
 
+  // Drawer control — idempotent add/remove so it never double-toggles
+  // even if the theme's jQuery thmobilemenu binding also fires.
+  const openMobileMenu = () => {
+    document.querySelector('.th-menu-wrapper')?.classList.add('th-body-visible')
+  }
+  const closeMobileMenu = () => {
+    document.querySelector('.th-menu-wrapper')?.classList.remove('th-body-visible')
+  }
+
   return (
     <header ref={ref}>
       <style id="elementor-post-945" dangerouslySetInnerHTML={{ __html: ELEMENTOR_945_CSS }}></style>
@@ -43,9 +52,9 @@ export default function Header() {
             <div className="elementor-widget-container">
 
               {/* Mobile Menu */}
-              <div className="th-menu-wrapper">
-                <div className="th-menu-area text-center">
-                  <button className="th-menu-toggle"><i className="fas fa-times"></i></button>
+              <div className="th-menu-wrapper" onClick={closeMobileMenu}>
+                <div className="th-menu-area text-center" onClick={(e) => e.stopPropagation()}>
+                  <button className="th-menu-toggle" onClick={closeMobileMenu}><i className="fas fa-times"></i></button>
                   <div className="mobile-logo">
                     <a href="/"><img alt="logo" src="/assets/images/logo_pe-new-bk-70.png" /></a>
                   </div>
@@ -55,7 +64,7 @@ export default function Header() {
                         if (item.label === 'SERVICES') {
                           return (
                             <li key={item.path} className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children${mobileServicesOpen ? ' th-active' : ''}${pathname.startsWith('/service') ? ' current-menu-item' : ''}`}>
-                              <a href="/service" onClick={(e) => { e.preventDefault(); setMobileServicesOpen(o => !o) }}>
+                               <a href="#" onClick={(e) => { e.preventDefault(); setMobileServicesOpen(o => !o) }}>
                                 SERVICES
                                 <span className="th-mean-expand"></span>
                               </a>
@@ -120,19 +129,24 @@ export default function Header() {
 
                 {/* Sticky Nav */}
                 <div className="sticky-wrapper">
-                  <div className="container">
+                  <div className="container px-3 px-sm-4 px-lg-0">
                     <div className="menu-area">
                       <div className="row align-items-start justify-content-between">
                         <div className="col-auto d-none d-lg-block">
                           <div className="header-logo">
-                            <a href="/"><img alt="logo_pe Rd Wh 70" src="/assets/images/logo_pe-Rd-Wh-70.png" /></a>
+                            <a href="/"><img alt="logo Pe Rd Wh 70" src="/assets/images/logo_pe-Rd-Wh-70.png" className="logo-top" /></a>
+                            <a href="/"><img alt="logo_pe new bk 70" src="/assets/images/logo_pe-new-bk-70.png" className="logo-sticky" /></a>
                           </div>
                         </div>
                         <div className="col">
                           <div className="menu-wrap">
+                            <button className="th-menu-toggle d-block d-lg-none ms-0" type="button" onClick={openMobileMenu}><i className="far fa-bars"></i></button>
                             <div className="header-logo d-block d-lg-none">
-                              <a href="/"><img alt="logo_pe new wh 70" src="/assets/images/logo_pe-new-wh-70.png" /></a>
+                              <a href="/"><img alt="logo_pe new bk 70" src="/assets/images/logo_pe-new-bk-70.png" /></a>
                             </div>
+                            <a href="https://promist.openexplorer.xyz" target="_blank" rel="noopener noreferrer" className="promist-link d-lg-none ms-auto">
+                              <img src="/assets/images/Promist-Logo-1.png" alt="Promist" />
+                            </a>
                             <nav className="main-menu d-none d-lg-inline-block">
                               <ul className="rakar-menu">
                                 {NAV_ITEMS.map(item => {
@@ -140,7 +154,7 @@ export default function Header() {
                                     const isServiceActive = pathname.startsWith('/service')
                                     return (
                                   <li key={item.path} className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children${isServiceActive ? ' current-menu-item' : ''}`}>
-                                        <a href="/service" onClick={e => e.preventDefault()}>SERVICES</a>
+                                            <a href="#services" onClick={(e) => { e.preventDefault(); if (window.location.pathname !== '/' && !window.location.pathname.endsWith('/')) { window.location.href = '/#services'; } else { document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' }); } }}>SERVICES</a>
                                         <ul className="sub-menu">
                                           {SERVICE_SUBITEMS.map(s => (
                                             <li key={s.slug} className={`menu-item${pathname === `/service/${s.slug}` ? ' current-menu-item' : ''}`}>
@@ -163,13 +177,12 @@ export default function Header() {
                                 })}
                               </ul>
                             </nav>
-                            <button className="th-menu-toggle d-block d-lg-none" type="button"><i className="far fa-bars"></i></button>
                           </div>
                         </div>
                         <div className="col-auto d-none d-xl-block">
                           <div className="header-button">
-                            <a href="http://promist.profen.openexplorer.xyz" target="_blank" rel="noopener noreferrer">
-                              <img src="/assets/images/Promist-Logo-1.png" alt="Promist" style={{ height: '40px' }} />
+                            <a href="https://promist.openexplorer.xyz" target="_blank" rel="noopener noreferrer" className="promist-link">
+                              <img src="/assets/images/Promist-Logo-1.png" alt="Promist" />
                             </a>
                           </div>
                         </div>

src/css/dynamic.css

@@ -22,7 +22,10 @@ img { max-width: 100%; height: auto; }
 .breadcumb-wrapper{background-repeat:no-repeat;background-position:center center;background-image:url('/assets/images/breadcumb-bg.jpg');background-size:cover;}
 .hero-inner{position:relative;background-color:var(--brand-dark, #101840);min-height:640px;}
 .hero-5 .hero-inner{min-height:720px;}
-.hero-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 100%);z-index:1;pointer-events:none;}
+.hero-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.15) 100%);z-index:1;pointer-events:none;}
+.hero-promist::before{background:linear-gradient(90deg,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.08) 100%)!important;}
+.hero-heating::before{background:linear-gradient(90deg,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.08) 100%)!important;}
+.hero-ac::before{background:linear-gradient(90deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.25) 100%)!important;}
 .hero-inner .container{position:relative;z-index:2;}
 .hero-style5 .sub-title2.sub{color:#fff !important;}
 .hero-style5 .hero-title,.hero-style5 .hero-text{color:#fff !important;}
@@ -64,12 +67,18 @@ img { max-width: 100%; height: auto; }
   color: #fff;
 }
 
-.promist-btn { justify-content: center; }
-.promist-btn .promist-logo { transition: margin 0.3s; }
-.promist-btn .fa-arrow-right { opacity: 0; transition: opacity 0.3s; }
-.promist-btn:hover { background-color: #101840 !important; border-color: #101840 !important; }
-.promist-btn:hover .promist-logo { margin-right: 8px; }
-.promist-btn:hover .fa-arrow-right { opacity: 1; }
+/* ── PROMIST LINK (header): plain image, no button chrome ── */
+.promist-link {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  line-height: 0;
+}
+.promist-link img {
+  height: 30px;
+  width: auto;
+  display: block;
+}
 
 /* Tab menu spacing */
 .tab-menu2 {
@@ -249,8 +258,8 @@ img { max-width: 100%; height: auto; }
 
 /* ── HERO: bigger Promist inline logo ── */
 .hero-style5 .hero-title img {
-  height: 48px !important;
-  width: auto !important;
+  height: 64px !important;
+  width: auto;
   vertical-align: middle;
 }
 
@@ -258,11 +267,9 @@ img { max-width: 100%; height: auto; }
 /* Left column is now always visible (d-none d-lg-block removed from JSX) */
 
 @media (max-width: 991px) {
-  .header-layout5 .header-top .row {
-    flex-direction: column;
-    align-items: center;
-    gap: 2px;
-  }
+.header-layout5 .header-top .row {
+  justify-content: center;
+}
   .header-top {
     padding: 8px 0 !important;
   }
@@ -342,11 +349,15 @@ img { max-width: 100%; height: auto; }
 /* ── NAV/TOP-BAR SPACING: tighten on mobile ── */
 @media (max-width: 767px) {
   .header-layout5 .header-top {
+    background: rgba(16, 25, 64, 0.95);
+    backdrop-filter: blur(10px);
     padding: 6px 0 !important;
   }
 }
 @media (max-width: 575px) {
   .header-top {
+    background: rgba(16, 25, 64, 0.95);
+    backdrop-filter: blur(10px);
     padding: 4px 0 !important;
   }
   .header-layout5 .header-logo {
@@ -399,7 +410,7 @@ img { max-width: 100%; height: auto; }
     font-size: 32px;
   }
   .hero-style5 .hero-title img {
-    height: 32px;
+    height: 32px !important;
     width: auto;
     vertical-align: middle;
   }
@@ -431,7 +442,7 @@ img { max-width: 100%; height: auto; }
     line-height: 1.3;
   }
   .hero-style5 .hero-title img {
-    height: 24px;
+    height: 30px !important;
   }
   .hero-style5 .hero-text {
     font-size: 13px;
@@ -590,11 +601,11 @@ img { max-width: 100%; height: auto; }
   }
 
   /* 3. Ensure menu-wrap flex guarantees hamburger on the right */
-  .header-layout5 .menu-wrap {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: space-between !important;
-  }
+.header-layout5 .menu-wrap {
+  margin-left: 0;
+  width: 100%;
+  margin: 0 auto;
+}
 
   /* 4. Sidebar flyout: frosted glass effect */
   .th-menu-wrapper.th-body-visible .th-menu-area {
@@ -671,7 +682,7 @@ img { max-width: 100%; height: auto; }
 
   .service-block .box-icon img {
     max-width: 24px !important;
-    max-height: 24px !important;
+    max-height: 30px !important;
     width: auto !important;
     height: auto !important;
     display: inline-block !important;
@@ -829,15 +840,24 @@ img { max-width: 100%; height: auto; }
 }
 
 /* ══════════════════════════════════════════════════════════════
-   NEW SERVICE CARDS: image background with gradient overlay
+   NEW SERVICE CARDS: image on top, white text panel below
    — PC + mobile (global, not inside media query)
    ══════════════════════════════════════════════════════════════ */
 .service-block-new {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
-  height: 280px;
+  background: #ffffff;
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.service-block-new .service-media {
+  position: relative;
+  height: 220px;
+  overflow: hidden;
 }
 
 .service-block-new .service-bg {
@@ -845,58 +865,56 @@ img { max-width: 100%; height: auto; }
   height: 100%;
   object-fit: cover;
   display: block;
-  transition: transform 0.4s ease;
+  transition: transform 0.45s ease;
 }
 
+/* Image "pops": rises slightly on hover */
 .service-block-new:hover .service-bg {
-  transform: scale(1.05);
-}
-
-.service-block-new .service-overlay {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.9) 0%,
-    rgba(0, 0, 0, 0.5) 40%,
-    rgba(0, 0, 0, 0.1) 100%
-  );
-  pointer-events: none;
+  transform: scale(1.06) translateY(-4px);
 }
 
 .service-block-new .service-content {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 24px;
-  z-index: 2;
+  flex: 1;
+  padding: 24px 20px 26px;
+  background: #ffffff;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .service-block-new .service-title {
-  color: #ffffff;
+  color: #101840;
   font-size: 20px;
   font-weight: 700;
   margin: 0;
   line-height: 1.3;
+  /* reserve 2 lines so all cards (and rows) stay equal height */
+  min-height: 2.6em;
 }
 
 .service-block-new .service-title a {
-  color: #ffffff;
+  color: #101840;
   text-decoration: none;
+  display: block;
 }
 
 .service-block-new .service-title a:hover {
   color: #ED1C24;
 }
 
-/* ── Mobile overrides for new service cards ── */
+
+/* ── Mobile overrides for new service cards (2×4 grid) ── */
 @media (max-width: 767px) {
   .service-block-new {
-    height: 180px !important;
+    height: 100% !important;
     overflow: hidden !important;
     border-radius: 12px !important;
   }
+  .service-block-new .service-media {
+    height: 130px !important;
+    overflow: hidden !important;
+  }
   .service-block-new .service-bg {
     width: 100% !important;
     height: 100% !important;
@@ -904,33 +922,30 @@ img { max-width: 100%; height: auto; }
     object-position: center !important;
     display: block !important;
   }
-  .service-block-new .service-overlay {
-    background: linear-gradient(
-      to top,
-      rgba(0, 0, 0, 0.85) 0%,
-      rgba(0, 0, 0, 0.4) 40%,
-      rgba(0, 0, 0, 0) 70%
-    ) !important;
-  }
   .service-block-new .service-content {
-    padding: 12px !important;
-    z-index: 2 !important;
+    padding: 12px 10px !important;
+    background: #fff !important;
+    text-align: center !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
   }
   .service-block-new .service-title {
-    font-size: 11px !important;
+    font-size: 12px !important;
     line-height: 1.3 !important;
-    font-weight: 600 !important;
-    color: #fff !important;
-    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
+    font-weight: 700 !important;
+    color: #101840 !important;
+    text-shadow: none !important;
     display: -webkit-box !important;
     -webkit-line-clamp: 2 !important;
     -webkit-box-orient: vertical !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     margin: 0 !important;
+    min-height: 2.6em !important;
   }
   .service-block-new .service-title a {
-    color: #fff !important;
+    color: #101840 !important;
     text-decoration: none !important;
   }
   [data-id="148606f"] .row {
@@ -938,24 +953,13 @@ img { max-width: 100%; height: auto; }
   }
 }
 
-/* ── Service card text center ── */
-.service-block-new .service-content {
-  text-align: center !important;
-}
-
-.service-block-new .service-title a {
-  display: block !important;
-}
-
 /* ══════════════════════════════════════════════════════════════
-   STICKY NAVBAR: white frosted glass
+   STICKY NAVBAR: solid white
    - Overrides theme.css solid #0c0d0e bg
-   - White frosted + subtle shadow for PC view
+   - Solid white + subtle shadow for PC view
    ══════════════════════════════════════════════════════════════ */
 .sticky-wrapper.sticky {
-  background: rgba(255, 255, 255, 0.85) !important;
-  backdrop-filter: blur(20px) !important;
-  -webkit-backdrop-filter: blur(20px) !important;
+  background: #ffffff !important;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
 }
@@ -964,15 +968,41 @@ img { max-width: 100%; height: auto; }
 .header-layout5 .sticky-wrapper.sticky .header-logo {
   background-color: transparent !important;
 }
+/* Logo swap: top logo = red/white, sticky logo = black */
+.logo-sticky { display: none; }
+.sticky-wrapper.sticky .logo-top { display: none; }
+.sticky-wrapper.sticky .logo-sticky { display: block; }
+
+/* Lighter border on the nav CTA when navbar is scrolled/sticky */
 
 /* ── HEADER BUTTON: bigger Promist logo in navbar ── */
-.header-layout5 .header-button img {
-  height: 40px !important;
+.header-layout5 .header-button .promist-link img {
+  height: 30px !important;
   width: auto !important;
   display: block !important;
   margin: 0 auto !important;
 }
 
+/* ── MOBILE (<=767px): shrink both logos so hamburger + Profen + Promist fit one row ── */
+@media (max-width: 767px) {
+  /* Vertically center hamburger, Profen logo and Promist in the same row */
+  .header-layout5 .row.align-items-start {
+    align-items: center !important;
+  }
+  /* Hide the SVG mask wings that overlap the Promist logo on small screens */
+  .header-layout5 .menu-wrap:before,
+  .header-layout5 .menu-wrap:after {
+    display: none !important;
+  }
+  .header-layout5 .header-logo img {
+    max-width: 88px !important;
+  }
+  .header-layout5 .menu-wrap .promist-link img {
+    height: 20px !important;
+    width: auto !important;
+  }
+}
+
 
 /* ── Mobile sidebar: white frosted glass + dark text ── */
 @media (max-width: 767px) {
@@ -1032,12 +1062,10 @@ img { max-width: 100%; height: auto; }
   background: transparent !important;
 }
 
-/* Make nav and menu elements transparent so frosted glass shows through */
-.sticky-wrapper.sticky .main-menu,
-.sticky-wrapper.sticky .main-menu ul,
-.sticky-wrapper.sticky .rakar-menu,
-.sticky-wrapper.sticky .rakar-menu li {
-  background: transparent !important;
+/* Keep Services dropdown solid when header is sticky
+   (prevents the transparent cascade from wiping the dropdown background) */
+.sticky-wrapper.sticky .header-layout5 .main-menu ul.sub-menu {
+  background: #101940 !important;
 }
 
 /* ══════════════════════════════════════════════════════════════