@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');

:root {
    /* color styles */
    --bgmain: #FFFFFF;
    --bgc1: #F8FAFC;
    --bgc2: #F1F5F9;
    --bgc3: #E7ECF1;
    --bgc4: #E2EBF3;
    --bgc5: #DDEAF7;
    --bgc6: #B7CCE1;
    --bgc7: #23292E;
    --bgc8: #2E353D;
    --bgc9: #353E49;
    --bgc9_20: rgb(53, 62, 73, 0.2);
    --bgc10: #48596C;
    --linear: linear-gradient(180deg, #85BDFA -16.65%, #1282F9 100%);

    --blue: #438CDB;
    --bluelight: #E0ECF9;
    --bluedark: #2164AB;

    --primary: #343848;
    --secondary: #5E6972;
    --tertiary: #7F8E9A;
    --whitestatic: #fff;
    --blackstatic: #23292E;

    --negative: rgba(243,87,87,1);
    --negative30: rgba(243,87,87,0.3);
    --negative20: rgba(243,87,87,0.2);
    --negative10: rgba(243,87,87,0.1);

    --positive: rgba(97,178,33,1);
    --positive20: rgba(97,178,33,0.2);
    --positive10: rgba(97,178,33,0.1);
    /* color styles */

    /* text styles */
    --h1: 64px;
    --h1line: 96px;
    --h2: 40px;
    --h2line: 64px;
    --h3: 32px;
    --h3line: 48px;
    --h4: 20px;
    --h4line: 32px;

    --b1: 24px;
    --b1line: 40px;
    --b2: 20px;
    --b2line: 32px;
    --b3: 16px;
    --b3line: 24px;
    --b4: 14px;
    --b4line: 20px;
    

    --weiR: 400;
    --weiM: 500;
    --weiS: 600;
    --weiB: 700;
    /* text styles */

    /* space styles */
    --space_xxsmall: 2px;
    --space_xsmall: 4px;
    --space_small: 8px;
    --space_regular: 12px;
    --space_medium: 16px;
    --space_large: 24px;
    --space_xlarge: 32px;
    --space_xxlarge: 40px;
    --space_xxxlarge: 48px;
    --space_xxx_large: 52px;
    --space_xxxxlarge: 56px;
    --space_xxxxxlarge: 64px;

    --spaceBig_xxxsmall: 72px;
    --spaceBig_xxsmall: 80px;
    --spaceBig_xsmall: 96px;
    --spaceBig_small: 120px;
    --spaceBig_regular: 144px;
    --spaceBig_medium: 160px;
    --spaceBig_large: 200px;
    --spaceBig_xlarge: 240px;
    --spaceBig_xxlarge: 280px;
    --spaceBig_xxxlarge: 320px;
    --spaceBig_xxxxlarge: 480px;
    /* space styles */

    /* effect styles */
    --shadow100: 0px 0px 4px 0px rgba(207, 224, 242, 0.25);
    --shadownav: 0px 4px 4px 0px rgba(229, 232, 235, 0.25);
    /* effect styles */
}

body {
    margin: 0;
    padding: 0;
    color: var(--primary);
    font-size: var(--b1);
    line-height: var(--b1line);
    background-color: var(--bgmain);
    font-family: "Inter", sans-serif;
}

.h1 {
    font-size: var(--h1);
    line-height: var(--h1line);
    font-weight: var(--weiR);
}

.h1m {
    font-size: var(--h1);
    line-height: var(--h1line);
    font-weight: var(--weiM);
}

.h1s {
    font-size: var(--h1);
    line-height: var(--h1line);
    font-weight: var(--weiS);
}

.h1b {
    font-size: var(--h1);
    line-height: var(--h1line);
    font-weight: var(--weiB);
}

.h2 {
    font-size: var(--h2);
    line-height: var(--h2line);
    font-weight: var(--weiR);
}

.h2m {
    font-size: var(--h2);
    line-height: var(--h2line);
    font-weight: var(--weiM);
}

.h2s {
    font-size: var(--h2);
    line-height: var(--h2line);
    font-weight: var(--weiS);
}

.h2b {
    font-size: var(--h2);
    line-height: var(--h2line);
    font-weight: var(--weiB);
}

.h3 {
    font-size: var(--h3);
    line-height: var(--h3line);
    font-weight: var(--weiR);
}

.h3m {
    font-size: var(--h3);
    line-height: var(--h3line);
    font-weight: var(--weiM);
}

.h3s {
    font-size: var(--h3);
    line-height: var(--h3line);
    font-weight: var(--weiS);
}

.h3b {
    font-size: var(--h3);
    line-height: var(--h3line);
    font-weight: var(--weiB);
}

.h4 {
    font-size: var(--h4);
    line-height: var(--h4line);
    font-weight: var(--weiR);
}

.h4m {
    font-size: var(--h4);
    line-height: var(--h4line);
    font-weight: var(--weiM);
}

.h4s {
    font-size: var(--h4);
    line-height: var(--h4line);
    font-weight: var(--weiS);
}

.h4b {
    font-size: var(--h4);
    line-height: var(--h4line);
    font-weight: var(--weiB);
}




.b1 {
    font-size: var(--b1);
    line-height: var(--b1line);
    font-weight: var(--weiR);
}

.b1m {
    font-size: var(--b1);
    line-height: var(--b1line);
    font-weight: var(--weiM);
}

.b1s {
    font-size: var(--b1);
    line-height: var(--b1line);
    font-weight: var(--weiS);
}

.b1b {
    font-size: var(--b1);
    line-height: var(--b1line);
    font-weight: var(--weiB);
}



.b2 {
    font-size: var(--b2);
    line-height: var(--b2line);
    font-weight: var(--weiR);
}

.b2m {
    font-size: var(--b2);
    line-height: var(--b2line);
    font-weight: var(--weiM);
}

.b2s {
    font-size: var(--b2);
    line-height: var(--b2line);
    font-weight: var(--weiS);
}

.b2b {
    font-size: var(--b2);
    line-height: var(--b2line);
    font-weight: var(--weiB);
}



.b3 {
    font-size: var(--b3);
    line-height: var(--b3line);
    font-weight: var(--weiR);
}

.b3m {
    font-size: var(--b3);
    line-height: var(--b3line);
    font-weight: var(--weiM);
}

.b3s {
    font-size: var(--b3);
    line-height: var(--b3line);
    font-weight: var(--weiS);
}

.b3b {
    font-size: var(--b3);
    line-height: var(--b3line);
    font-weight: var(--weiB);
}



.b4 {
    font-size: var(--b4);
    line-height: var(--b4line);
    font-weight: var(--weiR);
}

.b4m {
    font-size: var(--b4);
    line-height: var(--b4line);
    font-weight: var(--weiM);
}

.b4s {
    font-size: var(--b4);
    line-height: var(--b4line);
    font-weight: var(--weiS);
}

.b4b {
    font-size: var(--b4);
    line-height: var(--b4line);
    font-weight: var(--weiB);
}

.italic {
    font-style: italic;
}



.bluebg {
    background-color: var(--blue) !important;
}
.bluecol {
    color: var(--blue) !important;
}
.bluebor {
    border-color: var(--blue) !important;
}



.bluelightbg {
    background-color: var(--bluelight) !important;
}
.bluelightcol {
    color: var(--bluelight) !important;
}
.bluelightbor {
    border-color: var(--bluelight) !important;
}



.bluedarkbg {
    background-color: var(--bluedark) !important;
}
.bluedarkcol {
    color: var(--bluedark) !important;
}
.bluedarkbor {
    border-color: var(--bluedark) !important;
}


.bgmainbg {
    background-color: var(--bgmain) !important;
}
.bgmaincol {
    color: var(--bgmain) !important;
}
.bgmainbor {
    border-color: var(--bgmain) !important;
}



.bg1bg {
    background-color: var(--bgc1) !important;
}
.bg1col {
    color: var(--bgc1) !important;
}
.bg1bor {
    border-color: var(--bgc1) !important;
}



.bg2bg {
    background-color: var(--bgc2) !important;
}
.bg2col {
    color: var(--bgc2) !important;
}
.bg2bor {
    border-color: var(--bgc2) !important;
}



.bg3bg {
    background-color: var(--bgc3) !important;
}
.bg3col {
    color: var(--bgc3) !important;
}
.bg3bor {
    border-color: var(--bgc3) !important;
}



.bg4bg {
    background-color: var(--bgc4) !important;
}
.bg4col {
    color: var(--bgc4) !important;
}
.bg4bor {
    border-color: var(--bgc4) !important;
}



.bg5bg {
    background-color: var(--bgc5) !important;
}
.bg5col {
    color: var(--bgc5) !important;
}
.bg5bor {
    border-color: var(--bgc5) !important;
}



.bg6bg {
    background-color: var(--bgc6) !important;
}
.bg6col {
    color: var(--bgc6) !important;
}
.bg6bor {
    border-color: var(--bgc6) !important;
}


.bg7bg {    
    background-color: var(--bgc7) !important;
}
.bg7col {
    color: var(--bgc7) !important;
}
.bg7bor {
    border-color: var(--bgc7) !important;
}

.bg8bg {    
    background-color: var(--bgc8) !important;
}
.bg8col {
    color: var(--bgc8) !important;
}
.bg8bor {
    border-color: var(--bgc8) !important;
}

.bg9bg {    
    background-color: var(--bgc9) !important;
}
.bg9col {
    color: var(--bgc9) !important;
}
.bg9bor {
    border-color: var(--bgc9) !important;
}

.bg9_20bg {    
    background-color: var(--bgc9_20) !important;
}
.bg9_20bgcol {
    color: var(--bgc9_20) !important;
}
.bg9_20bgbor {
    border-color: var(--bgc9_20) !important;
}

.bg10bg {    
    background-color: var(--bgc10) !important;
}
.bg10col {
    color: var(--bgc10) !important;
}
.bg10bor {
    border-color: var(--bgc10) !important;
}


.linearbg {
    background: var(--linear) !important;
}
.linearcol {
    color: var(--linear) !important;
}
.linearbor {
    border-color: var(--linear) !important;
}





.primarybg {
    background-color: var(--primary) !important;
}
.primarycol {
    color: var(--primary) !important;
}
.primarybor {
    border-color: var(--primary) !important;
}



.secondarybg {
    background-color: var(--secondary) !important;
}
.secondarycol {
    color: var(--secondary) !important;
}
.secondarybor {
    border-color: var(--secondary) !important;
}

.tertiarybg {
    background-color: var(--tertiary) !important;
}
.tertiarycol {
    color: var(--tertiary) !important;
}
.tertiarybor {
    border-color: var(--tertiary) !important;
}



.whitestaticbg {
    background-color: var(--whitestatic) !important;
}
.whitestaticcol {
    color: var(--whitestatic) !important;
}
.whitestaticbor {
    border-color: var(--whitestatic) !important;
}



.blackstaticbg {
    background-color: var(--blackstatic) !important;
}
.blackstaticcol {
    color: var(--blackstatic) !important;
}
.blackstaticbor {
    border-color: var(--blackstatic) !important;
}



.positivebg {
    background-color: var(--positive) !important;
}
.positivecol {
    color: var(--positive) !important;
}
.positivebor {
    border-color: var(--positive) !important;
}


.positive20bg {
    background-color: var(--positive20) !important;
}
.positive20col {
    color: var(--positive20) !important;
}
.positive20bor {
    border-color: var(--positive20) !important;
}


.positive10bg {
    background-color: var(--positive10) !important;
}
.positive10col {
    color: var(--positive10) !important;
}
.positive10bor {
    border-color: var(--positive10) !important;
}


.negativebg {
    background-color: var(--negative) !important;
}
.negativecol {
    color: var(--negative) !important;
}
.negativebor {
    border-color: var(--negative) !important;
}


.negative30bg {
    background-color: var(--negative30) !important;
}
.negative30col {
    color: var(--negative30) !important;
}
.negative30bor {
    border-color: var(--negative30) !important;
}


.negative20bg {
    background-color: var(--negative20) !important;
}
.negative20col {
    color: var(--negative20) !important;
}
.negative20bor {
    border-color: var(--negative20) !important;
}


.negative10bg {
    background-color: var(--negative10) !important;
}
.negative10col {
    color: var(--negative10) !important;
}
.negative10bor {
    border-color: var(--negative10) !important;
}



.shadow100 {
    box-shadow: var(--shadow100);
}

.shadownav {
    box-shadow: var(--shadownav);
}



.spaceH-xxsmall {width: var(--space_xxsmall); height: 1px; flex-shrink: 0;}
.spaceH-xsmall {width: var(--space_xsmall); height: 1px; flex-shrink: 0;}
.spaceH-small {width: var(--space_small); height: 1px; flex-shrink: 0;}
.spaceH-regular {width: var(--space_regular); height: 1px; flex-shrink: 0;}
.spaceH-medium {width: var(--space_medium); height: 1px; flex-shrink: 0;}
.spaceH-large {width: var(--space_large); height: 1px; flex-shrink: 0;}
.spaceH-xlarge {width: var(--space_xlarge); height: 1px; flex-shrink: 0;}
.spaceH-xlarge_ {width: var(--space_xlarge_); height: 1px; flex-shrink: 0;}
.spaceH-xxlarge {width: var(--space_xxlarge); height: 1px; flex-shrink: 0;}
.spaceH-xxxlarge {width: var(--space_xxxlarge); height: 1px; flex-shrink: 0;}
.spaceH-xxxxlarge {width: var(--space_xxxxlarge); height: 1px; flex-shrink: 0;}

.spaceV-xxsmall {height: var(--space_xxsmall); flex-shrink: 0;}
.spaceV-xsmall {height: var(--space_xsmall); flex-shrink: 0;}
.spaceV-small {height: var(--space_small); flex-shrink: 0;}
.spaceV-regular {height: var(--space_regular); flex-shrink: 0;}
.spaceV-medium {height: var(--space_medium); flex-shrink: 0;}
.spaceV-large {height: var(--space_large); flex-shrink: 0;}
.spaceV-xlarge {height: var(--space_xlarge); flex-shrink: 0;}
.spaceV-xlarge_ {height: var(--space_xlarge_); flex-shrink: 0;}
.spaceV-xxlarge {height: var(--space_xxlarge); flex-shrink: 0;}
.spaceV-xxxlarge {height: var(--space_xxxlarge); flex-shrink: 0;}
.spaceV-xxxxlarge {height: var(--space_xxxxlarge); flex-shrink: 0;}
.spaceV-xxxxxlarge {height: var(--space_xxxxxlarge); flex-shrink: 0;}

.spaceBigV-xxxsmall {height: var(--spaceBig_xxxsmall); flex-shrink: 0;}
.spaceBigV-xxsmall {height: var(--spaceBig_xxsmall); flex-shrink: 0;}
.spaceBigV-xsmall {height: var(--spaceBig_xsmall); flex-shrink: 0;}
.spaceBigV-small {height: var(--spaceBig_small); flex-shrink: 0;}
.spaceBigV-regular {height: var(--spaceBig_regular); flex-shrink: 0;}
.spaceBigV-medium {height: var(--spaceBig_medium); flex-shrink: 0;}
.spaceBigV-large {height: var(--spaceBig_large); flex-shrink: 0;}
.spaceBigV-xlarge {height: var(--spaceBig_xlarge); flex-shrink: 0;}
.spaceBigV-xxlarge {height: var(--spaceBig_xxlarge); flex-shrink: 0;}
.spaceBigV-xxxlarge {height: var(--spaceBig_xxxlarge); flex-shrink: 0;}
.spaceBigV-xxxxlarge {height: var(--spaceBig_xxxxlarge); flex-shrink: 0;}

.spaceBigH-xxxsmall {width: var(--spaceBig_xxxsmall); height: 1px; flex-shrink: 0;}
.spaceBigH-xxsmall {width: var(--spaceBig_xxsmall); height: 1px; flex-shrink: 0;}
.spaceBigH-xsmall {width: var(--spaceBig_xsmall); height: 1px; flex-shrink: 0;}
.spaceBigH-small {width: var(--spaceBig_small); height: 1px; flex-shrink: 0;}
.spaceBigH-regular {width: var(--spaceBig_regular); height: 1px; flex-shrink: 0;}
.spaceBigH-medium {width: var(--spaceBig_medium); height: 1px; flex-shrink: 0;}
.spaceBigH-large {width: var(--spaceBig_large); height: 1px; flex-shrink: 0;}
.spaceBigH-xlarge {width: var(--spaceBig_xlarge); height: 1px; flex-shrink: 0;}
.spaceBigH-xxlarge {width: var(--spaceBig_xxlarge); height: 1px; flex-shrink: 0;}
.spaceBigH-xxxlarge {width: var(--spaceBig_xxxlarge); height: 1px; flex-shrink: 0;}
.spaceBigH-xxxxlarge {width: var(--spaceBig_xxxxlarge); height: 1px; flex-shrink: 0;}

.gap-xxsmall {gap: var(--space_xxsmall);}
.gap-xsmall {gap: var(--space_xsmall);}
.gap-small {gap: var(--space_small);}
.gap-regular {gap: var(--space_regular);}
.gap-medium {gap: var(--space_medium);}
.gap-large {gap: var(--space_large);}
.gap-xlarge {gap: var(--space_xlarge);}
.gap-xxlarge {gap: var(--space_xxlarge);}
.gap-xxxlarge {gap: var(--space_xxxlarge);}
.gap-xxxxlarge {gap: var(--space_xxxxlarge);}
.gap-xxxxxlarge {gap: var(--space_xxxxxlarge);}

.gap-big-xxxsmall {gap: var(--spaceBig_xxxsmall);}
.gap-big-xxsmall {gap: var(--spaceBig_xxsmall);}
.gap-big-xsmall {gap: var(--spaceBig_xsmall);}
.gap-big-small {gap: var(--spaceBig_small);}
.gap-big-regular {gap: var(--spaceBig_regular);}
.gap-big-medium {gap: var(--spaceBig_medium);}
.gap-big-large {gap: var(--spaceBig_large);}
.gap-big-xlarge {gap: var(--spaceBig_xlarge);}
.gap-big-xxlarge {gap: var(--spaceBig_xxlarge);}
.gap-big-xxxlarge {gap: var(--spaceBig_xxxlarge);}
.gap-big-xxxxlarge {gap: var(--spaceBig_xxxxlarge);}

.max-container {
    max-width: 1208px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--space_large);
}

