/* Page-scoped stylesheet for the new Offshore Secretary Services build (page 905, header 906, footer 907). */

/* Elementor's .e-con base class defaults to width:100%, which overrides the
   container 'width' setting control (that control only renders when
   content_width='full', which nested/Hug containers don't use). For any
   container meant to Hug its content, override explicitly here instead.
   NOTE: also add the .e-con class itself to each selector below — Elementor's
   own base rule `.e-con.e-flex{flex:var(--flex-grow) var(--flex-shrink)
   var(--flex-basis)}` (default --flex-shrink:1) is ALSO a 2-class selector,
   so a bare 2-class override here ties on specificity and can lose the
   cascade order tie to Elementor's later-loaded stylesheet — confirmed this
   actually happened (flex-shrink stayed 1, invisible until zero-slack fixed
   gaps were introduced and items visibly squeezed/text-wrapped). Bumping to
   3 classes (.xpro-theme-builder-header + the custom class + .e-con) wins
   cleanly. */
.xpro-theme-builder-header .logo-frame.e-con,
.xpro-theme-builder-header .logo-text.e-con {
  flex: 0 0 auto;
  width: fit-content;
}
.xpro-theme-builder-header .logo-icon-box.e-con {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}

/* Header nav-menu frame (Frame 9) — items sit edge-to-edge with zero gap;
   each item's own 8/12 padding provides the visual spacing between labels. */
.xpro-theme-builder-header .nav-menu-frame.e-con {
  flex: 0 0 auto;
  width: fit-content;
}
.xpro-theme-builder-header .nav-item.e-con {
  flex: 0 0 auto;
  width: fit-content;
}

/* Nav-item heading/image widgets: the widget-container's own inherited
   line-height (normal, computes taller than the content's own line-height/
   intrinsic size) creates a CSS line-box strut that inflates the block's
   height past its content. Reset the container's own line-height so the
   child's line-height/size governs instead. */
.xpro-theme-builder-header .nav-item .elementor-widget-heading .elementor-widget-container,
.xpro-theme-builder-header .nav-item .elementor-widget-image .elementor-widget-container {
  line-height: 1;
}

/* Frame 144 = the real language-switcher frame (built 2026-08-11): two
   32x32 circular flag images (VN, EN), each already pre-cropped to a
   circle by Figma's own export (confirmed by inspecting the exported PNGs
   directly — no CSS clip-path/border-radius masking needed here). Normal
   flex child of nav-frame (3rd item, after logo-frame and nav-menu-frame),
   NOT absolutely positioned. margin-left:104.5px below reproduces Figma's
   unequal-gap header layout (see the nav-menu-frame rule above it). */
.xpro-theme-builder-header .lang-switcher-frame.e-con {
  flex: 0 0 auto;
  width: fit-content;
}

/* Figma: VN at X0 Y0 (32x32), EN at X44 Y0 (32x32) relative to the frame —
   gap = 44 - 32 = 12px, applied as margin-left on the 2nd flag only. */
.xpro-theme-builder-header .lang-flag-en {
  margin-left: 12px;
}

/* Explicit 32x32 on the <img> itself — the source PNGs are already
   exactly 32x32 (Figma-exported, pre-cropped circles) so this is a safety
   net, not a resize. */
.xpro-theme-builder-header .lang-flag img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%; /* Figma: outer instance has corner-radius 60 on a 32px
                         box, i.e. fully round. The source PNGs are already
                         pre-cropped circles (confirmed), but this makes the
                         circular clip a real CSS guarantee rather than only
                         relying on the asset already having a baked-in mask. */
}

/* Same widget-container line-height strut as the header nav items — an
   inline <img> still gets an inherited line-height strut from its
   .elementor-widget-container wrapper that can add a px or two of extra
   height beyond the image's own 32px. */
.xpro-theme-builder-header .lang-switcher-frame .elementor-widget-image .elementor-widget-container {
  line-height: 0;
}

/* Cap the header at Figma's 1440px canvas width, centered. Elementor's own
   boxed content_width doesn't work for this: switching to boxed splits
   padding across a hidden outer/inner wrapper pair (see elementor-notes.md's
   "boxed-container padding split" gotcha), and the outer div — which is
   what our horizontal padding actually lands on — stays full-viewport-width
   regardless of the boxed_width setting, so nothing was actually capped.
   Keeping content_width:full (single wrapper div, padding intact as set)
   and capping width directly here reproduces Figma's absolute X positions
   exactly on any viewport ≥1440px. */
.xpro-theme-builder-header .nav-frame.e-con-full {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* Header's 3 top-level frames (logo, nav-menu, language-switcher) use
   DELIBERATELY UNEQUAL gaps in Figma (70.5px after logo, 104.5px after
   nav-menu), confirmed by solving spec X positions algebraically — not a
   uniform space-between that flexbox can auto-distribute. Switched
   flex_justify_content to flex-start and hardcode each gap as a fixed
   margin instead. Only holds exactly at the capped 1440px width above. */
.xpro-theme-builder-header .nav-menu-frame.e-con {
  margin-left: 70.5px;
}
.xpro-theme-builder-header .lang-switcher-frame.e-con {
  margin-left: 104.5px;
}


/* Hero section (page 905): 6 trust-badge pill "tabs" flanking the headline,
   flanking clusters at Figma X43-113 (left) / X1126-1147 (right), Y37/241/414.
   Hero container is content_width:full (see header's own .e-con-full note
   above for why boxed/boxed_width isn't used) so it's capped + centered here
   exactly like .nav-frame, and given position:relative as the anchor for the
   absolutely-positioned tab pills (plain CSS position, not Elementor's native
   `position` control — see elementor-notes.md's position:relative wrapper
   gotcha; this project's established fix is a plain-CSS 3-class override). */
.elementor-905 .hero-frame.e-con-full {
  position: relative;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* Each pill's width/height below matches the Hug-computed size Figma reports
   for its real (icon+text) content. Content here is still the "Tab N"
   placeholder label from the geometry pass, so it's pinned to an explicit
   px size for now rather than true CSS Hug (fit-content) — swap to
   width:fit-content once the real icon+copy replaces the placeholder label,
   matching the established Hug pattern used elsewhere (flex:0 0 auto +
   width:fit-content). */
.elementor-905 .hero-tab.e-con {
  position: absolute;
}
.elementor-905 .hero-tab-1.e-con { left: 71px;   top: 37px;  width: 264px; height: 42px; }
.elementor-905 .hero-tab-2.e-con { left: 1126px; top: 37px;  width: 215px; height: 42px; }
.elementor-905 .hero-tab-3.e-con { left: 43px;   top: 241px; width: 156px; height: 42px; }
.elementor-905 .hero-tab-4.e-con { left: 1147px; top: 241px; width: 164px; height: 42px; }
.elementor-905 .hero-tab-5.e-con { left: 113px;  top: 414px; width: 193px; height: 42px; }
.elementor-905 .hero-tab-6.e-con { left: 1126px; top: 414px; width: 211px; height: 42px; }

/* Same widget-container line-height strut as every other section built so
   far — reset so the label's own line-height governs the Hug height. */
.elementor-905 .hero-tab-label .elementor-widget-container {
  line-height: 1;
}

/* Debug-outline convention (2026-08-12): for structural/layout frames that
   will hold real content later, use a dashed border instead of the solid
   pastel fill used for the 12 top-level section placeholders — a solid fill
   would visually clash with real content once it's added inside. Apply
   .dbg-outline to any such frame going forward; remove once real content
   replaces the debug label inside. */
.elementor-905 .dbg-outline.e-con {
  border: 2px dashed #FF0080;
  box-sizing: border-box;
}

/* Frame 11 (Hero content column): headline/subtitle/CTA will stack inside
   this later (flex_direction:column, flex_align_items:center, gap:64 —
   set natively in _elementor_data). Height pinned to the Hug-computed 448px
   from Figma since there's no real content yet to hug around; switch to
   height:auto once real content is added. */
.elementor-905 .hero-frame-11.e-con {
  position: absolute;
  left: 149px;
  top: 77px;
  width: 1141px;
  height: 448px;
}

/* Frame 125 (hero photo placeholder): DBE1E5 fill + 4px inside gradient
   stroke (35% #3C77FF → 65% #F1743A), matching design-tokens.md's already-
   confirmed Frame 125 border spec. Elementor's native border control can't
   do a gradient, so this uses the standard double-background technique:
   a solid-color layer clipped to padding-box (the fill) plus a gradient
   layer clipped to border-box (the stroke), with a transparent real border
   reserving the 4px — border-box sizing makes the stroke sit "inside" the
   box exactly like Figma's stroke Position:Inside, not add to its size. */
.elementor-905 .hero-frame-125.e-con {
  position: absolute;
  left: 150px;
  top: 567px;
  width: 1140px;
  height: 510px;
  overflow: hidden;
}

/* Hero background frame (2026-08-12): decorative dot-pattern layer, sized
   larger than the Hero frame itself (1602x1503 vs Hero's 1440x1077) and
   bleeding past its edges on all sides — matches Figma's own layer bounds
   exactly, not a mistake. pointer-events:none since it's purely decorative
   and sits behind the tabs/content (inserted as the 2nd child of
   .hero-frame, right after the debug label, so it paints behind every
   later sibling with no z-index juggling needed). */
.elementor-905 .hero-bg-frame.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1602px;
  height: 1503px;
  pointer-events: none;
}

/* Figma's 2 layers here ("Pattern Picture" + "Pattern:mask" using
   Mask Alpha) collapse into ONE rendered element on the web: a Figma mask
   layer never paints its own pixels, it only clips the layer(s) below it —
   so the faithful translation is a CSS mask-image on the picture itself,
   not a second visible box on top of it. Radial fill read directly off
   Figma's Mask panel: 0%=black@35% opacity (center, most visible) →
   100%=black@3% opacity (edge, nearly invisible, never fully 0). Supersedes
   the earlier estimated ellipse-mask formula in design-tokens.md, which was
   derived by eye rather than read off this exact panel. object-fit:cover
   fills the exact 1602x1503 box regardless of the source PNG's own aspect
   ratio (2880x2154, exported separately, not 1:1 with this box). */
.elementor-905 .hero-pattern-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-mask-image: radial-gradient(rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.03) 100%);
  mask-image: radial-gradient(rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.03) 100%);
}

/* Frame 11 content (2026-08-12): Frame 38 (headline/subtitle, not yet
   built — debug outline only) + the real Hero CTA button, stacked in
   Frame 11's own flex column (gap 64, align-items:center — set when Frame
   11 was first created). align-items:center means children Hug their own
   width by default, so each needs its exact size pinned explicitly here;
   no absolute positioning needed since the flex column already reproduces
   the exact spec X/Y (378.5 = (1141-384)/2, 368 = 304+64gap) on its own. */
.elementor-905 .hero-frame-38.e-con {
  /* real content now added (2026-08-12); size comes from true Hug
     (943-wide headline-group + full-width subtitle), no longer pinned. */
}

/* Hero CTA "Button OSS": fill/border/radius/padding are native Elementor
   settings (see _elementor_data). Border-box sizing makes the 4px stroke
   sit "inside" the 384x80 box per Figma's stroke Position:Inside, matching
   the border-box pattern used for Frame 125's stroke. Elementor's own
   box-shadow control only supports a single shadow layer, so the design
   system's two-layer button shadow (docs/design-tokens.md) needs plain CSS. */
.elementor-905 .hero-cta-button.e-con {
  box-sizing: border-box;
  width: 384px;
  height: 80px;
  box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1);
}

/* Same widget-container line-height strut fix used everywhere else — lets
   the label's own 40px line-height (set natively) govern its Hug height
   instead of the wrapper's inherited "normal" line-height. */
.elementor-905 .hero-cta-button .elementor-widget-heading .elementor-widget-container {
  line-height: 1;
}

/* Hero CTA label wrapped to 2 lines: "Lien he tu van mien phi" at Roboto
   Bold 24px measures a few px wider than the 248px content box (384 -
   2x4 border - 2x64 padding) in this browser's font rendering vs Figma's
   own 251px Hug measurement. Same class of bug as the vertical-text gotcha
   already documented in elementor-notes.md; same fix (nowrap) applies. */
.elementor-905 .hero-cta-label .elementor-heading-title {
  white-space: nowrap;
}

/* Frame 60 (headline group): 2 stacked heading lines, both 943px wide
   (Hug-workaround: explicit width, same pattern as every other Hug
   container in this build), Frame 38's own align-items:center handles
   horizontal centering automatically. */
.elementor-905 .hero-headline-group.e-con {
  width: 943px;
}
.elementor-905 .hero-headline-group .elementor-widget-heading .elementor-widget-container {
  line-height: 1;
}

/* Gradient headline span ("Offshore Secretary Services"): blue-to-orange
   gradient clipped to text. Angle kept at 94deg per the already-confirmed
   reading in design-tokens.md (not re-given this pass); stop percentages
   (32%/62%) are this pass's fresh exact readout, replacing the doc's
   slightly-rounded 31%/61%. Elementor's title_color (solid only) can't
   do this, so it's plain CSS — deliberately no title_color set natively. */
