/* =========================================================
   FONT FACE DECLARATIONS (OPTIMIZED WITH SWAP)
   ========================================================= */

/* ---------------- INTER ---------------- */
@font-face {
	font-family: "inter-regular";
	src: url("../fonts/inter/Inter-Regular.otf") format("opentype");
	font-display: swap;
}

@font-face {
	font-family: "inter-medium";
	src: url("../fonts/inter/Inter-Medium.otf") format("opentype");
	font-display: swap;
}

@font-face {
	font-family: "inter-semibold";
	src: url("../fonts/inter/Inter-SemiBold.otf") format("opentype");
	font-display: swap;
}

@font-face {
	font-family: "inter-bold";
	src: url("../fonts/inter/Inter-Bold.otf") format("opentype");
	font-display: swap;
}

@font-face {
	font-family: "inter-light";
	src: url("../fonts/inter/Inter-Light-BETA.otf") format("opentype");
	font-display: swap;
}

/* ---------------- JOST ---------------- */
@font-face {
	font-family: "jost-regular";
	src: url("../fonts/jost/Jost-Regular.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "jost-medium";
	src: url("../fonts/jost/Jost-Medium.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "jost-semibold";
	src: url("../fonts/jost/Jost-SemiBold.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "jost-bold";
	src: url("../fonts/jost/Jost-Bold.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "jost-black";
	src: url("../fonts/jost/Jost-Black.ttf") format("truetype");
	font-display: swap;
}

/* ---------------- TOMATO ---------------- */
@font-face {
	font-family: "tomato-regular";
	src: url("../fonts/tomato/TomatoGrotesk-Regular.otf") format("opentype");
	font-display: swap;
}

@font-face {
	font-family: "tomato-medium";
	src: url("../fonts/tomato/TomatoGrotesk-Medium.otf") format("opentype");
	font-display: swap;
}

@font-face {
	font-family: "tomato-semibold";
	src: url("../fonts/tomato/TomatoGrotesk-SemiBold.otf") format("opentype");
	font-display: swap;
}

@font-face {
	font-family: "tomato-black";
	src: url("../fonts/tomato/TomatoGrotesk-Black.otf") format("opentype");
	font-display: swap;
}

@font-face {
	font-family: "tomato-bold";
	src: url("../fonts/tomato/TomatoGrotesk-Bold.otf") format("opentype");
	font-display: swap;
}

/* ---------------- TEKO ---------------- */
@font-face {
	font-family: "teko-regular";
	src: url("../fonts/teko/Teko-Regular.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "teko-medium";
	src: url("../fonts/teko/Teko-Medium.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "teko-semibold";
	src: url("../fonts/teko/Teko-SemiBold.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "teko-bold";
	src: url("../fonts/teko/Teko-Bold.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "teko-black";
	src: url("../fonts/teko/Teko-Black.ttf") format("truetype");
	font-display: swap;
}

/* =========================================================
   ROOT VARIABLES (CLEAN & SCALABLE)
   ========================================================= */

:root {
	/* Inter – Default UI */
	--font-inter-regular: "inter-regular", sans-serif;
	--font-inter-medium: "inter-medium", sans-serif;
	--font-inter-semibold: "inter-semibold", sans-serif;
	--font-inter-bold: "inter-bold", sans-serif;
	--font-inter-light: "inter-light", sans-serif;

	/* Jost – Headings */
	--font-jost-regular: "jost-regular", sans-serif;
	--font-jost-medium: "jost-medium", sans-serif;
	--font-jost-semibold: "jost-semibold", sans-serif;
	--font-jost-bold: "jost-bold", sans-serif;
	--font-jost-black: "jost-black", sans-serif;

	/* Tomato – Premium Accent */
	--font-tomato-regular: "tomato-regular", sans-serif;
	--font-tomato-medium: "tomato-medium", sans-serif;
	--font-tomato-semibold: "tomato-semibold", sans-serif;
	--font-tomato-black: "tomato-black", sans-serif;
	--font-tomato-bold: "tomato-bold", sans-serif;

	/* Teko – Display / Hero */
	--font-teko-regular: "teko-regular", sans-serif;
	--font-teko-medium: "teko-medium", sans-serif;
	--font-teko-semibold: "teko-semibold", sans-serif;
	--font-teko-bold: "teko-bold", sans-serif;
	--font-teko-black: "teko-black", sans-serif;
}

/* =========================================================
   GLOBAL BASE
   ========================================================= */

/* =========================================================
   FONT UTILITY CLASSES
   ========================================================= */

/* INTER */
.inter-regular {
	font-family: var(--font-inter-regular);
}

.inter-medium {
	font-family: var(--font-inter-medium);
}

.inter-semibold {
	font-family: var(--font-inter-semibold);
}

.inter-bold {
	font-family: var(--font-inter-bold);
}

.inter-light {
	font-family: var(--font-inter-light);
}

/* JOST */
.jost-regular {
	font-family: var(--font-jost-regular);
}

.jost-medium {
	font-family: var(--font-jost-medium);
}

.jost-semibold {
	font-family: var(--font-jost-semibold);
}

.jost-bold {
	font-family: var(--font-jost-bold);
}

.jost-black {
	font-family: var(--font-jost-black);
}

/* TOMATO */
.tomato-regular {
	font-family: var(--font-tomato-regular);
}

.tomato-medium {
	font-family: var(--font-tomato-medium);
}

.tomato-semibold {
	font-family: var(--font-tomato-semibold);
}

.tomato-black {
	font-family: var(--font-tomato-black);
}

.tomato-bold {
	font-family: var(--font-tomato-bold);
}

/* TEKO */
.teko-regular {
	font-family: var(--font-teko-regular);
}

.teko-medium {
	font-family: var(--font-teko-medium);
}

.teko-semibold {
	font-family: var(--font-teko-semibold);
}

.teko-bold {
	font-family: var(--font-teko-bold);
}

.teko-black {
	font-family: var(--font-teko-black);
}

/* =========================================================
   FONT SIZE SCALE
   ========================================================= */

.level-1 {
	font-size: 58px;
}

.level-2-lg {
	font-size: 46px;
}

.level-2 {
	font-size: 34px;
}

.level-3-lg {
	font-size: 28px;
}

.level-3 {
	font-size: 24px;
}

.level-4 {
	font-size: 20px;
}

.level-5 {
	font-size: 18px;
}

.level-6 {
	font-size: 16px;
}

.level-7 {
	font-size: 14px;
}

.level-8 {
	font-size: 12px;
}

.level-10 {
	font-size: 10px;
}

/* Global Responsive Here */
@media (max-width: 1536px) {
	.level-1 {
		font-size: 50px;
	}
}

@media (max-width: 1400px) {
	.level-1 {
		font-size: 52px;
	}

	.about-content h2 {
		font-size: 45px;
		text-transform: capitalize;
	}

	.level-2 {
		font-size: 32px;
	}

	.level-4-lg {
		font-size: 23px;
	}

	.level-4 {
		font-size: 20px;
	}

	.level-5 {
		font-size: 18px;
	}

	.level-6 {
		font-size: 15px;
	}

	.level-7 {
		font-size: 14px;
	}
}

@media (max-width: 1200px) {
	.level-1 {
		font-size: 43px;
	}

	.level-2 {
		font-size: 40px;
	}

	.level-4-lg {
		font-size: 21px;
	}

	.level-4 {
		font-size: 18px;
	}

	.level-5 {
		font-size: 15px;
	}

	.level-6 {
		font-size: 13px;
	}

	.level-7 {
		font-size: 12px;
	}
}

@media (max-width: 991px) {
	.level-1 {
		font-size: 40px;
	}

	.level-2 {
		font-size: 37px;
	}

	.level-4-lg {
		font-size: 18px;
	}

	.level-4 {
		font-size: 16px;
	}

	.level-5 {
		font-size: 14px;
	}

	.level-6 {
		font-size: 13px;
	}

	.level-7 {
		font-size: 13px;
	}
}

@media (max-width: 768px) {
	.level-1 {
		font-size: 35px;
	}

	.level-2 {
		font-size: 31px;
	}

	.level-4-lg {
		font-size: 18px;
	}

	.level-4 {
		font-size: 15px;
	}

	.level-5 {
		font-size: 13px;
	}

	.level-6 {
		font-size: 13px;
	}

	.level-7 {
		font-size: 13px;
	}
}

@media (max-width: 576px) {
	.level-1 {
		font-size: 32px;
	}

	.level-2 {
		font-size: 27px;
	}
	.level-3 {
		font-size: 19px;
	}

	.level-3-sm {
		font-size: 20px;
	}

	.level-4-lg {
		font-size: 17px;
	}

	.level-4 {
		font-size: 14px;
	}

	.level-5 {
		font-size: 14px;
	}

	.level-6 {
		font-size: 14px;
	}

	.level-7 {
		font-size: 14px;
	}
}