meh

.gitignore

@@ -2,3 +2,6 @@ node_modules/
 dist/
 .env
 *.local
+
+CHANGES.md
+deploy.yml

src/components/WhatsAppButton.jsx

@@ -48,6 +48,13 @@ export default function WhatsAppButton() {
           background: #ff3b30;
           border: 2px solid #ffffff;
         }
+
+@media (max-width: 767px) {
+  .whatsapp-float {
+    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
+    right: calc(16px + env(safe-area-inset-right, 0px));
+  }
+}
       `}</style>
     </>
   );

src/components/home/HomeClients.jsx

@@ -22,9 +22,9 @@ export default function HomeClients() {
                 data-slider-options={JSON.stringify({
                   spaceBetween: 30,
                   breakpoints: {
-                    0: { slidesPerView: 1 },
+                    0: { slidesPerView: 3 },
-                    576: { slidesPerView: 2 },
+                    576: { slidesPerView: 4 },
-                    768: { slidesPerView: 3 },
+                    768: { slidesPerView: 5 },
                     992: { slidesPerView: 4 },
                     1200: { slidesPerView: 4 },
                     1300: { slidesPerView: 5 },

src/components/home/HomePartners.jsx

@@ -28,8 +28,9 @@ export default function HomePartners() {
                   loop: true,
                   speed: 800,
                   breakpoints: {
-                    0: { slidesPerView: 2 },
+                    0: { slidesPerView: 3 },
-                    640: { slidesPerView: 3 },
+                    480: { slidesPerView: 4 },
+                    640: { slidesPerView: 5 },
                     992: { slidesPerView: 5 }
                   }
                 })}

src/components/home/HomeServicesSection.jsx

@@ -69,12 +69,11 @@ export default function HomeServicesSection() {
             <div className="row gy-4">
               {SERVICES.map((s) => (
                 <div key={s.slug} className="col-xxl-3 col-lg-4 col-md-6">
-                  <div className="service-block">
+                  <div className="service-block-new">
-                    <div className="box-img"><img decoding="async" src={s.img} alt={s.title} /></div>
+                    <img className="service-bg" decoding="async" src={s.img} alt={s.title} />
-                    <Link to={`/service/${s.slug}`} className="icon-btn"><i className="far fa-arrow-up-right"></i></Link>
+                    <div className="service-overlay"></div>
-                    <div className="box-content">
+                    <div className="service-content">
-                      <div className="box-icon"><img decoding="async" src={s.icon} alt="" /></div>
+                      <h3 className="service-title"><Link to={`/service/${s.slug}`}>{s.title}</Link></h3>
-                      <h3 className="box-title"><Link to={`/service/${s.slug}`}>{s.title}</Link></h3>
                     </div>
                   </div>
                 </div>

src/components/sections/Footer.jsx

@@ -17,7 +17,7 @@ const CONTACT_INFO = [
 
 const FOOTER_LINKS = [
   { label: 'About Profen Engineering', path: '/about' },
-  { label: 'Our Services', path: '/service' },
+  { label: 'Our Services', path: '/service/electro-mechanical-works' },
   { label: 'Our Projects', path: '/project' },
   { label: 'Reach Us', path: '/contact' },
 ]
@@ -97,6 +97,18 @@ export default function Footer() {
           max-width:none !important;
           width:100% !important;
         }
+        /* ── FOOTER MOBILE RESPONSIVE ── */
+        @media (max-width: 991px){
+          .pf-footer .pf-contact-divider{ display:none !important; }
+        }
+        @media (max-width:767px){
+          .pf-footer .pf-contact-wrap{ flex-direction:column !important; padding:16px !important; gap:12px !important; }
+          .pf-footer .pf-contact-cell{ flex:none !important; width:100% !important; padding:0 !important; justify-content:flex-start !important; }
+          .pf-footer .pf-widgets-row{ flex-direction:column !important; padding:40px 24px 32px !important; gap:24px !important; }
+          .pf-footer .pf-about-col,
+          .pf-footer .pf-links-col{ flex:none !important; width:100% !important; }
+          .pf-footer .pf-copyright-inner{ text-align:center !important; }
+        }
       `}</style>
 
       {/* Contact bar — white rounded card, own classes for guaranteed 3-cell centering */}

