/* -------------------- CSS Reset -------------------- */
* {
	margin: 0px;
	padding: 0px;
	font-weight: 600;
	user-select: none;
	-webkit-user-select: none;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
/* no link underline */
a,
ul,
ol {
	text-decoration: none;
	list-style: none;
	color: var(--text);
}
/* -------------------- Direction Control  -------------------- */
:root[dir="rtl"] {
	--cta-translate: -70%;
	--cta-hover-translate: 10%;
}
:root[dir="ltr"] {
	--cta-translate: 70%;
	--cta-hover-translate: -10%;
}
/* hero BG flip */
:root[dir="ltr"] .hero-section {
	--hero-bg: url("/img/bg/H-dark-flip.jpg");
}
.light-theme[dir="ltr"] .hero-section {
	--hero-bg: url("/img/bg/H-light-flip.jpg");
}
/* -------------------- Themes Light / Dark  -------------------- */
/* Default Theme: Dark */
:root {
	--bg: linear-gradient(to left, #252525a5, #000000);
	--bg-img: url("/img/bg/dark-bg.jpg");
	--bg-mobile-img: url("/img/bg/dark-mobile-bg.jpg");
	--header-accent: #ffffff0f;
	--hero-bg: url("/img/bg/H-dark.jpg");
	--hero-logo: url("/img/h-logo-dark.png");

	--glassy: #ffffff31;
	--glass-border: 1px solid rgba(88, 88, 88, 0.4);
	--text: #f1f1f1;
	--card-bg: linear-gradient(to right, #43434378, #151f3e43);
	--site-title: linear-gradient(
		to bottom,
		rgba(255, 255, 255) 30%,
		rgb(255 255 255 / 0%) 80%
	);
	--h-subt: #b8e3ff;
	--page-title: linear-gradient(
		to bottom,
		rgba(255, 255, 255) 30%,
		rgb(255 255 255 / 0%) 80%
	);
	--accent: orange;
	--accent-hover: rgb(255, 89, 0);
	--section-title: linear-gradient(
		to Right,
		var(--accent) 30%,
		rgba(182, 238, 16, 0.958) 80%
	);
	--menu-bg: #242424;
	--form-comment: Chartreuse;
	--form-item-bg: rgba(182, 182, 182, 0.174);
	--form-focus-bg: rgba(174, 124, 67, 0.23);
	--form-sectiontitle-text: lime;
	--form_sectiontitle-bg: rgba(224, 255, 255, 0.252);
	--form-placeholder-text: rgb(179, 179, 179);
	--radio-group-color: lime;

	--box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

	--li-1: red;
	--li-2: orange;
	--li-3: yellow;
	--li-4: lime;
	--li-5: cyan;
	--mix-theme: black;
	--theme-icon: orange;
	--theme-icon-bg: rgba(255, 255, 255, 0.2);
}

/* -----------------------------
   Light Theme
----------------------------- */
.light-theme {
	--bg: linear-gradient(110deg, #f3f3f3a5, #61f8f8);
	--bg-img: url("/img/bg/light-bg.jpg");
	--bg-mobile-img: url("/img/bg/light-mobile-bg.jpg");
	--header-accent: rgba(0, 128, 128, 0.5);
	--hero-bg: url("/img/bg/H-light.jpg");
	--hero-logo: url("/img/h-logo-light.png");

	--glassy: #ffffff31;
	--glass-border: 1px solid rgba(151, 151, 151, 0.6);
	--text: #111827;
	--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	--card-bg: transparent;
	--site-title: linear-gradient(
		to bottom,
		rgba(255, 255, 255) 30%,
		rgb(255 255 255 / 0%) 80%
	);
	--h-subt: lime;
	--page-title: linear-gradient(
		to bottom,
		var(--accent) 30%,
		rgba(165, 165, 165, 0.3) 80%
	);
	--accent: teal;
	--accent-hover: rgb(0, 209, 209);
	--section-title: linear-gradient(
		to Right,
		var(--accent) 30%,
		rgb(146, 192, 8) 80%
	);
	--menu-bg: #ececec;
	--form-comment: magenta;
	--form-focus-bg: rgba(184, 204, 209, 0.444);
	--form-sectiontitle-text: green;
	--form_sectiontitle-bg: rgba(102, 233, 152, 0.25);
	--form-placeholder-text: rgba(44, 184, 200, 0.674);
	--radio-group-color: lime;

	--box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

	--li-1: red;
	--li-2: darkorange;
	--li-3: magenta;
	--li-4: green;
	--li-5: blue;
	--mix-theme: white;

	--theme-icon: white;
	--theme-icon-bg: black;
}
#theme-switch {
	color: var(--theme-icon);
	background: var(--theme-icon-bg);
	border-radius: 50%;
}
/* -----------------------------
   Global Transition
----------------------------- */
:root,
.light-theme {
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease,
		fill 0.25s ease,
		box-shadow 0.25s ease;
}

/* Font declare */
@font-face {
	font-family: "Sahel";
	src: url("/fonts/Sahel-FD.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Sahel";
	src: url("/fonts/Sahel-FD-Bold.woff") format("woff");
	font-weight: 700;
	font-style: bold;
}

html[dir="rtl"] {
	font-family:
		"Sahel",
		"Open Sans",
		"Segoe UI",
		system-ui,
		Tahoma,
		sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont;
}

html[dir="ltr"] {
	font-family:
		"Open Sans",
		"Segoe UI",
		system-ui,
		Tahoma,
		-apple-system,
		BlinkMacSystemFont,
		-apple-system,
		BlinkMacSystemFont,
		Cantarell;
}

/* Set Body & main to shoot footer down */
body,
html {
	height: 100%;
	display: flex;
	flex-direction: column;
	scrollbar-gutter: stable;
	scroll-behavior: smooth;
}
body {
	margin-top: 50px;
	background: var(--bg-img), var(--bg);
	background-attachment: fixed;
	background-size: 100%;
	background-repeat: repeat-y;
	background-position: top left;
	color: var(--text);
	overflow-x: hidden;
	user-select: text;
}
button,
img {
	user-select: none;
}

main {
	flex: 1;
}
/* list */
.list {
	list-style: circle;
	list-style-position: inside;
}
.olist {
	list-style: decimal;
	list-style-position: outside;
	padding-inline-start: 1.5rem;
}
.list li,
.olist li {
	padding-inline-start: 1rem;
	color: var(--text);
	font-weight: 300;
	font-size: 1rem;
	text-align: justify;
}
/* ------------------------------- HEADER ----------------------------- */
.header-bg {
	/* direction: rtl; */
	position: fixed;
	top: 0;
	width: 100%;
	backdrop-filter: blur(5px);
	padding: 15px 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	z-index: 1000;
	box-sizing: border-box;
}
.header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	transition: 0.35s ease;
	margin: 0 10px;
	padding: 3px 0;
	border-radius: 25px;
	backdrop-filter: blur(10px);
	background-color: var(--header-accent);
	border: 1px solid #ffffff22;
}
:root[dir="rtl"] .header {
	flex-direction: row-reverse;
}
/* bismillah image */
.header img {
	display: block;
	height: 24px;
	width: auto;
	transition: 0.35s ease;
	border-radius: 0;
}

/* logo image */
.logo img {
	height: 30px;
	/* padding: 1px 10px 1px 0; */
	margin: 0 10px;
}

/* --------------------------------------- Nav & Lang MENU ---------------------------------------	 */

.main > .inp {
	display: none;
}

.main {
	font-weight: 800;
	background-color: transparent;
	padding: 2px 10px;
	border-radius: 20px;
	display: flex;
	gap: 1rem;
	align-items: center;
	position: relative;
	cursor: pointer;
	justify-content: space-between;
	color: white;
	transition: all 150ms ease;
}

.menu-container {
	background: linear-gradient(to right, #43434371, #151f3e85);
	backdrop-filter: blur(25px);
	padding: 0.5rem;
	position: fixed;
	inset-block-start: 3rem;
	inset-inline-end: 0;
	overflow: hidden;
	clip-path: inset(0% 0% 0% 0% round 10px);
	transition: all 0.4s;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	display: flex;
}
:root[dir="rtl"] .menu-container {
	direction: ltr;
}
:root[dir="rtl"] .menu-text {
	order: 1;
}
.nav-menu {
	min-width: 10rem;
	width: auto;
}

.lang-menu .lang-item {
	border-radius: 50%;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.menu-list {
	border-radius: 8px;
	border: 1px solid gray;
	background: linear-gradient(to right, #434343e9, #151f3ecf);
	backdrop-filter: blur(25px);
	--delay: 0.2s;
	--trdelay: 0.05s;
	padding: 8px 10px;
	transition: background-color 0.2s 0s;
	position: relative;
	transform: translateY(30px);
	opacity: 0;
	text-align: center;
	margin: 5px;
	color: white;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	z-index: 1011;
}

.menu-svg {
	height: 24px;
}

.menu-list:hover {
	background-color: var(--accent-hover);
	border: solid 1px var(--accent);
}
.inp:checked ~ body {
	font-size: 10rem;
}
.inp:checked ~ .menu-container {
	clip-path: inset(10% 50% 90% 50% round 10px);
}

.inp:not(:checked) ~ .menu-container .menu-list {
	transform: translateY(0);
	opacity: 1;
}

.inp:not(:checked) ~ .menu-container .menu-list:nth-child(1) {
	transition:
		transform 0.4s var(--delay),
		opacity 0.4s var(--delay);
}

.inp:not(:checked) ~ .menu-container .menu-list:nth-child(2) {
	transition:
		transform 0.4s calc(var(--delay) + var(--trdelay) * 1),
		opacity 0.4s calc(var(--delay) + var(--trdelay) * 1);
}

.inp:not(:checked) ~ .menu-container .menu-list:nth-child(3) {
	transition:
		transform 0.4s calc(var(--delay) + var(--trdelay) * 2),
		opacity 0.4s calc(var(--delay) + var(--trdelay) * 2);
}

.inp:not(:checked) ~ .menu-container .menu-list:nth-child(4) {
	transition:
		transform 0.4s calc(var(--delay) + var(--trdelay) * 3),
		opacity 0.4s calc(var(--delay) + var(--trdelay) * 3);
}

.inp:not(:checked) ~ .menu-container .menu-list:nth-child(5) {
	transition:
		transform 0.4s calc(var(--delay) + var(--trdelay) * 4),
		opacity 0.4s calc(var(--delay) + var(--trdelay) * 4);
}

.inp:not(:checked) ~ .menu-container .menu-list:nth-child(6) {
	transition:
		transform 0.4s calc(var(--delay) + var(--trdelay) * 5),
		opacity 0.4s calc(var(--delay) + var(--trdelay) * 5);
}

.inp:not(:checked) ~ .menu-container .menu-list:nth-child(7) {
	transition:
		transform 0.4s calc(var(--delay) + var(--trdelay) * 6),
		opacity 0.4s calc(var(--delay) + var(--trdelay) * 6);
}

.inp:not(:checked) ~ .menu-container .menu-list:nth-child(8) {
	transition:
		transform 0.4s calc(var(--delay) + var(--trdelay) * 7),
		opacity 0.4s calc(var(--delay) + var(--trdelay) * 7);
}

.bar-inp {
	display: none;
	visibility: hidden;
}

.bar {
	display: flex;
	height: 50%;
	width: 20px;
	flex-direction: column;
	gap: 3px;
}

.bar-list {
	--transform: -25%;
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 50px;
	background-color: white;
	transition: all 0.4s;
	position: relative;
}

.inp:not(:checked) ~ .bar > .top {
	transform-origin: top right;
	transform: translateY(var(--transform)) rotate(-45deg);
}

.inp:not(:checked) ~ .bar > .middle {
	transform: translateX(-50%);
	opacity: 0;
}

.inp:not(:checked) ~ .bar > .bottom {
	transform-origin: bottom right;
	transform: translateY(calc(var(--transform) * -1)) rotate(45deg);
}

.lang-item {
	overflow: hidden;
}
.lang-item .lang-flag {
	position: absolute;
	scale: 0.001;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-items: center;
	opacity: 0;
	transition: all 0.25s ease;
	box-shadow: 0 3px 8px #0002;
	pointer-events: none;
}
.lang-item .lang-flag img {
	width: 36px;
	height: auto;
	border-radius: 50%;
}
.lang-item:hover .lang-flag {
	scale: 1.1;
	opacity: 1;
	pointer-events: auto;
}

/* --------------------------------------- right click MENU ---------------------------------------	 */

.rclick-menu {
	position: absolute;
	display: none;
	background: var(--menu-bg);
	color: var(--accent);
	border-radius: 8px;
	padding: 8px 0;
	min-width: 160px;
	z-index: 9999;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

	/* انیمیشن ظاهر شدن */
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.15s ease-in-out;
}
.rclick-menu.show {
	opacity: 1;
	transform: scale(1);
}
.rclick-menu ul li {
	padding: 7px 15px;
	cursor: pointer;
	white-space: nowrap;
	text-align: right;
}
.rclick-menu ul li:hover {
	background: var(--accent-hover);
	color: white;
}
.rclick-items {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 10px;
}

.rclick-menu svg {
	color: magenta;
}

/* -------------------------- footer ---------------------------- */
.footer-bg {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	z-index: 1000;
	backdrop-filter: blur(5px);
}
.footer-container {
	z-index: 1010;
	background-color: #ffffff0f;
	border: 1px solid #ffffff22;
	margin: 0 20px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	padding: 20px;
	display: flex;
	justify-content: flex-start;
	gap: 5rem;
	flex-wrap: wrap;
	color: white;
	box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.25),
		0 20px 60px rgba(0, 0, 0, 0.35);
}
.footer-container h4 {
	color: var(--accent);
	font-weight: bolder;
	margin-bottom: 0.5rem;
}
.footer-link {
	text-indent: 15px;
	color: var(--text);
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	transition: all 150ms ease;
}
.footer-link:hover {
	color: var(--accent-hover);
	transform: translateY(-2px);
}
.footer-social {
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: flex-start;
	gap: 0.8rem;
	border-top: 1px solid var(--accent);
	padding-top: 0.4rem;
	margin-top: 0.4rem;
}
.footer-social a {
	color: var(--text);
	transition: all 150ms ease;
}
.footer-social a:hover {
	color: var(--accent-hover);
	transform: translateY(-2px);
}
.footer-social a:hover .tooltip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.footer-social .tooltip {
	background-color: var(--accent);
	color: white;
}
.footer-rights {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0px;
	padding: 5px;
	text-align: center;
	color: seagreen;
	font-size: 0.8rem;
	font-weight: bolder;
}
.quick-access span {
	font-weight: 200;
	font-size: 0.9rem;
}
.quick-access li::marker {
	content: "|";
	color: var(--accent);
}
.training-footer span {
	font-weight: 200;
	font-size: 0.9rem;
}
.training-footer li::marker {
	content: "|";
	color: var(--accent);
}
.footer-cportal {
	margin-top: 1rem;
}
.footer-cportal a {
	color: var(--accent);
	font-size: 1.2rem;
	padding: 0.5rem 2rem;
	border-radius: 8px;
	background: rgba(128, 128, 128, 0.1);
	border: solid 2px var(--accent);
	transition: all 200ms ease;
}
.footer-cportal a:hover {
	transform: translateY(-5px);
	color: var(--accent-hover);
	border-color: var(--accent-hover);
}
.design-by {
	cursor: pointer;
	display: flex;
	gap: 0.3rem;
	box-sizing: border-box;
	color: magenta;
	transition: all 200ms ease-in-out;
}
.design-by:hover {
	font-size: 1rem;
	color: rgb(221, 0, 255);
	transform: translateY(-3px);
	background: linear-gradient(270deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
	background-size: 600% 600%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: textColorShift 1.6s linear infinite;
}
@keyframes textColorShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.center {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#backToTop {
	position: fixed;
	border: solid 2px var(--accent);
	border-radius: 4px;
	padding: 5px;
	height: 40px;
	width: 40px;
	cursor: pointer;
	transition: 150ms ease-in-out;
	box-sizing: border-box;
	bottom: 20px;
	z-index: 1000;
	display: none;
	right: 20px;
	background-color: var(--accent);
	fill: var(--accent);
	background-color: transparent;
	backdrop-filter: blur(2px);
}

#backToTop:hover {
	scale: 1.2;
	border-color: var(--accent-hover);
}

/* ---------------------Scroll Bar ---------------------- */
/* کل اسکرول‌بار */
::-webkit-scrollbar {
	width: 12px; /* عرض اسکرول‌بار عمودی */
	height: 12px; /* ارتفاع اسکرول‌بار افقی */
}

/* مسیر */
::-webkit-scrollbar-track {
	background: linear-gradient(to bottom, rgb(255, 255, 255), #3e3e3e)
		transparent;
	border-radius: 15px;
}

/* دسته */
::-webkit-scrollbar-thumb {
	background: var(--accent);
	border-radius: 15px;
}

/* هاور دسته */
::-webkit-scrollbar-thumb:hover {
	background-color: var(--accent-hover);
	cursor: pointer;
}

/* ----------------------- icons -----------------------*/
.icon-btn {
	height: 1.5rem;
	width: auto;
	stroke: white;
}
/* ----------------------- Body ------------------------ */
.page-title {
	font-size: 6.5rem;
	font-weight: 1000;
	text-align: center;
	background: var(--page-title);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 20px 0;
}
.section-title {
	font-size: 3rem;
	font-weight: 1000;
	text-align: center;
	background: var(--section-title);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 20px;
}
.subtitle {
	font-size: 1.8rem;
	color: var(--accent);
	font-weight: 800;
	border-inline-start-style: solid;
	border-inline-start-color: var(--accent-hover);
	border-inline-start-width: 0.4rem;
	padding-inline-start: 1rem;
}
.subtitle:hover {
	animation: 1500ms textcolorchange linear infinite;
}
@keyframes textcolorchange {
	0% {
		color: var(--accent);
	}
	50% {
		color: var(--accent-hover);
	}
	100% {
		color: var(--accent);
	}
}
.body-text {
	background: linear-gradient(120deg, #db3ced 20%, var(--accent) 50%);
	-webkit-background-clip: text;
	background-clip: text;
	padding: 20px 0;
	color: transparent;
	background-size: 200%;
	transition: all 400ms ease-in-out;
	font-size: 1.3rem;
	font-weight: 600;
	text-align: justify;
}
.body-text:hover {
	background-position: 200%;
}
.body-img {
	width: 100%;
	object-fit: contain;
	border-radius: 12px;
}
.card {
	backdrop-filter: blur(2px);
	background: var(--card-bg);
	margin: 80px 20px;
	border-radius: 8px;
	padding: 20px;
	border: 1px solid #ffffff22;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
	height: auto;
	overflow: visible;
}

/* ---------- flip card ---------- */
.brief-news-container {
	display: flex;
	flex-direction: row;
	gap: 2rem;
}
.flip-card {
	perspective: 900px;
}
.inner-flip {
	min-height: 350px;
	height: auto;
	width: 250px;
	transition: 600ms;
	transform-style: preserve-3d;
}
.flip-card:hover .inner-flip {
	transform: rotateY(180deg);
}
.front-flip,
.back-flip {
	position: absolute;
	backface-visibility: hidden;
	width: 100%;
	height: 100%;
	border: var(--glass-border);
	border-radius: 10px;
	box-shadow: var(--box-shadow);
	display: flex;
}
.front-flip img {
	object-fit: cover;
	border-radius: 10px;
}
.back-flip {
	transform: rotateY(180deg);
	color: var(--accent);
	background: var(--bg);
	padding: 1rem 0.5rem;
	text-align: justify;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.back-flip h2 {
	color: var(--accent-hover);
	border-bottom: solid 1px var(--accent-hover);
}
.back-flip h5 {
	color: var(--accent);
}

/* ----------------------------- Partial counter cards ----------------------------- */
.vid-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-block: 4rem;
	box-shadow: var(--box-shadow);
	padding: 30px 0;
	overflow-x: clip;
}
.vid-container.R {
	background: linear-gradient(to left, rgba(0, 0, 0, 0.46), transparent);
}
.vid-container.L {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.46), transparent);
}
.media-box {
	width: 60vw;
	max-width: 960px;
	margin-inline: 4rem;
	opacity: 0;
	transition:
		transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.8s ease;
}
.from-left {
	align-self: flex-end;
	transform: translateX(-400px);
}
.from-right {
	align-self: flex-start;
	transform: translateX(400px);
}

.media-box.active {
	opacity: 1;
	transform: translateX(0);
}

.machine-video {
	width: 100%;
	aspect-ratio: 16/9;
	display: block;
	background: var(--card-bg);
	box-shadow: var(--box-shadow);
	border: var(--glass-border);
	border-radius: 8px;
}

.vid-tag {
	position: absolute;
	padding: 16px 20px;

	border-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;

	bottom: 3rem;
	height: 15rem;
	width: 15rem;

	color: var(--accent);
	border: var(--glass-border);
	box-shadow: var(--box-shadow);
	background: rgba(0, 0, 0, 0.7);
}
.vid-tag.L {
	inset-inline-start: -4rem;
}
.vid-tag.R {
	inset-inline-end: -4rem;
}
.counter {
	color: var(--accent-hover);
	font-size: 3rem;
	font-weight: bolder;
	display: block;
}
/* ---------------- Customer Logos ---------------- */
.customer-logo {
	padding: 4rem 0;
	height: 500px;
}

.logo-row {
	overflow: hidden;
	margin: 20px 0;
	padding: 1.5rem;
}

.logo-track {
	display: flex;
	width: max-content;
	gap: 60px;
	will-change: transform;
}

.logo-track img {
	height: 6rem;
	aspect-ratio: 1/1;
	object-fit: contain;
	transform: scale(1);
	transition: 0.3s all ease;
	padding: 0.5rem;
	border-radius: 10px;
	animation: logoDance 2s infinite;
	filter: drop-shadow(0 0 4px gray);
}
@keyframes logoDance {
	0% {
		transform: scale(0.8);
	}
	20% {
		transform: scale(1.2);
	}
	40% {
		transform: scale(1.5);
	}
	80% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(0.8);
	}
}
.logo-track img:hover {
	background: var(--header-accent);
	border: var(--glass-border);
}

.customer-logo {
	border: 4px solid;
	border-image-slice: 1;
	border-image-source: linear-gradient(
		45deg,
		red,
		orange,
		yellow,
		green,
		blue,
		indigo,
		violet
	);
	animation: rainbow 1.5s linear infinite;
}

@keyframes rainbow {
	0% {
		border-image-source: linear-gradient(
			45deg,
			red,
			orange,
			yellow,
			green,
			blue,
			indigo,
			violet
		);
	}
	50% {
		border-image-source: linear-gradient(
			135deg,
			violet,
			indigo,
			blue,
			green,
			yellow,
			orange,
			red
		);
	}
	100% {
		border-image-source: linear-gradient(
			45deg,
			red,
			orange,
			yellow,
			green,
			blue,
			indigo,
			violet
		);
	}
}

/* ---------------- body flex ---------------- */
.flex-row {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}
.space-between {
	justify-content: space-between;
}
.space-around {
	justify-content: space-around;
}
.justify-start {
	justify-content: start;
	text-align: start;
}
.align-end {
	justify-content: flex-end;
}

.align-start {
	justify-content: flex-start;
}
.flex-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.center {
	align-items: center;
	justify-content: center;
}
.align-start {
	align-items: start;
	text-align: start;
}

/* -------------- flex cards ---------- */
.flex1 {
	flex: 1;
	flex-shrink: 1;
}
.flex2 {
	flex: 2;
}
.flex3 {
	flex: 3;
}
.flex4 {
	flex: 4;
}
.flex5 {
	flex: 5;
}

/* ------------------------------- Hero Section ----------------------------- */
.hero-container {
	margin-block-end: 100vh;
}
.hero-section {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--hero-bg), var(--bg);
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top left;
	overflow: hidden;
	box-shadow: var(--box-shadow);
	transition: all 1s ease;
}
.hero-title,
.hero-subt,
.hero-subt2 {
	margin-inline-start: 4rem;
	padding-inline: 1.1rem;
	z-index: 950;
}
.hero-title {
	background: var(--hero-logo);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 1));
	height: 6rem;
	min-width: 14rem;
	width: fit-content;
	transition: all ease 200ms;
}
.hero-subt {
	margin-block: 1.2rem;
	flex-direction: row;
	background: rgba(0, 0, 0, 0.6);
	width: fit-content;
	border-radius: 8px;
}
.hero-subt span {
	color: var(--accent-hover);
	font-size: 2.5rem;
}
.hero-subt2 {
	opacity: 0;
	padding-inline-start: 1rem;
	background: linear-gradient(to left, var(--accent), var(--header-accent));
	/* border: var(--glass-border); */
	font-size: 1.2rem;
	color: white;
	text-shadow: 0 2px 10px black;
	transition: all 0.6s ease;
	text-align: justify;
	border-start-start-radius: 12px;
}
/* CTA */
.hero-cta {
	position: absolute;
	inset-inline-start: auto;
	inset-inline-end: 0;
	inset-block-start: 40%;

	display: flex;
	flex-direction: column;
	gap: 2rem;
	justify-content: space-between;
}
.hero-cta div {
	transform: translateX(var(--cta-translate, -70%));
	background-color: var(--header-accent);
	border: var(--glass-border);
	border-radius: 12px;
	padding: 0.3rem;
	padding-inline-end: 1rem;
	width: 12rem;
	transition: 300ms all ease;
}
.hero-cta a {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.hero-cta svg {
	height: 2.5rem;
	width: auto;
	margin-inline-end: 1rem;
	stroke: white;
	stroke-width: 1.5;
}
.hero-cta span {
	font-size: 1rem;
	color: white;
}
.hero-cta div:hover {
	transform: translateX(var(--cta-hover-translate, 10%));
	background-color: color-mix(in srgb, var(--accent) 70%, transparent 10%);
	cursor: pointer;
}
/* ---------- Typing text ---------------- */

#typing-container[dir="rtl"] {
	text-align: right;
	width: fit-content;
	width: 50lvw;
}

#typing-container[dir="ltr"] {
	text-align: left;
	/* width: fit-content; */
	width: 50lvw;
}

