@font-face { font-family: Inter; src: url("assets/fonts/inter-400.woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; src: url("assets/fonts/inter-700.woff2"); font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Neue Metana Next Free Personal SemiBold; src: url("assets/fonts/Neue-semibold.woff2"); font-display: swap; }
@font-face { font-family: Neue Montreal Italic; src: url("assets/fonts/Neue-italic.woff2"); font-display: swap; }
@font-face { font-family: Neue Montreal Light; src: url("assets/fonts/Neue-light.woff2"); font-display: swap; }
@font-face { font-family: Neue Montreal Medium; src: url("assets/fonts/Neue-medium.woff2"); font-display: swap; }
@font-face { font-family: Neue Montreal Regular; src: url("assets/fonts/Neue-regular.woff2"); font-display: swap; }
:root{
	--base-color:#8ec97c;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
	transition: all .3s;
}
a:hover{
	color:var(--base-color);
}

html, body {
    font-family: Inter;
    background: #000 !important;
	font-weight: 400;
	direction: ltr;
	text-align: left;
	background: var(--bg-color);
	cursor: none;
	max-width: 100vw;
}

.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    background-color: var(--base-color);
    border-radius: 50%;
    pointer-events: none; /* کلیک‌پذیری نداشته باشه */
    z-index: 9999;
    transform: translate(-50%, -50%);
  }
/*Global Styles*/
/* Button styles */
.custom-button {
	--background: #fff;
	--text: #000;
	--font-size: 16px;
	--duration: .3s;
	--move-hover: -4px;
	--shadow: 0 2px 8px -1px rgba(39, 94, 254, 0.32);
	--shadow-hover: 0 4px 20px -2px rgba(39, 94, 254, 0.5);
	--font-shadow: var(--font-size);
	padding: 16px 32px;
	font-family: 'Roboto', Arial, sans-serif;
	font-weight: 500;
	line-height: var(--font-size);
	border-radius: 24px;
	display: inline-block;
	outline: none;
	border: none;
	text-decoration: none;
	font-size: var(--font-size);
	letter-spacing: 0.5px;
	background: var(--background);
	color: var(--text);
	box-shadow: var(--shadow);
	transform: translateY(0) translateZ(0);
	transition: transform var(--duration) ease, box-shadow var(--duration) ease;
	cursor: pointer;
}
.custom-button div {
	display: flex;
	overflow: hidden;
	text-shadow: 0 var(--font-shadow) 0 var(--text);
}
.custom-button span {
	display: block;
	backface-visibility: hidden;
	font-style: normal;
	transition: transform var(--duration) ease;
	transform: translateY(var(--m)) translateZ(0);
}
.custom-button:hover {
	--y: var(--move-hover);
	--shadow: var(--shadow-hover);
}
.btn.custom-button:hover {
	background: #fff;
	box-shadow: none;
}
.custom-button:hover span {
	--m: calc(var(--font-size) * -1);
}
.custom-button.reverse {
	--font-shadow: calc(var(--font-size) * -1);
}
.custom-button.reverse:hover span {
	--m: calc(var(--font-size));
}
.custom-button.fast {
	--duration: .32s;
}


ul{
	list-style: none;
	margin: 0;
}

.btn {
	background: #fff;
	border-radius: 0 !important;
	font-size: 14px;
	font-family: Neue Montreal Medium !important;
	padding: 14px 50px;
}
.btn-2:hover{
	color: #fff !important;
	background: #262626 !important;
}
.scroll-container {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}
.scroll-content {
	display: inline-block;
}
.font-size-20{
	font-size: 20px !important;
}
.font-size-16{
	font-size: 16px !important;
}
.font-size-18{
	font-size: 18px !important;
}
/*Start Header*/
header {
	z-index: 999 !important;
	position: relative;
}
.top-navbar {
	backdrop-filter: blur(10px);
	background-color: rgba(0, 0, 0, 0.69);
	height: 100px;
	width: 100%;
	opacity: 1;
	position: fixed;
	top: 0;
	display: flex;
	align-items: center;
}
.center-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	list-style: none;
	color: #fff;
}
.left-logo img {
	max-width: 105px;
}
.center-menu a:hover{
	color: var(--base-color) !important;
}
/*End Header*/
/*Start Hero*/
.top-slider {
	margin: 50px 0 0 0 ;
}
.zi_slider-container {
	position: relative;
	height: 500px;
	background: #000;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
}

.zi_center-line {
    position: absolute;
    top: 0;
    right: 50%;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    z-index: 10;
    transform: translateX(50%);
    opacity: 0;
}

.zi_slider-track {
    display: flex;
    position: absolute;
    top: 50px;
    right: 0;
    height: 600px;
    align-items: center;
    gap: 0px;
    will-change: transform;
}

.zi_slider-item {
    width: 200px;
    height: 600px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s ease;
    perspective: 1000px;
    padding-top: 80px;
}

.zi_slider-item img {
    width: 210px;
    height: 300px;
    display: inline-block;
    object-fit: contain;
    filter: grayscale(100%);
    transition: all 0.5s ease;
    transform-style: preserve-3d;
}

