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

body, html {margin: 0;padding: 0;width: 100%;color: #000;font-size: 15px;background-color: #fff;height: 100%;overflow-x: hidden;}
* {font-weight: 300;font-family: 'Manrope', sans-serif;box-sizing: border-box; line-height: 1;}
strong {font-weight: 700;}
a {color: #00c3ff;-webkit-tap-highlight-color: transparent;tap-highlight-color: transparent;}

#preloader {position: fixed;top:0; left:0;right:0; bottom:0;background: #fff;z-index: 100000;}
#loader {width: 32px;height: 32px;position: absolute;left:50%; top:50%;background: url(../images/loader.gif) no-repeat center 0;margin:-16px 0 0 -16px;color: #f69221;}

.section-center {width: 100%;max-width: 1200px;margin: 0 auto;}

header {position: sticky;top: 0;width: 100%;background-color: #000;padding: 20px;z-index: 2;}
header .section-center {display: flex;justify-content: space-between;}
header .logo {width: 150px;}
header .logo img {width: 100%;}
header .nav {display: flex;align-items: center;justify-content: flex-end;}
header .nav a {color: #fff;padding: 5px;border-bottom: 1px solid #000;transition: .3s;text-decoration: none;margin: 0 10px;}
header .nav a.button {border-radius: 20px;padding: 5px 15px;border: 1px solid #fff;}
header .nav a:hover, header .nav a.active {border-color: #00c3ff;color: #00c3ff;}
header .nav a .st0 {fill: #fff;transition: .3s;}
header .nav a:hover .st0, header .nav a.active .st0 {fill: #00c3ff;}

.banner {position: relative;width: 100%;height: calc(100vh - 75px);background: url(../images/banner-head.jpg) no-repeat center;background-size: cover;}
/*.banner img {width: 100%;}*/
.banner .text-cont {position: absolute;right: 57%;top: 0;bottom: 0;display: flex;align-items: center;justify-content: center;width: 450px;flex-direction: column;}
.banner .text-cont .text {font-size: 3rem;font-weight: 800;color: #fff;}
.banner .text-cont .buttons-cont {position: relative;width: 100%;margin-top: 20px;white-space: nowrap;}
.banner .text-cont .buttons-cont a {text-decoration: none;padding: 6px 25px;color: #fff;border-radius: 20px;margin-right: 20px;font-size: .9rem;transition: .3s;background-color: #000;}
.banner .text-cont .buttons-cont a:hover {background-color: #333;}
.banner svg {position: absolute;bottom: 30px;left: 50%;margin-left: -15px;width: 30px;-webkit-animation: bounce-down 1.6s linear infinite;animation: bounce-down 1.6s linear infinite;}
.banner .st0 {fill: #fff;transition: .3s;}

@keyframes bounce-down {
        25% {
             transform: translateY(-6px);
        }
        50%, 100% {
             transform: translateY(0);
        }
        75% {
             transform: translateY(6px);
        }
}

.banner-title {padding: 50px;font-size: 2.5rem;font-weight: 800;display: none;text-align: center;}
.banner-title .buttons-cont {position: relative;width: 100%;margin-top: 20px;white-space: nowrap;}
.banner-title .buttons-cont a {text-decoration: none;padding: 6px 25px;color: #fff;border-radius: 20px;margin-right: 20px;font-size: .9rem;transition: .3s;background-color: #000;}
.banner-title .buttons-cont a:hover {background-color: #333;}

.col-text {padding: 0 40px 20px;flex-grow: 1;}
.col-text p {font-size: 1.1rem;line-height: 1.5;}

.whatis-cont {padding: 50px 0;margin: 200px 0 150px; height: 250px;}
.whatis-cont img {margin-top: -180px}
.whatis-cont .col-text {margin-top: -90px;}

.want-cont {margin-bottom: 80px;}
.want-cont .col-text {padding: 20px 100px;}

.how-cont {background-color: #000;padding: 0!important;}


.steps-cont {display: flex;justify-content: center;}
.step {padding: 10px 20px;text-align: center;cursor: pointer;transition: .3s;flex-basis: 100px;height: 140px;flex-shrink: 1;-webkit-tap-highlight-color: transparent;tap-highlight-color: transparent;}
.step span {/*-webkit-text-stroke: 2px #fff;text-stroke: 2px #fff;*/font-weight: 900;font-size: 8rem;text-shadow: 2px 2px 1px #fff, -2px -2px 1px #fff, 0 -2px 1px #fff, 0 2px 1px #fff, -2px 0 1px #fff, 2px 0 1px #fff;transition: .3s;}
.step .desc {display: none;width: 90%;font-size: 1.1rem;color: #fff;text-align: center;padding: 0 15px;line-height: 1.5;transition: .3s;height: 95px;overflow:hidden;}

.step.active {background-color: #005aeb;display: flex;justify-content: flex-end;width: 350px;flex-grow: 1;}
.step.active .num-cont {display: flex;border: 2px solid #fff;border-radius: 10px;align-items: center;justify-content: flex-start;;width: 95%;}
.step.active .num-cont span {text-shadow: 3px 3px 1px #005aeb, -3px -3px 1px #005aeb, 0 -3px 1px #005aeb, 0 3px 1px #005aeb, -3px 0 1px #005aeb, 3px 0 1px #005aeb;color: #fff;margin-left: -25px;font-size: 6rem;}
.step.active .desc {display: flex;align-items: center;}

/* tabs */
.tabs-head {display: flex; gap: 20px;padding-bottom: 20px;border-bottom: 2px solid #005aeb;margin-bottom: 30px;}
.tabs-head .tab {padding: 7px 25px;border: 1px solid #000;cursor: pointer; transition: .3s;border-radius: 30px;font-size: 1.1rem;position: relative;min-width: 132px;text-align: center;-webkit-tap-highlight-color: transparent;tap-highlight-color: transparent;}
.tabs-head .tab:hover {border-color: #00c3ff;color: #00c3ff;}
.tabs-head .tab.active {color: #fff;border-color: #fff;background: linear-gradient(to left, #5042c0, #005aeb, #00c3ff);box-shadow: 0 0 5px #b4b4b4;font-weight: 500;}
.tabs-head .tab.active::after {content: " "; position: absolute; top: 100%; left: 50%; margin-left: -7px; border-width: 7px; border-style: solid; border-color: #005aeb transparent transparent transparent;}
.tabs-head.center {justify-content: center;border: none;margin-bottom: 0;}
.tabs-inf {padding: 10px 40px;}
.tabs-inf .box-inf {display: none;}
.tabs-inf .box-inf.active {display: block;}
.tabs-inf.flex .box-inf.active {display: flex;}

.vig-line {position: relative;padding: 15px 10px 10px 40px;display: flex;}
.vig-line .num {display: flex;width: 30px;height: 30px;background-color: #005aeb;color: #fff;justify-content: center;align-items: center;font-weight: 700;position: absolute;left: 0;top: 10px;border-radius: 50%;font-size: 1.2rem;}
.vig-line p {font-size: 1.1rem;margin: 0;}

footer {width: 100%;background-color: #000;margin-top: 120px;}
footer .copy {padding: 15px;text-align: center;border-top: 1px solid #fff;}
footer p {line-height: 1.5;font-size: 1rem;}
footer a {color: #000;}

footer .links-cont {flex-grow: 1;padding: 50px 10px;display: flex;gap: 35px;flex-shrink: 1;}
footer .links-cont .col {line-height: 1.5;flex-basis: 225px;flex-shrink: 1;}
footer .links-cont .title {text-align: center;font-size: 1.3rem;font-weight: 500;padding: 10px;border-bottom: 2px solid #005aeb;margin-bottom: 20px;}
footer .links-cont a {display: block;font-weight: 400;text-decoration: none;line-height: 1.5;transition: .3s;}
footer .links-cont a:hover {text-decoration: underline;}
footer .links-cont p {margin-bottom: 0;font-weight: 400;}

footer .logos {width: 350px;flex-grow: 0;text-align: right;padding: 50px 10px;}
footer .bottom {padding: 10px 20px;}

/* responsive menu */
.btn-burger {height: 66px;overflow: hidden;position: fixed;display: none;text-indent: 100%;white-space: nowrap;width: 44px;padding: 0;z-index: 8;transition: all 0.3s;cursor: pointer;top:7px;right: 15px;}
.btn-burger span {background-color: #fff;bottom: auto;display: inline-block;height: 4px;left: 50%;position: absolute;right: auto;top: 50%;width: 25px;z-index: 10;transform: translateX(-50%) translateY(-50%);}
.btn-burger span:before, .btn-burger span:after {background-color: #fff;content: "";height: 100%;position: absolute;right: 0;top: 0;width: 100%;transform: translateZ(0);backface-visibility: hidden;transition: transform 0.3s;}
.btn-burger span:before {transform: translateY(-8px) rotate(0deg);}
.btn-burger span:after {transform: translateY(8px) rotate(0deg);}
.btn-burger.close-nav span {background-color: rgba(255, 255, 255, 0);}
.btn-burger.close-nav span:before {transform: translateY(0) rotate(45deg);background-color: #fff;}
.btn-burger.close-nav span:after {transform: translateY(0) rotate(-45deg);background-color: #fff;}

/* credits styles */

.credit-cont {margin-top: 50px;}
.credit-cont .col-text {padding: 40px;max-width: 550px;}
.credit-cont .col-text p {font-size: 1.5rem;margin: 5px 0;}
.label {font-size: 14px;padding-top: 10px;display: block;}

.input-cont {width: 100%;max-width: 400px;position: relative;}
.input-cont input {font-size: 1.7rem;padding: 15px 35px 15px 45px;border: 1px solid #eee;border-radius: 50px;background-color: #fff;box-shadow: 0 0 5px rgba(0,0,0,0.05);width: 100%;}
.input-cont input:focus {box-shadow: 0 0 6px rgba(0,0,0,0.15);outline: none;}

.input-cont .tooltip {position: absolute;padding: 15px;background-color: #000;color: #fff;margin-bottom: -10px;text-align: center;bottom: 100%;left: 15px;right: 15px;opacity: 0;visibility: hidden;transition: .3s;}
.input-cont .tooltip::after {content: " ";position: absolute;top: 100%;left: 50%;margin-left: -10px;margin-top:-5px;border-width: 10px;border-style: solid;border-color: #000 transparent transparent transparent;}
.input-cont .tooltip.show {margin-bottom: 5px;opacity: 1;visibility: visible;}

.input-cont label {font-size: 1.7rem;position:absolute;left: 25px;top: 20px;}

.term-cont {display: flex;gap: 10px;padding: 10px 0;flex-wrap: wrap;}
.term-cont .option {cursor: pointer;width: 50px;height: 50px;background-color: #000;color: #fff;display: flex;justify-content: center;align-items: center;font-size: 1.6rem;font-weight: 700;border: none;border-radius: 50%;}
.term-cont .option:hover {box-shadow: 0 0 5px rgba(0, 0, 0, .1);}
.term-cont .option.active {background: linear-gradient(to left, #5042c0, #005aeb, #00c3ff);}

.buttons-person {position: relative;padding: 20px 0;}
.buttons-person button {cursor: pointer;background-color: #000;color: #fff;padding: 7px 25px;font-weight: 600;border-radius: 50px;margin-right: 15px;border: none;font-size: 1.2rem;}
.buttons-person button.active {background: linear-gradient(to left, #5042c0, #005aeb, #00c3ff);}

.table-cont {padding: 30px 60px;background-color: #f1f3f4;border-radius: 50px;font-size: 1.5rem;margin-top: 90px;}
.table-cont .line {display: flex;padding: 15px 0;border-bottom:1px solid #005aeb;text-align: center;}
.table-cont .line:last-child {border-bottom: none;}
.table-cont .line div {flex-basis: calc(100%/3);flex-shrink: 1;padding: 10px;font-weight: 500;}
.text-blue {color: #005aeb;}

/* Investor styles */
.investor-cont {margin-top: 50px;}
.investor-cont .input-cont {margin: 0 auto;}
.investor-cont .input-cont label {display: none;}
.investor-cont .col-text p {font-size: 1.5rem;margin: 5px 0;}

/*.investor-cont .total-box {padding: 25px 20px;background-color: #f1f3f4;border-radius: 50px;font-size: 1.5rem;text-align: center;margin: 10px auto;max-width: 600px;}
.total-box .big-text {font-size: 2rem;font-weight: 700;}
.total-box .cant {padding: 10px 25px;text-align: center;margin: 10px auto;border-radius: 50px;background: linear-gradient(to left, #5042c0, #005aeb, #00c3ff);color: #fff;font-size: 2.5rem;font-weight: 700;width: auto;max-width: 300px;}
.re-invest {display: flex;margin: 15px auto 25px;width: 90%;gap: 10px;flex-wrap: wrap;}
.re-invest button {outline: none;border: none;border-radius: 50px;cursor: pointer;background-color: #000;color: #fff;padding: 10px 20px;font-size: 1.5rem;font-weight: 700;}
.re-invest button:hover {box-shadow: 0 0 5px rgba(0, 0, 0, .1);}
.re-invest button.active {background: linear-gradient(to left, #5042c0, #005aeb, #00c3ff);}*/

.banner-separate {width: 100%;margin: 30px 0;}

/*  faqs styles    */

.faqs-cont {margin-top: 50px;max-width: 850px;}

.accordion {position: relative;width: 100%;margin:20px 0;padding: 0 10px;}
.accordion .options {margin: 0 0 20px;border: 1px solid #eee;border-radius: 5px;box-shadow: 2px 2px 6px rgba(0,0,0,0.05);}
.accordion .options .name {cursor: pointer;padding: 5px 75px 5px 30px;font-weight: 500;transition: .3s;font-size: 1.1rem;position: relative;border-radius: 5px;min-height: 50px;display: flex;align-items: center;justify-content: flex-start;line-height: 1.7rem;}
.accordion .options .name img {margin: 0 3px;}
.accordion .options .name:hover, .accordion .options .name.open {background-color: #f1f1f1;}
.accordion .options .name svg {position: absolute;top: 17px;right: 20px;transition: .3s;width: 16px;height: 16px;}
.accordion .options .name .st0 {fill: #232323;}
.accordion .options .name.open svg {transform: rotate(180deg);}

.accordion .options .info {display: none;padding: 15px;position: relative;}
.accordion .options .info p {line-height: 1.5;font-size: 1rem;}


/* charts styles */

.line-top {position: relative;padding: 15px;text-align: center;display: flex;justify-content: center;gap: 30px;}
.line-top .label-chart {display: flex;align-items: center;gap: 10px;font-weight: 600;}
.line-top .mark {width: 30px;height: 30px;border-radius: 20px;}

.chart-cont {/*padding: 0 20px;border-bottom: 2px solid #959595;border-left: 2px solid #959595;display: flex;gap: 20px;align-items: flex-end;justify-content: space-around;*/min-height: 400px;}
.chart-cont .bars-cont {flex-grow: 1;display: flex;align-items: flex-end;}
.chart-cont .bars-cont .bar {flex-basis: 55px;min-height: 150px;margin: 0 3px; border-radius: 20px 20px 0 0;flex-grow: 0;flex-shrink: 1;position: relative;transition: .3s;}
.chart-cont .bars-cont .bar:hover {box-shadow: 0 0 7px rgba(0, 0, 0, .4);}

.chart-cont .bars-cont .bar .tooltip {position: absolute;padding: 15px;color: #005aeb;margin-bottom: -10px;text-align: center;bottom: 110%;left: 50%;width: 100px;margin-left: -50px;opacity: 0;visibility: hidden;transition: .3s;font-weight: 600;font-size: .9rem;text-align: center;}
.chart-cont .bars-cont .bar .tooltip p {font-size: 1.3rem;margin: 0;font-weight: 600;}
.chart-cont .bars-cont .bar .tooltip::after {content: " ";position: absolute;top: 100%;left: 50%;margin-left: -15px;margin-top:-5px;border-width: 15px;border-style: solid;border-color: #005aeb transparent transparent transparent;}
.chart-cont .bars-cont .bar:hover .tooltip {visibility: visible;opacity: 1;margin-bottom: 0;}

.chart-cont .bars-cont .bar.bg-black .tooltip {color: #000;}
.chart-cont .bars-cont .bar.bg-black .tooltip::after {border-color: #000 transparent transparent transparent;}

.line-bottom {display: flex;gap: 20px;align-items: flex-end;justify-content: space-around;padding: 10px 20px;text-align: center;}
.line-bottom div {font-weight: 600;text-align: center;font-size: 1rem;}

.bg-gradient {background: linear-gradient(to bottom, #5042c0, #005aeb, #00c3ff);}
.bg-black {background-color: #000;}
.bg-blue {background-color: #005aeb;}


/* avisos styles */

.avisos-cont {margin-top: 50px;}
.avisos-cont h3 {font-size: 1.3rem;font-weight: 600;margin: 20px 0;}
.avisos-cont p, .avisos-cont ul, .avisos-cont ol {line-height: 1.5;font-size: 1.1rem;margin-bottom: 20px;}
.avisos-cont ul li, .avisos-cont ol li {line-height: 1.5;}

.avisos-cont table {border: 1px solid #eee;width: 100%;}
.avisos-cont table tr th {padding: 10px;border-right: 1px solid #eee;border-bottom: 2px solid #eee;font-weight: 600;text-align: center;}
.avisos-cont table tr td {padding: 5px 10px;border-right: 1px solid #eee;border-bottom: 1px solid #eee;text-align: left;}
.avisos-cont table tr td:last-child {border-right: none;}
.avisos-cont table tr:last-child td {border-bottom: none;}


/* comun styles */
.bg-gray {background-color: #f1f3f4;}
.text-center {text-align: center;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.high {border-color: #005aeb;}
.button-primary {background: #000;color: #fff;padding: 10px 25px;font-size: 1.3rem;display: block;margin: 20px auto;border: none;border-radius: 50px;cursor: pointer;}
.button-primary:hover {background: linear-gradient(to left, #5042c0, #005aeb, #00c3ff);}

.flex-cont {display: flex;}
.flex-cont.reverse {flex-direction: row-reverse;}
.flex-cont.space {justify-content: space-between;}

.subtitle {font-size: 1.7rem;font-weight: 700;margin-bottom: 45px;}
.subtitle img {background-color: #000;padding: 3px 5px;margin-bottom: -5px;}
.subtitle img.neg {background-color: #fff;}
.subtitle.big {font-size: 3.5rem;font-weight: 900;}
.subtitle.medium {font-size: 2.5rem;}


@media screen and (max-width: 1100px) {
    .banner .text-cont {right: 50%;}
}

@media screen and (max-width: 890px) {
    header .nav {background-color:rgba(0,0,0,0.95);flex-wrap: wrap;position: fixed;bottom: 100%;left: 0;right: 0;z-index: 7;text-align: center;flex-direction: column;align-items: center;justify-content: flex-start;gap: 20px;padding-top: 100px; transition: .3s;visibility: hidden;opacity: 0;}
    header .nav.open {bottom: 0;top: 0;visibility: visible;opacity: 1;}
    .btn-burger {display: block;}
    .banner {height: 300px;background-position: top center;}
    .banner .text-cont {display: none;}
    .banner-title {display: block;}

    .col-text p {font-size: 1rem;}
    .whatis-cont {height: 300px;margin: 130px 0 80px;}
    .whatis-cont img {margin-top: -120px;}
    .want-cont {margin-bottom: 40px;}
    .want-cont .col-text {padding: 20px 40px;}
    .tabs-inf {padding: 10px 20px;}
}

@media screen and (max-width: 768px) {
    .whatis-cont {height: auto;}
    .whatis-cont .image, .image {margin: 0 auto;display: block;}
    .flex-cont {display: block;}
    footer {margin-top: 90px;}
    footer .links-cont {width: 100%;flex-wrap: wrap;justify-content: center;}
    footer .logos {width: 100%;text-align: center;}
    footer .links-cont .col {width: 200px;}
    .tabs-cont {width: 100%;}
    .col-text {padding: 0 20px 20px;}
    .credit-cont {margin-top: 0;}
    .investor-cont {margin-top: 40px;}

    .line-bottom {align-items: flex-start;}
    .line-bottom div {writing-mode: vertical-rl;text-align: left;}
}

@media screen and (max-width: 690px) {
    /*.banner .text-cont {right: 45%;}*/
    .step {width: 100%;}
    .step.active {width: 100%;}
    .tabs-inf.flex .box-inf.active {display: block;}
}


@media screen and (max-width: 425px) {
    .banner {background: linear-gradient(to top, #2163e1, #1d64e2, #2163e1);}
    /*.banner .text-cont {position: relative;right: unset;width: 100%;padding: 30px 20px 40px;}*/
    .tabs-head.x2 .tab { width: calc(100%/2);}

    .table-cont {font-size: 1rem;padding: 20px;}
    .table-cont .line div {padding: 10px 5px;}

    .subtitle.big {font-size: 2.5rem;}
    .credit-cont .col-text {padding: 40px 20px;}

    .banner-title {padding: 20px;}
    .banner {background: url(../images/banner-head-mobile.jpg) no-repeat center;}

    .chart-cont {padding: 0 5px;gap: 2px}
    .chart-cont .bars-cont .bar {width: 12px;margin: 0 1px;}
    .line-bottom {padding: 5px;gap: 2px}
}

@media screen and (max-width: 425px) {
    .banner-title .buttons-cont a {width: 100%;display: block;margin-bottom: 10px;padding: 10px;}
}