:root {
font-size: 10px;
--primary: #735ce5;
--primary1: #a694ff;
--second: #4fbfe7;
--text: #000;
--white: #fff;
--primary-hover: #54595f;
--gray17: #00000017;
--gray50: #00000082;
}
:root,
body {
overflow-x: hidden;
width: 100%;
}
body {
margin: 0;
padding: 0;
font-family: poppins, sans-serif;
font-size: 1.6rem;
line-height: 1.4;
font-weight: 200;
background: #160840;
background: linear-gradient(
313deg,
rgba(22, 8, 64, 1) 0%,
rgba(47, 76, 108, 1) 100%
);
}
body:before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
background: #32155d;
background: linear-gradient(90deg, rgb(24 13 41) 0%, rgb(15 46 60) 100%);
}
[v-cloak] {
display: none;
}
@keyframes progressBar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes transparent {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.post-password-form {
position: relative;
text-align: center;
font-size: 1.3rem;
margin-top: 12rem;
}
.post-password-form input[type="password"] {
height: 3rem;
border: 0;
font-family: poppins, sans-serif;
padding: 0 2rem;
}
.post-password-form input[type="submit"] {
background: var(--primary);
border: 0;
font-weight: 600;
color: var(--white);
height: 3rem;
cursor: pointer;
font-family: poppins, sans-serif;
padding: 0 2rem;
}
.comparison-wrapper {
max-width: 82rem;
margin: 0 auto 2rem;
position: relative;
z-index: 2;
}
.comparison-wrapper h1 {
text-align: center;
font-size: 4rem;
line-height: 1.2;
margin: 0;
}
.comparison-wrapper .selector-wrapper {
text-align: center;
}
.comparison-wrapper .selector {
text-align: center;
display: inline-flex;
justify-content: center;
font-weight: 700;
background: #ffffff0d;
color: var(--white);
text-transform: uppercase;
font-weight: 700;
font-family: poppins, sans-serif;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.5s ease;
border-radius: 2rem;
margin: 2rem auto 1rem;
overflow: hidden;
}
.comparison-wrapper .selector div {
padding: 0.5rem 2rem;
transition: all 0.3s ease;
}
.comparison-wrapper .selector div:hover,
.comparison-wrapper .selector div.active {
background: var(--primary);
}
.comparison-wrapper .selector select {
background: 0 0;
color: var(--white);
padding: 0.2rem 1rem;
border: 0;
font-weight: 700;
font-family: Poppins;
}
.comparison-wrapper .comparison {
display: flex;
font-size: 1.4rem;
background: #ffffff03;
padding: 4rem;
border-radius: 3rem;
box-shadow: 0 0 9rem rgba(0, 0, 0, 0.2);
}
.comparison-wrapper .comparison .comp-col {
flex: 0 0 40%;
}
.comparison-wrapper .comparison .years-col {
flex: 1;
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: end;
font-weight: 700;
}
.comparison-wrapper .comparison .years-col .vs {
font-size: 2.5rem;
font-style: italic;
position: relative;
top: -8rem;
}
.comparison-wrapper .comparison .years-col .year-line {
height: 4rem;
margin: 1rem 0;
line-height: 4rem;
font-size: 1.4rem;
}
.comparison-wrapper .comparison .comp-wrapper {
padding: 0;
text-align: right;
padding-right: 2rem;
}
.comparison-wrapper .comparison .comp-col.right .comp-wrapper {
padding: 0;
text-align: left;
padding-left: 2rem;
}
.comparison-wrapper .comparison .comp-wrapper .title {
margin: 1rem 0;
font-weight: 700;
font-size: 2rem;
}
.comparison-wrapper .comparison .comp-wrapper .desc {
font-size: 12px;
opacity: 0.7;
min-height: 7rem;
}
.comparison-wrapper .comparison .comp-wrapper .img {
width: 10rem;
height: 10rem;
background-size: contain;
background-repeat: no-repeat;
margin: 0 auto;
display: inline-block;
background-position: center;
}
.comparison-wrapper .comparison .bars {
margin-top: 2rem;
display: flex;
align-items: end;
justify-content: end;
flex-direction: column;
}
.comparison-wrapper .comparison .comp-col.right .bars {
align-items: flex-start;
justify-content: flex-start;
}
.comparison-wrapper .comparison .bars .line-bar {
display: flex;
justify-content: end;
margin: 1rem 0;
}
.comparison-wrapper .comparison .comp-col.right .bars .line-bar {
justify-content: start;
text-align: left;
}
.comparison-wrapper .comparison .comp-col.right .bars .line-bar .txt {
text-align: left;
}
.comparison-wrapper .comparison .bars .line-bar div {
height: 4rem;
background: #6a42a6;
background: linear-gradient(
313deg,
rgba(106, 66, 166, 1) 0%,
rgba(54, 144, 185, 1) 100%
);
border-top-left-radius: 2rem;
border-bottom-left-radius: 2rem;
display: flex;
justify-content: flex-end;
align-items: center;
font-weight: 600;
font-size: 1.4rem;
padding: 0 1rem;
}
.comparison-wrapper .comparison .bars .line-bar div.active {
animation: progressBar 1s ease-in-out;
animation-fill-mode: both;
}
.comparison-wrapper .comparison .bars .line-bar.negative div {
background-color: initial;
background: #a642a4;
background: linear-gradient(
313deg,
rgba(166, 66, 164, 1) 0%,
rgba(255, 139, 139, 1) 100%
);
}
.comparison-wrapper .comparison .comp-col.right .bars .line-bar div {
border-radius: 0;
border-top-right-radius: 2rem;
border-bottom-right-radius: 2rem;
text-align: left;
justify-content: left;
}
.comparison-wrapper .comparison .comp-col .bars .line-bar div span {
animation: transparent 1s ease;
display: inline-block;
}
.cs-slider .swiper-button-next,
.cs-slider .swiper-button-prev {
background: var(--primary-hover);
width: 4rem;
height: 4rem;
border-radius: 50%;
font-size: 2rem;
transition: all 0.3s ease;
}
.cs-slider .swiper-button-next:hover,
.cs-slider .swiper-button-prev:hover {
background: var(--primary);
transform: scale(1.2);
}
.cs-slider .swiper-button-prev {
left: -8rem;
}
.cs-slider .swiper-button-next {
right: -8rem;
}
.cs-slider .swiper-button-next:after,
.cs-slider .swiper-button-prev:after {
font-size: 2rem;
font-weight: 700;
color: var(--white);
}
.chart-canva {
margin: 5rem 0 0;
}
.chart-wrapper {
max-width: 100rem;
margin: 3rem auto;
color: var(--white);
padding: 0 2rem;
}
.chart-wrapper .chart-headers {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.chart-wrapper .chart-headers .wrap-type {
display: flex;
flex: 1;
}
.chart-wrapper .chart-headers .wrap-type label {
background: #ffffff45;
color: var(--white);
text-transform: uppercase;
font-weight: 700;
font-family: poppins, sans-serif;
padding: 5px 1.5rem;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.5s ease;
}
.chart-wrapper .chart-headers .wrap-type label:hover,
.chart-wrapper .chart-headers .wrap-type label:has(:checked) {
background: var(--primary);
color: var(--white);
}
.chart-wrapper .chart-headers .wrap-type label input {
display: none;
}
.chart-wrapper .chart-headers .wrap-type label:first-child {
border-top-left-radius: 3rem;
border-bottom-left-radius: 3rem;
}
.chart-wrapper .chart-headers .wrap-type label:last-child {
border-top-right-radius: 3rem;
border-bottom-right-radius: 3rem;
}
.chart-wrapper .chart-disclaimer {
text-align: center;
font-size: 12px;
opacity: 0.6;
padding: 20px 0;
}
.chart-headers ul.filters {
display: flex;
list-style: none;
margin: 0;
}
.chart-headers ul.filters li a {
text-decoration: none;
font-weight: 700;
color: #fff;
transition: all 0.3s ease;
display: inline-block;
padding: 0 1rem;
}
.chart-headers ul.filters li a:hover,
.chart-headers ul.filters li a.active {
color: var(--primary);
}
.list-home .elementor-icon-list-items {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.list-home .elementor-icon-list-items .elementor-icon-list-item {
border-radius: 1rem;
background: rgb(79 191 231/9%);
padding: 2rem;
}
.list-home
.elementor-icon-list-items
.elementor-icon-list-item
.elementor-icon-list-icon {
order: 2;
}
.list-home .elementor-icon-list-items .elementor-icon-list-text {
flex: 1;
}
.list-home.group .elementor-icon-list-items {
grid-template-columns: 1fr 1fr 1fr;
}
.list-home.group .elementor-icon-list-items .elementor-icon-list-item {
display: block;
text-align: center;
padding: 4rem 3rem;
}
.list-home.group .elementor-icon-list-items .elementor-icon-list-icon {
margin: 0 auto 1.3rem;
display: block;
}
.gform-theme--framework .gform_validation_errors {
border-color: var(--primary) !important;
}
.gform-theme--framework .gform_validation_errors .gform_submission_error,
.gform-theme--framework .gform_validation_errors .gform-icon {
color: #cac0ff;
}
.gform_wrapper .gfield_label {
color: var(--white);
}
.gform_wrapper form .gform_footer input.gform_button {
width: 100% !important;
display: block !important;
background: var(--primary) !important;
height: 4rem !important;
font-weight: 700 !important;
font-size: 1.6rem !important;
}
.gform_wrapper form .gform_footer input.gform_button:hover {
opacity: 0.8 !important;
}
.gform_wrapper .gform_required_legend {
font-size: 1.4rem;
display: none;
}
.gform_wrapper .gform_confirmation_message {
margin-top: 4rem;
text-align: center;
}
.btn-floating {
display: none;
}
body.active-float-btn .btn-floating {
display: block;
} .chart-equity {
max-width: 100rem;
margin: 3rem auto;
color: var(--white);
padding: 0 2rem;
}
.chart-equity .graph-wrapper {
display: flex;
gap: 4rem;
justify-content: space-between;
flex-wrap: wrap;
}
.chart-equity .invest-amount {
font-size: 3rem;
font-weight: bold;
}
.chart-equity .slider-range {
width: 100%;
accent-color: var(--primary);
}
.chart-equity .graph-wrapper .graph-scene {
flex: 0 0 70%;
}
.chart-equity .graph-wrapper .right-side {
flex: 1;
padding-top: 5rem;
}
.chart-equity .sec-title {
margin: 0;
font-weight: 600;
}
.chart-equity .inst-types {
margin: 2rem 0;
}
.chart-equity .short-desc {
font-size: 1.2rem;
opacity: 0.8;
margin: 1rem 0;
}
.chart-equity .start-date-wrap {
margin-top: 2rem;
}
.chart-equity .start-date-wrap select {
background: none;
border: 0;
color: var(--primary1);
font-size: 2rem;
font-family: "Poppins", sans-serif;
font-weight: bold;
}
.chart-equity .start-date-wrap select option {
color: var(--black);
font-size: 1.6rem;
}
.chart-equity .wrap-type {
display: flex;
margin-top: 1rem;
}
.chart-equity .wrap-type label {
background: #ffffff45;
color: var(--white);
text-transform: uppercase;
font-weight: bold;
font-family: "Poppins", sans-serif;
padding: 5px 2rem;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.5s ease;
}
.chart-equity .wrap-type label:hover,
.chart-equity .wrap-type label:has(:checked) {
background: var(--primary);
color: var(--white);
}
.chart-equity .wrap-type label input {
display: none;
}
.chart-equity .wrap-type label:first-child {
border-top-left-radius: 3rem;
border-bottom-left-radius: 3rem;
}
.chart-equity .wrap-type label:last-child {
border-top-right-radius: 3rem;
border-bottom-right-radius: 3rem;
}
.chart-equity .chart-disclaimer {
text-align: center;
font-size: 12px;
opacity: 0.6;
padding: 20px 0;
}
.chart-headers ul.filters {
display: flex;
list-style: none;
margin: 0;
flex: 0 0 7%;
}
.chart-headers ul.filters li a {
text-decoration: none;
font-weight: bold;
color: #fff;
transition: all 0.3s ease;
display: inline-block;
padding: 0 1rem;
font-size: 1.4rem;
}
.chart-headers ul.filters li a:hover,
.chart-headers ul.filters li a.active {
color: var(--primary);
}
@media (max-width: 870px) {
.chart-headers ul.filters {
flex: 0 0 100%;
justify-content: center;
padding: 0;
}
.chart-equity .graph-wrapper .graph-scene {
min-height: 45rem;
flex: 0 0 100%;
}
.cs-slider {
width: calc(100% - 15rem);
margin: 0 auto;
position: relative;
}
}
@media (max-width: 600px) {
body {
max-width: 100vw;
width: 100vw;
overflow-x: hidden;
}
.chart-equity .chart-canva-equity {
width: 100% !important;
height: 18rem !important;
}
.chart-equity .graph-wrapper .graph-scene {
min-height: auto !important;
}
.comparison-wrapper .selector {
flex-wrap: wrap;
outline: none;
}
.comparison-wrapper .comparison {
padding: 0;
}
.comparison-wrapper .comparison .bars .line-bar div,
.comparison-wrapper .comparison .years-col .year-line {
font-size: 1.2rem;
font-weight: 500;
height: 3rem;
line-height: 3rem;
}
.cs-slider .swiper-button-prev {
left: 0;
}
.cs-slider .swiper-button-next {
right: 0;
}
.chart-wrapper .chart-headers {
justify-content: center;
gap: 2rem;
}
.list-home .elementor-icon-list-items,
.list-home.group .elementor-icon-list-items {
grid-template-columns: 1fr;
}
}
@media (max-width: 500px) {
.cs-slider {
width: 100%;
}
.comparison-wrapper .comparison .comp-wrapper .desc {
min-height: 12rem;
}
.comparison-wrapper .comparison .years-col .vs {
font-size: 1.6rem;
}
.chart-wrapper .chart {
height: 350px !important;
}
.chart-wrapper .chart-headers {
flex-wrap: wrap;
}
.chart-headers ul.filters {
flex: 0 0 100%;
width: 100%;
justify-content: center;
padding: 0;
}
.chart-headers ul.filters li a {
font-size: 1.4rem;
padding: 0 1.6rem;
}
}
@media (max-width: 400px) {
.chart-wrapper .chart-headers .wrap-type label {
font-size: 1.3rem;
}
.chart-wrapper .chart-headers .wrap-type.years label {
padding: 0.5rem 1.4rem;
}
}