.elementor-905 .hero-headline-gradient .elementor-heading-title {
  background: linear-gradient(94deg, #3C77FF 32%, #F1743A 62%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtitle paragraph: Figma "Fill" width — stretches to match Frame 38's
   full width (1141px) rather than Hug to its own text width. Frame 38's
   align-items:center only Hugs by default, so this needs an explicit
   override (align-self:stretch would also work, but an explicit width
   matches the "Fill" semantics more literally and matches this project's
   established Hug/Fill CSS-override pattern). */
.elementor-905 .hero-subtitle.e-con {
  width: 100%;
}


/* Hero tab icon + label (2026-08-12): positioned absolutely relative to
   each tab's own box (which is itself position:absolute, so it's already
   a valid anchor for these — no extra position:relative needed). These
   exact X/Y (16,15 for the icon; 36,9 for the label) don't line up with
   the tab's own padding/gap settings (16 all sides) — that's fine, they're
   literal Figma positions, not meant to be derived from the padding math.
   Checked they fit inside the tab's already-locked 42px height before
   building (icon spans y15-27, label spans y9-33, both under 42). */
.elementor-905 .hero-tab-icon.e-con {
  position: absolute;
  left: 16px;
  top: 15px;
  width: 12px;
  height: 12px;
}
.elementor-905 .hero-tab-text {
  position: absolute;
  left: 36px;
  top: 9px;
  white-space: nowrap;
}
.elementor-905 .hero-tab-text .elementor-widget-heading .elementor-widget-container {
  line-height: 1;
}

/* Frame 125 real content (2026-08-12). IMPORTANT: the gradient stroke is no
   longer a real CSS `border` on .hero-frame-125 itself (see the rule
   above) -- a real `border` shrinks the CSS containing block for any
   absolutely-positioned children to the padding-box (4px smaller on every
   side than the declared box), which would silently offset every child
   below by 4px from the literal Figma numbers. Instead the ring is a
   separate overlay painted last (.hero-frame-125-ring below), so every
   child here uses its literal Figma X/Y with zero compensation math --
   consistent with how every other position in this build has been done. */

.elementor-905 .hero-photo-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 1140px;
  height: 510px;
}
.elementor-905 .hero-photo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.elementor-905 .hero-rect20-img {
  position: absolute;
  left: 0;
  top: 428px;
  width: 1140px;
  height: 82px;
}
.elementor-905 .hero-rect20-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logo Homepage watermark: 50% opacity is a native Elementor setting
   (_elementor_data); rotation has no reliable native control on the free
   image widget (Elementor's transform group has several popover-toggle
   preconditions, same class of gotcha as typography/box-shadow above --
   plain CSS is simpler and certain here). */
.elementor-905 .hero-logo-watermark {
  position: absolute;
  left: 320px;
  top: 400px;
  width: 48.7px;
  height: 56.42px;
}
.elementor-905 .hero-logo-watermark img {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(9.96deg);
}

/* Frame 78 badge. Fill/radius/padding/shadow are native settings; size and
   position are explicit CSS (align-items:center alone would Hug, and this
   is a Fixed 261x56 per spec, no "Hug" suffix given this time). */
.elementor-905 .hero-badge.e-con {
  position: absolute;
  left: 861px;
  top: 436px;
  width: 261px;
  height: 56px;
  box-sizing: border-box;
}
.elementor-905 .hero-badge-icon {
  position: absolute;
  left: 21px;
  top: 12px;
  width: 32px;
  height: 32px;
}
.elementor-905 .hero-badge-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.elementor-905 .hero-badge-text {
  position: absolute;
  left: 57px;
  top: 18px;
  white-space: nowrap;
}
.elementor-905 .hero-badge-text .elementor-widget-heading .elementor-widget-container {
  line-height: 1;
}

/* Gradient ring overlay -- reuses the exact original Frame 125 stroke
   definition (35% #3C77FF -> 65% #F1743A, "to right", weight 4, inside)
   moved here from the frame itself. Inner layer is transparent (padding-
   box) since the real photo underneath now provides the fill; outer layer
   (border-box) paints the visible 4px ring. pointer-events:none so it
   never blocks interaction with the badge underneath it in DOM order. */
.elementor-905 .hero-frame-125-ring.e-con {
  position: absolute;
  left: 0;
  top: 0;
  width: 1140px;
  height: 510px;
  box-sizing: border-box;
  border: 4px solid transparent;
  background: linear-gradient(to right, #3C77FF 35%, #F1743A 65%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}



/* Page-level connector element (rebuilt 2026-08-12): "Vector 2", a thin
   vertical line between Hero Banner and Who We Are, owned by neither
   section's own container -- confirmed by the user as a page-level visual
   seam. Anchored to .elementor-905 (the actual top-level wrapper Elementor
   generates around all 12 section containers, confirmed via the live DOM
   parent chain), given position:relative here so absolutely-positioned
   descendants (including .page-vectors-overlay below) resolve against it. */
.elementor-905 {
  position: relative;
}

/* Fixed 2026-08-15: page-level vector elements (Vector 2, Vector 3.1, and
   any future ones) used to compute left via calc(50% - 720px + figma_X)
   directly against .elementor-905's full (often ODD-width) viewport --
   mathematically correct, but 50% of an odd pixel width is a .5 fractional
   value, and the browser must round/snap that independently from the
   plain whole-integer px values used by .dbg-who/.dbg-quote's own
   max-width:1440+margin:auto centering. Confirmed via live
   getBoundingClientRect at two different viewport widths that the CSS
   math itself was correct (values matched to a small fraction of a
   pixel) -- but the user could still see a real ~1-3px visual
   misalignment even at 100% browser zoom / 100% display scaling, which
   points to independent sub-pixel rasterization/rounding between the two
   different calculation paths, not wrong data. Fix: this shared
   .page-vectors-overlay wrapper uses the EXACT SAME max-width:1440px +
   margin:auto centering mechanism as .dbg-who/.dbg-quote (against the
   same .elementor-905 parent), so it lands on the identical pixel grid.
   Page-level vector children now use plain fixed-integer left values
   (Figma-local X within the 1440 design, e.g. 720 = dead center) instead
   of calc(), eliminating the redundant/divergent arithmetic entirely --
   both coordinate systems are now literally the same computation instead
   of two independent ones that happen to be algebraically equivalent. */
.elementor-905 .page-vectors-overlay.e-con {
  position: relative;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  height: 0;
  overflow: visible;
  pointer-events: none;
}
.elementor-905 .page-vector-2-connector {
  position: absolute;
  left: 720px;
  top: 1109px;
  height: 210px;
  z-index: 10;
}
.elementor-905 .page-vector-2-connector img {
  /* height:100% was a no-op -- this <img>'s real DOM parent is
     .elementor-widget-container (auto height, hugs the image's own
     natural size), not .page-vector-2-connector itself (which is the
     grandparent and holds the real 210px). Percentage height only
     resolves against the DIRECT parent, so 100% of an auto-height parent
     computes as auto too -- the image silently rendered at its native
     unscaled pixel size (source was exported at 2x). Explicit px sidesteps
     the percentage-resolution chain entirely. */
  height: 210px;
  width: auto;
  display: block;
}



/* Who We Are section: Vector 3 decorative graphic. Source PNG is a 2x
   export (924x1376 actual vs 480x688 target -- height is a clean 2x,
   width is close but not exact, likely due to trimmed transparent margin
   in the export), so BOTH width and height are set as explicit pixel
   values directly on the <img> rather than one fixed + one "auto" derived
   from the source's own aspect ratio -- sidesteps both the aspect-ratio
   mismatch and the percentage-height-resolves-against-wrong-parent bug
   just hit on Vector 2 (a percentage height silently no-ops if the actual
   DOM parent, .elementor-widget-container, has auto height itself). */
.elementor-905 .dbg-who.e-con {
  position: relative;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  z-index: 2;
}

/* Fixed 2026-08-15: Quote band 1's Pattern Frame bleeds upward 51px
   (top:-51px, deliberately, to share its background with the section
   above) into the bottom of THIS section's own box. .dbg-who and
   .dbg-quote are plain page-level siblings with no z-index of their
   own, so without this, later-DOM-order .dbg-quote painted on top in
   that shared 51px strip -- hiding the bottom of who-vector-3 (whose
   own bottom edge, local y 888, sits inside that band) along with
   anything else near the bottom of Who. z-index:2 here (bumped from an initial
   z-index:1, which tied with .quote-pattern-frame's own existing
   z-index:1 and lost the tiebreak to document order -- .quote-pattern-
   frame is nested inside the later .dbg-quote, so it still won) flips
   that so Who's own content stays on top of Quote's
   background bleed, not the other way around. */

/* Frame 30 (Who We Are, debug-outline placeholder -- no content spec yet).
   flex_direction:column, justify-content:flex-start ("Top"),
   align-items:flex-end ("Right"), gap 16 -- same Top/Center-style pairing
   convention as Frame 11's "Top Center", just Right instead of Center for
   this frame's cross-axis. */
.elementor-905 .who-frame-30.e-con {
  position: absolute;
  left: 249px;
  top: 64px;
  width: 943px;
  height: 136px;
}

.elementor-905 .who-heading-text {
  width: 943px;
}

.elementor-905 .who-heading-text .elementor-widget-container {
  line-height: 1;
}

.elementor-905 .who-paragraph-text {
  width: 943px;
}

.elementor-905 .who-frame-19 {
  position: absolute;
  left: 250px;
  top: 282px;
  width: 461px;
  height: 456px;
}

.elementor-905 .who-tab-group-1 { position: absolute; left: 0px; top: 0px; width: 461px; height: 108px; }
.elementor-905 .who-tab-group-2 { position: absolute; left: 0px; top: 108px; width: 461px; height: 108px; }
.elementor-905 .who-tab-group-3 { position: absolute; left: 0px; top: 216px; width: 461px; height: 108px; }
.elementor-905 .who-tab-group-4 { position: absolute; left: 0px; top: 324px; width: 461px; height: 132px; }

.elementor-905 .who-tab-frame13-1 { position: absolute; left: 0px; top: 16px; width: 461px; height: 76px; }
.elementor-905 .who-tab-frame13-2 { position: absolute; left: 0px; top: 16px; width: 461px; height: 76px; }
.elementor-905 .who-tab-frame13-3 { position: absolute; left: 0px; top: 16px; width: 461px; height: 76px; }
/* group 4's Frame 13 self-corrected to 100px (28 + 72) -- the literal spec
   text repeated "76Hug" for all 4 groups, but group 4's own Frame 21 is
   72px tall (not 48px like groups 1-3) and its tab-group height was
   independently given as 132px, which only reconciles as
   16 + 100 + 16 = 132 -- confirms 76 was a copy-paste leftover, not a
   real value, for this one group. */
.elementor-905 .who-tab-frame13-4 { position: absolute; left: 0px; top: 16px; width: 461px; height: 100px; }

.elementor-905 .who-tab-frame20-1,
.elementor-905 .who-tab-frame20-2,
.elementor-905 .who-tab-frame20-3,
.elementor-905 .who-tab-frame20-4 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 461px;
  height: 24px;
}

.elementor-905 .who-tab-icon-1,
.elementor-905 .who-tab-icon-2,
.elementor-905 .who-tab-icon-3,
.elementor-905 .who-tab-icon-4 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 24px;
  height: 24px;
}

.elementor-905 .who-tab-heading-1 { position: absolute; left: 48px; top: 0.5px; width: 143px; height: 23px; }
.elementor-905 .who-tab-heading-2 { position: absolute; left: 48px; top: 0.5px; width: 169px; height: 23px; }
.elementor-905 .who-tab-heading-3 { position: absolute; left: 48px; top: 0.5px; width: 160px; height: 23px; }
.elementor-905 .who-tab-heading-4 { position: absolute; left: 48px; top: 0.5px; width: 150px; height: 23px; }

.elementor-905 .who-tab-heading-1 .elementor-widget-container,
.elementor-905 .who-tab-heading-2 .elementor-widget-container,
.elementor-905 .who-tab-heading-3 .elementor-widget-container,
.elementor-905 .who-tab-heading-4 .elementor-widget-container {
  line-height: 1;
}

.elementor-905 .who-tab-frame21-1,
.elementor-905 .who-tab-frame21-2,
.elementor-905 .who-tab-frame21-3 {
  position: absolute;
  left: 0px;
  top: 28px;
  width: 461px;
  height: 48px;
}
.elementor-905 .who-tab-frame21-4 {
  position: absolute;
  left: 0px;
  top: 28px;
  width: 461px;
  height: 72px;
}

.elementor-905 .who-tab-body-1,
.elementor-905 .who-tab-body-2,
.elementor-905 .who-tab-body-3 {
  position: absolute;
  left: 48px;
  top: 0px;
  width: 365px;
  height: 48px;
}
.elementor-905 .who-tab-body-4 {
  position: absolute;
  left: 48px;
  top: 0px;
  width: 365px;
  height: 72px;
}

.elementor-905 .who-vector-3 {
  position: absolute;
  left: 262px;
  top: 200px;
  width: 460px;
  height: 688px;
}

.elementor-905 .who-vector-3 img {
  width: 460px;
  height: 688px;
  display: block;
}

.elementor-905 .who-world-map { position: absolute; left: 767px; top: 244px; width: 502px; height: 504px; }
.elementor-905 .who-world-map img { width: 502px; height: 504px; display: block; }

.elementor-905 .who-shape-2 { position: absolute; left: 1066px; top: 377px; width: 142.02px; height: 100.14px; }
.elementor-905 .who-shape-2 img { width: 142.02px; height: 100.14px; display: block; }

.elementor-905 .who-shape-1 { position: absolute; left: 883px; top: 679px; width: 142.02px; height: 100.64px; }
.elementor-905 .who-shape-1 img { width: 142.02px; height: 100.64px; display: block; }

/* Picture_OSS / Picture_blur_OSS: source PNGs are 776x1052 (ratio 0.7376),
   but the target boxes are a different ratio (0.687 / 0.704) -- Figma's
   "Fill" scale mode center-crops an image to fill a differently-proportioned
   frame rather than stretching it, so object-fit:cover reproduces that
   (not a guess at cropping -- it's the direct CSS equivalent of Figma's
   own default Fill behavior). Flagged to the user as worth double-checking
   against Figma if the visible crop looks off. */
.elementor-905 .who-picture-blur { position: absolute; left: 869px; top: 285px; width: 328px; height: 466px; }
.elementor-905 .who-picture-blur img { width: 328px; height: 466px; object-fit: cover; display: block; }

.elementor-905 .who-picture-main { position: absolute; left: 863px; top: 285px; width: 334px; height: 486px; }
.elementor-905 .who-picture-main img { width: 334px; height: 486px; object-fit: cover; display: block; }

.elementor-905 .who-icon2-1-outer,
.elementor-905 .who-icon2-2-outer,
.elementor-905 .who-icon2-3-outer,
.elementor-905 .who-icon2-4-outer {
  position: absolute;
  width: 56px;
  height: 56px;
  box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1);
}
.elementor-905 .who-icon2-1-outer { left: 1037px; top: 204px; }
.elementor-905 .who-icon2-2-outer { left: 900px; top: 244px; }
.elementor-905 .who-icon2-3-outer { left: 794px; top: 336px; }
.elementor-905 .who-icon2-4-outer { left: 747px; top: 461px; }

.elementor-905 .who-icon2-1-inner { position: absolute; left: 8px; top: 8px; width: 36px; height: 36px; }
.elementor-905 .who-icon2-2-inner { position: absolute; left: 5px; top: 5px; width: 42px; height: 42px; }
.elementor-905 .who-icon2-3-inner { position: absolute; left: 8px; top: 8px; width: 36px; height: 36px; }
.elementor-905 .who-icon2-4-inner { position: absolute; left: 8px; top: 8px; width: 36px; height: 36px; }

/* All 6 vector PNGs are clean ~2x exports tightly cropped to their own
   artwork (no padding mismatch like the earlier connect_symbol/
   support_symbol squares), so plain explicit width/height is enough --
   no object-fit:cover needed this time. */
.elementor-905 .who-icon2-1-vec-1 { position: absolute; left: 0px; top: 1.5px; width: 36px; height: 33px; }
.elementor-905 .who-icon2-1-vec-1 img { width: 36px; height: 33px; display: block; }

.elementor-905 .who-icon2-2-vec-1 { position: absolute; left: 2.44px; top: 5.65px; width: 37.12px; height: 30.69px; }
.elementor-905 .who-icon2-2-vec-1 img { width: 37.12px; height: 30.69px; display: block; }
.elementor-905 .who-icon2-2-vec-2 { position: absolute; left: 10.9px; top: 10.17px; width: 20.21px; height: 20.99px; }
.elementor-905 .who-icon2-2-vec-2 img { width: 20.21px; height: 20.99px; display: block; }

.elementor-905 .who-icon2-3-vec-1 { position: absolute; left: 1.13px; top: 1.55px; width: 33.75px; height: 32.91px; }
.elementor-905 .who-icon2-3-vec-1 img { width: 33.75px; height: 32.91px; display: block; }

.elementor-905 .who-icon2-4-vec-1 { position: absolute; left: 8.11px; top: 8.11px; width: 26.69px; height: 26.69px; }
.elementor-905 .who-icon2-4-vec-1 img { width: 26.69px; height: 26.69px; display: block; }
.elementor-905 .who-icon2-4-vec-2 { position: absolute; left: 0px; top: 0px; width: 24.75px; height: 31.5px; }
.elementor-905 .who-icon2-4-vec-2 img { width: 24.75px; height: 31.5px; display: block; }



/* ===== Quote Frame (Section Quotes, Figma X0 Y2254 W1440 H421) ===== */

/* Same width-cap + position:relative pattern as .dbg-who / .hero-frame
   (2-class combo with .e-con to beat Elementor's own same-specificity
   base rule -- see elementor-notes.md's flex-shrink specificity-tie gotcha). */
.elementor-905 .dbg-quote.e-con {
  position: relative;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* Pattern Frame: background for this + the next section, deliberately
   overlapping past its own 523px box (children are 1032/1320 tall) and
   starting 51px above the Quote Frame's own top edge. Kept behind all
   real content via z-index (children below use z-index:2). */
.dbg-quote .quote-pattern-frame.e-con {
  position: absolute;
  left: 0px;
  top: -51px;
  width: 1440px;
  height: 523px;
  z-index: 1;
  overflow: visible;
}

.dbg-quote .quote-pattern-radial.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1440px;
  height: 1032px;
}
/* Fixed 2026-08-15: Figma's own "Copy as CSS" on the Radial layer
   gives the authoritative shape/size -- radial-gradient(50% 50% at 50%
   50%, ...), i.e. an EXPLICIT radius of 50% width / 50% height, so the
   gradient reaches its 100% (fully opaque) stop exactly at each edge's
   midpoint. The previous version used the CSS keyword `ellipse` with no
   explicit size, which defaults to `farthest-corner` -- a much larger
   radius that reaches the box's corners, not its edges -- so the fade
   hadn't finished by the time it reached the top/side edges, visibly
   under-fading them. Confirmed color/stop values (#F7F8F9 0% alpha ->
   #F9FAFD 100% alpha) were already correct; only the shape/size was
   wrong. */
.dbg-quote .quote-pattern-radial.e-con {
  background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F9FAFD 100%);
}

/* Fixed 2026-08-15: Radial was invisible on the live site because it's
   DOM position 0 inside .quote-pattern-frame (Frame16 is position 1) --
   with neither element given a z-index, later-DOM-order Frame16 (an
   opaque tiled texture) painted fully on top and hid the gradient
   underneath entirely. This stacking context is local to
   .quote-pattern-frame (itself position:absolute + z-index:1), so a
   z-index here doesn't interact with the z-index:2 used elsewhere in
   Section Quotes for the real content layer. */
.dbg-quote .quote-pattern-radial.e-con {
  z-index: 2;
}

/* Frame 16.png is a small tileable grid-paper texture (native 2880x842 =
   2x export of a 1440x421 tile). The target box (1440x1320) is much
   taller than one tile, and the source doesn't proportionally stretch to
   1320 without warping the grid into non-square cells -- so this repeats
   the tile vertically at its true 2x-correct CSS size instead of
   stretching a single <img>. Implemented as a background-image on an
   empty container rather than an Elementor image widget, since the
   image widget has no tiling/repeat control. */
/* Fixed 2026-08-16 (user-confirmed designer mistake): height shrunk from
   1320px to 523px, matching the parent .quote-pattern-frame's own already-
   established box (top:-51, height:523 -- i.e. spans -51 to 472 relative
   to Quote's own top). Preserves the confirmed-intentional 51px upward
   bleed into Who (2026-08-15) while removing the unintended ~800px
   downward bleed into Services that was never meant to be there. Purely
   a structural cleanup, not a visible fix -- Services' own opaque #FFFFFF
   background (set 2026-08-16) already hid the excess overflow regardless.
   Safe to resize: this is a repeating tile (background-repeat:repeat-y),
   not shape/percentage-sensitive to its own box size, so shrinking it
   just shows fewer repeats with no distortion. quote-pattern-radial
   deliberately NOT resized to match -- its gradient is percentage-based
   on its own box (50% 50% at 50% 50%), so shrinking it would also shift
   the gradient's shape/center within the still-visible Quote area,
   risking a regression to the fade confirmed correct on 2026-08-15. */
.dbg-quote .quote-pattern-frame16.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1440px;
  height: 523px;
  background-image: url('https://offshoresecretaryservices.com/wp-content/uploads/2026/08/quote-pattern-frame16.png');
  background-repeat: repeat-y;
  background-size: 1440px 421px;
}

.dbg-quote .quote-vector-start {
  position: absolute;
  left: 57px;
  top: 45px;
  width: 142px;
  height: 98px;
  z-index: 2;
}
.dbg-quote .quote-vector-start img {
  width: 142px;
  height: 98px;
  display: block;
}

.dbg-quote .quote-vector-end {
  position: absolute;
  left: 1224px;
  top: 258px;
  width: 142px;
  height: 98px;
  z-index: 2;
  transform: rotate(-180deg);
}
.dbg-quote .quote-vector-end img {
  width: 142px;
  height: 98px;
  display: block;
}

.dbg-quote .quote-frame-31.e-con {
  position: absolute;
  left: 213.5px;
  top: 163px;
  width: 1012px;
  height: 96px;
  z-index: 2;
}

/* Text widget sized to exactly match Frame 31's own width so text-align:
   center centers within the full 1012px box, not a shrink-wrapped one
   (Frame 31's flex_align_items:center would otherwise let the widget
   shrink to its own content width). */
.dbg-quote .quote-text {
  width: 1012px;
}

