body {
  --white: #fafafa;
  --black: #3b3b3b;
  --dominant: #ed343e;
  --support: #231f20;
  --texInputErr: #ff0000;
  --bgInputErr: #fdeaeb;
  --bgFeedWar: #f3e2ba;
  --borFeeWar: #fdb923;
  --texFeeWar: #664b08;
  --bgFeeFai: #f6cbcb;
  --texFeeFai: #ed343e;
  --bgFeeSuc: #d0ecd3;
  --borFeeSuc: #46b450;
  --texFeeSuc: #153718;
  --graph1: #ffffff;
  --graph2: #f0f0f0;
  --graph3: #343132;
  --bgSec: linear-gradient(
    to bottom,
    var(--white) 0%,
    #231f20 49%,
    var(--white) 100%
  );
  --shadows: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
  --pureWhite: #ffffff;
  --pureBlack: #000000;
  background: linear-gradient(var(--white), var(--sideMain));
  height: auto;
}

body.redtheme {
  --dominant: #f7524a;
  --support: #b65e62;
  --sideMain: #fce1e0;
  --contact: rgba(247, 82, 74, 0.08);
  --loader: rgba(247, 82, 74, 0.64);
  --bgSec: linear-gradient(
    to bottom,
    var(--white) 0%,
    #fcc9c7 49%,
    var(--white) 100%
  );
  --graph1: #ffa2a2;
  --graph2: #f7524a;
  --graph3: #690500;
  --iso: url(../../assets/img/img/42.png);
  --bnnMov: url(../../assets/img/img/00.png);
  --bnnTab: url(../../assets/img/img/07.png);
  --bnnDes: url(../../assets/img/img/14.png);
  --deviceMov: url(../../assets/img/img/21.png);
  --deviceTab: url(../../assets/img/img/28.png);
  --deviceDes: url(../../assets/img/img/35.png);
  --deviceDesFea: url(../../assets/img/img/51.png);
}

body.orangetheme {
  --dominant: #f8a78c;
  --support: #c98f69;
  --sideMain: #fcefea;
  --contact: rgba(248, 167, 140, 0.08);
  --loader: rgba(248, 167, 140, 0.64);
  --bgSec: linear-gradient(
    to bottom,
    var(--white) 0%,
    #fbd6ca 49%,
    var(--white) 100%
  );
  --graph1: #f8a78c;
  --graph2: #ff774a;
  --graph3: #690500;
  --iso: url(../../assets/img/img/43.png);
  --bnnMov: url(../../assets/img/img/01.png);
  --bnnTab: url(../../assets/img/img/08.png);
  --bnnDes: url(../../assets/img/img/15.png);
  --deviceMov: url(../../assets/img/img/22.png);
  --deviceTab: url(../../assets/img/img/29.png);
  --deviceDes: url(../../assets/img/img/36.png);
  --deviceDesFea: url(../../assets/img/img/52.png);
}

body.purpletheme {
  --dominant: #9c70e8;
  --support: #b456ae;
  --sideMain: #ede6fa;
  --contact: rgba(156, 112, 232, 0.08);
  --loader: rgba(156, 112, 232, 0.64);
  --bgSec: linear-gradient(
    to bottom,
    var(--white) 0%,
    #d0bcf4 49%,
    var(--white) 100%
  );
  --graph1: #d0aefd;
  --graph2: #a979fc;
  --graph3: #371880;
  --iso: url(../../assets/img/img/44.png);
  --bnnMov: url(../../assets/img/img/02.png);
  --bnnTab: url(../../assets/img/img/09.png);
  --bnnDes: url(../../assets/img/img/16.png);
  --deviceMov: url(../../assets/img/img/23.png);
  --deviceTab: url(../../assets/img/img/30.png);
  --deviceDes: url(../../assets/img/img/37.png);
  --deviceDesFea: url(../../assets/img/img/53.png);
}

body.bluetheme {
  --dominant: #399ded;
  --support: #5179a7;
  --sideMain: #ddedfa;
  --contact: #fed6d6;
  --contact: rgba(57, 157, 237, 0.08);
  --loader: rgba(57, 157, 237, 0.64);
  --bgSec: linear-gradient(
    to bottom,
    var(--white) 0%,
    #a2d1f6 49%,
    var(--white) 100%
  );
  --graph1: #9fcdfe;
  --graph2: #399ded;
  --graph3: #002b53;
  --iso: url(../../assets/img/img/45.png);
  --bnnMov: url(../../assets/img/img/03.png);
  --bnnTab: url(../../assets/img/img/10.png);
  --bnnDes: url(../../assets/img/img/17.png);
  --deviceMov: url(../../assets/img/img/24.png);
  --deviceTab: url(../../assets/img/img/31.png);
  --deviceDes: url(../../assets/img/img/38.png);
  --deviceDesFea: url(../../assets/img/img/54.png);
}

