/* arabic */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(./fonts/Dxxo8j6PP2D_kU2muijlGMWWMmk.woff2) format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin-ext */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(./fonts/Dxxo8j6PP2D_kU2muijlE8WWMmk.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(./fonts/Dxxo8j6PP2D_kU2muijlHcWW.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(./fonts/Dxxo8j6PP2D_kU2muijlGMWWMmk.woff2) format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin-ext */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(./fonts/Dxxo8j6PP2D_kU2muijlE8WWMmk.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(./fonts/Dxxo8j6PP2D_kU2muijlHcWW.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--animate-duration: 0.7s;
	--animation-timing-function: cubic-bezier(0, 1, 0, 1.009);
}

.animate__delay-1 {
	animation-delay: 0.2s;
}

.animate__delay-2 {
	animation-delay: 0.4s;
}

.animate__delay-3 {
	animation-delay: 0.6s;
}

.animate__delay-4 {
	animation-delay: 0.8s;
}

.animate__delay-5 {
	animation-delay: 1s;
}

.animate__delay-6 {
	animation-delay: 1.2s;
}

.animate__delay-7 {
	animation-delay: 1.4s;
}

.animate__delay-8 {
	animation-delay: 1.6s;
}

.animate__delay-9 {
	animation-delay: 1.8s;
}

.animate__delay-10 {
	animation-delay: 2s;
}

.animate__delay-11 {
	animation-delay: 2.2s;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none !important;
}

body {
	font-family: 'Vazirmatn', sans-serif;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	background: #000;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 2rem;
}

.bg-slider,
.hover-bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	background-size: cover;
	background-position: center;
}

.bg-slider {
	animation: slideImages 20s infinite ease-in-out;
	transition: all 3s ease-in-out;
	background-image: url('bg1.jpg');
}

@keyframes slideImages {

	0%,
	29% {
		background-image: url('bg1.jpg');
		filter: brightness(1);
	}

	30% {
		background-image: url('bg1.jpg');
		filter: brightness(0.3);
	}

	31% {
		background-image: url('bg2.jpg');
		filter: brightness(0.3);
	}

	32% {
		background-image: url('bg2.jpg');
		filter: brightness(1);
	}

	33%,
	59% {
		background-image: url('bg2.jpg');
		filter: brightness(1);
	}

	60% {
		background-image: url('bg2.jpg');
		filter: brightness(0.3);
	}

	61% {
		background-image: url('bg3.jpg');
		filter: brightness(0.3);
	}

	62% {
		background-image: url('bg3.jpg');
		filter: brightness(1);
	}

	63%,
	89% {
		background-image: url('bg3.jpg');
		filter: brightness(1);
	}

	90% {
		background-image: url('bg3.jpg');
		filter: brightness(0.3);
	}

	91% {
		background-image: url('bg1.jpg');
		filter: brightness(0.3);
	}

	92% {
		background-image: url('bg1.jpg');
		filter: brightness(1);
	}

	93%,
	100% {
		background-image: url('bg1.jpg');
		filter: brightness(1);
	}
}

.hover-bg {
	z-index: -2;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.logo {
	width: 200px;
}

.tornado-spin {
	transform: rotate(36000deg);
	transition: transform 1s ease-out;
}

.overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgb(60 2 73 / 85%), rgba(0, 180, 216, 0.75));
	z-index: -1;
}

@keyframes fadeTo0-5 {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 0.5;
	}
}

@keyframes spring {
  0%   { transform: scale(1); }
  20%  { transform: scale(0.9); }
  40%  { transform: scale(1.1); }
  60%  { transform: scale(0.95); }
  80%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.spring-animation {
  animation: spring 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#logo {
  position: relative;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.spring-return {
  animation: returnSpring 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes returnSpring {
  0%   { transform: translate(var(--dx), var(--dy)); }
  30%  { transform: translate(calc(var(--dx) * -0.3), calc(var(--dy) * -0.3)); }
  60%  { transform: translate(calc(var(--dx) * 0.2), calc(var(--dy) * 0.2)); }
  100% { transform: translate(0, 0); }
}
.container {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	min-height: 80vh;
	max-width: 700px;
	width: 100%;
}

h1 {
	font-size: 2.4rem;
	font-weight: 700;
	margin-bottom: 2rem;
}

.card-links {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	align-items: center;
}

.card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: rgba(255 255 255 / 0.15);
	backdrop-filter: blur(8px);
	padding: 1rem 1.5rem;
	border-radius: 16px;
	color: white;
	text-align: center;
	width: 100%;
	max-width: 560px;
	transition: transform 0.3s ease;
}

.card:hover {
	transform: scale(1.03);
}

.card div {
	font-size: 1.2rem;
	font-weight: 500;
	display: flex;
	align-items: center;
}

.card>div:first-child {
	flex-direction: column;
	justify-content: center;
}

.card>div:last-child {
	flex: 1;
	justify-content: right;
	max-width: 290px;
}

.card img {
	width: 36px;
	height: 36px;
}

#templatemo_footer {
	opacity: 0;
	animation: fadeTo0-5 2.5s forwards 2s;
	text-align: left;
	color: #fff;
	font-size: 11px;
	align-self: flex-end;
	padding: 0px 0px 40px 10px;
}

#templatemo_footer:hover {
	opacity: 1 !important;
}

#templatemo_footer a {
	color: #fff;
}

@media (max-width: 600px) {

	.container {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}

	h1 {
		font-size: 1.6rem;
		margin-bottom: 1.5rem;
	}

	.card {
		justify-content: center;
		padding: 1rem;
	}

	.card div {
		font-size: 1rem;
	}
}