/* Sbaya Mobile — About Us brand skin, v4.
   v3 fixed the major structural defects, but a second audit found: v3's
   padding override stacked on top of Elementor's own --padding-top var
   instead of replacing it, and the "kill the cyan wash" rule was a broad
   attribute selector ([data-settings*='background_background']) that
   also matched the Mission card (which carries that same attribute for
   an unrelated reason) and cancelled ITS OWN white card background —
   invisible today only because the page happens to be white anyway.
   Also removed a dead duplicate rule and tightened the wash-kill to the
   two sections it was actually meant for. */

.elementor-16857{
  --paper:#FAFAFC; --elev:#F1F2F6; --card:#FFFFFF;
  --line:#E5E6EC; --ink:#0F1115; --soft:#565E6B;
  --blue:#29ABE2; --cyan:#49E0FF;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
}

/* ---- Container width ---- */
.elementor-16857 .e-con-boxed{ max-width:none !important; }
.elementor-16857 .e-con-boxed > .e-con-inner,
.elementor-16857 .elementor-container{
  max-width:1440px !important;
  padding-left:clamp(24px,4vw,64px) !important;
  padding-right:clamp(24px,4vw,64px) !important;
}
/* Zero Elementor's own --padding-top/bottom var first — v3 added its
   padding on top of this instead of replacing it. */
.elementor-16857 > .elementor-element,
.elementor-16857 > section.elementor-section{
  --padding-top:0 !important; --padding-bottom:0 !important;
  padding-top:clamp(48px,7vw,80px) !important;
  padding-bottom:clamp(48px,7vw,80px) !important;
}