#cursor {
	color: var(--accent-hover);
	margin-right: 3px;
	animation: blink 0.7s infinite;
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}

/* ------------------------------ iPhone Contact Us ------------------------- */
.iphone-wrapper {
	display: flex;
	justify-content: center;
	direction: ltr;
	z-index: 10;
}

.iphone-body {
	position: relative;
	width: 240px;
	height: 460px;
	background: #000;
	border-radius: 36px;
	padding: 8px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Side Buttons */
.iphone-btn {
	position: absolute;
	width: 3px;
	background: #191919;
	border-radius: 3px;
}

.iphone-btn.lock {
	height: 40px;
	right: -4px;
	top: 90px;
}
.iphone-btn.vol-up {
	height: 30px;
	left: -4px;
	top: 110px;
}
.iphone-btn.vol-down {
	height: 30px;
	left: -4px;
	top: 150px;
}

/* Screen */
.iphone-screen {
	background: #fff;
	height: 100%;
	border-radius: 28px;
	display: flex;
	flex-direction: column;
	font-family: -apple-system, BlinkMacSystemFont, "San Francisco", sans-serif;
	color: #000;
	overflow: hidden;
	position: relative;
}

/* Notch & Speaker & Camera */
.iphone-notch {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 22px;
	background: #000;
	border-radius: 0 0 18px 18px;
	z-index: 10;
}
.iphone-speaker {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 42px;
	height: 4px;
	background: #1f1f1f;
	border-radius: 4px;
}
.iphone-camera {
	position: absolute;
	top: 7px;
	right: 16px;
	width: 7px;
	height: 7px;
	background: #2a2a2a;
	border-radius: 50%;
}
/* Phone Number */
.iphone-number {
	font-family: "Lucida Sans Unicode";
	text-align: center;
	font-size: 1.1rem;
	font-weight: bold;
	letter-spacing: 2px;
	margin: 30px 0 0 0;
	min-height: 30px;
}
/* Contact Name */
.iphone-contact-name {
	margin-bottom: 5px;
	text-align: center;
	font-size: 1rem;
	font-weight: 600;
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 0.4s ease,
		transform 0.4s ease;
	position: relative;
	z-index: 5; /* مانع حرکت نوار پایین */
}

.iphone-contact-name.show {
	opacity: 1;
	transform: translateY(0);
}

/* Keypad Grid */
.iphone-keypad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 11px;
	padding: 0 25px;
	margin-top: auto;
}