.seperate-h {
    height: 1px;
}

.seperate-v {
    width: 1px;
}

.column-container {
    display: flex !important;
    flex-direction: column !important;
}

.column-reverse {
    flex-direction: column-reverse !important;
}

.row-container {
    display: flex !important;
    flex-direction: row !important;
}

.row-reverse {
    flex-direction: row-reverse !important;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-start {
    justify-content: start;
}

.justify-end {
    justify-content: end;
}

.align-start {
    align-items: start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: end;
}

.t-align-left {
    text-align: left;
}

.t-align-center {
    text-align: center;
}

.t-align-right {
    text-align: right;
}

.fill {
    flex-grow: 1;
    width: 1px;
}

.fill-column {
    width: 100%;
}

.fill-grow {
    flex-grow: 1;
}

.hug {
    flex-shrink: 0;
}

.flex-wrap {
    flex-wrap: wrap;
}


.chevron-right-icon {
    position: relative;
    display: flex;
    content: "";
    width: var(--space_large);
    height: var(--space_large);
    mask: url(../i/chevron-right.svg) no-repeat;
    mask-size: 100%;
    -webkit-mask: url(../i/chevron-right.svg) no-repeat;
    -webkit-mask-size: 100%;
}

.check-icon {
    position: relative;
    display: flex;
    content: "";
    width: var(--space_large);
    height: var(--space_large);
    mask: url(../i/check.svg) no-repeat;
    mask-size: 100%;
    -webkit-mask: url(../i/check.svg) no-repeat;
    -webkit-mask-size: 100%;
}

.chevron-down-icon {
    position: relative;
    display: flex;
    content: "";
    width: var(--space_large);
    height: var(--space_large);
    mask: url(../i/chevron-down.svg) no-repeat;
    mask-size: 100%;
    -webkit-mask: url(../i/chevron-down.svg) no-repeat;
    -webkit-mask-size: 100%;
}

.chevron-top-icon {
    position: relative;
    display: flex;
    content: "";
    width: var(--space_large);
    height: var(--space_large);
    mask: url(../i/chevron-top.svg) no-repeat;
    mask-size: 100%;
    -webkit-mask: url(../i/chevron-top.svg) no-repeat;
    -webkit-mask-size: 100%;
}

.close-icon {
    position: relative;
    display: flex;
    content: "";
    width: var(--space_large);
    height: var(--space_large);
    mask: url(../i/close.svg) no-repeat;
    mask-size: 100%;
    -webkit-mask: url(../i/close.svg) no-repeat;
    -webkit-mask-size: 100%;
}

.data-icon {
    position: relative;
    display: flex;
    content: "";
    width: var(--space_large);
    height: var(--space_large);
    mask: url(../i/data.svg) no-repeat;
    mask-size: 100%;
    -webkit-mask: url(../i/data.svg) no-repeat;
    -webkit-mask-size: 100%;
}

.graphic-icon {
    position: relative;
    display: flex;
    content: "";
    width: var(--space_large);
    height: var(--space_large);
    mask: url(../i/graphic.svg) no-repeat;
    mask-size: 100%;
    -webkit-mask: url(../i/graphic.svg) no-repeat;
    -webkit-mask-size: 100%;
}

.info-icon {
    position: relative;
    display: flex;
    content: "";
    width: var(--space_large);
    height: var(--space_large);
    mask: url(../i/info.svg) no-repeat;
    mask-size: 100%;
    -webkit-mask: url(../i/info.svg) no-repeat;
    -webkit-mask-size: 100%;
}

.instagram-icon {
    position: relative;
    display: flex;
    content: "";
    width: var(--space_large);
    height: var(--space_large);
    mask: url(../i/instagram.svg) no-repeat;
    mask-size: 100%;
    -webkit-mask: url(../i/instagram.svg) no-repeat;
    -webkit-mask-size: 100%;
}

.linkedin-icon {
    position: relative;
    display: flex;
    content: "";
    width: var(--space_large);
    height: var(--space_large);
    mask: url(../i/linkedin.svg) no-repeat;
    mask-size: 100%;
    -webkit-mask: url(../i/linkedin.svg) no-repeat;
    -webkit-mask-size: 100%;
}

.wallet-icon {
    position: relative;
    display: flex;
    content: "";
    width: var(--space_large);
    height: var(--space_large);
    mask: url(../i/wallet.svg) no-repeat;
    mask-size: 100%;
    -webkit-mask: url(../i/wallet.svg) no-repeat;
    -webkit-mask-size: 100%;
}

.x-icon {
    position: relative;
    display: flex;
    content: "";
    width: var(--space_large);
    height: var(--space_large);
    mask: url(../i/x.svg) no-repeat;
    mask-size: 100%;
    -webkit-mask: url(../i/x.svg) no-repeat;
    -webkit-mask-size: 100%;
}


input, button, select, textarea, blockquote, h1, h2, h3, h4, h5, h6 {
    appearance: none;
    -webkit-appearance: none;
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
    font-size: var(--body);
    line-height: var(--bodyline);
}

input, button, select, textarea {
    color: var(--primary);
}

input, button, select, textarea,
:focus, :visited, :enabled, :disabled, :focus-visible, :focus-within {
    outline: none;
}

p {margin: 0; padding: 0;}

a {text-decoration: none; color: var(--primary);}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    height: var(--space_xxxlarge) !important;
    padding: 0 var(--space_xlarge);
    font-size: var(--b3);
    font-weight: var(--weiS);
    color: var(--whitestatic);
    box-sizing: border-box;
    gap: var(--space_medium);
    cursor: pointer;
    border-radius: var(--space_medium);
    white-space: nowrap;
    width: auto !important;
    border: transparent;
}

