:root,

[data-theme=light] {



    --bt-primary: #0d6efd;



    --bt-black: #000;

    --bt-white: #fff;

    --bt-body-font-family: 'cyregular', Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;

    --bt-body-font-size: 1rem;

    --bt-body-font-weight: 400;

    --bt-body-line-height: 1.5;

    --bt-body-color: #ffffff;

    --bt-body-color-rgb: 255, 255, 255;

    --bt-body-bg: #12112B;

    --bt-body-bg-rgb: 18, 17, 43, 1;

    --bt-border-radius: 0.375rem;

    --bt-border-radius-sm: 0.25rem;

    --bt-border-radius-lg: 0.5rem;

    --bt-border-radius-xl: 1rem;

    --bt-border-radius-xxl: 2rem;

    --bt-border-radius-pill: 50rem;

    --bt-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

    --bt-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

    --bt-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    --bt-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

    --bt-gradient-radial: radial-gradient(47.96% 94.53% at 96.1% 102.18%, #060B4B 0%, rgba(18, 17, 42, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

    --spacing-xxs: calc(var(--spacing-base) * 0.25);

    --spacing-xs: calc(var(--spacing-base) * 0.5);

    --spacing-s: calc(var(--spacing-base) * 0.75);

    --spacing-base: 1rem;

    --spacing-m: calc(var(--spacing-base) * 1.5);

    --spacing-l: calc(var(--spacing-base) * 2);

    --spacing-xl: calc(var(--spacing-base) * 2.5);

    --spacing-xxl: calc(var(--spacing-base) * 3);

    --spacing-huge: calc(var(--spacing-base) * 4);

    --spacing-massive: calc(var(--spacing-base) * 5);

    --fs-xxs: calc(var(--fs-base) * 0.625);

    --fs-xs: calc(var(--fs-base) * 0.75);

    --fs-s: calc(var(--fs-base) * 0.875);

    --fs-base: 1rem;

    --fs-m: calc(var(--fs-base) * 1.125);

    --fs-l: calc(var(--fs-base) * 1.25);

    --fs-xl: calc(var(--fs-base) * 1.5);

    --fs-xxl: calc(var(--fs-base) * 2);



}

.chart{border-radius: 6px;border: 1px solid #007BFF;padding: 20px; background: linear-gradient(180deg, #0F1665 0%, #120E23 100%); text-align: center;}
.chart .btn-primary.active {color: #007BFF;background: #fff;}
.chart canvas{min-height: 240px;}
.chart-statistics{padding: 20px; border-radius: 10px; text-align: left; background:url(../images/chart-statistics.jpg) bottom left no-repeat #fff; height: 100%; background-size: cover;}
.chart-statistics p{font-size: 12px;}
.chart-statistics p:first-child{margin-bottom: 10px;}
.chart-statistics p #current-update{color: #007BFF;font-family: 'cy_extraboldregular'; font-size: 40px;}

@media (prefers-reduced-motion: no-preference) {

    :root {

        scroll-behavior: smooth;

    }

}



body {

    margin: 0;

    font-family: var(--bt-body-font-family);

    font-size: var(--bt-body-font-size);

    font-weight: var(--bt-body-font-weight);

    line-height: var(--bt-body-line-height);

    color: var(--bt-body-color);

    text-align: var(--bt-body-text-align);

    background-color: var(--bt-body-bg);

    -webkit-text-size-adjust: 100%;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}





/* btn css start */

.btn {

    --bt-btn-padding-x: 2rem;

    --bt-btn-padding-y: 0.875rem;

    --bt-btn-font-family: 'cy_semiboldregular', Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;

    --bt-btn-font-size: 1rem;

    --bt-btn-font-weight: 400;

    --bt-btn-line-height: 1.5;

    --bt-btn-color: var(--bt-body-color);

    --bt-btn-hover-color: var(--bt-body-color);

    --bt-btn-bg: transparent;

    --bt-btn-hover-bg: transparent;

    --bt-btn-border-radius: var(--bt-border-radius-pill);

    --bt-btn-disabled-opacity: 0.65;

    display: inline-block;

    padding: var(--bt-btn-padding-y) var(--bt-btn-padding-x);

    font-family: var(--bt-btn-font-family);

    font-size: var(--bt-btn-font-size);

    font-weight: var(--bt-btn-font-weight);

    line-height: var(--bt-btn-line-height);

    color: var(--bt-btn-color);

    text-align: center;

    text-decoration: none;

    vertical-align: middle;

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none;

    border-radius: var(--bt-btn-border-radius);

    background: var(--bt-btn-bg);

    transition: all ease 0.5s;

    border: none;

  }

  .btn:hover {

    color: var(--bt-btn-hover-color);

    background: var(--bt-btn-hover-bg);

  }

  .btn:disabled, .btn.disabled {

    color: var(--bt-btn-disabled-color);

    pointer-events: none;

    background-color: var(--bt-btn-disabled-bg);

    opacity: var(--bt-btn-disabled-opacity);

  }

  .btn-primary {

    --bt-btn-color: #fff;

    --bt-btn-bg: linear-gradient(90deg, #007BFF 0%, #10C6FF 100%);

    --bt-btn-hover-bg: linear-gradient(-90deg, #007BFF 0%, #10C6FF 100%);

    --bt-btn-disabled-color: #fff;

    --bt-btn-disabled-bg: #0d6efd;

    --bt-btn-disabled-border-color: #0d6efd;

  }

  .btn-link {

    --bt-link-color: #007BFF;

    --bt-link-hover-color: #007BFF;

    --bt-btn-font-weight: 400;

    --bt-btn-color: var(--bt-link-color);

    --bt-btn-bg: transparent;

    --bt-btn-hover-color: var(--bt-link-hover-color);

    --bt-btn-disabled-color: #6c757d;

    --bt-btn-disabled-border-color: transparent;

    text-decoration: none;

  }

  .btn-link:focus-visible {

    color: var(--bt-btn-color);

  }

  .btn-link:hover {

    color: var(--bt-btn-hover-color);

  }

  .btn-lg{

    --bt-btn-padding-y: 0.875rem;

    --bt-btn-padding-x: 2rem;

    --bt-btn-font-size: 1.25rem;

  }

  

  .btn-sm {

    --bt-btn-padding-y: 0.5rem;

    --bt-btn-padding-x: 1rem;

    --bt-btn-font-size: 0.875rem;

  }





  .form-control {

    display: block;

    width: 100%;

    padding: 1rem 2rem;

    font-size: var(--fs-m);

    font-weight: 400;

    line-height: 1.5;

    color: #707DB9;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    background-color: #0A091E;

    background-clip: padding-box;

    border: 1px solid #000000;

    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    font-family: 'cyregular';

  }

  @media (prefers-reduced-motion: reduce) {

    .form-control {

      transition: none;

    }

  }



  .form-control:focus {

    border-color: #0544FF;

    outline: 0;

    box-shadow: 0 0 0 0.25rem rgba(5, 68, 255, 0.25);

  }



  .form-control::-moz-placeholder {

    color: #707DB9;

    opacity: 1;

  }

  .form-control::placeholder {

    color: #707DB9;

    opacity: 1;

  }

  .form-control:disabled {

    background-color: #e9ecef;

    opacity: 1;

  }

  textarea.form-control {

    min-height: 180px;

  }

/* btn css end */









/* header css start */

header {

    padding: var(--spacing-base) 0;

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    z-index: 10;

    transition: all ease .3s;

}

.header-wrapper {

    display: flex;

    align-items: center;

}

.brand-logo img {

    height: 140px;

    transition: all ease .3s;

}



#bt-header.nav-up{transform:translateY(-100%)}

.bt-scrolled header {

    background-color: #211F52;

    padding: var(--spacing-s) 0;

}

.bt-scrolled .brand-logo img {

    height: 80px;

}

@media (max-width: 1400px) {

	.brand-logo img {

        height: 120px;

    }

}

@media (max-width: 1199px) {

    .bt-nav-open {

        overflow: hidden;

    }

	.bt-nav-open #bt-header.nav-up{

        transform: none;

    }

}

@media (max-width: 767px) {

    header {

        padding: var(--spacing-xs) 0;

    }

    .brand-logo img {

        height: 52px;

    }

    .bt-scrolled header {

        padding: var(--spacing-xs) 0;

    }

    .bt-scrolled .brand-logo img {

        height: 52px;

    }

}

/* header css end */



@media (max-width: 600px) {

    .hero {height: 93vh!important;}

    .hero-content {transform: translateY(0%)!important;}
    .chart-statistics{padding: 20px; border-radius: 10px; text-align: left; background:url(../images/chart-statistics.jpg) top right no-repeat #fff; height: 100%; background-size: cover;}

}



/* Navigation css start */

#nav-toggle {

    width: 50px;

    height: 50px;

    display: flex;

    border: 0;

    border-radius: 50%;

    padding: 0;

    position: relative;

    cursor: pointer;

    background-color: transparent;

    z-index: 10;

    flex: none;

    order: 5;

    margin-left: auto;

}

#nav-toggle svg {

    height: 100%;

    width: 100%;

    transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);

}

#nav-toggle .line {

    fill: none;

    stroke: #77B9FF;

    stroke-width: 6;

    transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1),  all 600ms cubic-bezier(0.4, 0, 0.2, 1);

    transition-delay: 0.2s;

}

#nav-toggle .line1 {

    stroke-dasharray: 60 207;

    stroke-width: 6;

}