.iphone-keypad .num-key {
	background: #f1f1f1;
	border: none;
	border-radius: 50%;
	height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 1.1rem;
	text-align: center;
	box-sizing: border-box;
}

.iphone-keypad button small {
	font-size: 0.55rem;
	color: #555;
	letter-spacing: 1px;
}

.iphone-keypad button.active {
	background: #d1d1d1;
}

/* Call + Delete inside grid, same size */
.iphone-call-btn,
.iphone-delete-btn {
	height: 45px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	box-sizing: border-box;
	border: none;
	margin-bottom: 10px;
}
.iphone-call-btn img {
	height: 30px;
	width: 30px;
}
.btn-nothing {
	background-color: none;
	border: none;
	opacity: 0.01;
}
.iphone-call-btn {
	background: #27d157;
	color: #ffffff;
}

.iphone-delete-btn {
	background-color: transparent;
}
.iphone-delete-btn img {
	height: 30px;
	width: auto;
}

/* Bottom Bar */
.iphone-bottom-bar {
	display: flex;
	justify-content: space-around;
	font-size: 0.65rem;
	padding: 8px 0;
	background: #fafafa;
	position: relative;
	z-index: 10;
}

.iphone-bottom-bar div {
	text-align: center;
	opacity: 0.5;
}

.iphone-bottom-bar .active {
	opacity: 1;
	font-weight: 600;
}
/* ------------------------------ Order Wrapper box------------------- */
.order-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	gap: 1rem;

	grid-template-areas:
		"i1 i2 i2"
		"i1 i3 i3";
}
.i {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
}
.i1 {
	grid-area: i1;
}
.i2 {
	grid-area: i2;
	justify-content: center;
}
.i3 {
	grid-area: i3;
	flex-direction: row;
	gap: 1rem;
	align-items: flex-start;
}
.i4 {
	grid-area: i4;
}

