/* common border radius */ /* disable text selection */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/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.icons { background-color: #F4FAFF; } section.gt-block.icons .container { padding-top: 96px; padding-bottom: 96px; } @media screen and (max-width: 1280px) { section.gt-block.icons .container { padding-top: 80px; padding-bottom: 80px; } } @media screen and (max-width: 768px) { section.gt-block.icons .container { padding-top: 48px; padding-bottom: 48px; } } section.gt-block.icons .icons__icons { display: flex; justify-content: space-around; flex-wrap: wrap; } @media screen and (max-width: 992px) { section.gt-block.icons .icons__icons { justify-content: space-between; } } @media screen and (max-width: 900px) { section.gt-block.icons .icons__icons { flex-direction: column; } } section.gt-block.icons .icons__icon-box { display: flex; align-items: center; } @media screen and (max-width: 900px) { section.gt-block.icons .icons__icon-box { margin-bottom: 16px; } section.gt-block.icons .icons__icon-box:last-child { margin-bottom: 0px; } } section.gt-block.icons .icons__icon-box-icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(270deg, #11C3FD 0%, #0599C9 26.56%, #0599C9 72.92%, #11C3FD 100%); box-shadow: 0px 14.5714px 6px rgba(7, 150, 182, 0.02), 0px 8.57143px 5.14286px rgba(7, 150, 182, 0.08), 0px 3.42857px 3.42857px rgba(7, 150, 182, 0.14), 0px 0.857143px 1.71429px rgba(7, 150, 182, 0.16), 0px 0px 0px rgba(7, 150, 182, 0.16); flex: none; position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1280px) { section.gt-block.icons .icons__icon-box-icon { width: 48px; height: 48px; border-radius: 12px; } } @media screen and (max-width: 768px) { section.gt-block.icons .icons__icon-box-icon { width: 40px; height: 40px; border-radius: 10px; } } section.gt-block.icons .icons__icon-box-icon::before { content: ""; background: linear-gradient(27.99deg, #04E9F0 9.34%, #11C3FD 93.08%); width: 56px; height: 56px; border-radius: 14px; z-index: 0; position: absolute; bottom: 2px; left: -1; } @media screen and (max-width: 1280px) { section.gt-block.icons .icons__icon-box-icon::before { width: 48px; height: 48px; border-radius: 12px; } } @media screen and (max-width: 768px) { section.gt-block.icons .icons__icon-box-icon::before { width: 40px; height: 40px; border-radius: 10px; } } section.gt-block.icons .icons__icon-box-icon img { padding: 8px; filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.24)); margin-top: -2px; } @media screen and (max-width: 1280px) { section.gt-block.icons .icons__icon-box-icon img { padding: 12px; } } @media screen and (max-width: 768px) { section.gt-block.icons .icons__icon-box-icon img { padding: 10px; } } section.gt-block.icons .icons__icon-box-title { line-height: 125%; font-weight: 700; font-size: 24px; } @media screen and (min-width: 1280px) and (max-width: 1760px) { section.gt-block.icons .icons__icon-box-title { font-size: calc(18px + 6 * ((100vw - 1280px) / 480)); } } @media screen and (max-width: 1280px) { section.gt-block.icons .icons__icon-box-title { font-size: 18px; } } @media screen and (max-width: 768px) { section.gt-block.icons .icons__icon-box-title br { display: none; } } @media screen and (max-width: 768px) { } section.gt-block.icons .icons__icon-box-content { margin-left: 24px; } @media screen and (max-width: 1280px) { section.gt-block.icons .icons__icon-box-content { margin-left: 16px; } } @media screen and (max-width: 768px) { section.gt-block.icons .icons__icon-box-content { margin-left: 16px; } }