@import url('https://fonts.googleapis.com/css2?family=Science+Gothic:wght@100..900&display=swap');
/*
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
.sec-font {
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/
.main-font {
	font-family: "Science Gothic", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
		"slnt" 0,
		"wdth" 100,
		"CTRS" 0;
}

:root {
	--main-font: "Science Gothic", sans-serif;
	--header-height: 79px;

	--main-color: #667eea;
	--dark-color: #09070a; /* #000 */

	--panel1-color: #764ba2;
	--panel2-color: #f5576c;
	
	--green-color: #88ce02; /* rgba(136, 206, 2, 1) */
	--red-color: #f5576c;
	--gold-color: #ff8709;
	--white-color: #fff;

	--pma-text: 0;
	--pma-text-size: 40vw;

	--container-font-size: 16px;

	--h1-min: 2;
	--h1-max: 4;

	--h2-min: 1.75;
	--h2-max: 3;

	--h3-min: 1.5;
	--h3-max: 2.25;

	--h4-min: 1.25;
	--h4-max: 1.75;

	--h5-min: 1.1;
	--h5-max: 1.4;

	--p-size: 1.3;

	--space-xxl: 2;
	--space-xl: 1.75;
	--space-lg: 1.5;
	--space-md: 1.25;
	--space-sm: 1;
	--space-xs: 0.5;

	--lh-heading: 1.2;
	--lh-text: 1.6;
}

html {
	font-size: 16px;
}

body {
	font-family: var(--main-font);
	color: white;
	max-width: 100vw;
	overflow-x: hidden;
	background-attachment: fixed;
	background-color: var(--dark-color);
}

a {
	text-decoration: none;
}

svg,
img {
	display: block;
	max-width: 100%;
	height: auto;
}

#smooth-wrapper {
	min-height: 560px;
}

h2 {
	font-size: clamp(2rem, 5vw, 4rem);
	margin-bottom: 1.5rem;
	font-weight: 700;
}

p {
	font-size: clamp(1rem, 2vw, 1.3rem);
	line-height: 1.8;
	opacity: 0.9;
}

.image-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 0.2rem;
	grid-row-gap: 0.2rem;
	width: 70vw;
	margin: 0 auto;
	padding-top: 40vh;
	z-index: -1;
}

/* Responsive */
@media (max-width: 768px) {
	:root {
		--header-height: 60px;
		--pma-text-size: 60vw;
	}

	html {
		font-size: 15px;
	}

	h2 {
		font-size: clamp(1.8rem, 8vw, 3rem) !important;
		margin-bottom: 1rem;
	}

	p {
		font-size: 1rem;
		line-height: 1.6;
	}

	.image-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		width: 90vw;
		padding-top: 20vh;
	}
}

@media (max-width: 375px) {
	:root {
		--header-height: 55px;
	}

	html {
		font-size: 14px;
	}

	h2 {
		font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	:root {
		--header-height: 70px;
	}

	html {
		font-size: 15px;
	}
}