#nav-toggle .line2 {

    stroke-dasharray: 60 60;

    stroke-width: 6;

}

#nav-toggle .line3 {

    stroke-dasharray: 60 207;

    stroke-width: 6;

}



.bt-nav-open #nav-toggle svg {

    transform: scaleX(1);

}

.bt-nav-open #nav-toggle .line {

    stroke: #77B9FF;

    transition-delay: 0s;

}

.bt-nav-open #nav-toggle .line1 {

    stroke-dasharray: 90 207;

    stroke-dashoffset: -134;

    stroke-width: 7;

}

.bt-nav-open #nav-toggle .line2 {

    stroke-dasharray: 1 60;

    stroke-dashoffset: -30;

    stroke-width: 7;

}

.bt-nav-open #nav-toggle .line3 {

    stroke-dasharray: 90 207;

    stroke-dashoffset: -134;

    stroke-width: 7;

}





.navbar {

    margin-left: auto;    

}

.navbar-inner {

    display: flex;

    align-items: center;

}

.nav-menu {

    display: flex;

    align-items: center;

}

.nav-menu a {

    font-size: var(--fs-base);

    color: var(--bt-white);

    font-weight: 500;

    font-family: 'cy_semiboldregular';

    overflow: hidden;

	transition: all ease 0.3s;

    position: relative;

}