.quote-span-blue { color: #3C77FF; }
.quote-span-gray { color: #69768B; }
.quote-span-orange { color: #F1743A; }

.dbg-quote .quote-focus-icon {
  position: absolute;
  left: 1217px;
  top: 142px;
  width: 24px;
  height: 26px;
  z-index: 2;
}
.dbg-quote .quote-focus-icon img {
  width: 24px;
  height: 26px;
  display: block;
}

/* Page-level element (like Vector 2): Figma-global coords, not local to
   Quote Frame. left uses the established calc(50% - 720px + figma_X)
   formula (.elementor-905 is full viewport width, unlike each section's
   own 1440px-capped box). top uses figma_global_Y - 96 (Figma's in-canvas
   header-mockup offset -- see Vector 2's documented fix in CLAUDE.md):
   2461.12 - 96 = 2365.12. */
.elementor-905 .page-vector-3129-underline {
  position: absolute;
  left: 980.5px;
  top: 2365.12px;
  width: 238.5px;
  height: 8.88px;
  z-index: 5;
}
.elementor-905 .page-vector-3129-underline img {
  width: 238.5px;
  height: 8.88px;
  display: block;
}

/* ===== Vector 3.1 (page-level, spans Who/Quote boundary) =====
   Position/top math: see git history / earlier comment -- local top
   2159 (from Figma-global 2255 - 96, confirmed exact against Section
   Quotes' documented global start 2254), sits ~1-2px past
   who-vector-3's own local bottom (2157, essentially touching, per
   "aligned with end bottom of vector 3"), extending 126px down into
   the Quote section. z-index:10 matches Vector 2's convention, needed
   to paint above both .dbg-who (z-index:2) and .quote-pattern-frame
   (z-index:1) here.
   2026-08-15: swapped the hand-built CSS dashed-border approximation
   for the real Figma-exported asset (vector-3-1.png, attachment 941)
   once it was exported -- source is a clean 2x (4x252 = 2x126 at 1x),
   and GD alpha-channel sampling confirmed the dash's ~30% opacity is
   already baked into the PNG itself (same pattern as the Hero
   background asset), so no separate CSS opacity is applied here --
   doing so would compound to ~9%, same gotcha documented for Hero. */
.elementor-905 .page-vector-3-1-line {
  /* 2026-08-15: left changed from calc(50% + 2px) to a plain fixed
     px value now that this element lives inside .page-vectors-overlay
     -- see that wrapper's own comment above for why. X moved from 722
     (720 dead-center + Figma's own +2px offset) to 720 (dead-center
     exactly) on explicit user request -- a prior edit briefly changed
     width to 720px instead (a misunderstanding, reverted same session);
     width stays at the original 2px thin-line size. */
  position: absolute;
  left: 720px;
  top: 2159px;
  width: 2px;
  height: 126px;
  z-index: 10;
}
.elementor-905 .page-vector-3-1-line img {
  width: 2px;
  height: 126px;
  display: block;
}

/* ===== Services frame (Dich Vu) =====
   Section box: 1440x2892, capped/centered same as every other section.
   No opaque background of its own on purpose: quote-pattern-frame's own
   comment says it's "background for this + the next section" -- Frame16
   (tileable grid texture, ends local 3235) and the Radial fade (ends
   local 2947) both bleed ~656px / ~368px into Services' own top edge
   (local 2579), the same shared-background pattern already used for the
   Who/Quote boundary. z-index:2 here (matching .dbg-who's own fix for
   the identical problem at the Who/Quote boundary) makes Services' real
   content paint above that bled-through pattern instead of being hidden
   under it -- quote-pattern-frame itself sits at z-index:1, bubbled up
   to this same top-level stacking competition since .dbg-quote (its
   parent) has no z-index of its own. */
.elementor-905 .dbg-services.e-con {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* Frame 30: heading + subtitle, exact Figma position/size from user. */
/* Fixed 2026-08-16 (Option B, dynamic-height accordion fix): converted
   from position:absolute to a normal-flow flex child. Was: left:249,
   top:64 (Figma-exact). Now: margin-top:64 reproduces the same vertical
   gap from Services' own top edge; horizontal position comes from
   .dbg-services' own flex_align_items:center instead of a hardcoded
   left (249 vs the algebraic dead-center 248.5 -- 0.5px, imperceptible).
   flex:0 0 943px prevents Elementor's own default flex-shrink:1 from
   compressing this at zero-slack widths (see elementor-notes.md's
   documented flex-shrink specificity-tie gotcha). */
.dbg-services .svc-frame-30.e-con {
  flex: 0 0 auto;
  width: 943px;
  height: 112px;
  margin-top: 64px;
}
.dbg-services .svc-frame30-heading,
.dbg-services .svc-frame30-body {
  width: 943px;
}
/* ===== Frame 185 (Services accordion cards) =====
   Exact Figma position (2026-08-16): left 150, top 298, width 1140.
   Figma's own height (2554) is the literal current-state snapshot with
   2 expanded (1161 each) + 2 collapsed (80 each) + 3x 24px gaps -- not
   hardcoded here on purpose. Per CLAUDE.md golden rule 12, this wrapper's
   real height is dynamic (depends on which/how many cards are expanded
   at runtime, and right now only card 1 of 4 even exists yet), so it's
   left to auto-hug its actual children instead of a fixed px height that
   would either clip content or leave a stray gap once more cards land. */
/* Fixed 2026-08-16 (Option B, dynamic-height accordion fix): converted
   from position:absolute to a normal-flow flex child, THE key fix for
   "Services doesn't shrink when cards collapse" -- as a normal-flow
   child, this container's own height naturally hugs whatever its actual
   current content requires (however many cards are expanded/collapsed at
   any moment), and that in turn drives .dbg-services' own auto-height
   (no more frozen min_height:2892 matching only one snapshot state).
   Was: left:150, top:298. Now: margin-top:122 reproduces the same gap
   from Frame 30's bottom (64+112=176; 298-176=122). Horizontal: 150 is
   ALREADY exactly (1440-1140)/2 -- dead center -- so .dbg-services' own
   flex_align_items:center reproduces it exactly, no rounding at all
   (unlike Frame 30's 0.5px case). flex:0 0 1140px for the same
   flex-shrink reason as Frame 30. Height stays un-set/auto on purpose --
   already the case pre-fix -- so it continues to hug however many cards
   are currently rendered/expanded. */
.dbg-services .svc-frame-185.e-con {
  flex: 0 0 auto;
  width: 1140px;
  margin-top: 122px;
}

/* Frame 74 (accordion card 1, Thanh Lap Cong Ty). Height 1161px matches
   Figma's given "full size when expanded" state literally -- this project
   has no toggle interactivity wired up yet (pending: the other 3 cards'
   body content + a decision on how expand/collapse actually behaves --
   see CLAUDE.md golden rule 12 on why anything BELOW this dynamic
   accordion can't use fixed absolute page positions). */
.dbg-services .svc-card-1.e-con {
  position: relative;
  width: 1140px;
  height: 1161px;
  background: #F9FAFD;
  box-shadow: 0px 5px 35px rgba(30, 34, 40, 0.07);
  border-radius: 24px;
}

/* Frame 164: header bar, pinned to the card's top 80px regardless of the
   card's own total height. */
.dbg-services .svc-card-1-header.e-con {
  position: absolute;
  left: calc(50% - 1140px/2);
  top: 0px;
  width: 1140px;
  height: 80px;
  background: #EDF2FF;
  border-radius: 24px 24px 16px 16px;
}

/* Fixed 2026-08-16: originally flex:1 1 auto (per the literal 'flex-grow:1'
   in the Figma spec), but that combined with the also-literal gap:247px
   computed to 785px, not the also-literal width:1032px the same spec gave
   -- those three numbers can't all be true at once (1032 + 48 chevron =
   1080 = the ENTIRE content area, leaving zero room for any gap at all).
   Trusting the explicit width over the flex-grow/gap combo, matching this
   project's established pattern (e.g. quote-text) of hardcoding measured
   sizes over letting flex arithmetic recompute them. */
.dbg-services .svc-card-1-title {
  flex: 0 0 1032px;
  width: 1032px;
}

/* Chevron toggle button. Default (no .svc-card-collapsed on the ancestor
   .svc-card) = expanded state, rotate(-180deg) per Figma's given spec
   (chevron_icon.png flipped to point up); JS toggles .svc-card-collapsed
   on click, which flips this back to the natural down-pointing angle --
   see the toggle-behavior block further down. */
.dbg-services .svc-card-1-toggle.e-con {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transform: rotate(-180deg);
  transition: transform 0.39s ease;
  cursor: pointer;
}

/* Icon (2026-08-16): swapped from chevron-down.png (20x20, header asset)
   to chevron_icon.png (attachment 942, native 20x11 -- a wider/shorter
   glyph, different aspect ratio than the header's chevron, confirmed by
   the user "they have different size I did not aware"). Figma gave this
   as percentage insets within the 48x48 button (left/right 29.17%, top
   39.58%, bottom 37.5%) -- converted to literal px against the 48px box:
   14/14 horizontal (48*0.2917=14.0016), 19/18 vertical (48*0.3958=19.0064,
   48*0.375=18) -- NOT simple centering (19 vs 18 is asymmetric by 1px),
   so positioned via explicit absolute inset rather than flex-centering.
   Color #69768B confirmed already baked into the PNG's own pixels via GD
   sampling (~#69768C measured, anti-aliased edge) -- no CSS tint applied,
   same pattern as every other icon/photo asset in this build. */
.dbg-services .svc-card-1-toggle-icon {
  position: absolute;
  left: 14px;
  top: 19px;
  width: 20px;
  height: 11px;
}
.dbg-services .svc-card-1-toggle-icon img {
  width: 20px;
  height: 11px;
  display: block;
}

/* ===== Accordion toggle behavior (2026-08-16) =====
   Generic .svc-card / .svc-card-toggle hooks (shared across all 4 cards,
   not just card 1) -- JS (offshore-905.js) toggles .svc-card-collapsed on
   the .svc-card ancestor when its .svc-card-toggle button is clicked.
   Default (no modifier class) = expanded, matching how Frame 74 was built
   (1161px, chevron rotated -180deg) -- collapsed state shrinks to exactly
   Frame 164's own 80px height (per the user: "when its not expanded, it
   suppose only this frame inside 74") and un-rotates the chevron back to
   its natural down-pointing angle. overflow:hidden so the body content
   (not built yet) doesn't visually spill out while collapsed. */
.dbg-services .svc-card.e-con {
  overflow: hidden;
  transition: height 0.39s ease;
}
.dbg-services .svc-card.svc-card-collapsed.e-con {
  height: 80px;
}
.dbg-services .svc-card-collapsed .svc-card-toggle.e-con {
  transform: rotate(0deg);
}
/* ===== Cards 2-4 (2026-08-16) =====
   Identical template to card 1 (Frame 74 + Frame 164 + chevron toggle),
   just swapped title text and default expand/collapse state -- Frame 185's
   own spec said "2 expanding layouts (1161 each) + 2 closed layouts
   (80 Hug each)". Card 2 (Tai Khoan Doanh Nghiep) starts expanded per
   figma-snapshot.md's earlier note that this panel was also shown open in
   the design reference; cards 3-4 (Cong Ty Thu Ky, Ke Toan) start collapsed
   since only their headers are confirmed so far. All 4 share the same base
   height:1161px (their common "full size when expanded" target) -- the
   .svc-card-collapsed modifier (already present by default on cards 3-4's
   own css_classes) overrides down to 80px via the existing generic rule,
   same mechanism card 1's own toggle already uses. No body content built
   yet for cards 2-4 (pending real data), same as card 1. */

.dbg-services .svc-card-2.e-con {
  position: relative;
  width: 1140px;
  height: 1161px;
  background: #F9FAFD;
  box-shadow: 0px 5px 35px rgba(30, 34, 40, 0.07);
  border-radius: 24px;
}

.dbg-services .svc-card-2-header.e-con {
  position: absolute;
  left: calc(50% - 1140px/2);
  top: 0px;
  width: 1140px;
  height: 80px;
  background: #EDF2FF;
  border-radius: 24px 24px 16px 16px;
}

.dbg-services .svc-card-2-title {
  flex: 0 0 1032px;
  width: 1032px;
}

.dbg-services .svc-card-2-toggle.e-con {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transform: rotate(-180deg);
  transition: transform 0.39s ease;
  cursor: pointer;
}

.dbg-services .svc-card-2-toggle-icon {
  position: absolute;
  left: 14px;
  top: 19px;
  width: 20px;
  height: 11px;
}
.dbg-services .svc-card-2-toggle-icon img {
  width: 20px;
  height: 11px;
  display: block;
}

/* Frame 91 (Card 3 / "Cong Ty Thu Ky" outer wrapper) -- corrected
   2026-08-19 from the earlier generic 1161px/#F9FAFD placeholder (set
   before this card's real expanded size was known) to Figma's actual
   given spec for this card specifically: height 820px, background
   #F8FAFD (one step darker than card 1/2's #F9FAFD -- confirmed
   intentional per-card variation, not a typo, matches literal spec). */
.dbg-services .svc-card-3.e-con {
  position: relative;
  z-index: 0;
  width: 1140px;
  height: 820px;
  background: #F8FAFD;
  box-shadow: 0px 5px 35px rgba(30, 34, 40, 0.07);
  border-radius: 24px;
}

.dbg-services .svc-card-3-header.e-con {
  position: absolute;
  left: calc(50% - 1140px/2);
  top: 0px;
  width: 1140px;
  height: 80px;
  background: #EDF2FF;
  border-radius: 24px 24px 16px 16px;
}

.dbg-services .svc-card-3-title {
  flex: 0 0 1032px;
  width: 1032px;
}

.dbg-services .svc-card-3-toggle.e-con {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transform: rotate(-180deg);
  transition: transform 0.39s ease;
  cursor: pointer;
}

.dbg-services .svc-card-3-toggle-icon {
  position: absolute;
  left: 14px;
  top: 19px;
  width: 20px;
  height: 11px;
}
.dbg-services .svc-card-3-toggle-icon img {
  width: 20px;
  height: 11px;
  display: block;
}

.dbg-services .svc-card-4.e-con {
  position: relative;
  z-index: 0;
  width: 1140px;
  height: 752px;
  background: #F9F9FC;
  box-shadow: 0px 5px 35px rgba(30, 34, 40, 0.07);
  border-radius: 24px;
}

.dbg-services .svc-card-4-header.e-con {
  position: absolute;
  left: calc(50% - 1140px/2);
  top: 0px;
  width: 1140px;
  height: 80px;
  background: #EDF2FF;
  border-radius: 24px 24px 16px 16px;
}

.dbg-services .svc-card-4-title {
  flex: 0 0 1032px;
  width: 1032px;
}

.dbg-services .svc-card-4-toggle.e-con {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transform: rotate(-180deg);
  transition: transform 0.39s ease;
  cursor: pointer;
}

.dbg-services .svc-card-4-toggle-icon {
  position: absolute;
  left: 14px;
  top: 19px;
  width: 20px;
  height: 11px;
}
.dbg-services .svc-card-4-toggle-icon img {
  width: 20px;
  height: 11px;
  display: block;
}
/* ===== Vector 4 (page-level, spans Quote/Services boundary) =====
   Confirmed with the user (2026-08-16): top:2524px is Figma-GLOBAL canvas
   Y (not local to Services), so converted via the established formula
   local = global - 96 (Figma's in-canvas header-mockup offset): 2524-96 =
   2428. That lands it starting inside the Quote/Services gap and
   extending 375px down, ending at local 2803 -- consistent with this
   project's existing pattern of thin decorative lines bleeding across a
   section boundary (Vector 2 at Hero/Who, Vector 3.1 at Who/Quote -- this
   one at Quote/Services).
   left: fixed 2026-08-16 (confirmed by the user -- "the canvas is only
   1440 so that 2px is a wrong Figma design issue"). Originally used
   calc(50% - 720px + 722px), copying Vector 3.1's pre-correction formula,
   with a comment wrongly claiming .page-vectors-overlay is full-viewport-
   width -- it is NOT: .page-vectors-overlay.e-con is capped at the same
   max-width:1440px + margin:auto as every other section (see that rule
   above), so dead-center within it is simply 720px (half of 1440), no
   viewport-relative calc needed at all. The +2px was the same stray
   Figma export artifact already documented for Vector 3.1.
   Opacity: confirmed baked into the PNG itself via GD sampling (~29.9%),
   same as every other vector asset in this build -- no separate CSS
   opacity applied (would compound to ~9%). */
.elementor-905 .page-vector-4-line {
  position: absolute;
  left: 720px;
  top: 2428px;
  width: 2px;
  height: 375px;
  z-index: 10;
}
.elementor-905 .page-vector-4-line img {
  width: 2px;
  height: 375px;
  display: block;
}
/* Explicit stacking directive (2026-08-16, user request: "Push the Frame
   Service and its content to front (Frame 16 inside Quote Frame set to
   back)"). Verified via live screenshot this was already correct --
   .dbg-services (z-index:2) already beats .quote-pattern-frame (z-index:1)
   at the top-level stacking competition (both are position:relative/
   absolute siblings under the page root with no intervening stacking
   context), so Services' real content already paints above the bled-
   through grid texture wherever they overlap. Made explicit here anyway
   so the intent isn't left implicit: pins Frame16 to the back of its own
   local stacking context (relative to quote-pattern-radial's z-index:2
   within that same context, unchanged) rather than relying on its
   default z-index:auto. */
.dbg-quote .quote-pattern-frame16.e-con {
  z-index: 0;
}

/* ===== Frame 161 (2026-08-16, corrected placement) =====
   3 service-highlight items (icon + text). User corrected parenting
   twice: first said direct child of .dbg-services, then "Frame 164"
   (ambiguous -- collided with our own header's name), finally confirmed
   this actually nests inside Card 1 / Frame 74 (svc-card-1), in the empty
   body area below its 80px header. left:0/top:322/359x652 unchanged --
   these were always meant to be local to Frame 74's own box, and since
   .svc-card-1.e-con already has position:relative (for its header's own
   absolute positioning), re-parenting the DOM node was the only change
   needed -- the numbers resolve correctly against the new nearest
   positioned ancestor automatically. Being position:absolute, it doesn't
   contribute to Card 1's own height (already fixed at 1161/80 depending
   on expand state) -- and naturally gets clipped out of view when Card 1
   is collapsed (overflow:hidden + starts at local Y 322, past an 80px
   collapsed card's visible area), which is the correct behavior: body
   content should only show when the card is expanded.
   Frame 77/78/79 text: only Frame 77's was directly confirmed unique;
   78/79 were duplicated-text artifacts in the original paste, corrected
   per the user's explicit distinct text (2026-08-16), not reused from the
   older figma-snapshot.md paraphrase. */
.dbg-services .svc-frame-161.e-con {
  position: absolute;
  left: 0px;
  top: 322px;
  width: 359px;
  height: 652px;
}

.dbg-services .svc-item-1.e-con,
.dbg-services .svc-item-2.e-con,
.dbg-services .svc-item-3.e-con {
  width: 359px;
  height: 201.33px;
}

.dbg-services .svc-item-1-iconbox.e-con,
.dbg-services .svc-item-2-iconbox.e-con,
.dbg-services .svc-item-3-iconbox.e-con {
  position: relative;
  width: 154px;
  height: 110px;
  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.25));
}

.dbg-services .svc-item-1-text,
.dbg-services .svc-item-2-text,
.dbg-services .svc-item-3-text {
  width: 273px;
  height: 48px;
}

/* Icon / Map (image 584, attachment 944) */
.dbg-services .svc-item-1-icon {
  position: absolute;
  width: 82.63px;
  left: calc(50% - 82.63px/2 + 0.5px);
  top: 2px;
  bottom: 2px;
}
.dbg-services .svc-item-1-icon img {
  width: 82.63px;
  height: 106px;
  display: block;
}

/* Icon / Shield (image 580, attachment 945) */
.dbg-services .svc-item-2-icon {
  position: absolute;
  width: 91.34px;
  left: calc(50% - 91.34px/2 - 0.5px);
  top: 2px;
  bottom: 2px;
}
.dbg-services .svc-item-2-icon img {
  width: 91.34px;
  height: 106px;
  display: block;
}

/* Icon / Document (attachment 946) */
.dbg-services .svc-item-3-icon {
  position: absolute;
  height: 105.24px;
  left: 3px;
  right: 3px;
  top: calc(50% - 105.24px/2 + 0px);
}
.dbg-services .svc-item-3-icon img {
  width: 148px;
  height: 105.24px;
  display: block;
}
/* ===== Frame 162 (2026-08-16) =====
   Mirror of Frame 161, same parent (Card 1 / svc-card-1 body area),
   positioned to the right: left:781/top:322, 359x652. 3 items (Frame 76
   Bank, Frame 75 Mapping, "Frame 74" Paper -- that last name collides
   with the accordion card's own name, purely coincidental Figma naming,
   see svc-item2-3 below to avoid confusion with .svc-card-1). Text for
   all 3 confirmed distinct by the user (2026-08-16), not reused from the
   duplicated-placeholder artifact in the original paste. */
.svc-card-1 .svc-frame-162.e-con {
  position: absolute;
  left: 781px;
  top: 322px;
  width: 359px;
  height: 652px;
}

.dbg-services .svc-item2-1.e-con,
.dbg-services .svc-item2-2.e-con,
.dbg-services .svc-item2-3.e-con {
  width: 359px;
  height: 201.33px;
}

.dbg-services .svc-item2-1-iconbox.e-con,
.dbg-services .svc-item2-2-iconbox.e-con,
.dbg-services .svc-item2-3-iconbox.e-con {
  position: relative;
  width: 154px;
  height: 110px;
  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.25));
}

.dbg-services .svc-item2-1-text,
.dbg-services .svc-item2-3-text {
  width: 273px;
  height: 48px;
}
.dbg-services .svc-item2-2-text {
  width: 273px;
  height: 72px;
}

/* Icon / Bank (image 583, attachment 947) */
.dbg-services .svc-item2-1-icon {
  position: absolute;
  width: 129.83px;
  left: calc(50% - 129.83px/2 - 0.5px);
  top: 2px;
  bottom: 2px;
}
.dbg-services .svc-item2-1-icon img {
  width: 129.83px;
  height: 106px;
  display: block;
}

/* Icon / Mapping (image 1410, attachment 948) */
.dbg-services .svc-item2-2-icon {
  position: absolute;
  width: 118.6px;
  left: calc(50% - 118.6px/2);
  top: 2px;
  bottom: 2px;
}
.dbg-services .svc-item2-2-icon img {
  width: 118.6px;
  height: 106px;
  display: block;
}

/* Icon / Paper (image 581, attachment 949) */
.dbg-services .svc-item2-3-icon {
  position: absolute;
  width: 124.74px;
  left: calc(50% - 124.74px/2 - 0.5px);
  top: 2px;
  bottom: 2px;
}
.dbg-services .svc-item2-3-icon img {
  width: 124.74px;
  height: 106px;
  display: block;
}

