.cimspa-cs { position: relative; --cimspa-cs-edge-padding: 0px; --cimspa-cs-container-width: 1280px; } /* Real page-level fix: overflow-x on THIS element (or any of its descendants) can only clip content that overflows inside its own box — it can't stop the box itself from being wider than the viewport and pushing into horizontal scroll. The only place that actually prevents page-level horizontal scroll is the true root scrolling container itself. Scoped here (not injected sitewide) so it only takes effect on pages that actually load this widget's CSS. */ html { overflow-x: hidden; } /* Breaks the widget out of its Elementor column/section so the row can span the full viewport width, giving cards room to scroll into on the right. The --cimspa-cs-scrollbar-width subtraction corrects for 100vw including the scrollbar's own width on Windows browsers (Chrome/Edge/Firefox) — without it, the row is a few px too wide. The html{overflow-x:hidden} rule above is the hard guarantee; this correction just keeps the alignment math (centering offset) accurate rather than off by a few px. */ .cimspa-cs--bleed { width: calc(100vw - var(--cimspa-cs-scrollbar-width, 0px)); max-width: calc(100vw - var(--cimspa-cs-scrollbar-width, 0px)); margin-left: calc(50% - 50vw + (var(--cimspa-cs-scrollbar-width, 0px) / 2)); margin-right: calc(50% - 50vw + (var(--cimspa-cs-scrollbar-width, 0px) / 2)); } /* When the row is full width (either via the CSS fallback above or the parent Elementor Section's own Stretch Section setting) and alignment is on, the left inset grows with the viewport so the first card lines up with the page's normal content column instead of the browser edge. */ [data-align='yes'] .cimspa-cs__viewport, [data-align='yes'] .cimspa-cs__cta-wrap, [data-align='yes'] .cimspa-cs__controls { padding-left: max( var(--cimspa-cs-edge-padding), calc((100% - var(--cimspa-cs-container-width)) / 2 + var(--cimspa-cs-edge-padding)) ); } .cimspa-cs__controls { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 16px; padding-left: var(--cimspa-cs-edge-padding); padding-right: var(--cimspa-cs-edge-padding); } .cimspa-cs__arrow { cursor: pointer; font-family: inherit; border-radius: 50%; border: 1.5px solid #c9d4e6; background: #fff; display: flex; align-items: center; justify-content: center; padding: 0; transition: border-color 0.15s, opacity 0.15s; } .cimspa-cs__arrow:disabled { opacity: 0.35; cursor: default; } .cimspa-cs__arrow svg { pointer-events: none; } .cimspa-cs__viewport { display: flex; gap: 20px; overflow-x: auto; /* Generous vertical padding is required here: a horizontally-scrolling box can't have overflow-x clip while overflow-y stays fully visible — browsers force both axes to clip together. Without enough room, the hover lift (transform) and hover box-shadow get cut off in a hard rectangular line instead of fading out. */ padding-top: 24px; padding-bottom: 64px; padding-left: var(--cimspa-cs-edge-padding); padding-right: var(--cimspa-cs-edge-padding); scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; } .cimspa-cs__viewport::-webkit-scrollbar { display: none; } .cimspa-cs__viewport[data-dragging='true'] { cursor: grabbing; scroll-snap-type: none; user-select: none; } .cimspa-cs__card { position: relative; flex: 0 0 312px; width: 312px; height: 430px; border-radius: 24px; overflow: hidden; scroll-snap-align: start; display: block; text-decoration: none; box-shadow: 0 1px 3px rgba(18, 50, 110, 0.08); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Only cards that actually link (rendered as ) get the hand cursor — the non-clickable fallback renders as a
and is unaffected. */ a.cimspa-cs__card { cursor: pointer; } .cimspa-cs__card:hover { box-shadow: 0 24px 52px rgba(18, 50, 110, 0.22); } .cimspa-cs__card-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; background-color: #dce4f0; } .cimspa-cs__card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 50, 110, 0.1) 0%, rgba(10, 22, 48, 0.08) 36%, rgba(7, 16, 38, 0.9) 100%); } .cimspa-cs__card-badge { position: absolute; top: 14px; left: 14px; width: 92px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.38)); } .cimspa-cs__card-badge img { display: block; width: 100%; height: auto; } .cimspa-cs__card-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 22px; } .cimspa-cs__card-pill { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 5px 12px; display: inline-block; margin-bottom: 12px; } .cimspa-cs__card-title { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.12; margin-bottom: 8px; } .cimspa-cs__card-line2 { font-size: 13px; font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, 0.85); } .cimspa-cs__cta-wrap { padding-top: 22px; padding-left: var(--cimspa-cs-edge-padding); padding-right: var(--cimspa-cs-edge-padding); } .cimspa-cs__cta { cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 28px; border-radius: 999px; border: 1.5px solid #00afd7; background: #00afd7; color: #053a49; font-weight: 700; font-size: 15px; text-decoration: none; transition: all 0.15s; } .cimspa-cs__cta:hover { background: #0090b4; border-color: #0090b4; color: #fff; } .cimspa-cs__empty { padding: 24px 40px; color: #7b8aa3; font-size: 14px; font-style: italic; }