/* ------------------------------ About Page ------------------------- */
.statement-container {
	margin: 40px;
	display: flex;
	align-items: stretch;
	gap: 20px;
	overflow: visible;
}
.statement-card {
	position: relative;
	border: solid 1px gray;
	border-radius: 8px;
	overflow: hidden;
	flex: 1;
	display: flex;
	flex-direction: column;
	transition:
		transform 300ms ease,
		opacity 300ms ease;
	will-change: transform;
}

.statement-container:hover .statement-card {
	transform: scale(0.9);
	opacity: 0.6;
}
.statement-container .statement-card:hover {
	transform: scale(1.05);
	opacity: 1;
}
.statement-card.blue {
	--accent: #3b82f6;
}
.statement-card.green {
	--accent: #22c55e;
}
.statement-card.red {
	--accent: #ef4444;
}

.upper-card {
	min-height: 200px;
	position: relative;
	flex: 1;
	background: linear-gradient(
		to bottom,
		var(--accent) 10%,
		rgb(27, 26, 26, 0.4) 40%,
		transparent 80%
	);
	box-shadow:
		inset 2px 1px 6px #ffffff30,
		0 15px 40px rgba(0, 0, 0, 0.2);
	transition: 300ms ease-in-out;
}
.lower-card {
	flex: 3;
	padding: 15px;
	backdrop-filter: blur(8px);
	box-shadow:
		inset 2px 1px 6px #ffffff30,
		0 15px 40px rgba(0, 0, 0, 0.2);
	z-index: -1;
}
.statement-img {
	position: absolute;
	margin: auto;
	inset: 0;
	top: 68%;
	height: 70%;
	width: auto;
	z-index: 6;
}
.statement-card p {
	font-size: 1.2rem;
	line-height: 2;
}
.statement-subcontainer {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1;
}
.statement-card.upper {
	border-top-right-radius: 12px;
	border-top-left-radius: 12px;
	overflow: hidden;
	max-height: 200px;
}
.lower-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle at bottom left,
		var(--accent),
		transparent 60%
	);
	opacity: 0.25;
	z-index: -1;
}

.statement-title {
	font-size: 3rem;
	font-weight: 1000;
	text-align: center;
	background: linear-gradient(
		to Right,
		var(--accent-hover) 5%,
		var(--accent) 95%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 20px 0;
}
/* ----------------- Our Products --------------- */

.products-container {
	display: flex;
	gap: 3rem;
	justify-content: space-around;
	margin: 3rem;
}
.prd {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: solid 2px var(--accent);
	border-radius: 14px;
	padding: 20px;
	transition: all 400ms ease;
	flex: 2;
	overflow: hidden;
}
.prd-title {
	margin: 8px 0;
	font-size: 1.5rem;
	font-weight: 800;
	background: var(--glassy);
	border: 1px solid rgba(128, 128, 128, 0.219);
	color: var(--text);
	background-color: var(--header-accent);
	padding: 2px 15px;
	border-radius: 50px;
	transition: all 1s ease;
	text-align: center;
}
.prd-title:hover {
	transform: scale(1.1);
}
.can-slider {
	width: 100%;
	aspect-ratio: 1/1;
	overflow: hidden;
}
.can-track {
	display: flex;
	flex-direction: row-reverse;
	width: 200%;
	height: 100%;
	animation: canslide 5s infinite linear;
}
.can-track img {
	width: 50%; /* 2 img */
	height: 100%;
	object-fit: cover;
	flex-shrink: 0;
}
@keyframes canslide {
	0% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(0);
	}
	30% {
		transform: translateX(-50%);
	}
	70% {
		transform: translateX(-50%);
	}
	80% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(0);
	}
}
.prd li {
	padding: 3px 20px;
	margin: 10px 0;
	border-radius: 6px;
	background: transparent;
	transition: all 200ms ease;
	text-shadow: var(--text-shadow);
	backdrop-filter: blur(5px);
}
.prd li::marker {
	content: "   ✓   ";
	font-size: 1em;
}
.prd li:hover {
	transform: translateY(-1px) translateX(3%);
}
.prd .li-1 {
	color: var(--li-1);
	border: 1px solid var(--li-1);
}
.prd .li-2 {
	color: var(--li-2);
	border: 1px solid var(--li-2);
}
.prd .li-3 {
	color: var(--li-3);
	border: 1px solid var(--li-3);
}
.prd .li-4 {
	color: var(--li-4);
	border: 1px solid var(--li-4);
}
.prd .li-5 {
	color: var(--li-5);
	border: 1px solid var(--li-5);
}
.prd img {
	height: 100%;
	width: auto;
	transition: all 1s ease-in-out;
}
.prd-spec {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 0;
	padding: 0;
}
.prd-spec h3 {
	color: var(--accent);
	margin-top: 1rem;
}
.prd-spec h4 {
	color: gray;
	font-size: 0.9rem;
}
/* ----------------- Can process ---------------- */
.canprocess-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	gap: 1rem;

	padding: 80px 250px;
	grid-template-areas:
		"ci1 cp1"
		"cp2 ci2"
		"ci3 cp3"
		"cp4 ci4"
		"ci5 cp5"
		"cp6 ci6"
		"ci7 cp7"
		"cp8 ci8"
		"ci9 cp9";

	counter-reset: step;
}
.cp,
.ci {
	border-radius: 15px;
	overflow: hidden;
	position: relative;
	transition: all 0.4s ease;
}
.cp {
	background: var(--card-bg);
	backdrop-filter: blur(10px);
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
	border-right: solid 1px var(--accent);
	border-bottom: solid 1px var(--accent);
	counter-increment: step;
}
.cp::after {
	color: white;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	justify-items: center;
	font-size: 300%;
	font-weight: 800;
	height: 70px;
	aspect-ratio: 1/1;
	content: counter(step, decimal-leading-zero);
	top: 0;
	left: 0;
	background-color: var(--accent);
	border-bottom-right-radius: 50%;
}
.ci {
	border-left: solid 1px var(--accent);
	border-top: solid 1px var(--accent);
}
.ci img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
	filter: brightness(0.9) saturate(20%);
	transition:
		transform 0.6s ease,
		filter 1s ease;
}
.ci img:hover {
	transform: scale(1.1);
	filter: brightness(1.2) saturate(100%);
}

