foot

src/components/sections/Footer.jsx

@@ -10,23 +10,9 @@ const SOCIAL_LINKS = [
 ]
 
 const CONTACT_INFO = [
-  { icon: 'fas fa-location-dot', text: 'Al Qusais Industrial Area-3, Dubai, UAE', link: 'https://maps.app.goo.gl/5bMqkGpNXNo1K9yC7', target: '_blank' },
+  { icon: 'fas fa-location-dot', title: 'Address', text: 'Al Qusais Industrial Area-3, Dubai, UAE', link: 'https://maps.app.goo.gl/5bMqkGpNXNo1K9yC7', target: '_blank' },
-  { icon: 'fas fa-phone-volume', label: 'Call Us:', text: '+971 4 320 0869', link: 'tel:+97143200869' },
+  { icon: 'fas fa-phone-volume', title: 'Call Us:', text: '+971 4 320 0869', link: 'tel:+97143200869' },
-  { icon: 'fas fa-envelope', label: 'Email Us:', text: 'admin@profeneng.com', link: 'mailto:admin@profeneng.com' },
+  { icon: 'fas fa-envelope', title: 'Email Us:', text: 'admin@profeneng.com', link: 'mailto:admin@profeneng.com' },
-]
-
-const FOOTER_SERVICES_1 = [
-  { label: 'Electro-Mechanical Works', path: '/service/electro-mechanical-works' },
-  { label: 'Landscaping & Fencing Works', path: '/service/landscaping-fencing-works' },
-  { label: 'Building Contracting Works', path: '/service/building-contracting-works' },
-  { label: 'Interior & Fit-Out Works', path: '/service/interior-fit-out-works' },
-]
-
-const FOOTER_SERVICES_2 = [
-  { label: 'Metal Construction & Fabrications', path: '/service/metal-construction-fabrications' },
-  { label: 'Chiller Hot & Cool Solutions', path: '/service/chiller-hot-cool-solutions' },
-  { label: 'Misting Solutions', path: '/service/misting-solutions' },
-  { label: 'Adiabatic Pre-Cooling System', path: '/service/adiabatic-pre-cooling-system' },
 ]
 
 const FOOTER_LINKS = [
@@ -41,20 +27,103 @@ export default function Footer() {
   useNavFix(ref)
 
   return (
-    <footer ref={ref}>
+    <footer ref={ref} className="footer-wrapper pf-footer">
-      <style id="elementor-post-1098">{`
+      <style>{`
-.elementor-1098 .elementor-element.elementor-element-6bbd41e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1098 .elementor-element.elementor-element-6bbd41e:not(.elementor-motion-effects-element-type-background), .elementor-1098 .elementor-element.elementor-element-6bbd41e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#01003D;}.elementor-1098 .elementor-element.elementor-element-4b4c392{--display:flex;}.elementor-1098 .elementor-element.elementor-element-7a7bb64 .label{color:#FFFFFF;font-size:12px;}.elementor-1098 .elementor-element.elementor-element-7a7bb64 .box-text, .elementor-1098 .elementor-element.elementor-element-7a7bb64 .box-text a, .elementor-1098 .elementor-element.elementor-element-7a7bb64 .box-text span{color:#FFFFFF;font-size:14px;}.elementor-1098 .elementor-element.elementor-element-953ab14{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:100px;--padding-bottom:48px;--padding-left:0px;--padding-right:0px;}.elementor-1098 .elementor-element.elementor-element-c5d6f05 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 12px 0px 12px;}.elementor-1098 .elementor-element.elementor-element-8e3fc7b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 12px 0px 12px;}.elementor-1098 .elementor-element.elementor-element-c7fa0b1 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:50px 12px 0px 12px;}.elementor-1098 .elementor-element.elementor-element-a684744 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:50px 12px 0px 12px;}.elementor-1098 .elementor-element.elementor-element-66137ae{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
+        /* Self-contained footer CSS. Deliberately NOT using the Elementor
+           e-con/e-flex classes here — those pull flex-direction, widths,
+           and background from CSS custom properties in kit.css that kept
+           silently overriding the layout. Everything below is !important
+           so nothing external can hijack it again. */
+        .pf-footer{
+          background-color:#01003D !important;
+        }
+        .pf-footer .pf-inset{
+          max-width:1620px;
+          margin:0 auto;
+          padding:0 24px;
+        }
+        .pf-footer .pf-widgets-row{
+          display:flex !important;
+          flex-direction:row !important;
+          flex-wrap:wrap !important;
+          justify-content:space-between !important;
+          align-items:flex-start !important;
+          gap:40px;
+          max-width:1620px;
+          margin:0 auto;
+          padding:64px 24px 48px;
+        }
+        .pf-footer .pf-about-col{
+          flex:1 1 0;
+        }
+        .pf-footer .pf-links-col{
+          flex:0 0 240px;
+        }
+        .pf-footer .pf-heading-red{
+          color:#ED1C24 !important;
+        }
+        .pf-footer .pf-copyright-line{
+          width:100%;
+          border-top:1px solid rgba(255,255,255,0.12);
+        }
+        .pf-footer .pf-copyright-inner{
+          max-width:1620px;
+          margin:0 auto;
+          padding:22px 24px;
+        }
+        /* contact bar — 3 equal, evenly-spaced, centered cells (own classes,
+           not fighting the theme's .footer-contact-wrap/.footer-contact) */
+        .pf-footer .pf-contact-wrap{
+          display:flex;
+          width:100%;
+        }
+        .pf-footer .pf-contact-cell{
+          flex:1 1 0;
+          display:flex;
+          align-items:center;
+          justify-content:center;
+          gap:16px;
+          padding:0 24px;
+          text-align:left;
+        }
+        .pf-footer .pf-contact-divider{
+          width:1px;
+          align-self:stretch;
+          background-color:#ddd;
+        }
+        /* guarantee the About paragraph fills its column no matter what
+           .about-text's own max-width is set to elsewhere in the theme CSS */
+        .pf-footer .about-text{
+          max-width:none !important;
+          width:100% !important;
+        }
       `}</style>
-      <div className="elementor elementor-1098" data-elementor-id="1098" data-elementor-type="wp-post">
-        <div className="elementor-element elementor-element-6bbd41e e-con-full e-flex e-con e-parent" data-e-type="container" data-element_type="container" data-id="6bbd41e">
 
-          {/* Footer widgets */}
+      {/* Contact bar — white rounded card, own classes for guaranteed 3-cell centering */}
-          <div className="elementor-element elementor-element-953ab14 e-flex e-con-boxed e-con e-child" data-e-type="container" data-element_type="container" data-id="953ab14">
+      <div className="pf-inset">
-            <div className="e-con-inner">
+        <div className="footer-contact-area">
-              {[
+          <div className="pf-contact-wrap" style={{ padding: '20px 40px' }}>
-                {
+            {CONTACT_INFO.map((c, i) => (
-                  title: 'Get in Touch',
+              <div key={i} style={{ display: 'contents' }}>
-                  content: (
+                {i > 0 && <div className="pf-contact-divider"></div>}
+                <div className="pf-contact-cell">
+                  <div className="box-icon"><i className={c.icon}></i></div>
+                  <div className="media-body">
+                    {c.title && <p className="box-title" style={{ fontSize: 12, color: '#888', marginBottom: 4 }}>{c.title}</p>}
+                    <p className="box-text">
+                      <a href={c.link} {...(c.target ? { target: c.target, rel: 'noopener noreferrer' } : {})}>{c.text}</a>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Footer widgets — Get in Touch + Useful Links, same row, About column wide */}
+      <div className="pf-widgets-row">
+        <div className="pf-about-col">
           <div className="footer-widget">
             <div className="widget widget_about">
               <div className="th-widget-about">
@@ -64,7 +133,7 @@ export default function Footer() {
                 <p className="about-text" style={{ color: '#f5f5f5', lineHeight: 1.8 }}>
                   Profen Engineering LLC is a leading multidisciplinary engineering and construction company based in Dubai, UAE. With years of expertise, we deliver comprehensive MEP, building contracting, metal fabrication, interior fit-out, landscaping, and misting solutions.
                 </p>
-                          <div className="th-widget-social">
+                <div className="th-social">
                   {SOCIAL_LINKS.map((s, i) => (
                     <a key={i} href={s.url} target="_blank" rel="noopener noreferrer"><i className={s.icon}></i></a>
                   ))}
@@ -72,64 +141,11 @@ export default function Footer() {
               </div>
             </div>
           </div>
-                  ),
-                },
-                {
-                  title: 'Contact Info',
-                  content: (
-                    <div className="footer-widget">
-                      <div className="widget widget_contact">
-                        <h3 className="widget_title" style={{ color: '#ED1C24' }}>Contact Info</h3>
-                        <div className="th-widget-contact">
-                          {CONTACT_INFO.map((c, i) => (
-                            <div key={i} className="contact-feature">
-                              <div className="icon-btn"><i className={c.icon}></i></div>
-                              <div className="media-body">
-                                {c.label && <p className="box-label" style={{ color: '#aaa', margin: 0, fontSize: 12 }}>{c.label}</p>}
-                                <p className="box-text" style={{ margin: 0 }}><a href={c.link} {...(c.target ? { target: c.target, rel: 'noopener noreferrer' } : {})} style={{ color: '#fff' }}>{c.text}</a></p>
         </div>
-                            </div>
+
-                          ))}
+        <div className="pf-links-col">
-                        </div>
-                      </div>
-                    </div>
-                  ),
-                },
-                {
-                  title: 'Services 1',
-                  content: (
           <div className="widget widget_nav_menu footer-widget">
-                      <h3 className="widget_title" style={{ color: '#ED1C24' }}>Our Services</h3>
+            <h3 className="widget_title pf-heading-red">Useful Links</h3>
-                      <div className="menu-all-pages-container">
-                        <ul className="menu">
-                          {FOOTER_SERVICES_1.map((item, i) => (
-                            <li key={i} className="menu-item"><Link to={item.path}>{item.label}</Link></li>
-                          ))}
-                        </ul>
-                      </div>
-                    </div>
-                  ),
-                },
-                {
-                  title: 'Services 2',
-                  content: (
-                    <div className="widget widget_nav_menu footer-widget">
-                      <h3 className="widget_title" style={{ color: '#ED1C24' }}>More Services</h3>
-                      <div className="menu-all-pages-container">
-                        <ul className="menu">
-                          {FOOTER_SERVICES_2.map((item, i) => (
-                            <li key={i} className="menu-item"><Link to={item.path}>{item.label}</Link></li>
-                          ))}
-                        </ul>
-                      </div>
-                    </div>
-                  ),
-                },
-                {
-                  title: 'Useful Links',
-                  content: (
-                    <div className="widget widget_nav_menu footer-widget">
-                      <h3 className="widget_title" style={{ color: '#ED1C24' }}>Useful Links</h3>
             <div className="menu-all-pages-container">
               <ul className="menu style2">
                 {FOOTER_LINKS.map((item, i) => (
@@ -138,51 +154,15 @@ export default function Footer() {
               </ul>
             </div>
           </div>
-                  ),
-                },
-              ].map((section, i) => (
-                <div key={i} className={`elementor-element elementor-element-${['c5d6f05', '8e3fc7b', 'c7fa0b1', 'a684744', '66137ae'][i] || 'extra'} e-con-full e-flex e-con e-child`} data-e-type="container" data-element_type="container" data-id={['c5d6f05', '8e3fc7b', 'c7fa0b1', 'a684744', '66137ae'][i] || 'extra'}>
-                  <div className="elementor-element elementor-element-7a7bb64 elementor-widget elementor-widget-rakarabout" data-id="7a7bb64" data-element_type="widget" data-e-type="widget" data-widget_type="rakarabout.default">
-                    <div className="elementor-widget-container">
-                      {section.content}
-                    </div>
-                  </div>
-                </div>
-              ))}
-
-              {/* WhatsApp Chat Embed — replaced Elfsight widget with direct WhatsApp link */}
-              <div className="elementor-element elementor-element-32890cd elementor-widget elementor-widget-shortcode" data-e-type="widget" data-element_type="widget" data-id="32890cd" data-widget_type="shortcode.default">
-                <div className="elementor-widget-container">
-                  <div className="elementor-shortcode">
-                    <a
-                      href="https://wa.me/971564148980"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="footer-whatsapp-link"
-                      style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: '#25D366', textDecoration: 'none' }}
-                    >
-                      <i className="fab fa-whatsapp" style={{ fontSize: 20 }}></i>
-                      <span>Chat with us on WhatsApp</span>
-                    </a>
-                  </div>
-                </div>
-              </div>
         </div>
       </div>
 
-          {/* Copyright */}
+      {/* Copyright — full-width divider line, text inset from the edges */}
-          <div className="elementor-element elementor-element-d43fabc e-flex e-con-boxed e-con e-child" data-e-type="container" data-element_type="container" data-id="d43fabc">
+      <div className="pf-copyright-line">
-            <div className="e-con-inner">
+        <div className="pf-copyright-inner">
-              <div className="elementor-element elementor-element-ed6bb39 elementor-widget elementor-widget-html" data-e-type="widget" data-element_type="widget" data-id="ed6bb39" data-widget_type="html.default">
-                <div className="elementor-widget-container">
           <p className="copyright-text">Copyright <i className="fas fa-copyright"></i> 2026 <a href="/">Profen Engineering LLC</a>. All Rights Reserved.</p>
         </div>
       </div>
-            </div>
-          </div>
-
-        </div>
-      </div>
     </footer>
   )
 }

src/css/dynamic.css

@@ -3,7 +3,8 @@
 .th-menu-wrapper .mobile-logo img{width:180px;}
 .th-menu-wrapper .mobile-logo{background-color:var(--brand-navy, #0a004c);}
 .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);}
+.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 .container{position:relative;z-index:2;}
 .hero-style5 .sub-title2.sub{color:#fff !important;}

src/css/dynamic.css.bak

@@ -0,0 +1,169 @@
+:root{--icon-font:"Font Awesome 6 Free";--fa-style-family:"Font Awesome 6 Free";}
+.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);}
+.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);}
+.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 .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;}
+.slider-area .slider-arrow{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.2);color:#fff;border:none;cursor:pointer;transition:0.3s;font-size:18px;}
+.slider-area .slider-arrow:hover{background:var(--brand-primary, #FA2D39);}
+.slider-area .slider-controller{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:40px;}
+.slider-area .slider-pagination{display:flex;align-items:center;gap:6px;}
+.slider-area .slider-pagination button{width:12px;height:12px;border-radius:50%;border:none;background:#999;opacity:0.4;cursor:pointer;padding:0;transition:0.3s;}
+.slider-area .slider-pagination button.active{opacity:1;background:var(--brand-primary, #FA2D39);}
+
+.slider-wrap .slider-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.2);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  transition: 0.3s;
+  font-size: 18px;
+}
+.slider-wrap .slider-arrow:hover {
+  background: var(--brand-primary, #FA2D39);
+}
+
+/* Project section slider - light background, so arrows need dark colors */
+.elementor-element-46cde4a .slider-arrow {
+  background: rgba(0,0,0,0.08);
+  color: #333;
+}
+.elementor-element-46cde4a .slider-arrow:hover {
+  color: #fff;
+}
+
+.elementor-element-148606f .swiper-pagination-fraction .swiper-pagination-current {
+  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; }
+
+/* Tab menu spacing */
+.tab-menu2 {
+  justify-content: center;
+  margin-bottom: 40px;
+}
+
+/* ── Services Dropdown (2×4 grid, frosted glass) ── */
+.header-layout5 .main-menu ul.sub-menu {
+  min-width: 480px;
+  padding: 20px 24px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px 24px;
+  left: -30px;
+  background: rgba(16, 25, 64, 0.88);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+}
+.header-layout5 .main-menu ul.sub-menu li {
+  padding: 0;
+  margin: 0;
+}
+.header-layout5 .main-menu ul.sub-menu li a {
+  font-size: 14px;
+  font-weight: 400;
+  padding: 10px 14px;
+  color: rgba(255,255,255,0.85);
+  border-radius: 8px;
+  transition: background 0.2s, color 0.2s;
+  display: block;
+  letter-spacing: 0.3px;
+}
+.header-layout5 .main-menu ul.sub-menu li a:hover {
+  background: rgba(255,255,255,0.1);
+  color: #fff;
+  padding-left: 14px;
+}
+/* Remove the diamond icon that collides with text on hover */
+.header-layout5 .main-menu ul.sub-menu li a:before,
+.header-layout5 .main-menu ul.sub-menu li a:hover:before {
+  display: none;
+}
+
+/* ── MOBILE RESPONSIVE OVERRIDES ── */
+@media (max-width: 767px) {
+  /* === Header: reduce overlap and size === */
+  .header-layout5 { margin-bottom: 0 !important; }
+  .header-layout5 .menu-wrap { margin-left: 16px !important; margin-right: 16px !important; }
+  .header-layout5 .header-logo { transform: none !important; padding: 8px 0 !important; }
+  .header-layout5 .header-logo img { max-width: 140px !important; }
+  .header-layout5 .header-button { transform: none !important; padding-top: 8px !important; }
+  .th-header { z-index: 41; }
+
+  /* === All section containers: tighter spacing === */
+  .space, .space-top { padding-top: 40px !important; }
+  .space, .space-bottom { padding-bottom: 40px !important; }
+  .e-con-full, .e-con-boxed { --container-default-padding-top: 0px !important; --container-default-padding-bottom: 0px !important; }
+  .title-area { margin-bottom: 16px !important; }
+  .sec-title { font-size: 22px !important; margin-bottom: 10px !important; }
+  .sub-title, .sub-title2 { font-size: 13px !important; }
+  .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-title { font-size: 16px !important; }
+  .service-block .box-icon { width: 48px !important; height: 48px !important; font-size: 20px !important; }
+  .service-card { padding: 16px !important; }
+  .service-card .box-number { font-size: 36px !important; }
+  .service-grid { padding: 16px !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; }
+
+  /* === Brand/Sponsor === */
+  .brand-sec3 .brand-inner { margin-top: -24px !important; padding: 12px 8px !important; }
+  .brand-card img { max-height: 24px !important; width: auto !important; }
+
+  /* === Project cards === */
+  .project-card .box-content { padding: 10px !important; }
+  .project-card .box-title { font-size: 15px !important; }
+  .filter-menu { margin-bottom: 20px !important; gap: 4px !important; }
+  .filter-menu .tab-btn { font-size: 12px !important; padding: 4px 12px !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; }
+
+  /* === Contact === */
+  .contact-area { padding: 16px !important; }
+  .contact-form input, .contact-form textarea { font-size: 13px !important; }
+
+  /* === Buttons === */
+  .th-btn { font-size: 13px !important; padding: 10px 20px !important; }
+  .th-btn2 { font-size: 13px !important; padding: 10px 20px !important; }
+
+  /* === Images === */
+  img { max-width: 100% !important; height: auto !important; }
+  .box-img img { width: 100% !important; object-fit: cover !important; }
+  .elementor-widget-container { overflow: hidden; }
+
+  /* === Breadcrumb === */
+  .breadcumb-wrapper { padding: 40px 0 !important; }
+  .breadcumb-wrapper .breadcumb-title { font-size: 22px !important; }
+
+  /* === Service detail sidebar === */
+  .service-sidebar { padding: 12px !important; }
+}

src/css/theme-main.css

@@ -9250,14 +9250,32 @@ ul.comment-list:has(> .th-comment-item ~ .th-comment-item):first-child > .th-pos
 }
 .hero-5 .icon-box {
   position: absolute;
-  bottom: 32px;
+  bottom: 0;
-  right: 32px;
+  right: 0;
+  background: #fff;
+  border-radius: 32px 0 0 0;
+  padding: 24px 32px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 6;
   /* Extra small devices */
 }
+.hero-5 .icon-box .slider-arrow {
+  background-color: transparent;
+  border: 1px solid #101840;
+  color: #101840;
+}
+.hero-5 .icon-box .slider-arrow:hover {
+  background-color: var(--theme-color);
+  border-color: var(--theme-color);
+  color: #fff;
+}
 @media (max-width: 575px) {
   .hero-5 .icon-box {
-    right: 16px;
+    right: 0;
-    bottom: 16px;
+    bottom: 0;
+    padding: 16px 20px;
   }
 }
 .hero-5 .swiper-pagination-bullets {