@charset "utf-8";

/* @import url("https://fonts.googleapis.com/css2?family=Boldonse&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"); */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200..800&display=swap");

:root {
	--gray-50: hsl(0, 0%, 98%);
	--gray-100: hsl(0, 0%, 96%);
	--gray-200: hsl(0, 0%, 90%);
	--gray-300: hsl(0, 0%, 77%);
	--gray-400: hsl(0, 0%, 64%);
	--gray-500: hsl(0, 0%, 45%);
	--gray-600: hsl(0, 0%, 32%);
	--gray-700: hsl(0, 0%, 25%);
	--gray-800: hsl(0, 0%, 15%);
	--gray-900: hsl(0, 0%, 11%);
	--gray-950: hsl(0, 0%, 7%);

	--black-50: rgba(0, 0, 0, 0.05);
	--black-100: rgba(0, 0, 0, 0.1);
	--black-200: rgba(0, 0, 0, 0.2);
	--black-300: rgba(0, 0, 0, 0.3);
	--black-400: rgba(0, 0, 0, 0.4);
	--black-500: rgba(0, 0, 0, 0.5);
	--black-600: rgba(0, 0, 0, 0.6);
	--black-700: rgba(0, 0, 0, 0.7);
	--black-800: rgba(0, 0, 0, 0.8);
	--black-900: rgba(0, 0, 0, 0.9);
	--black-950: rgba(0, 0, 0, 0.95);

	--white-50: rgba(255, 255, 255, 0.05);
	--white-100: rgba(255, 255, 255, 0.1);
	--white-200: rgba(255, 255, 255, 0.2);
	--white-300: rgba(255, 255, 255, 0.3);
	--white-400: rgba(255, 255, 255, 0.4);
	--white-500: rgba(255, 255, 255, 0.5);
	--white-600: rgba(255, 255, 255, 0.6);
	--white-700: rgba(255, 255, 255, 0.7);
	--white-800: rgba(255, 255, 255, 0.8);
	--white-900: rgba(255, 255, 255, 0.9);
	--white-950: rgba(255, 255, 255, 0.95);

	--color-primary: hsl(250.64deg 100% 60%);
	--color-secondary: #1ecdef;
	--color-content-primary: var(--gray-100);
	--text-light: var(--gray-100);
	--atext-dark: var(--gray-950);

	--bg-body: hsl(240, 30%, 7%);
	
	--fs-h1: 63rem;
	--fs-h2: 2.75rem;
	--fs-h3: 2.25rem;
	--fs-h4: 1.5rem;
	--fs-h5: 1.25rem;
	--fs-h6: 1.15rem;
	--fs-lg: 1.1rem;
	--fs-xl: 1.2rem;
	--fs-lg: 1.1rem;
	--fs-md: 0.925rem;
	--fs-sm: 0.825rem;
	--fs-xs: 0.725rem;

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 900;

	--header-width: 100%;
	--header-height: 4rem;
	--content-width: 1280px;
	--padding-x: 1rem;
	--padding-y: 3rem;

	--sans-serif: 'Outfit', Helvetica, AppleSDGothicNeo, sans-serif;
}

@media (min-width: 576px) {
	:root {
		--padding-x: 1.5rem;
	}
}

@media (min-width: 768px) {
	:root {

		--fs-h1: 3.5rem;
		--fs-h2: 3rem;
		--fs-h3: 2.6rem;
		--fs-h4: 2.0rem;
		--fs-h5: 1.5rem;
		--fs-h6: 1.25rem;
		--fs-md: 0.95rem;
		--fs-sm: 0.85rem;
		--fs-xs: 0.8rem;
		
		--header-height: 90px;
		--padding-x: 2rem;
		--padding-y: 6rem;
	}
}

@media (min-width: 1281px) {
	:root {
		--padding-x: 2rem;
	}
}

/* reset */
* {
	box-sizing: border-box;
}

::selection {
	color: var(--color-content-primary);
	background-color: var(--color-secondary);
}

::-moz-selection {
	color: var(--color-content-primary);
	background-color: var(--color-secondary);
}

html,
body {
	color-scheme: dark light;
	min-width: 320px;
	height: 100%;
	background-color: var(--bg-body);
	/* overscroll-behavior: none; */
}