.svc-frame-163.elementor-widget {
  position: absolute;
  left: calc(50% - 554px/2);
  top: 307px;
  width: 554px;
  height: 652px;
  z-index: 1;
}

.svc-frame-163 img {
  width: 554px;
  height: 652px;
  display: block;
}

.svc-frame-67.e-con {
  position: absolute;
  left: calc(50% - 1140px/2);
  top: 128px;
  width: 1140px;
  height: 104px;
}

.svc-frame-67-title.elementor-widget {
  width: 1140px;
  align-self: stretch;
}

.svc-frame-67-title .elementor-widget-container {
  line-height: 1;
}

.elementor-905 .svc-frame-67-title .elementor-heading-title {
  background: linear-gradient(90.3deg, #3C77FF 31.56%, #F1743A 61.31%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.svc-frame-67-desc.elementor-widget {
  width: 749px;
}
.svc-card-1-cta.e-con {
  box-sizing: border-box;
  position: absolute;
  left: calc(50% - 184px/2);
  top: 1062px;
  width: 184px;
  height: 48px;
  background: #3C77FF;
  border: 2px solid #244799;
  border-radius: 8px;
}

.svc-card-1-cta-label.elementor-widget {
  width: 92px;
}

.svc-card-1-cta-label .elementor-widget-container {
  line-height: 1;
}

.svc-card-1-cta-icon.elementor-widget {
  width: 13px;
  height: 13px;
}

.svc-card-1-cta-icon.elementor-widget img {
  width: 13px;
  height: 13px;
  display: block;
  vertical-align: top;
}
.svc-card-1-cta-icon .elementor-widget-container {
  line-height: 1;
}

.svc-card-1-cta.e-con {
  transition: background 0.2s ease, border-color 0.2s ease;
}

.svc-card-1-cta.e-con:hover {
  background: #F1743A;
  border: 2px solid #FBD4C2;
}
.svc-card-1-cta-icon.elementor-widget img {
  transition: transform 0.2s ease;
}

.svc-card-1-cta.e-con:hover .svc-card-1-cta-icon.elementor-widget img {
  transform: rotate(45deg);
}
.elementor-905 .page-hinh-1.e-con {
  position: absolute;
  left: 707px;
  top: 2712px;
  width: 30px;
  height: 30px;
  background: #3C77FF;
  border-radius: 1px;
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1));
  z-index: 11;
}
.elementor-905 .page-vector-5-line.elementor-widget {
  position: absolute;
  left: 720px;
  top: 2959px;
  width: 2px;
  height: 78px;
  z-index: 10;
}

.page-vector-5-line.elementor-widget img {
  width: 2px;
  height: 78px;
  display: block;
}

.page-vector-5-line .elementor-widget-container {
  line-height: 1;
}
.svc-card-1-pattern-light.e-con {
  position: absolute;
  left: calc(50% - 1440px/2);
  top: calc(50% - 1045px/2 + 55px);
  width: 1440px;
  height: 1045px;
  background: #FFFFFF;
  z-index: 0;
}

.svc-card-1-pattern-radial.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1440px;
  height: 1045px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F9FAFD 100%);
  z-index: 2;
}

.svc-card-1-pattern-frame16.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1440px;
  height: 1045px;
  background-image: url('https://offshoresecretaryservices.com/wp-content/uploads/2026/08/svc-card-1-pattern-frame16-scaled.png');
  background-repeat: repeat-y;
  background-size: 1440px 421px;
  z-index: 0;
}
.svc-frame-129.e-con {
  position: absolute;
  left: calc(50% - 1139px/2 - 0.5px);
  top: 128px;
  width: 1139px;
}
/* ===== Frame 129 (Card 2 / "Tài Khoản Doanh Nghiệp" body) — 2026-08-18 ===== */

/* Frame 67 clone (heading + description) */
.svc129-67.e-con {
  flex: 0 0 auto;
  width: 943px;
}
.svc129-67-title.elementor-widget {
  width: 943px;
  align-self: stretch;
}
.svc129-67-title .elementor-widget-container {
  line-height: 1;
}
.elementor-905 .svc129-67-title .elementor-heading-title {
  background: linear-gradient(90.3deg, #3C77FF 31.56%, #F1743A 61.31%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.svc129-67-desc.elementor-widget {
  width: 749px;
}

/* Frame 87 (5 feature bullets) */
.svc129-87.e-con {
  flex: 0 0 auto;
  width: 1071px;
}
.svc129-feat-1.e-con,
.svc129-feat-2.e-con,
.svc129-feat-3.e-con,
.svc129-feat-4.e-con,
.svc129-feat-5.e-con {
  flex: 0 0 auto;
  width: 196px;
}
.svc129-feat-1-iconbox.e-con,
.svc129-feat-2-iconbox.e-con,
.svc129-feat-3-iconbox.e-con,
.svc129-feat-4-iconbox.e-con,
.svc129-feat-5-iconbox.e-con {
  flex: 0 0 auto;
  width: auto;
}
.svc129-feat-1-icon.elementor-widget,
.svc129-feat-2-icon.elementor-widget,
.svc129-feat-3-icon.elementor-widget,
.svc129-feat-4-icon.elementor-widget,
.svc129-feat-5-icon.elementor-widget {
  width: auto;
}
.svc129-feat-1-icon.elementor-widget img,
.svc129-feat-2-icon.elementor-widget img,
.svc129-feat-3-icon.elementor-widget img,
.svc129-feat-4-icon.elementor-widget img,
.svc129-feat-5-icon.elementor-widget img {
  display: block;
}
.svc129-feat-1-icon .elementor-widget-container,
.svc129-feat-2-icon .elementor-widget-container,
.svc129-feat-3-icon .elementor-widget-container,
.svc129-feat-4-icon .elementor-widget-container,
.svc129-feat-5-icon .elementor-widget-container {
  line-height: 1;
}
.svc129-feat-1-text.elementor-widget,
.svc129-feat-2-text.elementor-widget,
.svc129-feat-3-text.elementor-widget,
.svc129-feat-4-text.elementor-widget,
.svc129-feat-5-text.elementor-widget {
  flex: 1 1 auto;
  min-width: 100px;
}

/* Frame 90 (3 pricing cards) */
.svc129-90.e-con {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1139px;
}
.svc129-card-1.e-con,
.svc129-card-2.e-con,
.svc129-card-3.e-con {
  flex: 0 0 auto;
  width: 318px;
  background: #F2F5FE;
  border-radius: 16px;
  box-sizing: border-box;
}
.svc129-card-1-iconwrap.e-con,
.svc129-card-2-iconwrap.e-con,
.svc129-card-3-iconwrap.e-con {
  position: relative;
  width: 318px;
  height: 226px;
  filter: drop-shadow(0px 5px 35px rgba(30, 34, 40, 0.07));
}

/* Icon / Mobile-banking (attachment 962) */
.svc129-card-1-icon.elementor-widget {
  position: absolute;
  left: 14px;
  width: 290px;
  top: 9.89px;
  height: 206.22px;
}
.svc129-card-1-icon.elementor-widget img {
  width: 290px;
  height: 206.22px;
  display: block;
}

/* Icon / Cash (attachment 963) */
.svc129-card-2-icon.elementor-widget {
  position: absolute;
  left: 36.655px;
  width: 244.69px;
  top: 26px;
  height: 174px;
}
.svc129-card-2-icon.elementor-widget img {
  width: 244.69px;
  height: 174px;
  display: block;
}

/* Icon / Card (attachment 964) */
.svc129-card-3-icon.elementor-widget {
  position: absolute;
  left: 21px;
  width: 276px;
  top: 15px;
  height: 196px;
}
.svc129-card-3-icon.elementor-widget img {
  width: 276px;
  height: 196px;
  display: block;
}

.svc129-card-1-icon .elementor-widget-container,
.svc129-card-2-icon .elementor-widget-container,
.svc129-card-3-icon .elementor-widget-container {
  line-height: 1;
}

.svc129-card-1-body.e-con,
.svc129-card-2-body.e-con,
.svc129-card-3-body.e-con {
  flex: 0 0 auto;
  width: 286px;
}
.svc129-card-1-title.elementor-widget,
.svc129-card-2-title.elementor-widget,
.svc129-card-3-title.elementor-widget {
  width: 286px;
  align-self: stretch;
}
.svc129-card-1-title .elementor-widget-container,
.svc129-card-2-title .elementor-widget-container,
.svc129-card-3-title .elementor-widget-container {
  line-height: 1;
}
.svc129-card-1-desc.elementor-widget,
.svc129-card-2-desc.elementor-widget,
.svc129-card-3-desc.elementor-widget {
  width: 248px;
}

/* CTA button ("Xem thêm") — mirrors .svc-card-1-cta */
.svc129-cta.e-con {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 184px;
  height: 48px;
  background: #3C77FF;
  border: 2px solid #244799;
  border-radius: 8px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.svc129-cta.e-con:hover {
  background: #F1743A;
  border: 2px solid #FBD4C2;
}
.svc129-cta-label.elementor-widget {
  width: 92px;
}
.svc129-cta-label .elementor-widget-container {
  line-height: 1;
}
.svc129-cta-icon.elementor-widget {
  width: 13px;
  height: 13px;
}
.svc129-cta-icon.elementor-widget img {
  width: 13px;
  height: 13px;
  display: block;
  vertical-align: top;
  transition: transform 0.2s ease;
}
.svc129-cta-icon .elementor-widget-container {
  line-height: 1;
}
.svc129-cta.e-con:hover .svc129-cta-icon.elementor-widget img {
  transform: rotate(45deg);
}

/* ===== Frame 129 fixes — 2026-08-18 (icon sizing + card height) ===== */

/* Icons are 2x exports (native: search 35x35, phone 36x36, graph 40x32,
   monitor 44x29, union 32x40) — display at half native size, not native. */
.svc129-feat-1-icon.elementor-widget {
  width: 17.5px;
  height: 17.5px;
}
.svc129-feat-2-icon.elementor-widget {
  width: 18px;
  height: 18px;
}
.svc129-feat-3-icon.elementor-widget {
  width: 20px;
  height: 16px;
}
.svc129-feat-4-icon.elementor-widget {
  width: 22px;
  height: 14.5px;
}
.svc129-feat-5-icon.elementor-widget {
  width: 16px;
  height: 20px;
}
.svc129-feat-1-icon.elementor-widget img {
  width: 17.5px;
  height: 17.5px;
}
.svc129-feat-2-icon.elementor-widget img {
  width: 18px;
  height: 18px;
}
.svc129-feat-3-icon.elementor-widget img {
  width: 20px;
  height: 16px;
}
.svc129-feat-4-icon.elementor-widget img {
  width: 22px;
  height: 14.5px;
}
.svc129-feat-5-icon.elementor-widget img {
  width: 16px;
  height: 20px;
}

/* All 3 pricing cards should be equal height (matches the original Figma
   spec, which gave every card an explicit 564px regardless of copy length) */
.svc129-card-1.e-con,
.svc129-card-2.e-con,
.svc129-card-3.e-con {
  height: 564px;
}

/* ===== Frame 129 fix round 2 — 2026-08-18 =====
   Real root cause of the uneven icon sizes: Figma's own numbers for
   Frame 87 don't reconcile (5 x 196px items + 4 x 51px gaps = 1184px,
   but Frame 87 itself is only 1071px) AND every `flex: 0 0 auto`
   override in this block used a 2-class selector (`.custom.e-con`),
   which TIES in specificity with Elementor's own `.e-con.e-flex{
   --flex-shrink:1}` base rule (elementor-notes.md's documented
   flex-shrink specificity-tie gotcha) — Elementor's stylesheet loads
   after ours, so ties go to Elementor, meaning flex-shrink stayed at 1
   the whole time regardless of what my rule said. With real shrink
   pressure (1184 > 1071), every feature row silently compressed, and
   since the text had a min-width floor and the icon didn't, the icon
   absorbed almost all of the compression — differently per icon,
   because each icon's own undamaged size differed. Fixed by bumping
   every override to 3 classes (`.custom.e-con.e-flex`) so it wins
   specificity outright instead of relying on source order, and letting
   each feature row Hug its own real content (icon + gap + a fixed
   164px text column, matching Figma's literal per-item text box width)
   instead of forcing a uniform 196px row that never fit. */
.svc129-87.e-con.e-flex {
  flex: 0 0 auto;
  width: 1071px;
}
.svc129-feat-1.e-con.e-flex,
.svc129-feat-2.e-con.e-flex,
.svc129-feat-3.e-con.e-flex,
.svc129-feat-4.e-con.e-flex,
.svc129-feat-5.e-con.e-flex {
  flex: 0 0 auto;
  width: auto;
}
.svc129-feat-1-iconbox.e-con.e-flex,
.svc129-feat-2-iconbox.e-con.e-flex,
.svc129-feat-3-iconbox.e-con.e-flex,
.svc129-feat-4-iconbox.e-con.e-flex,
.svc129-feat-5-iconbox.e-con.e-flex {
  flex: 0 0 auto;
  width: auto;
}
.svc129-feat-1-text.elementor-widget,
.svc129-feat-2-text.elementor-widget,
.svc129-feat-3-text.elementor-widget,
.svc129-feat-4-text.elementor-widget,
.svc129-feat-5-text.elementor-widget {
  flex: 0 0 auto;
  width: 164px;
  min-width: 0;
}

/* Same specificity-tie hardening applied to every other flex:0 0 auto
   override built in this Frame 129 pass, even where it currently
   "looks right" by luck (no shrink pressure yet) — per the project's
   standing rule to fix this class of bug up front rather than waiting
   to hit it again on the next content change. */
.svc129-67.e-con.e-flex {
  flex: 0 0 auto;
  width: 943px;
}
.svc129-90.e-con.e-flex {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1139px;
}
.svc129-card-1.e-con.e-flex,
.svc129-card-2.e-con.e-flex,
.svc129-card-3.e-con.e-flex {
  flex: 0 0 auto;
  width: 318px;
  height: 564px;
}
.svc129-card-1-body.e-con.e-flex,
.svc129-card-2-body.e-con.e-flex,
.svc129-card-3-body.e-con.e-flex {
  flex: 0 0 auto;
  width: 286px;
}
.svc129-cta.e-con.e-flex {
  flex: 0 0 auto;
  width: 184px;
  height: 48px;
}

.svc129-87.e-con.e-flex {
  flex: 0 0 auto;
  width: auto;
}

/* ===== Card 3 (Frame 91) Frame 67 — heading + description — 2026-08-19 ===== */
.svc-card3-67.e-con.e-flex {
  position: absolute;
  left: calc(50% - 943px/2 - 0.5px);
  top: 128px;
  width: 943px;
  height: 104px;
}
.svc-card3-67-title.elementor-widget {
  width: 943px;
  align-self: stretch;
}
.svc-card3-67-title .elementor-widget-container {
  line-height: 1;
}
.elementor-905 .svc-card3-67-title .elementor-heading-title {
  background: linear-gradient(90.3deg, #3C77FF 31.56%, #F1743A 61.31%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.svc-card3-67-desc.elementor-widget {
  width: 749px;
}

/* ===== Card 3 (Frame 91) Frame 92 — 8 feature bullets grid — 2026-08-19 =====
   Icons are 2x exports (native px: monitor 32x40, document/union 32x40,
   mail 40x32, return 32x37, shield 32x42, book 40x34, message 36x36) —
   same convention confirmed in Frame 129's feature-icon fix — display at
   half native size. */
.svc-card3-92.e-con.e-flex {
  position: absolute;
  left: 66px;
  top: 280px;
  width: 453px;
  height: 385px;
}

.svc-card3-feat-3.e-con.e-flex,
.svc-card3-feat-4.e-con.e-flex,
.svc-card3-feat-5.e-con.e-flex,
.svc-card3-feat-6.e-con.e-flex,
.svc-card3-feat-7.e-con.e-flex,
.svc-card3-feat-8.e-con.e-flex,
.svc-card3-feat-9.e-con.e-flex,
.svc-card3-feat-10.e-con.e-flex {
  position: absolute;
  width: 210px;
  height: 73px;
}
.svc-card3-feat-3.e-con.e-flex  { left: 0px;   top: 0px; }
.svc-card3-feat-4.e-con.e-flex  { left: 243px; top: 0px; }
.svc-card3-feat-6.e-con.e-flex  { left: 0px;   top: 104px; }
.svc-card3-feat-7.e-con.e-flex  { left: 243px; top: 104px; }
.svc-card3-feat-5.e-con.e-flex  { left: 0px;   top: 208px; }
.svc-card3-feat-8.e-con.e-flex  { left: 243px; top: 208px; }
.svc-card3-feat-9.e-con.e-flex  { left: 0px;   top: 312px; }
.svc-card3-feat-10.e-con.e-flex { left: 243px; top: 312px; }

.svc-card3-feat-3-iconbox.e-con.e-flex,
.svc-card3-feat-4-iconbox.e-con.e-flex,
.svc-card3-feat-5-iconbox.e-con.e-flex,
.svc-card3-feat-6-iconbox.e-con.e-flex,
.svc-card3-feat-7-iconbox.e-con.e-flex,
.svc-card3-feat-8-iconbox.e-con.e-flex,
.svc-card3-feat-9-iconbox.e-con.e-flex,
.svc-card3-feat-10-iconbox.e-con.e-flex {}
.svc-card3-feat-3-icon.elementor-widget,
.svc-card3-feat-3-icon.elementor-widget img { width: 16px; height: 20px; }
.svc-card3-feat-4-icon.elementor-widget,
.svc-card3-feat-4-icon.elementor-widget img { width: 16px; height: 20px; }
.svc-card3-feat-5-icon.elementor-widget,
.svc-card3-feat-5-icon.elementor-widget img { width: 16px; height: 21px; }
.svc-card3-feat-6-icon.elementor-widget,
.svc-card3-feat-6-icon.elementor-widget img { width: 20px; height: 16px; }
.svc-card3-feat-7-icon.elementor-widget,
.svc-card3-feat-7-icon.elementor-widget img { width: 16px; height: 18.5px; }
.svc-card3-feat-8-icon.elementor-widget,
.svc-card3-feat-8-icon.elementor-widget img { width: 20px; height: 17px; }
.svc-card3-feat-9-icon.elementor-widget,
.svc-card3-feat-9-icon.elementor-widget img { width: 18px; height: 18px; }
.svc-card3-feat-10-icon.elementor-widget,
.svc-card3-feat-10-icon.elementor-widget img { width: 20px; height: 16px; }

.svc-card3-feat-3-icon.elementor-widget img,
.svc-card3-feat-4-icon.elementor-widget img,
.svc-card3-feat-5-icon.elementor-widget img,
.svc-card3-feat-6-icon.elementor-widget img,
.svc-card3-feat-7-icon.elementor-widget img,
.svc-card3-feat-8-icon.elementor-widget img,
.svc-card3-feat-9-icon.elementor-widget img,
.svc-card3-feat-10-icon.elementor-widget img {
  display: block;
}
.svc-card3-feat-3-icon .elementor-widget-container,
.svc-card3-feat-4-icon .elementor-widget-container,
.svc-card3-feat-5-icon .elementor-widget-container,
.svc-card3-feat-6-icon .elementor-widget-container,
.svc-card3-feat-7-icon .elementor-widget-container,
.svc-card3-feat-8-icon .elementor-widget-container,
.svc-card3-feat-9-icon .elementor-widget-container,
.svc-card3-feat-10-icon .elementor-widget-container {
  line-height: 1;
}

.svc-card3-feat-3-text.elementor-widget,
.svc-card3-feat-4-text.elementor-widget,
.svc-card3-feat-5-text.elementor-widget,
.svc-card3-feat-6-text.elementor-widget,
.svc-card3-feat-7-text.elementor-widget,
.svc-card3-feat-8-text.elementor-widget,
.svc-card3-feat-10-text.elementor-widget {
  flex: 1 1 auto;
  min-width: 100px;
  width: 178px;
}
.svc-card3-feat-9-text.elementor-widget {
  flex: 1 1 auto;
  min-width: 100px;
  width: 178px;
}

.svc-card3-feat-3-iconbox.e-con.e-flex,
.svc-card3-feat-4-iconbox.e-con.e-flex,
.svc-card3-feat-5-iconbox.e-con.e-flex,
.svc-card3-feat-6-iconbox.e-con.e-flex,
.svc-card3-feat-7-iconbox.e-con.e-flex,
.svc-card3-feat-8-iconbox.e-con.e-flex,
.svc-card3-feat-9-iconbox.e-con.e-flex,
.svc-card3-feat-10-iconbox.e-con.e-flex {
  flex: 0 0 auto;
  width: auto;
}


/* ===== Card 3 (svc-card-3) — Frame 40 photo + decorative shapes + dot-layout image + CTA ===== */
.svc-card3-frame40.elementor-widget {
  position: absolute;
  left: 587px;
  top: 292px;
  width: 493px;
  height: 352px;
  background-color: #8591C1;
  border-radius: 16px;
  overflow: hidden;
  z-index: 4;
}
.svc-card3-frame40.elementor-widget img {
  width: 493px;
  height: 352px;
  display: block;
  object-fit: cover;
  border-radius: 16px;
}
.svc-card3-frame40 .elementor-widget-container {
  line-height: 1;
}

.svc-card3-shape-1.elementor-widget,
.svc-card3-shape-2.elementor-widget {
  position: absolute;
  width: 142.02px;
  height: 100.14px;
  opacity: 0.8;
}
.svc-card3-shape-1.elementor-widget { left: 955px; top: 263.25px; z-index: 3; }
.svc-card3-shape-2.elementor-widget { left: 574.75px; top: 581.97px; z-index: 3; }
.svc-card3-shape-1.elementor-widget img,
.svc-card3-shape-2.elementor-widget img {
  width: 142.02px;
  height: 100.14px;
  display: block;
}
.svc-card3-shape-1 .elementor-widget-container,
.svc-card3-shape-2 .elementor-widget-container {
  line-height: 1;
}

.svc-card3-image.elementor-widget {
  position: absolute;
  left: 754px;
  top: 261px;
  width: 270px;
  height: 411px;
  border-radius: 50px;
  overflow: hidden;
  z-index: -3;
}
.svc-card3-image.elementor-widget img {
  width: 270px;
  height: 411px;
  display: block;
  object-fit: cover;
  border-radius: 50px;
}
.svc-card3-image .elementor-widget-container {
  line-height: 1;
}

.svc-card3-cta.e-con {
  box-sizing: border-box;
  position: absolute;
  left: calc(50% - 184px/2);
  top: 719px;
  width: 184px;
  height: 48px;
  background: #3C77FF;
  border: 2px solid #244799;
  border-radius: 8px;
  z-index: 5;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.svc-card3-cta.e-con:hover {
  background: #F1743A;
  border: 2px solid #FBD4C2;
}
.svc-card3-cta-label.elementor-widget {
  width: 92px;
}
.svc-card3-cta-label .elementor-widget-container {
  line-height: 1;
}
.svc-card3-cta-icon.elementor-widget {
  width: 13px;
  height: 13px;
}
.svc-card3-cta-icon.elementor-widget img {
  width: 13px;
  height: 13px;
  display: block;
  vertical-align: top;
  transition: transform 0.2s ease;
}
.svc-card3-cta-icon .elementor-widget-container {
  line-height: 1;
}
.svc-card3-cta.e-con:hover .svc-card3-cta-icon.elementor-widget img {
  transform: rotate(45deg);
}


/* ===== Card 3 (svc-card-3) — Pattern Light background stack (radial fade + tiled Frame 16 texture), reuses Card 1's asset (attachment 956) ===== */
.svc-card3-pattern-light.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1140px;
  height: 740px;
  z-index: -2;
}
.svc-card3-pattern-radial.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1140px;
  height: 740px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F9FAFD 100%);
  z-index: 2;
}
.svc-card3-pattern-frame16.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1140px;
  height: 740px;
  background-image: url('https://offshoresecretaryservices.com/wp-content/uploads/2026/08/svc-card-1-pattern-frame16-scaled.png');
  background-repeat: repeat-y;
  background-size: 1140px 333.29px;
  z-index: 0;
}


