/* root */
:root {
	--white: rgb(249 249 249);
	--black-clr: rgb(18 18 18);
	--pr-clr: rgb(250 159 111);
	--sec-clr: rgb(250 105 124);
}

/* fonts */
@font-face {
	font-family: "dana";
	src: url(fonts/dana/dana-fanum-regular.woff2);
}

@font-face {
	font-family: "dana-bold";
	src: url(fonts/dana/dana-fanum-bold.woff2);
}

/* ---------- reset default styles ---------- */

*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

* {
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
}

ul li {
	list-style: none;
}

img,
picture {
	display: block;
	image-rendering: auto;
	max-width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input,
button,
select,
textarea {
	font-family: inherit;
	border: none;
	outline: none;
	background: transparent;
}

button {
	cursor: pointer;
}

html::-webkit-scrollbar {
	width: 6px;
}
html::-webkit-scrollbar-thumb {
	background: var(--sec-clr);
}

html,
body {
	scroll-behavior: smooth;
	scroll-padding: 0;
	direction: rtl;
	text-align: right;
	text-rendering: optimizeLegibility;
}

html {
	scrollbar-width: 1px;
}

body {
	font:
		16px "dana",
		sans-serif;
	line-height: 2;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;

	p {
		color: rgb(201 201 201 / 70%);
	}
}

body.ov-hidden {
	overflow: hidden;
}

a:link,
a:visited,
a:hover,
a:active,
a:focus {
	text-decoration: none;
	-webkit-transition: 200ms ease-in-out;
	-o-transition: 200ms ease-in-out;
	transition: 200ms ease-in-out;
}

h1,
h2,
h3 {
	font-family: "dana-bold";
}
/*  */

/* app styles write here */
.header {
	z-index: 99;
	-webkit-transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
	-o-transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
	transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
}

.scrollup {
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

.scrolldown {
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}

.cursor-dot {
	-webkit-box-shadow: 0 0 12px var(--pr-clr);
	box-shadow: 0 0 12px var(--pr-clr);
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: scale 0.3s cubic-bezier(0.87, 0, 0.13, 1);
	-o-transition: scale 0.3s cubic-bezier(0.87, 0, 0.13, 1);
	transition: scale 0.3s cubic-bezier(0.87, 0, 0.13, 1);
}

.cursor-dot.on-link {
	scale: 3;
	border: 1px solid var(--white);
	background: transparent;
}

/*  */
.title-pr-text {
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		bottom: -10px;
		background: url(assest/icon/line.png) no-repeat bottom;
		background-size: contain;

		-webkit-animation: line 3s cubic-bezier(0.87, 0, 0.13, 1) infinite alternate;

		animation: line 3s cubic-bezier(0.87, 0, 0.13, 1) infinite alternate;
	}

	&::before {
		content: attr(data-content);
		color: transparent;
		background: -o-linear-gradient(45deg, var(--pr-clr), var(--sec-clr));
		background: linear-gradient(45deg, var(--pr-clr), var(--sec-clr));
		-webkit-background-clip: text;
		background-clip: text;
		position: absolute;
		overflow: hidden;
		white-space: nowrap;

		-webkit-animation: type 3s cubic-bezier(0.87, 0, 0.13, 1) infinite alternate;

		animation: type 3s cubic-bezier(0.87, 0, 0.13, 1) infinite alternate;
	}
}

@-webkit-keyframes line {
	from {
		-webkit-clip-path: inset(0 0 0 100%);
		clip-path: inset(0 0 0 100%);
	}

	to {
		-webkit-clip-path: inset(0 0 0 0);
		clip-path: inset(0 0 0 0);
	}
}

@keyframes line {
	from {
		-webkit-clip-path: inset(0 0 0 100%);
		clip-path: inset(0 0 0 100%);
	}

	to {
		-webkit-clip-path: inset(0 0 0 0);
		clip-path: inset(0 0 0 0);
	}
}

@-webkit-keyframes type {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

@keyframes type {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

.box-fig {
	&::after {
		text-align: center;
		width: 90%;
		content: attr(data-tooltip);
		position: absolute;
		top: -100%;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		z-index: 20;
		background: var(--black-clr);
		border: 1px solid var(--pr-clr);
		border-radius: 4px;
		-webkit-box-shadow: 0 0 20px rgb(250 125 104 / 90%);
		box-shadow: 0 0 20px rgb(250 125 104 / 90%);
		color: var(--white);
		padding: 0.3rem 0.6rem;
		pointer-events: none;
		opacity: 0;
		-webkit-transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
		-o-transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
		transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
	}

	&:hover::after,
	&:focus-within::after {
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		top: 50%;
		opacity: 1;
	}

	img {
		-webkit-transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
		-o-transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
		transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
		&:hover {
			scale: 1.3;
			rotate: -10deg;
		}
	}
}

.option-fig {
	-webkit-filter: drop-shadow(0 6px 6px rgb(0 0 0 / 50%));
	filter: drop-shadow(0 6px 6px rgb(0 0 0 / 50%));
}

.hero-boxes {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.tech-box {
	-webkit-box-shadow: 0px 20px 20px -10px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 20px 20px -10px rgba(0, 0, 0, 0.5);
	-webkit-transition: 0.5s cubic-bezier(0.87, 0, 0.13, 1);
	-o-transition: 0.5s cubic-bezier(0.87, 0, 0.13, 1);
	transition: 0.5s cubic-bezier(0.87, 0, 0.13, 1);
	border: 1px solid rgb(145 94 255 / 50%);

	&:hover {
		-webkit-box-shadow: none;
		box-shadow: none;
		-webkit-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		transform: translateY(-10px);
		border-color: rgb(145 94 255 / 100%);
	}
}

.footer {
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		-webkit-mask-image: url(assest/bg/footer-shape.png);
		mask-image: url(assest/bg/footer-shape.png);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: cover;
		mask-size: cover;
		background: -webkit-gradient(linear, left top, right top, from(var(--pr-clr)), to(var(--sec-clr)));
		background: -o-linear-gradient(left, var(--pr-clr), var(--sec-clr));
		background: linear-gradient(to right, var(--pr-clr), var(--sec-clr));
		opacity: 0.1;
		scale: 1.2;
		z-index: -1;
	}
}

.mask,
.close {
	-webkit-animation: scaleIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation: scaleIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@-webkit-keyframes scaleIn {
	from {
		scale: 0;
	}
	to {
		scale: 1;
	}
}

@keyframes scaleIn {
	from {
		scale: 0;
	}
	to {
		scale: 1;
	}
}

.imgAnimation {
	-webkit-animation: loadIn 1s cubic-bezier(0.45, 0, 0.55, 1) forwards;
	animation: loadIn 1s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

@-webkit-keyframes loadIn {
	0% {
		-webkit-clip-path: inset(49% 100% 49% 0);
		clip-path: inset(49% 100% 49% 0);
	}

	70% {
		-webkit-clip-path: inset(49% 0 49% 0);
		clip-path: inset(49% 0 49% 0);
	}

	100% {
		-webkit-clip-path: inset(0 0 0 0);
		clip-path: inset(0 0 0 0);
	}
}

@keyframes loadIn {
	0% {
		-webkit-clip-path: inset(49% 100% 49% 0);
		clip-path: inset(49% 100% 49% 0);
	}

	70% {
		-webkit-clip-path: inset(49% 0 49% 0);
		clip-path: inset(49% 0 49% 0);
	}

	100% {
		-webkit-clip-path: inset(0 0 0 0);
		clip-path: inset(0 0 0 0);
	}
}

.slider {
	-webkit-mask-image: -webkit-gradient(
		linear,
		left top,
		right top,
		from(transparent),
		color-stop(10%, #000),
		to(transparent)
	);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
	mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(10%, #000), to(transparent));
	mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);

	&:hover li {
		-webkit-animation-play-state: paused;
		animation-play-state: paused;
		-webkit-filter: grayscale(100%);
		filter: grayscale(100%);
	}
}

.slider ul {
	min-width: calc(500px * var(--quantity));
}

.slider ul li {
	-webkit-animation: autoRun var(--time) linear infinite;
	animation: autoRun var(--time) linear infinite;
	-webkit-animation-delay: calc(var(--time) / var(--quantity) * (var(--index) - 1) - 9s);
	animation-delay: calc(var(--time) / var(--quantity) * (var(--index) - 1) - 9s);

	&:hover {
		-webkit-filter: grayscale(0);
		filter: grayscale(0);
		border-color: #f87171;
	}
}

@-webkit-keyframes autoRun {
	to {
		left: -200px;
	}
}

@keyframes autoRun {
	to {
		left: -200px;
	}
}
/* generated by ai */
.help-button {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	background: -o-linear-gradient(315deg, rgb(250, 105, 124), rgb(250, 159, 111));
	background: linear-gradient(135deg, rgb(250, 105, 124), rgb(250, 159, 111));
	border: 2px solid white;
	border-radius: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	cursor: pointer;
	-webkit-transition:
		border-color 0.3s ease,
		-webkit-transform 0.3s ease,
		-webkit-box-shadow 0.3s ease;
	transition:
		border-color 0.3s ease,
		-webkit-transform 0.3s ease,
		-webkit-box-shadow 0.3s ease;
	-o-transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		border-color 0.3s ease;
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		border-color 0.3s ease;
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		border-color 0.3s ease,
		-webkit-transform 0.3s ease,
		-webkit-box-shadow 0.3s ease;
	-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	-webkit-animation: slideIn 1s cubic-bezier(0.45, 0, 0.55, 1) forwards;
	animation: slideIn 1s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

.help-button:hover {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	border-color: rgba(255, 255, 255, 0.7);
}

.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.modal-content {
	background: rgb(18, 18, 18);
	border: 2px solid gray;
	border-radius: 10px;
	padding: 20px;
	position: relative;
	-webkit-animation: slideIn 0.5s;
	animation: slideIn 0.5s;
}

@-webkit-keyframes slideIn {
	from {
		-webkit-transform: translateY(-50px);
		transform: translateY(-50px);
		opacity: 0;
	}
	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideIn {
	from {
		-webkit-transform: translateY(-50px);
		transform: translateY(-50px);
		opacity: 0;
	}
	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}