body {
	display: flex;
	flex-direction: column;
	font-family: var(--sans-serif);
	line-height: 1.267;
	color: var(--color-content-primary);
	font-size: 1rem;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	-moz-osx-font-smoothing: grayscale;

	@media (prefers-color-scheme: dark) {
		background-color: #000000; /* Dark background for dark mode users */
	}
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
p,
button,
iframe,
th,
td {
	margin: 0;
	padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
nav,
section,
summary,
main {
	display: block;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
dt {
	font-weight: 600;
}

h3,
h4,
h5 {
	.content & {
		text-align: center;
	}
}


h1 {
	font-size: var(--fs-h1);
}

h2 {
	font-size: var(--fs-h2);
}

h3 {
	font-size: var(--fs-h3);
}

h4 {
	font-size: var(--fs-h4);
}

h5 {
	font-size: var(--fs-h5);
}

h6 {
	font-size: var(--fs-h6);
}

.text-xl {
	font-size: var(--fs-xl) !important;
}

.text-lg {
	font-size: var(--fs-lg) !important;
}

.text-md {
	font-size: var(--fs-md) !important;
}

.text-sm {
	font-size: var(--fs-sm) !important;
}

.text-xs {
	font-size: var(--fs-xs) !important;
}


img,
fieldset,
iframe,
button {
	border: 0 none;
}

li {
	list-style: none;
}

button {
	border: 0 none;
	outline: none;
	font-family: 'Poppins', sans-serif;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th,
td {
	border-collapse: collapse;
}

legend,
caption,
hr {
	display: none;
}

select,
input,
textarea {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	color: #000;
	border-radius: 0;
	border: none;
}

i,
em,
u,
cite {
	font-style: normal;
}

strong {
	font-weight: normal;
}

img {
	border: 0;
	vertical-align: middle;
}

a {
	color: var(--color-content-primary);
	text-decoration: none !important;
	outline-offset: -1px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

address {
	font-style: normal;
}

figure {
	border-radius: 0.25rem;
	overflow: hidden;
	
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

svg.icon {
	width: 22px;
	height: 22px;
	vertical-align: middle;
	fill: currentColor;
}

/* layout */

.main-wrapper {
	position: relative;
	max-width: 100%;
	scrollbar-width: none;
	-ms-overflow-style: none;

	&::-webkit-scrollbar {
		display: none;
	}
}


header {
	position: fixed;
	top: 0;
	display: flex;
	width: var(--header-width);
	height: var(--header-height);
	padding-inline: var(--padding-x);
	z-index: 100;

	&:before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: var(--header-height);
		backdrop-filter: blur(0);
		z-index: 0;
		transition: background-color .25s ease-in-out;
	}
	
	&.fixed:before {
		background-color: rgba(0, 0, 0, .8);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		pointer-events: none;
	}

	a.logo {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: start;
		z-index: 10;
		transition: height 0.3s ease;

		svg.icon-logo {
			width: 52px;
			height: 42px;
			transition: height 0.3s ease;
		}

	@media (min-width: 768px) {
		
		svg.icon-logo {
			width: 60px;
			height: 50px;
			transition: height 0.3s ease;
		}
	}

	@media (min-width: 1281px) {
		
		svg.icon-logo {
			width: 74px;
			height: 60px;
			transition: height 0.3s ease;
		}
	}


	}

	.nav-group {
		--burger-box-height: 18px;
		--burger-box-width: 24px;
		--burger-box-thickness: 2px;
	
		.nav-trigger {
			position: absolute;
			right: var(--padding-x);
			top: calc(	(var(--header-height) - var(--burger-box-height)) / 2);
			width: var(--burger-box-width);
			height: var(--burger-box-height);
			z-index: 12;
		
			@media (min-width: 768px) {
				display: none;
			}
		}
	
		.burger {
			font: inherit;
			display: inline-block;
			overflow: visible;
			margin: 0;
			padding: 0;
			cursor: pointer;
			transition-timing-function: linear;
			transition-duration: .2s;
			transition-property: opacity, filter;
			text-transform: none;
			color: inherit;
			border: 0;
			background-color: transparent;
		
			.burger-box {
			
				position: relative;
				display: inline-block;
				width: var(--burger-box-width);
				height: var(--burger-box-height);
		
				.burger-inner {
					top: 0;
					transition-timing-function: cubic-bezier(0.85, 0, 0.26, 1);
					transition-duration: .275s;
						
					&:before {
						top: 7px;
						transition: opacity .125s ease .275s;
					}
					
					&:after {
						top: 14px;
						transition: transform .275s cubic-bezier(0.85, 0, 0.26, 1);
					}
				
					.header.is-active & {
						transition-delay: 75ms;
						transform: translate3d(0, 6px, 0) rotate(135deg);
				
						&:before {
							transition-delay: 0s;
							opacity: 0;
						}
						
						&:after {
							transition-delay: 75ms;
							transform: translate3d(0, -14px, 0) rotate(-270deg);
						}
					}
			
					&:before,
					&:after {
						content: '';
						display: block;
					}
				}	
			
				.burger-inner,
				.burger-inner:after,
				.burger-inner:before {
					position: absolute;
					width: var(--burger-box-width);
					height: var(--burger-box-thickness);
					transition-timing-function: ease;
					transition-duration: .15s;
					transition-property: transform;
					border-radius: 0;
					background-color: #fff;
				}
			}
		}
		
		.contact-btn {
			display: none;
			z-index: 10;

			@media (min-width: 768px) {
				display: flex;
				margin-left: 1.5rem;
			}
		}

		nav {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 1;
			background: transparent;
			-webkit-backdrop-filter: blur(0px);
			backdrop-filter: blur(0);
			opacity: 0;
			pointer-events: none;
			transition: all .35s ease;
				
			ul {
				padding: calc(var(--header-height) + 3rem) 0 0 0;

				&.sns {
					padding-top: 0.25rem;

					@media (min-width: 768px) {
						display: none;
					}

					& .sns-link {

						a {
							width: 100%;
						}
					}
				}
			}
			
			a {
				display: block;
				padding: 8px calc(var(--padding-x) * 2);
				font-size: clamp(36px, 7.5vw, 54px);
				font-weight: 500;
				color: var(--gray-300);
				transition: color .35s ease;
				user-select: none;
				
				&:hover {
					color: var(--color-primary);
				}
				
				&.on {
					color: white;
					font-weight: 600;
				}
			}
		
			.is-active & {
				opacity: 1;
				pointer-events: auto;
				user-select: none;
				-webkit-backdrop-filter: blur(30px);
				backdrop-filter: blur(30px);
				background: hsla(0, 0%, 0%, 0.5);
			
				ul {
					gap: 0.25rem;

					li:has(.btn) {
						padding: 8px 2rem;
					}
				}	
			}
		
			@media (min-width: 768px) {
		
				opacity: 1;
				position: relative;
				z-index: 10;
				pointer-events: auto;
		
				ul {
					display: flex;
					padding-top: 0;
					gap: 0.5rem;
		
					li {
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
		
				a {
		
					&.link {
						position: relative;
						padding-inline: 0.75rem;
						font-size: 1rem;
						line-height: 22px;
						letter-spacing: 0.025em;
						transition: color .25s ease-in-out;
		
						&:before {
							content: '';
							position: absolute;
							left: 0.75rem;
							bottom: 0;
							width: calc(100% - 1.5rem);
							height: 3px;
							background-color: transparent;
							border-radius: 2px;
							transition: background-color .35s ease-in-out;
						}
					}
		
					&.on {
						letter-spacing: 0.01em;
						
						&:before {
							background-color: var(--color-primary);
						}
					}
		
					@media (min-width: 1024px) {
						padding-inline: 1rem;
					}
				}
			}
		}

		@media (min-width: 768px) {
			.nav-trigger.burger {
				display: none;
			}
		}		
	}
}

main {

	section {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100svh;
		padding: var(--padding-y) var(--padding-x);
		overflow: hidden;
		z-index: 1;

		body.project &,
		body.portfolio &,
		body.memofit & {
			min-height: unset !important;
		}

		h3 {
			body.home & {
				text-align: center;
				text-wrap: balance;
			}
		}

		video {
			position: absolute;
			left: 0;
			right: 0;
			z-index: 10;
			min-width: 100%;
			height: 100%;
			min-height: 100%;
			object-fit: cover;
		}

		.content-backdrop {
			position: absolute;
			inset: 0;
			z-index: 10;
			min-width: 100%;
			height: 100%;
			min-height: 100%;
			background-color: black;
			opacity: 0.7;
		}

		.bg-image {
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;

			&.backdrop::before {
				content: '';
				position: absolute;
				inset: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
				min-height: 100%;
				background-color: black;
				opacity: 0.35;
			}
		}

		&.section-hero {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-inline: var(--padding-x);
			overflow: hidden;

			body.project &,
			body.portfolio &,
			body.memofit & {
				height: 60vh !important;
				min-height: 450px !important;
			}

			.logo-type svg {
				width: auto;
				height: 30px;
				margin-bottom: 1.5rem;

				@media (min-width: 768px) {
					width: auto;
					height: 42px;
				}
			}

			h2,
			p {
				position: relative;
				line-height: 1.65;
				z-index: 1;
			}
			
			h2 {

				span {
					display: block;
					text-align: center;
					font-size: clamp(2.15rem, 5.25vw, 4rem);
					line-height: 1.2;
					letter-spacing: -.02em;
					font-weight: 600;
					background: -webkit-linear-gradient(315deg, #34f9d4, #465ef0);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			
			p {
				font-size: clamp(13.5px, 1.85vw, 18px);
				text-align: center;
				word-break: keep-all;
				text-wrap: balance;
			
				@media (max-width: 575px) {
					max-width: 85%;
				}
			}
			
			.bg-image {
				content: '';
				position: absolute;
				inset: 0;
				background-color: #000;
				filter: blur(50px);
				transition: filter 1s cubic-bezier(0.85, 0.01, 0.36, 0.99), scale 1s cubic-bezier(0.85, 0.01, 0.36, 0.99);
				scale: 1.25;
				z-index: 1 !important;
			}
			
			&.init {
				.bg-image {
					scale: 1;
					filter: blur(0);
					transition-delay: 0.3s;
				}

				p {
					transition-delay: 0.3s;
				}
			}

			@media (min-width: 768px) {
				h2 {
					line-height: 1.25;
				}
			
				p {
					opacity: .9;
				}
			}
		}

		&.section-about {
			display: flex;
			align-items: center;
			
			p {
				margin-top: 24px;
				font-size: 1.5rem;
				line-height: 1.5;
			}

			.content-backdrop {
				background: linear-gradient(180deg, #010409 5%, transparent, #070c14 95%);
				opacity: 1;
			}
			
			@media (min-width: 768px) {
				padding-top: 130px;
				padding-bottom: 130px;
				background-color: transparent;
			
				p {
					font-size: 32px;
					line-height: 46px;
			
					span {
						display: block;
					}
				}
			}
		}

		&.section-focus {

			.content-backdrop {
				background: linear-gradient(180deg, #070c14 5%, #000000a8 90%);
				mask: linear-gradient(to bottom, black, black 50%, transparent);
				-webkit-mask: linear-gradient(to bottom, #000000, black 50%, transparent);
				backdrop-filter: blur(20px);
				opacity: 1;
			}

			ul {
				display: grid;
				grid-template-columns: repeat(1, minmax(0, 1fr));
				align-items: stretch;
				justify-content: center;
				margin-top: 40px;
				gap: 2rem;
				text-align: left;
			}
			
			li {

				display: flex;
				flex-direction: column;
				width: 100%;
				border-radius: 1rem;
				margin-inline: auto;
				padding-bottom: 1.5rem;
				gap: 1.5rem;
				transition: border-color 0.15s ease-in-out;

				&:hover {
					border-color: #ffffff5d !important;
					transition: border-color 0.15s ease-in-out;
				}

				@media (min-width: 576px) {
					gap: 1.5rem;
					padding-bottom: 1rem;
				}	

				@media (max-width: 1023px) {
					max-width: 550px;
				}

				@media (min-width: 1024px) {
					flex-direction: row;
					gap: 2rem;
					width: 100%;
					max-width: 100%;
				}

				/* Card Swiper */
				.card-swiper {
					--swiper-pagination-color: white;
					--button-size: 2.25rem;

					position: relative;
					width: 100%;
					min-width: 275px;
					height: 300px;
					aspect-ratio: 4.5 / 3;
					border-radius: 0.5rem;
					overflow: hidden;

					.swiper-wrapper {
						transition-timing-function: cubic-bezier(0.57, 0.02, 0.5, 1);
						transition-duration: 0.75s !important;
					}

					@media (min-width: 768px) {
						min-width: 300px;
						max-width: 515px;
						height: 350px;
					}

					.swiper-slide {

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}

						p {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							display: block;
							background: #7f0883b2;
							backdrop-filter: blur(10px);
							-webkit-backdrop-filter: blur(10px);
							padding: 0.25rem 1.25rem;
							font-size: var(--fs-md);
							text-align: center;
							z-index: 10;
						}
					}

					.swiper-button-next,
					.swiper-button-prev {
						color: rgba(255, 255, 255, 0.9);
						width: var(--button-size);
						height: var(--button-size);
						background-color: rgba(0, 0, 0, 0.25);
						backdrop-filter: blur(4px);
						-webkit-backdrop-filter: blur(4px);
						border-radius: 50%;
						transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
						border: 1px solid rgba(255, 255, 255, 0.15);
						opacity: 0;

						&:hover {
							background-color: rgba(0, 0, 0, 0.9);
							color: #fff;
							transition: background-color 0.3s ease-in-out;
						}

						&::after {
							font-size: 1rem;
							font-weight: 600;
						}

						&.swiper-button-disabled,
						&.swiper-button-disabled {
							opacity: 0.2 !important;
						}

						.card:hover & {
							opacity: 1;
						}
					}
				}

				.content-wrapper {
					position: relative;
					display: flex;
					flex-direction: column;
					width: 100%;
					padding-inline: 1rem;
					gap: 0.75rem;

					&:hover {
						background: transparent !important;
						transition: background 0.3s ease;

						&::after {
							--btn-size: 46px;

							content: 'MORE';
							position: absolute;
							top: 0;
							right: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							width: var(--btn-size);
							height: var(--btn-size);
							background: var(--color-primary, #17f88f);
							border-radius: 100%;
							font-size: 11.5px;
							color: var(--text-light, #f3f3f3);
							z-index: 1;
							transition: background 0.3s ease;

							@media (min-width: 768px) {
								top: 2rem;
							}
						}
					}


					h4 {
						font-size: var(--fs-h5);
						line-height: 1.2;
					}

					h6 {
						font-size: var(--fs-md);
						line-height: 1.2;
					}
					
					p {
						margin-top: 1rem;
						font-size: var(--fs-md);
						color: var(--gray-300);
					}

					@media (min-width: 768px) {
						padding-block: 1rem;

						h4 {
							font-size: var(--fs-h4);
							line-height: 1.2;
						}

						h6 {
							font-size: var(--fs-h6);
							line-height: 1.2;
						}
					
						p {
							margin-top: 1rem;
							font-size: var(--fs-md);
							color: var(--gray-300);
						}
					}

					
				.tags {
					display: flex;
					flex-wrap: wrap;
					gap: 0.5rem;
					user-select: none;

						span {
							background-color: black;
							color: var(--gray-100);
							font-size: var(--fs-xs);
							border-radius: 0.25rem;
							padding: 0.25rem 0.5rem;
						}
					}
				}
			}

			@media (max-width: 767px) {
				ul {
					grid-template-columns: repeat(1, minmax(0, 450px));
				}
			}

			@media (min-width: 768px) {
				background-color: transparent;
			
				ul {
					margin-top: 60px;
					grid-template-columns: repeat(1, minmax(0, 100%));
					gap: 3rem;
					align-items: stretch;

					li {
						text-align: start;
					}
				}
			}
		}

		&.section-project {
			background: linear-gradient(180deg, #070c14, #11101a);

			ul {
				margin-top: 40px;
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 10px;
				justify-content: center;
			}
			
			li {
				box-shadow: 0 0 30px rgb(0 0 0 / 5%);

				figure img {
					width: 100%;
					aspect-ratio: 1/1;
					object-fit: cover;
				}
				
				h6 {
					display: block;
					line-height: 20px;
				}
				
				p {
						display: block;
						line-height: 20px;
				}
			}
			
			
			a {
				display: flex;
				align-items: start;
				line-height: 12px;
				color: #889ce5;
			}
			
			@media (min-width: 768px) {
				ul {
					margin-top: 60px;
					grid-template-columns: repeat(2, minmax(0, 286px));
					gap: 20px;
					text-align: center;
				}
			}
			
			@media (min-width: 1280px) {
				ul {
					grid-template-columns: repeat(4, minmax(286px, 1fr));
				}
			}
		}

		&.section-vision {

			.parallax img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				opacity: 0.35;
			}	

			.container {
				
				h5 {
					color: var(--color-primary);

					@media (max-width: 767px) {
						font-size: var(--fs-md);
					}	
				}

				p {
					max-width: 600px;
					margin-inline: auto;
					margin-top: 2rem;
					padding-inline: 1rem;
					text-align: center;
				}
			}

			&.show {
				color: var(--gray-900);
				background-color: var(--gray-50);
				transition: background-color 0.75s ease-in-out, color 0.75s ease-in-out;
			}
		}

		&.section-contact {
			.container {
				--container-max-width: 600px;

				h3 {
					max-width: 1024px;
				}

				h5, h6 {
					text-align: center;
					max-width: 92%;
					word-break: keep-all;
					max-width: var(--container-max-width);
				}

				p {
					max-width: var(--container-max-width);
					margin-inline: auto;
					margin-top: 2rem;
					padding-inline: 1rem;
					font-size: 1.25rem;
					line-height: 1.5;
					text-align: center;
				}

				.btn-mail {
					--btn-color: var(--color-primary);

					width: 275px;
					background: var(--btn-color);

					&:hover {
						background: hsl(from var(--btn-color) h s 55%);
					}
				}
			}

			&.show {
				transition: background-color 0.75s ease-in-out;
				background: #101016 !important;
			}

			ul.sns {
				display: grid;
				margin-top: 2rem;
				background: #010408;
				grid-template-columns: repeat(1, minmax(0, 1fr));
				gap: 1rem;

				@media (min-width: 576px) {
					margin-top: 2rem;
				}

				@media (min-width: 1024px) {
					margin-top: 4rem;
					grid-template-columns: repeat(4, minmax(0, 1fr));
				}

				li {
					display: flex;
					align-items: center;
					justify-content: center;

					a {
						width: 275px;

						@media (min-width: 1024px) {
							width: 200px;
						}

						&:hover {
							border: 1px solid hsl(from var(--gray-500) h s l / 50%);
							background: var(--gray-900);
							transition: background 0.3s ease;
						}
					}
				}
			}
		}
	}

	.container {
		width: 100%;
		max-width: var(--content-width);
		margin: 0 auto;
	}

	.card,
	[data-list-type="card"].li {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 0.75rem;
		color: var(--gray-100);
		background: linear-gradient(166deg, #8787872e, transparent, #4c597980);
		box-shadow: 0 0 30px rgb(0 0 0 / 15%);
		border-radius: 0.5rem;
		border: 1px solid rgb(255 255 255 / 10%);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		transition: backdrop-filter 0.3s ease;

		&:hover {
			html.PC & {
				backdrop-filter: blur(50px);
				-webkit-backdrop-filter: blur(50px);
				transition: backdrop-filter 0.3s ease;
			}
		}

		@media (min-width: 768px) {
			padding: 1rem;
		}

		.content-wrapper {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			width: 100%;
			padding-inline: 1rem;
			gap: 0.5rem;
		}

		p {
			font-size: var(--fs-md);
			color: var(--gray-200);
			word-break: keep-all;
			line-height: 1.5;
		}
	}
}

section:not(body.home &) {

  --section-bg-color: #090c0f;
  --section-bg-gradient: linear-gradient(180deg, #000000, #0b0b17);
  
  flex-direction: column;
  background: var(--section-bg-gradient);
  gap: 4rem;

  .bg-image {
    &.backdrop::before {
      opacity: 0.7;
    }
  }

  &#memofit-03 {
    background: #121314;
  }

  &.section-hero {
    h2 {
      span {
        font-size: clamp(2.5rem, 5.25vw, 4rem);
      }
    }
    
    .logo-popcon {
      width: auto;
      height: 120px;
      object-fit: cover;

			@media (max-width: 545px) {
				height: 70px;
			}

			@media (min-width: 546px) and (max-width: 768px) {
				height: 100px;
			}
    }

		.logo-memofit img {
			width: auto;
			height: 100px;

			@media (max-width: 545px) {
				height: 65px;
			}

			@media (min-width: 546px) and (max-width: 768px) {
				height: 80px;
			}
		}


    .backdrop {
      background: linear-gradient(to bottom, #0000007a 75%, #000000);
    }
  }

  > .title {
    --title-max-width: 640px;

    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    max-width: var(--title-max-width, 640px);
    margin-inline: auto;
    padding-inline: var(--padding-x);
    word-break: keep-all;
    gap: 12px;
  
    h3 {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-light, #ffffff);
      text-align: center;
      text-wrap: pretty;
      font-weight: 600;

      .js-section.show & {
        background: -webkit-linear-gradient(315deg, #34f9d4, #465ef0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: background 1s ease-in-out;
      }
    }
  
    h5 {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--readwise-heather, #bec9d6);
      text-align: center;
      text-wrap: pretty;
      font-family: "Inter-Regular", sans-serif;
      font-size: 18px;
      line-height: 28px;
      font-weight: 400;
    }

    img.number {
      width: 250px;
      height: 150px;
      object-fit: cover;

      @media (max-width: 545px) {
        width: auto;
        height: 100px;
      }
    }

    &.scroll-reveal-text {
      height: 60vh !important;
      min-height: 600px !important;

			#memofit-01 & {
				@media (min-width: 576px) {
					margin-top: 3rem;
				}
			}

      & .scroll-reveal-content {
        height: 60vh !important;
        min-height: 675px !important;

        @media (max-width: 545px) {
          min-height: 625px !important;
        }

        p {
          font-size: clamp(1.15rem, 3.5vw, 1.5rem);
          font-weight: var(--fw-bold);
          line-height: 1.6;
          width: calc(100% - 1rem);
        }
      }
    }
  }

  .point-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1024px;
    margin-top: 1rem;
    margin-bottom: 4rem;
    gap: 1.5rem;

    ul {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      overflow: hidden;
      padding-inline: 2rem;
      padding-block: 2.5rem;
      gap: 1rem;

      @media (max-width: 545px) {
        gap: 0.75rem;
      padding-inline: 1.25rem;
      padding-block: 2rem;
      }
      
      li {
        position: relative;
        width: 100%;
        font-size: var(--fs-h6);
        font-weight: var(--fw-bold);
        line-height: 1.2;
        text-align: center;
        word-break: keep-all;
        z-index: 5;

				&#memofit-03 ul & {
					display: flex;
					justify-content: center;
					gap: 1rem;
					
					@media (max-width: 545px) {
						flex-direction: column;
						align-items: center;
					}
				}
      }
    }
  }

  &[data-theme="light"] {
    --section-bg: #ffffff;

    background: var(--section-bg);

    h3, p {
      color: var(--text-dark, #000000);
    }
  }

  .container.cards {
    --container-max-width: 1024px;
    --container-row-gap: 0.75rem;
    --container-column-gap: 0.75rem;

    display: grid;
    align-items: stretch;
    justify-content: center;
    row-gap: var(--container-row-gap);
    column-gap: var(--container-column-gap);
    width: 100%;
    max-width: var(--container-max-width);
    text-align: left;

    @media (max-width: 545px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    } 

    @media (min-width: 546px) and (max-width: 1024px) {
      --container-row-gap: 1rem;
      --container-column-gap: 1rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    } 

    @media (min-width: 1025px) {
      --container-row-gap: 1.25rem;
      --container-column-gap: 1.25rem;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #portfolio-01 &,
    #portfolio-02 &,
    #portfolio-03 {
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    &[data-diredction="column"] {
      flex-direction: column;
    }

    &[data-wrap="nowrap"] {
      flex-wrap: nowrap;
    }

    .card {
      --card-bg: #151c23;
      --card-gradient: linear-gradient(135deg, #7c7e946b, #17191b, #272728);
      --heading-color: var(--text-light);
      --paragraph-color: var(--gray-300);
      --card-border-radius: 1rem;

      position: relative;
      align-items: flex-start;
      justify-content: flex-start;
      flex-shrink: 0;
      width: 100%;
      /* background: var(--card-gradient); */
      border-radius: var(--card-border-radius, 1rem);
      padding: 1.25rem;
      gap: 0.75rem;
      overflow: hidden;
      
			&.bg-noise::before {
				content: "";
				position: absolute;
				inset: 0;
				background: url('./common/images/noise.png') no-repeat center center;
				background-size: cover;
				z-index: -1;
			}

      body.portfolio & {
        flex-direction: row;

        p.num {
					min-width: 2.75rem;
          color: #7bebc7;
          opacity: 1;
          line-height: 1;
        }
      }

      #project-02 & {
        padding: 0;
      }

      figure {
        width: 100%;

        img {
          width: 100%;
          height: 150px;
          object-fit: cover;
        }
      }

      .content {
        padding: 1rem;
        padding-top: 0;
      }
      
      h1, h2, h3, h4, h5, h6 {
        position: relative;
        display: flex;
        flex-direction: column;
        color: var(--heading-color, #ffffff);
        word-break: keep-all;
      }
      
      p {
        color: var(--paragraph-color, #bdb9b9);
        font-size: 14px;
        line-height: 1.65;

        #project-02 & {
          margin-top: 0.75rem;
        }

        &.num {
          font-size: var(--fs-h4);
          font-weight: var(--fw-bold);
          opacity: 0.5;
          line-height: 1;
        }
      }
    }
  }

  .container.photo {
    --container-max-width: 100%;
    --container-row-gap: 2rem;
    --container-column-gap: 6rem;

    position: relative;
    display: flex;
    row-gap: var(--container-row-gap);
    column-gap: var(--container-column-gap);
    flex-shrink: 0;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: var(--container-max-width, 1280px);
    overflow: hidden;

    &[data-wrap="nowrap"] {
      flex-wrap: nowrap;
    }

    @media (max-width: 767px) {
      flex-direction: column;
    }

    @media (min-width: 768px) {

      &[data-direction="column"] {
        flex-direction: column;
      }
    }

    .text-block {
      position: relative;
      display: flex;
      flex-grow: 1;
      flex-direction: column;
      width: 100%;
      max-width: 500px;
      padding-left: 40px;
      color: white;
      gap: 1rem;
    }

    .image-block {
      width: 50%;
      display: flex;
      flex-grow: 1;
      position: relative;

      img {
        width: auto;
        height: 450px;
      }

      &.full-width {
        justify-content: center;
        width: 100%;
        max-width: 100%;
        border-radius: 0;

        @media (max-width: 575px) {

          img {
            width: auto;
            height: 250px;
          }
        }
      }
    }
  }

	.image-block {

		#memofit-02 & {
			img {
				height: 175px !important;

				@media (min-width: 768px) {
					height: 450px !important;
				}
			}
		}

		#memofit-03 & {
			img {
				width: 100%;
				height: 275px !important;

				@media (min-width: 768px) {
					height: 600px !important;
				}
			}
		}

		#memofit-contact & {
			img {
				width: auto	;
				height: 400px !important;

				@media (min-width: 768px) {
					height: 600px !important;
				}
			}
		}
	}

	
  .link-block {
    --block-bg: #3c272c;

    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-start;
    background: var(--block-bg, #151c23);
    border-radius: 99999px;
    padding: 1rem 1rem 1rem 2rem;
    gap: 2rem;
  
    > .wrapper {
      position: relative;
      display: flex;
      flex-shrink: 0;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;

      img {
        object-fit: cover;
        width: 32px;
        height: 32px;
        border-radius: 0.25rem;
      }

      p {
        color: #dd776f;
        font-size: 15px;
        font-weight: 500;
      }
    }
  
    .link {
      --link--bg: linear-gradient(180deg, rgba(228, 163, 142, 1) 0%, rgb(219, 111, 105) 100%);
    
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0.5rem 1.5rem;
      background: var(--link--bg);
      border-radius: 9999px;
      gap: 0px;
      box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08);
    }
  }
}

.hero-wrapper {
	max-width: 1024px;;
  overflow: hidden;
  -webkit-mask: linear-gradient(180deg, #ffffff, white 30%, white 70%, #00000000);
  mask: linear-gradient(180deg, #ffffff, white 30%, white 70%, #00000000);

  /* Slide vertical */
  .slide_vertical_wrap {
      width: 33.33333%;
      height: 150vh;
      overflow: hidden;
  
      @media (min-width: 768px) {
          height: 250vh;
      }
  }
  
  .slide_vertical_wrap ul li {
      width: 100%;
  }
  
  .slide_vertical_wrap img {
      width: 100%;
      vertical-align: bottom;
      padding: 1px 1px;
  }
  
  .infiniteslide_wrap {
      height: 200vh !important;
  }
  
  .section_vertical {
      margin-left: 350px;
  }
  
  .section_vertical header {
      background: #eee;
      padding: 20px;
      margin-bottom: 20px;
  }
  
  .section_vertical header h1 {
      font-size: 1.5em;
      font-weight: bold;
  }
}

footer {
	width: 100%;
	margin-top: auto;
	background: #010408;
	padding-inline: var(--padding-x);

	.container {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		width: 100%;
		margin: 0 auto;
		padding-block: 60px;
		/* border-top: 1px solid hsl(0deg 0% 100% / 10%); */
		border-top: 1px solid transparent;
		border-image: linear-gradient(to right, transparent, #303030, transparent) 1;

		.logo img {
			width: 124px;
			height: 24px;
		}

		.info {
			max-width: 500px;

			p {
				font-size: var(--fs-xs);
				color: var(--gray-300);
				line-height: 1.5;
				letter-spacing: 0.022em;
		
				&:has(span) {
					display: flex;
					flex-wrap: wrap;
					column-gap: 0.5rem;
				}
		
				span {
					white-space: nowrap;
				}
				
				&.copyright {
					color: var(--gray-500);
					margin-top: 0.75rem;
				}
			}
		}
	}

	@media (min-width: 768px) {
		.container {
			flex-direction: row;
			gap: 2rem;
			padding-inline: 0;

			.logo img {
				width: 180px;
				height: 34px;
			}

			p {
				font-size: 0.9rem;
			}
		}
	}
}

.backdrop {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, transparent, #010408);
}

/* BG Parallax */
.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;

	.parallax {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: fixed;
		top: 0;
		width: 100%;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

ul.sns {
	display: flex;
	flex-direction: column;
	gap: 1rem;

	section & {
		flex-direction: row;
		flex-wrap: wrap;
		height: fit-content;
		column-gap: 1.5rem;
		row-gap: 0.5rem;
	}

	.sns-link {
		display: inline-flex;

		a {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			color: var(--gray-300);
			font-size: var(--fs-sm);
			text-decoration: none;
			white-space: nowrap;
			transition: color 0.3s ease-in-out;
	
			&:hover {
				color: var(--gray-50);
			}
	
			img {
				width: 22px;
				height: 22px;
				object-fit: contain;
			}
		}
	}
}

/* Scroll to TOP */
.scroll-to-top {
	display: flex;
	position: fixed;
	opacity: 0;
	visibility: hidden;
	right: 1.5rem;
	bottom: -200px;
	z-index: 99;
	background-color: hsl(from var(--color-primary) h s l / 85%);
	border-radius: 50%;
	height: 48px;
	width: 48px;
	color: #fff;
	cursor: pointer;
	transition: all 0.5s ease-in-out;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);

	@media (max-width:767px) {
		right: 1.5rem;
	}

	&.active {
		bottom: 1.5rem;
		opacity: 1;
		visibility: visible;
		transition: all 0.3s cubic-bezier(0.63, 0, 0.46, 1);

		&.at-bottom {
			bottom: 2rem;
			transition: all 0.3s cubic-bezier(0.63, 0, 0.46, 1);
		}
	}
	
	&:hover {
		bottom: 2rem;
		background: var(--color-primary);
	}
	
	img {
		width: 20px;
		height: auto;
	}
}

/* Infinite Horizontal Scroll */
.scroller {
	--scroller-gap: 5rem;

	@media (max-width: 575px) {
		--scroller-gap: 2.5rem;
	}

	position: absolute;
  bottom: 40px;
	width: 100%;
  max-width: 1024px;
	z-index: 10;

  & .scroller__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--scroller-gap);
    
    &.logos {

      & img {
        mix-blend-mode: difference;
        opacity: 0.75;
				width: auto;
        height: 24px;

				@media (max-width: 575px) {
					height: 18px;
				}
      }
      
      & a:hover img {
        opacity: 1;
      }
    }

    & a {
      width: fit-content;
    }
  }

  &[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      white 15%,
      white 85%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);

    & .scroller__inner {
      width: -webkit-max-content;
      width: -moz-max-content;
      width: max-content;
      flex-wrap: nowrap;
      -webkit-animation: scroll var(--animation-duration, 26s)
        var(--animation-direction, forwards) linear infinite;
      animation: scroll var(--animation-duration, 26s)
        var(--animation-direction, forwards) linear infinite;
      transition: animation 0.3s linear;
    }
  }

  &[data-direction="right"] {
    --animation-direction: reverse;
  }
  
  &[data-direction="left"] {
    --animation-direction: forwards;
  }
  
  &[data-speed="fast"] {
    --animation-duration: 20s;
  }
  
  &[data-speed="slow"] {
    --animation-duration: 32s;
  }

  &[data-hover-paused="true"] .scroller__inner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
}

@-webkit-keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* Page Transition Overlay */
.transitionContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  pointer-events: none;

	.transition-row {
		flex: 1;
		display: flex;
	
		&.row-1 .block {
			transform-origin: top;
		}
		
		&.row-2 .block {
			transform-origin: bottom;
		}
		
		&.row-1 .block,
		&.row-2 .block {
			flex: 1;
			background-color: var(--gray-50);
			transform: scaleY(1);
			will-change: transform;
		}
	}
}

/* Scroll Reveal Text */
.scroll-reveal-text {

	position: relative;
	width: 100%;
	height: 100svh;
	overflow: hidden;

	.scroll-reveal-content {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100svh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;

		p {
			font-size: clamp(1.75rem, 4.5vw, 2.5rem);
			font-weight: var(--fw-bold);
			line-height: 1.6;
			width: calc(100% - 1rem);
		}
	}

	@media (min-width: 768px) {
		p {
			width: calc(100% - 8rem);
			max-width: 960px;
		}
	}
}

/* Cursor */
.cursor-ball {
	width: 20px;
	height: 20px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background-color: hsl(from var(--color-primary) h s l / 0.75);
	border-radius: 50%;
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 1;
	transition: opacity 0.3s ease;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);

	.cursor-drag-icon {
		position: absolute;
		width: 40px;
		height: 40px;
		transform: scale(0);
	
		svg {
			fill: white;
		}
	}
	
	.cursor-more-text,
	.cursor-select-text {
		position: absolute;
		width: 100%;
		text-align: center;
		display: block;
		color: rgb(255, 255, 255);
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 2px;
		text-transform: uppercase;
		transform: scale(0);
	}
	
	&.cursor-accent {

		.cursor-drag-icon svg {
			fill: rgb(0, 0, 0);
		}
		
		.cursor-more-text,
		.cursor-select-text {
			color: rgb(0, 0, 0);
		}
	}
	
	html.PC[data-custom-cursor="true"] & {
		display: block;
	}

	html.PC[data-custom-cursor="false"] & {
		display: none;
	}

	html.Mobile & {
		display: none;
	}
}

/* Scrollbar */
::-webkit-scrollbar {
	display: none !important;
}

html.PC[data-custom-scrollbar="true"] {

	.custom-progress-track {
		--track-width: 6px;
		--track-color: rgb(255 255 255 / 15%);
		--bar-radius: calc(var(--track-width) / 2);
		--bar-width: var(--track-width);
		--bar-gradient: linear-gradient(180deg, #25226f, #8568cc);
	
		position: fixed;
		z-index: 10;
		top: var(--header-height);
		right: 0;
		width: var(--track-width);
		height: calc(100% - var(--header-height));
		background: var(--track-color);
		opacity: 0;
		transition: opacity .3s ease;
	
		.custom-progress {
			width: var(--bar-width);
			height: 0;
			background: var(--bar-gradient);
			border-radius: 0 var(--bar-radius);
		}
		
		body:has(header.fixed) & {
			opacity: 1;
			transition: opacity .3s ease;
		}

		html.Mobile & {
			display: none;
		}
	}
}

html.PC[data-custom-scrollbar="false"] {
	scrollbar-width: thin;
}

/* AOS Settings */
[data-aos][data-aos][data-aos-easing="ease"],
body[data-aos-easing="ease"] [data-aos] {
    transition-timing-function: cubic-bezier(0.77, 0.05, 0.45, 1);
}

.hidden {
	display: none !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Button */
.btn,
a[type="button"] {
	--label-color: var(--gray-100);

	display: flex !important;
	align-items: center;
	justify-content: center;
	column-gap: 0.5rem;
	width: fit-content;
	height: 38px;
	padding-top: 1px;
	padding-inline: 1.25rem !important;
	border-radius: 0.25rem;
	font-size: 0.85rem !important;
	font-weight: 500;
	transition: all .35s ease;
	white-space: nowrap;
	user-select: none;

	.is-active & {
		font-size: 1.25rem;
		height: 44px;
	}

	&.btn-line {
		transition: all .35s ease;
		background: transparent;
    background-image: linear-gradient(to bottom, #ffffff13, transparent, #ffffff17);
		border: 1px solid hsl(from var(--gray-500) h s l / 50%);
    border-radius: 2rem;
    backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	
	&.btn-pill {
		border-radius: 50px;
		transition: all .35s ease;

		&:hover {
			border-color: transparent;
			background: var(--color-primary);
			color: var(--gray-100);
			transition: all .35s ease;
		}
	}
}

.badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	height: 38px;
	padding-inline: 1rem;
	padding-top: 1px;
	background-color: var(--gray-50);
	color: var(--gray-100);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	white-space: nowrap;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-radius: 0.5rem;
	user-select: none;

	&.pill {
		border-radius: 100px;
	}

	&.line {
		background-color: transparent;
		border: 1px solid var(--color-primary);
		color: var(--color-primary);
	}

	&.primary {
		background-color: var(--color-primary);
		color: var(--gray-100);
	}

	&.white {
		background-color: #ffffff;
		color: var(--gray-950);
	}

	&.teal {
		background-color: #79c9bc;
		color: var(--gray-950);
	}

	&.orange {
		background-color: #ff7070;
		color: var(--gray-950);
	}

	&.ivory{
		background-color: #b7b4a9;
		color: var(--gray-950);
	}
}

.bg-black {
	background:  #000 !important;
}

.bg-white {
	background:  #fff !important;
}

.bg-noise {
	position: absolute !important;
	inset: 0 !important;
	background: url(../images/bg-noise.png) repeat !important;
	z-index: -1 !important;
	opacity: 0.03 !important;
}

.backdrop-blur-10 {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.backdrop-blur-20 {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

hr {
	display: block;
	width: 100%;
	margin-block: 0.5rem;
	border: 1px;
	border-top: 1px solid transparent;
	border-image: linear-gradient(to right, transparent, var(--gray-200), transparent) 1;
	opacity: 0.25;
}

.w-full {
	width: 100% !important;
}

.absolute {
  position: absolute !important;
}

.relative {
  position: relative !important;
}

.fixed {
  position: fixed !important;
}

.sticky {
  position: sticky !important;
}

.grid {
  display: grid !important;
}

.flex {
  display: flex !important;
}

.block {
	display: block !important;
}

.flex-center {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.flex-between {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.flex-col {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.justify-evenly {
  justify-content: space-evenly !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.align-center {
  align-items: center !important;
}

.align-start {
  align-items: flex-start !important;
}

.align-end {
  align-items: flex-end !important;
}

.align-baseline {
  align-items: baseline !important;
}

.align-stretch {
  align-items: stretch !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.flex-grow {
  flex-grow: 1 !important;
}

.flex-shrink {
  flex-shrink: 0 !important;
}

.items-center {
  align-items: center !important;
}

.items-start {
  align-items: flex-start !important;
}

.items-end {
  align-items: flex-end !important;
}

.items-baseline {
  align-items: baseline !important;
}

.items-stretch {
  align-items: stretch !important;
}

.font-thin {
	font-weight: 100 !important;
}

.font-extralight {
	font-weight: 200 !important;
}

.font-light {
	font-weight: 300 !important;
}

.font-normal {
	font-weight: 400 !important;
}

.font-medium {
	font-weight: 500 !important;
}

.font-semibold {
	font-weight: 600 !important;
}

.font-bold {
	font-weight: 700 !important;
}

.font-extrabold {
	font-weight: 800 !important;
}

.font-black {
	font-weight: 900 !important;
}

.text-center {
	text-align: center !important;
}

.text-balance {
	text-wrap: balance !important;
}

.text-pretty {
	text-wrap: pretty !important;
}

.word-keep-all {
	word-break: keep-all !important;
}

.select-none {
	user-select: none !important;
}

.white-space-nowrap {
	white-space: nowrap !important;
}

.white-space-wrap {
	white-space: wrap !important;
}

.p-0 {
	padding: 0 !important;
}

.p-1 {
	padding: 4px !important;
}

.p-1_5 {
	padding: 6px !important;
}

.p-2 {
	padding: 8px !important;
}

.p-2_5 {
	padding: 10px !important;
}

.p-3 {
	padding: 12px !important;
}

.p-4 {
	padding: 16px !important;
}

.p-5 {
	padding: 20px !important;
}

.p-6 {
	padding: 24px !important;
}

.p-7 {
	padding: 28px !important;
}

.p-8 {
	padding: 32px !important;
}

.p-9 {
	padding: 36px !important;
}

.p-10 {
	padding: 40px !important;
}

.pt-0 {
	padding-top: 0 !important;
}

.pt-1 {
	padding-top: 4px !important;
}

.pt-1_5 {
	padding-top: 6px !important;
}

.pt-2 {
	padding-top: 8px !important;
}

.pt-2_5 {
	padding-top: 10px !important;
}

.pt-3 {
	padding-top: 12px !important;
}

.pt-4 {
	padding-top: 16px !important;
}

.pt-5 {
	padding-top: 20px !important;
}

.pt-6 {
	padding-top: 24px !important;
}

.pt-7 {
	padding-top: 28px !important;
}

.pt-8 {
	padding-top: 32px !important;
}

.pt-9 {
	padding-top: 36px !important;
}

.pt-10 {
	padding-top: 40px !important;
}

.pb-0 {
	padding-bottom: 0 !important;
}

.pb-1 {
	padding-bottom: 4px !important;
}

.pb-1_5 {
	padding-bottom: 6px !important;
}

.pb-2 {
	padding-bottom: 8px !important;
}

.pb-2_5 {
	padding-bottom: 10px !important;
}

.pb-3 {
	padding-bottom: 12px !important;
}

.pb-4 {
	padding-bottom: 16px !important;
}

.pb-5 {
	padding-bottom: 20px !important;
}

.pb-6 {
	padding-bottom: 24px !important;
}

.pb-7 {
	padding-bottom: 28px !important;
}

.pb-8 {
	padding-bottom: 32px !important;
}

.pb-9 {
	padding-bottom: 36px !important;
}

.pb-10 {
	padding-bottom: 40px !important;
}

.pl-0 {
	padding-left: 0 !important;
}

.pl-1 {
	padding-left: 4px !important;
}

.pl-1_5 {
	padding-left: 6px !important;
}

.pl-2 {
	padding-left: 8px !important;
}

.pl-2_5 {
	padding-left: 10px !important;
}

.pl-3 {
	padding-left: 12px !important;
}

.pl-4 {
	padding-left: 16px !important;
}

.pl-5 {
	padding-left: 20px !important;
}

.pl-6 {
	padding-left: 24px !important;
}

.pl-7 {
	padding-left: 28px !important;
}

.pl-8 {
	padding-left: 32px !important;
}

.pl-9 {
	padding-left: 36px !important;
}

.pl-10 {
	padding-left: 40px !important;
}

.pr-0 {
	padding-right: 0 !important;
}

.pr-1 {
	padding-right: 4px !important;
}

.pr-2 {
	padding-right: 8px !important;
}

.pr-3 {
	padding-right: 12px !important;
}

.pr-4 {
	padding-right: 16px !important;
}

.pr-5 {
	padding-right: 20px !important;
}

.pr-6 {
	padding-right: 24px !important;
}

.pr-7 {
	padding-right: 28px !important;
}

.pr-8 {
	padding-right: 32px !important;
}

.pr-9 {
	padding-right: 36px !important;
}

.pr-10 {
	padding-right: 40px !important;
}

.px-0 {
	padding-inline: 0 !important;
}

.px-1 {
	padding-inline: 4px !important;
}

.px-1_5 {
	padding-inline: 6px !important;
}

.px-2 {
	padding-inline: 8px !important;
}

.px-2_5 {
	padding-inline: 10px !important;
}

.px-3 {
	padding-inline: 12px !important;
}

.px-4 {
	padding-inline: 16px !important;
}

.px-5 {
	padding-inline: 20px !important;
}

.px-6 {
	padding-inline: 24px !important;
}

.px-7 {
	padding-inline: 28px !important;
}

.px-8 {
	padding-inline: 32px !important;
}

.px-9 {
	padding-inline: 36px !important;
}

.px-10 {
	padding-inline: 40px !important;
}

.py-0 {
	padding-block: 0 !important;
}

.py-1 {
	padding-block: 4px !important;
}

.py-1_5 {
	padding-block: 6px !important;
}

.py-2 {
	padding-block: 8px !important;
}

.py-2_5 {
	padding-block: 10px !important;
}

.py-3 {
	padding-block: 12px !important;
}

.py-4 {
	padding-block: 16px !important;
}

.py-5 {
	padding-block: 20px !important;
}

.py-6 {
	padding-block: 24px !important;
}

.py-7 {
	padding-block: 28px !important;
}

.py-8 {
	padding-block: 32px !important;
}

.py-9 {
	padding-block: 36px !important;
}

.py-10 {
	padding-block: 40px !important;
}

.m-0 {
	margin: 0 !important;
}

.m-1 {
	margin: 4px !important;
}

.m-1_5 {
	margin: 6px !important;
}

.m-2 {
	margin: 8px !important;
}

.m-2_5 {
	margin: 10px !important;
}

.m-3 {
	margin: 12px !important;
}

.m-4 {
	margin: 16px !important;
}

.m-5 {
	margin: 20px !important;
}

.m-6 {
	margin: 24px !important;
}

.m-7 {
	margin: 28px !important;
}

.m-8 {
	margin: 32px !important;
}

.m-9 {
	margin: 36px !important;
}

.m-10 {
	margin: 40px !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-1 {
	margin-top: 4px !important;
}

.mt-1_5 {
	margin-top: 6px !important;
}

.mt-2 {
	margin-top: 8px !important;
}

.mt-2_5 {
	margin-top: 10px !important;
}

.mt-3 {
	margin-top: 12px !important;
}

.mt-4 {
	margin-top: 16px !important;
}

.mt-5 {
	margin-top: 20px !important;
}

.mt-6 {
	margin-top: 24px !important;
}

.mt-7 {
	margin-top: 28px !important;
}

.mt-8 {
	margin-top: 32px !important;
}

.mt-9 {
	margin-top: 36px !important;
}

.mt-10 {
	margin-top: 40px !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-1 {
	margin-bottom: 4px !important;
}

.mb-1_5 {
	margin-bottom: 6px !important;
}

.mb-2 {
	margin-bottom: 8px !important;
}

.mb-2_5 {
	margin-bottom: 10px !important;
}

.mb-3 {
	margin-bottom: 12px !important;
}

.mb-4 {
	margin-bottom: 16px !important;
}

.mb-5 {
	margin-bottom: 20px !important;
}

.mb-6 {
	margin-bottom: 24px !important;
}

.mb-7 {
	margin-bottom: 28px !important;
}

.mb-8 {
	margin-bottom: 32px !important;
}

.mb-9 {
	margin-bottom: 36px !important;
}

.mb-10 {
	margin-bottom: 40px !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.ml-1 {
	margin-left: 4px !important;
}

.ml-1_5 {
	margin-left: 6px !important;
}

.ml-2 {
	margin-left: 8px !important;
}

.ml-2_5 {
	margin-left: 10px !important;
}

.ml-3 {
	margin-left: 12px !important;
}

.ml-4 {
	margin-left: 16px !important;
}

.ml-5 {
	margin-left: 20px !important;
}

.ml-6 {
	margin-left: 24px !important;
}

.ml-7 {
	margin-left: 28px !important;
}

.ml-8 {
	margin-left: 32px !important;
}

.ml-9 {
	margin-left: 36px !important;
}

.ml-10 {
	margin-left: 40px !important;
}

.mr-0 {
	margin-right: 0 !important;
}

.mr-1 {
	margin-right: 4px !important;
}

.mr-1_5 {
	margin-right: 6px !important;
}

.mr-2 {
	margin-right: 8px !important;
}

.mr-2_5 {
	margin-right: 10px !important;
}

.mr-3 {
	margin-right: 12px !important;
}

.mr-4 {
	margin-right: 16px !important;
}

.mr-5 {
	margin-right: 20px !important;
}

.mr-6 {
	margin-right: 24px !important;
}

.mr-7 {
	margin-right: 28px !important;
}

.mr-8 {
	margin-right: 32px !important;
}

.mr-9 {
	margin-right: 36px !important;
}

.mr-10 {
	margin-right: 40px !important;
}

.mx-auto {
	margin-inline: auto !important;
}

.my-auto {
	margin-block: auto !important;
}

.gap-0 {
	gap: 0 !important;
}

.gap-1 {
	gap: 4px !important;
}

.gap-1_5 {
	gap: 6px !important;
}

.gap-2 {
	gap: 8px !important;
}

.gap-2_5 {
	gap: 10px !important;
}

.gap-3 {
	gap: 12px !important;
}

.gap-4 {
	gap: 16px !important;
}

.gap-5 {
	gap: 20px !important;
}

.gap-6 {
	gap: 24px !important;
}

.gap-7 {
	gap: 28px !important;
}

.gap-8 {
	gap: 32px !important;
}

.gap-9 {
	gap: 36px !important;
}

.gap-10 {
	gap: 40px !important;
}

.col-gap-0 {
	column-gap: 0 !important;
}

.col-gap-1 {
	column-gap: 4px !important;
}

.col-gap-1_5 {
	column-gap: 6px !important;
}

.col-gap-2 {
	column-gap: 8px !important;
}

.col-gap-2_5 {
	column-gap: 10px !important;
}

.col-gap-3 {
	column-gap: 12px !important;
}

.col-gap-4 {
	column-gap: 16px !important;
}

.col-gap-5 {
	column-gap: 20px !important;
}

.col-gap-6 {
	column-gap: 24px !important;
}

.col-gap-7 {
	column-gap: 28px !important;
}

.col-gap-8 {
	column-gap: 32px !important;
}

.col-gap-9 {
	column-gap: 36px !important;
}

.col-gap-10 {
	column-gap: 40px !important;
}

.row-gap-0 {
	row-gap: 0 !important;
}

.row-gap-1 {
	row-gap: 4px !important;
}

.row-gap-1_5 {
	row-gap: 6px !important;
}

.row-gap-2 {
	row-gap: 8px !important;
}

.row-gap-2_5 {
	row-gap: 10px !important;
}

.row-gap-3 {
	row-gap: 12px !important;
}

.row-gap-4 {
	row-gap: 16px !important;
}

.row-gap-5 {
	row-gap: 20px !important;
}

.row-gap-6 {
	row-gap: 24px !important;
}

.row-gap-7 {
	row-gap: 28px !important;
}

.row-gap-8 {
	row-gap: 32px !important;
}

.row-gap-9 {
	row-gap: 36px !important;
}

.row-gap-10 {
	row-gap: 40px !important;
}

.rounded-sm {
	border-radius: 4px !important;
}

.rounded-md {
	border-radius: 8px !important;
}

.rounded-lg {
	border-radius: 12px !important;
}

.rounded-xl {
	border-radius: 16px !important;
}

.rounded-2xl {
	border-radius: 20px !important;
}

.rounded-full {
	border-radius: 50% !important;
}

.rounded-0,
.rounded-none {
	border-radius: 0 !important;
}

.rounded-left-sm {
	border-top-left-radius: 4px !important;
	border-bottom-left-radius: 4px !important;
}

.rounded-left-md {
	border-top-left-radius: 8px !important;
	border-bottom-left-radius: 8px !important;
}

.rounded-left-lg {
	border-top-left-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
}

.rounded-left-xl {
	border-top-left-radius: 16px !important;
	border-bottom-left-radius: 16px !important;
}

.rounded-left-2xl {
	border-top-left-radius: 20px !important;
	border-bottom-left-radius: 20px !important;
}

.rounded-left-full {
	border-top-left-radius: 50% !important;
	border-bottom-left-radius: 50% !important;
}

.rounded-left-none {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.rounded-right-sm {
	border-top-right-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
}

.rounded-right-md {
	border-top-right-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}

.rounded-right-lg {
	border-top-right-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

.rounded-right-xl {
	border-top-right-radius: 16px !important;
	border-bottom-right-radius: 16px !important;
}

.rounded-right-2xl {
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 20px !important;
}

.rounded-right-full {
	border-top-right-radius: 50% !important;
	border-bottom-right-radius: 50% !important;
}

.rounded-right-none {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.rounded-top-sm {
	border-top-left-radius: 4px !important;
	border-top-right-radius: 4px !important;
}

.rounded-top-md {
	border-top-left-radius: 8px !important;
	border-top-right-radius: 8px !important;
}

.rounded-top-lg {
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
}

.rounded-top-xl {
	border-top-left-radius: 16px !important;
	border-top-right-radius: 16px !important;
}

.rounded-top-2xl {
	border-top-left-radius: 20px !important;
	border-top-right-radius: 20px !important;
}

.rounded-top-full {
	border-top-left-radius: 50% !important;
	border-top-right-radius: 50% !important;
}

.rounded-top-none {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.rounded-bottom-sm {
	border-bottom-left-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
}

.rounded-bottom-md {
	border-bottom-left-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}

.rounded-bottom-lg {
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

.rounded-bottom-xl {
	border-bottom-left-radius: 16px !important;
	border-bottom-right-radius: 16px !important;
}

.rounded-bottom-2xl {
	border-bottom-left-radius: 20px !important;
	border-bottom-right-radius: 20px !important;
}

.rounded-bottom-full {
	border-bottom-left-radius: 50% !important;
	border-bottom-right-radius: 50% !important;
}

.rounded-bottom-none {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.z-0 {
	z-index: 0 !important;
}

.z-1 {
	z-index: 1 !important;
}

.z-2 {
	z-index: 2 !important;
}

.z-3 {
	z-index: 3 !important;
}

.z-4 {
	z-index: 4 !important;
}

.z-5 {
	z-index: 5 !important;
}

.z-6 {
	z-index: 6 !important;
}

.z-7 {
	z-index: 7 !important;
}

.z-8 {
	z-index: 8 !important;
}

.z-9 {
	z-index: 9 !important;
}

.z-10 {
	z-index: 10 !important;
}

.z-20 {
	z-index: 20 !important;
}

.z-30 {
	z-index: 30 !important;
}

.z-40 {
	z-index: 40 !important;
}

.z-50 {
	z-index: 50 !important;
}

.z-60 {
	z-index: 60 !important;
}

.z-70 {
	z-index: 70 !important;
}

.z-80 {
	z-index: 80 !important;
}

.z-90 {
	z-index: 90 !important;
}

.z-100 {
	z-index: 100 !important;
}