@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
/* font-family: "Urbanist", sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
/* font-family: "Geist", sans-serif; */


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

html {
	scroll-behavior: smooth;
	font-size: 10px;
}

body {
	font-size: var(--fs-sixteen);
	color: var(--white);
	font-family: var(--font-family-urbanist);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	background-color: var(--background);
}

.container {
	max-width: 1460px;
	margin: 0px auto;
	padding: 0 50px;
	width: 100%;
}

li {
	list-style-type: none;
}

a {
	text-decoration: none;
	display: inline-flex;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	user-select: none;
	width: auto;
	border: none;
}


/*************** Global styles ***************/

:root {
	/* Primary Colors */
	--background: #0a0a0a;
	--foreground: #ffffff;
	--accent: #d90cb7;

	/* Grayscale Palette */
	--border: #383838;
	--cod-gray-300: #b0b0b0;
	--cod-gray-400: #888888;

	/* Extended Color System */
	--white: #ffffff;
	--black: #000000;
	--magenta-primary: #d90cb7;
	--magenta-bright: #ff1c89;
	--gray-50: #fafafa;
	--gray-100: #f5f5f5;
	--gray-200: #e5e5e5;
	--gray-300: #d4d4d4;
	--gray-400: #a3a3a3;
	--gray-500: #737373;
	--gray-600: #525252;
	--gray-700: #404040;
	--gray-800: #262626;
	--gray-900: #171717;
	--gray-950: #0a0a0a;

	/* Opacity Variants */
	--white-100: rgba(255, 255, 255, 1);
	--white-90: rgba(255, 255, 255, 0.9);
	--white-80: rgba(255, 255, 255, 0.8);
	--white-75: rgba(255, 255, 255, 0.75);
	--white-70: rgba(255, 255, 255, 0.7);
	--white-62: rgba(255, 255, 255, 0.62);
	--white-60: rgba(255, 255, 255, 0.6);
	--white-55: rgba(255, 255, 255, 0.55);
	--white-50: rgba(255, 255, 255, 0.5);
	--white-35: rgba(255, 255, 255, 0.35);
	--white-30: rgba(255, 255, 255, 0.3);
	--white-24: rgba(255, 255, 255, 0.24);
	--white-20: rgba(255, 255, 255, 0.2);
	--white-10: rgba(255, 255, 255, 0.1);
	--white-06: rgba(255, 255, 255, 0.06);
	--white-01: rgba(255, 255, 255, 0.01);

	--black-100: rgba(0, 0, 0, 1);
	--black-92: rgba(10, 10, 10, 0.92);
	--black-62: rgba(56, 56, 56, 0.62);
	--black-70: rgba(56, 56, 56, 0.7);
	--black-90: rgba(56, 56, 56, 0.9);

	--magenta-100: rgba(217, 12, 183, 1);
	--magenta-12: rgba(217, 12, 183, 0.12);
	--magenta-10: rgba(217, 12, 183, 0.1);

	/* Border Colors */
	--border-primary: rgba(255, 255, 255, 0.24);
	--border-secondary: rgba(56, 56, 56, 0.7);
	--border-tertiary: rgba(56, 56, 56, 0.9);

	/* Background Colors */
	--bg-primary: #0a0a0a;
	--bg-secondary: rgba(10, 10, 10, 0.01);
	--bg-hover: rgba(255, 255, 255, 0.1);
	--bg-accent: rgba(217, 12, 183, 0.1);

	/* Shadow Colors */
	/* --shadow-hover: 0px 6px 32px -8px rgba(255, 255, 255, 0.2);
  --shadow-spotlight: radial-gradient(circle 360px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(217,12,183,0.12) 0%, transparent 70%);
  --shadow-radial: radial-gradient(circle 320px at var(--mouse-x, 50%) var(--mouse-y, 50%), #d90cb7 0%, rgba(56,56,56,0.62) 55%); */

	/* Gradient Overlays */
	--gradient-bottom: linear-gradient(to bottom, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.25) 35%, rgba(10, 10, 10, 0.92) 100%);
	--gradient-left: linear-gradient(to left, #0a0a0a 0%, rgba(10, 10, 10, 0) 15%);
	--gradient-top: linear-gradient(to bottom, #0a0a0a 0%, rgba(10, 10, 10, 0) 12%);

	/** font family **/
	--font-family-urbanist: 'Urbanist', sans-serif;
	--font-family-geist: 'Geist', sans-serif;

	/**** transition ****/
	--transition: all ease-in-out 0.4s;
	--transition-speed: 1400ms;
	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

	/***** font size *****/
	--fs-seventy-eight: 7.8rem;
	--fs-twenty: 2rem;
	--fs-fourteen: 1.4rem;
	--fs-sixteen: 1.6rem;

	/***** line height *****/
	--lh-twenty: 2rem;
}

/******* buttons *******/

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.2rem 2rem;
	border: 0.1rem solid var(--white-24);
	background-color: var(--bg-secondary);
	color: var(--white);
	font-size: var(--fs-fourteen);
	transition: var(--transition);
	gap: 0.6rem;
	line-height: var(--lh-twenty);
	width: max-content;
	border-radius: 99rem;
}

