*{ margin: 0; padding: 0; border: 0; box-sizing: border-box; } .dx-carousel-slide { width: 100%; } .dx-carousel-slide > *{ transform-origin: center; transform: scale(1); transition: transform 300ms ease; width: 100%; } .dx-grid { display: flex; flex-shrink: 0  !important; flex-grow: 0  !important; position: relative; } .dx-grid-container { display: flex; flex-direction: row; flex-wrap: wrap; } .dx-grid-container.dx-grid-container-gap { gap: calc(var(--spacing-3) * 1rem); } .dx-grid-container.dx-grid-container-nogap { gap: 0px; } .dx-grid-container.dx-grid-container-fullwidth { width: 100%; margin-left: auto; margin-right: auto; } .dx-grid-container.dx-grid-container-fulldesktop { max-width: var(--breakpoint-full-desktop); margin-left: auto; margin-right: auto; } .dx-typo { font-size: calc(var(--fs, var(--body-m)) * 1rem); line-height: calc(var(--lh, var(--body-m-line)) * 1rem); letter-spacing: calc(var(--ls, var(--body-m-spacing)) * 1rem); font-family: var(--ff, var(--typo-primary)); margin-bottom: var(--mb, 0); color: var(--color, inherit); } @media (min-width: 768px) { .dx-typo { font-size: calc(var(--md-fs, var(--fs)) * 1rem); line-height: calc(var(--md-lh, var(--lh)) * 1rem); letter-spacing: calc(var(--md-ls, var(--ls)) * 1rem); margin-bottom: calc(var(--md-mb, var(--mb)) * 1rem); } } @media (min-width: 1280px) { .dx-typo { font-size: calc(var(--lg-fs, var(--md-fs, var(--fs))) * 1rem); line-height: calc(var(--lg-lh, var(--md-lh, var(--lh))) * 1rem); letter-spacing: calc(var(--lg-ls, var(--md-ls, var(--ls))) * 1rem); margin-bottom: calc(var(--lg-mb, var(--md-mb, var(--mb))) * 1rem); } } @media (min-width: 1920px) { .dx-typo { font-size: calc(var(--xl-fs, var(--lg-fs, var(--fs))) * 1rem); line-height: calc(var(--xl-lh, var(--lg-lh, var(--lh))) * 1rem); letter-spacing: calc(var(--xl-ls, var(--lg-ls, var(--ls))) * 1rem); margin-bottom: calc(var(--xl-mb, var(--lg-mb, var(--mb))) * 1rem); } } .dx-typo-bold { font-weight: var(--bold); } .dx-typo-secondary { font-family: var(--typo-secondary); } .dx-grid-row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; position: relative; } .dx-grid-row li { margin-left: 0  !important; } .dx-grid-row.dx-grid-row-nogap { gap: 0px; } .dx-grid-row.dx-grid-row-gap { gap: calc(var(--spacing-3) * 1rem); } .dx-grid-row.dx-grid-row-margins { padding-left: calc(var(--mobile-grid-margins) * 1rem); padding-right: calc(var(--mobile-grid-margins) * 1rem); } @media screen and (min-width: 768px) { .dx-grid-row.dx-grid-row-margins { padding-left: calc(var(--tablet-grid-margins) * 1rem); padding-right: calc(var(--tablet-grid-margins) * 1rem); } } @media screen and (min-width: 1280px) { .dx-grid-row.dx-grid-row-margins { padding-left: clamp(var(--small-desktop-grid-margins) * 1rem, (100% - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem); padding-right: clamp(var(--small-desktop-grid-margins) * 1rem, (100% - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem); } } @media screen and (min-width: 1920px) { .dx-grid-row.dx-grid-row-margins { padding-left: calc((100% - 1920px) / 2 + var(--full-desktop-grid-margins) * 1rem); padding-right: calc((100% - 1920px) / 2 + var(--full-desktop-grid-margins) * 1rem); } } [class^=dx-cta-text-dark] .dx-cta-text-content::before { background-color: #a4a2a2; } .dx-cta-invisible { padding: 0; } .dx-cta-boldtext { font-weight: bold; } .dx-cta-clickable-parent::before { content: ""; position: absolute; inset: 0; z-index: 1; } .dx-cta-invisible { opacity: 0  !important; height: 0  !important; min-height: 0  !important; margin: 0  !important; border: 0  !important; } .dx-cta-fullwidth { width: 100%  !important; } .dx-cta-button-sm { box-sizing: border-box; align-items: center; border-radius: var(--btn-br); font-family: var(--typo-secondary); line-height: 1; display: flex; cursor: pointer; flex-grow: 0; flex-shrink: 0; gap: calc(1rem * var(--spacing-1)); justify-content: center; font-size: calc(1rem * var(--body-m)); letter-spacing: calc(1rem * var(--body-m-spacing)); padding: 14px 24px; text-align: center; text-decoration: none; transition: all ease-out var(--main-transition-duration), color ease-out var(--main-transition-duration); white-space: nowrap; width: fit-content; z-index: 2; } .dx-cta-button-sm:has(.dx-cta-icon) { padding: 10px 24px; } .dx-cta-button-sm .dx-cta-text-content::before { display: none; } .dx-cta-primary-sm { background-color: var(--neutral-dark-01); border: 2px solid transparent; color: var(--pure-light); } .dx-cta-primary-sm:hover, .dx-cta-primary-sm:focus { color: var(--pure-light); background-color: var(--neutral-dark-04); } .dx-cta-secondary-sm { background-color: transparent; border: 2px solid var(--neutral-med-03); color: var(--neutral-med-01); } .dx-cta-secondary-sm:hover, .dx-cta-secondary-sm:focus { background-color: var(--neutral-light-01); color: var(--neutral-med-01); } .dx-grid-item-test{ width: 100%; height: 100%; background-color: palegreen; } h1, h2, h3, h4, h5, h6{ font-family: 'Montserrat', sans-serif; } p{ font-family: 'Noto sans', sans-serif; } .dx-blade-image img{ border-radius: 12px; width: 100%; height: 323px; object-fit: cover; } .dx-desktop-only{ display: none; } .dx-blade-content{ display: flex; flex-direction: column; height: fit-content; } .dx-blade .dx-grid:has(.dx-blade-content){ height: fit-content; } .dx-blade{ gap: 24px; } .dx-eyebrow{ font-weight: bold; margin: 8px 0; } .dx-blade-cta-container{ margin-top: 24px; display: flex; gap: 16px; } .dx-blade-content h2{ font-size: 32px; } .dx-blade-content h2:has(+p){ margin-bottom: 16px; } .dx-blade-logo{ height: 80px; width: fit-content; } .dx-blade-logo:has(+ *){ margin-bottom: 16px; } @media screen and (min-width: 1280px) { .dx-desktop-only{ display: flex; } .dx-blade-logo:has(+ *){ margin-bottom: 24px; } .dx-blade:nth-of-type(even){ flex-direction: row-reverse; } .dx-blade{ padding: 0; gap: 0; } .dx-eyebrow{ font-weight: bold; margin-top: 0; } .dx-blade-image img{ border-radius: 12px; width: 100%; height: 100%; object-fit: cover; } .dx-blade .dx-grid:has(.dx-blade-content){ height: 100%; } .dx-blade-large{ min-height: 624px; } .dx-blade-medium{ min-height: 464px; } .dx-blade-short{ min-height: 396px; } .dx-blade-content{ display: flex; flex-direction: column; place-content: center; height: 100%; } } .dx-carousel { --control-arrows-background-color: var(--neutral-dark-02); --control-arrows-fill-color: var(--neutral-light-01); --controls-background-color: var(--neutral-light-01); --controls-fill-color: var(--neutral-dark-01); --controls-hover-color: var(--neutral-pale-02); } .dx-carousel-dark-mode { --controls-background-color: var(--neutral-dark-01); --controls-fill-color: var(--neutral-light-01); --controls-hover-color: var(--neutral-dark-04); } .dx-grid-row.dx-carousel { --button-size: 2.5rem; --button-padding: calc(var(--spacing-3) * 1rem); width: 100%; margin-left: 0; margin-right: 0; max-width: 100%; display: flex; justify-content: center; } .dx-grid-row.dx-carousel.dx-carousel-controls-left { justify-content: flex-start; } .dx-grid-row.dx-carousel.dx-carousel-controls-right { justify-content: flex-end; } @media screen and (min-width: 1280px) { .dx-carousel { margin-left: auto; margin-right: auto; max-width: 1920px; } .dx-carousel.dx-carousel-arrows-sides-desktop:has(.dx-carousel-button) { margin-left: auto; margin-right: auto; max-width: clamp(1280px - var(--button-size) * 2 - var(--spacing-3) * 1rem * 2, 100% - var(--button-size) * 2 - var(--spacing-3) * 1rem * 2, 1920px - var(--button-size) * 2 - var(--spacing-3) * 1rem * 2); } } .dx-carousel-viewport { overflow: hidden; } .dx-carousel-container { display: flex; touch-action: pan-y pinch-zoom; flex-grow: 1; margin-left: -16px; } .dx-carousel-container .dx-grid.dx-carousel-slide { will-change: transform; min-width: 0; overflow: visible; padding-left: var(--slide-spacing); } .dx-carousel-button { -webkit-appearance: none; appearance: none; background-color: rgba(0, 0, 0, 0); touch-action: manipulation; text-decoration: none; cursor: pointer; border: 0; padding: 0; margin: 0; background-color: var(--control-arrows-background-color); width: var(--button-size); height: var(--button-size); z-index: 100; border-radius: 50%; color: var(--control-arrows-fill-color); display: flex; align-items: center; justify-content: center; } @media (min-width: 1280px) { .dx-carousel-arrows-sides-desktop:has(.dx-carousel-dots) .dx-carousel-button { display: unset; position: absolute; top: calc(50% - 40px + 16px); transform: translateY(-50%); } .dx-carousel-arrows-sides-desktop .dx-carousel-button { display: unset; position: absolute; top: 50%; transform: translateY(-50%); } .dx-carousel-arrows-sides-desktop .dx-carousel-button--next { right: calc((var(--spacing-3) * 1rem + var(--button-size)) * -1); } .dx-carousel-arrows-sides-desktop .dx-carousel-button--prev { left: calc((var(--spacing-3) * 1rem + var(--button-size)) * -1); } .dx-grid-row-margins.dx-carousel-arrows-sides-desktop .dx-carousel-button--next { right: calc((var(--spacing-3) * 1rem + var(--button-size) - clamp(var(--small-desktop-grid-margins) * 1rem, (100vw - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem)) * -1); } .dx-grid-row-margins.dx-carousel-arrows-sides-desktop .dx-carousel-button--prev { left: calc((var(--spacing-3) * 1rem + var(--button-size) - clamp(var(--small-desktop-grid-margins) * 1rem, (100vw - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem)) * -1); } } @media (min-width: 1920px) { .dx-grid-row-margins .dx-carousel-desktop-arrow.dx-carousel-button--next { right: calc((var(--spacing-3) * 1rem + var(--button-size) - var(--full-desktop-grid-margins) * 1rem) * -1); } .dx-grid-row-margins .dx-carousel-desktop-arrow.dx-carousel-button--prev { left: calc((var(--spacing-3) * 1rem + var(--button-size) - var(--full-desktop-grid-margins) * 1rem) * -1); } } .dx-carousel-button:hover { background-color: var(--controls-hover-color); } .dx-carousel-button__svg { width: 35%; height: 35%; } .dx-carousel-button:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; } .dx-carousel-dots { display: flex; flex-wrap: wrap; align-items: center; width: max-content; height: 2.5rem; justify-self: center; background-color: var(--controls-background-color); border-radius: 25px; padding: 0px calc(var(--spacing-3) * 1rem); gap: 8px; backdrop-filter: blur(30px); } .dx-carousel-dot { -webkit-appearance: none; appearance: none; background-color: rgba(0, 0, 0, 0); touch-action: manipulation; display: inline-flex; text-decoration: none; cursor: pointer; border: 0; padding: 0; margin: 0; width: 8px; height: 8px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .dx-carousel-dot:after { box-shadow: inset 0 0 0 1px var(--controls-fill-color); width: 8px; height: 8px; border-radius: 50%; display: flex; align-items: center; content: ""; } .dx-carousel-dot--selected:after { box-shadow: inset 0 0 0 8px var(--controls-fill-color); } .promo { display: flex; align-items: center; justify-content: center; padding: 40px; margin: auto; gap: 40px; width: 100%; background-color: #FFF; border-radius: 24px; } .promo-image { position: relative; flex: 1; width: 100%; height: 524px; border-radius: 20px; overflow: hidden; } .promo-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .promo-content { align-items: flex-start; display: flex; flex-direction: column; gap: 24px; max-width: 500px; flex: 1; } .promo-logo { height: 60px; } .promo-content h2 { font-size: 28px; font-weight: bold; line-height: 1.3; } .promo-content p { font-size: 16px; line-height: 1.5; color: #333; } .promo-btn { display: inline-block; background-color: #000; color: #fff; padding: 12px 24px; text-decoration: none; border-radius: 25px; transition: background .3s ease; } .promo-btn:hover { background-color: #333; } @media (max-width: 1280px) { .promo { padding: 24px; gap: 32px; } .promo-image { height: 440px; } .promo-logo { height: 40px; } } .software-by-brand-section { padding: 48px 0; background: transparent linear-gradient(180deg, #ebedf5 0%, #f2e1ed 100%) 0% 0% no-repeat padding-box; } .dx-section-title { margin-bottom: 18px; font-size: 32px; text-align: center; display: block; width: 100%; } @media (max-width: 768px) { .promo { flex-direction: column; padding: 16px; gap: 24px; } .promo-image { flex: auto; height: 296px; } .promo-content { gap: 16px; max-width: 100%; } .dx-section-title { text-align: left; } }