/* ===== Card 4 (svc-card-4) — Frame 67 (gradient heading + description) ===== */
.svc-card4-67.e-con.e-flex {
  position: absolute;
  left: calc(50% - 943px/2 - 0.5px);
  top: 145px;
  width: 943px;
  height: 104px;
}
.svc-card4-67-title.elementor-widget {
  width: 943px;
  align-self: stretch;
}
.svc-card4-67-title .elementor-widget-container {
  line-height: 1;
}
.svc-card4-67-title .elementor-heading-title {
  background: linear-gradient(90.3deg, #3C77FF 31.56%, #F1743A 61.31%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.svc-card4-67-desc.elementor-widget {
  width: 749px;
}


/* ===== Card 4 (svc-card-4) — Frame 93 (4 feature cards: Booking / Accounting / Tax / Auditing) ===== */
.svc-card4-93.e-con.e-flex {
  position: absolute;
  left: calc(50% - 1027px/2 - 0.5px);
  top: 297px;
  width: 1027px;
  height: 316px;
}

.svc-card4-feat-4.e-con.e-flex,
.svc-card4-feat-5.e-con.e-flex,
.svc-card4-feat-6.e-con.e-flex,
.svc-card4-feat-8.e-con.e-flex {
  flex: 0 0 auto;
  width: 232px;
  height: 316px;
  background: #F2F5FE;
  border-radius: 16px;
}

.svc-card4-feat-4-icon.elementor-widget {
  flex: 0 0 auto;
  position: relative;
  width: 152px;
  height: 152px;
}
.svc-card4-feat-4-icon.elementor-widget img {
  position: absolute;
  left: calc(50% - 163.8px/2);
  top: 0px;
  width: 163.8px;
  height: 152px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.25));
}
.svc-card4-feat-4-icon .elementor-widget-container {
  line-height: 1;
}

.svc-card4-feat-5-icon.elementor-widget {
  flex: 0 0 auto;
  position: relative;
  width: 152px;
  height: 152px;
}
.svc-card4-feat-5-icon.elementor-widget img {
  position: absolute;
  left: calc(50% - 128.8px/2);
  top: -4px;
  width: 128.8px;
  height: 161px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.25));
}
.svc-card4-feat-5-icon .elementor-widget-container {
  line-height: 1;
}

.svc-card4-feat-6-icon.elementor-widget {
  flex: 0 0 auto;
  position: relative;
  width: 152px;
  height: 152px;
}
.svc-card4-feat-6-icon.elementor-widget img {
  position: absolute;
  left: calc(50% - 156.11px/2);
  top: -4px;
  width: 156.11px;
  height: 161px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.25));
}
.svc-card4-feat-6-icon .elementor-widget-container {
  line-height: 1;
}

.svc-card4-feat-8-icon.elementor-widget {
  flex: 0 0 auto;
  position: relative;
  width: 152px;
  height: 152px;
}
.svc-card4-feat-8-icon.elementor-widget img {
  position: absolute;
  left: calc(50% - 160.58px/2);
  top: -4px;
  width: 160.58px;
  height: 161px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.25));
}
.svc-card4-feat-8-icon .elementor-widget-container {
  line-height: 1;
}

.svc-card4-feat-4-textwrap.e-con.e-flex,
.svc-card4-feat-5-textwrap.e-con.e-flex,
.svc-card4-feat-6-textwrap.e-con.e-flex,
.svc-card4-feat-8-textwrap.e-con.e-flex {
  flex: 0 0 auto;
  align-self: stretch;
  width: 184px;
  height: 64px;
}

.svc-card4-feat-4-title.elementor-widget,
.svc-card4-feat-5-title.elementor-widget,
.svc-card4-feat-6-title.elementor-widget,
.svc-card4-feat-8-title.elementor-widget {
  flex: 0 0 auto;
  width: 204px;
}
.svc-card4-feat-4-title .elementor-widget-container,
.svc-card4-feat-5-title .elementor-widget-container,
.svc-card4-feat-6-title .elementor-widget-container,
.svc-card4-feat-8-title .elementor-widget-container {
  line-height: 1;
}


/* ===== Card 4 (svc-card-4) — Background (dot-pattern, reuses Hero's Pattern.png attachment 913, radial mask reveal) ===== */
.elementor-905 .dbg-services .svc-card-4 .svc-card4-background.elementor-widget {
  position: absolute;
  left: -64.182px;
  top: 97.17px;
  max-width: none;
  width: 1269.032px;
  height: 953.14px;
  overflow: hidden;
  z-index: -1;
}
.svc-card4-background.elementor-widget img {
  max-width: none;
  width: 1269.032px;
  height: 953.14px;
  display: block;
  object-fit: cover;
  mask-image: radial-gradient(46% 46% at 50% 47.2%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.03) 100%);
  -webkit-mask-image: radial-gradient(46% 46% at 50% 47.2%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.03) 100%);
}
.svc-card4-background .elementor-widget-container {
  line-height: 1;
}


/* ===== Card 4 Frame 93 — hover switch: 3D flip (front icon+title <-> back full description), vertical-axis (rotateX) flip like a card turning back-to-front ===== */
.svc-card4-feat-4.e-con.e-flex,
.svc-card4-feat-5.e-con.e-flex,
.svc-card4-feat-6.e-con.e-flex,
.svc-card4-feat-8.e-con.e-flex {
  perspective: 1200px;
}

.svc-card4-feat-4-flipper.e-con.e-flex,
.svc-card4-feat-5-flipper.e-con.e-flex,
.svc-card4-feat-6-flipper.e-con.e-flex,
.svc-card4-feat-8-flipper.e-con.e-flex {
  position: relative;
  width: 232px;
  height: 316px;
  transform-style: preserve-3d;
  transition: transform 0.4394s ease;
}
.svc-card4-feat-4.e-con.e-flex:hover .svc-card4-feat-4-flipper.e-con.e-flex,
.svc-card4-feat-5.e-con.e-flex:hover .svc-card4-feat-5-flipper.e-con.e-flex,
.svc-card4-feat-6.e-con.e-flex:hover .svc-card4-feat-6-flipper.e-con.e-flex,
.svc-card4-feat-8.e-con.e-flex:hover .svc-card4-feat-8-flipper.e-con.e-flex {
  transform: rotateY(180deg);
}

.svc-card4-feat-4-front.e-con,
.svc-card4-feat-5-front.e-con,
.svc-card4-feat-6-front.e-con,
.svc-card4-feat-8-front.e-con,
.svc-card4-feat-4-back.e-con,
.svc-card4-feat-5-back.e-con,
.svc-card4-feat-6-back.e-con,
.svc-card4-feat-8-back.e-con {
  position: absolute;
  left: 0;
  top: 0;
  width: 232px;
  height: 316px;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
}

.svc-card4-feat-4-front.e-con,
.svc-card4-feat-5-front.e-con,
.svc-card4-feat-6-front.e-con,
.svc-card4-feat-8-front.e-con {
  background: #F2F5FE;
}

.svc-card4-feat-4-back.e-con,
.svc-card4-feat-5-back.e-con,
.svc-card4-feat-6-back.e-con,
.svc-card4-feat-8-back.e-con {
  background: #FEF9F4;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-card4-feat-4-back.e-con .svc-card4-feat-4-hoverdesc.elementor-widget,
.svc-card4-feat-5-back.e-con .svc-card4-feat-5-hoverdesc.elementor-widget,
.svc-card4-feat-6-back.e-con .svc-card4-feat-6-hoverdesc.elementor-widget,
.svc-card4-feat-8-back.e-con .svc-card4-feat-8-hoverdesc.elementor-widget {
  width: 198px;
}

/* ===== Frame 94 (Special Support) ===== */
.elementor-905 .dbg-frame94.e-con {
  position: relative;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  background: #F8FAFD;
}

.dbg-frame94 .frame94-pattern-light.e-con {
  position: absolute;
  left: 0px;
  top: -35px;
  width: 1440px;
  height: 1032px;
  overflow: hidden;
  z-index: 0;
}
.dbg-frame94 .frame94-pattern-texture.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1440px;
  height: 1032px;
  background-image: url(https://offshoresecretaryservices.com/wp-content/uploads/2026/08/svc-card-1-pattern-frame16-scaled.png);
  background-repeat: repeat-y;
  background-size: 1440px 421px;
  z-index: 0;
}
.dbg-frame94 .frame94-pattern-radial.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1440px;
  height: 1032px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F9FAFD 100%);
  z-index: 1;
}

.dbg-frame94 .frame94-collage.e-con.e-flex {
  position: absolute;
  left: 735px;
  top: 92px;
  width: 555px;
  height: 507px;
  padding: 0;
  z-index: 2;
  filter: drop-shadow(0px 5px 35px rgba(30, 34, 40, 0.07));
}
.dbg-frame94 .frame94-collage-top.elementor-widget {
  flex: 0 0 auto;
  width: 555px;
  height: 279px;
}
.dbg-frame94 .frame94-collage-top.elementor-widget img {
  width: 555px;
  height: 279px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.dbg-frame94 .frame94-collage-bl.elementor-widget {
  flex: 0 0 auto;
  width: 261px;
  height: 208px;
  background-color: #8591C1;
  border-radius: 16px;
}
.dbg-frame94 .frame94-collage-bl.elementor-widget img {
  width: 261px;
  height: 208px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.dbg-frame94 .frame94-collage-br.elementor-widget {
  flex: 0 0 auto;
  width: 261px;
  height: 208px;
  background-color: #8591C1;
  border-radius: 16px;
}
.dbg-frame94 .frame94-collage-br.elementor-widget img {
  width: 261px;
  height: 208px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.dbg-frame94 .frame94-collage-top .elementor-widget-container,
.dbg-frame94 .frame94-collage-bl .elementor-widget-container,
.dbg-frame94 .frame94-collage-br .elementor-widget-container {
  line-height: 1;
}

.dbg-frame94 .frame94-content.e-con.e-flex {
  position: absolute;
  left: 149px;
  top: 92px;
  width: 574px;
  height: 553px;
  padding: 0;
  z-index: 2;
}
.dbg-frame94 .frame94-heading-block.e-con.e-flex {
  width: 574px;
  flex: 0 0 auto;
  padding: 0;
}
.dbg-frame94 .frame94-title.elementor-widget {
  width: 574px;
}
.dbg-frame94 .frame94-title .elementor-widget-container {
  line-height: 1;
}
.dbg-frame94 .frame94-desc.elementor-widget {
  width: 543px;
}

.dbg-frame94 .frame94-features.e-con.e-flex {
  width: 555px;
  flex: 0 0 auto;
  padding: 0;
}
.dbg-frame94 .frame94-feat.e-con.e-flex {
  width: 555px;
  height: 55.83px;
  flex: 0 0 auto;
  padding: 0;
}

.dbg-frame94 .frame94-feat-website-icon.elementor-widget { flex: 0 0 auto; }
.dbg-frame94 .frame94-feat-website-icon.elementor-widget img { width: 16px; height: 20px; display: block; }
.dbg-frame94 .frame94-feat-banking-icon.elementor-widget { flex: 0 0 auto; }
.dbg-frame94 .frame94-feat-banking-icon.elementor-widget img { width: 21px; height: 20.5px; display: block; }
.dbg-frame94 .frame94-feat-office-icon.elementor-widget { flex: 0 0 auto; }
.dbg-frame94 .frame94-feat-office-icon.elementor-widget img { width: 20px; height: 17px; display: block; }
.dbg-frame94 .frame94-feat-phone-icon.elementor-widget { flex: 0 0 auto; }
.dbg-frame94 .frame94-feat-phone-icon.elementor-widget img { width: 18px; height: 18px; display: block; }
.dbg-frame94 .frame94-feat-legal-icon.elementor-widget { flex: 0 0 auto; }
.dbg-frame94 .frame94-feat-legal-icon.elementor-widget img { width: 16px; height: 21px; display: block; }
.dbg-frame94 .frame94-feat-payment-icon.elementor-widget { flex: 0 0 auto; }
.dbg-frame94 .frame94-feat-payment-icon.elementor-widget img { width: 18px; height: 18px; display: block; }
.dbg-frame94 .frame94-feat-website-icon .elementor-widget-container,
.dbg-frame94 .frame94-feat-banking-icon .elementor-widget-container,
.dbg-frame94 .frame94-feat-office-icon .elementor-widget-container,
.dbg-frame94 .frame94-feat-phone-icon .elementor-widget-container,
.dbg-frame94 .frame94-feat-legal-icon .elementor-widget-container,
.dbg-frame94 .frame94-feat-payment-icon .elementor-widget-container {
  line-height: 1;
}

.dbg-frame94 .frame94-feat-website-text.elementor-widget,
.dbg-frame94 .frame94-feat-banking-text.elementor-widget,
.dbg-frame94 .frame94-feat-office-text.elementor-widget,
.dbg-frame94 .frame94-feat-phone-text.elementor-widget,
.dbg-frame94 .frame94-feat-legal-text.elementor-widget,
.dbg-frame94 .frame94-feat-payment-text.elementor-widget {
  flex: 1 1 auto;
}
/* ===== Frame 96 (Process Timeline) ===== */
.elementor-905 .dbg-frame96.e-con {
  position: relative;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  background: #F8F9FC;
}
.elementor-905 .dbg-frame96.is-card3.e-con {
  --min-height: 654px;
}

.dbg-frame96 .frame96-pattern-light.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  z-index: 0;
}
.dbg-frame96 .frame96-pattern-texture.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1440px;
  height: 1032px;
  background-image: url(https://offshoresecretaryservices.com/wp-content/uploads/2026/08/svc-card-1-pattern-frame16-scaled.png);
  background-repeat: repeat-y;
  background-size: 1440px 421px;
  z-index: 0;
}
.dbg-frame96 .frame96-pattern-radial.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1440px;
  height: 1032px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F9FAFD 100%);
  z-index: 1;
}

.dbg-frame96 .frame96-heading-block.e-con.e-flex {
  position: absolute;
  left: calc(50% - 943px/2 - 0.5px);
  top: 64px;
  width: 943px;
  height: 88px;
  padding: 0;
  z-index: 2;
}
.dbg-frame96 .frame96-title.elementor-widget {
  width: 943px;
}
.dbg-frame96 .frame96-title .elementor-widget-container {
  line-height: 1;
}
.dbg-frame96 .frame96-subtitle.elementor-widget {
  width: 943px;
}

.dbg-frame96 .frame96-step-row.e-con.e-flex {
  position: absolute;
  left: 150px;
  top: 206px;
  width: 1141px;
  height: 384px;
  padding: 0;
  z-index: 2;
}

