/* == Font Faces == */
@font-face {
	font-family: 'Rubik';
	src: url('/Fonts/Rubik/static/Rubik-Regular.ttf') format('woff2');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Exo';
	src: url('/Fonts/Exo/static/Exo2-Regular.ttf') format('woff2');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Cairo';
	src: url('/Fonts/Cairo/static/Cairo-Regular.ttf') format('woff2');
	font-weight: 400;
	font-style: normal;
}

/* == ROOTS == */
:root {
	--bg-primary: #edf2f4;
	--tx-primary: #000;

	--blur: #00000040;
	--ag-blur: #ffffff59;

	--emerald: #2fbf71ff;
	--our-blue-lighted: #bfddffff;
	--our-blue: #3395ffff;

	--fill-blur: 12px;
}
/* ------------------------------------- */
/* 1. Base Reset                        */
/* ------------------------------------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	width: 100%;
	min-height: 100vh;
	background-color: var(--bg-primary);
	overflow-x: hidden;
}

.w {
	width: 100%;
}

/* ------------------------------------- */
/* 2. Flex and Grid Layouts             */
/* ------------------------------------- */
.off { display: none !important; }                  /* .off → display: none */

.flex { display: flex; }                            /* .flex → display: flex */
.row  { flex-direction: row; }
.col  { flex-direction: column; }
.wrap { flex-wrap: wrap; }
.grid { display: grid; }

/* == Alignment == */
.a-center  { align-items: center; }
.a-start   { align-items: flex-start; }
.a-end     { align-items: flex-end; }
.j-center  { justify-content: center; }
.j-start   { justify-content: flex-start; }
.j-end     { justify-content: flex-end; }
.j-between { justify-content: space-between; }
.j-around  { justify-content: space-around; }
.j-evenly  { justify-content: space-evenly; }
.center    { align-items: center; justify-content: center; }

.gap {
	gap: 10px; /* Default gap */
}

/* ------------------------------------- */
/* 3. Typography                        */
/* ------------------------------------- */
.title {
	font-family: 'Rubik', 'Exo', 'Cairo';
	font-weight: 700;
	font-size: 52px;
	color: var(--tx-primary);
	transition: 0.2s linear;
}
.align {
	font-family: 'Exo', 'Rubik', 'Cairo';
	font-weight: 700;
	font-size: 32px;
	color: var(--tx-primary);
	transition: 0.2s linear;
}
.text, .text-1, .text-2 {
	font-family: 'Rubik', 'Exo', 'Cairo';
	font-weight: 100;
	color: var(--tx-primary);
	transition: 0.2s linear;
}
.text   { font-size: 22px; }
.text-1 { font-size: 16px; }
.text-2 { font-size: 26px; }

.links {
	text-decoration: none;
	font-family: 'Cairo', 'Exo', 'Rubik';
	font-weight: 900;
	font-size: 22px;
	color: var(--tx-primary);
	transition: 0.2s linear;
}
.links:hover {
	text-decoration: solid;
}

/* ------------------------------------- */
/* 5. Reusable Shots                     */
/* ------------------------------------- */
/* Button */
.one-btn {
	min-height: 40px;
	padding: 10px;
	font-weight: bold;
	font-size: 24px;
	background-color: var(--our-blue-lighted);
	color: var(--our-blue);
	border: none;
	border-radius: 15px;
	cursor: pointer;
	transition: 0.1s 0s ease-in-out;
}
.one-btn:hover {
	background-color: #96cbfd;
}
.one-btn:active {
	scale: 0.95;
}

/* Input */
.input-field {
    width: 100%;
    min-height: 40px;
    padding: 10px;
    font-size: 22px;
    border: none;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    box-shadow: 0 7px 25px #1234564b;
    outline: none;
    transition: 0.1s ease-in-out;
}