.btn:hover,
.btn:focus,
.btn:active {
	background-color: var(--bg-hover);
	border-color: var(--white-50);
	box-shadow: 0px 6px 32px -8px rgba(255, 255, 255, 0.2);
}


/********************** Header and Preloader styles **********************/

/********************** Header and Preloader styles **********************/

#preloader {
	position: fixed;
	inset: 0;
	background: var(--background);
	z-index: 99;
	transition: opacity 0.8s ease;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 140rem;
	margin: 0 auto;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 100;
}

.logo-container.is-preloading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1.5);
	z-index: 101;
	transition:
		top 1400ms var(--ease-out-expo),
		left 1400ms var(--ease-out-expo),
		transform 1400ms var(--ease-out-expo);
}

.logo-container.is-preloading.is-shrinking {
	top: 1.6rem;
	left: max(calc(50% - 68rem + 1.6rem), 1.6rem);
	transform: scale(1);
}

.logo-letter {
	opacity: 0;
	transform: translateY(4rem);
	filter: blur(1.2rem);

	transition:
		opacity 1000ms ease,
		transform 1200ms var(--ease-out-expo),
		filter 1000ms ease,
		width 1400ms var(--ease-out-expo),
		height 1400ms var(--ease-out-expo),
		margin 1400ms var(--ease-out-expo);
}

.logo-letter.is-visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

main {
	padding: 180px 30px 80px;
	max-width: 1100px;
	margin: auto;
	opacity: 0;
	transform: translateY(4rem);
	transition:
		opacity 1.2s ease,
		transform 1.2s ease;
}

body.is-loaded main {
	opacity: 1;
	transform: translateY(0);
}

body.is-loaded {
	overflow-y: auto;
}

.logo-letter img,
.logo-letter svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.logo-container.is-preloading .logo-letter {
	width: 100px;
	height: 100px;
}

.logo-container.is-preloading .logo-letter:last-child {
	width: 24px;
	height: 24px;
	margin-bottom: 14px;
}

.logo-container.is-preloading.is-shrinking .logo-letter {
	width: 20px;
	height: 20px;
}

.logo-container.is-preloading.is-shrinking .logo-letter:last-child {
	width: 10px;
	height: 10px;
	margin-bottom: 6px;
}

.logo-container:not(.is-preloading) .logo-letter {
	width: 20px;
	height: 20px;
}

.logo-container:not(.is-preloading) .logo-letter:last-child {
	width: 10px;
	height: 10px;
	margin-bottom: 6px;
}

/**** header typhography ****/

.header_main {
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
	gap: 30px;
}

.mobileIcon {
	display: none;
}

.header_right.right_menu {
	display: flex;
	flex: 1;
	gap: 30px;
}

.header_logo {
	width: max-content;
}

.header_menu {
	margin: 0 auto;
	display: flex;
	align-items: center;
}

.header_menu .menu {
	display: flex;
	gap: 36px;
}

.header_menu .menu a {
	font-size: var(--fs-fourteen);
	color: var(--white);
}