.zi_slider-item.zi_passed img {
    filter: grayscale(0%);
}
  .zi_slider-icon {
	position: absolute;
	top: 100px;
	right: 6px;
	font-size: 13px;
	opacity: 0;
	transition: opacity 0.3s ease, line-height 0.5s;
	z-index: 5;
	color: #000;
	font-weight: bold;
	text-align: center;
	line-height: 0.5em;
	cursor: pointer;
	width: 1.9em;
	max-height: 45px;
	transform-style: preserve-3d
}
.zi_slider-icon::after {
	content: "";
	font-size: 0.5em;
	position: absolute;
	height: 6em;
	border: 2em solid var(--base-color);
	z-index: -1;
	top: -1.5em;
	border-top-width: 4em;
	border-bottom-color: transparent;
	right: 0;
	transition: height 0.5s;
}
  .zi_slider-item.zi_passed .zi_slider-icon {
	opacity: 1;
  }

  @media (max-width: 768px) {
	.zi_slider-track {
	height: auto !important;
	}
	.zi_slider-container {
	  height: 400px !important;
	}
	.zi_slider-item img {
		width: 100% !important;
		height: 100% !important;
		object-fit: scale-down !important;
	}
	.hero-vertical-divider-1iuu4ul {
		display: none;
	}
	.zi_slider-item {
		width: 100px !important;
		height: auto !important;
		object-fit: scale-down !important;
	}
	.zi_image-wrapper {
		position: relative !important;
		width: auto !important;
		height: 175px !important;
		transition: transform 0.5s ease !important;
		transform-style: preserve-3d !important;
	}
	.hero-vertical-divider-1iuu4ul {
		top: calc(55% - 151.975px) !important;
		scale: .6 !important;
	}
  }

  .hero-vertical-divider-1iuu4ul {
	place-content: center;
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	flex-flow: row;
	gap: 11.87px;
	height: 304px;
	left: calc(50.1667% - 2.375px);
	overflow: visible;
	padding: 0px;
	position: absolute;
	top: calc(56% - 151.975px);
	width: 5px;
	z-index: 5;
}
 .hero-vertical-divider-1s3bhr6 { background: linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%); border-radius: 71%; filter: blur(1px); flex: 0 0 auto; height: 256px; left: -5px; overflow: hidden; position: absolute; right: -5px; top: calc(50% - 128.23px); will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-1upj1tb { background: linear-gradient(rgb(59, 130, 161), rgb(255, 255, 255) 48.1982%, rgb(59, 130, 161)); border-radius: 71%; filter: blur(2px); flex: 0 0 auto; height: 256px; left: -5px; overflow: hidden; position: absolute; right: -5px; top: calc(50% - 128.23px); will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-10tjtmj { background: linear-gradient(rgb(59, 118, 161), rgba(255, 255, 255, 0) 48.1982%, rgb(59, 118, 161)); border-radius: 71%; filter: blur(6px); flex: 0 0 auto; height: 256px; left: -5px; overflow: hidden; position: absolute; right: -5px; top: calc(50% - 128.23px); will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-1wsu3z { background: linear-gradient(180deg,var(--token-e3bf028b-7a91-484e-af62-4136fa757b4f, #8ec97c) 0%,rgba(255,255,255,0) 48.1981981981982%,rgb(59,118,161) 100%); border-radius: 71%; filter: blur(11px); flex: 0 0 auto; height: 255px; left: -5px; overflow: hidden; position: absolute; right: -8px; top: calc(50% - 127.635px); will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-1bchkje { background: linear-gradient(rgb(34, 50, 61), rgba(255, 255, 255, 0) 48.1982%, rgb(34, 50, 61)); border-radius: 71%; filter: blur(24px); flex: 0 0 auto; height: 256px; left: -5px; overflow: hidden; position: absolute; right: -5px; top: calc(50% - 128.23px); will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-snw03f { background: linear-gradient(180deg,var(--token-e3bf028b-7a91-484e-af62-4136fa757b4f, #8ec97c) 0%,rgba(255,255,255,0) 48.1981981981982%,rgb(29,51,99) 100%); border-radius: 71%; filter: blur(19px); flex: 0 0 auto; height: 277px; left: -5px; overflow: hidden; position: absolute; right: -5px; top: calc(50.3906% - 138.32px); will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-131ys35 { background: linear-gradient(180deg,var(--token-e3bf028b-7a91-484e-af62-4136fa757b4f, #8ec97c) 0%,rgba(255,255,255,0) 48.1981981981982%,rgb(29,51,99) 100%); border-radius: 71%; filter: blur(19px); flex: 0 0 auto; height: 277px; left: -5px; opacity: 0.83; overflow: hidden; position: absolute; right: -5px; top: calc(50.3906% - 138.32px); will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-11c4zb9 { flex: 0 0 auto; height: 109px; left: -5px; overflow: visible; position: absolute; right: -5px; top: calc(50% - 54.615px); z-index: 4; }
 .hero-vertical-divider-xv6k7o { background: linear-gradient(180deg,var(--token-e3bf028b-7a91-484e-af62-4136fa757b4f, #8ec97c) 0%,rgb(27,183,250) 100%); border-radius: 71%; filter: blur(11px); flex: 0 0 auto; height: 94px; left: 0px; overflow: hidden; position: absolute; right: 0px; top: calc(50% - 46.9px); will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-1eo91r7 { background: linear-gradient(180deg,var(--token-e3bf028b-7a91-484e-af62-4136fa757b4f, #8ec97c) 0%,rgb(0,234,255) 100%); border-radius: 71%; filter: blur(9px); flex: 0 0 auto; height: 108px; left: 0px; opacity: 0.3; overflow: hidden; position: absolute; right: 0px; top: calc(50% - 54.02px); will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-1l1f52x { background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 46.3964%, rgba(255, 255, 255, 0)); border-radius: 71%; filter: blur(1px); flex: 0 0 auto; inset: -81px 0px; overflow: hidden; position: absolute; will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-1oigs4x { background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 46.3964%, rgba(255, 255, 255, 0)); border-radius: 71%; filter: blur(0px); flex: 0 0 auto; height: 83px; left: calc(50% - 5.935px); overflow: hidden; position: absolute; top: calc(50% - 41.45px); width: 12px; will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-l1ymz6 { box-shadow: rgba(19, 47, 79, 0.32) 0px 0px 0px 90.23px; filter: blur(42px); flex: 0 0 auto; height: 109px; left: -5px; overflow: visible; position: absolute; right: -5px; top: calc(50% - 54.615px); z-index: 3; }
 .hero-vertical-divider-i1fyku { background: linear-gradient(180deg,var(--token-e3bf028b-7a91-484e-af62-4136fa757b4f, #8ec97c) 0%,rgb(27,183,250) 100%); border-radius: 59%; filter: blur(11px); flex: 0 0 auto; height: 94px; left: 0px; overflow: hidden; position: absolute; right: 0px; top: calc(50% - 46.9px); will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-z5kjho { background: linear-gradient(180deg,var(--token-e3bf028b-7a91-484e-af62-4136fa757b4f, #8ec97c) 0%,rgb(0,234,255) 100%); border-radius: 59%; filter: blur(9px); flex: 0 0 auto; height: 108px; left: 0px; opacity: 0.3; overflow: hidden; position: absolute; right: 0px; top: calc(50% - 54.02px); will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-6vro7j { background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 46.3964%, rgba(255, 255, 255, 0)); border-radius: 59%; filter: blur(1px); flex: 0 0 auto; height: 75px; left: calc(50% - 9.5px); overflow: hidden; position: absolute; top: calc(50% - 37.4px); width: 19px; will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-1snhbk { background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 46.3964%, rgba(255, 255, 255, 0)); border-radius: 59%; filter: blur(0px); flex: 0 0 auto; height: 46px; left: calc(50% - 5.935px); overflow: hidden; position: absolute; top: calc(50% - 23.15px); width: 12px; will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-1n84gs8 { filter: blur(0px); flex: 0 0 auto; height: 392px; mask: radial-gradient(50% 50%, rgb(0, 0, 0) 28.264%, rgba(0, 0, 0, 0) 100%) intersect, url("assets/images/hero-vertical-divider.svg") center center / 15px 15px alpha; overflow: visible; position: relative; width: 361px; }
 .hero-vertical-divider-1c8aw7g { background: linear-gradient(180deg,var(--token-e3bf028b-7a91-484e-af62-4136fa757b4f, #8ec97c) 0%,rgb(27,183,250) 100%); border-radius: 59%; filter: blur(5px); flex: 0 0 auto; gap: 10px; height: 292px; left: calc(50% - 12.465px); overflow: hidden; position: absolute; top: calc(50% - 145.97px); width: 25px; will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 10; }
 .hero-vertical-divider-1c39ln6 { background: linear-gradient(180deg,var(--token-e3bf028b-7a91-484e-af62-4136fa757b4f, #8ec97c) 0%,rgb(0,234,255) 100%); border-radius: 59%; filter: blur(5px); flex: 0 0 auto; gap: 10px; height: 335px; left: calc(50% - 18.405px); opacity: 0.62; overflow: hidden; position: absolute; top: calc(50% - 167.365px); width: 37px; will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 10; }
 .hero-vertical-divider-ds54rl { background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 46.3964%, rgba(255, 255, 255, 0)); border-radius: 59%; filter: blur(5px); flex: 0 0 auto; gap: 10px; height: 306px; left: calc(50% - 13.655px); overflow: hidden; position: absolute; top: calc(49.697% - 152.895px); width: 27px; will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 10; }
 .hero-vertical-divider-1dek80n { background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 46.3964%, rgba(255, 255, 255, 0)); border-radius: 59%; filter: blur(5px); flex: 0 0 auto; gap: 10px; height: 258px; left: calc(50% - 7.125px); overflow: hidden; position: absolute; top: calc(50% - 128.985px); width: 14px; will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 10; }
 .hero-vertical-divider-1vuzgyx { box-shadow: rgba(19, 47, 79, 0.18) 0px 0px 0px 90.23px; filter: blur(42px); flex: 0 0 auto; height: 393px; left: calc(50% - 132.98px); opacity: 0.75; overflow: visible; position: absolute; top: calc(50% - 196.5px); width: 266px; z-index: 3; }
 .hero-vertical-divider-11ssdoe { background: linear-gradient(180deg,var(--token-e3bf028b-7a91-484e-af62-4136fa757b4f, #8ec97c) 0%,rgb(27,183,250) 100%); border-radius: 59%; filter: blur(11px); flex: 0 0 auto; height: 395px; left: calc(50% - 66.49px); opacity: 0.38; overflow: hidden; position: absolute; top: calc(50% - 197.685px); width: 133px; will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-14ihxlp { background: linear-gradient(180deg,var(--token-e3bf028b-7a91-484e-af62-4136fa757b4f, #8ec97c) 0%,rgb(0,234,255) 100%); border-radius: 59%; bottom: 0px; filter: blur(9px); flex: 0 0 auto; left: calc(49.1071% - 90.83px); opacity: 0.26; overflow: hidden; position: absolute; top: 0px; width: 182px; will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-1yazi8h { background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 46.3964%, rgba(255, 255, 255, 0)); border-radius: 59%; filter: blur(1px); flex: 0 0 auto; height: 274px; left: calc(50% - 9.5px); overflow: hidden; position: absolute; top: calc(50% - 137.135px); width: 19px; will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .hero-vertical-divider-ikvrb { background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 46.3964%, rgba(255, 255, 255, 0)); border-radius: 59%; filter: blur(0px); flex: 0 0 auto; height: 170px; left: calc(50% - 5.935px); overflow: hidden; position: absolute; top: calc(50% - 84.89px); width: 12px; will-change: var(--hero-vertical-divider-will-change-override, transform); z-index: 2; }
 .zi_image-wrapper {
    position: relative;
    width: 210px;
    height: 300px;
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.zi_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 210px;
    height: 300px;
    object-fit: contain;
    backface-visibility: hidden;
    transition: opacity 0.5s ease;
	
}



.zi_img-alt {
    z-index: 2;
    filter: grayscale(0%) !important; /* عکس دوم همیشه رنگی است */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.zi_img-original {
    z-index: 1;
    filter: grayscale(100%) !important;
    opacity: 1;
    transition: opacity 0.5s ease;
}



/*End Hero*/
@keyframes gradient-bg{
	0% {
		background-position: 0% 50%;
	  }
	  50% {
		background-position: 100% 50%;
	  }
	  100% {
		background-position: 0% 50%;
	  }
}

.roll-title {
	text-align: center;
	line-height: 45px;
	font-family: Neue Metana Next Free Personal SemiBold;
	color: var(--base-color);
}
.line {
	font-size: 4rem;
	font-weight: bold;
	letter-spacing: 0;
	position: relative;
	margin: 0.5rem 0;
}
  .hidden-text {
    color: white;
    font-size: 2rem;
    position: absolute;
  }
  .line1 .t {
	left: 36.5rem;
	top: -8px;
}
.line1 .h {
	left: 38.9rem;
	top: 25px;
}
.line1 .e {
	left: 41.5rem;
	top: 60px;
}
.roll-text-paragarph {
	text-align: center;
	margin: 50px auto;
	color: #fff;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: -0.02em;
	width: 50%;
}
.roll-text-paragarph > div {
	margin: 50px auto;
	display: flex;
	align-items: center;
	gap: 25px;
	justify-content: center;
}
.roll-title-2 {
	text-align: center;
}
.roll-title-2 figure {
	max-width: 640px;
	margin: 0 auto;
}
.roll-title-2 figure img {
	width: 100%;
}
.upload-section {
	background-color: rgb(11, 13, 9);
	color: var(--base-color);
	font-size: 26px;
	padding: 20px;
	position: relative;
	background: linear-gradient(-45deg,#2a2b29,#192215,#395030);
	background-size: auto;
	background-size: 400% 400%;
	-webkit-animation: gradient-bg 8s ease infinite;
	animation: gradient-bg 17s ease infinite;
	/* max-height: 790px; */
}
.upload-after {
	z-index: 1;
	position: relative;
}
#fileList {
	z-index: 2;
	position: relative;
}
.upload-section .upload-before {
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	gap: 25px;
	position: relative;
}
.upload-button {
	--text:var(--base-color);
	background: #262626;
	box-shadow: none !important;
	color: var(--base-color);
	border-radius: 5px !important;
	font-size: 18px;
	text-shadow: 0 var(--font-shadow) 0 var(--text);
}
.upload-text.upload-text-or {
	color: #fff;
	font-size: 28px;
}
.info-text {
	color: rgb(94, 94, 94);
	text-align: center;
	margin: 30px auto;
	font-size: 16px;
}
.upload-button:hover {
	--text:var(--base-color);
	color: var(--base-color) !important;
	text-shadow: 0 var(--font-shadow) 0 var(--text);
}
.Upload-sec {
	margin: 50px auto;
}
.cloud-icon {
	aspect-ratio: 1;
	background-color: var(--base-color);
	mask-image: url('data:image/svg+xml,<svg aria-label="Cloud Upload" display="block" role="presentation" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg"><path d="M 19.35 6.04 C 18.67 2.59 15.64 0 12 0 C 9.11 0 6.6 1.64 5.35 4.04 C 2.34 4.36 0 6.91 0 10 C 0 13.31 2.69 16 6 16 L 19 16 C 21.76 16 24 13.76 24 11 C 24 8.36 21.95 6.22 19.35 6.04 Z M 19 14 L 6 14 C 3.79 14 2 12.21 2 10 C 2 7.95 3.53 6.24 5.56 6.03 L 6.63 5.92 L 7.13 4.97 C 8.08 3.14 9.94 2 12 2 C 14.62 2 16.88 3.86 17.39 6.43 L 17.69 7.93 L 19.22 8.04 C 20.78 8.14 22 9.45 22 11 C 22 12.65 20.65 14 19 14 Z M 8 9 L 10.55 9 L 10.55 12 L 13.45 12 L 13.45 9 L 16 9 L 12 5 Z" fill="var(--esondr, rgb(0,0,0))"/></svg>');
	mask-position: center;
	mask-repeat: no-repeat;
	width: 100px;
	height: 100px;
	opacity: 1;
	margin: 0;
}


.file-item {
	margin: 10px 0;
	border: 1px solid var(--base-color);
	border-radius: 5px;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.3s ease;
	width: 100%;
	box-sizing: border-box;
	padding: 14px;
	
}
.file-item>div {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.file-item-bg {
	position: absolute;
	left: 0;
	width: 0;
	background: var(--base-color);
	height: 100%;
	z-index: 0;
}
.file-info {
	display: flex;
	align-items: center;
	z-index: 1;
	font-size: 16px;
}
  .file-icon {
	font-size: 20px;
	margin-right: 10px;
  }
  .file-icon svg path {
	fill: var(--base-color) !important;
}
.status {
	color: var(--base-color);
	font-size: 14px;
	display: flex;
	align-items: center;
	z-index: 1;
	background: #262626;
	border-radius: 5px;
	padding: 9px 16px;
}

  .processing {
	position: relative;
  }
  .processing .status {
	position: relative;
	min-width: 120px;
  }
  .processing .status::after {
	content: 'Processing';
	animation: dots 1.5s infinite step-end;
  }
  .upload-bg {
	position: absolute;
	left: 0;
	top: 0;
	
}
  @keyframes dots {
	0% { content: 'Processing'; }
	25% { content: 'Processing.'; }
	50% { content: 'Processing..'; }
	75% { content: 'Processing...'; }
	100% { content: 'Processing'; }
  }
  .status-sec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.status-sec > span {
	background: #262626;
	border-radius: 5px;
	padding: 0 10px;
	text-align: center;
	vertical-align: ;
	line-height: ;
	cursor: pointer;
	transition: all .3s;
}
.status-sec > span.hide {
	display: none;
}
.detailes-item figure {
	width: 170px;
	height: 170px;
	object-fit: cover;
	margin: 0;
	border-radius: 5px;
	overflow: hidden;
}
.detailes-item figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.detailes-item {
	margin: 20px 0;
	width: 100%;
}
.detailes-item > div {
	display: flex;
	gap: 15px;
	font-size: 14px;
}
.detailes-item > div > div p {
	margin: 10px 0;
}
.loading-Proosesing {
	color: #fff !important;
	font-size: 15px;
	margin-top: 25px !important;
}
.percent-Proosesing {
	position: absolute;
	right: -12rem;
	font-size: 11rem;
	top: 60%;
	transform: translate(-50%,-50%);
	font-weight: bold;
}
.file-item-detailes{
	height: 0;
	visibility: hidden;
}
.file-item.active .file-item-detailes{
	height: auto;
	visibility: visible;
}
.file-item.active .status-sec > span.hide {
	display: block;
	color: var(--base-color);
}
.file-item.active .status-sec > span.show{
	display: none;
}
.file-item.active {
	border: 1px solid #000;
	background: var(--base-color);
	color: #000;
}
.file-item.active svg path {
	fill: #000 !important;
}
.add-more {
	background: #000;
	box-shadow: none !important;
	border: none;
	color: var(--base-color);
	padding: 15px 40px;
	margin: 30px auto 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border-radius: 5px;
	transition: all .3s;
}
.add-more b {
	background: var(--base-color);
	color: #000;
	border-radius: 50px;
	width: 25px;
	height: 24px;
	line-height: 20px;
}
.add-more span {
	font-size: 23px;
}
.add-more:hover {
	background: var(--base-color);
	color: #000;
}
.add-more:hover b{
	background: #000;
	color: var(--base-color);
}

.text-scroll-sec {
margin: 70px auto;
padding: 50px 0;
}
.text-scroll-sec h2 {
	color: var(--base-color);
	font-size: 60px;
	font-family: Neue Metana Next Free Personal SemiBold;
	text-transform: uppercase;
}
.text-container {
	line-height: 45px;
	margin: 30px auto;
}
.text-container span {
    transition: color 0.1s linear;
	font-size: 40px;
  }

  .text-container .active {
    color: #fff;
  }


.ticker-scroll-sec{
	overflow: hidden;
}
.ticker-container {
position: relative;
overflow: hidden !important;
}
.ticker-wrapper {
display: flex;
gap: 20px;
position: relative;
overflow: hidden;
}
.ticker {
    flex: 1; 
    display: flex;
    flex-direction: column;
    transition: transform 0.1s linear;
}
.ticker img {
    width: 100%;
    margin: 10px 0;
}
.ticker-container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(11px);
    top: 0;
    z-index: 99;
}
.ticker-text {
	position: absolute;
	top: 5%;
	transform: none;
	font-size: 140px;
	color: #fff;
	z-index: 99;
	text-transform: uppercase;
	font-weight: bold;
	font-family: Neue Metana Next Free Personal SemiBold;
	line-height: 130px;
	mix-blend-mode: difference;
	padding: 25px;
	transition: all 0.3s ease;
	transition: top 0.4s ease, position 0.4s ease;
  }


.About-sec {
	margin: 150px auto 50px auto;
} 
  .About-sec h2 ,.HWorks-sec H2{
	font-family: Neue Metana Next Free Personal SemiBold;
	font-size: 50px;
	text-align: center;
	text-transform: uppercase;
	color: var(--base-color);
	margin-bottom: 30px;
}
.about-box {
	padding: 25px;
	transition: all .3s;
	color: #fff;
	position: relative;
}

.about-box img {
	width: 100%;
	filter: grayscale(1);
	transition: all .3s;
}
.about-box figure {
	margin: 0;
	position: relative;
	overflow: hidden;
	transition: all .3s;
}
.about-box:hover figure::before {
	content: '';
	border: ;
	background: rgba(142,201,124,.3);
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
}
.about-box h3 {
	font-size: 22px;
}
.about-box p {
	color: rgb(107, 107, 107);
	font-size: 12px;
	font-family: Neue Montreal Medium;
}
.about-box:hover {
	background: #0f0f0f;
}
/* .about-box:hover img {
	filter: grayscale(0);
} */

.hover-border {
	opacity: 0;
	border-color: var(--base-color);
	width: 15px;
	height: 15px;
	position: absolute;
}
.hover-border-1 {
	top: 8px;
	left: 14px;
	rotate: 90deg;
}
.hover-border-2 {
	top: 14px;
	right: 8px;
	rotate: 180deg;
}
.hover-border-3 {
	bottom: 8px;
	right: 14px;
	rotate: 270deg;
}
.hover-border-4 {
	bottom: 14px;
	left: 8px;
	rotate: 0deg;
}

.about-box:hover .hover-border {
opacity: 1;
}




.HWorks-sec{
	margin: 150px 0 ;
}
      

.Subscription-sec h2{
	font-family: Neue Metana Next Free Personal SemiBold;
	font-size: 50px;
	text-align: center;
	color: var(--base-color);
	margin-bottom: 30px;
}
.iktab-content {
	display: none;
}
.iktab-content.active {
	display: block;
}
.iktab-links button.active {
	background-color: #ccc;
}
.plans {
	display: flex;
	justify-content: center;
	gap: 40px;
}
.plan-box {
	background: #131317;
	color: #fff;
	position: relative;
	width: 400px;
	overflow: hidden;
}
.plan-box-top,.plan-box-bottom  {
	padding: 20px;
}
.plan-box-top > figure {
	background: #000;
	position: relative;
	padding: 20px;
}
.plan-box-top > figure > h3, .plan-box-top > figure > p {
	margin: 0;
	position: relative;
	z-index: 1;
}
.plan-box-top > figure > h3 {
	margin-bottom: 40px;
	font-size: 22px;
	font-weight: 500;
	font-family: Neue Montreal Regular;
	position: relative;
	z-index: 1;
}
.plan-box-top > figure > p {
	font-size: 14px !important;
	color: rgb(115, 115, 121);
}
.plan-box-top > ul {
	margin: 0;
	padding: 0;
	padding-left: 30px;
}
.plan-box-top > ul li {
	font-size: 16px;
	margin: 25px 0 25px 15px;
	position: relative;
}
.plan-box-top > ul li::before {
	content: '';
	position: absolute;
	left: -30px;
	top: 0;
	/* transform: translateY(-50%); */
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg aria-label='Check' display='block' role='presentation' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 5.59 10.58 L 1.42 6.41 L 0 7.82 L 5.59 13.41 L 17.59 1.41 L 16.18 0 Z' fill='%23ffffff' height='13.409979999999997px' id='KG12ReyXf' opacity='1' transform='translate(3.205 5.295)' width='17.590040000000002px'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	color: ;
}
.plan-box  .btn.custom-button > div {
	justify-content: center !important;
}
.plan-box-bottom > .price {
	font-size: 23px;
}

.plan-box-bottom {
	padding: 10px 40px 35px 40px;
}
.Not-included::before {
	background: url('data:image/svg+xml,<svg aria-label="Close" display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 14 1.41 L 12.59 0 L 7 5.59 L 1.41 0 L 0 1.41 L 5.59 7 L 0 12.59 L 1.41 14 L 7 8.41 L 12.59 14 L 14 12.59 L 8.41 7 Z" fill="%23ffffff" height="14px" id="tANCHQdDU" opacity="1" transform="translate(5 5)" width="14px"/></svg>') !important;
}
.Not-included {
	opacity: .2;
}
.Subscription-sec .iktab-links {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px 0 50px 0;
}
.Subscription-sec .iktab-link {
	background: none;
	color: #fff;
	font-family: Neue Montreal Regular;
	padding: 14px 50px;
	font-size: 14px;
	border: 1px solid #484848;
}
.Subscription-sec .iktab-link.active {
	background: #fff !important;
	color: #000 !important;
}
.plan-box-top > figure span {
	color: rgb(73, 226, 62);
	font-size: 13px;
	margin-left: 10px;
	font-family: Neue Montreal regular;
	letter-spacing: 0.5px;
}
.plan-box-top > figure video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 131px;
	object-fit: cover;
	z-index: 0;
}
.video-bg p{color:#fff !important;}


.LogoMotion-bottom {
	text-align: center;
	margin: -50px 0 150px 0;
	color: #fff;
	font-size: 18px;
}


footer {
	position: relative;
	margin: 50px auto 0 auto;
	bottom: 0;
	min-height: 550px;
	background: url('assets/images/footer.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;
overflow: hidden;
}
.footer-left-logo {
	width: 130px;
}
.footer-menu {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	font-size: 22px;
}
.footer-nav {
	padding: 30px 0;
	background: rgba(0,0,0,0.2);
}
.footer-menu a {
	color: #fff;
	cursor: pointer;
}




#canvas-container {
	position: relative;
	width: 100%;
	height: 470px;
	/* overflow: hidden; */
	cursor: grab;
	margin: -80px 0;
}
  .text-block {
	position: absolute;
	/* padding: 0.8em 1.2em; */
	/* color: white; */
	text-align: center;
	user-select: none;
	font-size: 28px;
	font-weight: bold;
	pointer-events: auto;
	transition: box-shadow 0.2s ease;
	border: 2px solid rgba(255,255,255,0.2);
	backdrop-filter: blur(10px);
	font-family: Neue Montreal Italic;
	color: #000;
	background: #fff;
	border-radius: 50px;
	padding: 14px 40px;
}
  
  .text-block:hover {
    box-shadow: 0 0 20px rgba(255,255,255,0.3);
  }
  
  /* Different shapes */
  .react { 
    background: linear-gradient(135deg, #61dafb, #21a0c4);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
  }
  
  .typescript { 
    background: linear-gradient(135deg, #3178c6, #235a97);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    width: 90px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
  }
  
  .motion { 
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    border-radius: 15px;
    transform: rotate(45deg);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .tailwind { 
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    width: 85px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .drei { 
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 50% 10px 50% 10px;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .matter { 
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    width: 80px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .text-block-img img {
	max-width: 170px;
}
.text-block-img {
	border-radius: 25px;
}

.text-block-svg {
	background: #000;
	border-radius: 50px;
	width: 100px;
	height: 100px;
	text-align: center;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	padding: 19px;
}


.footer-big-logo {
	image-rendering: pixelated;
	flex-shrink: 0;
	background-size: 100% 100%;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1199 269" overflow="visible"><g><path d="M 450.61 85.033 L 607.118 85.033 C 610.2 85.033 612.705 82.493 612.705 79.367 L 612.705 5.667 C 612.705 2.54 610.2 0 607.118 0 L 537.608 0 C 529.116 0 520.979 3.427 514.977 9.515 L 442.755 82.764 L 370.534 156.012 C 364.533 162.1 361.163 170.357 361.167 178.966 L 361.167 249.464 C 361.167 252.59 363.672 255.131 366.754 255.131 L 439.421 255.131 C 442.503 255.131 445.008 252.59 445.008 249.464 L 445.008 90.73 C 445.008 87.604 447.513 85.064 450.595 85.064 Z" fill="rgb(0, 0, 0)"></path><path d="M 666.41 255.1 C 659.706 255.1 654.272 249.589 654.272 242.79 L 654.272 12.311 C 654.272 5.512 659.706 0 666.41 0 L 725.975 0 C 732.678 0 738.113 5.512 738.113 12.311 L 738.113 242.79 C 738.113 249.589 732.678 255.1 725.975 255.1 Z" fill="rgb(0, 0, 0)"></path><path d="M 1193.413 89.694 C 1194.954 89.694 1196.347 89.028 1197.37 87.951 C 1198.378 86.873 1199 85.384 1199 83.72 L 1199 6.037 C 1199 4.39 1198.378 2.9 1197.37 1.807 C 1196.362 0.73 1194.969 0.064 1193.413 0.064 L 1126.141 0.064 C 1117.649 0.064 1109.512 3.677 1103.51 10.093 L 1072.105 43.667 L 1031.318 87.269 C 1019.743 99.644 1004.566 105.839 989.39 105.839 C 974.213 105.839 959.052 99.644 947.462 87.269 L 906.675 43.667 L 875.27 10.093 C 869.269 3.674 861.128 0.066 852.639 0.064 L 785.367 0.064 C 783.826 0.064 782.433 0.73 781.41 1.807 C 780.402 2.884 779.78 4.374 779.78 6.037 L 779.78 83.72 C 779.78 85.368 780.402 86.858 781.41 87.951 C 782.418 89.028 783.811 89.694 785.367 89.694 L 920.488 89.694 C 943.668 89.694 962.475 109.736 962.564 134.516 C 962.475 159.296 943.668 179.339 920.488 179.339 L 785.367 179.339 C 783.826 179.339 782.433 180.004 781.41 181.082 C 780.387 182.159 779.78 183.648 779.78 185.312 L 779.78 262.995 C 779.78 264.643 780.402 266.132 781.41 267.225 C 782.418 268.319 783.811 268.968 785.367 268.968 L 852.639 268.968 C 861.131 268.968 869.268 265.356 875.27 258.939 L 906.675 225.366 L 947.462 181.763 C 959.037 169.389 974.213 163.194 989.39 163.194 C 1004.566 163.194 1019.728 169.389 1031.318 181.763 L 1072.105 225.366 L 1103.51 258.939 C 1109.512 265.356 1117.649 268.968 1126.141 268.968 L 1193.413 268.968 C 1194.954 268.968 1196.347 268.303 1197.37 267.225 C 1198.392 266.148 1199 264.659 1199 262.995 L 1199 185.312 C 1199 183.664 1198.378 182.175 1197.37 181.082 C 1196.362 179.988 1194.969 179.339 1193.413 179.339 L 1057.847 179.339 C 1034.919 179.339 1016.304 159.518 1016.215 135.007 L 1016.215 134.025 C 1016.304 109.514 1034.919 89.694 1057.847 89.694 L 1193.398 89.694 Z M 323.315 0.064 L 38.638 0.064 C 27.967 0.064 18.318 4.691 11.323 12.153 C 4.328 19.616 0.015 29.946 0.015 41.354 L 0.015 50.21 C 0.015 51.858 0.637 53.347 1.645 54.441 C 2.653 55.534 4.046 56.184 5.602 56.184 L 78.268 56.184 C 79.81 56.184 81.203 55.518 82.226 54.441 C 83.233 53.363 83.856 51.874 83.856 50.21 L 83.856 24.02 C 83.856 20.344 85.249 17.033 87.502 14.625 C 89.828 12.125 92.992 10.722 96.291 10.727 L 245.032 10.727 C 248.47 10.727 251.568 12.216 253.82 14.625 C 256.158 17.112 257.471 20.494 257.466 24.02 L 257.466 65.785 C 257.466 68.811 256.325 71.552 254.458 73.533 C 252.538 75.592 249.93 76.75 247.21 76.749 L 140.842 76.749 C 139.3 76.749 137.907 77.414 136.885 78.492 C 135.877 79.569 135.254 81.059 135.254 82.722 L 135.254 139.301 C 135.254 140.949 135.877 142.438 136.885 143.531 C 137.892 144.609 139.286 145.274 140.842 145.274 L 247.21 145.274 C 250.041 145.274 252.605 146.494 254.458 148.491 C 256.31 150.487 257.466 153.212 257.466 156.238 L 257.466 190.81 C 257.466 193.836 256.325 196.577 254.458 198.558 C 252.538 200.617 249.93 201.775 247.21 201.774 L 110.741 201.774 C 103.316 201.774 96.587 198.558 91.726 193.361 C 86.678 187.973 83.846 180.658 83.856 173.033 L 83.856 162.291 C 83.856 160.643 83.233 159.154 82.226 158.06 C 81.218 156.983 79.825 156.318 78.268 156.318 L 5.587 156.318 C 4.046 156.318 2.653 156.983 1.63 158.06 C 0.622 159.138 0 160.627 0 162.291 L 0 176.249 C 0 201.869 9.708 225.049 25.418 241.828 C 41.113 258.606 62.81 269 86.761 269 L 189.795 269 C 198.287 269 206.424 265.388 212.426 258.971 L 272.169 195.104 L 331.911 131.237 C 337.913 124.82 341.293 116.121 341.293 107.043 L 341.293 19.315 C 341.293 14.007 339.277 9.206 336.031 5.72 C 332.771 2.235 328.28 0.096 323.315 0.096 Z" fill="rgb(0, 0, 0)"></path></g></svg>');
	width: 100%;
	height: 250px;
	position: absolute;
	bottom: 20%;
}

.hworks-item {
	height: 100vh !important;
	position: sticky !important;
	top: 0 !important;
	padding: 100px 0;
}
.hworks-item h3 {
	font-size: 42px;
	color: #fff;
	font-family: Neue Montreal Regular;
	border-bottom: 1px solid #575757;
	padding: 30px 0;
	margin: 0 0 30px 0;
}
.hworks-item p {
	font-size: 24px;
	color: rgb(107, 107, 107);
	font-family: Neue Montreal Light;
	font-weight: 900;
	line-height: 30px;
}
.hworks-content a {
	display: none !important;
}
.hworks-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.hworks-item.hworks-item-2 {
	background: var(--base-color);
	color: #000 !important;
}
.hworks-item.hworks-item-2 p,.hworks-item.hworks-item-2 h3 {
	color: #000 !important;
}

.hworks-item-1 { z-index: 1; }
.hworks-item-2 { z-index: 2; }
.hworks-item-3 { z-index: 3; background: #000;}

.mobile-menu-wrapper{display: none;}
.js-stack-cards {
    position: relative !important;
    overflow: visible !important;
}
  
/***** ADD MOBILE ONLY CSS HERE  *****/
@media only screen and (max-width: 48em) {
	.mobile-menu-wrapper {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	z-index: 1000;
	}
	.mobile-menu-wrapper.show {
	opacity: 1;
	pointer-events: auto;
	}
	.mobile-menu-content {
		width: 280px;
		max-width: 80%;
		height: 100%;
		padding: 20px;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		border-radius: 32px 0px 32px 32px;
		box-shadow: 0px 11px 26px 0px rgba(0, 0, 0, 0.25);
		backdrop-filter: blur(12px);
		background: rgba(33, 30, 26, 0.72);
	}
	.mobile-menu-wrapper.show .mobile-menu-content {
	transform: translateX(0);
	}
	.close-btn {
	background: none;
	border: none;
	color: white;
	font-size: 24px;
	cursor: pointer;
	margin-bottom: 20px;
	}
	.mobile-menu-content ul {
	list-style: none;
	padding: 0;
	}
	.mobile-menu-content a {
		text-decoration: none;
		color: var(--color-white-300);
		font-family: Century Gothic;
		font-size: 14px;
		font-weight: 400;
		line-height: 17px;
		letter-spacing: 0%;
		text-align: left;
		border-bottom: 1px solid rgb(127, 125, 121);
		padding: 24px 0;
		display: block;
	}
	.mobile-menu-content a:hover {
		background: linear-gradient(-45.42deg, rgb(193, 158, 109),rgb(193, 157, 88)) !important;
		-webkit-background-clip: text!important;
		-webkit-text-fill-color: transparent!important;
		background-clip: text!important;
		text-fill-color: transparent!important;
		font-family: Century Gothic;
		font-size: 14px;
		font-weight: 400;
		line-height: 17px;
		letter-spacing: 0%;
		text-align: left;
	}
	.roll-text-paragarph {
		margin: 20px auto;
		width: 100%;
	}
	.btn {
		font-size: 12px;
		padding: 12px 30px;
	}
	.Upload-sec {
		margin: 20px auto;
	}
	.upload-section {
		font-size: 20px;
	}
	.cloud-icon {
		width: 75px;
		height: 75px;
	}
	.upload-button {
		font-size: 16px;
	}
	.upload-text.upload-text-or {
		font-size: 22px;
	}
	.upload-section .upload-before {
		min-height: 285px;
		gap: 15px;
	}
	.file-info {
		font-size: 11px;
	}
	.status {
		font-size: 10px;
		display: flex;
		padding: 7px 12px;
	}
	.processing .status {
		min-width: 50px;
	}
	.percent-Proosesing {
		
		display: none;
	}
	.detailes-item > div {
		gap: 11px;
		font-size: 11px;
	}
	.loading-Proosesing {
		color: #fff !important;
		font-size: 11px;
		margin-top: 15px !important;
	}
	.add-more {
		padding: 12px 20px;
	}
	.add-more span {
		font-size: 16px;
	}
	.info-text {
		margin: 20px auto;
		font-size: 14px;
	}
	.text-scroll-sec {
		margin: 20px auto;
		padding: 40px 0;
	}
	.text-scroll-sec h2 {
		font-size: 30px;
	}
	.text-container {
		line-height: 25px;
		margin: 20px auto;
	}
	.text-container span {
		transition: color 0.1s linear;
		font-size: 17px;
	}
	.ticker-text {
		font-size: 35px;
		line-height: 50px;
	}
	.About-sec h2, .HWorks-sec H2 {
		font-size: 30px;
	}
	.About-sec {
		margin: 70px auto 30px auto;
	}
	.HWorks-sec {
		margin: 70px 0 0 0;
	}
	.hworks-item h3 {
	font-size: 22px;
	padding: 20px 0;
	margin: 0 0 30px 0;
}
.hworks-content {
	flex-direction: column;
}
.hworks-item p {
	font-size: 16px;
}
.Subscription-sec h2 {
	font-size: 30px;
}
.plans {

	flex-direction: column;
}
.plan-box {
	width: auto;
}
.plan-box-top > figure > h3 {
	margin-bottom: 15px;
	font-size: 18px;
}
.plan-box-top > ul li {
	font-size: 14px;
	margin: 20px 0 15px 15px;
	position: relative;
}
.plan-box-bottom > .price {
	font-size: 20px;
}
.plan-box-top > figure video {
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.footer-menu {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	font-size: 14px;
	padding: 0;
}
.footer-left-logo {
	width: 130px;
	text-align: center;
	margin: 15px auto;
}
.footer-big-logo {
	height: 60px;
	bottom: 20%;
}
footer {
	min-height: 325px;
}
.navbar-dektop-menu,.right-btn > .btn {
	display: none;
}
.humberger-menu {
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-items: end;
	padding: 14px;
	cursor: pointer;
}
.humberger-menu span {
	width: 25px !important;
	height: .5px !important;
	background: #b2b2b2 !important;
	display: block;
}
.mobile-menu-wrapper {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	z-index: 1000;
	}
	.mobile-menu-wrapper.show {
	opacity: 1;
	pointer-events: auto;
	}
	.mobile-menu-content {
		width: 280px;
		max-width: 80%;
		height: 100vh;
		padding: 20px;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		border-radius: 32px 0px 32px 32px;
		box-shadow: 0px 11px 26px 0px rgba(0, 0, 0, 0.25);
		backdrop-filter: blur(15px);
		background: rgba(142,201,124,.4);
	}
	.mobile-menu-wrapper.show .mobile-menu-content {
	transform: translateX(0);
	}
	.close-btn {
	background: none;
	border: none;
	color: white;
	font-size: 24px;
	cursor: pointer;
	margin-bottom: 20px;
	}
	.mobile-menu-content ul {
	list-style: none;
	padding: 0;
	}
	.mobile-menu-content a {
		text-decoration: none;
		color: var(--color-white-300);
		font-family: Century Gothic;
		font-size: 14px;
		font-weight: 400;
		line-height: 17px;
		letter-spacing: 0%;
		text-align: left;
		border-bottom: 1px solid rgb(127, 125, 121);
		padding: 24px 0;
		display: block;
		color: #fff;
	}
	.mobile-menu-content ul a.active {
		color: var(--base-color) !important;
	}
	.mobile-menu-content a:hover {
		background: linear-gradient(-45.42deg, rgb(193, 158, 109),rgb(193, 157, 88)) !important;
		-webkit-background-clip: text!important;
		-webkit-text-fill-color: transparent!important;
		background-clip: text!important;
		text-fill-color: transparent!important;
		font-family: Century Gothic;
		font-size: 14px;
		font-weight: 400;
		line-height: 17px;
		letter-spacing: 0%;
		text-align: left;
	}
	.btn.mobileMenu-btn {
		color: #000 !important;
		text-align: center !important;
		padding: 15px;
		margin: 40px auto;
	}
}