@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --page-default-background: #ffffff;
  --primary-color: #8763ff;
  --secondary-color: #a2b0ff;
  --font-primary: 'Inter', 'Arial';
  --h1-font-size: 5.33vw;         /* 80px */
  --h2-font-size: 3.26vw;         /* 48.83px */
  --h3-font-size: 2.60vw;         /* 39.06px */
  --h4-font-size: 2.08vw;         /* 31.25px */
  --h5-font-size: 1.67vw;         /* 25.01px */
  --h6-font-size: 1.33vw;         /* 20px*/
  --p-font-size: 1.07vw;          /* 16px */
  --small-font-size: 0.93vw;      /* 14px */
  --smaller-font-size: 0.85vw;    /* 12.8px  */
  --smallest-font-size: 0.68vw;   /* 10.24px */
}


html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-primary);
  background: var(--page-default-background);
  color: #000000;
  scroll-behavior: smooth;
  /* cursor: url('/Assets/cursor1.svg'), auto; */
}
.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  gap: 3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2340ff;
  z-index: 9999;
  padding-bottom: 5vh;
}
.loader-container h2{
  font-weight: 500;
}
.loader {
  position: relative;
  /* margin-bottom: 7.5vh; */
  border-radius: 20%;
  background: #fff;
  animation: wave 1.5s ease-in-out infinite;
}

.NotSuported{
  display: none;
}

@keyframes wave {
 0% {  box-shadow:
  0 0 0 0px rgba(255, 255,255, 1),
  0 0 0 10px rgba(255, 255,255, 0.2),
  0 0 0 20px rgba(255, 255,255, 0.6),
  0 0 0 30px rgba(255, 255,255, 0.4),
  0 0 0 40px rgba(255, 255,255, 0.2)
  }
  100% {  box-shadow:
    0 0 0 40px rgba(255, 255,255, 0),
    0 0 0 30px rgba(255, 255,255, 0.2),
    0 0 0 20px rgba(255, 255,255, 0.4),
    0 0 0 10px rgba(255, 255,255, 0.6),
    0 0 0 0px rgba(255, 255,255, 1)
  }
}


  

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

