/* ═══════════════════════════════════════════════════════════════
Clear Docs UAE, Site CSS
Covers: header, sticky nav, footer, scroll-to-top, WhatsApp CTA
Fonts: Manrope + Playfair Display loaded via in
═══════════════════════════════════════════════════════════════ */
/* ─── HEADER ────────────────────────────────────────────────── */
#clr-header {
position: absolute;
top: 0; left: 0;
width: 100%;
z-index: 1001;
transition: background 0.3s, box-shadow 0.3s;
}
#clr-header.clr-sticky {
position: fixed;
background: #17283a;
box-shadow: 0 2px 20px rgba(0,0,0,0.18);
}
.clr-header-inner {
display: flex;
align-items: center;
max-width: 1620px;
margin: 0 auto;
padding: 0 40px;
height: 90px;
gap: 28px;
transition: height 0.3s;
}
#clr-header.clr-sticky .clr-header-inner { height: 70px; }
/* Logo */
.clr-logo { flex-shrink: 0; }
.clr-logo img {
height: 64px; width: auto; display: block;
transition: height 0.3s;
}
#clr-header.clr-sticky .clr-logo img { height: 52px; }
/* Nav */
.clr-nav-wrap { flex: 1; display: flex; justify-content: center; }
.clr-nav {
display: flex; align-items: center;
list-style: none; margin: 0; padding: 7px 14px; gap: 2px;
background: rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 50px;
}
/* on the solid navy sticky header the frosted pill needs a touch more contrast */
#clr-header.clr-sticky .clr-nav {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.1);
}
.clr-nav li a {
display: block;
padding: 8px 15px;
font-family: 'Manrope', sans-serif;
font-size: 15px;
font-weight: 600;
color: #ffffff;
text-decoration: none;
white-space: nowrap;
transition: color 0.2s;
letter-spacing: -0.01em;
}
/* Header nav: keep links white on hover/active (no green), active item just shows full-strength white */
.clr-nav li a:hover { color: #ffffff; opacity: .8; }
.clr-nav li a.active { color: #ffffff; }
/* ─── Service mega-menu dropdowns ─────────────────────────────── */
.clr-has-mega { position: relative; }
.clr-caret {
display: inline-block; width: 6px; height: 6px; margin-left: 6px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-1px); opacity: .75; transition: transform .2s;
}
.clr-has-mega:hover .clr-caret { transform: rotate(-135deg) translateY(2px); }
.clr-mega {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
padding-top: 16px; /* invisible bridge so hover survives the gap */
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .18s ease, transform .18s ease; z-index: 1002;
}
.clr-has-mega:hover .clr-mega {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.clr-mega ul {
list-style: none; margin: 0; padding: 10px;
min-width: 280px; max-height: 76vh; overflow-y: auto;
background: #ffffff; border-radius: 16px;
box-shadow: 0 26px 64px rgba(13,23,34,.24); border: 1px solid rgba(13,23,34,.06);
}
.clr-nav .clr-mega li { margin: 0; }
.clr-nav .clr-mega li a {
display: block; padding: 10px 16px;
font-size: 14px; font-weight: 600; color: #17283a; white-space: nowrap;
border-radius: 9px; opacity: 1; letter-spacing: -0.01em;
}
.clr-nav .clr-mega li a:hover { background: #f0fdf4; color: #19823f; opacity: 1; }
.clr-mega ul::-webkit-scrollbar { width: 8px; }
.clr-mega ul::-webkit-scrollbar-thumb { background: #d7dbd5; border-radius: 8px; }
/* Language switcher (EN ⇄ AR) */
.clr-lang-switch {
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; height: 36px; padding: 0 13px; margin-left: 14px;
border: 1px solid rgba(255,255,255,.32); border-radius: 30px;
color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
flex-shrink: 0; transition: background .2s, border-color .2s;
}
.clr-lang-switch:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); color: #fff; }
/* Phone */
.clr-header-phone {
display: flex; align-items: center; gap: 12px;
flex-shrink: 0; white-space: nowrap;
}
.clr-phone-icon {
width: 42px; height: 42px; border-radius: 50%;
background: #19823f;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.clr-phone-icon svg { width: 18px; height: 18px; color: #fff; }
.clr-header-phone a {
color: #ffffff;
font-family: 'Manrope', sans-serif;
font-size: 15px; font-weight: 700;
text-decoration: none;
}
/* CTA Button */
.clr-header-cta {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 10px;
background: #19823f;
color: #ffffff;
padding: 13px 22px;
border-radius: 50px;
font-family: 'Manrope', sans-serif;
font-size: 14px; font-weight: 700;
text-decoration: none;
border: 2px solid #19823f;
transition: background 0.25s, color 0.25s;
white-space: nowrap;
}
.clr-header-cta:hover { background: transparent; color: #19823f; }
.clr-header-cta-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #ffffff; flex-shrink: 0;
transition: background 0.25s;
}
.clr-header-cta:hover .clr-header-cta-dot { background: #19823f; }
/* Mobile hamburger */
.clr-hamburger {
display: none; flex-direction: column; gap: 5px;
cursor: pointer; border: none; background: none; padding: 4px; margin-left: auto;
}
.clr-hamburger span {
display: block; width: 24px; height: 2px;
background: #fff; border-radius: 2px; transition: all 0.3s;
}
.clr-mobile-nav-close { display: none; }
.clr-drawer-logo, .clr-drawer-cta { display: none; }
@media (max-width: 1199px) {
.clr-nav-wrap { display: none; }
.clr-header-phone { display: none; }
.clr-hamburger { display: flex; }
body.clr-mobile-nav-open { overflow: hidden; }
/* Full-screen mobile drawer: opened by toggling body.clr-mobile-nav-open (global-header.php's JS),
was previously an inline-style hack that only showed the wrapper without ever restyling the
inner for a vertical layout, so the desktop horizontal pill nav rendered as a single
overflowing row inside the overlay. */
body.clr-mobile-nav-open .clr-nav-wrap {
display: flex; flex-direction: column;
position: fixed; inset: 0; z-index: 9999;
background: #17283a; padding: 26px 24px 32px;
overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* Logo pinned at the top of the drawer so it reads as branded, not an empty panel */
.clr-drawer-logo { display: block; margin: 0 0 20px; }
.clr-drawer-logo img { height: 46px; width: auto; display: block; }
.clr-mobile-nav-close {
display: flex; align-items: center; justify-content: center;
position: absolute; top: 26px; right: 24px;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(255,255,255,.08); border: none; color: #fff; cursor: pointer; z-index: 1;
}
/* Call + WhatsApp quick actions at the bottom (header phone is hidden on mobile) */
.clr-drawer-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.clr-drawer-cta a {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 13px 16px; border-radius: 12px; font-size: 15px; font-weight: 600;
text-decoration: none; white-space: nowrap;
}
.clr-drawer-call { background: rgba(255,255,255,.08); color: #fff; }
.clr-drawer-wa { background: #19823f; color: #fff; }
.clr-nav {
display: flex; flex-direction: column; align-items: stretch; width: 100%;
background: none; border: none; padding: 0; gap: 0;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.clr-nav > li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); }
.clr-nav li a { white-space: normal; }
.clr-nav > li > a { display: flex; align-items: center; justify-content: space-between; padding: 17px 4px; font-size: 17px; }
.clr-caret { margin-left: 0; }
/* Mega submenu: tap-to-expand accordion instead of the desktop hover dropdown.
Also neutralise the desktop :hover rule, on touch a tap sticks :hover which
re-applied translateX(-50%) and shoved the open dropdown off the left edge. */
.clr-has-mega .clr-mega,
.clr-has-mega:hover .clr-mega {
position: static; transform: none; padding-top: 0;
opacity: 1; visibility: visible; pointer-events: none;
max-height: 0; overflow: hidden; transition: max-height .25s ease;
}
.clr-has-mega.clr-mega-open > a .clr-caret { transform: rotate(-135deg) translateY(2px); }
.clr-has-mega.clr-mega-open .clr-mega { pointer-events: auto; max-height: 1400px; }
/* .clr-nav .clr-mega li a{white-space:nowrap} (desktop, 2 classes+2 tags) outranks the
earlier ".clr-nav li a{white-space:normal}" mobile reset (1 class+2 tags) by specificity,
so it still applied here even under this media query, longer sub-menu labels like
"Opening Company Bank Account" stayed on one line and overflowed past the drawer edge.
Also drop the desktop min-width:280px, which has no business constraining a mobile
drawer that's already narrower than that on small phones. */
.clr-mega { left: auto; right: auto; width: 100%; }
.clr-mega ul { background: rgba(255,255,255,.06); box-shadow: none; border: none; max-height: none; margin: 4px 0 12px; min-width: 0; width: 100%; box-sizing: border-box; }
.clr-nav .clr-mega li a { color: #fff; font-size: 15px; white-space: normal; }
.clr-nav .clr-mega li a:hover { background: rgba(255,255,255,.08); color: #fff; }
}
@media (max-width: 767px) {
.clr-header-cta { display: none; }
.clr-header-inner { padding: 0 20px; }
}
/* ─── SCROLL-TO-TOP ─────────────────────────────────────────── */
.clr-scroll-top {
position: fixed; bottom: 40px; right: 30px; z-index: 999;
width: 44px; height: 44px; border-radius: 50%;
background: #17283a; color: #fff;
display: flex; align-items: center; justify-content: center;
text-decoration: none;
opacity: 0; visibility: hidden;
transition: opacity 0.3s, visibility 0.3s, background 0.2s;
}
.clr-scroll-top.visible { opacity: 1; visibility: visible; }
.clr-scroll-top:hover { background: #19823f; color: #fff; }
.clr-scroll-top svg { width: 14px; height: 14px; }
/* ─── WHATSAPP FLOATING CTA ─────────────────────────────────── */
.clr-wa-cta {
position: fixed; bottom: 40px; left: 40px; z-index: 1001;
display: inline-flex; align-items: center;
background: #25D366; color: #fff;
padding: 11px 18px; border-radius: 30px;
font-family: 'Manrope', sans-serif;
font-size: 14px; font-weight: 700;
text-decoration: none; letter-spacing: 0.3px;
animation: clr-wa-pulse 1.4s infinite;
transition: background 0.2s;
white-space: nowrap;
}
.clr-wa-cta:hover, .clr-wa-cta:focus { background: #128C7E; color: #fff; }
.clr-wa-cta svg { flex-shrink: 0; margin-right: 7px; }
/* Mobile: shrink to an icon-only circle so it covers far less content while scrolling, and
hold it hidden until a small scroll (140px, via #clrWaCta.visible in global-header.php's JS)
so it never sits over the hero/feature-card row on first paint */
@media (max-width: 767px) {
.clr-wa-cta { bottom: 16px; left: 16px; padding: 13px; border-radius: 50%; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s, background .2s; }
.clr-wa-cta.visible { opacity: 1; visibility: visible; }
.clr-wa-cta svg { margin-right: 0; }
.clr-wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}
@keyframes clr-wa-pulse {
0% { box-shadow: 0 0 0 0 rgba(37,211,102,.35); }
100% { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
}
/* ─── FOOTER ────────────────────────────────────────────────── */
#clr-footer {
background: #19823f;
padding: 64px 0 48px;
font-family: 'Manrope', sans-serif;
}
.clr-footer-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 32px;
display: grid;
grid-template-columns: 1.7fr 1fr 1fr 1fr;
gap: 48px;
align-items: start;
}
/* Brand column */
.clr-footer-brand-logo { display: inline-block; margin-bottom: 16px; }
.clr-footer-brand-logo img { height: 80px; width: auto; display: block; }
.clr-footer-brand-desc {
color: rgba(255,255,255,0.65);
font-size: 14px; line-height: 1.85; margin: 0 0 28px; max-width: 280px;
}
.clr-footer-questions h3 {
color: #fff; font-size: 22px; font-weight: 700;
margin: 0 0 10px; font-family: 'Manrope', sans-serif;
}
.clr-footer-questions p {
color: rgba(255,255,255,0.8); font-size: 14px; line-height: 1.85; margin: 0;
}
.clr-footer-questions a { color: #fff; text-decoration: none; }
.clr-footer-questions a:hover { text-decoration: underline; }
/* Social icons */
.clr-footer-social { display: flex; gap: 10px; margin-top: 24px; }
.clr-footer-social a {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 14px; text-decoration: none;
transition: background 0.2s;
}
.clr-footer-social a:hover { background: rgba(255,255,255,0.3); }
/* Link columns */
.clr-footer-col h6 {
color: #fff; font-size: 13px; font-weight: 700;
margin: 0 0 20px; letter-spacing: 0.08em; text-transform: uppercase;
}
.clr-footer-col ul { list-style: none; margin: 0; padding: 0; }
.clr-footer-col ul li { margin-bottom: 13px; }
.clr-footer-col ul li a {
color: rgba(255,255,255,0.75); font-size: 14px;
text-decoration: none; transition: color 0.2s;
}
.clr-footer-col ul li a:hover { color: #fff; }
@media (max-width: 991px) {
.clr-footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 575px) {
.clr-footer-inner { grid-template-columns: 1fr; }
}
/* ─── BLOG CAROUSEL mobile fix ───────────────────────────────────────────
The scraped theme gives .pxl-carousel-inner a negative `margin:0 -30px`
gutter (with a matching 30px padding on the swiper container) sized for the
wide desktop boxed container. On a phone that pushes the carousel ~60px past
the viewport, so the active blog card overflows and its left edge (date +
title) is clipped off-screen. Neutralise the gutter on small screens and
clip the container so exactly one card shows cleanly. */
@media (max-width: 767px) {
.pxl-post-carousel1 .pxl-carousel-inner { margin-left: 0 !important; margin-right: 0 !important; }
.pxl-post-carousel1 .pxl-carousel-inner .pxl-swiper-container { padding-left: 0 !important; padding-right: 0 !important; overflow: hidden; }
.pxl-post-carousel1 .pxl-swiper-slide { padding-left: 0 !important; padding-right: 0 !important; }
}
/* ─── RESPONSIVE MEDIA + MOBILE UX ───────────────────────────────────────
Foundational fluid-image reset was missing; images also carried fixed
desktop pixel dimensions that squashed/shrank on phones. Plus tap-target
and input-zoom hygiene for a cleaner mobile experience. */
img { max-width: 100%; } /* images never overflow their box */
@media (max-width: 767px) {
/* Content images scale to their container instead of holding desktop px sizes */
.pxl-post--featured img, .pxl-swiper-slide img,
.pxl-carousel-inner img, .pxl-post--image img { width: 100% !important; height: auto !important; }
/* 16px inputs stop iOS from auto-zooming the whole page when a field is focused */
input, select, textarea { font-size: 16px !important; }
/* Comfortable tap targets (Google recommends ~48px) */
a.btn, .btn, button, .clr-header-cta, .tp-btn-submit, .pxl-button-sbt,
.clr-nav > li > a, .clr-drawer-cta a { min-height: 44px; }
/* Slightly larger base body text for readability on small screens */
body { -webkit-text-size-adjust: 100%; }
}
/* ─── HOMEPAGE HERO responsive ───────────────────────────────────────────
Elementor pins the hero container (.elementor-element-3a8e32d) to
min-height:1176px with no mobile variant, so on a phone the banner is a
giant full-screen-plus block. Bring it down to a sensible height and
scale the headline. */
@media (max-width: 767px) {
.elementor-element-3a8e32d { --min-height: 520px !important; min-height: 520px !important; }
.tp-hero-slider-content { padding-top: 100px !important; padding-bottom: 56px !important; }
.tp-hero-slider-title { font-size: clamp(30px, 8vw, 40px) !important; line-height: 1.15 !important; }
.tp-hero-slider-btn { padding-top: 26px !important; }
}
@media (max-width: 480px) {
.elementor-element-3a8e32d { --min-height: 480px !important; min-height: 480px !important; }
}