/* Clear Docs, global overrides */

/* ─── Blog card read-more arrow → white stroke ─────────────────────────────── */
.btn--readmore svg path { stroke: #fff !important; }

/* Brand colour reinforcement */
:root { --primary-color:#19823f; --secondary-color:#17283a; }

/* ─── PRIMARY BUTTONS (green bg) → white text & dot ───────────────────────
   Scoped to NON-full-width buttons so sidebar category pills are excluded    */
.btn:not(.btn-stroke):not(.full) span.pxl--btn-text { color: #fff !important; }
.btn:not(.btn-stroke).btn-circle::after  { background-color: #fff !important; }
.btn:not(.btn-stroke).btn-circle::before { background-color: #fff !important; }
/* On hover, white sweeping circle fills the btn → text flips to green */
.btn:not(.btn-stroke).btn-circle:hover span.pxl--btn-text { color: var(--primary-color) !important; }

/* ─── FORM SUBMIT BUTTON (.pxl-button-sbt) → white text ───────────────────
   The CF7 / Elementor form submit button uses a separate class that bypasses
   the span-based rule above. Force white text directly on the element. */
.pxl-button-sbt { color: #fff !important; }

/* ─── SIDEBAR CATEGORY PILLS → white box, black text ──────────────────── */
.btn.btn-default.full.justify-sb {
  background-color: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 50px !important;
  color: #17283a !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 0 20px !important;
  line-height: 48px !important;
}
.btn.btn-default.full.justify-sb span.pxl--btn-text {
  color: #17283a !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
}
.btn.btn-default.full.justify-sb i,
.btn.btn-default.full.justify-sb svg { color: var(--primary-color) !important; }
.btn.btn-default.full.justify-sb:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.btn.btn-default.full.justify-sb:hover span.pxl--btn-text,
.btn.btn-default.full.justify-sb:hover i { color: #fff !important; }

/* ─── SERVICE ACCORDION (green active card) → white everything ─────────── */
.pxl-box-list2 .pxl-item--inner.active .pxl-item--icon svg       { fill: #fff !important; stroke: #fff !important; }
.pxl-box-list2 .pxl-item--inner.active .pxl-item--icon svg path  { fill: #fff !important; stroke: #fff !important; }
.pxl-box-list2 .pxl-item--inner.active .pxl-item--icon svg circle,
.pxl-box-list2 .pxl-item--inner.active .pxl-item--icon svg rect,
.pxl-box-list2 .pxl-item--inner.active .pxl-item--icon svg line  { stroke: #fff !important; fill: none !important; }
.pxl-box-list2 .pxl-item--inner.active .pxl-item--icon i         { color: #fff !important; }
.pxl-box-list2 .pxl-item--inner.active .pxl-item--title,
.pxl-box-list2 .pxl-item--inner.active .pxl-item--title a,
.pxl-box-list2 .pxl-item--inner.active .pxl-item--desc,
.pxl-box-list2 .pxl-item--inner.active .pxl-post--large-content  { color: #fff !important; }
.pxl-box-list2 .pxl-item--inner.active .pxl-item--btn            { color: #fff !important; border-color: rgba(255,255,255,.4) !important; }

/* ─── WhatsApp floating CTA badge ─────────────────────────────────────── */
.pxl-wa-cta {
  display: inline-flex;
  align-items: center;
  position: fixed;
  bottom: 40px;
  left: 40px;
  z-index: 1001;
  background: #25D366;
  color: #fff !important;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 11px 18px;
  border-radius: 30px;
  text-decoration: none !important;
  line-height: 1em;
  animation: wa-pulse 1.4s infinite;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.pxl-wa-cta:hover,
.pxl-wa-cta:focus { background: #128C7E; color: #fff !important; }

@keyframes 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);  }
}

/* ─── Header logos ────────────────────────────────────────────────────────
   Elementor widget CSS (post-3095.css) sets max-height:36px, override so
   the logo renders at the intended height. */
.pxl-header-elementor-main .pxl-logo img {
  max-height: none !important;
  height: 64px !important;
  width: auto !important;
}
.pxl-header-elementor-sticky .pxl-logo img {
  max-height: none !important;
  height: 52px !important;
  width: auto !important;
}

/* ─── Overlay header "Get in touch" button → dark navy outline on white bg ─
   Homepage only (page-id-3093): transparent header over white hero.       */
.page-id-3093 .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn.btn-circle span.pxl--btn-text {
  color: var(--secondary-color) !important;
}
.page-id-3093 .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn.btn-circle::after,
.page-id-3093 .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn.btn-circle::before {
  background-color: var(--secondary-color) !important;
}
.page-id-3093 .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn.btn-circle:hover span.pxl--btn-text {
  color: #ffffff !important;
}

/* ─── Overlay header "Get in touch" button → white text on dark hero ──────
   All inner pages: transparent header sits on dark photo hero.            */
body:not(.page-id-3093) .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn span.pxl--btn-text {
  color: #ffffff !important;
}
body:not(.page-id-3093) .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn i,
body:not(.page-id-3093) .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn * {
  color: #ffffff !important;
}

/* ─── Sticky header "Get in touch" button → solid green ───────────────────
   Dark sticky-header background; green pill with white text stands out.   */
.pxl-header-elementor-sticky .pxl-button.pxl-atc-link .btn {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.pxl-header-elementor-sticky .pxl-button.pxl-atc-link .btn span.pxl--btn-text {
  color: #ffffff !important;
}
.pxl-header-elementor-sticky .pxl-button.pxl-atc-link .btn.btn-circle::after,
.pxl-header-elementor-sticky .pxl-button.pxl-atc-link .btn.btn-circle::before {
  background-color: #ffffff !important;
}
.pxl-header-elementor-sticky .pxl-button.pxl-atc-link .btn.btn-circle:hover span.pxl--btn-text {
  color: var(--primary-color) !important;
}

/* ─── Sticky header logo → same size as main header ───────────────────────*/
.pxl-header-elementor-sticky .pxl-logo img {
  height: 64px !important;
}

/* ─── Hide blank portfolio grid (images don't load in static version) ──── */
.pxl-portfolio-grid,
.pxl-grid-load-more { display: none !important; }

/* ─── Suppress remnant preloader ──────────────────────────────────────── */
#pxl-loadding { display: none !important; }

/* ─── Blog cards: ripples jQuery plugin sets img opacity:0 and creates a
   canvas overlay. In the static version (no live JS) this leaves blank
   spaces. Scope to .pxl-post--featured only so other ripple widgets
   (About section image, etc.) are unaffected.                          ── */
.pxl-post--featured canvas { display: none !important; }
.pxl-post--featured img {
  opacity: 1 !important;
  height: auto !important;
  width: 100% !important;
  display: block !important;
}

/* ─── White site background ────────────────────────────────────────────── */
body { background-color: #ffffff !important; }

/* ─── Hero section: white bg + suppress failed-video lavender overlay ────── */
/* 53f3db2 is the real hero container; it has a .webm video bg that won't
   load locally, leaving a lavender tint from the video element.              */
.elementor-element-53f3db2 {
  background-color: #ffffff !important;
}
.elementor-element-53f3db2 .elementor-background-video-container {
  display: none !important;
}

/* ─── "Why Choose" inner section: wewe.webp building as a faint backdrop ──
   Navy overlay keeps the architectural sketch subtle so white text reads.  */
.elementor-element-3a8e32d {
  background-image: linear-gradient(180deg, #17283a 0%, #17283a 34%, rgba(23,40,58,.90) 62%, rgba(23,40,58,.80) 100%), url(2026/05/wewe.webp) !important;
  background-size: cover, cover !important;
  background-position: center top, center bottom !important;
  background-repeat: no-repeat, no-repeat !important;
  background-color: #17283a !important;
}
/* Heading + sub-label → white (the "simple" highlight stays green) */
.elementor-element-3a8e32d .pxl-item--title,
.elementor-element-3a8e32d .pxl-item--title a,
.elementor-element-3a8e32d .pxl-item--subtext {
  color: #ffffff !important;
}
.elementor-element-3a8e32d .pxl-item--subtitle {
  border-color: rgba(255,255,255,.35) !important;
}

/* ─── Hero feature items (01 / 02 / 03): white numbers in green badges ───── */
.pxl-icon-box1.style-text .pxl-item--icon { color: #ffffff !important; }

/* ═══ Hero slider (Swiper), brand-green button + pre-init fallback ════════ */
.tp-hero-slider-area .tp-btn { background-color: #19823f !important; color: #ffffff !important; }
.tp-hero-slider-area .tp-btn .tp-btn-icon::before { background-color: #ffffff !important; }
.tp-hero-slider-area .tp-btn .tp-btn-icon svg { color: #19823f; }
/* Before Swiper initialises, show only the first slide (no vertical stack) */
.tp-hero-slider-active:not(.swiper-initialized) .swiper-wrapper { display: block; }
.tp-hero-slider-active:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; }
/* Green active pagination bullet */
.tp-hero-slider-pagination .swiper-pagination-bullet-active { background: #19823f; }

/* Hero title → match the Landor reference exactly (theme CSS was shrinking it
   to Poppins 33px; reference is Manrope 100px with a Playfair-italic span).  */
.tp-hero-slider-area .tp-hero-slider-title {
  font-family: "Manrope", sans-serif !important;
  font-size: 100px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}
.tp-hero-slider-area .tp-hero-slider-title span {
  font-family: "Playfair Display", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;   /* regular-weight italic, not bold (matches reference) */
  font-size: inherit !important;
}
@media (max-width:1399px){ .tp-hero-slider-area .tp-hero-slider-title{ font-size:85px !important; } }
@media (max-width:1199px){ .tp-hero-slider-area .tp-hero-slider-title{ font-size:72px !important; } }
@media (max-width:991px) { .tp-hero-slider-area .tp-hero-slider-title{ font-size:56px !important; } }
@media (max-width:767px) { .tp-hero-slider-area .tp-hero-slider-title{ font-size:44px !important; } }
/* Bottom "we are trusted" row → reference size (24px) */
.tp-hero-slider-area .tp-hero-slider-des { font-size: 24px !important; }
/* Mobile: the tagline (.tp-hero-slider-btn p) and the trust row (.tp-hero-slider-bottom) both
   use margin-0 utility classes and stack directly on top of each other once the row switches
   to display:inline-block at this breakpoint, add the missing gap back */
@media (max-width:767px) {
  .tp-hero-slider-area .tp-hero-slider-bottom { margin-top: 22px !important; }
  .tp-hero-slider-area .tp-hero-slider-des { display: block; margin-bottom: 6px !important; }
}

/* Gap between hero title and button row (scrape lacks the .pt-45 utility) */
.tp-hero-slider-area .tp-hero-slider-btn { padding-top: 45px !important; }

/* Hero slider height (reduced from 960px; nudged a little taller) */
.tp-hero-slider-area .tp-hero-slider-main {
  min-height: 730px !important;
  padding-top: 200px !important;
  padding-bottom: 60px !important;
}
@media (max-width:991px){
  .tp-hero-slider-area .tp-hero-slider-main { min-height: 560px !important; padding-top: 150px !important; }
}

/* ─── Replace ALL orange with brand green ──────────────────────────────────
   Override the template's orange CSS variable (hero pagination dots, agents,
   about-badge hover, etc.) plus the explicit Clear-Docs orange in one place. */
:root { --tp-orange-color: #19823f; }

/* ─── Blog cards: square images (were tall 431×585 portrait) ────────────── */
.pxl-post--featured {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
}
.pxl-post--featured img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ═══ Homepage header now overlays the DARK hero slider → match home-05:
   white menu + phone (were black, left over from the old white video hero),
   solid brand-green "Get in touch" button ═══════════════════════════════ */
.page-id-3093 .pxl-header-elementor-main .pxl-menu-primary > li > a,
.page-id-3093 .pxl-header-elementor-main .pxl-menu-primary > li > a .pxl-menu-item-text { color: #ffffff !important; }
.page-id-3093 .pxl-header-elementor-main .pxl-icon-box1 .pxl-item--title a { color: #ffffff !important; }
.page-id-3093 .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn.btn-circle { background-color: #19823f !important; border-color: #19823f !important; }
.page-id-3093 .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn.btn-circle span.pxl--btn-text { color: #ffffff !important; }
.page-id-3093 .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn.btn-circle::after,
.page-id-3093 .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn.btn-circle::before { background-color: #ffffff !important; }
.page-id-3093 .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn.btn-circle:hover span.pxl--btn-text { color: #19823f !important; }

/* ─── "Our Work" section: remove divider + collapse gap before marquee ───── */
.elementor-element-22b1f0c .elementor-widget-container {
  border-bottom: 0 !important;
  padding-bottom: 16px !important;
  margin-bottom: 0 !important;
}
.clr-docmarquee { padding-top: 8px !important; }
.elementor-element-22c817c > .e-con-inner { padding-top: 45px !important; padding-bottom: 30px !important; }

/* ─── "Why Choose" feature cards, green bg + white text + icon badge ─────
   Elementor's per-element background-color is in dynamic CSS that doesn't
   load in the static build, so we restore it here.                         */
.pxl-item-about-h1 {
  background: #19823f !important;
  border-radius: 16px !important;
}
.pxl-item-about-h1 .pxl-item--title,
.pxl-item-about-h1 .pxl-item--title a,
.pxl-item-about-h1 .pxl-item--subtitle,
.pxl-item-about-h1 .pxl-desc-content {
  color: #ffffff !important;
}
.pxl-item-about-h1 .pxl-desc-content { opacity: .9; }

/* Icon badge: semi-transparent white pill on the green card */
.pxl-item-about-h1 .elementor-repeater-item-7c80b60 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.18) !important;
}
.pxl-item-about-h1 .elementor-repeater-item-7c80b60 svg {
  stroke: #ffffff !important;
}

/* ─── Hero CTA buttons → two distinct colours ─────────────────────────────
   Primary:   "Get a free quote"        (8a4481f) → brand green (default)
   Secondary: "Send docs on WhatsApp"   (6fa6118) → dark navy               */
.elementor-element-6fa6118 .btn.btn-circle {
  background-color: var(--secondary-color) !important;
  border-color:     var(--secondary-color) !important;
}
.elementor-element-6fa6118 .btn.btn-circle span.pxl--btn-text { color: #ffffff !important; }
.elementor-element-6fa6118 .btn.btn-circle::after,
.elementor-element-6fa6118 .btn.btn-circle::before { background-color: #ffffff !important; }
.elementor-element-6fa6118 .btn.btn-circle:hover span.pxl--btn-text { color: var(--secondary-color) !important; }

/* ─── "Why Choose" section invisible button → green ────────────────────── */
.elementor-element-89fe3a4 .btn.btn-circle:not(.btn-stroke) {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.elementor-element-89fe3a4 .btn.btn-circle span.pxl--btn-text {
  color: #ffffff !important;
}
.elementor-element-89fe3a4 .btn.btn-circle::after,
.elementor-element-89fe3a4 .btn.btn-circle::before {
  background-color: #ffffff !important;
}
.elementor-element-89fe3a4 .btn.btn-circle:hover span.pxl--btn-text {
  color: var(--primary-color) !important;
}

/* ─── Green testimonial/stats card → all text white ───────────────────── */
.elementor-element-5e3903f * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.elementor-element-5e3903f .pxl-counter .pxl-counter--number { color: #ffffff !important; }

/* ─── About section sub-label chip → white (was green-on-green, invisible) */
.elementor-element-cd450c6 .pxl-item--subtext,
.elementor-element-cd450c6 .pxl-item--subtitle span { color: #ffffff !important; }

/* ─── About section heading → white on green background ──────────────── */
.elementor-element-cd450c6 h2.pxl-item--title,
.elementor-element-cd450c6 h2.pxl-item--title span,
.elementor-element-cd450c6 .pxl-item--title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
.elementor-element-cd450c6 .pxl-item--subtitle {
  border-color: rgba(255,255,255,0.4) !important;
  background-color: rgba(255,255,255,0.1) !important;
}

/* ─── About section → green background ─────────────────────────────────── */
.elementor-element-cd450c6:not(.elementor-motion-effects-element-type-background),
.elementor-element-cd450c6 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--primary-color) !important;
}
/* Counter numbers that were green on dark → white on green */
.elementor-element-cd450c6 .pxl-counter .pxl-counter--number,
.elementor-element-cd450c6 .pxl-counter--suffix { color: #ffffff !important; }
/* "Learn More" button on green bg → white outline style */
.elementor-element-cd450c6 .btn.btn-circle {
  border-color: rgba(255,255,255,0.6) !important;
}
.elementor-element-cd450c6 .btn.btn-circle span.pxl--btn-text { color: #ffffff !important; }
.elementor-element-cd450c6 .btn.btn-circle::after,
.elementor-element-cd450c6 .btn.btn-circle::before { background-color: #ffffff !important; }
.elementor-element-cd450c6 .btn.btn-circle:hover span.pxl--btn-text { color: var(--primary-color) !important; }

/* ─── Sidebar CTA "Contact us today" button → white text ───────────────── */
.elementor-element-daab2b1 .btn span.pxl--btn-text,
.elementor-element-daab2b1 .btn { color: #ffffff !important; }

/* ─── Testimonial/stats green section (about-us) → all text white ──────── */
.elementor-element-bf4dde6 * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ─── Footer brand block ────────────────────────────────────────────────── */
.clr-footer-brand { display: block; }
.clr-footer-brand a { display: inline-block; margin-bottom: 18px; }
.clr-footer-brand img { height: 80px; width: auto; display: block; }
.clr-footer-brand p { color: rgba(255,255,255,0.65); font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.8; margin: 0; max-width: 280px; }



/* ─── Footer container (72eccaf) → full solid green, no dark overlay ───────── */
.elementor-element-72eccaf:not(.elementor-motion-effects-element-type-background),
.elementor-element-72eccaf > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: none !important;
  background-color: #19823f !important;
}
.elementor-element-72eccaf::before {
  background-color: transparent !important;
}

/* ─── Hero heading highlight → green text only (no box) ──────────────────── */
.pxl-title--highlight {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: #19823f !important;
  color: #19823f !important;
  font-family: "Playfair Display", serif !important;
  font-style: italic !important;
}
/* ─── Service section icons: green badge on white bg cards ─────────────────── */
.pxl-post--inner .pxl-item--icon,
.pxl-post--large-content .pxl-item--icon {
  width: 64px !important;
  height: 64px !important;
  background: #19823f !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT SECTION, native Landor tp-about layout in Clear Docs colours
   Landor yellow (#D9D813) → Clear Docs green (#19823f); orange/navy on brand.
   Fonts (Manrope + Playfair italic) are inherited from main.css unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */
.tp-about-area {
  /* Remap the template's accent var → green: drives .tp-btn, the tagline
     highlight (.tp-about-border-text::before) and play-button hover.        */
  --tp-secoundery-color: #19823f;
  background: #ffffff;
  padding: 95px 0 110px;
}

/* Heading → navy, italic highlight stays navy to match the reference tone */
.tp-about-area .tp-section-title { color: #17283a; }
/* Italic highlight on white bg → green (per request) */
.tp-about-area .tp-section-title span { color: #19823f; }

/* About section: single image instead of the video/play panel */
.tp-about-area .clr-about-single { border-radius: 20px; overflow: hidden; min-height: 430px; height: 100%; }
.tp-about-area .clr-about-single img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; display: block; }

/* Hero badge: mr-30 utility missing from scrape → add gap manually */
.tp-hero-agents-2 .tp-hero-agents-img { margin-right: 30px !important; flex-shrink: 0 !important; }
/* Text stack: number + label clearly separated */
.tp-hero-agents-2-title {
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #17283a !important;
  margin: 0 0 6px !important;
  display: block !important;
}
.tp-hero-agents-content {
  display: block !important;
}
.tp-hero-agents-content p {
  margin: 0 !important;
  line-height: 1.4 !important;
  font-size: 15px !important;
  color: #6b7280 !important;
  display: block !important;
}

.tp-about-area .tp-section-sub-title { color: #374151; }

/* Badges, orange "Since" + light-grey "Documents", overlapping circles      */
.tp-about-area .clr-badge-orange { background-color: #19823f; }
.tp-about-area .clr-badge-orange .tp-about-badge-content,
.tp-about-area .clr-badge-orange .tp-about-badge-title { color: #ffffff; }
.tp-about-area .clr-badge-gray { background-color: #f1f1f1; }
.tp-about-area .clr-badge-gray .tp-about-badge-content,
.tp-about-area .clr-badge-gray .tp-about-badge-title { color: #17283a; }
.tp-about-area .clr-badge-plus { display: block; font-size: 22px; line-height: 1; }
.tp-about-area .clr-badge-label { display: block; font-size: 13px; font-weight: 500; opacity: .85; padding-top: 3px; }
/* Overlapping circles: flex the wrap (no Bootstrap util dependency)          */
.tp-about-area .tp-about-badge-wrap { display: flex; align-items: center; justify-content: flex-end; }
.tp-about-area .tp-about-badge-right { z-index: 2; }

/* Video panel, image + grey play panel side-by-side, no negative overflow   */
.tp-about-area .tp-about-video {
  display: flex;
  align-items: stretch;
  margin-left: 0;
  height: 430px;
}
.tp-about-area .tp-about-thumb {
  flex: 0 0 56%;
  overflow: hidden;
  border-radius: 10px 0 0 10px;
}
.tp-about-area .tp-about-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-about-area .tp-about-video-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
}
.tp-about-area .tp-about-play-title { color: #17283a; margin-top: 22px; }

/* Right column copy */
.tp-about-area .tp-about-content { padding-left: 45px; }
@media (max-width: 991px) { .tp-about-area .tp-about-content { padding-left: 0; margin-top: 40px; } }
.tp-about-area .tp-about-deg-border { padding-bottom: 35px; margin-bottom: 30px; }
.tp-about-area .tp-about-deg p { color: #6b7280; line-height: 1.85; }
/* Tagline → green highlighter marker behind the text                         */
.tp-about-area .tp-about-border-text { position: relative; z-index: 1; font-weight: 700; color: #17283a; }
.tp-about-area .tp-about-border-text::before {
  height: 13px;
  bottom: 1px;
  opacity: .30;
  background-color: #19823f;
}
.tp-about-area .tp-about-cta-deg { color: #6b7280; }
.clr-about-cta-row { margin-bottom: 0; }

/* Phone */
.tp-about-area .clr-cta-phone a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.tp-about-area .clr-phone-icon { width: 46px; height: 46px; border-radius: 50%; background: #f1f1f1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-about-area .clr-phone-num { font-weight: 700; color: #17283a; }

/* Marquee 3rd row, scrolls left at a different speed for visual variety */
.clr-docmarquee-row.clr-row3 { animation-name: clr-marquee-l !important; margin-top: 14px; animation-duration: 46s !important; }

/* CMS-managed inner page content ------------------------------------------- */
.clr-cms-content { padding: 48px 0 64px; max-width: 880px; }
.clr-cms-content h2 { font-family: Manrope,sans-serif; font-size: 30px; font-weight: 800; color: #17283a; margin: 0 0 18px; line-height: 1.2; }
.clr-cms-content h3 { font-size: 20px; font-weight: 700; color: #17283a; margin: 36px 0 10px; }
.clr-cms-content h4 { font-size: 16px; font-weight: 700; color: #19823f; margin: 22px 0 8px; }
.clr-cms-content p { font-size: 16px; line-height: 1.85; color: #374151; margin-bottom: 14px; }
.clr-cms-content ul, .clr-cms-content ol { margin: 0 0 18px 26px; }
.clr-cms-content li { font-size: 15px; color: #374151; margin-bottom: 7px; line-height: 1.65; }
.clr-cms-content a { color: #19823f; }
.clr-cms-content .clr-page-intro { font-size: 18px; font-weight: 500; color: #17283a; margin-bottom: 36px; border-left: 4px solid #19823f; padding-left: 20px; line-height: 1.6; }
.clr-cms-content .clr-page-cta { margin-top: 44px; }

/* ─── Services accordion: hide +/- toggle buttons, show all items open ─────── */
.tp-services-toggle { display: none !important; }
.accordion-collapse.collapse,
.accordion-collapse.collapse:not(.show) { display: block !important; height: auto !important; overflow: visible !important; }

/* Learn More pill, green bg, white text, white dot → green arrow on hover    */
.tp-about-area .tp-about-btn { padding-top: 36px; }
.tp-about-area .clr-about-btn { color: #ffffff; }
.tp-about-area .clr-about-btn .tp-btn-icon::before { background-color: #ffffff; }
.tp-about-area .clr-about-btn .tp-btn-icon svg { color: #19823f; }

/* ─── ALL PAGES: ensure transparent header overlays hero (not in flow) ─────
   Elementor per-page CSS on inner pages sets #pxl-header-elementor to
   position:relative which pushes content down and exposes the sticky header.
   Force absolute so header overlays the page hero consistently.             */
header#pxl-header-elementor {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
}
/* Sticky header: initially hidden; JS reveals it on scroll */
.pxl-header-elementor-sticky {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s, visibility .3s;
}
.pxl-header-elementor-sticky.pxl-sticky-active,
header.pxl-header-show .pxl-header-elementor-sticky {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Inner page nav text: white on transparent header (dark photo hero) */
body:not(.page-id-3093) .pxl-header-elementor-main .pxl-menu-primary > li > a,
body:not(.page-id-3093) .pxl-header-elementor-main .pxl-icon-box1 .pxl-item--title a {
  color: #ffffff !important;
}
body:not(.page-id-3093) .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn.btn-circle {
  background-color: #19823f !important;
  border-color: #19823f !important;
}
body:not(.page-id-3093) .pxl-header-elementor-main .pxl-button.pxl-atc-link .btn.btn-circle span.pxl--btn-text {
  color: #ffffff !important;
}

/* ─── Services section: green background instead of black ─────────────────── */
.tp-services-area {
  background: #19823f !important;
}
.tp-services-area .tp-section-sub-title-sec,
.tp-services-area .pxl-item--subtitle {
  color: rgba(255,255,255,0.75) !important;
}
.tp-services-area .tp-section-title h3,
.tp-services-area .tp-section-title h2,
.tp-services-area h3, .tp-services-area h2 {
  color: #ffffff !important;
}
.tp-services-area .tp-services-accordion-item,
.tp-services-area .tp-services-accordion-title {
  border-color: rgba(255,255,255,0.2) !important;
}
.tp-services-area .tp-services-accordion-title a,
.tp-services-area .tp-services-toggle-btn {
  color: #ffffff !important;
}
.tp-services-area .tp-btn-link,
.tp-services-area .tp-btn-link span {
  color: rgba(255,255,255,0.85) !important;
}
.tp-services-area .tp-services-accordion-item:hover .tp-services-accordion-title a,
.tp-services-area .tp-services-accordion-item.active .tp-services-accordion-title a {
  color: #ffffff !important;
}
/* Explore Services button on green bg */
.tp-services-area .tp-btn-circle,
.tp-services-area .pxl-button .btn {
  background: #ffffff !important;
  color: #19823f !important;
  border-color: #ffffff !important;
}
.tp-services-area .tp-btn-circle .tp-btn-inner span,
.tp-services-area .pxl-button .btn .pxl--btn-text {
  color: #19823f !important;
}
/* Service number labels */
.tp-services-area .tp-services-number {
  color: rgba(255,255,255,0.15) !important;
}

/* ─── Reduce vertical spacing between homepage sections ───────────────────── */
.tp-about-area {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.tp-services-area {
  margin: 20px 0 !important;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
/* CTA / Let's Talk section: tighten above */
.elementor-element-8e4d9e7 {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}
/* Blog section at bottom */
.elementor-element-bf514f1 {
  padding-top: 50px !important;
  padding-bottom: 60px !important;
}

/* ─── "Explore Services" button (.tp-btn-white): hover → white fill, green text ── */
.tp-btn-white:hover {
  background-color: #ffffff !important;
  color: #19823f !important;
}
.tp-btn-white:hover::before,
.tp-btn-white:hover::after {
  background-color: #ffffff !important;
}
.tp-btn-white:hover .tp-btn-text {
  color: #19823f !important;
}
.tp-btn-white:hover .tp-btn-icon::before {
  background-color: #19823f !important;
}
.tp-btn-white:hover .tp-btn-icon svg path {
  stroke: #19823f !important;
}

/* ─── PXL carousels: pxl-style.min sets .pxl-swiper-slider{opacity:0} then WP
   Swiper JS sets it to 1 on init. Without WP JS, carousels stay invisible.
   Force them visible so the blog carousel (and any other pxl carousel) shows. */
body:not(.elementor-editor-active) .pxl-swiper-slider { opacity: 1 !important; }

/* ─── Blog carousel slides: lift above white section background ───────────────
   pxl-style.min sets .pxl-swiper-slide{z-index:-1}; Swiper JS normally adds
   .swiper-slide-active (z-index:1) to the visible card. Without WP JS running,
   no card gets the active class and all slides render behind the bg (invisible).
   Setting z-index:0 makes them visible; layout falls back to a simple flex row. */
.pxl-swiper-slide { z-index: 0 !important; }

/* ─── Our Services page: section bg → white, cards white; hover → green ───── */
.page-our-services .tp-services-area { background: #ffffff !important; }
.page-our-services .tp-section-sub-title,
.page-our-services .tp-services-heading .tp-section-title h2,
.page-our-services .tp-services-heading h2,
.page-our-services .tp-services-heading span { color: #17283a !important; }

/* ─── Service card titles → dark navy, readable on white background ────────── */
.tpservices2__title, .tpservices2__title a { color: #17283a !important; }

/* ─── Common footer (.clr-ftr), self-contained reproduction of the original
   Landor footer (Elementor 1362). Loads on every page via clear-overrides.css,
   so the .html pages and the custom PHP pages render an identical green footer
   with NO dependency on Elementor/pxl-style CSS. ───────────────────────────── */
.clr-ftr {
  position: relative;
  margin: 0 20px 20px;
  border-radius: 20px;
  overflow: hidden;
  background: #111111;
  color: #fff;
}
.clr-ftr-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 95px 30px 45px;
  display: flex;
  flex-wrap: wrap;
  gap: 100px;
}
/* Brand block */
.clr-ftr-brand { flex: 1 1 300px; max-width: 360px; }
.clr-ftr-logo { display: inline-block; margin-bottom: 18px; }
.clr-ftr-logo img { height: 104px; width: auto; }
.clr-ftr-desc {
  color: rgba(255,255,255,0.65);
  font-size: 14px; line-height: 1.8;
  margin: 0 0 32px; max-width: 300px;
}
.clr-ftr-q {
  color: #fff; font-size: 28px; font-weight: 700;
  line-height: 1.2; margin: 0 0 18px;
}
.clr-ftr-contact {
  color: rgba(255,255,255,0.65);
  font-size: 19px; font-weight: 500; line-height: 1.4;
  margin: 0 0 28px;
}
.clr-ftr-contact a { color: rgba(255,255,255,0.65); text-decoration: underline; }
.clr-ftr-contact a:hover { color: #fff; }
/* Social icons, bordered squares */
.clr-ftr-social { display: flex; gap: 8px; }
.clr-ftr-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff; font-size: 13px; text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.clr-ftr-social a:hover { background: #19823f; border-color: #19823f; color: #fff; }
/* Link columns */
.clr-ftr-col { flex: 0 0 auto; }
.clr-ftr-h {
  color: rgba(255,255,255,0.65);
  font-size: 16px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; margin: 0 0 22px;
}
.clr-ftr-col ul { list-style: none; padding: 0; margin: 0; }
.clr-ftr-col li + li { margin-top: 20px; }
.clr-ftr-col a {
  color: #fff; font-size: 17px; font-weight: 600;
  text-decoration: none; transition: color .2s;
}
.clr-ftr-col a:hover { color: #8fd3a8; }
@media (max-width: 1200px) { .clr-ftr-inner { gap: 50px; } }
@media (max-width: 880px)  {
  .clr-ftr-inner { gap: 40px; padding: 55px 24px 40px; }
  .clr-ftr-brand { max-width: 100%; }
}

/* ─── "How to find us" office tabs+slider (contact page) ─────────────────────
   The pxl/Swiper gallery has no JS on this static build, so cleardocs.js wires
   it up and adds .clr-tabslider. These rules show ONE office slide at a time
   (wide card, like the original) and switch on tab click. Gated by the JS-added
   class, so if JS is absent the page degrades to the plain (visible) state.   */
.clr-tabslider .pxl-swiper-thumbs .pxl-swiper-wrapper { display: flex; flex-wrap: wrap; gap: 8px; }
.clr-tabslider .pxl-swiper-container { position: relative; }
.clr-tabslider .pxl-swiper-container .pxl-swiper-wrapper { display: block; }
.clr-tabslider .pxl-swiper-container .pxl-swiper-slide {
  display: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important;
}
.clr-tabslider .pxl-swiper-container .pxl-swiper-slide.clr-slide-active { display: block !important; }

/* ─── Service cards (.tpservices2) hover → brand green card ───────────────── */
.tpservices2 { transition: background-color 0.3s ease; }
.tpservices2:hover { background-color: #19823f !important; }
.tpservices2:hover .tpservices2__icon svg { color: #ffffff !important; }
.tpservices2:hover .tpservices2__icon svg path,
.tpservices2:hover .tpservices2__icon svg circle,
.tpservices2:hover .tpservices2__icon svg rect { fill: #ffffff !important; }
.tpservices2:hover .tpservices2__title a { color: #ffffff !important; }
.tpservices2:hover .tpservices2__content p { color: rgba(255,255,255,0.85) !important; }
.tpservices2:hover .tpservices2__btn {
  background-color: #ffffff !important;
  color: #19823f !important;
}
.tpservices2:hover .tpservices2__btn svg path { stroke: #19823f !important; }

/* ─── Service card icons rendered as Font Awesome glyphs ──────────────────── */
.tpservices2__icon i { font-size: 46px; line-height: 1; color: #19823f; }
.tpservices2:hover .tpservices2__icon i { color: #ffffff !important; }

/* ─── About-us FAQ "Our faq's" label pill, text was white (invisible) on the
   transparent pill. Make it dark/readable. Matched by element id (about-us only)
   AND data-text so it survives a re-scrape; won't touch the dark-bg "Let's Talk"
   pill which uses the same button classes. ─────────────────────────────────── */
.elementor-element-efb8994 .btn:not(.btn-stroke):not(.full) span.pxl--btn-text,
.btn:not(.btn-stroke):not(.full) span.pxl--btn-text[data-text="Our faq’s"] { color: #17283a !important; }

/* ─── Homepage "Why Choose Us", awards-style 3-card grid (self-contained) ────
   Replaces the old fragile creative scattered-card layout. No theme/main.css
   dependency, so it renders on the Elementor homepage. */
.clr-why { padding: 80px 0; }
.clr-why-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.clr-why-head { text-align: center; max-width: 660px; margin: 0 auto 55px; }
.clr-why-sub { display: inline-block; background: #f0fdf4; color: #19823f; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 6px 18px; border-radius: 20px; margin-bottom: 20px; }
.clr-why-title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: #17283a; line-height: 1.2; margin: 0; }
.clr-why-title span { color: #19823f; font-style: italic; }
.clr-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.clr-why-card { background: #f5f5f5; border-radius: 20px; overflow: hidden; text-align: center; padding-bottom: 32px; transition: transform .25s, box-shadow .25s; }
.clr-why-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.clr-why-thumb { position: relative; }
.clr-why-thumb img { width: 100%; height: 230px; object-fit: cover; display: block; }
.clr-why-badge { position: absolute; left: 50%; bottom: -32px; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; background: #19823f; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 8px 20px rgba(25,130,63,.35); }
.clr-why-card-title { font-size: 21px; font-weight: 700; color: #17283a; margin: 52px 24px 10px; }
.clr-why-card p { font-size: 14.5px; color: #6b7280; line-height: 1.7; margin: 0 24px; }
@media (max-width: 900px) { .clr-why-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

/* ─── Blog date badge, stacked day-over-month green square (template style) ── */
.clr-date-badge {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  background: #19823f; color: #fff; border-radius: 12px;
  min-width: 62px; padding: 9px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; box-shadow: 0 8px 18px rgba(25,130,63,.32);
}
.clr-date-badge b { font-size: 24px; font-weight: 800; letter-spacing: .5px; }
.clr-date-badge span { font-size: 13px; font-weight: 600; margin-top: 4px; text-transform: capitalize; }

/* ─── Rebrand: kill ALL leftover Landor yellow/orange accents → Clear Docs green ──
   main.css uses --tp-secoundery-color (#D9D813 yellow) in 98 places (buttons,
   hovers, badges, form focus…) and --tp-orange-color (#E6641C) for a few hovers.
   Overriding the tokens here (loaded after main.css) recolours them everywhere. */
:root {
  --tp-secoundery-color: #19823f;
  --tp-orange-color: #19823f;
}
/* The 3 hardcoded yellow gradient overlays in main.css (token can't reach them) */
.tp-linear-bg-4::after, .tp-linear-bg-7::after { background: linear-gradient(360deg, #19823f 0%, rgba(0,0,0,0) 64.42%) !important; }
.tp-linear-bg-6::after { background: linear-gradient(360deg, #19823f 0%, rgba(0,0,0,.55) 75%) !important; }

/* ─── Homepage "Our values" feature card (replaces the broken "Why Us" section) ──
   Self-contained (homepage runs on pxl/Elementor CSS, not main.css). FA6 icons
   are available site-wide via apply_global_shell. */
.clr-values { padding: 20px 0 70px; }
.clr-values-inner { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.clr-values-card { background: linear-gradient(135deg, #17283a 0%, #0f1c2b 100%); border-radius: 24px; padding: 66px 56px; display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start; }
.clr-values-head { flex: 1 1 320px; min-width: 280px; }
.clr-values-sub { display: inline-block; color: #19cf63; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; }
.clr-values-title { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; color: #fff; line-height: 1.22; margin: 0; text-transform: none; }
.clr-values-title span { color: #19cf63; font-style: italic; font-family: "Playfair Display", serif; }
.clr-values-grid { flex: 2 1 540px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.clr-value { padding: 26px 28px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.04); transition: background .25s, border-color .25s; }
.clr-value:hover { background: rgba(255,255,255,.07); border-color: rgba(25,207,99,.45); }
.clr-value-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.clr-value-icon { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; transition: background .25s, border-color .25s; }
.clr-value:hover .clr-value-icon { background: #19823f; border-color: #19823f; }
.clr-value-num { font-size: 15px; color: rgba(255,255,255,.45); font-weight: 600; }
.clr-value h3 { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.clr-value p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.62); margin: 0; }
@media (max-width: 900px) { .clr-values-grid { flex-basis: 100%; } .clr-values-card { padding: 40px 26px; } }
@media (max-width: 540px) { .clr-values-grid { grid-template-columns: 1fr; } .clr-value:nth-child(even) { border-left: none; } }

/* ─── Service cards (tpservices style), used for every "What we cover" grid ──
   Self-contained so it renders identically on page.php pages AND any future page. */
.clr-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.clr-svc { position: relative; overflow: hidden; border-radius: 20px; padding: 38px 34px; min-height: 250px; display: flex; align-items: flex-start; transition: transform .25s, box-shadow .25s; }
.clr-svc:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(23,40,58,.16); }
.clr-svc-back { position: absolute; right: -4px; bottom: -16px; font-size: 80px; font-weight: 800; line-height: 1; opacity: .07; pointer-events: none; white-space: nowrap; }
.clr-svc-body { position: relative; z-index: 1; }
.clr-svc-title { font-size: 21px; font-weight: 700; margin: 0 0 12px; line-height: 1.25; }
.clr-svc-desc { font-size: 14.5px; line-height: 1.7; margin: 0 0 22px; }
.clr-svc-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; text-decoration: none; }
.clr-svc-btn svg { transition: transform .25s; }
.clr-svc:hover .clr-svc-btn svg { transform: translateX(5px); }
.clr-svc--green { background: #19823f; color: #fff; }
.clr-svc--navy  { background: #17283a; color: #fff; }
.clr-svc--gray  { background: #f4f5f3; color: #17283a; }
/* explicit text colours, beat main.css's h3/p heading colours on the page.php pages */
.clr-svc--green .clr-svc-title, .clr-svc--navy .clr-svc-title { color: #fff; }
.clr-svc--gray  .clr-svc-title { color: #17283a; }
.clr-svc--green .clr-svc-desc, .clr-svc--navy .clr-svc-desc { color: rgba(255,255,255,.82); }
.clr-svc--gray  .clr-svc-desc { color: #5b626b; }
.clr-svc--green .clr-svc-btn, .clr-svc--navy .clr-svc-btn { color: #fff; }
.clr-svc--gray  .clr-svc-btn  { color: #19823f; }
@media (max-width: 900px) { .clr-svc-grid { grid-template-columns: 1fr; } .clr-svc { min-height: 0; } }

/* ─── Homepage hero feature cards (replace the old "trusted" band) ────────────
   Three tpfeature cards overlapping the hero bottom; middle card active = green
   via the --tp-secoundery-color token override, with white text for contrast. */
/* +10px (not the template's original -120px): the DB hero slides' trust-badges row
   ("We Are Trusted ... UAE Documentation Experts") sits ~100px taller than the template
   assumed, so -120px pulled the feature cards up over that text (measured: 100px overlap
   at every desktop width, 1400-1920px alike). +10px gives a clean visual gap below the
   trust-badges text instead of the cards touching/covering it. */
.clr-hero-features { position: relative; z-index: 6; margin-top: 10px; }
.clr-hero-features .tpfeature { box-shadow: 0 24px 60px rgba(13,23,34,.16); }
.tpfeature.active .tpfeature__title,
.tpfeature.active .tpfeature__deg,
.tpfeature:hover .tpfeature__title,
.tpfeature:hover .tpfeature__deg { color: #ffffff !important; }

/* Homepage "services meta" pills: text vanished on the white hover state
   (main.css turns the pill white but keeps white text). Force green text. */
.tp-services-meta span:hover { color: #19823f !important; border-color: transparent; }
/* -50px (was -70px): 7px overlap with the trust-badges text measured at 960px with the
   template's original value */
@media (max-width: 991px) { .clr-hero-features { margin-top: -50px; } }
@media (max-width: 767px) { .clr-hero-features { margin-top: 20px; } }

/* ─── Unify the page header (image heading) across ALL pages ──────────────────
   Every page, scraped (#pxl-page-title) and custom PHP (.clr-hero), uses the
   SAME architecture image (image-bg-abu.webp) with a subtle left-to-clear navy
   gradient, matching the Contact-page reference. */
#pxl-page-title-default,
#pxl-page-title-elementor > .elementor > .elementor-element {
  background-image: linear-gradient(90deg, rgba(13,23,34,.72) 0%, rgba(13,23,34,.34) 52%, rgba(13,23,34,.10) 100%), url('/wp-content/uploads/2026/04/image-bg-abu.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ─── Shared page hero for the custom PHP pages (careers, contact, page, blog,
   why-choose-us). Mirrors the scraped #pxl-page-title look: full-width image,
   divider line, breadcrumb, big white title. Rendered by render_page_hero(). */
.clr-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:480px;padding:150px 0 60px;background-size:cover;background-position:center;background-repeat:no-repeat;background-image:url('/wp-content/uploads/2026/04/image-bg-abu.webp')}
.clr-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,23,34,.74) 0%,rgba(13,23,34,.34) 52%,rgba(13,23,34,.10) 100%)}
.clr-hero-line{position:relative;z-index:2;width:100%;height:1px;background:rgba(255,255,255,.20);margin-bottom:34px}
.clr-hero-inner{position:relative;z-index:2;max-width:1290px;margin:0 auto;width:100%;padding:0 30px}
.clr-hero-bc{display:flex;align-items:center;gap:12px;color:#fff;font-size:15px;font-weight:500;margin-bottom:16px}
.clr-hero-bc a{color:#fff;text-decoration:none;opacity:.85}
.clr-hero-bc a:hover{opacity:1}
.clr-hero-bc .sep{opacity:.55}
.clr-hero-title{font-size:clamp(44px,7vw,88px);font-weight:800;color:#fff;line-height:1;margin:0;letter-spacing:-.01em}
@media(max-width:600px){.clr-hero{min-height:380px;padding:130px 0 44px}}

/* Contact "How to find us" office tabs, add a gap before the office card */
.clr-tabslider .pxl-swiper-thumbs { margin-bottom: 24px; }
/* Tab text only (not the office-card slides): inactive = black, active (green pill) = white */
.clr-tabslider .pxl-swiper-slide-thumb .pxl-item--title { color: #000 !important; }
.clr-tabslider .pxl-swiper-slide-thumb.swiper-slide-thumb-active .pxl-item--title { color: #fff !important; }

/* ─── Tighten the large between-section vertical spacing (homepage) ──────────
   Only the genuine section breathing-room paddings/margins, NOT the scattered
   "Why Choose Us" card offsets, which use big margins for their creative layout. */
/* "Let's Talk" right column, tighten the big gaps around the divider line
   (the text widget had 75px padding-bottom + 80px margin-bottom). */
.elementor-element-3272c36 > .elementor-widget-container {
  padding-bottom: 30px !important;
  margin-bottom: 30px !important;
}

.elementor-element-7ba1f71 { padding-top: 55px !important; padding-bottom: 55px !important; }
.elementor-element-3056a70 { padding-top: 55px !important; }
.elementor-element-9d2548a { padding-bottom: 55px !important; }
.elementor-element-e0bccfd { padding-bottom: 55px !important; }
.elementor-element-44d9b4f { margin-top: 45px !important; }

/* ── Single typeface: drop the Playfair Display italic accent; the green highlight
      words now use the same font (and weight) as the rest of their heading ── */
:root { --tp-playfair-font: "Manrope", sans-serif !important; }
.pxl-title--highlight,
.pxl-title-highlight,
.pxl-heading .pxl-title--highlight,
.pxl-item--title span,
.tp-section-title span,
.tp-hero-slider-area .tp-hero-slider-title span,
.tp-hero-title span,
.tp-hero-title-2 span,
.clr-values-title span {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

/* Blog carousel (index.php's initBlogCarousel): the theme's own base CSS sets
   .pxl-swiper-wrapper{display:flex;flex-wrap:wrap} for its no-JS grid fallback, which
   outranks Swiper's own .swiper-wrapper{flex-wrap:nowrap}, so slides wrapped into a
   cramped multi-row grid instead of sliding in a single row. */
.pxl-post-carousel1 .pxl-swiper-wrapper.swiper-wrapper { flex-wrap: nowrap !important; }

/* Blog carousel on mobile: the featured image was rendering at a fixed ~345px height
   (matching the full card width) rather than a compact size, making each card take
   over half the screen. Cap it down and tighten the surrounding spacing/type. */
@media (max-width: 767px) {
  /* .pxl-post--featured{aspect-ratio:1/1} (base rule, elsewhere in this file) was forcing
     width to match whatever height we set here since only one dimension was explicit;
     override the ratio itself so height:190px doesn't drag width down to a 190px square. */
  .pxl-post-carousel1 .pxl-post--featured { aspect-ratio: auto !important; width: 100% !important; height: 190px !important; max-height: 190px !important; }
  .pxl-post-carousel1 .pxl-post--featured img { width: 100% !important; height: 190px !important; max-height: 190px !important; aspect-ratio: auto !important; object-fit: cover !important; }
  .pxl-post-carousel1 .pxl-post--title { font-size: 16px !important; margin-top: 12px !important; }
  .pxl-post-carousel1 .pxl-post--title a { line-height: 1.35 !important; }
}