.button.secondary {
    background-color: var(--bgc2);
    border: 1px solid var(--bgc5);
    color: var(--primary);
}

.button.tertiary {
    background-color:transparent;
    border: none;
    flex-direction: row;
    color: var(--primary);
    padding: 0;
    height: auto !important;
}

.button .icon-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    content: "";
    width: var(--space_xlarge);
    height: var(--space_xlarge);
    background-color: var(--bgc5);
    border: 1px solid var(--bgc2);
    box-sizing: border-box;
    border-radius: var(--space_small);
} 

.button > .icon-cover > * {
    width: var(--space_medium);
    height: var(--space_medium);
}

input[type="text"],
input[type="email"],
input[type="text"]:-webkit-autofill,
input[type="text"]:-webkit-autofill:hover,
input[type="text"]:-webkit-autofill:focus,
input[type="email"]:-webkit-autofill,
input[type="email"]:-webkit-autofill:hover,
input[type="email"]:-webkit-autofill:focus {
    height: var(--space_xxxlarge);
    display: flex;
    align-items: center;
    padding: 0 var(--space_medium);
    font-size: var(--b3);
    border: 0;
    color: var(--whitestatic);
    border-radius: var(--space_regular);
    background-color: var(--blackstatic) !important;
    box-sizing: border-box;
    width: 100%;
    appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--blackstatic);
}