.nav-menu a:before {

    position: absolute;

    content: attr(data-title); /* Prints the value of the attribute */

    top: 0;

    left: 0;

    color: #007BFF;

    overflow: hidden;

    transition: width 0.3s ease;

    width: 0;

    white-space: nowrap;

}

.nav-menu a:hover, .nav-menu a.active, .nav-menu a:focus {

    text-decoration: none;

    transform: scale(1.01);

    text-shadow: 2px 2px 0 rgba(0,0,0,0.6);

    color: transparent;

}

.nav-menu a:hover:before, .nav-menu a:focus:before, .nav-menu a.active:before {

    width: 100%;

}



.nav-menu li {

    padding: 0 var(--spacing-m);

}

.login-btn {

    display: flex;

    column-gap: var(--spacing-s);

    margin-left: var(--spacing-m);

}





@media (max-width: 1400px) {

    .login-btn {

        margin-left: var(--spacing-s);

    }

    .nav-menu li {

        padding: 0 var(--spacing-base);

    }

}



@media (min-width: 1200px) {

	#nav-toggle {display: none;}

}



@media (max-width: 1199px) {

	#bt-nav {

		position: fixed;

		top: 0;

		right: -100%;

		width: 100%;

		height: 100%;

		margin-right: 0;

		background: radial-gradient(47.96% 94.53% at 96.1% 102.18%, #060B4B 0%, rgba(18, 17, 42, 1) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

		-webkit-transition: -webkit-transform .8s cubic-bezier(0.77, 0, 0.175, 1);

		transition: -webkit-transform .8s cubic-bezier(0.77, 0, 0.175, 1);

		-o-transition: transform .8s cubic-bezier(0.77, 0, 0.175, 1);

		transition: transform .8s cubic-bezier(0.77, 0, 0.175, 1);

		transition: transform .8s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform .8s cubic-bezier(0.77, 0, 0.175, 1);

	}

    .navbar-inner {

		width: 100%;

		height: 100%;

		display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: start;

		max-width: 720px;

		padding: 0 var(--spacing-l);

		margin: 0 auto;

	}

    .nav-menu {

		flex-wrap: wrap;

		width: 100%;

        row-gap: var(--spacing-s);

	}

	.nav-menu li {

		width: 100%;

		transition: transform 3s cubic-bezier(0.16, 1.08, 0.38, 0.98), opacity 0.3s ease;

		transition-delay: 0s;

		padding: 0;

		transform: rotateX(-90deg);

		opacity: 0;

		visibility: hidden;

	}

    .nav-menu a {

		display: inline-block;

		font-family: 'cy_blackregular';

		font-size: 6.5vh;

		line-height: 1.2;

		position: relative;

		overflow: hidden;

		transition: all ease 0.3s;

		padding: 0;

		font-weight: 700;

	}

    .login-btn {

        margin-left: 0;

        margin-top: var(--spacing-xxl);

        transition: transform 3s cubic-bezier(0.16, 1.08, 0.38, 0.98), opacity 0.3s ease;

		transition-delay: 0s;

		transform: rotateX(-90deg);

		opacity: 0;

		visibility: hidden;

    }

    







    .bt-nav-open #bt-nav {

		-webkit-transform: translate3d(-100%, 0, 0);

		transform: translate3d(-100%, 0, 0);

		-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98);

		transition: -webkit-transform 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98);

		-o-transition: transform 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98);

		transition: transform 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98);

		transition: transform 0.6s cubic-bezier(0.16, 1.08, 0.38, 0.98), -webkit-transform 1s cubic-bezier(0.16, 1.08, 0.38, 0.98)

	}

    .bt-nav-open .nav-menu li {

		transform: rotateX(0deg);

		opacity: 1;

		transition-delay: 0.6s;

		visibility: visible;

	}

	.bt-nav-open .nav-menu li:nth-child(1) {

		transition-delay: 0.6s;

	}

	.bt-nav-open .nav-menu li:nth-child(2) {

		transition-delay: 0.8s;

	}

	.bt-nav-open .nav-menu li:nth-child(3) {

		transition-delay: 1s;

	}

	.bt-nav-open .nav-menu li:nth-child(4) {

		transition-delay: 1.2s;

	}

	.bt-nav-open .nav-menu li:nth-child(5) {

		transition-delay: 1.4s;

	}

	.bt-nav-open .nav-menu li:nth-child(6) {

		transition-delay: 1.6s;

	}

	.bt-nav-open .login-btn {

        transform: rotateX(0deg);

		opacity: 1;

		transition-delay: 0.6s;

		visibility: visible;

		transition-delay: 1.8s;

	}

    

}