body.ciantheme {
  --dominant: #62a5aa;
  --support: #509da7;
  --sideMain: #e4efef;
  --contact: rgba(98, 165, 170, 0.08);
  --bgSec: linear-gradient(
    to bottom,
    var(--white) 0%,
    #b8d6d8 49%,
    var(--white) 100%
  );
  --graph1: #bae6e4;
  --graph2: #62a5aa;
  --graph3: #2f5457;
  --iso: url(../../assets/img/img/46.png);
  --bnnMov: url(../../assets/img/img/04.png);
  --bnnTab: url(../../assets/img/img/11.png);
  --bnnDes: url(../../assets/img/img/18.png);
  --deviceMov: url(../../assets/img/img/25.png);
  --deviceTab: url(../../assets/img/img/32.png);
  --deviceDes: url(../../assets/img/img/39.png);
  --deviceDesFea: url(../../assets/img/img/55.png);
}

body.yellowtheme {
  --dominant: #c6ac3c;
  --support: #9f924e;
  --sideMain: #f4f0dd;
  --contact: rgba(198, 172, 60, 0.08);
  --loader: rgba(198, 172, 60, 0.64);
  --bgSec: linear-gradient(
    to bottom,
    var(--white) 0%,
    #ede5c3 49%,
    var(--white) 100%
  );
  --graph1: #ffe9a3;
  --graph2: #c6ac3c;
  --graph3: #4d3806;
  --iso: url(../../assets/img/img/47.png);
  --bnnMov: url(../../assets/img/img/05.png);
  --bnnTab: url(../../assets/img/img/12.png);
  --bnnDes: url(../../assets/img/img/19.png);
  --deviceMov: url(../../assets/img/img/26.png);
  --deviceTab: url(../../assets/img/img/33.png);
  --deviceDes: url(../../assets/img/img/40.png);
  --deviceDesFea: url(../../assets/img/img/56.png);
}

body.greentheme {
  --dominant: #8bc480;
  --support: #52ab6f;
  --sideMain: #eaf4e9;
  --contact: rgba(139, 196, 128, 0.08);
  --loader: rgba(139, 196, 128, 0.64);
  --bgSec: linear-gradient(
    to bottom,
    var(--white) 0%,
    #cee6c9 49%,
    var(--white) 100%
  );
  --graph1: #bfe1a5;
  --graph2: #8bc480;
  --graph3: #344830;
  --iso: url(../../assets/img/img/48.png);
  --bnnMov: url(../../assets/img/img/06.png);
  --bnnTab: url(../../assets/img/img/13.png);
  --bnnDes: url(../../assets/img/img/20.png);
  --deviceMov: url(../../assets/img/img/27.png);
  --deviceTab: url(../../assets/img/img/34.png);
  --deviceDes: url(../../assets/img/img/41.png);
  --deviceDesFea: url(../../assets/img/img/57.png);
}

* {
  padding: 0;
  margin: 0;
  outline: none;
  font-family: "Segoe UI";
  font-weight: normal;
  font-style: normal;
  border: none;
  text-decoration: none !important;
  list-style: none;
  transition: 0.4s ease-in-out;
  color: var(--black);
}

::-webkit-scrollbar {
  width: 20px;
  display: none;
}

@media (min-width: 768px) {
  ::-webkit-scrollbar {
    display: none;
  }
}

@media (min-width: 1200px) {
  ::-webkit-scrollbar {
    display: block;
  }
}

::-webkit-scrollbar-track {
  background: var(--white);
}

::-webkit-scrollbar-thumb {
  background: var(--dominant);
  border-radius: 100vw;
  border: 5px solid var(--white);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dominant);
}

html {
  scroll-behavior: smooth;
}

p {
  margin-bottom: 0;
}

p::first-letter {
  text-transform: uppercase;
}

svg g path {
  stroke: var(--black);
}

.btnIconTra {
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
}

@media (min-width: 1200px) {
  #btnSideMain {
    display: none;
  }
}

.btnIconTra .icon {
  width: 40px;
  height: 40px;
}

.btnFill {
  padding: 8px 8px 8px 8px;
  font-size: 14px;
  color: var(--pureWhite);
  font-weight: bold;
  text-align: left;
  background: var(--dominant);
  border-radius: 8px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.16);
}

@media (min-width: 1200px) {
  .btnFill:hover {
    transform: scale(1.02);
  }
}

.btnFill .icon {
  display: none;
  width: 24px;
  height: 24px;
  margin: 0px 8px 0px 0px;
}

@media (min-width: 1200px) {
  .btnFill .icon {
    display: block;
  }
}

.btnFill .icon svg g path {
  stroke: var(--pureWhite);
}

.btnFill .tex {
  font-size: 14px !important;
  color: var(--pureWhite) !important;
  font-weight: bold;
  margin: 0px !important;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
}

.img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.tex {
  font-family: "Segoe UI";
}

.tit {
  font-family: VistaSansBold;
}

.device {
  width: 100%;
  height: 628px;
  z-index: 2;
}

@media (min-width: 768px) {
  .device {
    width: 50%;
    height: 588px;
  }
}

@media (min-width: 1200px) {
  .device {
    height: 544px;
  }
}

.one {
  animation-delay: 0.4s;
}

.two {
  animation-delay: 0.8s;
}

.three {
  animation-delay: 1.2s;
}

.four {
  animation-delay: 1.6s;
}

.five {
  animation-delay: 2s;
}