.cp h2 {
	font-size: 1.8rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
	background: var(--accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cp h3 {
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--text);
	opacity: 0.85;
	line-height: 1.4;
	transition: opacity 0.3s ease;
	text-align: justify;
}

.cp:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.cp:hover h3 {
	opacity: 1;
}
/* ci */
.ci1 {
	grid-area: ci1;
}
.ci2 {
	grid-area: ci2;
}
.ci3 {
	grid-area: ci3;
}
.ci4 {
	grid-area: ci4;
}
.ci5 {
	grid-area: ci5;
}
.ci6 {
	grid-area: ci6;
}
.ci7 {
	grid-area: ci7;
}
.ci8 {
	grid-area: ci8;
}
.ci9 {
	grid-area: ci9;
}

/* cp */
.cp1 {
	grid-area: cp1;
}
.cp2 {
	grid-area: cp2;
}
.cp3 {
	grid-area: cp3;
}
.cp4 {
	grid-area: cp4;
}
.cp5 {
	grid-area: cp5;
}
.cp6 {
	grid-area: cp6;
}
.cp7 {
	grid-area: cp7;
}
.cp8 {
	grid-area: cp8;
}
.cp9 {
	grid-area: cp9;
}

/* --------------- quality control QC ------------- */
.qc-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	gap: 2rem;
	grid-template-areas:
		"qc-img	qc-box qc-box"
		"qc-img qc-text-container qc-text-container";
}
.qc-box {
	grid-area: qc-box;
	width: 100%;
	height: 254px;
	border-radius: 10px;
	display: flex;
	gap: 1rem;
}
.qc-box h3 {
	height: 100%;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.5s;
	backdrop-filter: blur(5px);
	border: 2px solid var(--accent);
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 2;
}
.qc-box h3:hover {
	flex: 4;
	width: auto;
}
.qc-box h3 span {
	min-width: unset;
	height: auto;
	padding: 0.5em;
	text-align: center;
	transform: rotate(-90deg);
	transition: all 0.5s;
	text-transform: uppercase;
	color: var(--accent);
	letter-spacing: 0.1em;
}
.qc-box h3:hover span {
	transform: rotate(0);
}
.qc-img {
	grid-area: qc-img;
	display: flex;
	justify-content: center;
	align-items: center;
	justify-items: center;
	overflow: hidden;
	width: auto;
	height: 300px;
	border-radius: 15px;
	object-fit: contain;
}
.qc-img img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 15px;
	transition: opacity 0.5s ease;
}
.qc-image {
	transition:
		opacity 0.4s ease-in-out,
		transform 0.4s ease-in-out;
	will-change: opacity, transform;
}
.qc-image.fade-out {
	opacity: 0;
	transform: scale(0.98);
}
.qc-box h3.active {
	background-color: rgba(var(--accent-rgb, 33, 150, 243), 0.2);
	border-color: var(--accent);
}
.qc-text-container {
	grid-area: qc-text-container;
}
.qc-description {
	display: flex;
	justify-content: center;
	align-items: center;
	justify-items: center;
	text-align: center;
	font-size: 1.1rem;
	color: var(--form-comment);
}
/* ---------- about cans ---------- */
.about-can {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	gap: 1.9rem;
	grid-template-areas:
		".	.	.	."
		"c-h1	c-h1	c-i1	c-i1"
		"c-t1	c-t1	c-i1	c-i1"
		".	.	.	."
		"c-i2	c-h2	c-h2	c-h2"
		"c-i2	c-t2	c-t2	c-t2"
		".	.	.	."
		".	.	.	."
		".	.	.	."
		"c-h3	c-h3	c-h3	c-h3"
		"c-i3	c-t3	c-t3	c-t3"
		"c-i3-1	c-h3-1	c-h3-2	c-i3-2"
		"c-h3-3	c-i3-3	c-h3-4	c-i3-4"
		"c-i3-5	c-h3-5	c-i3-6	c-h3-6"
		".	.	.	."
		".	.	.	."
		".	.	.	."
		"c-t4	c-h4-1	c-h4-2	c-h4-3"
		".	.	.	."
		".	.	.	."
		".	.	.	."
		"c-t5	c-t5	c-t5	c-t5"
		"c-h5	c-h5	c-i5	c-i5"
		".	.	.	."
		".	.	.	."
		"c-t6	c-t6	c-t6	c-t6";
}
.c-t1 {
	grid-area: c-t1;
}
.about-can div {
	overflow: hidden;
}
.about-can img {
	transition: all 400ms ease;
	object-fit: contain;
	width: 100%;
}
.about-can img:hover {
	transform: translateY(-5px) scale(1.1);
	filter: brightness(120%) saturate(120%);
}
.c-i1 {
	grid-area: c-i1;
	border-top: 0.5rem solid var(--accent-hover);
	border-inline-end: 0.5rem solid var(--accent-hover);
	border-end-end-radius: 50px;
	border-start-end-radius: 40%;
}
.c-h1 {
	grid-area: c-h1;
}
.c-t2 {
	grid-area: c-t2;
}
.c-i2 {
	grid-area: c-i2;
	border-top: 2px solid var(--accent-hover);
	border-inline-start-style: solid;
	border-inline-start-color: var(--accent-hover);
	border-width: 0.4rem;
	border-start-start-radius: 50px;
	border-end-start-radius: 40%;
}
.c-h2 {
	grid-area: c-h2;
}
.c-h3 {
	grid-area: c-h3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.c-cons {
	border-radius: 4px;
	padding: 0.8rem;
	display: flex;
	gap: 1.1rem;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	justify-items: flex-start;
	transition: all 200ms ease-in-out;
	box-shadow: var(--box-shadow);
}
.c-cons:hover {
	transform: scale(1.05) translateY(-5px);
}
.c-cons h4 {
	font-size: 1.4rem;
	font-weight: 900;
	text-align: center;
	color: color-mix(in srgb, var(--accent), black 15%);
	text-shadow: var(--text-shadow);
	margin-bottom: 1rem;
}
.c-cons li {
	list-style: square;
	margin-inline-start: 1.8rem;
	text-align: justify;
}
.c-h3-1 {
	grid-area: c-h3-1;
	background: color-mix(in srgb, var(--glassy), var(--mix-theme) 10%);
	border: solid 0.4rem var(--accent);
	border-bottom: solid 0.4rem var(--accent-hover);
	border-top: solid 0.4rem var(--accent-hover);
}
.c-h3-2 {
	grid-area: c-h3-2;
	background: color-mix(in srgb, var(--glassy), var(--mix-theme) 20%);
	border-right: solid 0.4rem var(--accent-hover);
	border-left: solid 0.4rem var(--accent-hover);
}
.c-h3-3 {
	grid-area: c-h3-3;
	background: color-mix(in srgb, var(--glassy), var(--mix-theme) 35%);
	border-bottom: 0.4rem solid var(--accent-hover);
	border-inline-start: solid 0.4rem var(--accent-hover);
	border-end-start-radius: 30%;
}
.c-h3-4 {
	grid-area: c-h3-4;
	background: color-mix(in srgb, var(--glassy), var(--mix-theme) 50%);
	border-bottom: 0.4rem solid var(--accent-hover);
	border-inline-start: solid 0.4rem var(--accent-hover);
}
.c-h3-5 {
	grid-area: c-h3-5;
	background: color-mix(in srgb, var(--glassy), var(--mix-theme) 65%);
	border-top: 0.4rem solid var(--accent-hover);
	border-bottom: 0.4rem solid var(--accent-hover);
	border-inline-end: solid 0.4rem var(--accent-hover);
}
.c-h3-6 {
	grid-area: c-h3-6;
	background: color-mix(in srgb, var(--glassy), var(--mix-theme) 80%);
	border-top: 0.4rem solid var(--accent-hover);
	border-inline-end: solid 0.4rem var(--accent-hover);
	border-end-end-radius: 50%;
}
.c-i3-1 {
	grid-area: c-i3-1;
	border-bottom: 0.4rem solid var(--accent-hover);
	border-inline-start: solid 0.4rem var(--accent-hover);
	border-start-start-radius: 50px;
	border-end-start-radius: 40%;
}
.c-i3-2 {
	grid-area: c-i3-2;
	border-bottom: 0.4rem solid var(--accent-hover);
	border-inline-end: solid 0.4rem var(--accent-hover);
	border-top: 0.5rem solid var(--accent-hover);
	border-end-end-radius: 50px;
	border-start-end-radius: 40%;
}
.c-i img {
	height: 100%;
	object-fit: cover;
}
.c-i3-6 {
	grid-area: c-i3-6;
	border-top: 0.4rem solid var(--accent-hover);
	border-inline-start: solid 0.4rem var(--accent-hover);
	border-start-start-radius: 50px;
	border-end-start-radius: 40%;
}
.c-i3-3 {
	grid-area: c-i3-3;
	border: 0.4rem solid var(--accent-hover);
	border-radius: 40px;
}
.c-i3-4 {
	grid-area: c-i3-4;
	border-top: 0.4rem solid var(--accent-hover);
	border-inline-end: solid 0.4rem var(--accent-hover);
}
.c-i3-5 {
	grid-area: c-i3-5;
	border: 0.4rem solid var(--accent-hover);
	border-radius: 50%;
}
.c-h3-1 li,
.c-h3-2 li,
.c-h3-3 li,
.c-h3-4 li,
.c-h3-5 li,
.c-h3-6 li {
	color: var(--accent);
	font-size: 100%;
}
.c-t4 {
	grid-area: c-t4;
}
.c-h4-1 {
	grid-area: c-h4-1;
}
.c-h4-2 {
	grid-area: c-h4-2;
}
.c-h4-3 {
	grid-area: c-h4-3;
}
.c-4 {
	padding-bottom: 1rem;
	background-color: var(--glassy);
	border-inline-start: solid 0.4rem var(--glassy);
	border: solid 0.4rem var(--glassy);
	box-shadow: var(--box-shadow);
	border-radius: 5px;
	transition: all 250ms ease;
}
.c-4 h4 {
	font-size: 1.1rem;
	font-weight: 900;
	text-align: center;
	padding: 0;
	margin-bottom: 1rem;
	color: var(--text);
	border-bottom: 0.4rem solid var(--glassy);
}
.c-4 li {
	list-style: circle;
	list-style-position: inside;
	padding-inline-start: 1rem;
	color: var(--accent);
}
.c-4 img {
	transition: all 200ms ease-in-out;
	filter: saturate(30%) brightness(100%);
	box-shadow: var(--box-shadow);
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
}
.c-4:hover img {
	transform: scale(1);
	filter: saturate(100%) brightness(110%);
}
.c-4:hover {
	transform: translateY(-10px) translateX(2%) rotate(2deg);
}
.c-t5 {
	grid-area: c-t5;
}
.c-h5 {
	grid-area: c-h5;
}
.c-i5 {
	grid-area: c-i5;
	border-inline-end: 0.5rem solid var(--accent-hover);
	border-inline-start: 0.5rem solid var(--accent-hover);
	border-radius: 1rem;
	box-shadow: var(--box-shadow);
}
.c-i5 img {
	height: 100%;
	object-fit: cover;
	animation: imgPulse 25s infinite;
	transition: all 200ms ease;
}

@keyframes imgPulse {
	0% {
		transform: scale(1) rotate(0);
		filter: saturate(10%) brightness(50%);
	}
	99% {
		transform: scale(1.4) rotate(10deg);
		filter: saturate(140%) brightness(150%);
	}
	100% {
		transform: scale(1) rotate(0);
		filter: saturate(10%) brightness(80%);
	}
}
.c-t6 {
	grid-area: c-t6;
	background: var(--card-bg);
	backdrop-filter: blur (5px);
	padding: 2rem;
	border-inline-start: 0.5rem solid var(--accent);
	border-end-end-radius: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: var(--box-shadow);
}
.c-t6 .s-btn:hover {
	background-color: var(--accent);
	color: white;
}

/* ------------------------------ Contact Page ------------------------- */
.contact-box {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: auto;
	gap: 1rem;
	grid-template-areas:
		"item1	item1	item2	item2   item2   item2"
		"item1	item1	.		.		.		.	"
		"item1	item1	item3	item3	item4	item4"
		"item1	item1	item5	item5	item6	item6"
		".		.		.		.		.		.	"
		"item7	item7	item8	item8	item9	item9";
}
.item {
	display: flex;
	flex-direction: column;
	align-items: start;
	text-align: start;
	gap: 10px;
	border-radius: 8px;
	padding: 20px;
	border: solid 1px rgba(128, 128, 128, 0.155);
	background-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
	transition: all 200ms ease-in-out;
}
.item h4 {
	color: var(--accent);
}
.item1 {
	padding: 0;
	grid-area: item1;
	overflow: hidden;
}
.item1 img {
	height: 100%;
	object-fit: cover;
}
.item2 {
	grid-area: item2;
	display: flex;
	justify-content: center;
	align-items: center;
}
.item3 {
	grid-area: item3;
}
.item4 {
	grid-area: item4;
}
.item5 {
	grid-area: item5;
}
.item6 {
	grid-area: item6;
}
.item7 {
	grid-area: item7;
}
.item8 {
	grid-area: item8;
}
.item9 {
	grid-area: item9;
}
.item10 {
	grid-area: item10;
}
.contact-app-icons {
	display: flex;
	gap: 1rem;
	justify-content: space-around;
}

/* ---------------- Social Icons ---------------- */

.social-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 10px 0;
	padding: 0;
	list-style: none;
}

