.elementor-kit-225{--e-global-color-primary:#0070E0;--e-global-color-secondary:#003087;--e-global-color-text:#001F3F;--e-global-color-accent:#0070E0;--e-global-color-83307fe:#F4F5FA;--e-global-color-f3c46f4:#F7D297;--e-global-color-99355c0:#FFFFFF;--e-global-color-34ab76d:#000000;--e-global-typography-primary-font-family:"Polymath";--e-global-typography-primary-font-size:45px;--e-global-typography-primary-font-weight:900;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:40px;--e-global-typography-primary-letter-spacing:-1px;--e-global-typography-secondary-font-family:"Polymath";--e-global-typography-secondary-font-size:25px;--e-global-typography-secondary-font-weight:900;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:25px;--e-global-typography-secondary-letter-spacing:0.5px;--e-global-typography-text-font-family:"Polymath";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:500;--e-global-typography-text-line-height:20px;--e-global-typography-text-letter-spacing:0.5px;--e-global-typography-accent-font-family:"Polymath";--e-global-typography-accent-font-size:11px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:1px;--e-global-typography-00f4fec-font-family:"Polymath";--e-global-typography-00f4fec-font-size:16px;--e-global-typography-00f4fec-font-weight:500;--e-global-typography-00f4fec-text-transform:uppercase;--e-global-typography-00f4fec-line-height:16px;--e-global-typography-00f4fec-letter-spacing:1px;}.elementor-kit-225 button,.elementor-kit-225 input[type="button"],.elementor-kit-225 input[type="submit"],.elementor-kit-225 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Polymath", Sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0px;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:var( --e-global-color-99355c0 );box-shadow:0px 0px 0px 0px rgba(0,0,0,0.5);}.elementor-kit-225 e-page-transition{background-color:#FFBC7D;}.elementor-kit-225 a{color:var( --e-global-color-f3c46f4 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end: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 *//* == KC mu-plugin CSS migrated to kit custom_css — see kawaconnect-schema.php history == */ #orb-animation-wrapper { display: none !important; } /* Force the
to be its own stacking context so we can put the orb inside it at z:-1 (below everything in the header) while still being above the header's own background fill. */ .elementor-location-header { position: relative !important; z-index: 0 !important; isolation: isolate !important; } /* Orb is injected (via JS) as a direct child of
. Absolute positioning inside the isolated header context + z-index -1 puts it below every other header child naturally. */ .elementor-location-header > #kc-orb-wrap { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: -1 !important; pointer-events: none !important; overflow: hidden !important; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); } .elementor-location-header > #kc-orb-wrap > #kc-orb-canvas { display: block !important; width: 100% !important; height: 100% !important; } /* Intermediate Elementor containers inside the header often carry their own opaque background (white, grey, etc.) that would paint over our z:-1 orb and hide it. Force them transparent so the orb stays visible. Widget-level backgrounds are left intact, the logo/nav/CTA keep whatever fills they were designed with. */ .elementor-location-header .e-con, .elementor-location-header .e-parent, .elementor-location-header .e-con-inner, .elementor-location-header .e-con-boxed, .elementor-location-header .e-con-full { background: transparent !important; background-color: transparent !important; background-image: none !important; } @media (prefers-reduced-motion: reduce) { #kc-orb-wrap { display: none !important; } } /* ======================================================== MOBILE HEADER — absolute-positioned layout. Elementor's mobile CSS stacks the header vertically and assigns full-width to every widget. Fighting that via flex overrides kept producing drift (burger wandering to center, logo collapsing, click targets not registering). Instead we make the header a fixed-height positioning context and pin the two visible widgets (logo left, burger right) with position:absolute so their placement is predictable and neither blocks the other's tap target. ======================================================== */ @media (max-width: 767px) { /* Kill orb on mobile */ .elementor-location-header #kc-orb-wrap, .elementor-location-header #orb-animation-wrapper, #kc-orb-wrap, #orb-animation-wrapper { display: none !important; } /* Header becomes a fixed-height positioning context. The outer container a76f592 is where Elementor paints the background color, so it also needs the height. */ .elementor-location-header, .elementor-location-header .elementor-element-a76f592 { position: relative !important; height: 72px !important; min-height: 72px !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } /* Wipe flex behavior on the inner container so its children don't fight for layout. Absolute children don't care about flex anyway. */ .elementor-location-header .elementor-element-a76f592 { display: block !important; flex-direction: initial !important; --flex-direction: row !important; --flex-wrap-mobile: nowrap !important; } /* Hide the three widgets we don't show on mobile */ .elementor-location-header .elementor-widget-social-icons, .elementor-location-header .elementor-widget-button, .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main { display: none !important; } /* The empty orb-injection HTML widget shouldn't eat clicks */ .elementor-location-header .elementor-widget-html { position: static !important; } /* ====== LOGO, pinned left-center ====== NOTE: we intentionally do NOT use transform:translateY here. An element with transform becomes a containing block for any position:fixed descendant, which broke the dropdown menu (its left/right:0 pinned to the widget box instead of the viewport). Use top math instead: header height 72 − logo 64 = 8, /2 = 4. */ .elementor-location-header .elementor-element-3dc2545 { position: absolute !important; left: 16px !important; top: 4px !important; transform: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; height: auto !important; display: block !important; text-align: left !important; z-index: 10 !important; } .elementor-location-header .elementor-element-3dc2545 > .elementor-widget-container { padding: 0 !important; margin: 0 !important; } .elementor-location-header .elementor-element-3dc2545 a { display: block !important; line-height: 0 !important; } .elementor-location-header .elementor-element-3dc2545 img { display: block !important; height: 64px !important; width: 64px !important; max-width: none !important; max-height: none !important; object-fit: contain !important; } /* ====== BURGER, pinned right-center ====== The nav-menu widget wraps the burger; pinning the widget absolutely puts the burger exactly where we want, and gives it a known tap target above everything else. */ .elementor-location-header .elementor-element-675213b { position: absolute !important; right: 12px !important; top: 12px !important; /* (72 − 48) / 2 = 12, no transform */ transform: none !important; margin: 0 !important; padding: 0 !important; width: 48px !important; max-width: 48px !important; height: 48px !important; overflow: visible !important; z-index: 10000 !important; } .elementor-location-header .elementor-element-675213b > .elementor-widget-container { padding: 0 !important; margin: 0 !important; overflow: visible !important; width: 48px !important; height: 48px !important; } /* The actual tap target. Stays display:flex so Elementor's active-class swap between --icon--open and --icon--close keeps working. */ .elementor-location-header .elementor-menu-toggle { position: relative !important; z-index: 10001 !important; pointer-events: auto !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; -webkit-tap-highlight-color: rgba(0,112,224,0.2) !important; touch-action: manipulation !important; } .elementor-location-header .elementor-menu-toggle svg { width: 32px !important; height: 32px !important; pointer-events: none !important; } } @media (max-width: 420px) { .elementor-location-header, .elementor-location-header .elementor-element-a76f592 { height: 64px !important; min-height: 64px !important; } .elementor-location-header .elementor-element-3dc2545 { left: 12px !important; top: 4px !important; /* (64 − 56) / 2 = 4 */ } .elementor-location-header .elementor-element-3dc2545 img { height: 56px !important; width: 56px !important; } .elementor-location-header .elementor-element-675213b { right: 8px !important; top: 8px !important; /* (64 − 48) / 2 = 8 */ } /* Contact button: tighter on narrow phones */ .elementor-location-header #kc-mobile-contact { right: 64px !important; top: 12px !important; /* (64 − 40) / 2 = 12 */ height: 40px !important; padding: 0 14px !important; font-size: 13px !important; } } /* ====== MOBILE CONTACT BUTTON ====== Injected by JS as a direct child of the header on mobile. Positioned just left of the burger (which sits at right:12px with width 48px, so its left edge is at right:60px; we park the contact button at right:68px for an 8px gap). */ @media (max-width: 767px) { .elementor-location-header #kc-mobile-contact { position: absolute !important; right: 68px !important; top: 16px !important; /* (72 − 40) / 2 = 16 */ height: 40px !important; padding: 0 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #0070E0 !important; color: #FFFFFF !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; text-decoration: none !important; border-radius: 10px !important; box-shadow: 0 2px 6px rgba(0,112,224,0.25) !important; transition: background .2s ease, transform .15s ease !important; z-index: 100 !important; white-space: nowrap !important; -webkit-tap-highlight-color: rgba(255,255,255,0.2) !important; touch-action: manipulation !important; } .elementor-location-header #kc-mobile-contact:active { transform: scale(0.96) !important; background: #003087 !important; } } /* Hide the injected contact button on desktop / tablet (the existing 'Get Started' button already lives there). */ @media (min-width: 768px) { .elementor-location-header #kc-mobile-contact { display: none !important; } } /* ======================================================== Header nav: push "Customer Support" to the right on desktop so it reads as an auxiliary action, not another nav item in the main row. The menu is horizontal flex, so margin-left:auto on this one
  • consumes all remaining slack and shoves it to the far right. ======================================================== */ @media (min-width: 1025px) { .elementor-nav-menu > li.kc-nav-right { margin-left: auto !important; } } /* On mobile the dropdown is a vertical list, so just leave Customer Support where it falls in order (last item). */ /* ======================================================== Contact page, form + info card polish ======================================================== */ .kc-eyebrow .elementor-heading-title { text-transform: uppercase !important; } .kc-contact-hero { position: relative; overflow: hidden; } .kc-contact-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(60% 50% at 10% 20%, rgba(125,179,240,0.22) 0%, rgba(125,179,240,0) 60%), radial-gradient(50% 50% at 90% 80%, rgba(0,112,224,0.18) 0%, rgba(0,112,224,0) 60%); pointer-events: none; } .kc-contact-hero > * { position: relative; z-index: 1; } /* Form card */ .kc-form-card { transition: box-shadow .3s ease; } .kc-contact-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; /* Isolate the form styling from any ambient `text-transform` or font inheritance coming from Elementor's kit, these had been making input text render differently from label text. */ text-transform: none; } .kc-contact-form label { display: block; font-size: 12px; font-weight: 700; color: #001F3F; letter-spacing: 0.5px; text-transform: uppercase; margin: 0; } .kc-contact-form label > input, .kc-contact-form label > select, .kc-contact-form label > textarea { /* Pull the input onto its own line under the label text */ display: block; margin-top: 8px; } .kc-contact-form .kc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .kc-contact-form .kc-form-row { grid-template-columns: 1fr; } } /* Input reset, prevent label typography from leaking into values. Explicit min-height matters because chevron: Elementor Pro already renders a .select-caret-down-wrapper svg next to the select, so we do NOT add a background-image chevron (would double up). We just color Elementor's caret to brand and reserve the right padding room for it on the select itself. */ .kc-elementor-form select.elementor-field-textual { background-image: none !important; padding-right: 44px !important; text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hidden !important; } .kc-elementor-form .elementor-select-wrapper .select-caret-down-wrapper { color: #001F3F !important; inset-inline-end: 14px !important; } .kc-elementor-form .elementor-select-wrapper .select-caret-down-wrapper svg { fill: #001F3F !important; width: 14px !important; height: 14px !important; } @media (max-width: 420px) { .kc-elementor-form select.elementor-field-textual { font-size: 14px !important; } } /* Submit button */ .kc-elementor-form .elementor-button { margin-top: 4px !important; padding: 14px 22px !important; background: #0070E0 !important; color: #FFFFFF !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: 0.2px !important; border: 1px solid #0070E0 !important; border-radius: 10px !important; cursor: pointer !important; transition: all .2s ease !important; font-family: inherit !important; text-transform: none !important; width: 100% !important; } .kc-elementor-form .elementor-button:hover, .kc-elementor-form .elementor-button:focus { background: #003087 !important; border-color: #003087 !important; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,112,224,0.28); } /* Success / error messages */ .kc-elementor-form .elementor-message.elementor-message-success { color: #047857 !important; background: rgba(4,120,87,0.08) !important; border: 1px solid rgba(4,120,87,0.25) !important; border-radius: 10px !important; padding: 14px 16px !important; margin-top: 12px !important; font-size: 14px !important; } .kc-elementor-form .elementor-message.elementor-message-danger { color: #B91C1C !important; background: rgba(185,28,28,0.06) !important; border: 1px solid rgba(185,28,28,0.25) !important; border-radius: 10px !important; padding: 14px 16px !important; margin-top: 12px !important; font-size: 14px !important; } /* ======================================================== Homepage HERO overhaul. Big, legible H1 over the existing video bg. Trust strip is a small linked paragraph below the CTAs. ======================================================== */ .kc-hero { min-height: 560px !important; } @media (max-width: 768px) { .kc-hero { min-height: 460px !important; } } /* Dark gradient that's stronger on the left (where copy now sits) and fades on the right, so the video still breathes. */ .kc-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,12,32,0.82) 0%, rgba(0,12,32,0.62) 40%, rgba(0,31,63,0.35) 100%); z-index: 0; pointer-events: none; } .kc-hero > .e-con-inner, .kc-hero > .e-con-full { position: relative; z-index: 1; } /* Pin the whole hero inner-container to the LEFT edge on desktop. Elementor's hero structure is: .kc-hero (e-con-boxed, flex) > .e-con-inner (max-width boxed, flex col) > [video bg div] > .e-con.e-parent (the widgets wrapper we want to left-pin) > .e-con-inner (widgets stack) So we need to override BOTH the outer kc-hero's justify / align behavior AND the inner .e-con-boxed constraint so the whole widget column sits on the left ~640-720px wide. */ @media (min-width: 1025px) { /* Outer section: left-justify its content */ #kc-hero.elementor-element, #kc-hero { --justify-content: flex-start !important; --align-items: flex-start !important; justify-content: flex-start !important; align-items: flex-start !important; text-align: left !important; } /* The inner .e-con-inner inside kc-hero — this is the boxed width container. Expand it full-width so the widget column we target next isn't auto-centered inside a narrow boxed wrapper. */ #kc-hero > .e-con-inner { max-width: 100% !important; width: 100% !important; margin: 0 !important; justify-content: flex-start !important; align-items: flex-start !important; } /* The widget column (.e-con.e-parent nested inside). Fixed max-width, hugs the left edge, no auto centering. */ #kc-hero > .e-con-inner > .e-con, #kc-hero > .e-con-full > .e-con { margin-left: clamp(24px, 7vw, 120px) !important; margin-right: auto !important; max-width: 720px !important; width: 720px !important; align-self: flex-start !important; } /* Its inner widget wrapper too — make widgets stack left. */ #kc-hero > .e-con-inner > .e-con > .e-con-inner { max-width: 100% !important; width: 100% !important; align-items: flex-start !important; } /* Kill any text-align-center inherited on the section. */ #kc-hero .elementor-widget-heading .elementor-heading-title, #kc-hero .elementor-widget-text-editor, #kc-hero .elementor-widget-text-editor p { text-align: left !important; } /* Divider stays left-pinned */ #kc-hero .elementor-widget-divider .elementor-divider { text-align: left !important; margin-left: 0 !important; } #kc-hero .elementor-widget-divider .elementor-divider__element { margin-left: 0 !important; } /* Button row: left-justify buttons */ #kc-hero .kc-hero-cta { justify-content: flex-start !important; } } @media (max-width: 1024px) { /* Tablet + mobile: let the column take full width, but keep text/buttons left-aligned so the experience is consistent with desktop. */ #kc-hero { text-align: left !important; } #kc-hero .elementor-widget-heading .elementor-heading-title, #kc-hero .elementor-widget-text-editor, #kc-hero .elementor-widget-text-editor p { text-align: left !important; } #kc-hero .kc-hero-cta { justify-content: flex-start !important; } } .kc-hero-h1 { text-shadow: 0 2px 24px rgba(0,12,32,0.45); } .kc-hero-eyebrow { text-shadow: 0 1px 6px rgba(0, 12, 32, 0.5); } .kc-hero-eyebrow .elementor-heading-title { color: #F7D297 !important; } .kc-hero-sub p { margin: 0 !important; } /* Hero CTA row — keep buttons visually balanced */ .kc-hero-cta .kc-agile-btn.elementor-button { min-width: 180px; transition: all .2s ease !important; } /* Trust-line text: left-leaning and constrained in width so the line doesn't stretch across the full hero on desktop. */ .kc-hero-trust p { margin: 0 !important; max-width: 640px; margin-left: 0 !important; margin-right: 0 !important; } .kc-hero-cta .kc-agile-btn--primary.elementor-button:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0,112,224,0.35) !important; } .kc-hero-cta .kc-agile-btn--ghost.elementor-button:hover { transform: translateY(-1px); } /* Trust strip under hero */ .kc-hero-trust { margin-top: 8px !important; } .kc-hero-trust p { margin: 0 !important; max-width: 820px; margin-left: auto !important; margin-right: auto !important; } .kc-hero-trust a { color: rgba(255,255,255,0.82) !important; text-decoration: none !important; transition: color .2s ease; border-bottom: 1px dotted rgba(255,255,255,0.35); padding-bottom: 2px; } .kc-hero-trust a:hover { color: #FFFFFF !important; border-bottom-color: rgba(255,255,255,0.8); } .kc-hero-trust strong { color: rgba(255,255,255,0.95); font-weight: 600; } /* ======================================================== Featured Services — new 8-card grid, 4 across desktop / 2 across tablet / 2 across mobile. Each card holds an icon, a hover-revealed description, and a title below. ======================================================== */ /* Services card widths — the grid container ALWAYS has a 20px flex gap emitted by Elementor (set at the container level in _elementor_data). _css_classes on containers doesn't render as an HTML class in this stack, so we can't override the gap from our side. Instead we use the real 20px gap in our card width math. Math: two cards per row + 20px gap = 100% of parent. Each card width = (100% - 20px) / 2 = calc(50% - 10px) Selector uses .elementor-widget.kc-svc-card-widget compound to beat Elementor's default max-width:100% on widgets. */ #services .elementor-widget.kc-svc-card-widget, .e-con > .kc-svc-card-widget, .e-con-inner > .kc-svc-card-widget { flex: 0 0 calc(25% - 15px) !important; width: calc(25% - 15px) !important; max-width: calc(25% - 15px) !important; } @media (max-width: 1024px) { #services .elementor-widget.kc-svc-card-widget, .e-con > .kc-svc-card-widget, .e-con-inner > .kc-svc-card-widget { flex: 0 0 calc(50% - 10px) !important; width: calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; } } @media (max-width: 640px) { #services .elementor-widget.kc-svc-card-widget, .e-con > .kc-svc-card-widget, .e-con-inner > .kc-svc-card-widget { flex: 0 0 calc(50% - 10px) !important; width: calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; } } /* Services section bg is a near-white polygon — cards must be light-on-light-safe: white tile + navy title, matching the Agile and Partners design language. Icons render naked (no circular container) on all breakpoints. On mobile the grid collapses to 2 per row instead of 1 so visitors don't scroll forever, and the tooltip description becomes visible inline below the title since hover doesn't work on touch. */ .kc-svc { background: #FFFFFF; border: 1px solid rgba(0, 31, 63, 0.08); border-radius: 18px; padding: 28px 22px; height: 100%; box-sizing: border-box; text-align: center; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; cursor: default; box-shadow: 0 6px 16px rgba(0, 31, 63, 0.04); } .kc-svc:hover { transform: translateY(-4px); border-color: rgba(0, 112, 224, 0.25); box-shadow: 0 22px 48px rgba(0, 31, 63, 0.1); } .kc-svc-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; height: 100%; } /* Icon container: no bg, no circle — icons sit naked on the card. Keep it as a flex container only so the tooltip can anchor off it positionally. */ .kc-svc-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 4px 0; } .kc-svc-icon { width: 72px; height: 72px; object-fit: contain; transition: transform .25s ease; } .kc-svc:hover .kc-svc-icon { transform: scale(1.06); } /* Cards are tap-focusable on touch devices so the description tooltip can be revealed with a tap. Remove the blue focus outline (we have our own hover/active state). */ .kc-svc { outline: none; } .kc-svc:focus-visible { outline: 2px solid #0070E0; outline-offset: 3px; } /* Tooltip (description) — hidden by default, revealed on hover/focus on pointer-capable screens. Below 640px it's shown inline beneath the title instead. */ .kc-svc-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 240px; max-width: 320px; background: #001F3F; color: #FFFFFF; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; box-shadow: 0 14px 36px rgba(0,12,32,0.25); z-index: 10; } .kc-svc-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #001F3F; } .kc-svc:hover .kc-svc-tip, .kc-svc:focus-within .kc-svc-tip { opacity: 1; transform: translateX(-50%) translateY(-4px); } .kc-svc-title { color: #001F3F !important; font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: -0.2px; margin: 0 !important; line-height: 1.3; } /* MOBILE — 2-column icon grid with tap-reveal toast. Pattern follows Material 3 + NN/g guidance: cards tap to focus (tabindex=0 added to each card), black tooltip overlays below the card via position:absolute so the grid never shifts, dismissed by tapping any other card or anywhere else (blur). The bottom row flips the tooltip above the card so it doesn't clip off-screen. ======================================================== */ @media (max-width: 640px) { /* Parents must allow the absolute tooltip to escape. */ .kc-services-grid, .kc-services-grid .elementor-widget-html, .kc-services-grid .elementor-widget-container, .kc-svc-card-widget { overflow: visible !important; } .kc-svc-card-widget { position: relative; flex: 0 0 calc(50% - 6px) !important; /* Default low z-index — lets ALL sibling card widgets render in DOM order. */ z-index: 1; transition: z-index 0s ease 0.2s; /* delay drop on blur so the tooltip fades out above siblings */ } /* When a card is tapped/hovered, lift its WHOLE widget above sibling card widgets. Without this, sibling cards lower in the DOM (row 2, row 3) render on top of an upper-row card's tooltip because each widget is its own stacking context. Applied to both :focus-within (tap) and :hover (desktop-in- mobile-emulator) for parity. */ .kc-svc-card-widget:focus-within, .kc-svc-card-widget:hover { z-index: 100; transition: z-index 0s; /* raise immediately on focus */ } /* IMPORTANT: make .kc-svc the positioning context (not .kc-svc-icon-wrap) so the absolute tooltip anchors to the card's edges, not the icon's tiny 60px box. */ .kc-svc { position: relative !important; padding: 22px 14px 18px 14px; border-radius: 14px; min-height: 148px; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .kc-svc .kc-svc-icon-wrap { position: static !important; } .kc-svc-inner { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; height: 100%; } .kc-svc-icon-wrap { padding: 0; } .kc-svc-icon { width: 60px; height: 60px; } .kc-svc-title { font-size: 13px !important; line-height: 1.3 !important; text-align: center !important; color: #001F3F !important; margin: 0 !important; } /* Tooltip — black toast, absolute, below the card by default, tap-revealed, no layout shift. Width + anchor strategy: cards in the left column anchor the tooltip to their LEFT edge, right-column cards anchor to their RIGHT edge. That way the tooltip always expands inward into the grid, never off the viewport. Height is explicit auto + max-height: none so text never gets clipped (was getting clamped to just padding). */ /* NOTE: display: table (not block/inline-block) — Chrome has a layout bug where absolute-positioned block elements inside a flex-column parent with .kc-svc-inner { height:100% } collapse their height to padding-only (ignoring wrapped text). display: table triggers a different sizing algorithm that correctly accounts for wrapped text height. Tested: block=24px, inline-block=24, flow-root=24, table=61.5 (correct). */ .kc-svc-tip { display: table !important; position: absolute; top: calc(100% + 12px); left: 0; right: auto; transform: translateY(-4px); /* Fixed width (not max-content) so Chrome actually recomputes auto-height after wrapping. width: max-content was computing the intrinsic unwrapped text width (~900px for 87 chars), capping at max-width, but leaving the height at "1 line of unwrapped text" — a known absolute-positioning browser quirk. Using min() gives a hard pixel width so height auto-expands correctly. */ width: min(calc(100vw - 44px), 300px); height: fit-content !important; min-height: min-content !important; max-height: none !important; overflow: visible !important; contain: none !important; background: #001F3F; color: #FFFFFF; padding: 12px 14px; border-radius: 10px; font-size: 12.5px !important; line-height: 1.5 !important; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; box-shadow: 0 14px 36px rgba(0,12,32,0.38); z-index: 30; text-align: left; font-weight: 500; white-space: normal; box-sizing: border-box; } /* Right-column cards: flip anchor so bubble extends LEFT (toward the grid center) instead of right (off-screen). */ .kc-svc-card-widget:nth-child(even) .kc-svc-tip { left: auto; right: 0; } /* Arrow pointing up, positioned near the anchored edge so it points at the card that opened it. */ .kc-svc-tip::after { content: ""; display: block !important; position: absolute; bottom: 100%; left: 28px; right: auto; border: 7px solid transparent; border-bottom-color: #001F3F; border-top: 0; } .kc-svc-card-widget:nth-child(even) .kc-svc-tip::after { left: auto; right: 28px; } /* Focus-within on the parent card widget reveals the tooltip. Tap anywhere else to dismiss (focus leaves). */ .kc-svc:focus-within .kc-svc-tip, .kc-svc:hover .kc-svc-tip { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Focus ring for keyboard / AT users, suppressed for mouse/tap. */ .kc-svc { outline: none; } .kc-svc:focus-visible { outline: 2px solid #0070E0; outline-offset: 2px; } /* No other pseudo decorations on mobile (kills the earlier tap-affordance blue bar). */ .kc-svc::after { content: none !important; display: none !important; } /* BOTTOM ROW FLIP — the last row of the 2-column grid (cards 7 and 8 of 8) would clip the tooltip below the section. Flip them to appear ABOVE the card instead. Horizontal anchor stays (left: 0 for odd, right: 0 for even) — only vertical side flips. */ .kc-svc-card-widget:nth-last-child(-n+2) .kc-svc-tip { top: auto; bottom: calc(100% + 12px); transform: translateY(4px); } .kc-svc-card-widget:nth-last-child(-n+2) .kc-svc:focus-within .kc-svc-tip, .kc-svc-card-widget:nth-last-child(-n+2) .kc-svc:hover .kc-svc-tip { transform: translateY(0); } /* Arrow flips to point DOWN from the top of the bubble to the card below it. */ .kc-svc-card-widget:nth-last-child(-n+2) .kc-svc-tip::after { top: 100%; bottom: auto; border-top-color: #001F3F; border-bottom: 0; border-top: 7px solid #001F3F; border-bottom-color: transparent; } } /* ======================================================== KawaConnect Difference section — body text polish ======================================================== */ .kc-diff-body p { margin-bottom: 16px !important; } .kc-diff-body p:last-child { margin-bottom: 0 !important; } /* ======================================================== FAQ accordion — matches site rounded-card aesthetic ======================================================== */ .kc-faq .elementor-toggle-item { margin-bottom: 12px; border-radius: 12px !important; border: 1px solid rgba(0, 31, 63, 0.1) !important; overflow: hidden; background: #FFFFFF; box-shadow: 0 2px 8px rgba(0, 31, 63, 0.03); transition: box-shadow .2s ease, border-color .2s ease; } .kc-faq .elementor-toggle-item:hover { border-color: rgba(0, 112, 224, 0.25) !important; box-shadow: 0 6px 16px rgba(0, 31, 63, 0.06); } .kc-faq .elementor-tab-title { padding: 18px 22px !important; font-family: inherit !important; border: 0 !important; transition: background .2s ease; } .kc-faq .elementor-tab-title:hover { background: rgba(0, 112, 224, 0.04); } .kc-faq .elementor-tab-title.elementor-active { background: rgba(0, 112, 224, 0.06); border-bottom: 1px solid rgba(0, 31, 63, 0.08) !important; } .kc-faq .elementor-tab-title .elementor-toggle-icon { color: #0070E0 !important; } .kc-faq .elementor-tab-content { padding: 20px 22px !important; border: 0 !important; color: #3A4A5B; } .kc-faq .elementor-tab-content p { margin: 0; } /* ======================================================== Homepage "Agile IT" section polish. All layout (grid, padding, typography, button colors) now lives in the Elementor widget settings so editors can tweak in the UI. This block only adds the bits Elementor can't do natively: the offset "card" behind the keyboard image, the circle-bubble around each icon-list check, list-item spacing, and the gtag widget being hidden. ======================================================== */ #kc-gtag-hide { display: none !important; } /* Media column — now houses a CSS-only production status panel instead of a photograph. Offset gradient card stays. Panel width capped so it doesn't stretch across the whole 45% column; nudged left so its visual center lines up with the column's visual center (the floating toast + offset gradient both weigh the card to the right, so we compensate by shifting the card itself slightly left). */ .kc-agile-col--media { position: relative; display: flex; flex-direction: column; align-items: flex-start !important; justify-content: center !important; } .kc-agile-col--media::before { content: ""; position: absolute; inset: 28px -16px -28px 8px; background: linear-gradient(135deg, rgba(125,179,240,0.45) 0%, rgba(0,112,224,0.18) 100%); border-radius: 26px; z-index: 0; filter: blur(1px); pointer-events: none; } .kc-agile-col--media .elementor-widget-html, .kc-agile-col--media .elementor-widget-html .elementor-widget-container, .kc-agile-col--media .kc-status { width: 100%; max-width: 440px; } @media (min-width: 1025px) { .kc-agile-col--media .kc-status { margin-left: -20px; /* nudge left of column start */ margin-right: auto; } } @media (max-width: 1024px) { .kc-agile-col--media { align-items: center !important; } .kc-agile-col--media::before { display: none; } .kc-agile-col--media .kc-status { margin: 0 auto; } } /* --- Status panel --- */ .kc-status { position: relative; z-index: 1; font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif; } .kc-status-card { background: linear-gradient(165deg, #0B2A4A 0%, #001F3F 100%); border: 1px solid rgba(125, 179, 240, 0.18); border-radius: 22px; overflow: hidden; color: #E5EBF5; box-shadow: 0 32px 80px rgba(0, 12, 32, 0.30), 0 12px 32px rgba(0, 12, 32, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .kc-status-head { padding: 14px 22px 16px 22px; border-bottom: 1px solid rgba(125, 179, 240, 0.12); background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%); } .kc-status-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .kc-status-dots { display: flex; gap: 7px; } /* Real KawaConnect K mark (white/inverted, 720×720 SVG from the media library — the same asset used in the footer). No background or frame — let the inverted K sit naked on the navy header so it reads like a real product brand mark. */ .kc-status-brand { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: transform .2s ease, opacity .2s ease; opacity: 0.85; } .kc-status-brand img { width: 100%; height: 100%; display: block; object-fit: contain; } .kc-status-card:hover .kc-status-brand { opacity: 1; transform: scale(1.06); } .kc-status-dots span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.15); } .kc-status-dots span:nth-child(1) { background: #ED6A5A; } .kc-status-dots span:nth-child(2) { background: #F4BF4F; } .kc-status-dots span:nth-child(3) { background: #61C554; } .kc-status-title { color: #FFFFFF; font-size: 13px; font-weight: 700; letter-spacing: 0.2px; display: flex; align-items: center; gap: 9px; } .kc-status-title em { color: #7DD3A0; font-style: normal; font-weight: 600; } .kc-status-sep { color: rgba(255,255,255,0.3); font-weight: 400; } .kc-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .kc-status-dot--live { background: #61C554; box-shadow: 0 0 0 0 rgba(97, 197, 84, 0.6); animation: kcStatusPulse 2s infinite; } @keyframes kcStatusPulse { 0% { box-shadow: 0 0 0 0 rgba(97, 197, 84, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(97, 197, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(97, 197, 84, 0); } } .kc-status-body { padding: 8px 0; } .kc-status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; border-bottom: 1px solid rgba(125, 179, 240, 0.07); font-size: 13.5px; } .kc-status-row:last-child { border-bottom: 0; } .kc-status-svc { display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.88); font-weight: 500; letter-spacing: 0.15px; } .kc-status-pill { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .kc-status-pill--up { background: #61C554; box-shadow: 0 0 10px rgba(97,197,84,0.4); } .kc-status-pill--info { background: #7DB3F0; box-shadow: 0 0 10px rgba(125,179,240,0.35); } .kc-status-pill--warn { background: #F4BF4F; } .kc-status-val { color: rgba(255,255,255,0.55); font-size: 12px; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; letter-spacing: 0; } .kc-status-foot { padding: 14px 22px; font-size: 12px; color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(125, 179, 240, 0.1); background: rgba(0, 12, 32, 0.4); } .kc-status-foot strong { color: rgba(255,255,255,0.85); font-weight: 600; } .kc-status-pulse { width: 7px; height: 7px; border-radius: 50%; background: #61C554; box-shadow: 0 0 8px rgba(97,197,84,0.8); animation: kcStatusPulse 2s infinite; } /* Floating "deployment applied" toast card */ .kc-status-toast { position: absolute; right: -16px; bottom: -28px; background: #FFFFFF; color: #001F3F; border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 18px 40px rgba(0, 31, 63, 0.18), 0 6px 16px rgba(0, 31, 63, 0.10); font-size: 12px; line-height: 1.4; min-width: 210px; z-index: 2; animation: kcToastRise 0.6s ease-out 0.3s backwards; } @keyframes kcToastRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .kc-status-toast-dot { width: 10px; height: 10px; border-radius: 50%; background: #00A86B; box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.16); flex-shrink: 0; } .kc-status-toast-text strong { font-weight: 700; color: #001F3F; } @media (max-width: 1024px) { .kc-status-toast { right: 0; bottom: -20px; } } @media (max-width: 480px) { .kc-status-row { padding: 11px 18px; font-size: 13px; } .kc-status-head { padding: 14px 18px; } .kc-status-foot { padding: 12px 18px; } .kc-status-toast { position: static; margin-top: 22px; min-width: 0; width: 100%; box-sizing: border-box; } } /* Icon-list — add a soft circle behind each check for polish. */ .kc-agile-list .elementor-icon-list-items { margin: 0 !important; } .kc-agile-list .elementor-icon-list-item { align-items: flex-start !important; } .kc-agile-list .elementor-icon-list-icon { width: 28px; height: 28px; display: inline-flex !important; align-items: center; justify-content: center; background: rgba(0, 112, 224, 0.12); border-radius: 50%; margin-top: 1px; flex: 0 0 28px !important; } .kc-agile-list .elementor-icon-list-text { color: #1F2937 !important; } .kc-agile-list strong { color: #001F3F; font-weight: 700; } /* Button hover lift (Elementor doesn't expose a transform on hover). */ .kc-agile-btn.elementor-button { transition: all .2s ease !important; } .kc-agile-btn--primary.elementor-button:hover, .kc-agile-btn--primary.elementor-button:focus { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0,112,224,0.35) !important; } /* Mobile CTA row: stretch buttons full width so they look balanced. */ @media (max-width: 480px) { .kc-agile-cta > .elementor-widget-button { width: 100%; } .kc-agile-cta .elementor-button { width: 100%; } } /* ======================================================== Partners page polish. Hero keeps the original fixed-attachment background image. Logo grid treats every partner equally: white tile, logo rendered in its native colors, subtle hover lift. ======================================================== */ /* iOS Safari silently falls back background-attachment:fixed to scroll, so ensure the hero still looks intentional on mobile. */ @media (max-width: 1024px) { .kc-partners-hero { background-attachment: scroll !important; } } /* Partner tiles, flat equal grid. No grayscale, no opacity tricks, logos render exactly as designed. */ .kc-partner-tile { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .kc-partner-tile:hover { transform: translateY(-3px); border-color: rgba(0, 112, 224, 0.25) !important; box-shadow: 0 14px 28px rgba(0, 31, 63, 0.08) !important; } .kc-partner-tile .kc-partner-logo { width: 100%; display: flex; align-items: center; justify-content: center; } /* Size logos inside the tile. IMPORTANT: Elementor's widget-image.min.css ships this rule: .elementor-widget-image a img[src$=".svg"] { width: 48px } It caps every linked SVG to 48px wide, which is why TRE / ROAM / Ascension / Halls (all linked SVGs) showed up tiny. We out-specify by mirroring the same `a img[src$=".svg"]` shape AND use !important, so our override wins no matter what the cascade does. */ .kc-partner-tile { min-height: 200px !important; } .kc-partner-tile .kc-partner-logo { width: 100%; } .kc-partner-tile .kc-partner-logo img, .kc-partner-tile .kc-partner-logo a img, .kc-partner-tile .kc-partner-logo a img[src$=".svg"], .kc-partner-tile .elementor-widget-container img, .kc-partner-tile .elementor-image img, .kc-partner-tile .elementor-image a img[src$=".svg"] { display: block !important; max-height: 120px !important; max-width: 88% !important; width: auto !important; height: auto !important; margin: 0 auto !important; object-fit: contain !important; } /* Sharon 24/7 is a WhiteWasher (white shapes on transparent); against a white tile it would vanish, so lay down a navy backdrop behind just that logo. */ .kc-partner-tile .kc-partner-logo img[src*="Sharon-24"], .kc-partner-tile .elementor-image img[src*="Sharon-24"] { background: #001F3F; padding: 14px 20px; border-radius: 12px; max-height: 148px !important; box-sizing: border-box; } /* Partner tile with name + blurb underneath the logo */ .kc-partner-tile .kc-partner-logo { min-height: 100px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px !important; } .kc-partner-tile .kc-partner-name { width: 100%; } .kc-partner-tile .kc-partner-blurb { width: 100%; } .kc-partner-tile .kc-partner-blurb p { margin: 0; max-width: 100%; } .kc-partner-tile .kc-partner-blurb a { color: #0070E0; text-decoration: none; border-bottom: 1px dotted rgba(0,112,224,0.4); } .kc-partner-tile .kc-partner-blurb a:hover { border-bottom-color: #0070E0; } /* ======================================================== Careers page polish. Two job-listing cards with a small eyebrow/badge, title, summary, requirements checklist, and an email CTA. ======================================================== */ .kc-careers-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .kc-careers-card:hover { transform: translateY(-3px); border-color: rgba(0, 112, 224, 0.25) !important; box-shadow: 0 22px 48px rgba(0, 31, 63, 0.1) !important; } .kc-careers-card .kc-careers-type p { margin: 0; } .kc-careers-card .kc-careers-summary p { margin: 0; } .kc-careers-card .kc-careers-reqs .elementor-icon-list-items { margin: 0 !important; } .kc-careers-card .kc-careers-reqs .elementor-icon-list-item { align-items: flex-start !important; } .kc-careers-card .kc-careers-reqs .elementor-icon-list-icon { width: 24px; height: 24px; display: inline-flex !important; align-items: center; justify-content: center; background: rgba(0, 112, 224, 0.12); border-radius: 50%; margin-top: 2px; flex: 0 0 24px !important; } .kc-careers-card .kc-careers-reqs .elementor-icon-list-text { color: #1F2937 !important; } /* Button hover lift to match the agile section buttons. */ .kc-careers-card .elementor-button { transition: all .2s ease !important; } .kc-careers-card .kc-agile-btn--primary.elementor-button:hover, .kc-careers-card .kc-agile-btn--primary.elementor-button:focus { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0,112,224,0.35) !important; } /* Info cards sidebar */ .kc-info-card { transition: transform .25s ease; } .kc-info-card:hover { transform: translateY(-2px); } .kc-info-ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(0,112,224,0.12); color: #0070E0; display: inline-flex; align-items: center; justify-content: center; } .kc-info-svg { width: 22px; height: 22px; display: block; } .kc-info-link { color: #0070E0; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0,112,224,0.3); transition: border-color .2s ease; word-break: break-word; } .kc-info-link:hover { border-bottom-color: #0070E0; } /* Service cards grid */ .kc-service-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .kc-service-card:hover { transform: translateY(-3px); border-color: rgba(0,112,224,0.4) !important; box-shadow: 0 16px 36px rgba(0,31,63,0.08); } .kc-service-ico { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #003087 0%, #0070E0 100%); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,112,224,0.28); } .kc-service-svg { width: 26px; height: 26px; display: block; } /* Mobile polish */ @media (max-width: 768px) { .kc-contact-body { flex-direction: column !important; } .kc-contact-body > .elementor-element { width: 100% !important; max-width: 100% !important; } } /* ======================================================== Products page, Tagestry feature card (emerald accent to differentiate it from the KawaConnect blue). ======================================================== */ .kc-prod-card { transition: box-shadow .28s ease, transform .28s ease; position: relative; overflow: hidden; } .kc-prod-card--tagestry::before { content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: linear-gradient(180deg, #0EA371 0%, #047857 100%); } /* Real tagestry logo (SVG) pulled from tagestry site media */ .kc-prod-logo-link { display: inline-block; line-height: 0; text-decoration: none; } /* Inline SVG — viewBox 260x80 drives aspect; explicit height + auto width keeps it proportional and clearly visible. */ svg.kc-prod-logo { display: block; height: 56px; width: auto; max-width: 260px; } @media (max-width: 860px) { svg.kc-prod-logo { height: 48px; } } /* Screenshot frame */ .kc-prod-screenshot-link { display: block; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(14,163,113,0.12), 0 8px 20px rgba(0,31,63,0.10); transition: transform .3s ease, box-shadow .3s ease; line-height: 0; } .kc-prod-screenshot-link:hover { transform: translateY(-3px); box-shadow: 0 32px 80px rgba(14,163,113,0.20), 0 12px 28px rgba(0,31,63,0.14); } .kc-prod-screenshot { display: block; width: 100%; height: auto; max-width: 100%; } /* Feature row (icon + title + blurb) */ .kc-prod-feature { align-items: flex-start; } .kc-prod-feature-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: rgba(14,163,113,0.12); color: #047857; display: inline-flex; align-items: center; justify-content: center; } .kc-prod-feature-ico svg { width: 20px; height: 20px; display: block; } /* Mobile, stack all the card's internal columns */ @media (max-width: 860px) { .kc-prod-card .e-con-inner > .e-con, .kc-prod-card .e-con > .e-con { flex-direction: column !important; } .kc-prod-card .e-con > .elementor-element[style*="width"] { width: 100% !important; max-width: 100% !important; } .kc-prod-screenshot-wrap { margin-top: 8px; } } /* ======================================================== Home page, Featured Services icon grid (.elementor-element-d8cd17b) 10 HTML widgets, each containing a .icon-container with an and a tooltip. The Elementor container is a CSS grid set to 5 columns on desktop and 1 column on mobile (bad, stacks single-file), and each renders at its natural pixel size (~150-200px) making desktop icons oversized. ======================================================== */ /* Responsive grid overrides, give tablet + mobile a usable layout */ .elementor-element-d8cd17b { --e-con-grid-template-rows: auto !important; } @media (max-width: 1024px) and (min-width: 541px) { .elementor-element-d8cd17b { --e-con-grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 540px) { .elementor-element-d8cd17b { --e-con-grid-template-columns: repeat(2, 1fr) !important; } } /* Tighten grid gap so icons aren't spread too far apart */ .elementor-element-d8cd17b { gap: 16px; } /* Cap each icon image so desktop doesn't show them at natural size. Scoped to this container so we don't affect other page images. */ .elementor-element-d8cd17b .icon-container img, .elementor-element-d8cd17b .tooltip img { max-width: 88px !important; width: 100% !important; height: auto !important; } @media (max-width: 1024px) { .elementor-element-d8cd17b .icon-container img, .elementor-element-d8cd17b .tooltip img { max-width: 76px !important; } } @media (max-width: 540px) { .elementor-element-d8cd17b .icon-container img, .elementor-element-d8cd17b .tooltip img { max-width: 64px !important; } } /* Tidy up the icon wrappers that the 10 inline