#header {
  width: 100%;
  padding: 16px 24px;
  background: rgba(250, 250, 250, 0.64);
  backdrop-filter: blur(16px);
  position: fixed;
  z-index: 4;
}

@media (min-width: 768px) {
  #header {
    padding: 16px 40px;
  }
}

@media (min-width: 1200px) {
  #header {
    padding: 16px 7%;
  }
}

@media (min-width: 1400px) {
  #header {
    padding: 16px 7%;
  }
}

@media (min-width: 1400px) {
  #header.fixed {
    padding: 8px 7%;
  }
}

@media (min-width: 1200px) {
  #header.fixed {
    padding: 8px 8%;
  }
}

#header.sideMain {
  width: 50%;
}

@media (min-width: 768px) {
  #header.sideMain {
    width: 75%;
  }
}

#headerMain {
  width: auto;
  display: none;
}

@media (min-width: 1200px) {
  #headerMain {
    width: 84%;
    display: flex !important;
    justify-content: flex-end;
  }
}

.navOpt {
  width: auto;
  padding: 8px;
  margin: 0px 8px;
  text-align: center;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
}

.navOpt:last-child {
  margin: 0px 0px 0px 8px;
}

.navOpt:hover {
  background: var(--sideMain);
}

.navOpt.active {
  background: var(--sideMain);
}

.navOpt .icon {
  width: 24px;
  height: 24px;
  margin: 0px 8px 0px 0px;
}

.navOpt .icon svg {
  transform: translate3d(0px, -1px, 0px) !important;
}

#navHome .icon svg {
  transform: translate3d(0px, -3px, 0px) !important;
}

#navCyc .icon svg {
  transform: translate3d(0px, -1px, 0px) scale(1.7) !important;
}

.navOpt .icon svg g path {
  stroke: var(--dominant);
  fill: var(--dominant);
}

.navOpt .tex {
  color: var(--black);
  font-size: 16px;
  font-weight: bold;
}

.navOpt:hover .tex {
  color: var(--dominant);
}

.navOpt.active .tex {
  color: var(--dominant);
}

#navLog {
  width: calc(100% - 48px);
  margin: 0px 8px 0px 0px;
}

@media (min-width: 1200px) {
  #navLog {
    width: 16%;
    margin: 0px;
  }
}

@media (min-width: 1200px) {
  #navLog:hover .tex {
    color: var(--dominant);
  }
}

.opt .img {
  width: 40px;
  height: 40px;
  margin: 0px 8px 0px 0px;
  background-image: var(--iso);
}

#header.sideMain .opt .img {
  width: 0px;
  margin: 0px;
}

@media (min-width: 768px) {
  #header.sideMain .opt .img {
    width: 40px;
    margin: 0px 8px 0px;
  }
}

.opt .tex {
  width: calc(100% - 72px);
  color: var(--black);
  font-size: 22px;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#header.sideMain .opt .tex {
  width: 100%;
}

@media (min-width: 768px) {
  #header.sideMain .opt .tex {
    width: auto;
  }
}

#sideMain {
  width: 50%;
  height: 100%;
  padding: 32px 16px 16px;
  background: var(--sideMain);
  position: fixed;
  right: -100%;
  box-shadow: -8px 0px 24px rgba(0, 0, 0, 0.16);
  z-index: 5;
}

@media (min-width: 768px) {
  #sideMain {
    width: 25%;
  }
}

#sideMain.active {
  right: 0;
}

#logSideMain svg {
  float: right;
  transform-origin: 100% 50%;
  transform: scale(1.4);
  margin: 0px 0px 24px;
}

#logSideMain svg g path {
  stroke: transparent;
}

#logSideMain svg g g g path:nth-child(1) {
  fill: var(--dominant  )
}

#logSideMain svg g g g path:nth-child(2) {
  fill: var(--support)
}

#logSideMain {
  margin: 0px 0px 24px 0px;
}

#sideMain .optSD {
  width: 100%;
  margin: 0px 0px 16px 0px;
}

.optSD.active {
  padding: 4px 8px 8px;
  background: var(--white);
  border-radius: 8px;
}

#sideMain .optSD .icon {
  width: 24px;
  height: 24px;
  margin: 0px 16px 0px 0px;
}

#icoSDCycle svg {
  transform: translate3d(0px, 0px, 0px) scale(1.7) !important;
}

#sideMain .optSD .icon svg g path {
  stroke: var(--support);
}

#sideMain .optSD.active svg g path {
  stroke: var(--dominant);
}

#sideMain .optSD .tex {
  color: var(--support);
  font-size: 14px;
  text-align: right;
  width: calc(100% - 40px);
  font-weight: bold;
}

#sideMain .optSD.active .tex {
  color: var(--dominant);
}

#icoCycle svg {
  transform: translate3d(0px, -2px, 0px) scale(1.7) !important;
}

#navSDCyc.active #icoCycle svg {
  transform: translate3d(0px, 0px, 0px) scale(1.7) !important;
}

#btnMoreInf .tex {
  text-align: center;
  width: 100%;
}

#btnMoreInf {
  width: calc(100% - 32px);
  position: absolute;
  bottom: 16px;
}

