.elementor-kit-8{--e-global-color-primary:#0077B6;--e-global-color-secondary:#03045E;--e-global-color-text:#2B4A8F;--e-global-color-accent:#00B4D8;--e-global-color-brandlight:#90E0EF;--e-global-color-brandpale:#CAF0F8;--e-global-color-navy900:#01021F;--e-global-color-navy800:#020340;--e-global-color-navy700:#03045E;--e-global-color-navy500:#2B4A8F;--e-global-color-navy50:#F1FAFD;--e-global-color-teal600:#005F92;--e-global-color-teal500:#0077B6;--e-global-color-teal400:#00B4D8;--e-global-color-teal50:#EAF9FD;--e-global-color-sky100:#CAF0F8;--e-global-typography-primary-font-family:"Bebas Neue";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Bebas Neue";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:600;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Real scroll-reveal animation (matches reference site's js/style.css) */
.reveal{ opacity:0; transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.reveal-up-16{ transform:translateY(16px); }
.reveal-up-20{ transform:translateY(20px); }
.reveal-up-24{ transform:translateY(24px); }
.reveal-up-30{ transform:translateY(30px); }
.reveal-up-40{ transform:translateY(40px); }
.reveal-left-50{ transform:translateX(-50px); }
.reveal-right-50{ transform:translateX(50px); }
.reveal.in-view{ opacity:1; transform:translate(0,0); }
/* Delivery svc-frame corner accent box - matched pixel-for-pixel against the user's
exact target screenshot (measured via image analysis): box is 68% wide x 58% tall
of the 416x416 frame, sitting -26% (108px) past the right edge and -1rem (16px)
past the bottom edge. Border stays thin on top/left (1px, lighter) and thicker on
right/bottom (2px, more opaque), matching the reference cascade. */
.elementor-element-af956d3::before { top: auto !important; left: auto !important; right: -26% !important; bottom: -1rem !important; width: 68% !important; height: 58% !important; border: 1px solid rgba(0,180,216,.5) !important; border-right: 2px solid rgba(0,180,216,.55) !important; border-bottom: 2px solid rgba(0,180,216,.55) !important; }
/* Supply Portfolio heading underline should be centered under the centered heading text */
.s-spp-heading::after { margin-left: auto !important; margin-right: auto !important; }
/* CTA section (d9757e7) light theme - matches .svc2 section.bg-navy-800 in service-pages.css */
.elementor-element-d9757e7 { background: radial-gradient(60rem 32rem at 12% -10%, rgba(0,180,216,.16), transparent 62%), radial-gradient(48rem 30rem at 92% 108%, rgba(0,119,182,.13), transparent 60%), linear-gradient(180deg,#FBFDFF 0%,#F2F8FD 100%) !important; overflow: hidden; }
.elementor-element-d9757e7::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(3,4,94,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(3,4,94,.045) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: radial-gradient(75% 65% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(75% 65% at 50% 40%, #000 30%, transparent 100%); z-index: 0; }
.elementor-element-d9757e7 > * { position: relative; z-index: 1; }
.elementor-element-9d47a57, .elementor-element-cd6c175 { display: none !important; }
.elementor-element-d9757e7 h2, .elementor-element-d9757e7 h3, .elementor-element-d9757e7 .text-white:not(a):not(button) { color: #03045E !important; }
.elementor-element-d9757e7 .text-sky-300 { color: #0077B6 !important; }
.elementor-element-d9757e7 .s-e88aa52 { background: rgba(0,180,216,.10) !important; border-color: rgba(0,119,182,.28) !important; box-shadow: none !important; padding: 6px 16px !important; }
/* Hero wave decoration collapses to 0 width inside flex row - pin it to fill the hero */
.elementor-element-da52198 { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; z-index: 0; }
/* Delivery image figure had default 10px padding pushing image inside the frame, misaligning the corner border */
.elementor-element-0952784 { padding: 0 !important; }
/* ============ RESPONSIVE FIXES (tablet + mobile) ============
These sections were converted from Tailwind's responsive "lg:grid-cols-2" pattern,
which is 1 column by default and only becomes 2 columns at 1024px+. The Elementor
conversion baked in the 2-column desktop layout unconditionally. Restoring the
single-column stack below 1024px to match the original responsive design. */
@media (max-width: 1023px) {
.elementor-element-fd24b7b { grid-template-columns: 1fr !important; }
.elementor-element-acd4cea { grid-template-columns: 1fr !important; }
.elementor-element-ddf5417 { grid-template-columns: 1fr !important; }
.elementor-element-c965c2e { margin: 1rem 0 0 0 !important; max-width: none !important; }
.elementor-element-af956d3::before { display: none !important; }
}
/* ============ FULL-BLEED SECTIONS: guarantee no side gaps at any viewport width ============
These are the section-level wrappers (hero, navy sourcing band, CTA band) that must
always span edge-to-edge regardless of monitor size or browser zoom. */
.elementor-element-a6e8025,
.elementor-element-be9b3f9,
.elementor-element-d9757e7 {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
left: 0 !important;
right: 0 !important;
}
/* ============ HERO BACKGROUND GAP FIX ============
The hero background image wrapper carries a leftover CSS animation
(hero-zoom-out) whose transform got stuck mid-scale (scale(1.12)) instead
of settling at scale(1). Because the wrapper has inset:0 on top of that
stuck 1.12x scale, it renders larger than its container and gets
re-centered, exposing a sliver of the section's own background on both
left and right edges. Also strip the residual 10px inline padding that
Elementor's atomic base reset (.e-div-block-base) applies to the hero
container, which independently shrinks the visible image and can show as
the same kind of edge gap. */
.elementor-element-d1e7690 {
animation: hero-zoom-out 8s ease-out forwards !important;
inset: -1px !important;
width: calc(100% + 2px) !important;
height: calc(100% + 2px) !important;
left: -1px !important;
right: -1px !important;
}
@keyframes hero-zoom-out { from { transform: scale(1.12); } to { transform: scale(1); } }
.elementor-element-a6e8025 {
padding-inline-start: 0 !important;
padding-inline-end: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow: hidden !important;
}
/* HERO GAP FIX PART 2: the hero background wrapper (.elementor-element-d1e7690,
which also carries Elementor's atomic .e-div-block-base class) still had that
base class's 10px padding, squeezing the ![]()
inward on all sides and
exposing a thin dark strip of the section's own background color at the
left/right (and top/bottom) edges. Zero it out explicitly and make the image
itself absolutely fill the wrapper edge-to-edge. */
.elementor-element-d1e7690 {
padding: 0 !important;
}
.elementor-element-d1e7690 img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Eyebrow accent line (the short "———" before SERVICES / OVERVIEW labels) was
sitting low: the 1px line is inline-block with default baseline
vertical-align inside a 16px-tall widget wrapper, so it hugs the text
baseline near the bottom instead of the middle. Center it with flex. */
.elementor-element-38ed063,
.elementor-element-a685ec3 {
display: flex !important;
align-items: center !important;
}
.elementor-widget-html:has(> span[class*="h-px"]) {
display: flex !important;
align-items: center !important;
}/* End custom CSS */