::-webkit-scrollbar {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1 {
  font-size: var(--h1-font-size);
  max-width: 47.7vw;
  line-height: 5.67vw;
  overflow: visible;
}

h2 {
  font-size: var(--h2-font-size);
  letter-spacing: -0.12rem;
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
  color: #ffffff;
  font-weight: 500;
}

h5 {
  font-size: var(--h5-font-size);
  color: #FE9611;
}

h6 {
  font-size: var(--h6-font-size);
  color: #FE9611;
}

p {
  font-size: var(--p-font-size);
}

.small {
  font-size: var(--small-font-size);
}

.smaller {
  font-size: var(--smaller-font-size);
}
.smallest {
  font-size: var(--smallest-font-size);
}
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5vh 4vw;
  z-index: 1000;
  color: #7C7C7C;
  font-weight: 300;
  background: linear-gradient(180deg, white, #ffffff00);
  font-size: 0.9vw;
}
.nav-logo{
  display: flex;
}
.nav-logo h4{
  color: white;
}

.favicon{
  width: 3vw;
  height: auto;
  margin-right: 0.7rem;
}

.lsm1{
  letter-spacing: -0.066vw;
}
.lsm05{
  letter-spacing: -0.033vw;
}
.nav-links{
  display: flex;
  gap: 2.13vw;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
}
.nav-buttons{
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.nav-buttons a{
  background: #F0F0F0;
  padding: 0.8vw 1vw;
  border-radius: 10rem;
  font-weight: 600;
  font-size: 0.933vw;
}
.nav-buttons a:nth-child(2){
  margin-left:  0.533vw;
  color: white;
  background: #5792FF;
}

.lsm2{
  letter-spacing: -0.13vw;
}
.hero{
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.heroContent{
  margin-top: -10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* background: #482600; */
}
.hero h1{
  background: linear-gradient(180deg, #6C6C6C, #999999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  letter-spacing: -0.2vw;
  margin: 1.06vw 0;
}
.subH{
  max-width: 22.2vw;
  color: #8F8F8F;
  font-size: 0.87vw;
  margin-bottom: 2.133vw;
}
.heroCTA{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.533vw;
}
.heroCTA a{
  background: #F0F0F0;
  color: #757575;
  padding: 0.8vw 1vw;
  border-radius: 10rem;
  font-weight: 600;
  font-size: 1.06vw;
}
.heroCTA a:nth-child(2){
  color: white;
  background: #5792FF;
}

.hero .smallest{
  color: #868686;
  margin-top: 0.533vw;
  letter-spacing: -0.02vw;
}

.appIntro{
  margin: 5vh 0;
  height: max-content;
  width: 23vw;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.heroIMG{
  width: 22vw;
  position: absolute;
}

.appIntroContent img{
  position: absolute;
}
.t01{
  width: 12.63vw;      /* 189.4px / 1500px * 100 */
  height: 3.55vw;      /* 53.29px / 1500px * 100 */
  left: -17.13vw;
  top: 5.33vw;
}
.t02{
  width: 12.49vw;      /* 187.4px / 1500px * 100 */
  height: 9.02vw;      /* 135.26px / 1500px * 100 */
  left: -22vw;
  top: 15.53vw;
}
.t03{
  width: 10.21vw;      /* 153.2px / 1500px * 100 */
  height: 3.01vw;      /* 45.18px / 1500px * 100 */
  left: -16.6vw;
  top: 31.87vw;
}
.t04{
  width: 9.03vw;       /* 135.4px / 1500px * 100 */
  height: 3.55vw;      /* 53.29px / 1500px * 100 */
  right: -13vw;
  top: 5vw;
}
.t05{
  width: 13.91vw;      /* 208.72px / 1500px * 100 */
  height: 4.26vw;      /* 63.95px / 1500px * 100 */
  right: -20.53vw;
  top: 13.33vw;
}
.t06{
  width: 6.85vw;       /* 102.8px / 1500px * 100 */
  height: 2.22vw;      /* 33.36px / 1500px * 100 */
  right: -21.27vw;
  top: 20vw;
}
.t07{
  width: 9.12vw;       /* 136.78px / 1500px * 100 */
  height: 7.16vw;      /* 107.47px / 1500px * 100 */
  right: -15.33vw;
  top: 27.4vw;
}
.hGc1{
  position: absolute;
  width: 41vw;
  height: 41vw;
  border-radius: 50%;
  background: #fff7e9;
  left: -20.13vw;
  z-index: -1;
  top: 25vh;
  filter: blur(6.7vw);
}
.hGc2{
  position: absolute;
  width: 41vw;
  height: 41vw;
  background: #e2f0ff;
  border-radius: 50%;
  right: -26.7vw;
  top: -25vh;
  z-index: -1;
  filter: blur(6.7vw);
}



.section02{
  margin: 100vh 4vw 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.133vw;
}

.s02content{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10.4vw;
}

.s02text{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6vw;
  margin-bottom: 2.133vw;
}
.S02H{
  width: 43.867vw;
}
.S02img{
  width: 29.73vw;
}

.s02cta{
  width: 10.53vw;
}

.s02text img{
  width: 24.333vw
}

.s2gc{
  width: 91vw;
  height: 91vw;
  border-radius: 50%;
  background: #eefff3;
  position: absolute;
  z-index: -1;
  filter: blur(181px);
}

.section03{
  margin: 40vh 4vw 1vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  
}
.S03C{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.3vw;
  margin-top: 2.13vw;
}
.S03H{
  width: 75.93vw;
  height: auto;
}
.S03C img{
  width: 22.8vw;
  height: auto;
}
.section04{
  margin: 50vh 0 40vh;
  display: flex;
  align-items: center;
  justify-content: center; 
  gap: 11vw;
}
.s04img{
  width: 19.4vw;
  height: auto;
}

.S04C{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}
.S04C img{
  width: 20.733vw;
}

.carousel-container {
  width: 100%;
  position: relative;
  
}
.carousel-track{
  display: flex;
  margin: 0vh 0 45vh;
  gap: 5vw;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.carousel-container::before,
.carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10vw;
    z-index: 10;
    pointer-events: none;
}
.carousel-container::before {
    left: 0;
    background: linear-gradient(to right, #f8fafc, transparent);
}

.carousel-container::after {
    right: 0;
    background: linear-gradient(to left, #f8fafc, transparent);
}
.carousel-track img{
  height: 11.66vw;
}
.CtaSection{
  margin: 0 4vw 10vh;
  padding: 12vw 2.667vw;
  background: linear-gradient(180deg, #2164FF, #83A8FF);
  border-radius: 2.667vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.CtaSection h2{
  color: #ffffff;
  font-weight: 500;
  width: 36vw;
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: -0.1vw;
}
.CtaSection p{
  color: #ffffff;
  opacity: 0.8;
  font-weight: 300;
  font-size: 1vw;
  margin-bottom: 2rem;
}

.ctabutton{
  width: 15.6vw;
  margin-bottom: 1rem;
}
.ctadec{
  width: 22.27vw;
}
footer img{
  width: 100%;
}
footer{
  margin: 10vw 1.2vw 1vw;
}

@media (width < 700px){
.loader-container {
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 20vh;
}
.loader-container h2 {
  font-size: 2rem;
}
.NotSuported{
  display: block;
  position: absolute;
  bottom: 30vh;
  left: 50%;
  line-height: 1.1;
  transform: translateX(-50%);
  color: rgb(255, 255, 255);
  font-size: 1.5rem;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.05rem;
}

.NotSuported p{
  font-size: 0.5rem;
  white-space: nowrap;
  font-weight: 300;
  letter-spacing: -0.01rem;
  margin-top: 1rem;
}
}