textarea {
    display: flex;
    align-items: center;
    padding: 0 var(--space_medium);
    font-size: var(--b3);
    border: 0;
    border-radius: var(--space_regular);
    background: var(--blackstatic);
    box-sizing: border-box;
    width: 100%;
    min-height: var(--spaceBig_small);
    color: var(--whitestatic);
}

select {
    height: var(--space_xxxlarge);
    display: flex;
    align-items: center;
    padding: 0 var(--space_xxlarge) 0 var(--space_medium);
    font-size: var(--b3);
    border: 0;
    border-radius: var(--space_regular);
    box-sizing: border-box;
    background: var(--blackstatic) url(../i/select.svg) no-repeat right var(--space_small) top var(--space_regular);
    background-size: var(--space_large);
    width: 100%;
    color: var(--tertiary);
}

input::placeholder,
textarea::placeholder {
    display: none;
    visibility: hidden;
    color: var(--secondary);
}

.input-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space_xxsmall);
}

.input-cover span {
    position: absolute;
    pointer-events: none;
    height: var(--space_xxxlarge);
    line-height: var(--space_xxxlarge);
    align-items: center;
    top: 0;
    left: 0;
    padding: 0 var(--space_medium);
    font-size: var(--b3);
    transition: 0.5s ease;
    width: auto;
    color: var(--tertiary);
}