@media (max-width: 992px) { 

    .nav-menu a {

        font-size: 5vh;

    }

}



/* Navigation css end */

























/* Hero banner css start */

.hero {

    height: 100vh;

    min-height: 550px;

    overflow: hidden;

    position: relative;

}

.hero > div {

    height: 100%;

    display: flex;

    justify-content: center;

}

.hero-content {

    align-self: center;

    justify-self: center;

    text-align: center;

    transform: translateY(30%);

}

.hero-content h1 {

    font-family: 'cy_extraboldregular';

    color: #DDEDFF;

    font-size: 3.125rem;

    line-height: 1.15;

    margin-bottom: var(--spacing-l);

}

.hero-content p {

    font-family: 'cy_semilightregular';

    font-size: var(--fs-l);

}

.hero-video {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: -1;

}

.hero-video video {

    position: absolute;

    object-fit: cover;

    width: 100%;

    height: 100%;

    z-index: -1;

    border: 0;

    outline: none;

}

@media (max-width: 767px) {

	.hero-content h1 {

        font-size: 2.25rem;

        margin-bottom: var(--spacing-base);

    }

    .hero-content p {

        font-size: var(--fs-base);

    }

    .hero-content p br {

        display: none;

    }

}

/* Hero banner css end */





/* How does css start */

.section-how-does {

    padding: 12rem 0;

    overflow-x: hidden;

}

.section-how-does h2 {

    color: #DDEDFF;

    font-size: 5rem;

    text-align: center;

    font-family: 'cy_extraboldregular';

    line-height: 1.15;

}

