@charset "UTF-8";

@import url('space-grotesk.css');

:root {
	--font-primary: "SpaceGrotesk-Variable", "SpaceGrotesk-Bold",
		"SpaceGrotesk-SemiBold", "SpaceGrotesk-Medium", "SpaceGrotesk-Regular",
		"SpaceGrotesk-Light", sans-serif;
		
	--darkest-blue: #101f2f;
	--white: #ffffff;
	--gold: #e9bd40;
	--light-gold: #f2c64f;
	--gray-blue: #6788d3;
	--light-gray: #c1d5eb;
	--gray: #d1d1d1;
	--dark-gray: #8ca9c4;
	--darker-gray: #2e3d4b;
	--black: #000000;
	--background-color: #f3f3f3;

}

.gold-text {
	color: var(--gold);
}
.gray-blue-text {
	color: var(--gray-blue);
}
.dark-gray-text {
	color: var(--dark-gray);
}
.darker-gray-text {
	color: var(--darker-gray);
}

html, body {
	overflow-x: hidden;
	height: 100%;
	font-family: var(--font-primary);
	padding-top: 38px;
}

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	margin: 0;
}

.main-content {
	display: flex;
	flex: 1;
}

.main-content-area {
	flex: 1;
}

.bg-main {
	background-color: var(--background-color);
	color: #fff;
}

.bg-detail {
	background-color: #fff;
	color: #000;
}

.btn-primary {
	--bs-btn-color: var(--black);
	--bs-btn-bg: var(--light-gold);
	--bs-btn-border-color: var(--light-gold);
	--bs-btn-hover-color: var(--black);
	--bs-btn-hover-bg: var(--light-gold);
	--bs-btn-hover-border-color: var(--light-gold);
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--light-gold);
	--bs-btn-active-border-color: var(--light-gold);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	font-size: clamp(1rem, 1.2vw, 2rem);
}

.custom-link {
	text-decoration: none;
	text-decoration: underline;
}

.custom-link:hover {
	text-decoration: underline;
}

.py-costum {
	padding-top: 6rem;
}