.select-cover {
    position: relative;
}

.select-cover span {
    position: absolute;
    pointer-events: none;
    height: var(--space_xxxlarge);
    line-height: var(--space_xxxlarge);
    align-items: center;
    top: 0;
    left: 0;
    padding: 0 var(--space_medium);
    font-size: var(--b3);
    transition: 0.5s ease;
    width: auto;
    opacity: 0;
    color: var(--tertiary);
}

.select-cover option:disabled {
    color: red !important;
    appearance: none;
    opacity: 1 !important;
}


.select-cover .selected {
    color: var(--whitestatic) !important;
}

.select-cover .selected + span {
    height: 18px;
    line-height: 18px;
    padding: 0 var(--space_xxsmall);
    top: -21px;
    left: var(--space_small);
    opacity: 1;
    font-size: var(--b4);
    color: var(--tertiary) !important;
}

.input-cover p {
    font-size: var(--captionsmall);
    padding: 0 var(--space_medium);
}

.input-cover p.error {
    color: var(--negative100);
}

.input-cover p.warning {
    color: var(--yellow);
}

.input-cover input:focus + span,
.input-cover input:not(:placeholder-shown) + span,
.input-cover textarea:focus + span,
.input-cover textarea:not(:placeholder-shown) + span {
    height: 18px;
    line-height: 18px;
    padding: 0 var(--space_xxsmall);
    top: -21px;
    left: var(--space_small);
    font-size: var(--b4);
    color: var(--tertiary) !important;
}