.hd-video-wrapper {

    position: relative;

    background: linear-gradient(104.23deg, #090934 58.47%, #1A1A9A 114.98%);

    margin: 8rem 0;

    padding: 7.5rem 0;

}

.hd-play-video {

    border: none;

    outline: none;

    padding: 0;

    background-color: transparent;

    margin: 0 auto;

    display: block;

    position: relative;

    z-index: 2;

    text-align: center;

    cursor: pointer;

}

.hd-play-video span {

    font-family: 'cy_extraboldregular';

    color: #DDEDFF;

    display: block;

    font-size: var(--fs-xl);

}

.hdv-bg {

    background: url('../images/video-grid.png') center center;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

}

.hdv-bg .container {

    height: 100%;

    position: relative;

}

.hdv-tokens li {

    position: absolute;

    top: 50%;

    z-index: 2;

}

.hdv-tokens li:nth-child(1){top: 5%; right: 100%;}

.hdv-tokens li:nth-child(1) img{width: 120px; transform: rotate(10deg);}

.hdv-tokens li:nth-child(2){top: -15%; right: 62%;}

.hdv-tokens li:nth-child(2) img{width: 100px; filter: blur(0.09rem)}

.hdv-tokens li:nth-child(3){top: 28%; right: 72%;}

.hdv-tokens li:nth-child(3) img{width: 180px; filter: blur(0.08rem); transform: rotate(-5deg);}

.hdv-tokens li:nth-child(4){top: -10%; left: 75%;}

.hdv-tokens li:nth-child(4) img{width: 85px; transform: rotate(10deg);}

.hdv-tokens li:nth-child(5){top: 23%; left: 65%;}

.hdv-tokens li:nth-child(5) img{width: 140px; transform: rotate(-60deg); filter: blur(0.09rem);}

.hdv-tokens li:nth-child(6){top: 60%; left: 95%;}

.hdv-tokens li:nth-child(6) img{width: 100px;}

.hdv-tokens li:nth-child(7){top: 85%; left: 72%;}

.hdv-tokens li:nth-child(7) img{width: 100px;}



.hdv-tokens li div {

    animation: up-down linear 4s;

    animation-iteration-count: infinite;

    transform-origin: 50% 50%;

}



.hdv-grdnt-wrap {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

}

.hdv-grdnt {

    width: 150px;

    height: 500px;    

    border-radius: 4.5rem;

    position: absolute;

}

.hdv-grdnt.lhs {

    background: linear-gradient(180deg, #090934 0%, #121269 96.11%);

    top: 8%;

    right: 74%;

    transform: rotate(45deg);

}

.hdv-grdnt.rhs {

    background: linear-gradient(180deg, #090934 0%, #121269 96.11%);

    bottom: 4%;

    left: 70%;

    transform: rotate(45deg);

}



.hd-work {

    display: flex;

    flex-direction: column;

    row-gap: var(--spacing-xl);

}

.hd-block {

    border: 1px solid #242324;

    background-image: radial-gradient(47.96% 94.53% at 96.1% 102.18%, #0E157C 0%, #12112B 100%);

    transition: all ease-in-out 0.5s;

    position: relative;

    z-index: 1;

}

.hd-block::before {

    position: absolute;

    content: '';

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-image: linear-gradient(96.2deg, #007BFF 41.83%, #0C4D87 86.09%);

    z-index: -1;

    transition: opacity 0.3s linear;

    opacity: 0;

}

.hd-block:hover {

    transform: translateY(-5px);

}

.hd-block:hover::before {

    opacity: 1;

}

.hd-content {

    padding: 3.75rem 0 2.5rem 5rem;

}

.hd-content h3 {

    font-family: 'cy_extraboldregular';

    color: #fff;

    display: block;

    font-size: var(--fs-xxl);

    margin-bottom: var(--spacing-base);

}

.hd-content p {

    color: #C3C5FF;

    font-family: 'cy_semilightregular';

    font-size: var(--fs-m);

}



.hd-img {

    padding-top: var(--spacing-xl);

}

.hd-img img{

    display: block;

    margin: 0 auto;

}

/* How does css end */





/* Who im css start */

.section-who-im {

    position: relative;

    padding-bottom: 30rem;

    overflow-x: hidden;

}

.section-who-im h2 {

    color: #ffffff;

    font-size: 3.5rem;

    text-align: center;

    font-family: 'cy_extraboldregular';

    line-height: 1.15;

}



.who-im-wrapper {

    margin-top: 6rem;

}

.who-im {    

    display: flex;

    justify-content: space-around;    

}

.who-im .item {

    width: 30%;

}

.whoim-block {

    background: radial-gradient(47.96% 94.53% at 96.1% 102.18%, #0E157C 0%, #12112B 100%);

    border-radius: var(--bt-border-radius-pill);

    width: 100%;

    padding-bottom: 100%;

    position: relative;

}

.whoim-content {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    width: 100%;

    padding: 0 10%;

}

.whoim-content img {

    display: block;

    margin: 0 auto;

}

.whoim-content h3 {

    color: #DDEDFF;

    font-size: 1.5rem;

    text-align: center;

    font-family: 'cy_extraboldregular';

    line-height: 1.35;

    margin-top: var(--spacing-s);

    min-height: 100px;

    align-content: center;

}



.whoim-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: -1;    

    pointer-events: none;

}

.whoim-video {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 40rem;

}

.whoim-video video {

    object-fit: cover;

    width: 100%;

    height: 100%;

    border: 0;

    outline: none;

}

.whoim-grid {

    background: url('../images/video-grid-2.png') center center;

    position: absolute;

    left: 10%;

    top: 10%;

    width: 80%;

    height: 70%;

    z-index: 1;

    opacity: 0.8;

}





.who-im-wrapper {

    position: relative;

}

.who-im-wrapper .vctr {

    position: absolute;

}

.who-im-wrapper .vctr span{

    transition: all ease-in-out 0.3s;

    display: block;

}

.vctr.vctr_1 {left: -6%; top: 10%;}

.vctr.vctr_2 {left: 64%; top: -15%;}

.vctr.vctr_3 {left: 64%; top: 92%;}

.vctr.vctr_4 {left: 34%; top: 95%;}

.vctr.vctr_5 {left: 96%; top: 92%;}

.vctr.vctr_6 {left: -3%; top: 90%;}

.vctr.vctr_6 span {transform: rotate(35deg);}

.vctr.vctr_7 {left: 105%; top: 0%;}



.who-im-wrapper:hover .vctr.vctr_1 span{transform: translate(50px,-70px) rotate(-20deg);}

.who-im-wrapper:hover .vctr.vctr_2 span{transform: translate(-15px,25px);}

.who-im-wrapper:hover .vctr.vctr_3 span{transform: rotate(-20deg);}

.who-im-wrapper:hover .vctr.vctr_4 span{transform: translate(-70px,-50px) rotate(90deg);}

.who-im-wrapper:hover .vctr.vctr_5 span{transform: rotate(180deg);}

.who-im-wrapper:hover .vctr.vctr_6 span{transform: rotate(-50deg);}

.who-im-wrapper:hover .vctr.vctr_7 span{transform: rotate(50deg);}

@media (max-width: 767px) {

    .vctr img {

        transform: scale(0.8);

    }

    .vctr.vctr_1 {left: -6%; top: -3%;}

    .vctr.vctr_2 {left: 75%; top: -2%;}

    .vctr.vctr_3 {left: 80%; top: 30%;}

    .vctr.vctr_4 {left: 34%; top: 100%;}

    .vctr.vctr_5 {left: 80%; top: 64%;}

    .vctr.vctr_6 {left: 0%; top: 60%;}

    .vctr.vctr_6 span {transform: rotate(35deg);}

    .vctr.vctr_7 {left: 10%; top: 35%;}

}





/* Who im css end */



/* roadmap css start */

.section-roadmap {

    padding-top: 6rem;

    overflow-x: hidden;

}

.section-roadmap h2 {

    color: #ffffff;

    font-size: 5rem;

    text-align: center;

    font-family: 'cy_extraboldregular';

    line-height: 1.15;

}

.timeline {

    border-top: 1px solid #383838;

    margin-top: 5rem;

}

.timeline-item{

    background: rgba(18, 17, 43, 1);

    position: relative;

    z-index: 1;

}

.timeline-item::before {

    position: absolute;

    content: '';

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-image: linear-gradient(96.2deg, #007BFF 41.83%, #0C4D87 86.09%);

    box-shadow: 0px 4px 44px 0px rgba(0, 0, 0, 0.85);

    z-index: -1;

    transition: opacity 0.3s linear;

    opacity: 0;

}

.timeline-item:hover {

    z-index: 2;

}

.timeline-item:hover::before {

    opacity: 1;

  }

.timeline-block {

    max-width: 1080px;

    margin: 0 auto;

    padding: 3.75rem 0;

}

.timeline-block h3 {

    color: #0544FF;

    font-family: 'cy_extraboldregular';

    font-size: 2.5rem;

    line-height: 1.25;

    width: 300px;

}

.timeline-block h4 {

    font-family: 'cy_extraboldregular';

    color: #fff;

    display: block;

    font-size: var(--fs-xxl);

    line-height: 1.25;

    margin-bottom: var(--spacing-base);

}

.timeline-block p {

    color: #C3C5FF;

    font-family: 'cy_semilightregular';

    font-size: var(--fs-m);

}

/* roadmap css end */





/* faqs css start */

.section-faqs {

    background: linear-gradient(83.59deg, #007BFF 23.23%, #0C4D87 55.86%);

    padding: 8rem 0;

}

.section-faqs h2 {

    color: #ffffff;

    font-size: 5rem;

    text-align: center;

    font-family: 'cy_extraboldregular';

    line-height: 1.15;

}

.faqs-accordion {

    margin: 4rem auto 0;

    max-width: 1140px;

}

.faqs-accordion .accordion-header {

    border-bottom: 1px solid rgba(0, 123, 255, 1);

    padding: 2rem 1rem;

    position: relative;

    display: flex;

    cursor: pointer;

}

.accordion-header h3 {

    font-family: 'cy_extraboldregular';

    color: #fff;

    display: block;

    font-size: var(--fs-xl);

    line-height: 1.25;

}

.accordion-header::after {

    content: '';

    display: inline-block;

    width: 16px;

    height: 16px;

    background: url('../images/icon-arrow-down.svg') center center no-repeat;

    margin-left: auto;

    align-self: center;

    flex: none;

    transition: all ease-in-out 0.3s;

}

.accordion-header.active {

    border-bottom-color: transparent;

}

.accordion-header.active::after {

    transform: rotate(180deg);

}

.accordion-content {

    padding: 0.5rem 1rem;

    display: none;

}

.faq-item:last-child .accordion-header{

    border-bottom: none;

}

/* faqs css end */





/* built for css start */

.section-built-for {

    padding: 10rem 0;

    overflow-x: hidden;

}

.section-built-for h2 {

    color: #ffffff;

    font-size: var(--fs-m);

    text-align: left;

    font-family: 'cy_extraboldregular';

    line-height: 1.25;

    width: 270px;

}

.section-built-for ul {

    display: flex;

    align-items: center;

    justify-content: space-evenly;

}

/* built for css end */















/* contact css start */

.section-contact {

    padding-top: 0;

}

.section-contact h2 {

    color: #ffffff;

    font-size: 5rem;

    text-align: center;

    font-family: 'cy_extraboldregular';

    line-height: 1.15;

}

.form-contact {

    max-width: 870px;

    margin: 0 auto;

    padding-top: 4rem;

}

.form-contact .form-label {

    display: none;

}

.form-contact .btn {

    margin: 2rem auto 0;

    display: block;

    min-width: 280px;

}

/* contact css end */















/* Documentation and Presentation css start */

.section-docpre {

    padding: 8rem 0;

    position: relative;

}

.section-docpre h2 {

    color: #ffffff;

    font-size: 3.75rem;

    text-align: center;

    font-family: 'cy_extraboldregular';

    line-height: 1.15;

}

.docpre-list {

    margin-top: 5rem;

    display: flex;

    justify-content: space-between;

}

.docpre-list .item {

    width: 23%;

}

.docpre-block {

    border: 2px solid #007BFF;

    background: linear-gradient(180deg, #0F1665 0%, #120E23 100%);

    padding: var(--spacing-m) var(--spacing-m);

    border-radius: var(--bt-border-radius);

    height: 100%;

    display: flex;

    flex-direction: column;

}



.docpre-block > img {

    display: block;

    height: 70px;

    align-self: flex-start;

    margin-bottom: var(--spacing-base);

}

.docpre-block h3 {

    font-family: 'cybold';

    color: #fff;

    display: block;

    font-size: var(--fs-xl);

    line-height: 1.25;

    margin-bottom: var(--spacing-base);

}

.docpre-block p {

    color: #C3C5FF;

    font-family: 'cy_semilightregular';

    font-size: var(--fs-base);

    margin-bottom: var(--spacing-base);

}

.docpre-block a {

    margin-top: auto;

    transition: all ease-in-out 0.3s;

    align-self: flex-start;

}

.docpre-block a img {

    display: block;

}

.docpre-block a:hover {

    transform: rotate(360deg);

}



.docpre-video {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: -1;

}

.docpre-video video {

    position: absolute;

    object-fit: cover;

    width: 100%;

    height: 100%;

    z-index: -1;

    border: 0;

    outline: none;

}

/* Documentation and Presentation css end */





















/* Footer css start */

footer {

    background-color: var(--bt-black);

    padding: var(--spacing-s) 0;

}

footer p {

    font-size: var(--fs-s);

    color: rgba(137, 137, 137, 1);

}

.footer-links {

    text-align: center;

    display: flex;

    justify-content: center;

}

.footer-links a {

    font-size: var(--fs-s);

    color: rgba(137, 137, 137, 1);

}

.footer-links li::after {

    content: '|';

    font-size: var(--fs-s);

    color: rgba(137, 137, 137, 1);

    margin: 0 var(--spacing-xs);

}

.footer-links li:last-child::after {

    display: none;

}

.powered-by {

    display: flex;

    align-items: center;

    justify-content: end;

}

.powered-by img {

    margin-top: -6px;

    margin-bottom: 0;

}

.powered-by span {

    font-size: var(--fs-s);

    color: rgba(137, 137, 137, 1);

    margin-right: var(--spacing-xs);

    display: inline-block;

}

@media (max-width: 992px) {

	.footer-links {text-align: right;}

}

@media (max-width: 767px) {

	footer p {text-align: center;}

}

/* Footer css end */









/* Popup css start */

.popup-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    display: none;

    z-index: 9999;

    overflow: auto;

  }

  

  .popup-content {    

    background: rgba(0, 0, 0, 0.8);

    max-width: 1200px;

    width: 85%;

    max-height: 85%;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

  }

  

  

  

  .video-container {

    position: relative;

    overflow: hidden;

    max-width: 100%;

    max-height: 100%;

  }

  

  .video-container iframe, .video-container video {

    width: 100%;

    height: 100%;

    border: none;

    display: block;

  }

  .close-popup {

    position: absolute;

    top: 25px;

    right: 25px;

    font-size: 30px;

    width: 45px;

    line-height: 45px;

    text-align: center;

    background-color: rgba(5, 68, 255, 0.8);

    color: #fff;

    cursor: pointer;

    border-radius: var(--bt-border-radius-pill);

    font-family: 'cy_extralightregular';

    z-index: 9;

  }

/* Popup css end */









/* RESPONSIVE CSS START */

@media (max-width: 1400px) {

	html {

        font-size: 95%;

    }

}

@media (max-width: 1200px) {

    .section-how-does h2, .section-roadmap h2, .section-faqs h2, .section-contact h2 {

        font-size: 4rem;

    }

    .section-who-im h2, .section-docpre h2 {

        font-size: 3rem;

    }

    .whoim-content h3 {

        font-size: 1.25rem;

        min-height: 80px;

    }

    .whoim-content img {

        height: 100px;

    }

	.timeline-block {

        padding: 3rem 2rem;

    }

    .docpre-block h3 {

        font-size: var(--fs-l);

    }

    .docpre-block p {

        font-size: var(--fs-s);

    }

    .docpre-block > img {

        height: 60px;

    }

}

@media (max-width: 992px) {

    .section-how-does h2, .section-roadmap h2, .section-faqs h2, .section-contact h2 {

        font-size: 3rem;

    }

    .section-who-im h2, .section-docpre h2 {

        font-size: 2.25rem;

    }

    .who-im {

        flex-wrap: wrap;

    }

    .who-im .item {

        width: 45%;

    }

    .docpre-list {

        flex-wrap: wrap;

        justify-content: space-evenly;

        row-gap: var(--spacing-m);

    }

    .docpre-list .item {

        width: 45%;

    }



    .hd-content h3, .timeline-block h4 {

        font-size: var(--fs-xl);

    }

    .timeline-block p, .hd-content p {

        font-size: var(--fs-base);

    }

    .timeline-block h3 {

        font-size: var(--fs-xxl);

    }

}

@media (max-width: 767px) {

    .container {

        padding-right: calc(var(--bs-gutter-x)* 1);

        padding-left: calc(var(--bs-gutter-x)* 1);

    }



    .section-how-does {

        padding: 8rem 0;

    }



    .hd-content {

        padding: var(--spacing-l) var(--spacing-l) 0;

    }

    .hdv-grdnt {

        width: 75px;

        height: 220px;

    }



    .section-who-im h2 br {

        display: none;

    }



    .who-im {

        row-gap: var(--spacing-xl);

    }

    .who-im .item {

        width: 100%;

        max-width: 375px;

    }

    .whoim-content h3 {

        font-size: var(--fs-xl);

    }



    .section-who-im {

        padding-bottom: 20rem;

    }

    .whoim-video {

        height: 25rem;

        overflow: hidden;

    }

    .whoim-video video {

        height: 140%;

    }



    .section-how-does h2, .section-roadmap h2, .section-faqs h2, .section-contact h2 {

        font-size: 2.5rem;

    }

    .section-how-does h2, .section-roadmap h2 {

        padding: 0 1.5rem;

    }





    .timeline {

        margin-top: 3.5rem;

    }

    .timeline-block {

        padding: 2rem 1.5rem;

    }

    .timeline-block h3 {

        margin-bottom: var(--spacing-base);

    }

    .timeline-block p, .hd-content p {

        font-size: var(--fs-s);

    }



    .faqs-accordion {

        margin-top: 3.5rem;

    }

    .faqs-accordion .accordion-header {

        padding: 1rem 0;

    }

    .accordion-header h3 {

        font-size: var(--fs-l);

    }

    .accordion-content {

        padding: 0.5rem 0;

    }

    .accordion-content p {

        font-size: var(--fs-s);

    }

    



    .section-built-for, .section-faqs {

        padding: 6rem 0;

    }

    .section-built-for ul {

        flex-wrap: wrap;

        margin-top: var(--spacing-l);

        justify-content: flex-start;

        row-gap: var(--spacing-m);

    }

    .section-built-for ul li {

        width: 33.3333%;

        text-align: center;

    }

    .section-built-for ul li img {

        max-width: 90%;

    }

    



    .form-contact {

        padding-top: 3.5rem;

    }

    .docpre-list {

        margin-top: 3.5rem;

    }

    .docpre-list .item {

        width: 100%;

    }

    .docpre-block > img {

        height: 70px;

    }

}

/* RESPONSIVE CSS END */



/* animation  */

@keyframes up-down {

    0% {

      -webkit-transform:  translateY(0)  ;

    }

    50% {

      -webkit-transform:  translateY(12px)  ;

    }

    100% {

      -webkit-transform:  translateY(0)  ;

    }

}

@webkit-keyframes up-down {

    0% {

      -webkit-transform:  translateY(0)  ;

    }

    50% {

      -webkit-transform:  translateY(12px)  ;

    }

    100% {

      -webkit-transform:  translateY(0)  ;

    }

}



@-webkit-keyframes jump {

    50% {

      transform: translateY(-30%);

      color: #007BFF;

    }

  }

  @keyframes jump {

    50% {

      transform: translateY(-30%);

      color: #007BFF;

    }

}

.wobble {

    color: #007BFF;

    white-space: nowrap;

}

.wobble span {

    display: inline-block;

    pointer-events: none;

}

.wobble span.jump {

    -webkit-animation: jump 0.5s 1;

    animation: jump 0.5s 1;

}

.wobble span.upscale {

    -webkit-animation: upscale 0.5s 1;

    animation: upscale 0.5s 1;

}



[data-aos="aos-anim1"] {

    transform: translate(-200px, 0) rotate(45deg) !important;

    transition-property: transform, opacity;

    opacity: 0;

}

[data-aos="aos-anim1"].aos-animate {

    transform: translate(0, 0) rotate(45deg) !important;

    opacity: 1;

}

[data-aos="aos-anim2"] {

    transform: translate(200px, 0) rotate(45deg) !important;

    transition-property: transform, opacity;

    opacity: 0;

}

[data-aos="aos-anim2"].aos-animate {

    transform: translate(0, 0) rotate(45deg) !important;

    opacity: 1;

}

.g-recaptcha{

    padding-top: 20px;

    display: flex;

    justify-content: center;

}