@font-face {
	font-family: 'Outfit';
	src: url('../fonts/Outfit/Outfit-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--app-primary: #10218b;
	--app-primary-rgb: 16, 33, 139;
	--app-primary-hover: #0c1970;
	--app-btn-padding-y: 1rem;
	--app-btn-padding-x: 3rem;
}

html,
body {
	font-family: "Outfit", sans-serif;
	font-optical-sizing: auto;
	background: var(--bs-white) !important;
}

.text-app-primary {
	color: var(--app-primary) !important;
}

.btn-app {
	--bs-btn-padding-y: var(--app-btn-padding-y);
	--bs-btn-padding-x: var(--app-btn-padding-x);
}

.btn-app-primary {
	--bs-btn-border-width: 3px !important;
	--bs-btn-color: var(--bs-white);
	--bs-btn-bg: var(--app-primary);
	--bs-btn-border-color: var(--app-primary);

	--bs-btn-hover-color: var(--bs-white);
	--bs-btn-hover-bg: var(--app-primary-hover);
	--bs-btn-hover-border-color: var(--app-primary-hover);

	--bs-btn-focus-shadow-rgb: var(--app-primary-rgb);

	--bs-btn-active-color: var(--bs-white);
	--bs-btn-active-bg: var(--app-primary-hover);
	--bs-btn-active-border-color: var(--app-primary-hover);
	--bs-btn-active-shadow: var(--bs-box-shadow-sm);

	--bs-btn-disabled-color: var(--bs-white);
	--bs-btn-disabled-bg: var(--app-primary);
	--bs-btn-disabled-border-color: var(--app-primary);
}

.btn-outline-app-primary {
	--bs-btn-border-width: 3px !important;

	--bs-btn-color: var(--app-primary);
	--bs-btn-border-color: var(--app-primary);

	--bs-btn-hover-color: var(--bs-white);
	--bs-btn-hover-bg: var(--app-primary);
	--bs-btn-hover-border-color: var(--app-primary);

	--bs-btn-focus-shadow-rgb: var(--app-primary-rgb);

	--bs-btn-active-color: var(--bs-white);
	--bs-btn-active-bg: var(--app-primary);
	--bs-btn-active-border-color: var(--app-primary);
	--bs-btn-active-shadow: var(--bs-box-shadow-sm);

	--bs-btn-disabled-color: var(--app-primary);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--app-primary);
}

.btn-app-secondary {
	--bs-btn-border-width: 3px !important;

	--bs-btn-color: var(--app-primary);
	--bs-btn-bg: var(--bs-white);
	--bs-btn-border-color: var(--bs-white);

	--bs-btn-hover-color: var(--bs-white);
	--bs-btn-hover-bg: var(--app-primary);
	--bs-btn-hover-border-color: var(--bs-white);

	--bs-btn-focus-shadow-rgb: 255, 255, 255;

	--bs-btn-active-color: var(--bs-white);
	--bs-btn-active-bg: var(--app-primary-hover);
	--bs-btn-active-border-color: var(--bs-white);
	--bs-btn-active-shadow: var(--bs-box-shadow-sm);

	--bs-btn-disabled-color: var(--app-primary);
	--bs-btn-disabled-bg: var(--bs-white);
	--bs-btn-disabled-border-color: var(--bs-white);
}

.btn-app-outline-secondary {
	--bs-btn-border-width: 3px !important;

	--bs-btn-color: var(--bs-white);
	--bs-btn-border-color: var(--bs-white);
	--bs-btn-bg: transparent;

	--bs-btn-hover-color: var(--app-primary);
	--bs-btn-hover-bg: var(--bs-white);
	--bs-btn-hover-border-color: var(--bs-white);

	--bs-btn-focus-shadow-rgb: 255, 255, 255;

	--bs-btn-active-color: var(--app-primary);
	--bs-btn-active-bg: var(--bs-white);
	--bs-btn-active-border-color: var(--bs-white);
	--bs-btn-active-shadow: var(--bs-box-shadow-sm);

	--bs-btn-disabled-color: var(--bs-white);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--bs-white);
}

.bg-app-primary {
	--bs-bg-opacity: 1;
  background-color: rgba(var(--app-primary-rgb), var(--bs-bg-opacity));
}

.border-app-primary {
	border: var(--bs-border-width) var(--bs-border-style) var(--app-primary);
}

.img-invert-white {
	filter: brightness(0) invert(1);
}

.hero-app {
	position: relative;
	padding: 92px 0 72px;
	min-height: 780px;
	display: flex;
	align-items: center;
	color: var(--bs-white);
	isolation: isolate;
	background:
		radial-gradient(circle at 18% 16%,
			rgba(var(--app-primary-rgb), .45),
			transparent 28%),
		linear-gradient(110deg,
			rgba(var(--app-primary-rgb), .96),
			rgba(var(--app-primary-rgb), .82) 52%,
			rgba(var(--app-primary-rgb), .38)),
		url("https://www.maggioadriano.it/wp-content/uploads/2024/07/Immagine-2024-07-16-120311-500x300.jpg") center/cover no-repeat;
}

.hero-app::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 150px;
	background: linear-gradient(180deg, transparent, var(--app-primary-hover));
	z-index: -1;
}

.nav-item .nav-link {
	font-size: 1.25rem !important;
	font-weight: 500 !important;
	text-transform: uppercase;
}

.nav-item .nav-link.active {
	color: var(--app-primary) !important;
}


@media (max-width: 991.98px) {
	.hero-app {
		min-height: 560px;
		padding: 72px 0 56px;
	}
}

@media (max-width: 575.98px) {
	.hero-app {
		min-height: 480px;
		padding: 56px 0 48px;
	}
}