.dbg-frame96 .frame96-photo-slot.e-con {
  position: relative;
  flex: 0 0 auto;
  width: 457px;
  height: 279px;
  padding: 0;
}
.dbg-frame96 .frame96-card-1-photo.elementor-widget,
.dbg-frame96 .frame96-card-2-photo.elementor-widget,
.dbg-frame96 .frame96-card-3-photo.elementor-widget,
.dbg-frame96 .frame96-card-4-photo.elementor-widget {
  position: absolute;
  left: 0;
  top: 0;
  width: 457px;
  height: 279px;
  transition: opacity 0.35s ease;
  opacity: 0;
  pointer-events: none;
}
.dbg-frame96 .frame96-card-1-photo.elementor-widget img,
.dbg-frame96 .frame96-card-2-photo.elementor-widget img,
.dbg-frame96 .frame96-card-3-photo.elementor-widget img,
.dbg-frame96 .frame96-card-4-photo.elementor-widget img {
  width: 457px;
  height: 279px;
  object-fit: cover;
  border-radius: 16px;
  background-color: #8591C1;
  display: block;
}
.dbg-frame96 .frame96-card-1-photo .elementor-widget-container,
.dbg-frame96 .frame96-card-2-photo .elementor-widget-container,
.dbg-frame96 .frame96-card-3-photo .elementor-widget-container,
.dbg-frame96 .frame96-card-4-photo .elementor-widget-container {
  line-height: 1;
}
.dbg-frame96:not(.is-card2):not(.is-card3):not(.is-card4) .frame96-card-1-photo.elementor-widget {
  opacity: 1;
  pointer-events: auto;
}
.dbg-frame96.is-card2 .frame96-card-2-photo.elementor-widget {
  opacity: 1;
  pointer-events: auto;
}
.dbg-frame96.is-card3 .frame96-card-3-photo.elementor-widget {
  opacity: 1;
  pointer-events: auto;
}
.dbg-frame96.is-card4 .frame96-card-4-photo.elementor-widget {
  opacity: 1;
  pointer-events: auto;
}

.dbg-frame96 .frame96-timeline.e-con.e-flex {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 279px;
  padding: 0;
}
.dbg-frame96 .frame96-timeline-line.e-con {
  position: absolute;
  left: calc(50% - 3px/2);
  top: 0px;
  width: 3px;
  height: 279px;
  padding: 0;
  background: #8AADFF;
  opacity: 0.3;
}
.dbg-frame96 .frame96-dot-stack.e-con.e-flex {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 24px;
  height: 279px;
  padding: 0;
}
.dbg-frame96 .frame96-dot-1.e-con.e-flex,
.dbg-frame96 .frame96-dot-2.e-con.e-flex,
.dbg-frame96 .frame96-dot-3.e-con.e-flex,
.dbg-frame96 .frame96-dot-4.e-con.e-flex {
  cursor: pointer;
  transition: width 0.35s ease, height 0.35s ease, background-color 0.35s ease;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  background: #8AADFF;
  border-radius: 1000px;
}
.dbg-frame96:not(.is-card2):not(.is-card3):not(.is-card4) .frame96-dot-1.e-con.e-flex {
  width: 24px;
  height: 24px;
  background: #3C77FF;
}
.dbg-frame96.is-card2 .frame96-dot-2.e-con.e-flex {
  width: 24px;
  height: 24px;
  background: #3C77FF;
}
.dbg-frame96.is-card3 .frame96-dot-3.e-con.e-flex {
  width: 24px;
  height: 24px;
  background: #3C77FF;
}
.dbg-frame96.is-card4 .frame96-dot-4.e-con.e-flex {
  width: 24px;
  height: 24px;
  background: #3C77FF;
}

.dbg-frame96 .frame96-card-slot.e-con {
  position: relative;
  flex: 0 0 auto;
  width: 456px;
  height: 384px;
  padding: 0;
}
.dbg-frame96 .frame96-card-1.e-con.e-flex,
.dbg-frame96 .frame96-card-2.e-con.e-flex,
.dbg-frame96 .frame96-card-3.e-con.e-flex,
.dbg-frame96 .frame96-card-4.e-con.e-flex {
  position: absolute;
  left: 0;
  top: 0;
  width: 456px;
  padding: 16px;
  border-radius: 16px;
  transition: opacity 0.35s ease;
  opacity: 0;
  pointer-events: none;
}
.dbg-frame96:not(.is-card2):not(.is-card3):not(.is-card4) .frame96-card-1.e-con.e-flex {
  opacity: 1;
  pointer-events: auto;
}
.dbg-frame96.is-card2 .frame96-card-2.e-con.e-flex {
  opacity: 1;
  pointer-events: auto;
}
.dbg-frame96.is-card3 .frame96-card-3.e-con.e-flex {
  opacity: 1;
  pointer-events: auto;
}
.dbg-frame96.is-card4 .frame96-card-4.e-con.e-flex {
  opacity: 1;
  pointer-events: auto;
}

.dbg-frame96 .frame96-card-1-label.elementor-widget,
.dbg-frame96 .frame96-card-2-label.elementor-widget,
.dbg-frame96 .frame96-card-3-label.elementor-widget,
.dbg-frame96 .frame96-card-4-label.elementor-widget {
  width: 424px;
}
.dbg-frame96 .frame96-card-1-label .elementor-widget-container,
.dbg-frame96 .frame96-card-2-label .elementor-widget-container,
.dbg-frame96 .frame96-card-3-label .elementor-widget-container,
.dbg-frame96 .frame96-card-4-label .elementor-widget-container {
  line-height: 1;
}
.dbg-frame96 .frame96-card-1-body.e-con.e-flex,
.dbg-frame96 .frame96-card-2-body.e-con.e-flex,
.dbg-frame96 .frame96-card-3-body.e-con.e-flex,
.dbg-frame96 .frame96-card-4-body.e-con.e-flex {
  width: 424px;
  flex: 0 0 auto;
  padding: 0;
}
.dbg-frame96 .frame96-card-1-title.elementor-widget,
.dbg-frame96 .frame96-card-2-title.elementor-widget,
.dbg-frame96 .frame96-card-3-title.elementor-widget,
.dbg-frame96 .frame96-card-4-title.elementor-widget {
  width: 424px;
}
.dbg-frame96 .frame96-card-1-title .elementor-widget-container,
.dbg-frame96 .frame96-card-2-title .elementor-widget-container,
.dbg-frame96 .frame96-card-3-title .elementor-widget-container,
.dbg-frame96 .frame96-card-4-title .elementor-widget-container {
  line-height: 1;
}
.dbg-frame96 .frame96-card-1-details.e-con.e-flex,
.dbg-frame96 .frame96-card-2-details.e-con.e-flex,
.dbg-frame96 .frame96-card-3-details.e-con.e-flex,
.dbg-frame96 .frame96-card-4-details.e-con.e-flex {
  width: 424px;
  flex: 0 0 auto;
  padding: 0;
}
.dbg-frame96 .frame96-card-1-detail-1.elementor-widget,
.dbg-frame96 .frame96-card-1-detail-2.elementor-widget,
.dbg-frame96 .frame96-card-1-detail-3.elementor-widget,
.dbg-frame96 .frame96-card-2-detail-1.elementor-widget,
.dbg-frame96 .frame96-card-2-detail-2.elementor-widget,
.dbg-frame96 .frame96-card-2-detail-3.elementor-widget,
.dbg-frame96 .frame96-card-3-detail-1.elementor-widget,
.dbg-frame96 .frame96-card-3-detail-2.elementor-widget,
.dbg-frame96 .frame96-card-3-detail-3.elementor-widget,
.dbg-frame96 .frame96-card-4-detail-1.elementor-widget,
.dbg-frame96 .frame96-card-4-detail-2.elementor-widget {
  width: 424px;
}


/* Section Quotes 2 (dbg-quote2) */
.elementor-905 .dbg-quote2.e-con {
  position: relative;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  background: #F9FAFD;
}

.dbg-quote2 .quote2-pattern-light.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  z-index: 0;
}
.dbg-quote2 .quote2-pattern-texture.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1440px;
  height: 1032px;
  background-image: url(https://offshoresecretaryservices.com/wp-content/uploads/2026/08/svc-card-1-pattern-frame16-scaled.png);
  background-repeat: repeat-y;
  background-size: 1440px 421px;
  z-index: 0;
}
.dbg-quote2 .quote2-pattern-radial.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1440px;
  height: 1032px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F9FAFD 100%);
  z-index: 1;
}

.dbg-quote2 .quote2-heading.elementor-widget {
  position: absolute;
  left: 167px;
  top: 164px;
  width: 506px;
  z-index: 2;
}
.dbg-quote2 .quote2-heading .elementor-widget-container {
  line-height: 1;
}