.social-icons li a {
	position: relative;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--header-accent);
	border: var(--glass-border);
	backdrop-filter: blur(6px);
	transition: all 200ms ease;
}

.social-icons li a:hover {
	background: var(--accent);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.social-icons img {
	width: 26px;
	height: 26px;
	filter: brightness(0) invert(1);
	transition: transform 200ms ease;
}
/* .light-theme .social-icons img {
	filter: none;
} */

/* ---------------- Tooltip ---------------- */

.tooltip {
	position: absolute;
	bottom: 115%;
	left: 50%;
	transform: translateX(-50%) translateY(6px);

	background: var(--accent);
	color: #fff;
	padding: 6px 10px;
	border-radius: 8px;

	font-size: 0.75rem;
	white-space: nowrap;

	opacity: 0;
	pointer-events: none;
	transition: all 200ms ease;

	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.has-tooltip:hover .tooltip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: var(--accent) transparent transparent transparent;
}

.customer-guide-box {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	backdrop-filter: blur(5px);
	border: solid 1px var(--form-comment);
	padding: 10px;
}
.cts-note {
	display: flex;
	color: var(--form-comment);
	font-size: 1rem;
	gap: 0.4rem;
	border-bottom: solid 1px var(--form-comment);
	margin-bottom: 5px;
}
.cts-note-text {
	font-size: 0.8rem;
	text-align: justify;
	padding-bottom: 5px;
}
.cts-note-text-list {
	list-style: decimal;
	font-size: 0.8rem;
	padding: 0 1rem;
	text-indent: 0.2rem;
	text-align: justify;
}
.cts-note-text-list li {
	font-weight: 500;
	margin: 2px 0;
}
/* --------------------- Timeline time line page ------------------- */
.tl-box {
	display: flex;
	flex-direction: column;
	align-items: center;

	/* scroll-snap-type: y proximity;
	height: 100vh;
	overflow-y: scroll; */
}

.tl-slide {
	display: flex;
	width: 40%;
	justify-content: space-between;
	border-radius: 20px;
	backdrop-filter: blur(2px);
	background: var(--header-accent);
	border: var(--glass-border);
	box-shadow: var(--box-shadow);
	margin-block: 10rem;
	overflow: hidden;
	transition: all 500ms ease-in-out;
	transform: scale(0.2) translateX(200%) rotate(-200deg);
	opacity: 0.5;
}
.tl-slide.active {
	transform: scale(1.2) translateX(0) rotate(0deg);
	opacity: 1;
}
.tl-notes {
	/* padding: 1rem; */
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	justify-items: center;
	align-items: center;
	flex: 1;
}

.tl-notes h2 {
	color: white;
	text-shadow: var(--text-shadow);
	font-size: 2rem;
	border-bottom: 2px solid var(--accent-hover);
	text-align: center;
	padding-inline: 0.5rem;
}
.tl-notes small {
	color: var(--accent);
	font-size: 1.5rem;
	text-align: center;
}
.tl-img {
	height: 20rem;
}
.tl-img img {
	height: 100%;
	object-fit: cover;
	width: auto;
	transition: all 300ms ease-in-out;
	filter: saturate(100%) brightness(120%);
}
.inprogress-box {
	width: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 1rem;
}
.inprogress {
	height: 20rem;
	display: flex;
	border-radius: 20px;
	border: var(--glass-border);
	overflow: hidden;
	transform: scale(0.7);
	filter: brightness(90%) saturate(100%);
	transition: 150ms all ease-in-out;
}
.inprogress .section-title {
	font-size: 1rem;
}
.inprogress:hover {
	transform: scale(0.8);
	filter: brightness(110%) saturate(120%);
}

/* ------------------------------ Gallery Page ------------------------- */

.gallery {
	display: grid;
	grid-template-rows: repeat(4, 25%);
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;

	grid-template-areas:
		"a  b  c  d"
		"l  m  m  e"
		"k  m  m  f"
		"j  i  h  g";

	padding: 20px;
	margin: 40px 0;
	--stagger-delay: 100ms;
}

.gallery-img {
	background-color: var(--glassy);
	border: var(--glass-border);
	width: 100%;
	/* height: 100%; */
	min-height: 200px;
	object-fit: cover;
	cursor: pointer;
	border-radius: 8px;
	transition: 0.3s;
	animation: photoEntrance 700ms ease-out;
	animation-fill-mode: backwards;
}
.gallery-img:hover {
	transform: scale(1.02);
}

/* لایت‌باکس تمام صفحه */
/* Lightbox */
.lightbox {
	display: none;
	position: fixed;
	z-index: 3000;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.85);
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(8px);
}

/* Lightbox image */
.lightbox-content {
	max-width: 90%;
	max-height: 90%;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	transition: 0.3s;
}

/* close button */
.close {
	position: absolute;
	top: 20px;
	right: 35px;
	color: #fff;
	font-size: 3rem;
	cursor: pointer;
}

/* prev-next buttons */
.prev,
.next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 3rem;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	padding: 10px;
	transition: 0.2s;
	user-select: none;
}
.close:hover,
.prev:hover,
.next:hover {
	color: var(--accent-hover);
}

.prev {
	left: 30px;
}
.next {
	right: 30px;
}

