Compare commits
4 Commits
b60987323e
...
4ccf898068
| Author | SHA1 | Date | |
|---|---|---|---|
| 4ccf898068 | |||
| a3cb825878 | |||
| bab5f508fb | |||
| 5b31247e50 |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -2,3 +2,6 @@ node_modules/
|
|||||||
dist/
|
dist/
|
||||||
.env
|
.env
|
||||||
*.local
|
*.local
|
||||||
|
|
||||||
|
CHANGES.md
|
||||||
|
deploy.yml
|
||||||
|
|||||||
50
index.html
50
index.html
@@ -7,9 +7,57 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&display=swap" rel="stylesheet" />
|
||||||
|
<style>
|
||||||
|
/* Preloader */
|
||||||
|
#preloader {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 999999;
|
||||||
|
background: #101840;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: opacity 0.4s ease, visibility 0.4s ease;
|
||||||
|
}
|
||||||
|
#preloader.loaded {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.preloader-inner {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.preloader-logo {
|
||||||
|
height: 80px !important;
|
||||||
|
width: auto !important;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.preloader-spinner {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.15);
|
||||||
|
border-top: 3px solid #ED1C24;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
animation: preloader-spin 0.8s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes preloader-spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<!-- Preloader -->
|
||||||
|
<div id="preloader">
|
||||||
|
<div class="preloader-inner">
|
||||||
|
<img src="/assets/images/logo_pe-Rd-Wh-70.png" alt="Profen" class="preloader-logo" width="249" height="80" />
|
||||||
|
<div class="preloader-spinner"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="root"></div>
|
||||||
<script defer src="/wp-includes/js/jquery/jquery.min.js"></script>
|
<script defer src="/wp-includes/js/jquery/jquery.min.js"></script>
|
||||||
<script defer src="/wp-content/themes/rakar/assets/js/bootstrap.min.js"></script>
|
<script defer src="/wp-content/themes/rakar/assets/js/bootstrap.min.js"></script>
|
||||||
<script defer src="/wp-content/themes/rakar/assets/js/main.js"></script>
|
<script defer src="/wp-content/themes/rakar/assets/js/main.js"></script>
|
||||||
|
|||||||
17
src/App.jsx
17
src/App.jsx
@@ -1,3 +1,4 @@
|
|||||||
|
import { useEffect } from 'react'
|
||||||
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
|
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
|
||||||
import Layout from './components/Layout'
|
import Layout from './components/Layout'
|
||||||
import ErrorBoundary from './components/ErrorBoundary'
|
import ErrorBoundary from './components/ErrorBoundary'
|
||||||
@@ -8,6 +9,8 @@ import ServiceDetail from './pages/ServiceDetail'
|
|||||||
import Project from './pages/Project'
|
import Project from './pages/Project'
|
||||||
import Contact from './pages/Contact'
|
import Contact from './pages/Contact'
|
||||||
|
|
||||||
|
const PAGE_LOAD = performance.now()
|
||||||
|
|
||||||
function NotFound() {
|
function NotFound() {
|
||||||
return (
|
return (
|
||||||
<div style={{ padding: '120px 24px', textAlign: 'center' }}>
|
<div style={{ padding: '120px 24px', textAlign: 'center' }}>
|
||||||
@@ -19,6 +22,20 @@ function NotFound() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
|
useEffect(() => {
|
||||||
|
const el = document.getElementById("preloader")
|
||||||
|
if (!el) return
|
||||||
|
|
||||||
|
const elapsed = performance.now() - PAGE_LOAD
|
||||||
|
const minShow = 1500 // ms — let user perceive the brand
|
||||||
|
const delay = Math.max(0, minShow - elapsed)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
el.classList.add("loaded")
|
||||||
|
setTimeout(() => el.remove(), 500)
|
||||||
|
}, delay)
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<ErrorBoundary>
|
<ErrorBoundary>
|
||||||
|
|||||||
@@ -22,17 +22,19 @@ export default function WhatsAppButton() {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 24px;
|
bottom: 24px;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
z-index: 9999;
|
z-index: 9999999;
|
||||||
width: 56px;
|
width: 56px;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
display: flex;
|
display: flex !important;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
|
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
visibility: visible !important;
|
||||||
|
opacity: 1 !important;
|
||||||
}
|
}
|
||||||
.whatsapp-float:hover {
|
.whatsapp-float:hover {
|
||||||
transform: scale(1.08);
|
transform: scale(1.08);
|
||||||
@@ -48,6 +50,23 @@ export default function WhatsAppButton() {
|
|||||||
background: #ff3b30;
|
background: #ff3b30;
|
||||||
border: 2px solid #ffffff;
|
border: 2px solid #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.whatsapp-float {
|
||||||
|
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
|
||||||
|
right: calc(16px + env(safe-area-inset-right, 0px)) !important;
|
||||||
|
width: 52px !important;
|
||||||
|
height: 52px !important;
|
||||||
|
z-index: 9999999 !important;
|
||||||
|
display: flex !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
.whatsapp-float svg {
|
||||||
|
width: 26px !important;
|
||||||
|
height: 26px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ export default function AboutExpertise() {
|
|||||||
<img decoding="async" src="/assets/images/choose_feature_2.svg" alt="choose_feature_2" />
|
<img decoding="async" src="/assets/images/choose_feature_2.svg" alt="choose_feature_2" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="box-title"><a href="../about/index.html">OUR VISION</a></h3>
|
<h3 className="box-title"><a href="../about/index.html">OUR VISION</a></h3>
|
||||||
<p className="box-text">Be a top engineering solutions provider in the UAE, known for innovation and quality.heating, and misting systems.</p>
|
<p className="box-text">Be a top engineering solutions provider in the UAE, known for innovation and quality. Heating, and misting systems.</p>
|
||||||
<a href="../about/index.html" className="th-btn btn-sm th_btn">
|
<a href="../about/index.html" className="th-btn btn-sm th_btn">
|
||||||
Read More<i className="far fa-arrow-right ms-2"></i>
|
Read More<i className="far fa-arrow-right ms-2"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -59,7 +59,7 @@ export default function AboutIntro() {
|
|||||||
<div className="checklist">
|
<div className="checklist">
|
||||||
<ul>
|
<ul>
|
||||||
<li>Professional & Certified</li>
|
<li>Professional & Certified</li>
|
||||||
<li>Uncompromized Quality Check</li>
|
<li>Uncompromised Quality Check</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -104,7 +104,7 @@ export default function AboutIntro() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="media-body">
|
<div className="media-body">
|
||||||
<p className="box-label">Call Us</p>
|
<p className="box-label">Call Us</p>
|
||||||
<h6 className="box-link"><a href="tel:+971 4 320 0869">+971 4 320 0869</a></h6>
|
<h6 className="box-link"><a href="tel:+97143200869">+971 4 320 0869</a></h6>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ export default function HomeAbout() {
|
|||||||
About Us
|
About Us
|
||||||
</span>
|
</span>
|
||||||
<h2 className="sec-title">Building Future with Integrity</h2>
|
<h2 className="sec-title">Building Future with Integrity</h2>
|
||||||
<p>Profen Engineering, your trusted partner in comprehensive Sustainability, MEP &Construction Services. With a commitment to excellence, innovation, and client satisfaction, we stand as a beacon of reliability in the construction industry.</p>
|
<p>Profen Engineering, your trusted partner in comprehensive Sustainability, MEP & Construction Services. With a commitment to excellence, innovation, and client satisfaction, we stand as a beacon of reliability in the construction industry.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -95,7 +95,7 @@ export default function HomeAbout() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="media-body">
|
<div className="media-body">
|
||||||
<p className="box-label">Call Us</p>
|
<p className="box-label">Call Us</p>
|
||||||
<h6 className="box-link"><a href="tel: +97143200869"> +971 4 320 0869</a></h6>
|
<h6 className="box-link"><a href="tel:+97143200869"> +971 4 320 0869</a></h6>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -22,9 +22,9 @@ export default function HomeClients() {
|
|||||||
data-slider-options={JSON.stringify({
|
data-slider-options={JSON.stringify({
|
||||||
spaceBetween: 30,
|
spaceBetween: 30,
|
||||||
breakpoints: {
|
breakpoints: {
|
||||||
0: { slidesPerView: 1 },
|
0: { slidesPerView: 3 },
|
||||||
576: { slidesPerView: 2 },
|
576: { slidesPerView: 4 },
|
||||||
768: { slidesPerView: 3 },
|
768: { slidesPerView: 5 },
|
||||||
992: { slidesPerView: 4 },
|
992: { slidesPerView: 4 },
|
||||||
1200: { slidesPerView: 4 },
|
1200: { slidesPerView: 4 },
|
||||||
1300: { slidesPerView: 5 },
|
1300: { slidesPerView: 5 },
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ export default function HomeHero() {
|
|||||||
</h1>
|
</h1>
|
||||||
<p className="hero-text">Promist is a specialized brand, dedicated to delivering innovative, high-performance misting and evaporative cooling solutions.</p>
|
<p className="hero-text">Promist is a specialized brand, dedicated to delivering innovative, high-performance misting and evaporative cooling solutions.</p>
|
||||||
<div className="btn-group">
|
<div className="btn-group">
|
||||||
<Link to="/service/misting-solutions" className="th-btn rounded-12 style2 th_btn">Our All Services<i className="fas fa-arrow-right ms-2"></i></Link>
|
<Link to="/service/misting-solutions" className="th-btn rounded-12 style2 th_btn">View the service<i className="fas fa-arrow-right ms-2"></i></Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -32,7 +32,7 @@ export default function HomeHero() {
|
|||||||
</h1>
|
</h1>
|
||||||
<p className="hero-text">Designed for extreme climatic conditions, PRO-SHIELD enhances system efficiency while significantly reducing energy consumption.</p>
|
<p className="hero-text">Designed for extreme climatic conditions, PRO-SHIELD enhances system efficiency while significantly reducing energy consumption.</p>
|
||||||
<div className="btn-group">
|
<div className="btn-group">
|
||||||
<Link to="/service/adiabatic-pre-cooling-system" className="th-btn rounded-12 style2 th_btn">Our All Services<i className="fas fa-arrow-right ms-2"></i></Link>
|
<Link to="/service/adiabatic-pre-cooling-system" className="th-btn rounded-12 style2 th_btn">View the service<i className="fas fa-arrow-right ms-2"></i></Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -47,9 +47,9 @@ export default function HomeHero() {
|
|||||||
<span className="title1">Chill Out or Heat Up</span>
|
<span className="title1">Chill Out or Heat Up</span>
|
||||||
<span className="title2"><span className="text-theme">We've got Your </span> Perfect Solution</span>
|
<span className="title2"><span className="text-theme">We've got Your </span> Perfect Solution</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p className="hero-text">Our Heat and Chill pump can be used for heating or cooling swimming pool. spa or other tank water cooling System.</p>
|
<p className="hero-text">Our Heat and Chill pump can be used for heating or cooling swimming pool, spa or other tank water cooling system.</p>
|
||||||
<div className="btn-group">
|
<div className="btn-group">
|
||||||
<Link to="/service/chiller-hot-cool-solutions" className="th-btn rounded-12 style2 th_btn">Our All Services<i className="fas fa-arrow-right ms-2"></i></Link>
|
<Link to="/service/chiller-hot-cool-solutions" className="th-btn rounded-12 style2 th_btn">View the service<i className="fas fa-arrow-right ms-2"></i></Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -28,8 +28,9 @@ export default function HomePartners() {
|
|||||||
loop: true,
|
loop: true,
|
||||||
speed: 800,
|
speed: 800,
|
||||||
breakpoints: {
|
breakpoints: {
|
||||||
0: { slidesPerView: 2 },
|
0: { slidesPerView: 3 },
|
||||||
640: { slidesPerView: 3 },
|
480: { slidesPerView: 4 },
|
||||||
|
640: { slidesPerView: 5 },
|
||||||
992: { slidesPerView: 5 }
|
992: { slidesPerView: 5 }
|
||||||
}
|
}
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ export default function HomeProjects() {
|
|||||||
<div className="box-content">
|
<div className="box-content">
|
||||||
<p className="box-subtitle">Heating Solution</p>
|
<p className="box-subtitle">Heating Solution</p>
|
||||||
<h3 className="box-title"><a href="/project">Swimming Pool Heating</a></h3>
|
<h3 className="box-title"><a href="/project">Swimming Pool Heating</a></h3>
|
||||||
<p className="box-text">Heat Pumps – Energy-efficient heating for year-round pool comfort, Electric Heaters – Fast and precise temperature control,Solar Pool Heaters – Eco-friendly and cost-saving solutions</p>
|
<p className="box-text">Heat Pumps – Energy-efficient heating for year-round pool comfort, Electric Heaters – Fast and precise temperature control, Solar Pool Heaters – Eco-friendly and cost-saving solutions</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -130,7 +130,7 @@ export default function HomeProjects() {
|
|||||||
<div className="box-content">
|
<div className="box-content">
|
||||||
<p className="box-subtitle">Cooling Solution</p>
|
<p className="box-subtitle">Cooling Solution</p>
|
||||||
<h3 className="box-title"><a href="/project">Swimming Pool Cooling</a></h3>
|
<h3 className="box-title"><a href="/project">Swimming Pool Cooling</a></h3>
|
||||||
<p className="box-text">Pool Chillers – Lowers water temperature during hot summer months, Heat/Cool Pumps – Versatile solution for year-round temperature control,Energy-Efficient Pool Cooling Systems</p>
|
<p className="box-text">Pool Chillers – Lowers water temperature during hot summer months, Heat/Cool Pumps – Versatile solution for year-round temperature control, Energy-Efficient Pool Cooling Systems</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,9 +2,9 @@ import { Link } from "react-router-dom";
|
|||||||
|
|
||||||
const SERVICES = [
|
const SERVICES = [
|
||||||
{ slug: "adiabatic-pre-cooling-system", title: "Adiabatic Pre-Cooling System", img: "/assets/images/img-1.jpg", icon: "/assets/images/service_block_4.svg" },
|
{ slug: "adiabatic-pre-cooling-system", title: "Adiabatic Pre-Cooling System", img: "/assets/images/img-1.jpg", icon: "/assets/images/service_block_4.svg" },
|
||||||
{ slug: "misting-solutions", title: "Promist Misting Solutions", img: "/assets/images/IMG-9.jpg", icon: "/assets/images/why_feature_6.svg" },
|
{ slug: "misting-solutions", title: "Promist Misting Solutions", img: "/assets/images/IMG-9.jpg", icon: "/assets/images/why_feature_6.svg", external: true },
|
||||||
{ slug: "chiller-hot-cool-solutions", title: "Chiller Hot & Cool Solution", img: "/assets/images/IMG-4.jpg", icon: "/assets/images/title_icon2.svg" },
|
{ slug: "chiller-hot-cool-solutions", title: "Chiller Hot & Cool Solution", img: "/assets/images/IMG-4.jpg", icon: "/assets/images/title_icon2.svg" },
|
||||||
{ slug: "building-management-system", title: "Building Mngmt System", img: "/assets/images/bms.jpg", icon: "/assets/images/why_feature_2.svg" },
|
{ slug: "building-management-system", title: "Building Management System", img: "/assets/images/bms.jpg", icon: "/assets/images/why_feature_2.svg" },
|
||||||
{ slug: "interior-fit-out-works", title: "Interior & Fit-Out Work", img: "/assets/images/IMG-6.jpg", icon: "/assets/images/why_feature_1.svg" },
|
{ slug: "interior-fit-out-works", title: "Interior & Fit-Out Work", img: "/assets/images/IMG-6.jpg", icon: "/assets/images/why_feature_1.svg" },
|
||||||
{ slug: "building-contracting-works", title: "Building Contracting Works", img: "/assets/images/IMG-3.jpg", icon: "/assets/images/why_feature_3.svg" },
|
{ slug: "building-contracting-works", title: "Building Contracting Works", img: "/assets/images/IMG-3.jpg", icon: "/assets/images/why_feature_3.svg" },
|
||||||
{ slug: "metal-construction-fabrications", title: "Metal Construction & Fabrications", img: "/assets/images/IMG-2.jpg", icon: "/assets/images/why_feature_5.svg" },
|
{ slug: "metal-construction-fabrications", title: "Metal Construction & Fabrications", img: "/assets/images/IMG-2.jpg", icon: "/assets/images/why_feature_5.svg" },
|
||||||
@@ -53,7 +53,7 @@ export default function HomeServicesSection() {
|
|||||||
>
|
>
|
||||||
<div className="elementor-widget-container">
|
<div className="elementor-widget-container">
|
||||||
<div className="btn-wrapper">
|
<div className="btn-wrapper">
|
||||||
<Link className="th-btn th_btn style2 rounded-12" to="/contact">View All Services<i className="far fa-arrow-right"></i></Link>
|
<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>
|
</div>
|
||||||
@@ -68,13 +68,18 @@ export default function HomeServicesSection() {
|
|||||||
<div className="elementor-widget-container">
|
<div className="elementor-widget-container">
|
||||||
<div className="row gy-4">
|
<div className="row gy-4">
|
||||||
{SERVICES.map((s) => (
|
{SERVICES.map((s) => (
|
||||||
<div key={s.slug} className="col-xxl-3 col-lg-4 col-md-6">
|
<div key={s.slug} className="col-4 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">
|
||||||
<h3 className="box-title"><Link to={`/service/${s.slug}`}>{s.title}</Link></h3>
|
{s.external ? (
|
||||||
|
<a href="http://promist.profen.openexplorer.xyz" target="_blank" rel="noopener noreferrer">{s.title}</a>
|
||||||
|
) : (
|
||||||
|
<Link to={`/service/${s.slug}`}>{s.title}</Link>
|
||||||
|
)}
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,48 +1,89 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
export default function ContactForm({ heading, subtitle, style = 'default' }) {
|
export default function ContactForm({ heading, subtitle, style = 'default' }) {
|
||||||
const light = style === 'light'
|
const light = style === 'light'
|
||||||
const wrapperClass = light
|
const [form, setForm] = useState({ name: '', email: '', phone: '', subject: '', message: '' })
|
||||||
? 'input-light ajax-contact pb-30 pb-md-0'
|
|
||||||
: 'ajax-contact'
|
const handleChange = (e) => {
|
||||||
|
setForm(prev => ({ ...prev, [e.target.name]: e.target.value }))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
const { name, email, phone, subject, message } = form
|
||||||
|
const body = encodeURIComponent(
|
||||||
|
`Name: ${name}\nEmail: ${email}\nPhone: ${phone}\nSubject: ${subject}\n\n${message}`
|
||||||
|
)
|
||||||
|
const mailto = `mailto:info@profeng.ae?subject=${encodeURIComponent(subject || 'Contact Form')}&body=${body}`
|
||||||
|
window.location.href = mailto
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={wrapperClass}>
|
<div className={light ? 'input-light ajax-contact pb-30 pb-md-0' : 'ajax-contact'}>
|
||||||
{heading && <h2 className="sec-title">{heading}</h2>}
|
{heading && <h2 className="sec-title">{heading}</h2>}
|
||||||
<div className="wpcf7 no-js" id="wpcf7-f523-p48-o1" lang="en-US" dir="ltr" data-wpcf7-id="523">
|
<form onSubmit={handleSubmit}>
|
||||||
<div className="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p><ul></ul></div>
|
<div className="row">
|
||||||
<form action="/contact" method="post" className="wpcf7-form init" aria-label="Contact form" noValidate="noValidate" data-status="init">
|
<div className="form-group col-md-6">
|
||||||
<div className="row">
|
<span className="wpcf7-form-control-wrap">
|
||||||
<div className="form-group col-md-6">
|
<input
|
||||||
<span className="wpcf7-form-control-wrap"><input size="40" maxLength="400" className="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false" placeholder="Your Name" type="text" name="name" /></span>
|
className="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control"
|
||||||
{light ? <i className="fas fa-user"></i> : <i className="fal fa-user"></i>}
|
aria-required="true" placeholder="Your Name" type="text" name="name"
|
||||||
</div>
|
value={form.name} onChange={handleChange} required
|
||||||
<div className="form-group col-md-6">
|
/>
|
||||||
<span className="wpcf7-form-control-wrap"><input size="40" maxLength="400" className="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email form-control" aria-required="true" aria-invalid="false" placeholder="Email Address" type="email" name="email" /></span>
|
</span>
|
||||||
{light ? <i className="fas fa-envelope"></i> : <i className="fal fa-envelope"></i>}
|
{light ? <i className="fas fa-user"></i> : <i className="fal fa-user"></i>}
|
||||||
</div>
|
|
||||||
<div className="form-group col-md-6">
|
|
||||||
<span className="wpcf7-form-control-wrap"><input className="wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number form-control" aria-required="true" aria-invalid="false" placeholder="Phone Number" type="number" name="phone" /></span>
|
|
||||||
{light ? <i className="fas fa-phone"></i> : <i className="fal fa-phone"></i>}
|
|
||||||
</div>
|
|
||||||
<div className="form-group col-md-6">
|
|
||||||
<span className="wpcf7-form-control-wrap">
|
|
||||||
<select className="wpcf7-form-control wpcf7-select wpcf7-validates-as-required form-select nice-select" aria-required="true" aria-invalid="false" name="subject">
|
|
||||||
<option value="">Select Subject</option>
|
|
||||||
<option value="General Query">General Query</option>
|
|
||||||
<option value="Help Support">Help Support</option>
|
|
||||||
<option value="Sales Support">Sales Support</option>
|
|
||||||
</select>
|
|
||||||
</span>
|
|
||||||
{light ? <i className="fas fa-chevron-down"></i> : <i className="fal fa-chevron-down"></i>}
|
|
||||||
</div>
|
|
||||||
<div className="form-group col-12">
|
|
||||||
<span className="wpcf7-form-control-wrap"><textarea cols="40" rows="10" maxLength="2000" className="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false" placeholder="Your Message" name="message"></textarea></span>
|
|
||||||
{light ? <i className="fas fa-pencil"></i> : <i className="fal fa-pencil"></i>}
|
|
||||||
</div>
|
|
||||||
<div className="form-btn col-12">
|
|
||||||
<button className="th-btn">Send Message Now<i className="far fa-arrow-right ms-2"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
<div className="form-group col-md-6">
|
||||||
</div>
|
<span className="wpcf7-form-control-wrap">
|
||||||
|
<input
|
||||||
|
className="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email form-control"
|
||||||
|
aria-required="true" placeholder="Email Address" type="email" name="email"
|
||||||
|
value={form.email} onChange={handleChange} required
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
{light ? <i className="fas fa-envelope"></i> : <i className="fal fa-envelope"></i>}
|
||||||
|
</div>
|
||||||
|
<div className="form-group col-md-6">
|
||||||
|
<span className="wpcf7-form-control-wrap">
|
||||||
|
<input
|
||||||
|
className="wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number form-control"
|
||||||
|
aria-required="true" placeholder="Phone Number" type="tel" name="phone"
|
||||||
|
value={form.phone} onChange={handleChange} required
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
{light ? <i className="fas fa-phone"></i> : <i className="fal fa-phone"></i>}
|
||||||
|
</div>
|
||||||
|
<div className="form-group col-md-6">
|
||||||
|
<span className="wpcf7-form-control-wrap">
|
||||||
|
<select
|
||||||
|
className="wpcf7-form-control wpcf7-select wpcf7-validates-as-required form-select nice-select"
|
||||||
|
aria-required="true" name="subject"
|
||||||
|
value={form.subject} onChange={handleChange} required
|
||||||
|
>
|
||||||
|
<option value="">Select Subject</option>
|
||||||
|
<option value="General Query">General Query</option>
|
||||||
|
<option value="Help Support">Help Support</option>
|
||||||
|
<option value="Sales Support">Sales Support</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
{light ? <i className="fas fa-chevron-down"></i> : <i className="fal fa-chevron-down"></i>}
|
||||||
|
</div>
|
||||||
|
<div className="form-group col-12">
|
||||||
|
<span className="wpcf7-form-control-wrap">
|
||||||
|
<textarea
|
||||||
|
cols="40" rows="10" maxLength="2000"
|
||||||
|
className="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required form-control"
|
||||||
|
aria-required="true" placeholder="Your Message" name="message"
|
||||||
|
value={form.message} onChange={handleChange} required
|
||||||
|
></textarea>
|
||||||
|
</span>
|
||||||
|
{light ? <i className="fas fa-pencil"></i> : <i className="fal fa-pencil"></i>}
|
||||||
|
</div>
|
||||||
|
<div className="form-btn col-12">
|
||||||
|
<button className="th-btn" type="submit">Send Message Now<i className="far fa-arrow-right ms-2"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ const CONTACT_INFO = [
|
|||||||
|
|
||||||
const FOOTER_LINKS = [
|
const FOOTER_LINKS = [
|
||||||
{ label: 'About Profen Engineering', path: '/about' },
|
{ 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: 'Our Projects', path: '/project' },
|
||||||
{ label: 'Reach Us', path: '/contact' },
|
{ label: 'Reach Us', path: '/contact' },
|
||||||
]
|
]
|
||||||
@@ -97,6 +97,18 @@ export default function Footer() {
|
|||||||
max-width:none !important;
|
max-width:none !important;
|
||||||
width:100% !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>
|
`}</style>
|
||||||
|
|
||||||
{/* Contact bar — white rounded card, own classes for guaranteed 3-cell centering */}
|
{/* Contact bar — white rounded card, own classes for guaranteed 3-cell centering */}
|
||||||
|
|||||||
@@ -12,9 +12,9 @@ const NAV_ITEMS = [
|
|||||||
|
|
||||||
const SERVICE_SUBITEMS = [
|
const SERVICE_SUBITEMS = [
|
||||||
{ label: 'Adiabatic Pre-Cooling System', slug: 'adiabatic-pre-cooling-system' },
|
{ label: 'Adiabatic Pre-Cooling System', slug: 'adiabatic-pre-cooling-system' },
|
||||||
{ label: 'Promist Misting Solutions', slug: 'misting-solutions' },
|
{ label: 'Promist Misting Solutions', slug: 'misting-solutions', external: true },
|
||||||
{ label: 'Chiller Hot & Cool Solution', slug: 'chiller-hot-cool-solutions' },
|
{ label: 'Chiller Hot & Cool Solution', slug: 'chiller-hot-cool-solutions' },
|
||||||
{ label: 'Building Mngmt System', slug: 'building-management-system' },
|
{ label: 'Building Management System', slug: 'building-management-system' },
|
||||||
{ label: 'Interior & Fit-Out Work', slug: 'interior-fit-out-works' },
|
{ label: 'Interior & Fit-Out Work', slug: 'interior-fit-out-works' },
|
||||||
{ label: 'Building Contracting Works', slug: 'building-contracting-works' },
|
{ label: 'Building Contracting Works', slug: 'building-contracting-works' },
|
||||||
{ label: 'Metal Construction & Fabrications', slug: 'metal-construction-fabrications' },
|
{ label: 'Metal Construction & Fabrications', slug: 'metal-construction-fabrications' },
|
||||||
@@ -47,7 +47,7 @@ export default function Header() {
|
|||||||
<div className="th-menu-area text-center">
|
<div className="th-menu-area text-center">
|
||||||
<button className="th-menu-toggle"><i className="fas fa-times"></i></button>
|
<button className="th-menu-toggle"><i className="fas fa-times"></i></button>
|
||||||
<div className="mobile-logo">
|
<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>
|
||||||
<div className="th-mobile-menu">
|
<div className="th-mobile-menu">
|
||||||
<ul>
|
<ul>
|
||||||
@@ -62,7 +62,11 @@ export default function Header() {
|
|||||||
<ul className="sub-menu" style={{ display: mobileServicesOpen ? 'block' : 'none' }}>
|
<ul className="sub-menu" style={{ display: mobileServicesOpen ? 'block' : 'none' }}>
|
||||||
{SERVICE_SUBITEMS.map(s => (
|
{SERVICE_SUBITEMS.map(s => (
|
||||||
<li key={s.slug} className={`menu-item${pathname === `/service/${s.slug}` ? ' current-menu-item' : ''}`}>
|
<li key={s.slug} className={`menu-item${pathname === `/service/${s.slug}` ? ' current-menu-item' : ''}`}>
|
||||||
<Link to={`/service/${s.slug}`}>{s.label}</Link>
|
{s.external ? (
|
||||||
|
<a href="http://promist.profen.openexplorer.xyz" target="_blank" rel="noopener noreferrer">{s.label}</a>
|
||||||
|
) : (
|
||||||
|
<Link to={`/service/${s.slug}`}>{s.label}</Link>
|
||||||
|
)}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
@@ -127,7 +131,7 @@ export default function Header() {
|
|||||||
<div className="col">
|
<div className="col">
|
||||||
<div className="menu-wrap">
|
<div className="menu-wrap">
|
||||||
<div className="header-logo d-block d-lg-none">
|
<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>
|
</div>
|
||||||
<nav className="main-menu d-none d-lg-inline-block">
|
<nav className="main-menu d-none d-lg-inline-block">
|
||||||
<ul className="rakar-menu">
|
<ul className="rakar-menu">
|
||||||
@@ -140,7 +144,11 @@ export default function Header() {
|
|||||||
<ul className="sub-menu">
|
<ul className="sub-menu">
|
||||||
{SERVICE_SUBITEMS.map(s => (
|
{SERVICE_SUBITEMS.map(s => (
|
||||||
<li key={s.slug} className={`menu-item${pathname === `/service/${s.slug}` ? ' current-menu-item' : ''}`}>
|
<li key={s.slug} className={`menu-item${pathname === `/service/${s.slug}` ? ' current-menu-item' : ''}`}>
|
||||||
<Link to={`/service/${s.slug}`}>{s.label}</Link>
|
{s.external ? (
|
||||||
|
<a href="http://promist.profen.openexplorer.xyz" target="_blank" rel="noopener noreferrer">{s.label}</a>
|
||||||
|
) : (
|
||||||
|
<Link to={`/service/${s.slug}`}>{s.label}</Link>
|
||||||
|
)}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
@@ -160,9 +168,8 @@ export default function Header() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="col-auto d-none d-xl-block">
|
<div className="col-auto d-none d-xl-block">
|
||||||
<div className="header-button">
|
<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="http://promist.profen.openexplorer.xyz" target="_blank" rel="noopener noreferrer">
|
||||||
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,158 +0,0 @@
|
|||||||
import { Link } from "react-router-dom"
|
|
||||||
export default function ServicesHero() {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="elementor-element elementor-element-e471ccf e-flex e-con-boxed e-con e-parent"
|
|
||||||
data-id="e471ccf"
|
|
||||||
data-element_type="container"
|
|
||||||
data-e-type="container"
|
|
||||||
>
|
|
||||||
<div className="e-con-inner">
|
|
||||||
{/* Section Title */}
|
|
||||||
<div
|
|
||||||
className="elementor-element elementor-element-58994a2 elementor-widget__width-initial elementor-widget elementor-widget-rakarsectiontitle"
|
|
||||||
data-id="58994a2"
|
|
||||||
data-element_type="widget"
|
|
||||||
data-e-type="widget"
|
|
||||||
data-widget_type="rakarsectiontitle.default"
|
|
||||||
>
|
|
||||||
<div className="elementor-widget-container">
|
|
||||||
<div className="title-area text-center">
|
|
||||||
<span className="sub-title">
|
|
||||||
<img decoding="async" src="/assets/images/title_icon.svg" alt="Shape" />
|
|
||||||
Our Services
|
|
||||||
</span>
|
|
||||||
<h2 className="sec-title">What Services We Offer</h2>
|
|
||||||
<p>Welcome to Rakar renovation, we provide a robust synopsis for high level overviews. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Service Cards Grid */}
|
|
||||||
<div
|
|
||||||
className="elementor-element elementor-element-97218ac elementor-widget elementor-widget-rakarservice"
|
|
||||||
data-id="97218ac"
|
|
||||||
data-element_type="widget"
|
|
||||||
data-e-type="widget"
|
|
||||||
data-widget_type="rakarservice.default"
|
|
||||||
>
|
|
||||||
<div className="elementor-widget-container">
|
|
||||||
<div className="row gy-4">
|
|
||||||
<div className="col-xxl-3 col-lg-4 col-md-6">
|
|
||||||
<div className="service-card">
|
|
||||||
<div className="box-number">08</div>
|
|
||||||
<div className="box-icon">
|
|
||||||
<img decoding="async" src="/assets/images/price_1_3.svg" alt="price_1_3" />
|
|
||||||
</div>
|
|
||||||
<p className="box-subtitle">Service And Repairs</p>
|
|
||||||
<h3 className="box-title"><Link to="/service/adiabatic-pre-cooling-system">Adiabatic Pre-Cooling System</Link></h3>
|
|
||||||
<p className="box-text">Designed to optimize your cooling efficiency while reducing energy consumption.</p>
|
|
||||||
<Link to="/service/adiabatic-pre-cooling-system" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-xxl-3 col-lg-4 col-md-6">
|
|
||||||
<div className="service-card">
|
|
||||||
<div className="box-number">07</div>
|
|
||||||
<div className="box-icon">
|
|
||||||
<img decoding="async" src="/assets/images/price_1_1.svg" alt="price_1_1" />
|
|
||||||
</div>
|
|
||||||
<p className="box-subtitle">Service And Repairs</p>
|
|
||||||
<h3 className="box-title"><Link to="/service/misting-solutions">Misting Solutions</Link></h3>
|
|
||||||
<p className="box-text">We specialize in providing high-performance misting solutions designed to keep you cool.</p>
|
|
||||||
<Link to="/service/misting-solutions" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-xxl-3 col-lg-4 col-md-6">
|
|
||||||
<div className="service-card">
|
|
||||||
<div className="box-number">01</div>
|
|
||||||
<div className="box-icon">
|
|
||||||
<img decoding="async" src="/assets/images/service_card_2.svg" alt="service_card_2" />
|
|
||||||
</div>
|
|
||||||
<p className="box-subtitle">Service And Repairs</p>
|
|
||||||
<h3 className="box-title"><Link to="/service/electro-mechanical-works">Electro-Mechanical Works</Link></h3>
|
|
||||||
<p className="box-text">We, at Profen, specialize in comprehensive electro-mechanical solutions,..</p>
|
|
||||||
<Link to="/service/electro-mechanical-works" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-xxl-3 col-lg-4 col-md-6">
|
|
||||||
<div className="service-card">
|
|
||||||
<div className="box-number">02</div>
|
|
||||||
<div className="box-icon">
|
|
||||||
<img decoding="async" src="/assets/images/service_grid_1.svg" alt="service_grid_1" />
|
|
||||||
</div>
|
|
||||||
<p className="box-subtitle">Service And Repairs</p>
|
|
||||||
<h3 className="box-title"><Link to="/service/landscaping-fencing-works">Landscaping & Fencing</Link></h3>
|
|
||||||
<p className="box-text">Our expert team ensures exceptional design, durable materials,..</p>
|
|
||||||
<Link to="/service/landscaping-fencing-works" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-xxl-3 col-lg-4 col-md-6">
|
|
||||||
<div className="service-card">
|
|
||||||
<div className="box-number">03</div>
|
|
||||||
<div className="box-icon">
|
|
||||||
<img decoding="async" src="/assets/images/service_card_4.svg" alt="service_card_4" />
|
|
||||||
</div>
|
|
||||||
<p className="box-subtitle">Service And Repairs</p>
|
|
||||||
<h3 className="box-title"><Link to="/service/metal-construction-fabrications">Metal Construction & Fabrications</Link></h3>
|
|
||||||
<p className="box-text">We ensure superior craftsmanship, strength, and reliability in every...</p>
|
|
||||||
<Link to="/service/metal-construction-fabrications" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-xxl-3 col-lg-4 col-md-6">
|
|
||||||
<div className="service-card">
|
|
||||||
<div className="box-number">04</div>
|
|
||||||
<div className="box-icon">
|
|
||||||
<img decoding="async" src="/assets/images/service_card_7.svg" alt="service_card_7" />
|
|
||||||
</div>
|
|
||||||
<p className="box-subtitle">Service And Repairs</p>
|
|
||||||
<h3 className="box-title"><Link to="/service/building-contracting-works">Building Contracting Works</Link></h3>
|
|
||||||
<p className="box-text">We provide comprehensive building contracting services, delivering..</p>
|
|
||||||
<Link to="/service/building-contracting-works" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-xxl-3 col-lg-4 col-md-6">
|
|
||||||
<div className="service-card">
|
|
||||||
<div className="box-number">05</div>
|
|
||||||
<div className="box-icon">
|
|
||||||
<img decoding="async" src="/assets/images/service_card_3.svg" alt="service_card_3" />
|
|
||||||
</div>
|
|
||||||
<p className="box-subtitle">Service And Repairs</p>
|
|
||||||
<h3 className="box-title"><Link to="/service/interior-fit-out-works">Interior & Fit-Out Works</Link></h3>
|
|
||||||
<p className="box-text">You are looking to revamp a home, office, or commercial space,..</p>
|
|
||||||
<Link to="/service/interior-fit-out-works" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-xxl-3 col-lg-4 col-md-6">
|
|
||||||
<div className="service-card">
|
|
||||||
<div className="box-number">06</div>
|
|
||||||
<div className="box-icon">
|
|
||||||
<img decoding="async" src="/assets/images/service_card_8.svg" alt="service_card_8" />
|
|
||||||
</div>
|
|
||||||
<p className="box-subtitle">Service And Repairs</p>
|
|
||||||
<h3 className="box-title"><Link to="/service/chiller-hot-cool-solutions">Chiller Hot & Cool Solutions</Link></h3>
|
|
||||||
<p className="box-text">We specialize in providing advanced chiller systems for both heating and cooling</p>
|
|
||||||
<Link to="/service/chiller-hot-cool-solutions" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Divider */}
|
|
||||||
<div
|
|
||||||
className="elementor-element elementor-element-72617d9 elementor-widget-divider--view-line elementor-widget elementor-widget-divider"
|
|
||||||
data-id="72617d9"
|
|
||||||
data-element_type="widget"
|
|
||||||
data-e-type="widget"
|
|
||||||
data-widget_type="divider.default"
|
|
||||||
>
|
|
||||||
<div className="elementor-widget-container">
|
|
||||||
<div className="elementor-divider">
|
|
||||||
<span className="elementor-divider-separator"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -31,7 +31,7 @@ export default function Lightbox({ images, index, onClose }) {
|
|||||||
style={{
|
style={{
|
||||||
position: 'absolute', top: 20, right: 24,
|
position: 'absolute', top: 20, right: 24,
|
||||||
background: 'none', border: 'none', color: '#fff',
|
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"
|
aria-label="Close"
|
||||||
>×</button>
|
>×</button>
|
||||||
|
|||||||
@@ -1,4 +1,21 @@
|
|||||||
:root{--icon-font:"Font Awesome 6 Free";--fa-style-family:"Font Awesome 6 Free";}
|
: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;}
|
.header-logo .logo img{width:260px;}
|
||||||
.th-menu-wrapper .mobile-logo img{width:180px;}
|
.th-menu-wrapper .mobile-logo img{width:180px;}
|
||||||
.th-menu-wrapper .mobile-logo{background-color:var(--brand-navy, #0a004c);}
|
.th-menu-wrapper .mobile-logo{background-color:var(--brand-navy, #0a004c);}
|
||||||
@@ -103,7 +120,8 @@
|
|||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
/* === Header: reduce overlap and size === */
|
/* === Header: reduce overlap and size === */
|
||||||
.header-layout5 { margin-bottom: 0 !important; }
|
.header-layout5 { margin-bottom: 0 !important; }
|
||||||
.header-layout5 .menu-wrap { margin-left: 16px !important; margin-right: 16px !important; }
|
.header-layout5 .menu-wrap { margin-left: 16px !important; margin-right: 16px !important; margin-top: 16px !important;}
|
||||||
|
.menu-wrap .col { padding-top: 8px !important; }
|
||||||
.header-layout5 .header-logo { transform: none !important; padding: 8px 0 !important; }
|
.header-layout5 .header-logo { transform: none !important; padding: 8px 0 !important; }
|
||||||
.header-layout5 .header-logo img { max-width: 140px !important; }
|
.header-layout5 .header-logo img { max-width: 140px !important; }
|
||||||
.header-layout5 .header-button { transform: none !important; padding-top: 8px !important; }
|
.header-layout5 .header-button { transform: none !important; padding-top: 8px !important; }
|
||||||
@@ -119,34 +137,66 @@
|
|||||||
.box-title { font-size: 18px !important; }
|
.box-title { font-size: 18px !important; }
|
||||||
|
|
||||||
/* === Service cards === */
|
/* === 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 { padding: 16px !important; }
|
||||||
.service-card .box-number { font-size: 36px !important; }
|
.service-card .box-number { font-size: 36px !important; }
|
||||||
.service-grid { padding: 16px !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 cards === */
|
||||||
.counter-card .box-number { font-size: 28px !important; }
|
.counter-card .box-number { font-size: 28px !important; }
|
||||||
.counter-card .box-text { font-size: 14px !important; }
|
.counter-card .box-text { font-size: 14px !important; }
|
||||||
|
|
||||||
/* === Gallery === */
|
/* === 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/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 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 { margin-bottom: 20px !important; gap: 4px !important; }
|
||||||
.filter-menu .tab-btn { font-size: 12px !important; padding: 4px 12px !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 === */
|
||||||
.process-box { padding: 12px 36px 12px 12px !important; }
|
|
||||||
.process-box .box-title { font-size: 15px !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 === */
|
||||||
.contact-area { padding: 16px !important; }
|
.contact-area { padding: 16px !important; }
|
||||||
@@ -196,3 +246,872 @@
|
|||||||
right: 16px;
|
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;
|
||||||
|
}
|
||||||
|
/* Tab menu: force one row on mobile */
|
||||||
|
.tab-menu2 {
|
||||||
|
flex-wrap: nowrap !important;
|
||||||
|
gap: 6px !important;
|
||||||
|
}
|
||||||
|
.tab-menu2 .tab-btn {
|
||||||
|
font-size: 13px !important;
|
||||||
|
padding: 6px 14px !important;
|
||||||
|
line-height: 36px !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
border-radius: 20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 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 {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
.hero-5 .hero-inner {
|
||||||
|
height: 460px !important;
|
||||||
|
min-height: 460px !important;
|
||||||
|
max-height: 460px !important;
|
||||||
|
}
|
||||||
|
.hero-5 .swiper-slide {
|
||||||
|
height: 460px !important;
|
||||||
|
}
|
||||||
|
.hero-5 .swiper-wrapper {
|
||||||
|
height: 460px !important;
|
||||||
|
}
|
||||||
|
.hero-style5 {
|
||||||
|
padding: 70px 0 30px 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 */
|
||||||
|
[data-id="7e4b13e"] .brand-sec3 .brand-inner {
|
||||||
|
margin-right: 0 !important;
|
||||||
|
padding: 12px 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
[data-id="7e4b13e"] .brand-sec3 .brand-inner:before,
|
||||||
|
[data-id="7e4b13e"] .brand-sec3 .brand-inner:after {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HomePartners sponsor cloud: override margin-right to fill viewport */
|
||||||
|
[data-id="998ec08"] .brand-sec3 .brand-inner {
|
||||||
|
margin-right: 0 !important;
|
||||||
|
padding: 16px 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
[data-id="998ec08"] .brand-sec3 .brand-inner:before,
|
||||||
|
[data-id="998ec08"] .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: 80px !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: 180px !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
}
|
||||||
|
.service-block-new .service-bg {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
object-fit: cover !important;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.service-block-new .service-title {
|
||||||
|
font-size: 11px !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;
|
||||||
|
display: -webkit-box !important;
|
||||||
|
-webkit-line-clamp: 2 !important;
|
||||||
|
-webkit-box-orient: vertical !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
text-overflow: ellipsis !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
.service-block-new .service-title a {
|
||||||
|
color: #fff !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
[data-id="148606f"] .row {
|
||||||
|
--bs-gutter-y: 8px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ══════════════════════════════════════════════════════════════
|
||||||
|
WHATSAPP BUTTON: ensure always visible on all devices
|
||||||
|
══════════════════════════════════════════════════════════════ */
|
||||||
|
.whatsapp-float {
|
||||||
|
display: flex !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
z-index: 99999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.whatsapp-float {
|
||||||
|
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
|
||||||
|
right: calc(16px + env(safe-area-inset-right, 0px)) !important;
|
||||||
|
width: 52px !important;
|
||||||
|
height: 52px !important;
|
||||||
|
display: flex !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
z-index: 99999 !important;
|
||||||
|
}
|
||||||
|
.whatsapp-float svg {
|
||||||
|
width: 26px !important;
|
||||||
|
height: 26px !important;
|
||||||
|
}
|
||||||
|
.elementor-23 .elementor-element.elementor-element-fb76345 {
|
||||||
|
padding-top: 20px !important;
|
||||||
|
}
|
||||||
|
.elementor-23 .elementor-element.elementor-element-998ec08{
|
||||||
|
margin-bottom: 0px !important;
|
||||||
|
}
|
||||||
|
.elementor-23 .elementor-element.elementor-element-9ff3146 {
|
||||||
|
padding-bottom: 20px !important;
|
||||||
|
}
|
||||||
|
.footer-contact-area {
|
||||||
|
padding: 0px !important;
|
||||||
|
}
|
||||||
|
.call-btn {
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
.customer-box {
|
||||||
|
padding: 8px 19px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ══════════════════════════════════════════════════════════════
|
||||||
|
FIX 5: Hero Spacing — match hero-to-services gap with header-to-hero gap
|
||||||
|
The brand/sponsor section (HomeClients) already overlaps hero by 72px,
|
||||||
|
providing visual separation. Reduce services section padding-top to 0
|
||||||
|
so the total gap equals header-to-hero gap (~0px desktop, ~24px mobile).
|
||||||
|
══════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
|||||||
@@ -1,17 +1,26 @@
|
|||||||
import { useEffect } from 'react'
|
import { useEffect, useRef } from 'react'
|
||||||
import { useLocation } from 'react-router-dom'
|
|
||||||
|
|
||||||
export default function useLayoutInit() {
|
export default function useLayoutInit() {
|
||||||
const { pathname } = useLocation()
|
const initialized = useRef(false)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
// Dual guard: useRef + window.__rakarInit
|
||||||
|
// useRef protects against re-renders in same mount cycle
|
||||||
|
// window.__rakarInit protects against React 19 strict mode
|
||||||
|
// unmount/remount cycle where useRef may be reset
|
||||||
|
if (initialized.current) return
|
||||||
|
initialized.current = true
|
||||||
|
if (window.__rakarInit) return
|
||||||
let destroyed = false
|
let destroyed = false
|
||||||
let rafId = null
|
let rafId = null
|
||||||
|
|
||||||
function tryInit() {
|
function tryInit() {
|
||||||
if (destroyed) return false
|
if (destroyed) return false
|
||||||
if (typeof window.rakar_content_load_scripts === 'function') {
|
if (typeof window.rakar_content_load_scripts === 'function') {
|
||||||
window.rakar_content_load_scripts()
|
if (!window.__rakarInit) {
|
||||||
|
window.__rakarInit = true
|
||||||
|
window.rakar_content_load_scripts()
|
||||||
|
}
|
||||||
window.__layoutReady = true
|
window.__layoutReady = true
|
||||||
window.dispatchEvent(new Event('layout-ready'))
|
window.dispatchEvent(new Event('layout-ready'))
|
||||||
return true
|
return true
|
||||||
@@ -45,5 +54,5 @@ export default function useLayoutInit() {
|
|||||||
if (rafId) cancelAnimationFrame(rafId)
|
if (rafId) cancelAnimationFrame(rafId)
|
||||||
clearTimeout(fallback)
|
clearTimeout(fallback)
|
||||||
}
|
}
|
||||||
}, [pathname])
|
}, [])
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user