.button-bottom-cover {
    position: fixed;
    flex-direction: column;
    display: flex;
    padding: var(--space_medium);
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bgc2);
}

.mobile {
    display: none !important;
}

.custom-check-list .item input {
    display: none;
}

.custom-check-list .item label {
    display: flex;
    border-radius: var(--space_regular);
    cursor: pointer;
    padding: var(--space_medium);
}

.custom-check-list .item input:checked + label {
    background-color: var(--purple) !important;
}


header {
    height: var(--spaceBig_xxsmall);
    position: sticky;
    top: 0;
    z-index: 3;
    transition: 0.5s ease;
}

header .button {
    position: relative;
    z-index: 2;
}

header .qr-box {
    position: absolute;
    left: calc(50% - 130px);
    top: var(--spaceBig_xxxsmall);
    width: 260px;
    padding: var(--space_large);
    box-sizing: border-box;
    border-radius: var(--space_large);
    border: 1px solid;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease;
}

header .qr-box::before {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 var(--space_medium) var(--space_regular) var(--space_medium);
    border-color: transparent transparent var(--bgc5) transparent;
    transform: rotate(0deg);
    left: calc(50% - var(--space_medium));
    top: calc(-1 * var(--space_regular));
}

header .qr-box.active {
    opacity: 1;
    pointer-events: unset;
}

