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

iframe,
img {
	max-width: 100%
}

.common-btn::after,
.common-btn::before {
	content: "";
	opacity: 0;
	position: absolute;
	top: -50px;
	transform: rotate(35deg);
	transition: 3s cubic-bezier(.19, 1, .22, 1);
	background: var(--cardBgColor)
}

.common-btn,
.common-btn span,
.container {
	position: relative
}

.nav-sec ul li a,
body {
	color: var(--themeWhite)
}

.nav-sec ul li a,
a,
a:hover,
header.main-header,
header.main-header.fixed-top {
	transition: .5s ease-in-out
}

.banner-left ul,
.common-btn {
	overflow: hidden
}

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

img {
	height: auto
}

:root {
	--themeYellow: #FFE500;
	--bgColor: #0C0C17;
	--themeWhite: #FFFFFF;
	--themeFontColor: #121212;
	--cardBgColor: #191826
}

body {
	overflow-x: hidden;
	background: url(images/top-yellow-glow.webp) top right var(--bgColor) no-repeat;
	font-size: 16px;
	font-family: Inter, sans-serif;
    position: relative;
}

a {
	text-decoration: none
}

.common-btn {
	min-width: 167px;
	padding: 14px 28px;
	display: inline-block;
	border-radius: 8px;
	text-align: center;
	border: 1px solid transparent
}

.common-btn:hover {
	box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .053)
}

.common-btn::before {
	height: 155px;
	left: -50%;
	width: 50px
}

.common-btn::after {
	height: 20rem;
	left: -100%;
	width: 8rem
}

.common-btn:hover::before {
	left: 120%;
	opacity: .5s
}

.common-btn:hover::after {
	left: 200%;
	opacity: .6
}

.common-btn span {
	z-index: 9
}

.btn-warning-border {
	color: var(--themeYellow);
	border-color: var(--themeYellow)
}

.btn-warning,
.btn-warning-border:hover {
	background: var(--themeYellow);
	color: var(--themeFontColor)
}

.btn-dark,
.common-heading h2 em,
.home-banner h1 strong {
	color: var(--themeYellow)
}

.btn-dark {
	background-color: var(--bgColor)
}

.common-btn.btn-dark::after,
.common-btn.btn-dark::before {
	background: var(--themeWhite)
}

.common-heading {
	margin-bottom: 20px
}

.common-heading h2 {
	font-weight: 700;
	font-size: 78px;
	line-height: 90px;
	letter-spacing: -2px;
	margin-bottom: 30px
}

.common-heading h2 em {
	font-style: normal
}

.banner-left,
.common-heading p {
	font-size: 18px;
	line-height: 24px
}

header.main-header {
	position: fixed;
    z-index: 999;
    width: 100%;
	padding: 22px 0;
	border-bottom: 1px solid var(--cardBgColor)
}

header.main-header.fixed-top {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	background: var(--cardBgColor);
	padding: 10px 0
}

.header-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px
}

.nav-sec ul {
	display: flex;
	gap: 30px;
	list-style-type: none;
	padding: 0;
	margin: 0
}

.nav-sec ul li a {
	line-height: 19.88px;
	letter-spacing: -.14px
}

.nav-sec ul li a:hover,
.nav-sec ul li.active a,
.nav-sec ul li.current-menu-item a {
	color: var(--themeYellow);
	transition: .5s ease-in-out
}

@media (min-width:991.98px) {
	.toggle-menu {
		display: none
	}
}

.book-demo .common-btn {
	padding: 13px 14px
}

.home-banner {
	padding: 213px 0 130px
}

.home-banner h1 {
	font-weight: 500;
	font-size: 85px;
	line-height: 81px;
	letter-spacing: -4px;
	margin-bottom: 30px
}

.banner-left ul li {
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="%23FFE308" d="M21.546 5.111a1.5 1.5 0 0 1 0 2.121L10.303 18.475a1.6 1.6 0 0 1-2.263 0L2.454 12.89a1.5 1.5 0 1 1 2.121-2.121l4.596 4.596L19.424 5.111a1.5 1.5 0 0 1 2.122 0"/></g></svg>') left top 2px no-repeat;
	width: 50%;
	float: left;
	padding-left: 28px;
	padding-right: 10px;
	font-size: 14px;
	margin: 10px 0
}