.gallery-img:nth-child(1) {
	grid-area: a;
	animation-delay: calc(1 * var(--stagger-delay));
}
.gallery-img:nth-child(2) {
	grid-area: b;
	animation-delay: calc(2 * var(--stagger-delay));
}
.gallery-img:nth-child(3) {
	grid-area: c;
	animation-delay: calc(3 * var(--stagger-delay));
}
.gallery-img:nth-child(4) {
	grid-area: d;
	animation-delay: calc(4 * var(--stagger-delay));
}
.gallery-img:nth-child(5) {
	grid-area: e;
	animation-delay: calc(5 * var(--stagger-delay));
}
.gallery-img:nth-child(6) {
	grid-area: f;
	animation-delay: calc(6 * var(--stagger-delay));
}
.gallery-img:nth-child(7) {
	grid-area: g;
	animation-delay: calc(7 * var(--stagger-delay));
}
.gallery-img:nth-child(8) {
	grid-area: h;
	animation-delay: calc(8 * var(--stagger-delay));
}
.gallery-img:nth-child(9) {
	grid-area: i;
	animation-delay: calc(9 * var(--stagger-delay));
}
.gallery-img:nth-child(10) {
	grid-area: j;
	animation-delay: calc(10 * var(--stagger-delay));
}
.gallery-img:nth-child(11) {
	grid-area: k;
	animation-delay: calc(11 * var(--stagger-delay));
}
.gallery-img:nth-child(12) {
	grid-area: l;
	animation-delay: calc(12 * var(--stagger-delay));
}
.gallery-img:last-child {
	grid-area: m;
	animation-delay: calc(13 * var(--stagger-delay));
}

@keyframes photoEntrance {
	from {
		opacity: 0;
		transform: scale(0.3);
		filter: hue-rotate(180deg);
	}
	to {
		opacity: 1;
		transform: scale(1);
		filter: hue-rotate(0deg);
	}
}

/* ------------------------------- buttons btn ---------------------------------- */
.p-btn,
.s-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: 900;
	padding: 0.5rem 0.5rem;
	height: 60px;
	aspect-ratio: 4/1;
	border-radius: 0.4rem;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	text-align: center;
	transition: all 200ms ease-in-out;
	-webkit-box-reflect: below 10px
		linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));

	border-radius: 10px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	color: #fff;
	transition: 0.2s;
}
.p-btn {
	background-color: var(--accent);
	color: white;
}
.p-btn-default,
.p-btn-flip {
	display: flex;
	align-items: center;
	justify-content: space-around;
	text-transform: uppercase;
	transition: all 0.3s ease;
}
.p-btn-flip {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	transform: translate(0%, 100%);
}

.p-btn-default span {
	color: white;
}

.p-btn-flip span {
	color: white;
}

.p-btn:hover .p-btn-default {
	transform: translate(0%, -100%);
}

.p-btn:hover .p-btn-flip {
	transform: translate(0%, 0%);
}

.s-btn {
}

.s-btn:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	background: transparent;
	color: var(--accent);
}

.s-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ui-btn {
	justify-content: space-around;
	max-width: 50%;
}
.ui-svg {
	height: 1.5rem;
}
/* ----------------------- Our Team page --------------------- */
.our-team-bg {
	box-sizing: border-box;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.our-team-container {
	width: 100%;
	max-width: 1200px;
	height: 450px;
	position: relative;
	perspective: 1000px;
	margin-top: 0px;
}
.our-team-track {
	z-index: -1;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.our-team-card {
	position: absolute;
	width: 250px;
	height: 350px;
	background: white;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	transition: all 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
}
.our-team-card img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.our-team-card.center {
	z-index: 10;
	transform: scale(1.1) translateZ(0);
}
.our-team-card.left-1,
.our-team-card.right-1 {
	z-index: 5;
	transform: scale(0.4) translateZ(-100px);
	opacity: 0.9;
}
.our-team-card.left-2,
.our-team-card.right-2 {
	z-index: 1;
	transform: scale(0.3) translateZ(-300px);
	opacity: 0.7;
}
.our-team-card.left-1 img,
.our-team-card.left-2 img,
.our-team-card.right-1 img,
.our-team-card.right-2 img {
	filter: grayscale(100%);
}
.our-team-card.left-1 {
	transform: translateX(-200px) scale(0.9) translateZ(-100px);
}
.our-team-card.left-2 {
	transform: translateX(-400px) scale(0.8) translateZ(-300px);
}
.our-team-card.right-1 {
	transform: translateX(200px) scale(0.9) translateZ(-100px);
}
.our-team-card.right-2 {
	transform: translateX(400px) scale(0.8) translateZ(-300px);
}
.our-team-card.hidden {
	opacity: 0;
	pointer-events: none;
}
.member-info {
	text-align: center;
	margin-top: 5px;
	transition: all 0.5s ease-out;
}
.member-name {
	padding-top: 1rem;
	color: var(--accent);
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 5px;
	position: relative;
	display: inline-block;
	transition: all 100ms ease;
}
.member-name::before,
.member-name::after {
	content: "";
	position: absolute;
	top: 100%;
	width: 100%;
	height: 2px;
	background: var(--accent-hover);
}
.member-name::before {
	left: -120px;
}
.member-name::after {
	right: -120px;
}
.member-role {
	color: #848696;
	font-size: 1.5rem;
	font-weight: 500;
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	padding: 10px 0;
	margin-top: -10px;
}
.dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}
.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #cccccc9f;
	cursor: pointer;
	transition: all 300ms ease;
}
.dot.active {
	background: var(--accent);
	transform: scale(1.2);
}
.nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: black;
	color: var(--accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-items: center;
	cursor: pointer;
	z-index: 20;
	transition: all 200ms ease;
	border: none;
	border-radius: 8px;
	padding: 10px;
}
.nav-arrow svg {
	height: 60px;
	width: auto;
}
.nav-arrow:hover {
	scale: 1.4;
	border: solid 1px var(--accent-hover);
}
.nav-arrow.left {
	left: 50px;
}
.nav-arrow.right {
	right: 50px;
}
/* Employee of month */
.emp-box {
	display: flex;
	gap: 0.5rem;
	flex-direction: column;
	justify-content: space-between;
}
/* ----------------------- News page --------------------------- */
.news-box {
	margin-block: 1rem;
	margin-bottom: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.news-imgs {
	font-size: 0.9rem;
	font-weight: 200;
	color: var(--accent);
	border-top: dotted 1px var(--accent);
	border-bottom: dotted 1px var(--accent);
	border-radius: 10px;
	padding: 1rem 0.5rem;
	display: flex;
	gap: 1rem;
	justify-content: flex-start;
}
.news-imgs img {
	height: 150px;
	width: auto;
	border-radius: 8px;
	box-shadow: var(--box-shadow);
	transition: all 250ms ease-in-out;
}
.news-imgs img:hover {
	transform: scale(1.2);
}
.news-title {
	width: fit-content;
	border-bottom: solid 2px var(--accent);
	color: var(--accent);
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 1rem;
}
.news-content {
	font-size: 1rem;
	text-align: justify;
}
.news-info {
	margin-top: 1rem;
	display: flex;
	gap: 2rem;
	color: gray;
}
/* ----------------------- Join Us page ------------------------ */
.only-locals {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 1rem;

	color: red;
	background: rgba(234, 2, 2, 0.275);
	border: solid 1px red;

	border-radius: 10px;
	padding: 0.5rem;
	margin: 2rem;
	animation: blink 3s infinite;
}
.deactive {
	pointer-events: none;
}
/* ----------------------- Images ------------------------ */

.image-container {
	overflow: hidden;
	position: relative;
}

img {
	width: 100%;
}

/* -------------------Page loading Loader ---------------- */

.page-loader {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}
.page-loader.show {
	opacity: 1;
	pointer-events: all;
}

.loader {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	box-sizing: border-box;
	border-top: 8px solid #fff;
	border-left: 8px solid #fff;
	border-right: 8px solid transparent;
	animation: loader-spin 0.7s infinite linear;
}

@keyframes loader-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ================= Page Exit Animation ================= */

.page-exit {
	animation: pageExit 0.35s ease forwards;
}

@keyframes pageExit {
	to {
		opacity: 0;
		transform: scale(0.98);
	}
}

/* ------------------------------- FORMS ---------------------------- */

.customer-info-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	gap: 1rem;

	grid-template-areas:
		"ft1	ft1		ft1		ft1"
		"f1		f2		f3		f4"
		"f5		f6		f6		f6"
		"f7		f8		f8		f8"
		"ft2	ft2 	ft2		ft2"
		"f9		f10		f11		f12"
		"ft3	ft3		ft3		ft3"
		"f13	f14		f15		f15"
		"f16	f16		f16		f16"
		"ft4	ft4		ft4		ft4"
		"f17	f17		f18		f18"
		"f19	f19		f20		f20"
		"f19p	f19p	f19p	f19p"
		"f21	f22		f23		f23"
		"f24	f24		f24		f25";
}
.f {
	background-color: var(--form-item-bg);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
	border-radius: 8px;
	overflow: hidden;
	transition: all 300ms ease;
}
.f label {
	color: rgb(240, 130, 130);
	text-align: center;
	color: var(--accent);
}
.f input,
.f select,
.f textarea {
	font-family: inherit;
	border: none;
	border-bottom: 1px solid var(--accent);
	padding: 3px 10px;
	width: 100%;
	outline: none;
	background-color: transparent;
	font-size: 1rem;
	color: var(--text);
	caret-color: var(--accent);
}