src/components/sections/Header.jsx

@@ -47,7 +47,7 @@ export default function Header() {
                 <div className="th-menu-area text-center">
                   <button className="th-menu-toggle"><i className="fas fa-times"></i></button>
                   <div className="mobile-logo">
-                    <a href="/"><img alt="logo" src="/assets/images/logo_pe-Rd-Wh-001.svg" /></a>
+                    <a href="/"><img alt="logo" src="/assets/images/logo_pe-new-bk-70.png" /></a>
                   </div>
                   <div className="th-mobile-menu">
                     <ul>
@@ -127,7 +127,7 @@ export default function Header() {
                         <div className="col">
                           <div className="menu-wrap">
                             <div className="header-logo d-block d-lg-none">
-                              <a href="/"><img alt="logo_pe new bk 70" src="/assets/images/logo_pe-new-bk-70.png" /></a>
+                              <a href="/"><img alt="logo_pe new wh 70" src="/assets/images/logo_pe-new-wh-70.png" /></a>
                             </div>
                             <nav className="main-menu d-none d-lg-inline-block">
                               <ul className="rakar-menu">
@@ -160,9 +160,8 @@ export default function Header() {
                         </div>
                         <div className="col-auto d-none d-xl-block">
                           <div className="header-button">
-                            <a className="th-btn rounded-12 th_btn promist-btn" href="/" target="_blank" rel="noopener noreferrer" style={{ background: '#fff', border: '1px solid #e0e0e0', padding: '12px 28px', display: 'inline-flex', alignItems: 'center', gap: '10px' }}>
+                            <a href="/service/misting-solutions">
-                              <img src="/assets/images/Promist-Logo-1.png" alt="Promist" style={{ height: '32px' }} className="promist-logo" />
+                              <img src="/assets/images/Promist-Logo-1.png" alt="Promist" style={{ height: '40px' }} />
-                              <i className="fas fa-arrow-right" style={{ fontSize: '14px' }}></i>
                             </a>
                           </div>
                         </div>

src/components/shared/Lightbox.jsx

@@ -31,7 +31,7 @@ export default function Lightbox({ images, index, onClose }) {
         style={{
           position: 'absolute', top: 20, right: 24,
           background: 'none', border: 'none', color: '#fff',
-          fontSize: 32, cursor: 'pointer', zIndex: 1
+          fontSize: 32, cursor: "pointer", zIndex: 1, padding: "10px", lineHeight: 1
         }}
         aria-label="Close"
       >&times;</button>

src/css/dynamic.css

@@ -1,4 +1,21 @@
 :root{--icon-font:"Font Awesome 6 Free";--fa-style-family:"Font Awesome 6 Free";}
+/* ── GLOBAL IMAGE OVERFLOW PREVENTION ── */
+img { max-width: 100%; height: auto; }
+
+/* ── SECTION SPACING: tighter on very small screens ── */
+@media (max-width: 575px) {
+  .space, .space-top { padding-top: 30px !important; }
+  .space, .space-bottom { padding-bottom: 30px !important; }
+  .sec-title { font-size: 20px !important; }
+  .form-btn .th-btn { width: 100%; }
+}
+
+/* ── FORM INPUTS: full-width guarantee on mobile ── */
+@media (max-width: 767px) {
+  .contact-form .form-group input,
+  .contact-form .form-group select,
+  .contact-form .form-group textarea { width: 100% !important; }
+}
 .header-logo .logo img{width:260px;}
 .th-menu-wrapper .mobile-logo img{width:180px;}
 .th-menu-wrapper .mobile-logo{background-color:var(--brand-navy, #0a004c);}
@@ -119,34 +136,66 @@
   .box-title { font-size: 18px !important; }
 
   /* === Service cards === */
-  .service-block .box-content { margin: -24px 8px 0 !important; padding: 0 12px 12px !important; }
+  .service-block .box-content { padding: 16px !important; margin: -40px 8px 0 !important; }
-  .service-block .box-title { font-size: 16px !important; }
+  .service-block .box-title { font-size: 16px !important; margin-bottom: 4px !important; }
-  .service-block .box-icon { width: 48px !important; height: 48px !important; font-size: 20px !important; }
+  .service-block .box-icon { width: 52px !important; height: 52px !important; line-height: 52px !important; margin: -26px auto -14px auto !important; transform: translateY(-26px) !important; font-size: 20px !important; }
   .service-card { padding: 16px !important; }
   .service-card .box-number { font-size: 36px !important; }
   .service-grid { padding: 16px !important; }
+  .service-block .box-img {
+    height: 160px !important;
+    overflow: hidden !important;
+  }
+  .service-block .box-img img {
+    height: 100% !important;
+    width: 100% !important;
+    object-fit: cover !important;
+  }
+  .service-block .box-title a {
+    font-size: 16px !important;
+  }
+  .service-block .box-text {
+    font-size: 13px !important;
+    margin-bottom: 8px !important;
+    display: -webkit-box !important;
+    -webkit-line-clamp: 2 !important;
+    -webkit-box-orient: vertical !important;
+    overflow: hidden !important;
+  }
+  .service-block .icon-btn {
+    width: 44px !important;
+    height: 44px !important;
+    font-size: 16px !important;
+    line-height: 44px !important;
+    text-align: center !important;
+    top: 8px !important;
+    right: 8px !important;
+  }
 
   /* === Counter cards === */
   .counter-card .box-number { font-size: 28px !important; }
   .counter-card .box-text { font-size: 14px !important; }
 
   /* === Gallery === */
-  .gallery-grid .icon-btn { opacity: 1 !important; transform: none !important; right: 8px !important; top: 8px !important; width: 32px !important; height: 32px !important; font-size: 11px !important; }
+  .gallery-grid .icon-btn { opacity: 1 !important; visibility: visible !important; transform: none !important; right: 8px !important; top: 8px !important; width: 32px !important; height: 32px !important; font-size: 11px !important; }
+  .gallery-grid .box-img img { height: 200px !important; object-fit: cover !important; width: 100% !important; }
 
   /* === Brand/Sponsor === */
-  .brand-sec3 .brand-inner { margin-top: -24px !important; padding: 12px 8px !important; }
+  .brand-sec3 .brand-inner { margin-top: -24px !important; }
-  .brand-card img { max-height: 24px !important; width: auto !important; }
+  /* moved to sponsor block below */
 
   /* === Project cards === */
-  .project-card .box-content { padding: 10px !important; }
+  .project-element .box-content { display: none !important; }
-  .project-card .box-title { font-size: 15px !important; }
+  .project-element .box-img { border-radius: 16px !important; overflow: hidden !important; }
+  .project-element .box-img img { height: 200px !important; object-fit: cover !important; width: 100% !important; display: block !important; }
   .filter-menu { margin-bottom: 20px !important; gap: 4px !important; }
   .filter-menu .tab-btn { font-size: 12px !important; padding: 4px 12px !important; }
+  /* Prevent project slider from clipping card edges */
+  .elementor-element-46cde4a .elementor-widget-container { overflow: visible !important; }
 
   /* === Process === */
-  .process-box { padding: 12px 36px 12px 12px !important; }
   .process-box .box-title { font-size: 15px !important; }
-  .process-card-wrap { grid-template-columns: 1fr !important; gap: 12px !important; }
+  .process-box-wrap { gap: 28px !important; }
 
   /* === Contact === */
   .contact-area { padding: 16px !important; }
@@ -196,3 +245,744 @@
     right: 16px;
   }
 }
+
+/* ── HERO: bigger Promist inline logo ── */
+.hero-style5 .hero-title img {
+  height: 48px !important;
+  width: auto !important;
+  vertical-align: middle;
+}
+
+/* ── HEADER: top bar mobile responsive ── */
+/* 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-top {
+    padding: 8px 0 !important;
+  }
+  .header-top .header-links ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 2px 12px;
+  }
+  .header-top .header-links li {
+    font-size: 12px;
+  }
+  .header-top .header-links li:not(:last-child) {
+    margin-right: 0;
+  }
+  .header-top .header-links li:not(:last-child):after {
+    display: none;
+  }
+}
+
+/* ── STICKY NAV: compress on scroll ── */
+.sticky-wrapper.sticky .main-menu > ul > li > a {
+  padding: 18px 0 !important;
+}
+.sticky-wrapper.sticky .header-logo {
+  padding: 2px 0 !important;
+}
+
+/* ── MOBILE MENU: touch targets & faster transition ── */
+@media (max-width: 767px) {
+  .th-menu-wrapper {
+    transition: all ease 0.35s;
+  }
+  .th-menu-wrapper .th-menu-area {
+    transition: all ease 0.35s;
+  }
+  .th-menu-wrapper .th-menu-toggle {
+    width: 44px;
+    height: 44px;
+    right: 10px;
+    top: 20px;
+    font-size: 20px;
+    line-height: 44px;
+    border-radius: 8px;
+  }
+  .header-layout5 .th-menu-toggle {
+    width: 48px;
+    height: 48px;
+    font-size: 22px;
+  }
+}
+
+/* ── LOGO: fine-tune scaling across breakpoints ── */
+@media (max-width: 1199px) {
+  .header-layout5 .header-logo img {
+    max-width: 170px;
+  }
+}
+@media (max-width: 575px) {
+  .header-layout5 .header-logo img {
+    max-width: 120px;
+  }
+}
+
+/* ── NAV/TOP-BAR SPACING: tighten on mobile ── */
+@media (max-width: 767px) {
+  .header-layout5 .header-top {
+    padding: 6px 0 !important;
+  }
+}
+@media (max-width: 575px) {
+  .header-top {
+    padding: 4px 0 !important;
+  }
+  .header-layout5 .header-logo {
+    padding: 6px 0 !important;
+  }
+}
+
+/* ── HERO 5: responsive sizing ── */
+@media (max-width: 1199px) {
+  .hero-5 .hero-inner {
+    min-height: 600px;
+  }
+  .hero-style5 {
+    padding: 160px 0;
+  }
+}
+
+@media (max-width: 991px) {
+  .hero-5 .hero-inner {
+    min-height: 520px;
+  }
+  .hero-style5 {
+    padding: 120px 0;
+  }
+  .hero-5 .icon-box {
+    bottom: 24px;
+    right: 24px;
+  }
+}
+
+@media (max-width: 767px) {
+  .hero-5 .hero-inner {
+    min-height: 460px;
+  }
+  .hero-style5 {
+    padding: 80px 0;
+  }
+  .hero-style5 .hero-title {
+    font-size: 32px;
+  }
+  .hero-style5 .hero-title img {
+    height: 32px;
+    width: auto;
+    vertical-align: middle;
+  }
+  .hero-style5 .hero-text {
+    font-size: 14px;
+    margin-bottom: 24px;
+    max-width: 100%;
+  }
+  .hero-5 .icon-box {
+    bottom: 16px;
+    right: 16px;
+  }
+  .hero-5 .icon-box .slider-arrow {
+    width: 40px;
+    height: 40px;
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 575px) {
+  .hero-5 .hero-inner {
+    min-height: 380px;
+  }
+  .hero-style5 {
+    padding: 60px 0;
+  }
+  .hero-style5 .hero-title {
+    font-size: 24px;
+    line-height: 1.3;
+  }
+  .hero-style5 .hero-title img {
+    height: 24px;
+  }
+  .hero-style5 .hero-text {
+    font-size: 13px;
+    margin-bottom: 18px;
+  }
+  .hero-5 .icon-box {
+    bottom: 12px;
+    right: 12px;
+    padding: 8px;
+  }
+  .hero-5 .icon-box .slider-arrow {
+    width: 34px;
+    height: 34px;
+    font-size: 11px;
+  }
+}
+
+/* ── WHY CHOOSE US: stack columns vertically on mobile ── */
+@media (max-width: 767px) {
+  .elementor-23 .elementor-element-2a912e6.e-flex {
+    --flex-direction: column;
+  }
+  .why-feature {
+    padding: 16px !important;
+    margin-bottom: 12px !important;
+  }
+  .why-feature .box-icon {
+    width: 48px !important;
+    height: 48px !important;
+    margin-bottom: 12px !important;
+  }
+  .why-feature .box-title {
+    font-size: 15px !important;
+    margin-bottom: 4px !important;
+  }
+  .why-feature .box-text {
+    font-size: 13px !important;
+    line-height: 1.4 !important;
+    margin-bottom: 0 !important;
+    display: -webkit-box !important;
+    -webkit-line-clamp: 2 !important;
+    -webkit-box-orient: vertical !important;
+    overflow: hidden !important;
+  }
+}
+
+/* ── WHY FEATURE: tighter card padding on very small screens ── */
+@media (max-width: 575px) {
+  .why-feature {
+    padding: 16px;
+  }
+  .why-feature .box-icon {
+    margin-bottom: 16px;
+  }
+}
+
+/* ── SERVICE DETAIL: sidebar below content on mobile ── */
+@media (max-width: 767px) {
+  .elementor-element-9a85ca6.e-flex {
+    --flex-direction: column;
+  }
+  .elementor-element-9a85ca6 .e-con-full {
+    --width: 100%;
+  }
+  .service-sidebar {
+    margin-top: 24px;
+  }
+}
+
+/* ── ABOUT INTRO: stack columns on mobile ── */
+@media (max-width: 767px) {
+  .elementor-element-00d41d8.e-flex {
+    --flex-direction: column;
+  }
+  .elementor-element-00d41d8 .e-con-full {
+    --width: 100%;
+  }
+  /* bottom feature row: single column */
+  .contact-process-wrap {
+    grid-template-columns: 1fr !important;
+    gap: 16px !important;
+  }
+  .rounded-img1 img {
+    width: 100%;
+    height: auto;
+  }
+}
+
+/* ── ABOUT EXPERTISE: section title full width on mobile ── */
+@media (max-width: 767px) {
+  .elementor-element-602a946 {
+    --container-widget-width: 100% !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+}
+
+/* ── ABOUT WHY CHOOSE US: stack columns on mobile ── */
+@media (max-width: 767px) {
+  .elementor-element-823d3c9.e-flex {
+    --flex-direction: column;
+  }
+  .elementor-element-823d3c9 .e-con-full {
+    --width: 100%;
+  }
+  .choose-feature-wrap {
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 12px !important;
+  }
+}
+
+/* ── CONTACT: stack form columns, full-width map ── */
+@media (max-width: 767px) {
+  .elementor-element-a29b2eb.e-flex {
+    --flex-direction: column;
+  }
+  .elementor-element-a29b2eb .e-con-full {
+    --width: 100%;
+  }
+  .elementor-element-3e6da81 {
+    display: none !important;
+  }
+  .elementor-custom-embed iframe {
+    height: 300px;
+  }
+}
+
+/* ── BREADCRUMB: tighter spacing on small screens ── */
+@media (max-width: 575px) {
+  .breadcumb-menu {
+    gap: 4px;
+    font-size: 13px;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .breadcumb-menu li:not(:last-child):after {
+    margin: 0 4px;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════
+   MOBILE NAVBAR REDO (max-width: 767px)
+   — Hide top bar, white sidebar, transparent hamburger bg
+   — Every rule wrapped in @media — PC view untouched
+   ══════════════════════════════════════════════════════════════ */
+@media (max-width: 767px) {
+  /* 1. Hide top contact bar entirely on mobile (address, hours, phone) */
+  .header-layout5 .header-top {
+    display: none !important;
+  }
+
+  /* 2. Hamburger button: transparent bg, red icon, right-aligned via flex */
+  .header-layout5 .th-menu-toggle {
+    background: transparent !important;
+    color: var(--theme-color, #ED1C24) !important;
+  }
+
+  /* 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;
+  }
+
+  /* 4. Sidebar flyout: frosted glass effect */
+  .th-menu-wrapper.th-body-visible .th-menu-area {
+    background: rgba(255, 255, 255, 0.85) !important;
+    backdrop-filter: blur(20px) !important;
+    -webkit-backdrop-filter: blur(20px) !important;
+    border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08) !important;
+  }
+
+  /* 5. Mobile menu links: dark text on white bg */
+  .th-mobile-menu ul li a {
+    color: #1a1a2e !important;
+  }
+
+  /* 6. Mobile logo container: frosted to match sidebar */
+  .th-menu-wrapper .mobile-logo {
+    background: rgba(255, 255, 255, 0.8) !important;
+    backdrop-filter: blur(10px) !important;
+    -webkit-backdrop-filter: blur(10px) !important;
+  }
+
+  /* 7. Close button: subtle circle, frosted, always tappable */
+  .th-menu-wrapper .th-menu-toggle {
+    position: absolute !important;
+    right: 12px !important;
+    top: 16px !important;
+    width: 40px !important;
+    height: 40px !important;
+    line-height: 40px !important;
+    font-size: 18px !important;
+    background: rgba(0, 0, 0, 0.05) !important;
+    color: #333 !important;
+    border-radius: 50% !important;
+    z-index: 10 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    border: none !important;
+    cursor: pointer !important;
+  }
+  .th-menu-wrapper .th-menu-toggle:hover {
+    background: rgba(0, 0, 0, 0.1) !important;
+  }
+
+  /* 8. Remove the red right-border accent on sidebar (was theme-color border) */
+  .th-menu-wrapper .th-menu-area {
+    border-right-color: #e5e5e5 !important;
+  }
+
+  /* 9. Sub-menu items on mobile — dark text, visible on white */
+  .th-mobile-menu ul li li a {
+    color: #333 !important;
+  }
+
+  /* 10. Overlay: lighter to let frosted glass show through */
+  .th-menu-wrapper {
+    background: rgba(0, 0, 0, 0.3) !important;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════
+   SERVICE ICON FIX (max-width: 767px)
+   — Proper circle sizing + negative margins for overlap
+   ══════════════════════════════════════════════════════════════ */
+@media (max-width: 767px) {
+  .service-block .box-icon {
+    width: 52px !important;
+    height: 52px !important;
+    line-height: 52px !important;
+    margin: -26px auto -14px auto !important;
+    transform: translateY(-26px) !important;
+  }
+
+  .service-block .box-icon img {
+    max-width: 24px !important;
+    max-height: 24px !important;
+    width: auto !important;
+    height: auto !important;
+    display: inline-block !important;
+    vertical-align: middle !important;
+  }
+}
+
+
+/* ══════════════════════════════════════════════════════════════
+   HERO: hide pagination dashes on mobile
+   — Fix: dynamic.css global .slider-area .slider-pagination { display:flex }
+     was overriding theme-main.css .hero-5 .swiper-pagination-bullets { display:none }
+     due to same-specificity cascade order. This enforces the intent.
+   ══════════════════════════════════════════════════════════════ */
+@media (max-width: 767px) {
+  .hero-5 .slider-pagination {
+    display: none !important;
+  }
+}
+
+/* ── SPONSOR / CLIENT LOGOS: full viewport, bigger on mobile ── */
+@media (max-width: 767px) {
+  /* Break out of any parent container constraint — span full viewport */
+  .brand-sec3 {
+    width: 100vw !important;
+    margin-left: calc(-50vw + 50%) !important;
+    max-width: none !important;
+    overflow: hidden !important;
+    padding: 16px 0 !important;
+  }
+
+  /* Reset brand-inner: remove desktop margin-right:200px, hide decorative shapes */
+  .brand-sec3 .brand-inner {
+    margin-right: 0 !important;
+    padding: 12px 0 !important;
+    background: transparent !important;
+  }
+  .brand-sec3 .brand-inner:before,
+  .brand-sec3 .brand-inner:after {
+    display: none !important;
+  }
+
+  /* Card: transparent, no borders, flex-center for bigger logos */
+  .brand-sec3 .brand-card {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    padding: 8px 8px !important;
+    aspect-ratio: auto !important;
+    min-height: 60px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+
+  /* Logo images: BIG, full-width within card */
+  .brand-sec3 .brand-card img {
+    max-height: 60px !important;
+    max-width: 100% !important;
+    width: auto !important;
+    height: auto !important;
+    object-fit: contain !important;
+    filter: none !important;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════
+   FIX 1: Footer — hide contact info bar (phone/email/address)
+   ══════════════════════════════════════════════════════════════ */
+@media (max-width: 767px) {
+  .pf-footer .pf-contact-wrap {
+    display: none !important;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════
+   FIX 2: Working Process — remove box backgrounds/borders
+   Keep only circles (box-number) + text (box-title)
+   ══════════════════════════════════════════════════════════════ */
+@media (max-width: 767px) {
+  .process-box {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    min-height: 68px !important;
+  }
+  .process-box .box-content {
+    background: transparent !important;
+    padding: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════
+   FIX 3: Gallery — plus signs inside white circles
+   ══════════════════════════════════════════════════════════════ */
+@media (max-width: 767px) {
+  /* Button: white circle, always visible on mobile */
+  .gallery-grid .icon-btn {
+    width: 44px !important;
+    height: 44px !important;
+    line-height: 44px !important;
+    border-radius: 50% !important;
+    background: rgba(255,255,255,0.9) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    text-align: center !important;
+    font-size: 16px !important;
+    color: #ED1C24 !important;
+    text-decoration: none !important;
+    z-index: 10 !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+  }
+  /* Ensure the icon pseudo-element renders */
+  .gallery-grid .icon-btn i,
+  .gallery-grid .icon-btn i::before {
+    display: inline-block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    color: #ED1C24 !important;
+    font-family: 'Font Awesome 6 Free';
+    font-weight: 900;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════
+   FIX 4: Navbar — desktop Services dropdown on click
+   Shows sub-menu when parent <li> has .th-active class
+   ══════════════════════════════════════════════════════════════ */
+@media (min-width: 768px) {
+  .header-layout5 .main-menu ul li.menu-item-has-children.th-active > ul.sub-menu {
+    display: grid !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    transform: translateY(0) !important;
+    pointer-events: auto !important;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════
+   NEW SERVICE CARDS: image background with gradient overlay
+   — PC + mobile (global, not inside media query)
+   ══════════════════════════════════════════════════════════════ */
+.service-block-new {
+  position: relative;
+  border-radius: 20px;
+  overflow: hidden;
+  height: 280px;
+  cursor: pointer;
+}
+
+.service-block-new .service-bg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.4s ease;
+}
+
+.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;
+}
+
+.service-block-new .service-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 24px;
+  z-index: 2;
+}
+
+.service-block-new .service-title {
+  color: #ffffff;
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+  line-height: 1.3;
+}
+
+.service-block-new .service-title a {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.service-block-new .service-title a:hover {
+  color: #ED1C24;
+}
+
+/* ── Mobile overrides for new service cards ── */
+@media (max-width: 767px) {
+  .service-block-new {
+    height: 220px;
+  }
+  .service-block-new .service-title {
+    font-size: 16px;
+  }
+  .service-block-new .service-content {
+    padding: 16px;
+  }
+}
+
+/* ── 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
+   - Overrides theme.css solid #0c0d0e bg
+   - White frosted + 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;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
+}
+
+/* Remove the solid bg behind logo div on sticky state */
+.header-layout5 .sticky-wrapper.sticky .header-logo {
+  background-color: transparent !important;
+}
+
+/* ── HEADER BUTTON: bigger Promist logo in navbar ── */
+.header-layout5 .header-button img {
+  height: 40px !important;
+  width: auto !important;
+  display: block !important;
+  margin: 0 auto !important;
+}
+
+
+/* ── Mobile sidebar: white frosted glass + dark text ── */
+@media (max-width: 767px) {
+  /* Sidebar flyout: white frosted glass */
+  .th-menu-wrapper.th-body-visible .th-menu-area {
+    background: rgba(255, 255, 255, 0.9) !important;
+    backdrop-filter: blur(20px) !important;
+    -webkit-backdrop-filter: blur(20px) !important;
+    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08) !important;
+  }
+
+  /* Mobile logo area: frosted to match sidebar */
+  .th-menu-wrapper .mobile-logo {
+    background: rgba(255, 255, 255, 0.8) !important;
+    backdrop-filter: blur(10px) !important;
+    -webkit-backdrop-filter: blur(10px) !important;
+  }
+
+  /* Nav links: dark text on white sidebar */
+  .th-mobile-menu ul li a {
+    color: #1a1a2e !important;
+  }
+  .th-mobile-menu ul li li a {
+    color: #333 !important;
+  }
+
+  /* Close button: subtle dark circle on frosted */
+  .th-menu-wrapper .th-menu-toggle {
+    background: rgba(0, 0, 0, 0.05) !important;
+    color: #333 !important;
+  }
+  .th-menu-wrapper .th-menu-toggle:hover {
+    background: rgba(0, 0, 0, 0.1) !important;
+  }
+
+  /* Overlay: lighter so frosted glass shows through */
+  .th-menu-wrapper {
+    background: rgba(0, 0, 0, 0.3) !important;
+  }
+}
+
+/* ── FROSTED GLASS: cascade to inner navbar elements ── */
+/* .menu-wrap and its SVG-mask wings (::before/::after) have
+   solid background-color: var(--body-bg) (#E1E4E5) from
+   theme-main.css:6461-6484, which blocks the frosted glass
+   backdrop-filter on .sticky-wrapper.sticky from showing through.
+   Making them transparent reveals the frosted effect. */
+.sticky-wrapper.sticky .menu-wrap,
+.sticky-wrapper.sticky .menu-wrap::before,
+.sticky-wrapper.sticky .menu-wrap::after {
+  background-color: transparent !important;
+}
+
+/* Ensure the .container inside sticky doesn't add its own bg */
+.sticky-wrapper.sticky .container {
+  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;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   LOGO COLOR FIX: Prevent any filter from making logo appear black
+   — Ensure the Profen logo always shows its natural red/white/cyan colors
+   — filter: none blocks inherited or accidentally applied filters
+   — No positioning/layout properties are changed
+   ══════════════════════════════════════════════════════════════ */
+.header-layout5 .header-logo img {
+  -webkit-filter: none !important;
+  filter: none !important;
+}
+
+/* Also protect the mobile logo images */
+.header-layout5 .menu-wrap .header-logo img,
+.th-menu-wrapper .mobile-logo img {
+  -webkit-filter: none !important;
+  filter: none !important;
+}

src/hooks/useLayoutInit.js

@@ -1,10 +1,11 @@
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
-import { useLocation } from 'react-router-dom'
 
 export default function useLayoutInit() {
-  const { pathname } = useLocation()
+  const initialized = useRef(false)
 
   useEffect(() => {
+    if (initialized.current) return
+    initialized.current = true
     let destroyed = false
     let rafId = null
 
@@ -45,5 +46,5 @@ export default function useLayoutInit() {
       if (rafId) cancelAnimationFrame(rafId)
       clearTimeout(fallback)
     }
-  }, [pathname])
+  }, [])
 }