@tailwind base;
@tailwind components;
@tailwind utilities;

html {
	overflow-x: hidden;
}

body::-webkit-scrollbar {
	width: 0;
}

body {
	box-sizing: border-box;
	background-color: #f1f1f1;
}

@font-face {
	src: url("../fonts/FoundersGrotesk.woff");
	font-family: FoundersGrotesk;
}

@font-face {
	src: url("../fonts/NeueMontreal.woff");
	font-family: NeueMontreal;
}

@layer utilities {
	.padding-x {
		@apply px-[50px] md:px-[30px] sm:px-[20px] xm:px-[20px];
	}
	.padding-y {
		@apply py-[100px] lg:py-[80px] md:py-[60px] sm:py-[40px] xm:py-[40px];
	}
	.margin {
		@apply mt-[170px] lg:mt-[80px] md:mt-[60px] sm:mt-[40px] xm:mt-[40px] mb-[130px] lg:mb-[80px] md:mb-[60px] sm:mb-[40px] xm:mb-[40px];
	}
	.heading {
		@apply text-[150px] leading-[100px] lg:text-[130px] lg:leading-[98px] md:text-[100px] md:leading-[75px] sm:text-[74px] sm:leading-[50px] xm:text-[64px] xm:leading-[45px];
	}
	.sub-heading {
		@apply text-[55px] leading-[55px] lg:text-[52px] lg:leading-[52px] md:text-[52px] md:leading-[52px] sm:text-[40px] sm:leading-[40px] xm:text-[31px] xm:leading-[31px];
	}
	.paragraph {
		@apply text-[18px] leading-[26px] lg:text-[16px] lg:leading-[24px] md:text-[16px] md:leading-[24px] sm:text-[16px] sm:leading-[24px] xm:text-[16px] xm:leading-[24px];
	}
	.sub-paragraph {
		@apply xl:text-[21px] xl:leading-[31px] text-[16px] leading-[24px];
	}
	.small-text {
		@apply xl:text-[16px] xl:leading-[24px] lg:text-[16px] lg:leading-[24px] text-[14px] leading-[22px];
	}
}

.hover {
	color: #18272f;
	position: relative;
	text-decoration: none;
}

.hover::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	border-radius: 4px;
	background-color: #18272f;
	bottom: 0;
	left: 0;
	transform-origin: right;
	transform: scaleX(0);
	transition: transform 0.5s ease-in-out;
}

.hover:hover::before {
	transform-origin: left;
	transform: scaleX(1);
}

.link-flash {
	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

	position: relative;
}

.link-flash::before,
.link-flash::after {
	position: absolute;
	content: "";
	left: 0;
	bottom: -2px;
	display: block;
	width: 100%;
	height: 2px;
	background: #212121;
	transition: 1.1s var(--ease-out-expo);
}

.link-flash::before {
	transform: scaleX(0);
	transform-origin: left;
}

.link-flash::after {
	transform-origin: right;
	transition-delay: 0.25s;
}

.link-flash:hover::before {
	transform: scaleX(1);
	transition-delay: 0.25s;
}

.link-flash:hover::after {
	transform: scaleX(0);
	transition-delay: 0s;
}

.h {
	height: calc(100vh + 600px);
}
