/* 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.request-sign-up { background: linear-gradient(76.74deg, #F4FAFF -7.86%, #CEE6FF 47.42%, #FFFFFF 118.49%); } section.gt-block.request-sign-up .container { padding-top: 128px; padding-bottom: 128px; display: flex; justify-content: space-between; } @media screen and (max-width: 1280px) { section.gt-block.request-sign-up .container { padding-top: 96px; padding-bottom: 96px; } } @media screen and (max-width: 992px) { section.gt-block.request-sign-up .container { flex-direction: column; } } @media screen and (max-width: 768px) { section.gt-block.request-sign-up .container { padding-top: 48px; padding-bottom: 48px; } } section.gt-block.request-sign-up .request-sign-up__left { width: 41%; } @media screen and (max-width: 992px) { section.gt-block.request-sign-up .request-sign-up__left { width: 100%; } } section.gt-block.request-sign-up .request-sign-up__pretitle { color: #2BC9FD; margin-bottom: 24px; } @media screen and (max-width: 1280px) { section.gt-block.request-sign-up .request-sign-up__pretitle { margin-bottom: 16px; } } @media screen and (max-width: 768px) { section.gt-block.request-sign-up .request-sign-up__pretitle { margin-bottom: 16px; } } section.gt-block.request-sign-up .request-sign-up__heading { margin-bottom: 24px; } section.gt-block.request-sign-up .request-sign-up__text { line-height: 150%; font-size: 24px; color: #3469B3; } section.gt-block.request-sign-up .request-sign-up__text ul { padding-inline-start: 30px; } @media screen and (min-width: 1280px) and (max-width: 1760px) { section.gt-block.request-sign-up .request-sign-up__text { font-size: calc(18px + 6 * ((100vw - 1280px) / 480)); } } @media screen and (max-width: 1280px) { section.gt-block.request-sign-up .request-sign-up__text { font-size: 18px; } section.gt-block.request-sign-up .request-sign-up__text ul { padding-inline-start: 25px; } } section.gt-block.request-sign-up .request-sign-up__rating { margin-top: 48px; display: flex; justify-content: flex-start; flex-wrap: wrap; } @media screen and (max-width: 1280px) { section.gt-block.request-sign-up .request-sign-up__rating { margin-top: 32px; } } @media screen and (max-width: 768px) { section.gt-block.request-sign-up .request-sign-up__rating { margin-top: 24px; } } section.gt-block.request-sign-up .request-sign-up__rating-stars { display: flex; margin-right: 8px; } section.gt-block.request-sign-up .request-sign-up__rating-stars-star { margin-right: 4px; } section.gt-block.request-sign-up .request-sign-up__rating-text { color: #6190D1; font-family: 'Inter', Arial, sans-serif; } section.gt-block.request-sign-up .request-sign-up__services { display: flex; margin-top: 16px; } section.gt-block.request-sign-up .request-sign-up__service:not(:last-child) { margin-right: 24px; } section.gt-block.request-sign-up .request-sign-up__service img { width: 100%; height: auto; } section.gt-block.request-sign-up .request-sign-up__right { width: 49%; display: flex; align-items: center; justify-content: flex-end; } @media screen and (max-width: 992px) { section.gt-block.request-sign-up .request-sign-up__right { width: 100%; margin-top: 48px; } } section.gt-block.request-sign-up .request-sign-up__sign-up { width: 530px; max-width: 100%; background: #FFFFFF; box-shadow: 0px 56px 32px -48px rgba(26, 107, 185, 0.24); border-radius: 24px; padding: 84px 55px; } @media screen and (max-width: 992px) { section.gt-block.request-sign-up .request-sign-up__sign-up { justify-content: flex-start; width: 100%; padding: 48px 32px; } } section.gt-block.request-sign-up .request-sign-up__sign-up-buttons { display: flex; flex-direction: column; } section.gt-block.request-sign-up .request-sign-up__sign-up .btn-component { width: calc(100% + 5px + 5px); } section.gt-block.request-sign-up .request-sign-up__sign-up .btn { width: 100%; display: flex; align-items: center; justify-content: center; padding: 11px 38px!important; } @media screen and (max-width: 1280px) { section.gt-block.request-sign-up .request-sign-up__sign-up .btn { padding: 6px 30px!important; } } section.gt-block.request-sign-up .request-sign-up__sign-up .btn img { margin-right: 10px; } section.gt-block.request-sign-up .request-sign-up__sign-up-divider { display: flex; justify-content: center; align-items: center; margin-top: 16px; margin-bottom: 16px; } section.gt-block.request-sign-up .request-sign-up__sign-up-divider-left { width: calc(50% - 20px); height: 2px; background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #CEE6FF 100%); border-radius: 1px; transform: rotate(-180deg); } section.gt-block.request-sign-up .request-sign-up__sign-up-divider-text { width: 40px; font-weight: 500; font-size: 16px; line-height: 22px; text-align: center; color: #3469B3; } section.gt-block.request-sign-up .request-sign-up__sign-up-divider-right { width: calc(50% - 20px); height: 2px; background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #CEE6FF 100%); border-radius: 1px; }