header .nav a.active {
    color: var(--blue);
}

.hero {
    overflow: hidden;
    padding: var(--spaceBig_xsmall) 0;
}

.hero .max-container {
    position: relative;
}

.hero .max-container > *:first-child {
    width: 100%;
    max-width: 596px;
    position: relative;
    z-index: 2;
}

.hero .lottie {
    position: absolute;
    right: -320px;
    bottom: -629px;
    z-index: 1;
}

.features {
    padding: var(--spaceBig_xsmall) var(--space_large);
}

.features .head h2 {
    width: 100%;
    max-width: 540px;
}

.features .head span {
    width: 100%;
    max-width: 1020px;
}

.features-content-slick .slick-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.features-nav-slick .button {
    margin: 0 var(--space_small);
}

.features-nav-slick .button.slick-current {
    background-color: var(--blackstatic);
    border-color: transparent;
    color: var(--whitestatic);
}

.features-nav-slick .slick-track {
    display: flex !important;
    flex-wrap: nowrap;
    transform: none !important;
}

.faq-content-slick .slick-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.faq-nav-slick .button {
    margin: 0 var(--space_small);
}

.faq-nav-slick .button.slick-current {
    background-color: var(--blackstatic);
    border-color: transparent;
    color: var(--whitestatic);
}

.faq-nav-slick .slick-track {
    display: flex !important;
    flex-wrap: nowrap;
    transform: none !important;
}

.free {
    padding: var(--spaceBig_xsmall) 0;
}

.free .head h2 {
    width: 100%;
    max-width: 470px;
}

.free .item {
    padding: var(--space_xxxlarge) var(--space_large);
    border-radius: var(--space_large);
    border: 1px solid;
}

.free .item .cover {
    width: var(--spaceBig_regular);
    height: var(--spaceBig_regular);
    border-radius: var(--space_xlarge);
    border: 1px solid;
}

.free .item .cover > * {
    width: var(--space_xxxxxlarge);
    height: var(--space_xxxxxlarge);
}

.how {
    padding: var(--spaceBig_xsmall) 0;
}

.how .number {
    width: var(--space_xxxxlarge);
    height: var(--space_xxxxlarge);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--space_medium);
}

.how-slick {
    position: relative;
}

.how-slick .row-container > *:first-child {
    width: 500px;
 }

.how-slick .slick-dots,
.features-content-slick .slick-dots {
    position: absolute;
    left: 0;
    bottom: var(--space_xxlarge);
    display: flex;
    flex-direction: row;
    border-radius: var(--space_medium);
    background-color: var(--whitestatic);
}

.how-slick .slick-dots li,
.features-content-slick .slick-dots li {
    display: flex;
}

.how-slick .slick-dots button,
.features-content-slick .slick-dots button {
    width: var(--space_large);
    height: var(--space_xxlarge);
    text-indent: -9999px;
    border: 0;
    transition: 0.5s ease;
    display: flex;
    background: none;
    position: relative;
    box-sizing: content-box;
}

