@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: #0d0d23;
	--blue: #3f31f8;
	--purple: #6557f9;
	--lime: #e5ff00;
	--blue-gray: #5c86d8;
	--green-gray: #84abc8;
	--light-gray: #bbd5ec;
	--black: #000000;
	--gray: #bfbfbf;
	--white: #ffffff;
	--background-color: #f3f3f3;
	--portal-kash: #f6c654;
	--footer-text-color: #28283a;
}

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(--portal-kash);
	--bs-btn-border-color: var(--portal-kash);
	--bs-btn-hover-color: var(--black);
	--bs-btn-hover-bg: var(--portal-kash);
	--bs-btn-hover-border-color: var(--portal-kash);
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--portal-kash);
	--bs-btn-active-border-color: var(--portal-kash);
	--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;
}