@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap");
:root {
--color-black: 0, 0, 0;
--color-white: 242, 244, 247;
--color-default: 154, 164, 178;
--color-dark: 30, 30, 30;
--color-dark-2: 13, 18, 28;
--color-purple: 182, 146, 246;
--color-scheme: only light;
}
html {
color: #434343;
font-size: 16px;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
background-color: transparent;
border-top: 1px solid #F3F3F6;
margin: 1em 0;
padding: 0;
opacity: 1;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
a {
color: rgb(var(--color-red));
text-decoration: none;
transition: all 100ms ease-in-out;
}
a:hover,
a:focus {
text-decoration: none;
color: rgb(var(--color-red-2));
} body {
font-family: 'Manrope', Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 400;
color: rgb(var(--color-default));
background-color: #0D121C;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .outfit {
font-family: 'Outfit';
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Outfit';
}
h1 {
font-size: 40px;
line-height: 50px;
}
h2 {
font-size: 60px;
line-height: 70px;
}
h3 {
font-size: 36px;
line-height: 54px;
}
h4 {
font-size: 32px;
line-height: 45px;
}
h5 {
font-size: 24px;
line-height: 32px;
}
.text-xxxs {
font-size: 10px;
line-height: 18px;
}
.text-xxs {
font-size: 12px;
line-height: 20px;
}
.text-xs {
font-size: 14px;
line-height: 23px;
}
.text-md {
font-size: 18px;
line-height: 27px;
}
.text-xxl {
font-size: 20px;
line-height: 20px;
}
.text-3xl {
font-size: 30px;
line-height: 40px;
} .color-black {
color: rgb(var(--color-black));
}
.color-white {
color: rgb(var(--color-white));
}
.color-purple {
color: rgb(var(--color-purple));
}
.color-dark {
color: rgb(var(--color-dark));
}
.color-dark-2 {
color: rgb(var(--color-dark-2));
} .form-control {
padding: 10px 12px;
font-size: 14px;
font-weight: 400;
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid #DCDFEA;
border-radius: 8px;
color: rgb(var(--color-dark-2));
}
.form-select {
padding: 10px 12px;
font-size: 14px;
font-weight: 400;
background-clip: padding-box;
border: 1px solid #DCDFEA;
color: rgb(var(--color-dark));
border-radius: 4px;
}
.form-control:focus,
.form-select:focus {
color: rgb(var(--color-dark));
background-color: transparent;
border-color: rgb(var(--color-dark));
outline: 0;
box-shadow: none;
}
.form-control:disabled {
background-color: #FFFFFF;
border: 1px solid #E9E7EC;
}
.form-label {
color: #667085;
font-size: 10px;
text-transform: uppercase;
font-style: normal;
font-weight: 700;
line-height: 160%;
letter-spacing: 1px;
} .btn {
font-weight: 600;
font-size: 13px;
font-weight: 600;
padding: 12px 24px;
border-radius: 50px;
}
.btn:focus,
.btn:hover {
outline: 0;
box-shadow: none;
}
.btn-primary {
--bs-btn-active-bg: #8A63C8;
--bs-btn-active-border-color: #8A63C8;
--bs-btn-active-shadow: none;
color: #fff;
text-align: center;
font-size: 13px;
line-height: 20px;
background-color: rgb(var(--color-dark-2));
border: 0;
}
.btn-primary:hover,
.btn-primary:focus {
background: rgb(var(--color-purple));
color: rgb(var(--color-white));
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
background-color: #8A63C8;
border-color: #8A63C8;
box-shadow: none;
color: rgb(var(--color-white));
}
.btn-secondary {
--bs-btn-active-bg: rgb(var(--color-purple));
--bs-btn-active-border-color: rgb(var(--color-purple));
--bs-btn-active-shadow: none;
color: rgb(var(--color-dark));
text-align: center;
font-size: 13px;
line-height: 20px;
background-color: rgb(var(--color-white));
border: 0;
}
.btn-secondary:hover,
.btn-secondary:focus {
background: rgb(var(--color-purple));
color: rgb(var(--color-white));
}
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
background-color: rgb(var(--color-purple));
border-color: rgb(var(--color-purple));
box-shadow: none;
color: rgb(var(--color-white));
}
.btn-bordered {
color: rgb(var(--color-white));
text-align: center;
font-size: 13px;
line-height: 20px;
background-color: transparent;
border: 1px solid rgb(var(--color-white));
position: relative;
display: flex;
align-items: center;
}
.btn-bordered::after {
content: "\e902";
font-family: 'icomoon';
font-size: 20px;
}
.btn-bordered:hover,
.btn-bordered:focus {
background: rgb(var(--color-white));
color: rgb(var(--color-dark-2));
} .header {
width: 100%;
position: relative;
z-index: 10;
}
.brand {
display: inline-block;
position: absolute;
z-index: 150;
padding: 15px 0;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.brand img {
max-height: 44px;
transition: all 300ms ease-in-out;
} .hero {
background-size: cover;
width: 100%;
position: relative;
z-index: 1;
}
.hero-inner {
width: 100%;
display: flex;
align-items: center;
}
.hero-inner #row-inner {
margin-top: 120px;
}
.hero::before {
content: '';
background-color: rgb(var(--color-dark-2));
width: 100%;
height: 50px;
left: 0;
bottom: 0;
position: absolute;
}
.logo-hero {
margin-bottom: 42px;
}
.form-box {
background-color: #fff;
border-radius: 20px;
padding: 40px;
display: block;
}
.hero-desc {
margin-bottom: 10vh;
}
.about-section {
padding: 100px 0;
}
.box-about {
border-radius: 20px;
background: #121926;
padding: 150px 40px;
}
.counter-anim {
color: #F2F4F7;
}
.counter-label {
font-size: 16px;
font-weight: 500;
line-height: 140%;
letter-spacing: -0.32px;
}
.box-white {
background: #fff;
border-radius: 20px;
color-scheme: only light;
}
.choose-section {
padding: 50px 0 100px;
}
.box-choose {
border-radius: 20px;
background: #121926;
padding: 40px;
height: 100%;
}
.journey-section {
padding: 100px 0;
}
.thank-you-body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.thank-you-page {
background:
radial-gradient(circle at 50% 50%, rgba(182, 146, 246, 0.20) 0%, rgba(182, 146, 246, 0) 34%),
#0D121C;
display: flex;
align-items: center;
flex: 1;
min-height: 100vh;
padding: 120px 0;
position: relative;
overflow: hidden;
}
.thank-you-page > .container {
width: 100%;
}
.thank-you-page::before,
.thank-you-page::after {
content: '';
position: absolute;
width: 360px;
height: 360px;
border: 1px solid rgba(182, 146, 246, 0.15);
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.thank-you-page::after {
width: 520px;
height: 520px;
}
.thank-you-content {
max-width: 730px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.thank-you-icon {
width: 48px;
height: 48px;
margin: 0 auto 24px;
display: flex;
}
.thank-you-eyebrow {
color: rgb(var(--color-purple));
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
line-height: 160%;
margin-bottom: 12px;
text-transform: uppercase;
}
.thank-you-content h1 {
margin-bottom: 20px;
}
.thank-you-copy {
max-width: 620px;
margin: 0 auto 32px;
}
.footer {
background: #121926;
}
.footer-top {
padding: 80px 0;
}
.footer-bottom {
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 160%;
text-align: center;
padding: 24px 0;
border-top: 1px solid rgba(242, 244, 247, 0.10);
}
.logo-footer {
display: flex;
justify-content: center;
align-items: center;
}
.logo-footer img {
height: 44px;
}
.social {
list-style: none;
display: flex;
gap: 5px;
padding-left: 0;
margin: 0;
}
.social a {
display: flex;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: transparent;
border: 1px solid #9AA4B2;
font-size: 18px;
}
.social a:hover {
color: rgb(var(--color-dark-2));
background-color: #fff;
border: 1px solid #fff;
} .marquee .swiper-wrapper {
transition-timing-function: linear !important;
}
.marquee .img-client {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.marquee .swiper-slide {
width: auto;
overflow: hidden;
}
.choose-slider .swiper-slide {
width: 58.33333333%;
height: auto;
}
.choose-slider::after {
content: '';
width: 135px;
height: 100%;
right: -1px;
top: 0;
background: linear-gradient(90deg, rgba(13, 18, 28, 0.00) 0%, #0D121C 100%);
position: absolute;
z-index: 1;
}
.choose-slider::before {
content: '';
width: 71px;
height: 100%;
left: -1px;
top: 0;
background: linear-gradient(90deg, #0D121C 0%, rgba(13, 18, 28, 0.00) 100%);
position: absolute;
z-index: 2;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: .65;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: -80px;
right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: -80px;
left: auto;
}
.swiper-button-next,
.swiper-button-prev {
position: absolute;
top: 50%;
width: 48px;
height: 48px;
margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: rgb(var(--color-dark-2));
background-color: rgb(var(--color-white));
border-radius: 50%;
}
.swiper-button-next::after {
content: "\e901";
font-family: 'icomoon';
font-size: 25px;
}
.swiper-button-prev::after {
content: "\e900";
font-family: 'icomoon';
font-size: 25px;
} .hidden,
[hidden] {
display: none !important;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right;
}
.text-italic {
font-style: italic;
}
.text-hidden {
text-overflow: ellipsis;
white-space: nowrap;
}
.text-extraBold {
font-weight: 800;
}
.text-bold {
font-weight: 700;
}
.text-semiBold {
font-weight: 600;
}
.text-medium {
font-weight: 500;
}
.text-normal {
font-weight: 400;
}
.text-light {
font-weight: 300;
}
.text-ultra-bold {
font-weight: 900;
}
.h-100vh {
height: 100vh;
}
.mh-0 {
min-height: 0;
}
.line-height {
line-height: 0;
}
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px; }
.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}  @media (prefers-color-scheme: dark) {
:root {
color-scheme: light;
}
} @media (forced-colors: active) {
:root {
color-scheme: light;
}
}
@media (min-width: 576px) {
.container,
.container-sm {
max-width: 600px;
}
}
@media (min-width: 768px) {
.container,
.container-md,
.container-sm {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container,
.container-lg,
.container-md,
.container-sm {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1200px;
}
.hide-desktop {
display: none;
}
}
@media (min-width: 1025px) and (max-width: 1280px) {
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: -20px;
right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: -20px;
left: auto;
}
}
@media (min-width: 1025px) {}
@media (max-width: 1024px) {
h1 {
font-size: 35px;
line-height: 40px;
}
.counter-label {
font-size: 14px;
}
}
@media (max-width: 991px) {
.logo-hero {
text-align: center;
}
.hero-desc {
margin-bottom: 60px;
}
.hero::before {
height: 30vh;
}
.box-about {
padding: 50px 30px;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: -30px;
right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: -30px;
left: auto;
}
}
@media (max-width: 767px) {
.container,
.container-md,
.container-sm {
padding-left: 18px;
padding-right: 18px;
}
.box-about {
border-radius: 20px;
background: #121926;
padding: 50px 30px;
}
.form-box {
padding: 30px;
}
.thank-you-page {
min-height: 100vh;
padding: 96px 0;
}
.thank-you-icon {
width: 48px;
height: 48px;
margin-bottom: 20px;
}
h1 {
font-size: 30px;
line-height: 34px;
}
h3 {
font-size: 27px;
line-height: 34px;
}
.choose-slider .swiper-slide {
width: 100%;
height: auto;
}
.form-label {
font-size: 9px;
}
.choose-slider::after,
.choose-slider::before {
display: none;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: -10px;
right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: -10px;
left: auto;
}
.choose-nav {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 85px;
height: 50px;
position: relative;
}
}
@media (min-width: 992px) {}
@media (max-width: 1180px) and (orientation: landscape) {
h1 {
font-size: 35px;
line-height: 40px;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: -30px;
right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: -30px;
left: auto;
}
}
@media (max-width: 992px) and (orientation: landscape) {} @media print {
*,
*::before,
*::after {
background: #fff !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}