#main {
  width: 100%;
  height: auto;
  margin: 0px auto;
  padding: 0px;
}

#banner {
  width: 100%;
  padding: 120px 24px 0px;
}

@media (min-width: 768px) {
  #banner {
    padding: 136px 40px 0px;
  }
}

@media (min-width: 1200px) {
  #banner {
    padding: 104px 7% 0px;
  }
}

@media (min-width: 1400px) {
  #banner {
    padding: 164px 16% 0px;
  }
}

#bnnClmn1 {
  width: 100%;
  height: auto;
  margin: 0px 0px 40px;
}

@media (min-width: 1200px) {
  #bnnClmn1 {
    width: 50%;
    padding: 0px 120px 0px 64px;
    margin: 0px;
  }
}

#bnnClmn1 .tit {
  color: var(--dominant);
  font-size: 42px;
  text-align: center;
  text-transform: capitalize;
  margin: 0px 0px 16px;
}

@media (min-width: 1200px) {
  #bnnClmn1 .tit {
    text-align: left;
  }
}

#bnnClmn1 .tex {
  color: var(--black);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  margin: 0px 0px 24px 0px;
}

@media (min-width: 1200px) {
  #bnnClmn1 .tex {
    width: auto;
    text-align: left;
  }
}

#btnToSubscribe {
  width: 102px;
  margin: 0px auto;
}

@media (min-width: 1200px) {
  #btnToSubscribe {
    width: 138px;
    margin: 0px;
  }
}

#bnnClmn2 {
  width: 100%;
  height: 668px;
  padding: 416px 0px 0px 0px;
  background-position: top center;
  background-size: contain;
  background-image: var(--bnnMov);
}

@media (min-width: 768px) {
  #bnnClmn2 {
    height: 560px;
    padding: 344px 0px 0px 0px;
    background-image: var(--bnnTab);
  }
}

@media (min-width: 1200px) {
  #bnnClmn2 {
    width: 50%;
    height: 442px;
    padding: 280px 0px 0px 0px;
    background-image: var(--bnnDes);
  }
}

#description {
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 24px;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.16);
}

@media (min-width: 768px) {
  #description {
    width: 44%;
    margin: 0px auto;
  }
}

@media (min-width: 1200px) {
  #description {
    width: 100%;
    margin: 0px auto;
  }
}

#description .tex {
  color: var(--black);
  font-size: 18px;
  text-align: center;
}

#functions {
  width: 100%;
  padding: 120px 24px 0px;
}

@media (min-width: 768px) {
  #functions {
    padding: 120px 0px 0px;
  }
}

@media (min-width: 1200px) {
  #functions {
    padding: 120px 0px 0px;
  }
}

@media (min-width: 1400px) {
  #functions {
    padding: 184px 0px 0px;
  }
}

@media (min-width: 1800px) {
  #functions {
    padding: 224px 0px 0px;
  }
}

#funcClmn1 {
  width: 100%;
  margin: 0px 0px 40px 0px;
  position: sticky;
  top: 112px;
  z-index: 1;
}

@media (min-width: 768px) {
  #funcClmn1 {
    width: 50%;
    padding: 0px 64px 0px 40px;
    margin: 0px;
    top: 496px;
  }
}

@media (min-width: 1200px) {
  #funcClmn1 {
    width: 50%;
    padding: 0px 7% 0px 120px;
    margin: 0px 0px 0px 50%;
    top: 320px;
  }
}

@media (min-width: 1400px) {
  #funcClmn1 {
    padding: 0px 16% 0px 120px;
    top: 440px;
  }
}

#funcClmn1 .tit {
  width: 100%;
  color: var(--black);
  font-size: 24px;
  text-align: center;
}

@media (min-width: 768px) {
  #funcClmn1 .tit {
    text-align: left;
  }
}

@media (min-width: 1200px) {
  #funcClmn1 .tit {
    text-align: right;
  }
}

#device1 {
  background-image: var(--deviceMov);
  background-position: top center;
  background-size: contain;
  position: sticky;
  top: 228px;
}

@media (min-width: 768px) {
  #device1 {
    background-image: var(--deviceTab);
    background-position: left center;
    background-size: cover;
    top: 228px;
  }
}

@media (min-width: 1200px) {
  #device1 {
    margin: 0px 50% 0px 0px;
    background-image: var(--deviceDes);
    background-position: right center;
    background-size: cover;
    top: 80px;
  }
}

@media (min-width: 1400px) {
  #device1 {
    top: 200px;
  }
}

@media (min-width: 1800px) {
  #device1 {
    background-size: contain;
  }
}

#funcClmn2 {
  width: 100%;
  margin: 0px;
  text-align: center;
}

@media (min-width: 768px) {
  #funcClmn2 {
    width: 50%;
    padding: 0px 88px 0px 48px;
    margin: 0px 0px 0px 50%;
  }
}

@media (min-width: 1200px) {
  #funcClmn2 {
    padding: 0px 104px 0px 280px;
    margin: 0px 50% 0px 0px;
  }
}

@media (min-width: 1400px) {
  #funcClmn2 {
    padding: 0px 164px 0px 340px;
  }
}

