@font-face {
  font-family: "TT Firs Neue Trl";
  src: url("../font/TTFirsNeueTrl-Light.woff2") format("woff2"),
    url("../font/TTFirsNeueTrl-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Firs Neue Trl";
  src: url("../font/TTFirsNeueTrl-Bold.woff2") format("woff2"),
    url("../font/TTFirsNeueTrl-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Firs Neue Trl";
  src: url("../font/TTFirsNeueTrl-DemiBold.woff2") format("woff2"),
    url("../font/TTFirsNeueTrl-DemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Firs Neue Trl";
  src: url("../font/TTFirsNeueTrl-Medium.woff2") format("woff2"),
    url("../font/TTFirsNeueTrl-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Firs Neue Trl";
  src: url("../font/TTFirsNeueTrl-Regular.woff2") format("woff2"),
    url("../font/TTFirsNeueTrl-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  --primary: #ff3f40;
  --dark: #111111;
  --white: #fff;
  --gray: #4e4c4c;
  --tt: "TT Firs Neue Trl", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-padding-top: 60px;
}
body {
  background-color: #ffffff;
  font-family: var(--tt);
  color: #111111;
}
h1,
h2,
h3,
h4 {
  font-family: var(--tt);
  margin: 0;
}
section {
    overflow-x: clip;
    overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}
a:hover {
  color: inherit;
}
button {
  border: none;
  outline: none;
  background-color: transparent;
}
input {
  background-color: transparent;
  border: none;
  outline: none;
}

p {
  padding: 0;
  margin: 0;
}
.primary-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 16px 10px 16px;
  gap: 10px;
  height: 42px;
  background: var(--primary);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  transition: 0.3s ease-in-out;
}
.primary-btn:hover {
  color: var(--white);
  background-color: #d23232;
}
/* Header======== */
.header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 99;
  background-color: var(--white);
}
.navbar {
  width: 100%;
  height: 80px;
}
.navbar-brand {
  max-width: 142px;
  display: inline-block;
}

.custom-toggler {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: end;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.toggler-icon {
  height: 3px;
  border-radius: 4px;
  background-color: var(--dark);
  display: block;
  flex-shrink: 0;
}
.toggler-icon:nth-child(1) {
  width: 26px;
}
.toggler-icon:nth-child(2) {
  width: 20px;
}
.toggler-icon:nth-child(3) {
  width: 16px;
}

.navbar-nav {
  padding: 12px 24px;
  gap: 28px;
  width: 100%;
  justify-content: center;
  border-radius: 24px;
}
.nav-link {
  color: var(--dark);
  font-size: 14px;
  letter-spacing: 0.08em;
}
.nav-link:hover,
.nav-link.active {
  color: var(--primary);
}

/* =================================== */
.hero-title {
  font-size: clamp(24px, 3.4vw, 64px);
  line-height: 120%;
  font-weight: 600;
}
.hero-content {
  max-width: clamp(320px, 40vw, 814px);
  margin: 0 auto;
}
.hero-section {
  padding: 100px 0 90px 0;
  overflow: hidden;
  background-image: url(../img/hero-grd.png);
  background-position: bottom center;
  background-size:cover;
  background-repeat: no-repeat;
}
.text-lg {
  font-size: 20px;
  line-height: 150%;
  color: var(--gray);
}
.hero-text {
  max-width: 600px;
}
.mobile-device {
  max-width: 430px;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 430/870;
}
.mobile-device img {
  width: 100%;
  position: relative;
  z-index: 1;

}
.video-wrapper{
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  background-color: var(--primary);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 70px;
  overflow: hidden;
    user-select: none;
  pointer-events: none;
}
.mobile-device video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.background-wave {
  width: 150%;
  border-radius: 100%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translate(-50%, -0%);
  z-index: -1;
}
.wave-border{
 border: 1px solid rgba(255, 63, 63, 0.1);
}
.wave-innar{
  border-radius: 100%;
  aspect-ratio: 1/1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.wave-innar.inner-1{
  width:90%;
}
.wave-innar.inner-2{
  width:77%;
}
.wave-innar.inner-3{
  width:65%;
}
.wave-innar.inner-4{
  width:53%;
}
.wave-item{
  width: 90px;
  height: 90px;
  border-radius:90px;
  position: absolute;
  animation: shake infinite 2s linear;
}
.wave-item .avatar{
  width: 100%;
}
.item-top-1{
  animation-direction: alternate;
}
.item-top-2{
  animation-direction: alternate-reverse;
}
.item-top-3{
  animation-direction: alternate-reverse;
  animation-delay: .5s;
}
.item-top-4{
  animation-direction: alternate;
    animation-delay: .5s;
}
.item-top-5{
  animation-direction: alternate-reverse;
  animation-delay:.3s;
}
.item-top-6{
  animation-direction: alternate;
}
.item-top-51{
  animation-direction: alternate-reverse;
}
.item-top-61{
  animation-direction: alternate;
  animation-delay:.3s;
}
.item-top-7{
  animation-direction: alternate;
}
.item-top-8{
  animation-direction: alternate-reverse;
}
.item-top-71{
  animation-direction: alternate;
}
.item-top-81{
  animation-direction: alternate-reverse;

}
.item-top-9{
  animation-direction: alternate;
  animation-delay:.5s;
}
.item-top-10{
  animation-direction: alternate-reverse;
  animation-delay:.5s;

}

.imo{
  width: 40px;
  height:auto;
  position: absolute;
  right: -10px;
  bottom:5px;
}

@keyframes shake {
  0%{
    transform: translate(-3px, -3px) scale(1);
  }
  100%{
    transform: translate(3px, 3px) scale(.98);
  }
  
}
.wave-item.item-top-1{
  top:3.5%;
  left: 27%;
}
.wave-item.item-top-2{
  top:3.5%;
  right: 27%;
}
.wave-item.item-top-3{
  top:8.4%;
  left: 17.4%;
}
.wave-item.item-top-4{
  top:8.4%;
  right: 17.4%;
}
.wave-item.item-top-5{
  top:3%;
  left: 26.4%;
}
.wave-item.item-top-6{
  top:3%;
  right: 26.4%;
}
.wave-item.item-top-51{
  top:18%;
  left: 8%;
}
.wave-item.item-top-61{
  top:18%;
  right: 8%;
}
.wave-item.item-top-7{
  top:2%;
  left: 25%;
}
.wave-item.item-top-8{
  top:2%;
  right: 25%;
}
.wave-item.item-top-71{
  top:30%;
  left: 1%;
}
.wave-item.item-top-81{
  top:30%;
  right: 1%;
}
.wave-item.item-top-9{
  top:12%;
  left:11%;
}
.wave-item.item-top-10{
  top:12%;
  right:11%;
}
.joiner-section{
  padding: 45px 0;
  background-color: var(--white);
}
.total-count{
  font-size: 32px;
  font-weight: 600;
  color: var(--primary);
}
.join-counter{
  max-width: 150px;
  min-width:60px;
  border-right: 1px solid #E9EBED;
}
.join-counter p{
  font-size: 16px;
  color: var(--gray);
}
.swipper-wrapper{
  padding:0;
  overflow-x:hidden;
}
.joinList .swiper-slide{
  max-width: 270px;
}
.joinList .swiper-wrapper {
  transition-timing-function: linear !important;
}
.j-avatar{
  width: 66px;
  height: 66px;
  border-radius: 70px;
  overflow: hidden;
  outline:inset 2px solid var(--white);
}
.joiner-card{
  display: flex;
  align-items: center;
  gap: 14px;
}
.j-avatar img{
  width: 100%;
}
.joiner-details h3{
  font-size: 20px;
  font-weight: 500;
}
.joiner-details p{
  font-size:15px;
  color: var(--gray);
}
.feature-section{
  padding:106px 0px;
}
.feature-content{
  padding-bottom: 100px;
}
.illustrator{
  width: 100%;
  max-width: 680px;
  aspect-ratio: 1/1;
}
.illustrator img{
  width: 100%;
}
.f-content{
  width: 100%;
  max-width: 770px;
  margin-left: auto;
  margin-right: 0;
}
.content-item{
  padding: 16px 36px;
  border-left: 2px solid #E9EBED;
  transition: .3s ease;
}
.content-item.active{
  border-color: var(--primary);
  transition: .3s ease;
}
.content-item h3{
  font-size:30px;
  font-weight: 600;
}
.content-item p{
  font-size:18px;
  color: var(--gray);
  margin-top: 8px;
}
.video-section{
  padding:100px 0px;
}
.video-container{
  margin-top: 100px;
  width: 100%;
  max-width: 1320px;
  aspect-ratio: 16/9;
  background-color: #4e4c4c;
  border-radius: 16px;
  overflow: hidden;
}
.video-container video{
  width:100%;
  height: 100%;
}
.py-100{
  padding: 100px 0;
}
.roadmap-container{
  margin-top: 70px;
}
.roadmap-card{
padding: 30px;
background: rgba(255, 63, 64, 0.08);
border:1px solid #E1E4EA;
border-radius:20px;
height: 100%;
}
.indcator{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 20px;
border-radius:30px;
text-align: center;
font-size:18px;
}
.indcator.green{
  background-color: #34C759;
  color: var(--white);
}
.indcator.yellow{
  background-color: #FFCC00;
  color: var(--gray);
}
.indcator.white{
  background-color: #fff;
  color: var(--gray);
}
.ri{
  width:70px;
}
.road-map-content{
  margin-top: 160px;
}
.road-map-content h3{
  margin-bottom: 18px;
  font-size: 30px;
}
.bg-support{
  width: 144px;
  position: absolute;
}
.bg-support.img-1{
 top:20px;
 left: auto;
 right: -30px;
}
.bg-support.img-2{
 bottom:-10px;
 left: -70px;
 right: auto;
}
.cta-container{
  border-radius: 30px;
  background-color: #FF3F40;
  padding: 80px;
  position: relative;
}
.cta-container::before{
  content: '';
  background-image: url(../img/cta-bg.png);
  background-size:cover;
  background-position: top left;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
  pointer-events: none;
}
.statics-container h3{
  font-size: 50px;
  font-weight: 500;
  color: var(--white);
}
.statics-container p{
  font-size: 20px;
}
.powerd-by h4{
font-size: 42px;
color: var(--gray);
}
.logo-wrapper{
  display: flex;
  align-items: center;
  justify-content:space-between;
  gap: 40px;
  flex-wrap:wrap;
}
.logo-item{
  width: 100%;
  max-width: 230px;
  min-width: 175px;
  flex-grow: 1;
}
.logo-item img{
  width: 100%;
}
.contact-form{
  margin-top: 80px;
width: 100%;
max-width: 560px;
background: #FFFFFF;
border: 1px solid #E9EBED;
box-shadow: 0px 40px 53px rgba(0, 0, 0, 0.15);
border-radius:24px;
padding:24px;
}
.form-input label{
font-size: 16px;
margin-bottom: 8px;
}
.form-input input{
  width: 100%;
padding: 12px 16px;
height: 50px;
background: #FFFFFF;
border: 1px solid #C1C1C1;
border-radius: 8px;
font-size: 18px;
}
.three-d-img{
width: 200px;
position: absolute;
z-index: -1;
}
.three-d-img.img-1{
top: 0;
left: -50px;
}
.three-d-img.img-2{
bottom: 60px;
right: -30px;
}

.footer{
  padding: 40px 0;
  background-color: var(--dark);
}
.f-logo{
  max-width: 189px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-logo img{
  width: 100%;
}
.f-nav{
  display: flex;
  align-items: center;
}
.f-nav .nav-item .nav-link{
  font-size: 20px;
  color: var(--white);
}
.social-links{
  display: flex;
  align-items: center;
  gap: 16px;
}
.s-link{
  width: 48px;
  height: 48px;
  border-radius: 50px;
  background-color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s linear;
}
.s-link:hover{
background-color: var(--primary);
}
.s-link img{
  width: 54%;
}
hr {
    margin: 1rem 0;
    color: inherit;
    background-color:#E9EBED;
    border: 0;
    opacity: .25;
}
.fs-link p, .fs-link a{
  color: var(--white);
  font-size: 14px;
  display: block;
  font-weight: 400;
}