.btns-group {
	margin-top: 20px
}

.banner-right img {
    width: 100%;
}

@media (max-width:1400.98px) {
	.home-banner h1 {
		font-size: 62px;
		line-height: 66px
	}
}

@media (max-width:1199.98px) {
	.container {
		max-width: 1140px
	}

	.banner-left {
		font-size: 16px
	}

	.home-banner h1 {
		font-size: 52px;
		line-height: 56px;
		letter-spacing: 0
	}

	.home-banner {
		padding: 120px 0 100px
	}
}

@media (max-width:991.98px) {

	.nav-sec,
	.nav-sec.slidein {
		transition: .5s ease-in-out
	}

	span.toggle-menu {
		position: absolute;
		right: 15px;
		top: 6px;
		font-size: 30px;
		cursor: pointer
	}

	.header-wrapper {
		padding-right: 45px
	}

	.nav-sec {
		position: fixed;
		height: 100vh;
		background: var(--cardBgColor);
		top: 0;
		right: -280px;
		z-index: 9999;
		width: 280px
	}

	.nav-sec.slidein {
		right: 0
	}

	.nav-sec ul {
		padding: 70px 0 0;
		margin: 0;
		flex-direction: column;
		gap: 0
	}

	.nav-sec ul li {
		padding: 12px 20px
	}

	.cls-btn {
		position: absolute;
		right: 15px;
		top: 15px;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="%23FFE308" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>') center/cover no-repeat;
		width: 32px;
		height: 30px;
		cursor: pointer
	}

	.banner-right {
		text-align: center;
		margin-bottom: 30px
	}

	.banner-left ul {
		overflow: hidden;
		max-width: 516px;
		margin: 0 auto
	}

	.btns-group {
		justify-content: center
	}
}

@media (max-width:767.98px) {

	header.main-header,
	header.main-header.fixed-top {
		padding: 15px 0 !important
	}

	.book-demo .common-btn {
		padding: 13px;
		font-size: 14px;
		min-width: auto
	}

	.logo img {
		max-width: 190px
	}

	span.toggle-menu {
		top: 7px;
		font-size: 25px
	}

	.header-wrapper {
		padding-right: 40px
	}

	.home-banner h1 {
		font-size: 38px;
		line-height: 40px
	}

	.home-banner {
		padding: 90px 0 60px
	}
}

@media (max-width:575.98px) {
	.logo img {
		max-width: 150px
	}

	.book-demo {
		display: none
	}

	span.toggle-menu {
		top: -5px
	}

	.home-banner h1 {
		font-size: 30px;
		line-height: 34px
	}
}

html {
	scroll-padding: 6rem;
}

.home-banner {
    position: relative;
    overflow: hidden;
}

.home-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(12, 12, 23, 0) 0%, #0C0C17 100%),
        linear-gradient(180deg, rgba(12, 12, 23, 0) 0%, #0C0C17 100%);
    z-index: 1;
    pointer-events: none;
}

.home-banner .container {
    position: relative;
    z-index: 2;
}

.banner-bg-wrap {
    position: absolute;
    top: 0%;
    left: -20%;
    width: 140%;
    height: 200%;
    display: flex;
    flex-direction: column;
    z-index: 0;
    transform: rotate(-15deg);
    transform-origin: center center;
    gap: 16px;
}

.banner-row {
    display: flex;
    overflow: hidden;
}

.banner-track {
    display: flex;
    align-items: center;
    height: 100%;
    will-change: transform;
}

.banner-track img {
    width: 516px;
    height: 239px;
    max-width: none;
    display: block;
    flex-shrink: 0;
    opacity: 0.4;
}

.banner-track.rtl {
    animation: bannerRTL 20s linear infinite;
}

.banner-track.ltr {
    animation: bannerLTR 20s linear infinite;
}

@keyframes bannerRTL {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes bannerLTR {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}