@media (min-width: 1800px) {
  #funcClmn2 {
    padding: 0px 144px 0px 488px;
  }
}

.functions {
  width: 100%;
  max-width: 369px;
  margin: 0px auto 24px;
  padding: 24px;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.16);
  text-align: center;
  position: sticky;
  top: 344px;
  z-index: 3;
  opacity: 1;
}

@media (min-width: 768px) {
  .functions {
    max-width: 248px;
    top: 380px;
  }
}

@media (min-width: 1200px) {
  .functions {
    max-width: 289px;
    top: 218px;
  }
}

@media (min-width: 1400px) {
  .functions {
    max-width: 319px;
    top: 338px;
  }
}

.functions.disabled {
  opacity: 0;
}

.functions .img {
  height: 104px;
  margin: 0px auto 16px;
}

.functions .tex {
  width: 100%;
  color: var(--black);
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}

@media (min-width: 768px) {
  #func6 .tex {
    font-size: 16px;
  }
}

#features {
  width: 100%;
  padding: 120px 24px 0px;
}

@media (min-width: 768px) {
  #features {
    padding: 120px 0px 0px;
  }
}

@media (min-width: 1200px) {
  #features {
    padding: 120px 0px 0px;
  }
}

@media (min-width: 1400px) {
  #features {
    padding: 184px 0px 0px;
  }
}

@media (min-width: 1800px) {
  #features {
    padding: 224px 0px 0px;
  }
}

#feaClmn1 {
  width: 100%;
  margin: 0px 0px 40px 0px;
  position: sticky;
  top: 112px;
  z-index: 1;
}

@media (min-width: 768px) {
  #feaClmn1 {
    width: 50%;
    padding: 0px 40px 0px 64px;
    margin: 0px 0px 0px 50%;
    top: 496px;
  }
}

@media (min-width: 1200px) {
  #feaClmn1 {
    width: 50%;
    padding: 0px 120px 0px 7%;
    margin: 0px 50% 0px 0px;
    top: 320px;
  }
}

@media (min-width: 1400px) {
  #feaClmn1 {
    width: 50%;
    padding: 0px 120px 0px 16%;
    top: 440px;
  }
}

#feaClmn1 .tit {
  width: 100%;
  color: var(--black);
  font-size: 24px;
  text-align: center;
}

@media (min-width: 768px) {
  #feaClmn1 .tit {
    text-align: right;
  }
}

#device2 {
  background-image: var(--deviceMov);
  background-position: top center;
  background-size: contain;
  position: sticky;
  top: 228px;
}

@media (min-width: 768px) {
  #device2 {
    background-image: var(--deviceTab);
    background-position: right center;
    background-size: cover;
    top: 228px;
  }
}

@media (min-width: 1200px) {
  #device2 {
    margin: 0px 0px 0px 50%;
    background-image: var(--deviceDesFea);
    background-position: left center;
    background-size: cover;
    top: 80px;
  }
}

@media (min-width: 1400px) {
  #device2 {
    top: 200px;
  }
}

@media (min-width: 1800px) {
  #device2 {
    background-size: contain;
  }
}

#feaClmn2 {
  width: 100%;
  margin: 0px;
  text-align: center;
}

@media (min-width: 768px) {
  #feaClmn2 {
    width: 50%;
    padding: 0px 48px 0px 88px;
    margin: 0px 50% 0px 0px;
  }
}

@media (min-width: 1200px) {
  #feaClmn2 {
    width: 50%;
    padding: 0px 336px 0px 32px;
    margin: 0px 0px 0px 50%;
  }
}

@media (min-width: 1400px) {
  #feaClmn2 {
    width: 50%;
    padding: 0px 480px 0px 24px;
  }
}

@media (min-width: 1800px) {
  #feaClmn2 {
    width: 50%;
    padding: 0px 624px 0px 24px;
  }
}

.feature {
  width: 100%;
  max-width: 363px;
  margin: 0px auto 24px;
  padding: 24px;
  background: var(--white);
  border-width: 2px;
  border-style: solid;
  border-radius: 8px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.16);
  position: sticky;
  top: 344px;
  z-index: 3;
}

@media (min-width: 768px) {
  .feature {
    max-width: 248px;
    top: 460px;
  }
}

@media (min-width: 1200px) {
  .feature {
    max-width: 305px;
    height: 223px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    border-bottom-left-radius: 32px;
    top: 112px;
  }
}

@media (min-width: 1400px) {
  .feature {
    max-width: 302px;
    top: 216px;
  }
}

@media (min-width: 1800px) {
  .feature {
    max-width: 302px;
    top: 200px;
  }
}

.feature.disabled {
  opacity: 0;
}

.feature .name {
  width: 100%;
  height: auto;
  margin: 0px 0px 16px;
}

.feature .name .tit {
  font-size: 18px;
  text-align: left;
  margin: 0px 8px 0px 0px;
  width: 72%;
}

.feature .name .code {
  padding: 4px;
  color: var(--black);
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}

.feature .details {
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 16px;
  font-size: 16px;
  text-align: left;
  border-radius: 8px;
}

#feat1 {
  border-color: #f7524a;
}