.dbg-quote2 .quote2-lines.e-con.e-flex {
  position: absolute;
  left: 739px;
  top: 96px;
  width: 449px;
  height: 240px;
  padding: 0;
  z-index: 2;
}
.dbg-quote2 .quote2-line-1.elementor-widget,
.dbg-quote2 .quote2-line-2.elementor-widget,
.dbg-quote2 .quote2-line-3.elementor-widget {
  width: 449px;
}
.dbg-quote2 .quote2-line-1 .elementor-widget-container,
.dbg-quote2 .quote2-line-2 .elementor-widget-container,
.dbg-quote2 .quote2-line-3 .elementor-widget-container {
  line-height: 1;
}
.dbg-quote2 .quote2-line-1 .elementor-heading-title,
.dbg-quote2 .quote2-line-3 .elementor-heading-title {
  background: linear-gradient(90.15deg, #B1C9FF -0.87%, #3C77FF 28.39%, #F1743A 77.6%, #FFAF8A 118.41%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dbg-quote2 .quote2-line-2 .elementor-heading-title {
  background: linear-gradient(89.41deg, #B1C9FF -18.67%, #3C77FF 5.11%, #F1743A 45.13%, #FFAF8A 78.31%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dbg-quote2 .quote2-icon-glow.elementor-widget {
  position: absolute;
  left: 600.4px;
  top: 129.2px;
  width: 123.7px;
  height: 41.2px;
  z-index: 2;
}
.dbg-quote2 .quote2-icon-glow.elementor-widget img {
  width: 123.7px;
  height: 41.2px;
  display: block;
}
.dbg-quote2 .quote2-icon-mark.elementor-widget {
  position: absolute;
  left: 600.4px;
  top: 126.3px;
  width: 123.7px;
  height: 41.3px;
  z-index: 2;
}
.dbg-quote2 .quote2-icon-mark.elementor-widget img {
  width: 123.7px;
  height: 41.3px;
  display: block;
}
.dbg-quote2 .quote2-icon-glow .elementor-widget-container,
.dbg-quote2 .quote2-icon-mark .elementor-widget-container {
  line-height: 1;
}

.dbg-quote2 .quote2-focus-icon.elementor-widget {
  position: absolute;
  left: 149px;
  top: 162px;
  width: 24px;
  height: 26px;
  z-index: 2;
}
.dbg-quote2 .quote2-focus-icon.elementor-widget img {
  width: 24px;
  height: 26px;
  display: block;
}
.dbg-quote2 .quote2-focus-icon .elementor-widget-container {
  line-height: 1;
}

.dbg-quote2 .quote2-overlay-1.e-con {
  position: absolute;
  left: 709px;
  top: 233px;
  width: 487px;
  height: 103px;
  background: #FFFFFF;
  mix-blend-mode: saturation;
  z-index: 3;
}
.dbg-quote2 .quote2-overlay-2.e-con {
  position: absolute;
  left: 731px;
  top: 90px;
  width: 445px;
  height: 65px;
  background: #FFFFFF;
  mix-blend-mode: saturation;
  z-index: 3;
}


/* Frame 98 (Why Choose, dbg-frame98) */
.elementor-905 .dbg-frame98.e-con {
  position: relative;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  background: #FFFFFF;
}

.dbg-frame98 .frame98-bg-pattern.e-con {
  position: absolute;
  left: 0px;
  top: 0.17px;
  width: 1440px;
  height: 1635.14px;
  background-image: url(https://offshoresecretaryservices.com/wp-content/uploads/2026/08/frame98-pattern-scaled.png);
  background-repeat: no-repeat;
  background-size: 1440px 1635.14px;
  -webkit-mask-image: radial-gradient(46% 46% at 50% 47.2%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.03) 100%);
  mask-image: radial-gradient(46% 46% at 50% 47.2%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.03) 100%);
  z-index: 0;
}

.dbg-frame98 .frame98-heading-block.e-con.e-flex {
  position: absolute;
  left: calc(50% - 943px/2 - 0.5px);
  top: 64px;
  width: 943px;
  height: 112px;
  padding: 0;
  z-index: 2;
}
.dbg-frame98 .frame98-title.elementor-widget {
  width: 943px;
}
.dbg-frame98 .frame98-title .elementor-widget-container {
  line-height: 1;
}
.dbg-frame98 .frame98-subtitle.elementor-widget {
  width: 943px;
}

.dbg-frame98 .frame98-grid.e-con.e-flex {
  position: absolute;
  left: 150px;
  top: 240px;
  width: 1140px;
  padding: 0;
  z-index: 2;
}

.dbg-frame98 .frame98-card-1.e-con.e-flex,
.dbg-frame98 .frame98-card-2.e-con.e-flex,
.dbg-frame98 .frame98-card-3.e-con.e-flex,
.dbg-frame98 .frame98-card-4.e-con.e-flex,
.dbg-frame98 .frame98-card-5.e-con.e-flex,
.dbg-frame98 .frame98-card-6.e-con.e-flex,
.dbg-frame98 .frame98-card-7.e-con.e-flex,
.dbg-frame98 .frame98-card-8.e-con.e-flex,
.dbg-frame98 .frame98-card-9.e-con.e-flex {
  flex: 0 0 auto;
  width: 359px;
  height: 248px;
  padding: 24px;
  background: #F9FAFD;
  border-radius: 16px;
}
.dbg-frame98 .frame98-card-1-icon-frame.e-con.e-flex,
.dbg-frame98 .frame98-card-2-icon-frame.e-con.e-flex,
.dbg-frame98 .frame98-card-3-icon-frame.e-con.e-flex,
.dbg-frame98 .frame98-card-4-icon-frame.e-con.e-flex,
.dbg-frame98 .frame98-card-5-icon-frame.e-con.e-flex,
.dbg-frame98 .frame98-card-6-icon-frame.e-con.e-flex,
.dbg-frame98 .frame98-card-7-icon-frame.e-con.e-flex,
.dbg-frame98 .frame98-card-8-icon-frame.e-con.e-flex,
.dbg-frame98 .frame98-card-9-icon-frame.e-con.e-flex {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 14px;
  background: #3C77FF;
  border: 2px solid #2D59BF;
  border-radius: 8px;
}
.dbg-frame98 .frame98-card-1-icon .elementor-widget-container,
.dbg-frame98 .frame98-card-2-icon .elementor-widget-container,
.dbg-frame98 .frame98-card-3-icon .elementor-widget-container,
.dbg-frame98 .frame98-card-4-icon .elementor-widget-container,
.dbg-frame98 .frame98-card-5-icon .elementor-widget-container,
.dbg-frame98 .frame98-card-6-icon .elementor-widget-container,
.dbg-frame98 .frame98-card-7-icon .elementor-widget-container,
.dbg-frame98 .frame98-card-8-icon .elementor-widget-container,
.dbg-frame98 .frame98-card-9-icon .elementor-widget-container {
  line-height: 1;
}
.dbg-frame98 .frame98-card-1-icon.elementor-widget img {
  width: 29.8px;
  height: 22.4px;
  display: block;
}
.dbg-frame98 .frame98-card-2-icon.elementor-widget img {
  width: 27.8px;
  height: 23.8px;
  display: block;
}
.dbg-frame98 .frame98-card-3-icon.elementor-widget img {
  width: 20px;
  height: 28px;
  display: block;
}
.dbg-frame98 .frame98-card-4-icon.elementor-widget img {
  width: 27.8px;
  height: 27.8px;
  display: block;
}
.dbg-frame98 .frame98-card-5-icon.elementor-widget img {
  width: 29.9px;
  height: 23.3px;
  display: block;
}
.dbg-frame98 .frame98-card-6-icon.elementor-widget img {
  width: 26px;
  height: 26px;
  display: block;
}
.dbg-frame98 .frame98-card-7-icon.elementor-widget img {
  width: 24px;
  height: 31.5px;
  display: block;
}
.dbg-frame98 .frame98-card-8-icon.elementor-widget img {
  width: 28px;
  height: 24.75px;
  display: block;
}
.dbg-frame98 .frame98-card-9-icon.elementor-widget img {
  width: 27.54px;
  height: 27.18px;
  display: block;
}

.dbg-frame98 .frame98-card-1-body.e-con.e-flex,
.dbg-frame98 .frame98-card-2-body.e-con.e-flex,
.dbg-frame98 .frame98-card-3-body.e-con.e-flex,
.dbg-frame98 .frame98-card-4-body.e-con.e-flex,
.dbg-frame98 .frame98-card-5-body.e-con.e-flex,
.dbg-frame98 .frame98-card-6-body.e-con.e-flex,
.dbg-frame98 .frame98-card-7-body.e-con.e-flex,
.dbg-frame98 .frame98-card-8-body.e-con.e-flex,
.dbg-frame98 .frame98-card-9-body.e-con.e-flex {
  width: 311px;
  flex: 0 0 auto;
  padding: 0;
}
.dbg-frame98 .frame98-card-1-title.elementor-widget,
.dbg-frame98 .frame98-card-2-title.elementor-widget,
.dbg-frame98 .frame98-card-3-title.elementor-widget,
.dbg-frame98 .frame98-card-4-title.elementor-widget,
.dbg-frame98 .frame98-card-5-title.elementor-widget,
.dbg-frame98 .frame98-card-6-title.elementor-widget,
.dbg-frame98 .frame98-card-7-title.elementor-widget,
.dbg-frame98 .frame98-card-8-title.elementor-widget,
.dbg-frame98 .frame98-card-9-title.elementor-widget {
  width: 311px;
}
.dbg-frame98 .frame98-card-1-title .elementor-widget-container,
.dbg-frame98 .frame98-card-2-title .elementor-widget-container,
.dbg-frame98 .frame98-card-3-title .elementor-widget-container,
.dbg-frame98 .frame98-card-4-title .elementor-widget-container,
.dbg-frame98 .frame98-card-5-title .elementor-widget-container,
.dbg-frame98 .frame98-card-6-title .elementor-widget-container,
.dbg-frame98 .frame98-card-7-title .elementor-widget-container,
.dbg-frame98 .frame98-card-8-title .elementor-widget-container,
.dbg-frame98 .frame98-card-9-title .elementor-widget-container {
  line-height: 1;
}

.dbg-frame98 .frame98-card-1-desc.elementor-widget,
.dbg-frame98 .frame98-card-2-desc.elementor-widget,
.dbg-frame98 .frame98-card-3-desc.elementor-widget,
.dbg-frame98 .frame98-card-4-desc.elementor-widget,
.dbg-frame98 .frame98-card-5-desc.elementor-widget,
.dbg-frame98 .frame98-card-6-desc.elementor-widget,
.dbg-frame98 .frame98-card-7-desc.elementor-widget,
.dbg-frame98 .frame98-card-8-desc.elementor-widget,
.dbg-frame98 .frame98-card-9-desc.elementor-widget {
  width: 311px;
}


/* Vector 14 / 3130-3134 / 13 -- page-level dashed connector lines
   (2026-08-21), same technique as page-vector-4-line: opacity already
   baked into each PNG's alpha channel (confirmed ~30% via GD sampling),
   so no separate CSS opacity applied. Children of the existing
   .page-vectors-overlay wrapper, using plain fixed-integer left values
   (not calc()) per the wrapper's own established sub-pixel-rounding fix. */
.dbg-frame94 .page-vector-14-line {
  position: absolute;
  left: 720px;
  top: -113px;
  width: 2px;
  height: 142px;
  z-index: 10;
}
.dbg-frame94 .page-vector-14-line img {
  width: 2px;
  height: 142px;
  display: block;
}
.dbg-frame96 .page-vector-3130-line {
  position: absolute;
  left: 720px;
  top: -122px;
  width: 2px;
  height: 142px;
  z-index: 10;
}
.dbg-frame96 .page-vector-3130-line img {
  width: 2px;
  height: 142px;
  display: block;
}
.dbg-quote2 .page-vector-3131-line {
  position: absolute;
  left: 720px;
  top: -124px;
  width: 2px;
  height: 142px;
  z-index: 10;
}
.dbg-quote2 .page-vector-3131-line img {
  width: 2px;
  height: 142px;
  display: block;
}
.dbg-frame98 .page-vector-3132-line {
  position: absolute;
  left: 720px;
  top: -102px;
  width: 2px;
  height: 142px;
  z-index: 10;
}
.dbg-frame98 .page-vector-3132-line img {
  width: 2px;
  height: 142px;
  display: block;
}
.dbg-frame114 .page-vector-13-swash {
  position: absolute;
  left: 345px;
  top: -98px;
  width: 391px;
  height: 149px;
  z-index: 10;
}
.dbg-frame114 .page-vector-13-swash img {
  width: 391px;
  height: 149px;
  display: block;
}
.dbg-frame123 .page-vector-3133-line {
  position: absolute;
  left: 720px;
  top: -113px;
  width: 2px;
  height: 142px;
  z-index: 10;
}
.dbg-frame123 .page-vector-3133-line img {
  width: 2px;
  height: 142px;
  display: block;
}
.dbg-frame124 .page-vector-3134-line {
  position: absolute;
  left: 720px;
  top: -102px;
  width: 2px;
  height: 142px;
  z-index: 10;
}
.dbg-frame124 .page-vector-3134-line img {
  width: 2px;
  height: 142px;
  display: block;
}


/* Proactive centering for still-placeholder sections (2026-08-21) --
   needed so the 2026-08-21 vector-reparenting migration's flat left
   values (matching the 1440-design-center convention used by every
   already-built section) land correctly. Matches the exact rule every
   other built section already has; harmless for the debug label text
   (still centers via its own flex settings) and will already be correct
   once these sections get real content. */
.elementor-905 .dbg-frame114.e-con {
  position: relative;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.elementor-905 .dbg-frame123.e-con {
  position: relative;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.elementor-905 .dbg-frame124.e-con {
  position: relative;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Frame 114 — Testimonials ===== */
.elementor-905 .dbg-frame114.e-con {
  background-color: #F8FAFD;
  height: 466px;
}
.dbg-frame114 .testi-pattern-light {
  position: absolute;
  left: 0px;
  top: -1px;
  width: 1440px;
  height: 467px;
}
.dbg-frame114 .testi-pattern-frame16 {
  position: absolute;
  left: 0px;
  top: -35px;
  width: 1440px;
  height: 1320px;
  background-color: #F7F8F9;
  background-image: url(https://offshoresecretaryservices.com/wp-content/uploads/2026/08/svc-card-1-pattern-frame16-scaled.png);
  background-repeat: repeat-y;
  background-size: 1440px 421px;
  opacity: 0.4;
}
.dbg-frame114 .testi-heading-block {
  position: absolute;
  left: 150px;
  top: 65px;
  width: 454px;
  height: 256px;
}
.dbg-frame114 .testi-heading-title,
.dbg-frame114 .testi-heading-desc {
  width: 454px;
}
.dbg-frame114 .testi-heading-title .elementor-heading-title {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #2C3441;
  text-align: center;
}
.dbg-frame114 .testi-heading-title .elementor-widget-container { line-height: 1; }
.dbg-frame114 .testi-heading-desc p {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #374151;
  margin: 0;
  text-align: center;
}
.dbg-frame114 .testi-cards-row {
  position: absolute;
  left: 706px;
  top: 65px;
  width: 734px;
  height: 336px;
}
.dbg-frame114 .testi-card {
  width: 456px;
  height: 336px;
  background: #FFFFFF;
  box-shadow: 0px 5px 35px rgba(30, 34, 40, 0.07);
  border-radius: 16px;
}
.dbg-frame114 .testi-card.e-con.e-flex { flex: 0 0 auto; }
.dbg-frame114 .testi-card-body {
  width: 408px;
  align-self: stretch;
}
.dbg-frame114 .testi-card-body.e-con.e-flex { flex: 0 0 auto; }
.dbg-frame114 .testi-star-row {
  width: 100px;
  height: 16px;
}
.dbg-frame114 .testi-star-row.e-con.e-flex { flex: 0 0 auto; }
.dbg-frame114 .testi-star {
  width: 16px;
  height: 16px;
  background-image: url(https://offshoresecretaryservices.com/wp-content/uploads/2026/08/testi-star.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 13.5px;
}
.dbg-frame114 .testi-star.e-con.e-flex { flex: 0 0 auto; }
.dbg-frame114 .testi-quote {
  width: 408px;
  align-self: stretch;
}
.dbg-frame114 .testi-quote p {
  font-family: 'Roboto';
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
  color: #69768B;
  margin: 0;
}
.dbg-frame114 .testi-card-footer {
  width: 408px;
  height: 56px;
  align-self: stretch;
}
.dbg-frame114 .testi-card-footer.e-con.e-flex { flex: 0 0 auto; }
.dbg-frame114 .testi-avatar {
  width: 56px;
  height: 56px;
}
.dbg-frame114 .testi-avatar.elementor-widget { flex: 0 0 auto; }
.dbg-frame114 .testi-avatar .elementor-widget-container { line-height: 1; }
.dbg-frame114 .testi-avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.dbg-frame114 .testi-info {
  height: 56px;
}
.dbg-frame114 .testi-info.e-con.e-flex { flex: 0 0 auto; }
.dbg-frame114 .testi-info-1 { width: 325px; }
.dbg-frame114 .testi-info-2 { width: 331px; }
.dbg-frame114 .testi-info-name .elementor-heading-title {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #374151;
}
.dbg-frame114 .testi-info-name .elementor-widget-container { line-height: 1; }
.dbg-frame114 .testi-info-role p {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #69768B;
  margin: 0;
}
.dbg-frame114 .testi-nav {
  position: absolute;
  left: 150px;
  top: 353px;
  width: 120px;
  height: 48px;
}
.dbg-frame114 .testi-nav-btn {
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1);
  border-radius: 8px;
}
.dbg-frame114 .testi-nav-btn.e-con.e-flex { flex: 0 0 auto; }
.dbg-frame114 .testi-nav-prev-icon img,
.dbg-frame114 .testi-nav-next-icon img {
  width: 11px;
  height: 20px;
  display: block;
}
.dbg-frame114 .testi-nav-prev-icon img { transform: scaleX(-1); }
.dbg-frame98 .frame98-bg-clip.e-con {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  z-index: 0;
}


/* Frame 141 testimonials: infinite marquee (2026-08-22) */
.dbg-frame114 .testi-cards-row {
  overflow: hidden;
}

.dbg-frame114 .testi-cards-track {
  width: max-content;
  flex-wrap: nowrap;
  animation: testi-cards-scroll 13s linear infinite;
}

.dbg-frame114 .testi-cards-track.e-con.e-flex {
  flex: none;
}

@keyframes testi-cards-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-3437px); }
}

.dbg-frame114 .testi-avatar-mock {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #D9D9D9;
}

.dbg-frame114 .testi-avatar-mock.e-con.e-flex {
  flex: 0 0 auto;
}

.dbg-frame114 .testi-info-mock {
  width: 328px;
}

/* Frame 123 (Partners section, 2026-08-22) */
.dbg-frame123 .frame123-bg {
  position: absolute;
  left: 0px;
  top: 15px;
  width: 1440px;
  height: 449px;
  overflow: hidden;
}

.dbg-frame123 .frame123-pattern {
  position: absolute;
  left: 0px;
  top: 0.17px;
  width: 1440px;
  height: 974.14px;
  background-image: url(https://offshoresecretaryservices.com/wp-content/uploads/2026/08/frame98-pattern-scaled.png);
  background-repeat: no-repeat;
  background-size: 1440px 974.14px;
  -webkit-mask-image: radial-gradient(46% 46% at 50% 47.2%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.03) 100%);
  mask-image: radial-gradient(46% 46% at 50% 47.2%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.03) 100%);
}

.dbg-frame123 .frame123-content {
  position: absolute;
  left: calc(50% - 1138px/2);
  top: calc(50% - 296px/2);
  width: 1138px;
  height: 296px;
}

.dbg-frame123 .frame123-heading-block {
  width: 547px;
  height: 184px;
}

.dbg-frame123 .frame123-title,
.dbg-frame123 .frame123-desc {
  width: 547px;
}

.dbg-frame123 .frame123-title .elementor-heading-title {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #2C3441;
  text-align: center;
}

.dbg-frame123 .frame123-title .elementor-widget-container { line-height: 1; }

.dbg-frame123 .frame123-desc p {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #374151;
  margin: 0;
  text-align: center;
}

.dbg-frame123 .frame123-logos {
  position: relative;
  width: 554px;
  height: 296px;
}

.dbg-frame123 .frame123-logo {
  width: 163px;
  height: 56px;
  background: #FFFFFF;
  box-shadow: 0px 5px 35px rgba(30, 34, 40, 0.07);
  border-radius: 8px;
}

.dbg-frame123 .frame123-logo-1 {
  position: absolute;
  left: 0px;
  top: 0px;
}

.dbg-frame123 .frame123-logo-1 .frame123-logo-img img {
  width: 100px;
  height: 28px;
  display: block;
}

.dbg-frame123 .frame123-logo-2 {
  position: absolute;
  left: 195.67px;
  top: 0px;
}

.dbg-frame123 .frame123-logo-2 .frame123-logo-img img {
  width: 98px;
  height: 38px;
  display: block;
}

.dbg-frame123 .frame123-logo-3 {
  position: absolute;
  left: 391.33px;
  top: 0px;
}

.dbg-frame123 .frame123-logo-3 .frame123-logo-img img {
  width: 97px;
  height: 54px;
  display: block;
}

.dbg-frame123 .frame123-logo-4 {
  position: absolute;
  left: 0px;
  top: 80px;
}

.dbg-frame123 .frame123-logo-4 .frame123-logo-img img {
  width: 97.5px;
  height: 28px;
  display: block;
}

.dbg-frame123 .frame123-logo-5 {
  position: absolute;
  left: 195.67px;
  top: 80px;
}

.dbg-frame123 .frame123-logo-5 .frame123-logo-img img {
  width: 152px;
  height: 24px;
  display: block;
}

.dbg-frame123 .frame123-logo-6 {
  position: absolute;
  left: 391.33px;
  top: 80px;
}

.dbg-frame123 .frame123-logo-6 .frame123-logo-img img {
  width: 115.5px;
  height: 28px;
  display: block;
}

.dbg-frame123 .frame123-logo-7 {
  position: absolute;
  left: 0px;
  top: 160px;
}

.dbg-frame123 .frame123-logo-7 .frame123-logo-img img {
  width: 130px;
  height: 56px;
  display: block;
}

.dbg-frame123 .frame123-logo-8 {
  position: absolute;
  left: 195.67px;
  top: 160px;
}

.dbg-frame123 .frame123-logo-8 .frame123-logo-img img {
  width: 97px;
  height: 28px;
  display: block;
}

.dbg-frame123 .frame123-logo-9 {
  position: absolute;
  left: 391.33px;
  top: 160px;
}

.dbg-frame123 .frame123-logo-9 .frame123-logo-img img {
  width: 133px;
  height: 56px;
  display: block;
}

.dbg-frame123 .frame123-logo-10 {
  position: absolute;
  left: 0px;
  top: 240px;
}

.dbg-frame123 .frame123-logo-10 .frame123-logo-img img {
  width: 154.5px;
  height: 56px;
  display: block;
}

.dbg-frame123 .frame123-logo-11 {
  position: absolute;
  left: 195.67px;
  top: 240px;
}

.dbg-frame123 .frame123-logo-11 .frame123-logo-img img {
  width: 107px;
  height: 56px;
  display: block;
}



.dbg-frame123 .frame123-logos.e-con.e-flex,
.dbg-frame123 .frame123-heading-block.e-con.e-flex,
.dbg-frame123 .frame123-content.e-con.e-flex,
.dbg-frame123 .frame123-bg.e-con.e-flex {
  flex: none;
}

/* Frame 124 (FAQ section, 2026-08-22) */
.dbg-frame124 .faq-pattern-light {
  position: absolute;
  left: 0px;
  top: -1px;
  width: 1440px;
  height: 750px;
  overflow: hidden;
}

.dbg-frame124 .faq-frame16 {
  position: absolute;
  left: 0px;
  top: -35px;
  width: 1440px;
  height: 1320px;
  background-color: #F7F8F9;
  background-image: url(https://offshoresecretaryservices.com/wp-content/uploads/2026/08/svc-card-1-pattern-frame16-scaled.png);
  background-repeat: repeat-y;
  background-size: 1440px 421px;
  opacity: 0.4;
}

.dbg-frame124 .faq-title {
  position: absolute;
  left: 247px;
  top: 63px;
  width: 943px;
  height: 48px;
}

.dbg-frame124 .faq-title .elementor-heading-title {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #2C3441;
  text-align: center;
}

.dbg-frame124 .faq-title .elementor-widget-container { line-height: 1; }

.dbg-frame124 .faq-grid {
  position: absolute;
  left: calc(50% - 1140px/2);
  top: 175px;
  width: 1140px;
  height: 489px;
}

.dbg-frame124 .faq-grid.e-con.e-flex { flex: none; }

.dbg-frame124 .faq-card {
  width: 554px;
  height: 96px;
  background: #FFFFFF;
  box-shadow: 0px 5px 35px rgba(30, 34, 40, 0.07);
  border-radius: 16px;
}

.dbg-frame124 .faq-card.e-con.e-flex { flex: none; }

.dbg-frame124 .faq-question-row {
  width: 522px;
  height: 64px;
}

.dbg-frame124 .faq-question-row.e-con.e-flex { flex: none; }

.dbg-frame124 .faq-icon-frame {
  width: 48px;
  height: 48px;
  background: #3C77FF;
  border: 2px solid #2D59BF;
  border-radius: 8px;
  box-sizing: border-box;
}

.dbg-frame124 .faq-icon-frame.e-con.e-flex { flex: none; }

.dbg-frame124 .faq-question-icon img {
  width: 14.5px;
  height: 23.5px;
  display: block;
}

.dbg-frame124 .faq-question-text {
  width: 388px;
}

.dbg-frame124 .faq-question-text .elementor-heading-title {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #374151;
}

.dbg-frame124 .faq-question-text .elementor-widget-container { line-height: 1; }
/* ===== Frame 173 -- Final CTA band (section 13) -- 2026-08-21 =====
   Card box already matches Figma's Frame173 (1140x348, radius24) from the
   original skeleton pass (dbg-frame173-outer min-height:348, margin-top:40).
   Built to fill that already-correct box directly, NOT via the pasted
   'bottom:694px' figure -- that number's containing frame doesn't match
   our built section (min-height=height=348 exactly), so it must refer to a
   taller ancestor Figma frame. Flag if this reads wrong live. */
.elementor-905 .dbg-frame173-outer.e-con {
  max-width: 1440px;
  margin: auto;
}
.frame173-card.e-con {
  position: relative;
  width: 1140px;
  box-shadow: 0px 5px 35px rgba(30, 34, 40, 0.07);
}
.frame173-content.e-con.e-flex {
  position: absolute;
  width: 943px;
  height: 204px;
  left: calc(50% - 943px/2 - 0.5px);
  top: calc(50% - 204px/2);
}
.frame173-heading-block.e-con.e-flex {
  width: 943px;
  height: 88px;
}
.frame173-heading-title.elementor-widget {
  width: 943px;
}
.frame173-heading-title .elementor-widget-container {
  line-height: 1;
}
.frame173-heading-title .elementor-heading-title {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #2C3441;
  text-align: center;
}
.frame173-heading-desc.elementor-widget {
  width: 943px;
}
.frame173-cta-pill.e-con.e-flex {
  width: 388px;
  height: 68px;
  background: #EDF2FF;
  border-radius: 12px;
}
.frame173-cta-a.e-con.e-flex {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 184px;
  height: 48px;
  background: #3C77FF;
  border: 2px solid #244799;
  border-radius: 8px;
}
.frame173-cta-a-label .elementor-heading-title {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #FAFBFB;
}
.frame173-cta-a-icon.elementor-widget img {
  width: 13px;
  height: 13px;
  display: block;
  vertical-align: top;
  transform: rotate(45deg);
}
.frame173-cta-a-icon .elementor-widget-container {
  line-height: 1;
}
.frame173-cta-b.e-con.e-flex {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 184px;
  height: 48px;
  border-radius: 8px;
}
.frame173-cta-b-label .elementor-heading-title {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #3C77FF;
  white-space: nowrap;
}

/* ===== Footer (post 907) -- full build, 3rd attempt -- 2026-08-21 =====
   User-confirmed structure fix vs. the 2nd (reverted) attempt: Frame 217
   (payment logos) is a DOM child of Pattern Dark, not a sibling -- its
   given left150/top407 resolves correctly against Pattern Dark's own box
   (itself position:absolute, so no manual offset math needed). Pattern
   Dark deliberately has NO z-index here (was z-index:0 in the reverted
   attempt) -- an explicit z-index would make it a stacking-context root,
   trapping Frame 217 below Frame 16's dark overlay (z-index:1) regardless
   of Frame 217's own z-index. Without one, Pattern Dark just paints in
   normal DOM order (first = furthest back) and Frame 217 competes directly
   against Frame 16 in the shared footer stacking context, winning via its
   own z-index:2. Line 1 (divider) is deliberately NOT built -- user said
   to ignore it. Copyright stays a direct child of the footer root,
   confirmed correct by the user; its overlap with column text is
   accepted/intentional, not a bug. */
.elementor-907 .dbg-footer.e-con { max-width: 1440px; margin-left: auto; margin-right: auto; }
.footer-frame16-overlay.e-con { position: absolute; left: 0px; top: -264px; width: 1440px; height: 1320px; background: #2A3342; opacity: 0.4; z-index: 1; }
.footer-payment-logos.e-con.e-flex { position: absolute; left: 150px; top: 485px; width: 337.4px; height: 86.2px; z-index: 2; }
.footer-logo-1.e-con.e-flex { flex: 0 0 auto; position: relative; width: 97.8px; height: 33.6px; background: #FFFFFF; box-shadow: 0px 3px 21px rgba(30, 34, 40, 0.07); border-radius: 4.8px; }
.footer-logo-1-img.elementor-widget { position: absolute; left: calc(50% - 56px/2 + 0.1px); top: calc(50% - 18px/2 + 0.2px); width: 56px; height: 18px; }
.footer-logo-1-img.elementor-widget img { width: 56px; height: 18px; display: block; }
.footer-logo-1-img .elementor-widget-container { line-height: 1; }
.footer-logo-2.e-con.e-flex { flex: 0 0 auto; position: relative; width: 97.8px; height: 33.6px; background: #FFFFFF; box-shadow: 0px 3px 21px rgba(30, 34, 40, 0.07); border-radius: 4.8px; }
.footer-logo-2-img.elementor-widget { position: absolute; left: calc(50% - 36px/2 + 0.1px); top: calc(50% - 28px/2 + 0.2px); width: 36px; height: 28px; }
.footer-logo-2-img.elementor-widget img { width: 36px; height: 28px; display: block; }
.footer-logo-2-img .elementor-widget-container { line-height: 1; }
.footer-logo-3.e-con.e-flex { flex: 0 0 auto; position: relative; width: 97.8px; height: 33.6px; background: #FFFFFF; box-shadow: 0px 3px 21px rgba(30, 34, 40, 0.07); border-radius: 4.8px; }
.footer-logo-3-img.elementor-widget { position: absolute; left: calc(50% - 76px/2); top: calc(50% - 34px/2); width: 76px; height: 34px; }
.footer-logo-3-img.elementor-widget img { width: 76px; height: 34px; display: block; }
.footer-logo-3-img .elementor-widget-container { line-height: 1; }
.footer-logo-4.e-con.e-flex { flex: 0 0 auto; position: relative; width: 97.8px; height: 33.6px; background: #FFFFFF; box-shadow: 0px 3px 21px rgba(30, 34, 40, 0.07); border-radius: 4.8px; }
.footer-logo-4-img.elementor-widget { position: absolute; left: calc(50% - 44px/2 + 0.1px); top: calc(50% - 34px/2 + 0.2px); width: 44px; height: 34px; }
.footer-logo-4-img.elementor-widget img { width: 44px; height: 34px; display: block; }
.footer-logo-4-img .elementor-widget-container { line-height: 1; }
.footer-logo-5.e-con.e-flex { flex: 0 0 auto; position: relative; width: 97.8px; height: 33.6px; background: #FFFFFF; box-shadow: 0px 3px 21px rgba(30, 34, 40, 0.07); border-radius: 4.8px; }
.footer-logo-5-img.elementor-widget { position: absolute; left: calc(50% - 84px/2); top: calc(50% - 34px/2); width: 84px; height: 34px; }
.footer-logo-5-img.elementor-widget img { width: 84px; height: 34px; display: block; }
.footer-logo-5-img .elementor-widget-container { line-height: 1; }
.footer-logo-6.e-con.e-flex { flex: 0 0 auto; position: relative; width: 97.8px; height: 33.6px; background: #FFFFFF; box-shadow: 0px 3px 21px rgba(30, 34, 40, 0.07); border-radius: 4.8px; }
.footer-logo-6-img.elementor-widget { position: absolute; left: calc(50% - 95.5px/2); top: calc(50% - 34px/2); width: 95.5px; height: 34px; }
.footer-logo-6-img.elementor-widget img { width: 95.5px; height: 34px; display: block; }
.footer-logo-6-img .elementor-widget-container { line-height: 1; }
.footer-brand-column.e-con.e-flex { position: absolute; left: 150px; top: 214px; width: 336px; height: 264px; z-index: 2; }
.footer-brand-logo-row.e-con.e-flex { width: 318px; height: 56px; }
.footer-brand-logo-badge.e-con.e-flex { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 4px; }
.footer-brand-logo-img.elementor-widget { width: 44.88px; height: 52px; }
.footer-brand-logo-img.elementor-widget img { width: 44.88px; height: 52px; display: block; }
.footer-brand-logo-img .elementor-widget-container { line-height: 1; }
.footer-brand-text-col.e-con.e-flex { flex: 0 0 auto; width: 262px; height: 56px; }
.footer-brand-title.elementor-widget { width: 253px; }
.footer-brand-title .elementor-widget-container { line-height: 1; }
.footer-brand-title .elementor-heading-title { font-family: 'Roboto'; font-weight: 700; font-size: 20px; line-height: 32px; color: #FFFFFF; }
.footer-brand-tagline.elementor-widget { width: 262px; }
.footer-contact-block.e-con.e-flex { width: 221px; height: 192px; }
.footer-contact-heading.elementor-widget { width: 221px; }
.footer-contact-heading .elementor-widget-container { line-height: 1; }
.footer-contact-heading .elementor-heading-title { font-family: 'Roboto'; font-weight: 700; font-size: 20px; line-height: 32px; color: #FFFFFF; }
.footer-contact-list.e-con.e-flex { width: 221px; height: 128px; }
.footer-contact-address.elementor-widget { width: 289px; }
.footer-contact-phone.elementor-widget { width: 221px; }
.footer-contact-email.elementor-widget { width: 221px; height: 48px; }
.footer-services-column.e-con.e-flex { position: absolute; left: 715px; top: 214px; width: 282px; height: 232px; z-index: 2; }
.footer-services-heading.elementor-widget { width: 282px; }
.footer-services-heading .elementor-widget-container { line-height: 1; }
.footer-services-heading .elementor-heading-title { font-family: 'Roboto'; font-weight: 700; font-size: 20px; line-height: 32px; color: #FFFFFF; }
.footer-services-list.e-con.e-flex { width: 282px; height: 184px; }
.footer-services-1.elementor-widget, .footer-services-2.elementor-widget, .footer-services-3.elementor-widget, .footer-services-4.elementor-widget, .footer-services-5.elementor-widget { width: 282px; }
.footer-legal-column.e-con.e-flex { position: absolute; left: 1032px; top: 214px; width: 258px; height: 296px; z-index: 2; }
.footer-legal-heading.elementor-widget { width: 224px; }
.footer-legal-heading .elementor-widget-container { line-height: 1; }
.footer-legal-heading .elementor-heading-title { font-family: 'Roboto'; font-weight: 700; font-size: 20px; line-height: 32px; color: #FFFFFF; }
.footer-legal-list.e-con.e-flex { width: 258px; height: 248px; }
.footer-legal-1.elementor-widget, .footer-legal-2.elementor-widget, .footer-legal-3.elementor-widget, .footer-legal-5.elementor-widget, .footer-legal-6.elementor-widget { width: 258px; }
.footer-legal-4.elementor-widget { width: 142px; }
.footer-legal-5.elementor-widget { height: 48px; }
.footer-useful-column.e-con.e-flex { position: absolute; left: 715px; top: 518px; width: 282px; height: 272px; z-index: 2; }
.footer-useful-heading.elementor-widget { width: 282px; }
.footer-useful-heading .elementor-widget-container { line-height: 1; }
.footer-useful-heading .elementor-heading-title { font-family: 'Roboto'; font-weight: 700; font-size: 20px; line-height: 32px; color: #FFFFFF; }
.footer-useful-list.e-con.e-flex { width: 282px; height: 224px; }
.footer-useful-1.elementor-widget { width: 95px; }
.footer-useful-2.elementor-widget { width: 238px; }
.footer-useful-3.elementor-widget, .footer-useful-4.elementor-widget, .footer-useful-6.elementor-widget { width: 282px; }
.footer-useful-5.elementor-widget { width: 139px; }
.footer-copyright.elementor-widget { position: absolute; left: calc(50% - 467px/2 - 342.5px); top: 598px; width: 467px; height: 20px; z-index: 2; }


/* ===== Footer Frame 217 fix -- revert chips 3/5/6 to literal Figma spec -- 2026-08-21 =====
   Earlier build substituted halved-native-asset dimensions for these 3
   (76x34 / 84x34 / 95.5x34 instead of the literal 76x47 / 84x48 / 95.5x50)
   reasoning the given heights were stale -- user confirmed this was wrong,
   use the literal given box exactly (image stretches slightly to fill it,
   matching Figma's own Fill-mode rendering). */
.footer-logo-3-img.elementor-widget { position: absolute; left: calc(50% - 76px/2 - 1.9px); top: calc(50% - 47px/2 - 0.3px); width: 76px; height: 47px; }
.footer-logo-3-img.elementor-widget img { width: 76px; height: 47px; display: block; }
.footer-logo-5-img.elementor-widget { position: absolute; left: calc(50% - 84px/2 + 0.1px); top: calc(50% - 48px/2 + 0.2px); width: 84px; height: 48px; }
.footer-logo-5-img.elementor-widget img { width: 84px; height: 48px; display: block; }
.footer-logo-6-img.elementor-widget { position: absolute; left: calc(50% - 95.5px/2 - 0.4px); top: calc(50% - 50px/2 + 0.2px); width: 95.5px; height: 50px; }
.footer-logo-6-img.elementor-widget img { width: 95.5px; height: 50px; display: block; }

/* ===== Footer Pattern Dark -- Radial layer -- 2026-08-21 =====
   No color/gradient stops were given for Radial -- per user instruction
   ('use Frame 16 and Radial like other Frame'), reused the same recipe
   already established elsewhere (Quote band / Card 1 / Frame94-96-Quote2-98):
   transparent center fading to the panel's OWN base color at the edges.
   Every prior instance used #F9FAFD (their section's own light base) --
   this is the first DARK instance, so substituted Pattern Dark's own
   #244799 (rgb 36,71,153) as the fade-to color instead. Flag if a real
   color was actually intended and this guess is wrong. */
.footer-pattern-radial.e-con { position: absolute; left: 0px; top: 206px; width: 1440px; height: 496px; background: radial-gradient(50% 50% at 50% 50%, rgba(36, 71, 153, 0) 0%, #244799 100%); z-index: 2; }
.footer-payment-logos.e-con.e-flex { z-index: 3; }

/* ===== Footer Pattern Dark -- Frame 16.1 -- 2026-08-21 =====
   Real asset (Frame 16.png, the user's saved export) confirmed via GD/PIL
   pixel sampling to already have ~40% opacity baked into its own alpha
   channel (avg alpha ~102/255) -- matches the given 'opacity:0.4' almost
   exactly, so no separate CSS opacity applied (would compound to ~16%).
   Layered as background-image over the given #2A3342 base color, tiled
   per the established Frame-16-texture convention used elsewhere in this
   project (background-repeat:repeat-y, background-size matching the
   known 1440x421 tile unit). z-index behind Radial(2)/Frame217(3), same
   ordering the old flat-color Frame16 used. */

/* ===== Footer Pattern Dark -- rebuilt clean, no texture/radial -- 2026-08-21 =====
   Literal given spec only, per explicit user instruction. */
.footer-pattern-dark.e-con { position: absolute; left: 0px; top: 78px; width: 1440px; height: 774px; background: #244799; overflow: hidden; }

/* ===== Footer Frame 217 -- rebuilt inside fresh Pattern Dark -- 2026-08-21 =====
   Position resolves directly against Pattern Dark's own box (no manual
   offset needed, Pattern Dark is position:absolute). Reuses the 6
   already-uploaded logo attachments (1018-1023) and their literal
   given dimensions/offsets confirmed correct earlier this session. */
.footer-payment-logos.e-con.e-flex { position: absolute; left: 150px; top: 407px; width: 337.4px; height: 86.2px; }
.footer-logo-1.e-con.e-flex { flex: 0 0 auto; position: relative; width: 97.8px; height: 33.6px; background: #FFFFFF; box-shadow: 0px 3px 21px rgba(30, 34, 40, 0.07); border-radius: 4.8px; }
.footer-logo-1-img.elementor-widget { position: absolute; left: calc(50% - 56px/2 + 0.1px); top: calc(50% - 18px/2 + 0.2px); width: 56px; height: 18px; }
.footer-logo-1-img.elementor-widget img { width: 56px; height: 18px; display: block; }
.footer-logo-1-img .elementor-widget-container { line-height: 1; }
.footer-logo-2.e-con.e-flex { flex: 0 0 auto; position: relative; width: 97.8px; height: 33.6px; background: #FFFFFF; box-shadow: 0px 3px 21px rgba(30, 34, 40, 0.07); border-radius: 4.8px; }
.footer-logo-2-img.elementor-widget { position: absolute; left: calc(50% - 36px/2 + 0.1px); top: calc(50% - 28px/2 + 0.2px); width: 36px; height: 28px; }
.footer-logo-2-img.elementor-widget img { width: 36px; height: 28px; display: block; }
.footer-logo-2-img .elementor-widget-container { line-height: 1; }
.footer-logo-3.e-con.e-flex { flex: 0 0 auto; position: relative; width: 97.8px; height: 33.6px; background: #FFFFFF; box-shadow: 0px 3px 21px rgba(30, 34, 40, 0.07); border-radius: 4.8px; }
.footer-logo-3-img.elementor-widget { position: absolute; left: calc(50% - 76px/2 - 1.9px); top: calc(50% - 47px/2 - 0.3px); width: 76px; height: 47px; }
.footer-logo-3-img.elementor-widget img { width: 76px; height: 47px; display: block; }
.footer-logo-3-img .elementor-widget-container { line-height: 1; }
.footer-logo-4.e-con.e-flex { flex: 0 0 auto; position: relative; width: 97.8px; height: 33.6px; background: #FFFFFF; box-shadow: 0px 3px 21px rgba(30, 34, 40, 0.07); border-radius: 4.8px; }
.footer-logo-4-img.elementor-widget { position: absolute; left: calc(50% - 44px/2 + 0.1px); top: calc(50% - 34px/2 + 0.2px); width: 44px; height: 34px; }
.footer-logo-4-img.elementor-widget img { width: 44px; height: 34px; display: block; }
.footer-logo-4-img .elementor-widget-container { line-height: 1; }
.footer-logo-5.e-con.e-flex { flex: 0 0 auto; position: relative; width: 97.8px; height: 33.6px; background: #FFFFFF; box-shadow: 0px 3px 21px rgba(30, 34, 40, 0.07); border-radius: 4.8px; }
.footer-logo-5-img.elementor-widget { position: absolute; left: calc(50% - 84px/2 + 0.1px); top: calc(50% - 48px/2 + 0.2px); width: 84px; height: 48px; }
.footer-logo-5-img.elementor-widget img { width: 84px; height: 48px; display: block; }
.footer-logo-5-img .elementor-widget-container { line-height: 1; }
.footer-logo-6.e-con.e-flex { flex: 0 0 auto; position: relative; width: 97.8px; height: 33.6px; background: #FFFFFF; box-shadow: 0px 3px 21px rgba(30, 34, 40, 0.07); border-radius: 4.8px; }
.footer-logo-6-img.elementor-widget { position: absolute; left: calc(50% - 95.5px/2 - 0.4px); top: calc(50% - 50px/2 + 0.2px); width: 95.5px; height: 50px; }
.footer-logo-6-img.elementor-widget img { width: 95.5px; height: 50px; display: block; }
.footer-logo-6-img .elementor-widget-container { line-height: 1; }

/* ===== Footer Pattern Dark -- Radial 1.1 -- 2026-08-21 =====
   No usable image asset -- the user's Figma export for this layer
   consistently collapsed to a 1x1px PNG (confirmed twice, fresh re-export
   same result), meaning the layer's real rendered content is a uniform
   flat fill, not a visually-varying gradient despite the 'Radial' name.
   Built as a flat rgba() fill using that pixel's own sampled color
   (50,62,80 @ ~0.4 alpha) directly -- no separate opacity property,
   avoiding the double-opacity gotcha since color+alpha are one value. */
.footer-radial-1-1.e-con { position: absolute; left: 0px; top: 206px; width: 1440px; height: 496px; background: rgba(50, 62, 80, 0.4); }

/* ===== Footer Pattern Dark -- Frame 16.1 (dark texture asset) -- 2026-08-21 =====
   Real asset (Frame 16.1.png, 2880x1548) confirmed via pixel sampling to
   already have ~40% opacity baked in (avg alpha ~102/255) and a dark tone
   matching #2A3342 almost exactly -- no separate CSS opacity applied.
   Stretched to the full given box (1440x1320, native aspect doesn't tile
   cleanly like the light Frame16 texture did) via explicit background-size.
   Explicit z-index keeps Frame 217 (payment logos) above this, per
   instruction, rather than relying on implicit DOM-order tie-breaking. */
.footer-payment-logos.e-con.e-flex { z-index: 2; }

/* ===== Footer Pattern Dark -- Frame 16.1 v2 (corrected 0.6 opacity) -- 2026-08-21 =====
   User re-exported with the layer's real Figma opacity (0.6, verified
   directly in Figma -- supersedes the earlier 0.4 assumption sampled
   from the first export). Re-sampled locally: avg alpha now ~153/255
   (~0.6), confirming the new export bakes in the correct value -- no
   separate CSS opacity applied, same reasoning as before. Same native
   2x-halved tile size (1440x774) and repeat-y convention as the
   previous version, unchanged. */
.footer-frame16-1.e-con { position: absolute; left: 0px; top: -264px; width: 1440px; height: 1320px; background-image: url('https://offshoresecretaryservices.com/wp-content/uploads/2026/08/footer-frame16-1-dark-v2-scaled.png'); background-size: 1440px 774px; background-repeat: repeat-y; z-index: 1; }

/* ===== Header nav-item hover state -- 2026-08-21 =====
   The blue/semibold styling previously baked into 'Trang Chủ' as a
   permanent 'active page' look was actually meant to be a :hover effect
   -- user confirmed. Reset Trang Chủ's own default settings to match
   every other nav item (#374151, weight 500) and added this shared hover
   rule instead, applying to all 7 nav items uniformly. */
.xpro-theme-builder-header .elementor-906 .nav-item:hover .elementor-heading-title {
  color: #3C77FF;
  font-weight: 600;
  transition: color 0.2s ease;
}

/* ===== Footer link-list hover state (Frame 148/149/151) -- 2026-08-21 =====
   Same blue/semibold hover treatment as the header nav items, applied to
   the individual link text in the Dich Vu / Dieu Khoan / Lien Ket Huu Ich
   columns -- explicitly NOT their column headings (footer-*-heading),
   per instruction. These are text-editor widgets (not heading widgets
   like the nav items), which target the outer widget wrapper directly
   rather than .elementor-widget-container -- confirmed via the live
   Elementor-generated rule (3 classes) before writing this. 4 classes
   here beats that outright, no specificity tie. */
.dbg-footer .footer-services-list .elementor-widget-text-editor:hover,
.dbg-footer .footer-legal-list .elementor-widget-text-editor:hover,
.dbg-footer .footer-useful-list .elementor-widget-text-editor:hover {
  color: #3C77FF;
  font-weight: 600;
  transition: color 0.2s ease;
}

/* Hero trust-badge pills: gentle ambient left-right sway, 8px amplitude, staggered so all 6 don't move in sync */
@keyframes hero-tab-sway {
  0%, 100% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
}
.hero-tab {
  animation: hero-tab-sway 3.08s ease-in-out infinite;
  will-change: transform;
}
.hero-tab-1{animation-delay:0s;}
.hero-tab-2{animation-delay:0.6s;}
.hero-tab-3{animation-delay:1.2s;}
.hero-tab-4{animation-delay:1.8s;}
.hero-tab-5{animation-delay:2.4s;}
.hero-tab-6{animation-delay:3s;}
@media (prefers-reduced-motion: reduce) {
  .hero-tab { animation: none; }
}

/* Hero trust-badge pills: standard project button shadow (design-tokens.md two-layer spec) */
.hero-tab { /* hero-tab-shadow */
  box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1);
}

/* Hero CTA button: floating gradient fill on hover, brand blues only (orange is accent-only per design-tokens.md) */
@keyframes hero-cta-gradient-float {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.elementor-905 .hero-cta-button.e-con:hover {
  background: linear-gradient(120deg, #F1743A 0%, #EE5A21 35%, #F1743A 65%, #FBD4C2 100%);
  background-size: 250% 250%;
  animation: hero-cta-gradient-float 2.14s ease-in-out infinite;
  border-color: #FBD4C2;
}
@media (prefers-reduced-motion: reduce) {
  .elementor-905 .hero-cta-button.e-con:hover { animation: none; background-position: 50% 50%; }
}