/* Hero */
.elementor-16857 .elementor-element-7dcb9f43{
  --padding-top:0 !important; --padding-bottom:0 !important;
  padding-top:64px !important; padding-bottom:64px !important;
}
@media(min-width:901px){
  .elementor-16857 .elementor-element-7dcb9f43{ padding-top:110px !important; }
}
.elementor-16857 .elementor-element-7dcb9f43 :is(h1,h2,h3){ color:#F5F6F8 !important; }
.elementor-16857 .elementor-element-7dcb9f43 p{ color:#95A0AD !important; }
.elementor-16857 .elementor-element-6e24cace > .elementor-widget-container{
  background:none !important; padding:0 !important; border-radius:0 !important;
}
.elementor-16857 .elementor-element-7dcb9f43 h3.elementor-heading-title{
  font-size:12px !important; font-weight:600 !important; letter-spacing:.1em !important;
  text-transform:uppercase !important; color:#BFE6FF !important;
  display:inline-flex !important; border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.08) !important; padding:7px 16px !important;
  border-radius:100px !important; margin-bottom:16px !important;
}
.elementor-16857 h1.elementor-heading-title{
  font-size:clamp(28px,3.6vw,46px) !important; font-weight:800 !important;
  line-height:1.1 !important; letter-spacing:-0.02em !important;
}

.elementor-16857 p{ color:var(--soft); }

/* Kill the cyan background wash — scoped to the two sections it was
   actually meant for, not every element carrying a background_background
   setting (that broad match also hit the Mission card and cancelled its
   own white background by coincidence). */
.elementor-16857 .elementor-element-c511fa5{
  background-color:var(--paper) !important;
}

/* The "Grade A+ Direct-Imported iPhones..." section (e9292e0) was left
   on Elementor's own mid-grey background with dark text — 2.14:1
   contrast, confirmed unreadable. Made it a real dark section
   (matching the homepage's alternating light/dark rhythm) with white
   text, per Sir's direct instruction, instead of fighting for a light
   background that never resolved to the right shade. */
.elementor-16857 .elementor-element-e9292e0{
  background-color:var(--ink) !important;
  --padding-top:56px !important; --padding-bottom:56px !important;
  padding-top:56px !important; padding-bottom:56px !important;
}
/* Specificity note: a later generic rule
   (.elementor-heading-title.elementor-size-default:not(h1):not(h3)) has
   TWO :not() pseudo-classes, giving it (0,3,2) specificity — higher than
   a plain (0,3,0) section-scoped rule even with !important on both,
   since ties between equally-important rules are broken by specificity,
   not just !important status. Adding .elementor-widget-heading to the
   chain here bumps this to (0,4,0), which wins outright. This is why
   the white text never actually rendered despite being deployed. */
.elementor-16857 .elementor-element-e9292e0 .elementor-widget-heading :is(h1,h2,h3,.elementor-heading-title){
  color:#FFFFFF !important;
}
.elementor-16857 .elementor-element-e9292e0 p{ color:#B6BFC9 !important; }

/* The closing CTA section (3b5b1778, a legacy Elementor section, not a
   container) was never touched at all — it's on Elementor's own already-
   dark kit background with the kit's own near-black text colour, same
   invisible-text problem, just untouched by me until now. */
.elementor-16857 .elementor-element-3b5b1778 .elementor-widget-heading :is(h1,h2,h3,.elementor-heading-title){
  color:#FFFFFF !important;
}
.elementor-16857 .elementor-element-3b5b1778 p{ color:#B6BFC9 !important; }

/* This section's own inner container was still capped at Elementor's
   1120px boxed width, leaving visible white gutters either side of an
   otherwise full-bleed dark section — the generic .elementor-container
   rule above should have already overridden this via !important, but
   evidently lost to something; targeting the exact element+child chain
   directly here removes any ambiguity. */
.elementor-16857 .elementor-element.elementor-element-3b5b1778 > .elementor-container{
  max-width:100% !important;
  padding-left:clamp(24px,4vw,64px) !important;
  padding-right:clamp(24px,4vw,64px) !important;
}

.elementor-16857 .elementor-heading-title{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
}
.elementor-16857 .elementor-heading-title.elementor-size-default:not(h1):not(h3){
  font-size:clamp(22px,2.6vw,32px) !important; font-weight:800 !important;
  line-height:1.2 !important; letter-spacing:-0.01em !important; margin-bottom:12px !important;
  color:var(--ink) !important;
}
.elementor-16857 .elementor-text-editor p{
  font-size:16px !important; line-height:1.65 !important; max-width:640px;
}

/* Vision/Mission — real card titles.
   FIX: 439853e is the "Vision" HEADING WIDGET, not the card container —
   that's why only the heading got boxed (tight white box, empty space
   below) while Mission's actual container (3596f76) rendered correctly
   with its own full-height card. The real Vision container is 5bdf0c3. */
.elementor-16857 .elementor-element-5bdf0c3,
.elementor-16857 .elementor-element-3596f76{
  background:var(--card) !important; border:1px solid var(--line) !important;
  border-width:1px !important; border-radius:14px !important;
  padding:28px !important; transition:background .2s ease;
}
.elementor-16857 :is(.elementor-element-5bdf0c3,.elementor-element-3596f76) h3.elementor-heading-title{
  font-size:19px !important; font-weight:700 !important; line-height:1.3 !important;
  text-transform:none !important; letter-spacing:normal !important;
  color:var(--ink) !important; border:0 !important; background:none !important;
  padding:0 !important; border-radius:0 !important; margin-bottom:10px !important;
  display:block !important;
}
.elementor-16857 :is(.elementor-element-5bdf0c3,.elementor-element-3596f76):hover{
  background:var(--elev) !important;
}

/* Closing CTA button */
.elementor-16857 .elementor-button{
  background:linear-gradient(100deg,var(--cyan),var(--blue)) !important;
  color:#02141F !important; border:none !important; border-radius:100px !important;
  padding:15px 28px !important; font-weight:700 !important; font-size:15px !important;
  transition:filter .2s ease, transform .2s ease;
}
.elementor-16857 .elementor-button:hover{ filter:brightness(1.1); transform:translateY(-1px); }

.elementor-16857 .elementor-invisible{ opacity:1 !important; animation:none !important; }

.elementor-16857 :is(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--cyan) !important; outline-offset:2px !important;
  box-shadow:0 0 0 4px rgba(41,171,226,.2) !important;
}

@media(max-width:900px){
  .elementor-16857 > .elementor-element,
  .elementor-16857 > section.elementor-section{ padding-top:32px !important; padding-bottom:32px !important; }
}