#feat1 .name .tit {
  color: #f7524a;
}

#feat1 .name .code {
  background: #8bc480;
}

#feat1 .details {
  background: #f7524a;
  color: var(--pureWhite);
}

#feat1 .details strong {
  color: var(--pureWhite);
}

#feat2 {
  border-color: #399ded;
}

#feat2 .name .tit {
  color: #399ded;
}

#feat2 .name .code {
  background: #c6ac3c;
}

#feat2 .details {
  background: #399ded;
  color: var(--pureWhite);
}

#feat2 .details strong {
  color: var(--pureWhite);
}

#feat3 {
  border-color: #c6ac3c;
}

#feat3 .name .tit {
  color: #c6ac3c;
}

#feat3 .name .code {
  background: #8bc480;
}

#feat3 .details {
  background: #c6ac3c;
  color: var(--pureWhite);
}

#feat3 .details strong {
  color: var(--pureWhite);
}

#feat4 {
  border-color: #8bc480;
  margin: 0px auto 51px;
}

#feat4 .name .tit {
  color: #8bc480;
}

#feat4 .name .code {
  background: #c6ac3c;
}

#feat4 .details {
  background: #8bc480;
  color: var(--pureWhite);
}

#feat4 .details strong {
  color: var(--pureWhite);
}

#cycle {
  width: 100%;
  padding: 120px 24px 0px;
}

@media (min-width: 768px) {
  #cycle {
    padding: 120px 40px 0px;
  }
}

@media (min-width: 1200px) {
  #cycle {
    padding: 120px 7% 0px;
  }
}

@media (min-width: 1400px) {
  #cycle {
    padding: 184px 16% 0px;
  }
}

#cycClmn1 {
  width: 100%;
  height: auto;
  margin: 0px 0px 40px;
}

@media (min-width: 768px) {
  #cycClmn1 {
    width: 50%;
    height: auto;
    padding: 0px 60px 0px 0px;
    margin: 0px;
  }
}

@media (min-width: 1200px) {
  #cycClmn1 {
    width: 40%;
    padding: 0px 120px 0px 0px;
  }
}

#cycClmn1 .tit {
  width: 100%;
  height: auto;
  margin: 0px 0px 16px;
  color: var(--black);
  font-size: 26px;
  text-align: center;
}

@media (min-width: 768px) {
  #cycClmn1 .tit {
    text-align: left;
  }
}

#cycClmn1 .tex {
  width: 100%;
  color: var(--black);
  font-size: 20px;
  text-align: center;
}

@media (min-width: 768px) {
  #cycClmn1 .tex {
    text-align: left;
  }
}

#cycClmn2 {
  width: 100%;
}

@media (min-width: 768px) {
  #cycClmn2 {
    width: 50%;
  }
}

@media (min-width: 1200px) {
  #cycClmn2 {
    width: 60%;
  }
}

.cycle {
  width: 100%;
  margin: 0px 0px 24px;
}

@media (min-width: 1200px) {
  .cycle {
    display: none;
  }
}

.cycle .step {
  width: 100%;
  height: auto;
  margin: 0px 0px 16px;
  padding: 24px;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.16);
}

.cycle .step .tit {
  color: var(--black);
  font-size: 26px;
  text-align: center;
  margin: 0px 0px 16px;
}

.cycle .step .tex {
  color: var(--black);
  font-size: 18px;
  text-align: center;
}

.cycle .separator {
  width: 16px;
  height: 16px;
  margin: 0px auto;
  background: var(--dominant);
  border-radius: 500px;
  opacity: 0.64;
}

#cycle2 .separator {
  opacity: 0.48;
}

#cycle3 .separator {
  opacity: 0.32;
}

#process {
  display: none;
  width: 100%;
  height: auto;
  padding: 40px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.16);
  justify-content: center;
}

@media (min-width: 1200px) {
  #process {
    display: flex;
    align-items: flex-start;
  }
}

@media (min-width: 1400px) {
  #process {
    padding: 32px;
  }
}

#process .step .tit {
  margin: 0px 0px 8px 0px;
  color: var(--black);
  font-size: 26px;
}

#process .step .tex {
  color: var(--black);
  font-size: 20px;
}

#process .step {
  height: auto;
}

#stepLeft {
  width: 30%;
  text-align: left;
}

#graph {
  width: 32%;
  margin: 0px 24px;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

#graph svg {
  width: 100%;
  height: 100%;
}

#graph svg path {
  stroke: transparent;
}

#graph .a {
  fill: var(--graph3);
}

#graph .b {
  fill: var(--graph2);
}

#graph .c {
  fill: var(--graph1);
}

#stepRight {
  width: 30%;
  text-align: right;
}

#stepCenter {
  width: 100%;
  margin: 24px 0px 0px;
  text-align: center;
}

#contact {
  width: 100%;
  padding: 120px 24px 0px;
}

@media (min-width: 768px) {
  #contact {
    width: 88%;
    padding: 120px 40px 0px;
    margin: 0px auto;
  }
}

@media (min-width: 1200px) {
  #contact {
    width: 80%;
    padding: 120px 7% 0px;
    margin: 0px auto;
  }
}