.how-slick .slick-dots button::after,
.features-content-slick .slick-dots button::after {
    content: "";
    position: absolute;
    left: var(--space_small);
    top: var(--space_medium);
    display: block;
    width: var(--space_small);
    height: var(--space_small);
    border-radius: var(--space_small);
    background-color: var(--bgc5);
    transition: 0.5s ease;
}

.how-slick .slick-dots .slick-active button,
.features-content-slick .slick-dots .slick-active button {
    width: var(--space_xxxlarge);
}

.how-slick .slick-dots .slick-active button::after,
.features-content-slick .slick-dots .slick-active button::after {
    width: var(--space_xlarge);
    background-color: var(--blue);
}

.partner {
    padding: var(--spaceBig_xsmall) var(--space_large);
}

.partner .item {
    padding: var(--space_xxxxxlarge) var(--space_large) var(--space_xxxxlarge);
    border-radius: var(--space_large);
    position: relative;
    border: 1px solid;
}

.partner .item .ear {
    position: absolute;
    right: -1px;
    top: -1px;
    padding: 0 var(--space_xlarge);
    height: var(--space_xxxxlarge);
    border-radius: 0 var(--space_large) 0 var(--space_large);
}

.partner .item .b2 {
    max-width: 840px;
}

.faq {
    padding: var(--spaceBig_xsmall) 0;
}

.faq .max-container {
    max-width: 814px;
}

.faq .item-in {
    padding: var(--space_large) 0;
    border-bottom: 1px solid;
}

.faq .item-in .question {
    cursor: pointer;
}

.faq .item-in .question.active .h4b {
    color: var(--blue) !important;
}

.faq .item-in .question.active .button .icon-cover {
    background-color: var(--blue) !important;
    border-color: transparent !important;
}

.faq .item-in .question .button .icon-cover > *,
.faq .item-in .question .button .icon-cover {
    transition: 0.5s ease;
}

.faq .item-in .question.active .button .icon-cover > * {
    background-color: var(--whitestatic) !important;
    transform: rotate(180deg);
}

.faq .item-in .answer {
    max-height: 0;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
}

.faq .item-in .answer p {
    padding-top: var(--space_large);
}

.contact {
    padding: var(--spaceBig_xsmall) 0;
}

.contact .form {
    padding: var(--space_xxlarge) var(--space_large) var(--space_large);
    border: 1px solid;
    border-radius: var(--space_large);
}

footer {
    padding: var(--spaceBig_xsmall) 0;
}

footer .logo {
    padding: var(--space_medium) 0;
}

footer .footer-top {
    padding-bottom: var(--space_xxxlarge);
    border-bottom: 1px solid;
}

.help-head {
    padding: var(--spaceBig_xsmall) 0;
}

.company-profile {
    padding: var(--spaceBig_xsmall) 0;
}

.company-profile .profile-box {
    padding: var(--space_xxxxxlarge) var(--spaceBig_medium);
    border-radius: var(--space_large);
    border: 1px solid;
}

#error {
    display: none;
    color: var(--negative);
}

#errormail {
    display: none;
    color: var(--negative);
}

#error.visible {
    display: block;
}

#errormail.visible {
    display: block;
}

.error > input, .error > button, .error > select, .error > textarea {
    border-color: var(--negative) !important;
}

.error > span {
    color: var(--negative) !important;
}

.error > select {
    color: var(--negative) !important;
}



.iOS a.button[title="Google Play"],
.iOS a.button[title="Get our App"],
.iOS .spaceH_large  {
    display: none !important;
}

.Android a.button[title="App Store"],
.Android a.button[title="Get our App"],
.Android .spaceH_large  {
    display: none !important;
}

.unknown a.button[title="Google Play"],
.unknown a.button[title="App Store"],
.unknown .spaceH_large  {
    display: none !important;
}

.popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: var(--space_large);
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease;
}

.popup.open {
    opacity: 1;
    pointer-events: unset;
}

.popup .overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.popup .pop-content {
    position: relative;
    z-index: 2;
    border-radius: var(--space_xxlarge);
    padding: var(--space_xxlarge) var(--space_large);
    width: 100%;
    max-width: 500px;
    height: 350px;
}

.popup .pop-content > .close-icon {
    position: absolute;
    width: var(--space_xlarge);
    height: var(--space_xlarge);
    right: var(--space_large);
    top: var(--space_large);
    cursor: pointer;
}

.popup .pop-content .check-area {
    width: var(--spaceBig_xxsmall);
    height: var(--spaceBig_xxsmall);
    border-radius: 50%;
}

.popup .pop-content .check-area > * {
    width: var(--space_xxlarge);
    height: var(--space_xxlarge);
}