.f select {
	margin: 10px 0;
	color: var(--accent-hover);
}
.f input:focus {
	border-bottom: solid 3px var(--accent-hover);
}
.f:focus-within {
	background-color: var(--form-focus-bg);
}
.f img {
	max-height: 100px;
	width: auto;
}
.ft {
	color: var(--form-sectiontitle-text);
	border-inline-start: solid 4px var(--form-sectiontitle-text);
	border-radius: 12px;
	justify-content: right;
	padding: 10px;
	margin-top: 50px;
	background-color: var(--form_sectiontitle-bg);
}
.f-comment {
	font-size: 0.7rem;
	color: var(--form-comment);
	font-weight: bold;
	text-align: center;
}

.edu-item,
.exp-item,
.skill-item {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 10px;
}

.f .radio-group {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	align-items: center;
	border-radius: 15px;
	padding: 8px;
	accent-color: var(--radio-group-color);
}

.hidden {
	display: none;
}
.ft1 {
	grid-area: ft1;
}
.ft2 {
	grid-area: ft2;
}
.ft3 {
	grid-area: ft3;
}
.ft4 {
	grid-area: ft4;
}
.ft5 {
	grid-area: ft5;
}

.f1 {
	grid-area: f1;
}
.f2 {
	grid-area: f2;
}
.f3 {
	grid-area: f3;
}
.f4 {
	grid-area: f4;
}
.f5 {
	grid-area: f5;
}
.f6 {
	grid-area: f6;
}
.f7 {
	grid-area: f7;
}
.f8 {
	grid-area: f8;
}
.f9 {
	grid-area: f9;
}
.f10 {
	grid-area: f10;
}

.f11 {
	grid-area: f11;
}
.f12 {
	grid-area: f12;
}
.f13 {
	grid-area: f13;
}
.f14 {
	grid-area: f14;
}
.f15 {
	grid-area: f15;
}
.f16 {
	grid-area: f16;
}
.f17 {
	grid-area: f17;
}
.f18 {
	grid-area: f18;
}
.f19 {
	grid-area: f19;
}
.f19p {
	grid-area: f19p;
}

.f20 {
	grid-area: f20;
}

.f21 {
	grid-area: f21;
}
.f22 {
	grid-area: f22;
}
.f23 {
	grid-area: f23;
}
.f24 {
	grid-area: f24;
}
.f25 {
	grid-area: f25;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Placeholder format */
input::placeholder {
	color: var(--form-placeholder-text);
	font-size: 0.75rem;
	opacity: 1;
	padding: 0 20px;
}
input::-webkit-input-placeholder {
	color: var(--form-placeholder-text);
	font-size: 0.75rem;
	padding: 0 20px;
}

/* Firefox */
input::-moz-placeholder {
	color: var(--form-placeholder-text);
	font-size: 0.75rem;
	opacity: 1;
	padding: 0 20px;
}

.pasteur-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(2, auto);
	gap: 1rem;
}

.pasteur-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.login-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	justify-items: center;
	gap: 2rem;
	margin: 5rem;
}
.login-container div {
	flex: 1;
}
.login-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-items: center;
	gap: 2rem;
	border: var(--glass-border);
	background: var(--glassy);
	backdrop-filter: blur(5px);
	box-shadow: var(--box-shadow);
	border-radius: 1rem;
	padding: 2rem;
	width: fit-content;
}
.login-container h2 {
	color: var(--accent);
	font-size: 2rem;
	font-weight: 1000;
}
.login-form input::placeholder {
	color: color-mix(in srgb, transparent 30%, var(--accent) 70%);
	font-size: 1rem;
	padding: 0;
	text-align: center;
}
.form-item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 0.2rem;
	position: relative;
}

.form-item label {
	position: absolute;
	inset-block-start: 0%; /* change this later*/
	inset-inline-start: 5%;
	pointer-events: none;
	color: color-mix(in srgb, var(--accent), white 30%);
	transition: 150ms ease-in-out;
}
.form-item input {
	font-family: inherit;
	font-weight: 400;
	background-color: color-mix(in srgb, var(--glassy), white 20%);
	height: 2rem;
	font-size: 1.2rem;
	padding: 0.5rem;
	border-radius: 5px;
	border: 0;
	color: var(--accent);
	direction: ltr;
	text-align: start;
	border-bottom: 2px solid rgba(126, 126, 126, 0.3);
	caret-color: var(--accent-hover);
	padding-inline-start: 1rem;
	outline: 0;
}

.form-item input:focus {
	border-bottom: solid 3px var(--accent-hover);
}
.login-form button {
	width: fit-content;
}

/* --------------------- -404 Page --------------------- */
.page-404 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0;
}
.page-404 h1 {
	font-size: 20vh;
}
.page-404 a {
	margin-block: 1rem;
	color: var(--accent);
	transition: all 200ms ease-in-out;
}
.page-404 a:hover {
	color: var(--accent-hover);
	transform: scale(1.05) translateY(-5px);
}
/* ==================== Hire Form ==================== */
/* ==================== Hire Form ==================== */

/* Multi-step */
.multi-step-form {
	width: 100%;
}
.form-step {
	display: none;
}
.form-step.active {
	display: block;
}

/* ==================== Card ==================== */

.card {
	margin: 60px 40px;
	padding: 40px;
	border-radius: 18px;
	background: var(--card-bg);
	backdrop-filter: blur(14px);
	border: var(--glass-border);
	box-shadow: var(--box-shadow);
}

.page-title {
	font-size: 2rem;
	font-weight: 900;
	margin-bottom: 30px;
	background: var(--section-title);
	-webkit-background-clip: text;
	background-clip: text;
	color: #fff0;
}

/* ==================== Progress ==================== */

.form-progress {
	margin-bottom: 40px;
}

.progress-steps {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
}

.step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	opacity: 0.5;
	transition: 0.3s;
}

.step.active {
	opacity: 1;
}

.step-number {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-weight: 700;
}

.step.active .step-number {
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	border: none;
}

.step-title {
	font-size: 0.85rem;
	text-align: center;
}

.progress-bar {
	width: 100%;
	height: 8px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--accent), var(--accent-hover));
	transition: width 0.4s ease;
}

/* ==================== Grid Layout (AREA BASED) ==================== */

.form-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 20px;

	grid-template-areas:
		"f1  f2  f3  f4"
		"f5  f5  f6  f7"
		"f8  f8  f9  f10"
		"f11 f12 f13 f13"
		"f14 f14 f14 f14"
		"f15 f16 f17 f18"
		"f19 f20 f21 f22"
		"f23 f24 f25 f25"
		"f26 f26 f26 f26"
		"f27 f27 f27 f27"
		"f28 f28 f28 f28"
		"f29 f29 f29 f29"
		"f30 f30 f30 f30"
		"f31 f32 f33 f33";
}

/* اتصال هر فیلد به area */

.f1 {
	grid-area: f1;
}
.f2 {
	grid-area: f2;
}
.f3 {
	grid-area: f3;
}
.f4 {
	grid-area: f4;
}
.f5 {
	grid-area: f5;
}
.f6 {
	grid-area: f6;
}
.f7 {
	grid-area: f7;
}
.f8 {
	grid-area: f8;
}
.f9 {
	grid-area: f9;
}
.f10 {
	grid-area: f10;
}
.f11 {
	grid-area: f11;
}
.f12 {
	grid-area: f12;
}
.f13 {
	grid-area: f13;
}
.f14 {
	grid-area: f14;
}
.f15 {
	grid-area: f15;
}
.f16 {
	grid-area: f16;
}
.f17 {
	grid-area: f17;
}
.f18 {
	grid-area: f18;
}
.f19 {
	grid-area: f19;
}
.f20 {
	grid-area: f20;
}
.f21 {
	grid-area: f21;
}
.f22 {
	grid-area: f22;
}
.f23 {
	grid-area: f23;
}
.f24 {
	grid-area: f24;
}
.f25 {
	grid-area: f25;
}
.f26 {
	grid-area: f26;
}
.f27 {
	grid-area: f27;
}
.f28 {
	grid-area: f28;
}
.f29 {
	grid-area: f29;
}
.f30 {
	grid-area: f30;
}
.f31 {
	grid-area: f31;
}
.f32 {
	grid-area: f32;
}
.f33 {
	grid-area: f33;
}

/* ==================== Fields ==================== */

.f {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.f label {
	font-weight: 600;
	font-size: 0.9rem;
}

.f input,
.f select,
.f textarea {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	padding: 10px 12px;
	color: var(--text);
	font-family: inherit;
	transition: 0.2s;
}

.f input:focus,
.f select:focus,
.f textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(0, 150, 255, 0.2);
}

.f textarea {
	resize: vertical;
}

/* ==================== Repeatable Blocks ==================== */

.edu_item,
.exp_item,
.skill_item {
	padding: 20px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 20px;
	position: relative;
}

.flex_row {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.flex_col {
	flex: 1;
	min-width: 180px;
}

.remove_item_btn {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	background: none;
	border: none;
	color: #ff4d4d;
	cursor: pointer;
}

/* ==================== Navigation ==================== */

.step-navigation {
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
}

/* ==================== Responsive ==================== */

@media (max-width: 768px) {
	.form-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"f1" "f2" "f3" "f4" "f5" "f6" "f7" "f8" "f9" "f10"
			"f11" "f12" "f13" "f14" "f15" "f16" "f17" "f18"
			"f19" "f20" "f21" "f22" "f23" "f24" "f25" "f26"
			"f27" "f28" "f29" "f30" "f31" "f32" "f33";
	}

	.step-navigation {
		flex-direction: column;
	}
}