@media (min-width: 1400px) {
  #contact {
    width: 100%;
    padding: 184px 16% 0px;
  }
}

#conClmn1 {
  width: 100%;
  margin: 0px 0px 40px;
}

@media (min-width: 1200px) {
  #conClmn1 {
    width: 50%;
    height: 323px;
    padding: 0px 120px 0px 64px;
    margin: 0px;
    background: var(--white);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
  }
}

#conClmn1 .tit {
  width: 100%;
  margin: 0 0 8px 0;
  color: var(--black);
  font-size: 26px;
  text-align: center;
  font-family: VistaSansBold;
}

@media (min-width: 1200px) {
  #conClmn1 .tit {
    text-align: left;
  }
}

#conClmn1 .tex {
  width: 100%;
  color: var(--black);
  font-size: 16px;
  text-align: center;
}

@media (min-width: 1200px) {
  #conClmn1 .tex {
    text-align: left;
  }
}

#conClmn2 {
  width: 100%;
  text-align: center;
  justify-content: center;
  position: relative;
}

@media (min-width: 1200px) {
  #conClmn2 {
    width: 50%;
    padding: 16px;
    text-align: left;
    background: var(--contact);
    border: 1px solid var(--graph1);
    border-radius: 16px;
    box-shadow: var(--shadows);
    justify-content: center;
  }
}

#conClmn2 #loadForm {
  display: none;
  width: 100%;
  height: 100%;
  background: var(--loader);
  border-radius: 8px;
  position: absolute;
  z-index: 2;
  justify-content: center;
}

@media (min-width: 1200px) {
  #conClmn2 #loadForm {
    border-radius: 16px;
  }
}

#conClmn2 #loadForm.active svg {
  width: 20% !important;
}

#conClmn2 #loadForm svg g path {
  stroke: var(--support);
}

#conClmn2 #loadForm.active {
  display: flex;
}

#conClmn2 .inputTex {
  width: 100%;
  margin: 0px 0px 8px;
}

@media (min-width: 768px) {
  #conClmn2 .inputTex {
    width: 48%;
    margin: 0px 1% 8px;
  }
}

@media (min-width: 768px) {
  #conClmn2 #messageForm {
    width: 98%;
  }
}

#messageForm {
  margin: 0px 0px 8px !important;
}

#conClmn2 .inputTex.error .inputFeedback {
  opacity: 1;
}

#conClmn2 .inputTex #name {
  text-transform: capitalize;
}

#conClmn2 .inputTex #email {
  text-transform: lowercase;
}

#conClmn2 .inputTex input {
  width: 100%;
  padding: 12px 14px;
  color: var(--black);
  font-size: 16px;
  text-align: left;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: 8px;
}

#conClmn2 .inputTex input::first-letter {
  text-transform: uppercase;
}

#conClmn2 .inputTex.error input {
  color: var(--texInputErr);
  font-weight: bold;
  background: var(--bgInputErr);
  border: 2px solid var(--texInputErr);
}

#conClmn2 .inputTex.error input::placeholder {
  color: var(--texInputErr);
}

#conClmn2 .inputTex input:hover {
  opacity: 1;
}

#conClmn2 .inputTex.error input:hover {
  color: var(--texInputErr);
  font-weight: bold;
  background: var(--bgInputErr);
  border: 2px solid var(--texInputErr);
}

#conClmn2 .inputTex input:focus {
  border: 2px solid var(--dominant);
  opacity: 1;
}

#conClmn2 .inputTex.error input:focus {
  color: var(--black);
  border: 2px solid var(--dominant);
  opacity: 1;
}

#conClmn2 .inputTex.warning input {
  color: var(--texFeeWar);
  font-weight: bold;
  background: var(--bgFeedWar);
  border: 2px solid var(--borFeeWar);
}

#conClmn2 .inputTex.warning input::placeholder {
  color: var(--texFeeWar);
}

#conClmn2 .inputTex.warning input:hover {
  color: var(--texFeeWar);
  font-weight: bold;
  background: var(--bgFeedWar);
  border: 2px solid var(--borFeeWar);
}

#conClmn2 .inputTex.warning input:focus {
  color: var(--black);
  border: 2px solid var(--dominant);
  opacity: 1;
}

#conClmn2 .inputTex textarea {
  width: 100%;
  padding: 12px 14px;
  color: var(--black);
  font-size: 16px;
  text-align: left;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: 8px;
}

#conClmn2 .inputTex.error textarea {
  color: var(--texInputErr);
  font-weight: bold;
  background: var(--bgInputErr);
  border: 2px solid var(--texInputErr);
}

#conClmn2 .inputTex.error textarea::placeholder {
  color: var(--texInputErr);
}

#conClmn2 .inputTex textarea:hover {
  opacity: 1;
}

#conClmn2 .inputTex.error textarea:hover {
  color: var(--texInputErr);
  font-weight: bold;
  background: var(--bgInputErr);
  border: 2px solid var(--texInputErr);
}

#conClmn2 .inputTex textarea:focus {
  border: 2px solid var(--dominant);
  opacity: 1;
}

