/* ==========================================================================
   ProFocus — Global DARK theme layer (applies to ALL pages)
   Mirrors the palette from the reference code.html (Tailwind dark config):
     background / surface  : #111417  (page base #0b0e12)
     text (on-surface)     : #e2e2e2
     muted text            : #939393 / #c4c7c7
     accent teal           : #00f2ff
     glass panel           : rgba(255,255,255,0.03) + blur
   ========================================================================== */

:root{
  --pf-bg:#0b0e12;
  --pf-surface:#111417;
  --pf-surface-2:#191c20;
  --pf-surface-3:#1d2024;
  --pf-surface-high:#282a2b;
  --pf-text:#e2e2e2;
  --pf-text-muted:#c4c7c7;
  --pf-text-dim:#939393;
  --pf-accent:#00f2ff;
  --pf-border:rgba(255,255,255,.10);
  --pf-border-soft:rgba(255,255,255,.05);
}

/* -------- Base page surfaces -------- */
html{ background-color:var(--pf-bg); }
body{
  background-color:var(--pf-bg) !important;
  color:var(--pf-text);
}
/* Common theme content wrappers */
.site,
.site-content,
.site-main,
#content,
#primary,
.page-content,
.entry-content,
.hentry,
.hfeed{
  background-color:transparent;
  color:var(--pf-text);
}
/* Hello Elementor default single/page wrapper */
.page-header,
.entry-header{ color:var(--pf-text); }

/* -------- Typography & links -------- */
body,
p, li, span, dd, dt, blockquote, figcaption, cite, small{
  color:var(--pf-text);
}
h1, h2, h3, h4, h5, h6{ color:#ffffff; }
/* Muted secondary copy */
.entry-meta, .post-meta, .wp-block-post-date, time, .byline{
  color:var(--pf-text-dim);
}
/* Links pick up the teal accent (scoped away from Elementor-styled buttons) */
.entry-content a:not(.elementor-button):not(.wp-block-button__link),
.page-content a:not(.elementor-button):not(.wp-block-button__link),
#content a:not(.elementor-button):not(.wp-block-button__link){
  color:var(--pf-accent);
  text-decoration-color:rgba(0,242,255,.4);
}
.entry-content a:hover:not(.elementor-button):not(.wp-block-button__link),
.page-content a:hover:not(.elementor-button):not(.wp-block-button__link),
#content a:hover:not(.elementor-button):not(.wp-block-button__link){
  color:#68ebcf;
}
hr, .wp-block-separator{ border-color:var(--pf-border); }