#conClmn2 .inputTex.error textarea:focus {
  color: var(--black);
  border: 2px solid var(--dominant);
  opacity: 1;
}

#conClmn2 .g-recaptcha {
  width: 100%;
  margin: 0px 0px 24px 0px;
}

#conClmn2 .g-recaptcha div {
  margin: 0 auto;
}

#conClmn2 .g-recaptcha div div {
  border-radius: 8px;
  border: 1px solid var(--dominant);
  height: 78px;
}

#conClmn2 .g-recaptcha div iframe {
  border-radius: 16px;
}

#btnSendSubs {
  width: 40%;
  margin: 0px auto;
  padding: 14px 16px;
  color: var(--pureWhite);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  background: var(--dominant);
  border-radius: 8px;
  cursor: pointer;
}

#btnSendSubs::first-letter {
  text-transform: uppercase;
}

#feedback {
  display: none;
  margin: 16px auto 0 auto;
  padding: 8px 16px;
  border-radius: 8px;
  border-width: 2px;
  border-style: dashed;
}

#feedback.warning {
  display: block;
  background: var(--bgFeedWar);
  border-color: var(--borFeeWar);
}

#feedback.failed {
  display: block;
  background: var(--bgFeeFai);
  border-color: var(--texFeeFai);
}

#feedback.success {
  display: block;
  background: var(--bgFeeSuc);
  border-color: var(--borFeeSuc);
}

#feedback .tex {
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  width: 100%;
}

#feedback.warning .tex {
  color: var(--texFeeWar);
}

#feedback.failed .tex {
  color: var(--texFeeFai);
}

#feedback.success .tex {
  color: var(--texFeeSuc);
}

#footer {
  width: 100%;
  height: auto;
  padding: 120px 24px 40px;
  justify-content: center;
}

@media (min-width: 768px) {
  #footer {
    padding: 120px 40px 40px;
  }
}

@media (min-width: 1400px) {
  #footer {
    padding: 184px 11% 40px;
  }
}

#fooClmn1 {
  width: 100%;
  margin: 0px 0px 24px;
  text-align: center;
}

@media (min-width: 768px) {
  #fooClmn1 {
    width: 16%;
    margin: 0px 16px 0px 0px;
  }
}

#fooClmn1 .img {
  width: 64%;
}

@media (min-width: 768px) {
  #fooClmn1 .img {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  #fooClmn1 .img {
    width: 64%;
  }
}

#fooClmn2 {
  width: 100%;
  margin: 0px 0px 24px;
  text-align: center;
}

@media (min-width: 768px) {
  #fooClmn2 {
    width: 16%;
    margin: 0px 16px;
  }
}

#fooClmn2 .img {
  width: 40%;
}

@media (min-width: 768px) {
  #fooClmn2 .img {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  #fooClmn2 .img {
    width: 64%;
  }
}

#fooClmn3 {
  width: 100%;
  margin: 0px 0px 40px;
}

@media (min-width: 768px) {
  #fooClmn3 {
    width: 24%;
    margin: 0px 16px;
  }
}

@media (min-width: 1200px) {
  #fooClmn3:hover .tex {
    color: var(--dominant);
  }
}

#fooClmn3 .tex {
  width: 100%;
  color: var(--black);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

#footClmn4 {
  width: auto;
  height: auto;
  margin: 0px auto;
  padding: 16px;
  background: var(--dominant);
  border-radius: 8px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.16);
  justify-content: center;
}

@media (min-width: 768px) {
  #footClmn4 {
    width: 30%;
    padding: 16px;
    margin: 0px 0px 0px 16px;
  }
}

@media (min-width: 1200px) {
  #footClmn4 {
    width: 16%;
    margin: 0px 0px 0px 32px;
  }
}

@media (min-width: 1400px) {
  #footClmn4 {
    padding: 16px 16px 20px;
  }
}

#footClmn4 .socMed {
  width: 24px;
  height: 24px;
  margin: 0px 8px;
  background: transparent;
  border-radius: 8px;
}

@media (min-width: 1200px) {
  #footClmn4 .socMed:hover {
    transform: scale(1.08);
  }
}

@media (min-width: 768px) {
  #footClmn4 .socMed {
    margin: 0px 5px;
    background: transparent;
    border-radius: 8px;
  }
}

.socMed .icon {
  width: 100%;
  height: 100%;
  font-size: 24px;
}

.socMed .img {
  width: 100%;
  height: 100%;
}

#toTop {
  width: 46px;
  height: 46px;
  background: var(--dominant);
  border-radius: 500px;
  position: fixed;
  right: 24px;
  bottom: 24px;
  box-shadow: var(--shadows);
  z-index: 90;
  transform-origin: 50% 50%;
  transform: scale(0);
  cursor: pointer;
  opacity: 0;
  justify-content: center;
}

@media (min-width: 1200px) {
  #toTop {
    opacity: 1;
  }
}

#toTop.active {
  transform: scale(1);
}

#toTop svg {
  transform: translate3d(0px, -2px, 0px) scale(0.6) !important;
}

#toTop svg g path {
  stroke: var(--pureWhite);
  stroke-width: 40px;
}

#toTop .img {
  width: 48%;
}