/* -------- WordPress / theme chrome -------- */
/* Comments, widgets, sidebars that may appear on inner pages */
.widget, .wp-block-group, .comment-body, .comments-area{
  color:var(--pf-text);
}
.widget-title, .wp-block-heading{ color:#ffffff; }

/* Tables */
table, th, td{ border-color:var(--pf-border); color:var(--pf-text); }
thead th{ background-color:var(--pf-surface-3); }
tbody tr:nth-child(even){ background-color:rgba(255,255,255,.02); }

/* Code / pre blocks */
code, pre, kbd{
  background-color:var(--pf-surface-3);
  color:var(--pf-text);
  border:1px solid var(--pf-border-soft);
}

/* Pagination / buttons that are theme-native (not Elementor) */
.page-numbers, .nav-links a{
  color:var(--pf-text);
  border-color:var(--pf-border);
}
.page-numbers.current,
.page-numbers:hover, .nav-links a:hover{
  background-color:var(--pf-accent);
  color:#00363d;
}

/* -------- Elementor / JeKit surfaces -------- */
/* Default text color inside Elementor content on inner pages where the
   author did not set an explicit color. We keep this gentle (inherit-ish)
   so per-widget colors set in Elementor still win. */
.elementor-widget-text-editor,
.elementor-widget-theme-post-content,
.elementor-widget-heading:not([style*="color"]) .elementor-heading-title{
  color:var(--pf-text);
}
/* JeKit content blocks */
.jeg-elementor-kit .jkit-heading .jkit-heading-title,
.jeg_post_title, .jeg_post_excerpt p{
  color:var(--pf-text);
}
/* --------------------------------------------------------------
   Filled (solid teal) content buttons: force BLACK button text.
   Only the filled buttons on page content are targeted; outline
   buttons (transparent bg, e.g. CONTACT US = element 1013f8f) keep
   their teal text so they stay readable on the dark background, and
   the header/nav buttons are left untouched.
   -------------------------------------------------------------- */
.elementor[data-elementor-type="wp-page"] .elementor-element-7c20fd1 .elementor-button,
.elementor[data-elementor-type="wp-page"] .elementor-element-7c20fd1 .elementor-button .elementor-button-text,
.elementor[data-elementor-type="wp-page"] .elementor-element-3ffcd303 .elementor-button,
.elementor[data-elementor-type="wp-page"] .elementor-element-3ffcd303 .elementor-button .elementor-button-text,
.elementor[data-elementor-type="wp-page"] .elementor-element-70dfbbe7 .elementor-button,
.elementor[data-elementor-type="wp-page"] .elementor-element-70dfbbe7 .elementor-button .elementor-button-text{
  color:#000000 !important;
  fill:#000000 !important;
}

/* --------------------------------------------------------------
   GLOBAL EXPERTISE (Industries We Serve) + OUR CAPABILITIES
   (Production Services) icon-box cards: show a teal BORDER on hover.
   A transparent 1px border sits in the resting state so the layout
   never shifts; it turns teal (with a soft glow) on hover.
   -------------------------------------------------------------- */
.elementor[data-elementor-type="wp-page"] .elementor-element-2a0f4d29,
.elementor[data-elementor-type="wp-page"] .elementor-element-42af6538,
.elementor[data-elementor-type="wp-page"] .elementor-element-21e0a4a0,
.elementor[data-elementor-type="wp-page"] .elementor-element-57698901,
.elementor[data-elementor-type="wp-page"] .elementor-element-32e171d8,
.elementor[data-elementor-type="wp-page"] .elementor-element-3506bb77,
.elementor[data-elementor-type="wp-page"] .elementor-element-7c96093,
.elementor[data-elementor-type="wp-page"] .elementor-element-18319b9a,
.elementor[data-elementor-type="wp-page"] .elementor-element-1086f17,
.elementor[data-elementor-type="wp-page"] .elementor-element-4082f124,
.elementor[data-elementor-type="wp-page"] .elementor-element-2b4720f8,
.elementor[data-elementor-type="wp-page"] .elementor-element-51916a4b,
.elementor[data-elementor-type="wp-page"] .elementor-element-466141df,
.elementor[data-elementor-type="wp-page"] .elementor-element-15dc9c9e,
.elementor[data-elementor-type="wp-page"] .elementor-element-5eeb9af,
.elementor[data-elementor-type="wp-page"] .elementor-element-38bb9b22{
  border:1px solid transparent !important;
  border-radius:8px;
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease !important;
}
.elementor[data-elementor-type="wp-page"] .elementor-element-2a0f4d29:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-42af6538:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-21e0a4a0:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-57698901:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-32e171d8:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-3506bb77:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-7c96093:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-18319b9a:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-1086f17:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-4082f124:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-2b4720f8:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-51916a4b:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-466141df:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-15dc9c9e:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-5eeb9af:hover,
.elementor[data-elementor-type="wp-page"] .elementor-element-38bb9b22:hover{
  border-color:#00f2ff !important;
  box-shadow:0 0 18px -4px rgba(0,242,255,.35);
}

/* --------------------------------------------------------------
   HERO (element c75f81e) YouTube background video: hide every
   YouTube UI element so it reads as a clean video backdrop.
   1) block all interaction (no title/share/logo appearing on hover)
   2) scale the iframe up and center it, so YouTube's top chrome
      (title/channel) and bottom chrome (controls, watch-later,
      end-screen suggestions) are pushed OUTSIDE the visible frame,
      which the container clips with overflow:hidden.
   -------------------------------------------------------------- */
.elementor-element-c75f81e .elementor-background-video-container{
  overflow:hidden !important;
  pointer-events:none !important;
}
.elementor-element-c75f81e .elementor-background-video-embed,
.elementor-element-c75f81e .elementor-background-video-embed iframe,
.elementor-element-c75f81e iframe.elementor-background-video-embed{
  pointer-events:none !important;
  border:0 !important;
}
/* Oversize the video so YouTube's edge chrome is cropped away.
   200% width/height crops the top & bottom UI while showing more of
   the video than a heavier 300% zoom. */
.elementor-element-c75f81e .elementor-background-video-embed iframe,
.elementor-element-c75f81e iframe.elementor-background-video-embed{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:200% !important;
  height:200% !important;
  min-width:200% !important;
  min-height:200% !important;
  transform:translate(-50%,-50%) !important;
  max-width:none !important;
}

/* -------- HERO video: mobile (portrait) tuning --------
   On phones in portrait the flat 200% zoom crops into an awkward
   middle band. Instead, fill the hero's full HEIGHT with the
   16:9 embed (aspect-ratio) and center it: the video covers the
   section with no letterbox and no over-zoom, cropping evenly on
   the sides. Landscape phones keep the wide-screen 200% crop above. */
@media (max-width:767px) and (orientation:portrait){
  .elementor-element-c75f81e .elementor-background-video-embed iframe,
  .elementor-element-c75f81e iframe.elementor-background-video-embed{
    width:auto !important;
    height:150% !important;
    min-width:0 !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
  }
}

/* -------- Forms & inputs -------- */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select{
  background-color:var(--pf-surface-3);
  color:var(--pf-text);
  border:1px solid var(--pf-border);
}
input::placeholder, textarea::placeholder{ color:var(--pf-text-dim); }
input:focus, textarea:focus, select:focus{
  border-color:var(--pf-accent);
  outline:none;
  box-shadow:0 0 0 1px rgba(0,242,255,.35);
}
select option{ background-color:var(--pf-surface-3); color:var(--pf-text); }
label{ color:var(--pf-text-muted); }

/* Search field */
.search-field, .wp-block-search__input{
  background-color:var(--pf-surface-3);
  color:var(--pf-text);
  border:1px solid var(--pf-border);
}

/* --------------------------------------------------------------
   Video popup (lightbox) for the Dubai Horizon play button.
   -------------------------------------------------------------- */
/* Make the play button feel interactive (pointer + hover pop). */
.elementor-element-3c71ea78 a.elementor-icon{
  cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease;
}
.elementor-element-3c71ea78 a.elementor-icon:hover{
  transform:scale(1.08);
  box-shadow:0 0 32px -4px rgba(0,242,255,.55);
}

.pf-video-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(6,8,11,.88);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.pf-video-overlay.is-open{
  opacity:1;
  visibility:visible;
}
.pf-video-frame{
  position:relative;
  width:min(1100px, 92vw);
  aspect-ratio:16 / 9;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8),
             0 0 0 1px rgba(0,242,255,.25);
  transform:scale(.94);
  transition:transform .3s ease;
}
.pf-video-overlay.is-open .pf-video-frame{ transform:scale(1); }
.pf-video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.pf-video-close{
  position:absolute;
  top:-14px;
  right:-14px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:#00f2ff;
  color:#00363d;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px -4px rgba(0,0,0,.6);
  transition:transform .25s ease, background-color .25s ease;
}
.pf-video-close:hover{
  transform:scale(1.1) rotate(90deg);
  background:#68ebcf;
}
@media (max-width:640px){
  .pf-video-close{ top:8px; right:8px; }
}
@media (prefers-reduced-motion: reduce){
  .pf-video-overlay,
  .pf-video-frame,
  .pf-video-close,
  .elementor-element-3c71ea78 a.elementor-icon{
    transition:none !important;
  }
}