
/* Custom */
.hero {
	background-position: center; 
	background-size: cover; 
}

.hero-animated-bg {
	position: relative;
	background: #000000;
	overflow: hidden;
}

.hero-animated-bg::before {
	content: "";
	position: absolute;
	top: -100%;
	left: -100%;
	width: 300%;
	height: 300%;
	background-image: linear-gradient(152deg, #691FD6 40%, #07D8FF 55%);
	animation: hero-gradient-rotate 15s ease infinite, hero-gradient-pulse 8s ease-in-out infinite;
	z-index: 1;
	opacity: 0.85;
}

.hero-animated-bg::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: radial-gradient(circle at center, transparent 30%, #00000088 100%); */
	z-index: 2;
	mix-blend-mode: multiply;
}

.hero-animated-bg .card-img-overlay {
	position: relative;
	z-index: 3;
}

@keyframes hero-gradient-rotate {
	0% {
		transform: rotate(0deg) scale(1);
	}
	50% {
		transform: rotate(10deg) scale(1.1);
	}
	100% {
		transform: rotate(0deg) scale(1);
	}
}

@keyframes hero-gradient-pulse {
	0% {
		opacity: 0.7;
	}
	50% {
		opacity: 0.9;
	}
	100% {
		opacity: 0.7;
	}
}

.transition-waves {
	mask: url(/img/transition-waves.svg); /* , linear-gradient(#000 0 0); */
	mask-repeat: no-repeat;
	mask-position: left bottom, left bottom;
    mask-size: 200%;
	/* mask-composite: exclude; */

	/* -webkit-mask: url(/img/transition-waves.svg), linear-gradient(#000 0 0);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: left bottom, left bottom;
	-webkit-mask-size: 200%;
	-webkit-mask-composite: exclude; */

	animation: waves 20s infinite linear;
}

/* div:has(.transition-waves) + div, div:has(.transition-waves-reverse) + div {
	margin-top: -1px;
} */

.transition-waves-top {
	/* margin-top: -1px; */

	mask: url(/img/transition-waves-top.svg); /* , linear-gradient(#000 0 0); */
	mask-repeat: no-repeat;
	mask-position: left top, left top;
    mask-size: 200%;
	/* mask-composite: exclude; */

	/* -webkit-mask: url(/img/transition-waves-top.svg), linear-gradient(#000 0 0);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: left top, left top;
	-webkit-mask-size: 200%;
	-webkit-mask-composite: exclude; */

	animation: waves-top 30s infinite linear;
}

.transition-waves-reverse {
	mask: url(/img/transition-waves.svg); /* , linear-gradient(#000 0 0); */
	mask-repeat: no-repeat;
	mask-position: right bottom, left bottom;
    mask-size: 200%;
	/* mask-composite: exclude; */

	/* -webkit-mask: url(/img/transition-waves.svg), linear-gradient(#000 0 0);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: right bottom, left bottom;
	-webkit-mask-size: 200%;
	-webkit-mask-composite: exclude; */

	animation: waves-reverse 20s infinite linear;
}

@keyframes waves {
	100% {
		/* -webkit-mask-position: right bottom -1px, left bottom; */
		-webkit-mask-position: right bottom, left bottom;
		mask-position: right bottom, left bottom;
	}
}

@keyframes waves-top {
	100% {
		-webkit-mask-position: right top, left top;
		mask-position: right top, left top;
	}
}

@keyframes waves-reverse {
	100% {
		-webkit-mask-position: left bottom, left bottom;
		mask-position: left bottom, left bottom;
	}
}


.scroll-container {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	--scroll-container-size: calc(100vw - 48px); /*1320px;*/
	--scroll-container-card-count: 1; /* 3 */
	gap: 24px; /* Space between cards */
	padding-left: calc(((100vw - var(--scroll-container-size))/2) + 12px);
	padding-right: calc(((100vw - var(--scroll-container-size))/2) + 12px);
}

.scroll-container::-webkit-scrollbar {
	display: none;
}

.scroll-container .card {
	flex: 0 0 calc((var(--scroll-container-size) / var(--scroll-container-card-count)) - 24px); /* 3 cards visible at once, accounting for gap */
	max-width: calc((var(--scroll-container-size) / var(--scroll-container-card-count)) - 24px);
}

@media (min-width: 576px) {
	.scroll-container {
		--scroll-container-size: 490px;
		--scroll-container-card-count: 1;
	}
}

@media (min-width: 768px) {
	.scroll-container {
		--scroll-container-size: 670px;
		--scroll-container-card-count: 2;
	}
}

@media (min-width: 992px) {

	.scroll-container {
		--scroll-container-size: 642px;
		--scroll-container-card-count: 2;
	}
}

@media (min-width: 992px) {

	.scroll-container {
		--scroll-container-size: 910px;
		--scroll-container-card-count: 3;
	}
}

@media (min-width: 1200px) {
	.scroll-container {
		--scroll-container-size: 1090px;
		--scroll-container-card-count: 3;
	}
}

@media (min-width: 1400px) {
	.scroll-container {
		--scroll-container-size: 1270px;
		--scroll-container-card-count: 3;
	}
}


.card.hover {
	transition: transform 0.3s ease;
	transform: scale(1);
}

.card.hover:hover {
	transform: scale(1.025);
}


:root {

	/* Material Web Overrides */
	--md-sys-color-primary: #1B2E3C;
	--md-sys-color-secondary: #FFF;
	--md-sys-color-error: #BA191A;
	--md-ref-typeface-plain: Helvetica;
	--md-sys-typescale-body-large-size: 14px;
	--md-sys-typescale-headline-medium-size: 22px;
	--md-sys-color-background: #FFFFF;
	--md-sys-color-surface: #E8E7EC;
	--md-sys-color-on-surface: #1B2E3C;
	--md-sys-color-surface-container-highest: #1B2E3C;
	--md-sys-color-on-surface-container-highest: #E8E7EC;

	--md-icon-button-icon-color: #1B2E3C;
	--md-icon-button-hover-icon-color: #1B2E3C;

	--md-filled-tonal-button-container-color: #E6E8E9;
	--md-filled-tonal-button-hover-container-elevation: 0;
	--md-filled-tonal-button-container-shape: 28px;

	--md-fab-primary-container-color: #1B2E3C;
	--md-fab-primary-icon-color: #E8E7EC;

	--md-fab-secondary-container-color: #4B0000;
	--md-fab-secondary-icon-color: #F6F2F2;

	--md-divider-color: #E8E7EC;
	--md-list-container-color: transparent;
	--md-list-item-leading-space: 24px;
	--md-list-item-leading-icon-color: #1B2E3C;
	--md-list-item-trailing-space: 24px;
	--md-list-item-trailing-icon-color: #1B2E3C;

	--md-text-button-label-text-color: #0D0A30;
	--md-text-button-label-text-weight: bold;
	--md-text-button-hover-state-layer-color: #0D0A30;
	--md-text-button-hover-label-text-color: #0D0A30;
	--md-text-button-container-shape: 28px;

	--md-outlined-text-field-container-shape: 28px;

	--md-menu-container-shape: 7px;
	--md-menu-container-color: #FFF; /* #E8E7EC;*/
	--md-menu-container-shadow-color: #444;
	--md-menu-item-selected-container-color: #ECECED;
	--md-menu-item-hover-container-color: #E6E6E8;

	--md-outlined-field-container-shape: 12px;

	--md-outlined-select-text-field-container-shape: 12px;
	--md-menu-item-hover-state-layer-color: #444;
	--md-menu-item-pressed-state-layer-color: #fff;
	--md-outlined-select-text-field-focus-outline-color: #444;

	--md-filled-select-text-field-container-shape: 12px;
	--md-filled-select-text-field-container-color: transparent;
	--md-filled-select-text-field-active-indicator-color: transparent;
	--md-filled-select-text-field-hover-active-indicator-color: transparent;
	--md-filled-select-text-field-focus-active-indicator-color: transparent;

	--md-dialog-headline-font: var(--md-ref-typeface-plain);
	--md-dialog-container-shape: 14px;
	--md-dialog-container-color: #E8E7EC; /*#FDFDFD;*/

	--md-switch-track-color: #E6E6E8;
	--md-switch-track-outline-color: #494957;
	--md-switch-handle-color: #494957;
	--md-switch-selected-track-color: #1B2E3C;
	--md-switch-selected-handle-color: #fff;

	--md-switch-hover-track-color: #E6E6E8;
	--md-switch-selected-hover-track-color: #1B2E3C;
	--md-switch-selected-hover-handle-color: #E6E6E8;

	--md-switch-pressed-track-color: #E6E6E8;
	--md-switch-selected-pressed-track-color: #1B2E3C;
	--md-switch-selected-pressed-handle-color: #E6E6E8;

	/* Bootstrap Overrides */
	--bs-primary-rgb: 12, 12, 30;
	--bs-secondary-rgb: 232, 231, 236;
	--bs-light-rgb: 246, 246, 248;
	--bs-tertiary-bg-rgb: var(--md-sys-color-background);
	--bs-body-color: var(--md-sys-color-on-surface);
	--bs-secondary-bg-rgb: 237, 229, 229;
	--bs-body-bg-rgb: 210, 231, 234;

	--bs-primary-bg-subtle: #E6E6E8;

	--bs-body-font-size: 16px;
	--md-sys-typescale-headline-medium-size: 20px;

	--bs-body-line-height: 1.5rem;

	--bs-border-color: #1B2E3C;
	--bs-border-radius: 14px;
	--bs-border-radius-lg: 14px;

	--bs-nav-link-font-size: 21px;

	/* App Overrides */
	--sidenav-width: 250px;
	--topnav-height: 64px;
}

md-dialog {
	--md-divider-color: #D3D4D9;
}

md-icon-button.error {
	--md-icon-button-icon-color: var(--md-sys-color-error);
	--md-icon-button-hover-icon-color: var(--md-sys-color-error);
	--md-icon-button-pressed-icon-color: var(--md-sys-color-error);
	--md-icon-button-focus-icon-color: var(--md-sys-color-error);
	--md-icon-button-selected-hover-state-layer-color: var(--md-sys-color-error);
	--md-icon-button-hover-state-layer-color: var(--md-sys-color-error);
	--md-icon-button-pressed-state-layer-color: var(--md-sys-color-error);
}

md-filled-icon-button.error {
	--md-filled-icon-button-container-color: var(--md-sys-color-error);
	--md-filled-icon-button-selected-hover-state-layer-color: var(--md-sys-color-error);
	--md-filled-icon-button-hover-state-layer-color: var(--md-sys-color-error);
	--md-filled-icon-button-pressed-state-layer-color: var(--md-sys-color-error);
}

body {
	margin: 0;
	/* background-color: #0C092D; */
	font-family: var(--md-ref-typeface-plain);
}

#app {
	min-height: 100vh;
}

main {
	display: flex;
}

.content {
	width: calc(100vw - var(--sidenav-width));
	height: calc(100vh - var(--topnav-height));
}

.cursor-pointer {
	cursor: pointer;
}


/* Bootstrap Overrides */
.btn {
	--bs-btn-padding-x: 1.25rem;
	--bs-border-radius: 999px;
	--bs-btn-hover-bg: rgba(27, 46, 60, 0.1);
	--bs-btn-font-size: 14px;
}

.mt-n1 {
	margin-top: -0.25rem;
}

.mt-n2 {
	margin-top: -0.5rem;
}

.mt-n3 {
	margin-top: -1rem;
}

.mt-n4 {
	margin-top: -1.5rem;
}

.mb-n1 {
	margin-bottom: -0.25rem;
}

.mb-n2 {
	margin-bottom: -0.5rem;
}

.mb-n3 {
	margin-bottom: -1rem;
}

.mb-n4 {
	margin-bottom: -1.5rem;
}

.ms-n1 {
	margin-left: -0.25rem;
}

.ms-n2 {
	margin-left: -0.5rem;
}

.ms-n3 {
	margin-left: -1rem;
}

.ms-n4 {
	margin-left: -1.5rem;
}

.bg-primary, .card.bg-primary {
	--md-divider-color: #494957;
}

.bg-transparent {
	background-color: transparent;
}

.text-secondary {
	color: #CFCED8;
}

md-filled-tonal-button {
	padding-top: 16px; 
	padding-bottom: 16px;
	font-weight: bold;
}

md-filled-tonal-button.btn-primary {
	--md-filled-tonal-button-container-color: #130E44;
	--md-filled-tonal-button-label-text-color: #E8E7EC;
	--md-filled-tonal-button-icon-color: #E8E7EC;
	--md-filled-tonal-button-hover-state-layer-color: #E8E7EC;
	--md-filled-tonal-button-hover-label-text-color: #E8E7EC;
	--md-filled-tonal-button-hover-icon-color: #E8E7EC;
	--md-filled-tonal-button-pressed-state-layer-color: #E8E7EC;
	--md-filled-tonal-button-pressed-label-text-color: #E8E7EC;
	--md-filled-tonal-button-pressed-icon-color: #E8E7EC;
	--md-filled-tonal-button-focus-state-layer-color: #E8E7EC;
	--md-filled-tonal-button-focus-label-text-color: #E8E7EC;
	--md-filled-tonal-button-focus-icon-color: #E8E7EC;

	--md-circular-progress-active-indicator-color: #E8E7EC;
}

md-filled-tonal-button.btn-secondary {
	--md-filled-tonal-button-container-color: #4B0000;
	--md-filled-tonal-button-label-text-color: #F6F2F2;
	--md-filled-tonal-button-icon-color: #F6F2F2;
	--md-filled-tonal-button-hover-state-layer-color: #F6F2F2;
	--md-filled-tonal-button-hover-label-text-color: #F6F2F2;
	--md-filled-tonal-button-hover-icon-color: #F6F2F2;
	--md-filled-tonal-button-pressed-state-layer-color: #F6F2F2;
	--md-filled-tonal-button-pressed-label-text-color: #F6F2F2;
	--md-filled-tonal-button-pressed-icon-color: #F6F2F2;
	--md-filled-tonal-button-focus-state-layer-color: #F6F2F2;
	--md-filled-tonal-button-focus-label-text-color: #F6F2F2;
	--md-filled-tonal-button-focus-icon-color: #F6F2F2;

	--md-circular-progress-active-indicator-color: #F6F2F2;
}

md-filled-tonal-button.btn-danger {
	--md-filled-tonal-button-container-color: #b3261e;
	--md-filled-tonal-button-label-text-color: #E8E7EC;
	--md-filled-tonal-button-icon-color: #E8E7EC;
	--md-filled-tonal-button-hover-state-layer-color: #E8E7EC;
	--md-filled-tonal-button-hover-label-text-color: #E8E7EC;
	--md-filled-tonal-button-hover-icon-color: #E8E7EC;
	--md-filled-tonal-button-pressed-state-layer-color: #E8E7EC;
	--md-filled-tonal-button-pressed-label-text-color: #E8E7EC;
	--md-filled-tonal-button-pressed-icon-color: #E8E7EC;
	--md-filled-tonal-button-focus-state-layer-color: #E8E7EC;
	--md-filled-tonal-button-focus-label-text-color: #E8E7EC;
	--md-filled-tonal-button-focus-icon-color: #E8E7EC;

	--md-circular-progress-active-indicator-color: #E8E7EC;
}

md-filled-tonal-button.btn-light {
	--md-filled-tonal-button-container-color: rgba(27, 46, 60, 0.1);
	--md-filled-tonal-button-label-text-color: #1B2E3C;
	--md-filled-tonal-button-icon-color: #1B2E3C;

	--md-circular-progress-active-indicator-color: #1B2E3C;
}

md-filled-tonal-button.btn-white {
	--md-filled-tonal-button-container-color: rgba(255, 255, 255, 0.9);
	/* --md-filled-tonal-button-label-text-color: #FFF; */
	/* --md-filled-tonal-button-icon-color: #FFF; */

	--md-circular-progress-active-indicator-color: #1B2E3C;
}

md-filled-tonal-button md-circular-progress {
	--md-circular-progress-active-indicator-width: 6;
}

md-text-button {
	padding-top: 16px; 
	padding-bottom: 16px;
	font-weight: bold;
	--md-text-button-leading-space: 24px;
	--md-text-button-trailing-space: 24px;
	--md-text-button-with-trailing-icon-leading-space: 24px;
	--md-text-button-with-trailing-icon-trailing-space: 18px;
}

md-text-button.btn-light {
	--md-text-button-label-text-color: #FFF;
	--md-text-button-label-text-weight: bold;
	--md-text-button-container-shape: 48px;
	--md-text-button-icon-color: #FFF;
	--md-text-button-hover-state-layer-color: #FFF;
	--md-text-button-hover-label-text-color: #FFF;
	--md-text-button-hover-icon-color: #FFF;
}

md-filled-icon-button.btn-primary {
	--md-icon-button-container-color: #1B2E3C;
	--md-icon-button-label-text-color: #E8E7EC;
	--md-icon-button-icon-color: #E8E7EC;
	--md-icon-button-hover-state-layer-color: #E8E7EC;
	--md-icon-button-hover-label-text-color: #E8E7EC;
	--md-icon-button-hover-icon-color: #E8E7EC;
	--md-icon-button-pressed-state-layer-color: #E8E7EC;
	--md-icon-button-pressed-label-text-color: #E8E7EC;
	--md-icon-button-pressed-icon-color: #E8E7EC;
	--md-icon-button-focus-state-layer-color: #E8E7EC;
	--md-icon-button-focus-label-text-color: #E8E7EC;
	--md-icon-button-focus-icon-color: #E8E7EC;

	--md-circular-progress-active-indicator-color: #E8E7EC;
}

md-icon-button.btn-light {

	--md-icon-button-icon-color: #FFF;
	--md-icon-button-hover-icon-color: #FFF;
	--md-icon-button-pressed-icon-color: #FFF;
	--md-icon-button-focus-icon-color: #FFF;

	--md-icon-button-selected-hover-state-layer-color: #FFF;
	--md-icon-button-hover-state-layer-color: #FFF;
	--md-icon-button-pressed-state-layer-color: #FFF;
	--md-icon-button-focus-state-layer-color: #FFF;
}



md-outlined-button {
	padding-top: 16px; 
	padding-bottom: 16px;
	font-weight: bold;
}

md-outlined-button.btn-light {
	--md-outlined-button-icon-color: #FFF;
	--md-outlined-button-label-text-color: #FFF;
	--md-outlined-button-outline-color: #FFF;
	--md-outlined-button-hover-container-color: rgba(255, 255, 255, 0.1);
	--md-outlined-button-hover-state-layer-color: rgba(255, 255, 255, 1);
	--md-outlined-button-hover-label-text-color: #FFF;
	--md-outlined-button-pressed-label-text-color: #FFF;
	--md-outlined-button-pressed-state-layer-color: rgba(255, 255, 255, 1);
	--md-outlined-button-pressed-outline-color: #FFF;
	--md-outlined-button-focus-label-text-color: #FFF;
	--md-outlined-button-focus-state-layer-color: rgba(255, 255, 255, 1);
	--md-outlined-button-focus-outline-color: #FFF;
}

container-fluid {
	--bs-gutter-x: 3rem;
}

.tooltip-inner {
	padding: 12px 16px;
}

hr {
	color: #878790;
}

.btn-group > .btn, .btn-group-vertical > .btn {
	flex: 1 1 0%;
	/*--bs-btn-padding-y: 12px;*/
	--bs-btn-padding-x: 12px;
}

.btn-secondary {
	--bs-btn-bg: rgba(75, 0, 0, 0.08);
	--bs-btn-color: #784040;
	--bs-btn-hover-bg: rgba(75, 0, 0, 0.5);
	--bs-btn-hover-color: #E8E7EC;
}

.navbar {
	min-height: var(--topnav-height);
	font-size: var(--md-sys-typescale-headline-medium-size);
	--bs-navbar-nav-link-padding-x: 25px;
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

.navbar-dark {
	--bs-navbar-color: rgba(255, 255, 255, 1);
}

.navbar-brand {
	--bs-navbar-brand-color: var(--md-sys-color-on-surface);
}

.nav-link { 
	--bs-nav-link-color: #FFF;
}

.card {
	--bs-card-spacer-y: 24px !important;
	--bs-card-spacer-x: 24px !important;
	--bs-card-border-width: 0;
	--bs-card-bg: #FFF;
	--bs-card-cap-bg: #FDFDFD;
	--md-sys-color-surface: transparent;
	--bs-card-title-spacer-y: 24px;
	--bs-card-title-color: var(--md-sys-color-on-surface);
	--bs-card-border-radius: 14px;
}

.card.card-outline-primary {
	--bs-card-border-width: 1px;
	--bs-card-border-color: #1B2E3C;
}

.card.btn {
	background-color: var(--bs-btn-bg);
	color: var(--bs-btn-color);
}

.card.btn:hover {
	background-color: var(--bs-btn-hover-bg);
	color: var(--bs-btn-hover-color);
}

.table {
	--bs-table-border-color: #E8E7EC;
	--bs-table-hover-bg: rgba(75, 0, 0, 0.08);
	--bs-table-hover-color: rgba(75, 0, 0, 0.5);
}

.table thead {
	--bs-table-color-state: rgba(27, 46, 60, 0.6);
	font-size: 14px;
}

.table tbody {
	--bs-table-color-state: rgba(27, 46, 60, 0.75);
	font-size: 14px;
}

.table .table-active {
	--bs-table-bg-state: rgba(75, 0, 0, 0.1);
	--bs-table-color-state: #4B0000;
}

.table > :not(caption) > * > * {
	box-shadow: unset;
	background-color: var(--bs-table-bg-state, var(--bs-table-bg));
	padding: 1rem 1rem;
}

.table-hover > tbody > tr.table-active:hover > * {
	--bs-table-bg-state: rgba(75, 0, 0, 0.15);
	--bs-table-color-state: #4B0000;
}

.card > .table {
	margin-bottom: 0;
	--bs-table-bg: transparent;
}

.card > .table th:first-child, .card > .table td:first-child {
	padding-left: 24px;
}

.card > .table th:last-child, .card > .table td:last-child {
	padding-right: 24px;
}

.card > .table tbody tr:last-child td {
	border-bottom: none;
}

.card > .table:last-child tbody tr:last-child td:first-child {
	border-bottom-left-radius: var(--bs-card-border-radius);
}

.card > .table:last-child tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--bs-card-border-radius);
}

.card > md-list:last-child {
	border-bottom-left-radius: var(--bs-card-border-radius);
}

.card > md-list:last-child {
	border-bottom-right-radius: var(--bs-card-border-radius);
}

.btn-outline-primary {
	--bs-btn-color: #1B2E3C;
	--bs-btn-border-color: #1B2E3C;
	--bs-btn-hover-bg: rgba(27, 46, 60, 0.1);
	--bs-btn-hover-color: #1B2E3C;
	--bs-btn-hover-border-color: #1B2E3C;
	--bs-btn-active-bg: rgba(27, 46, 60, 0.15);
	--bs-btn-active-color: #1B2E3C;
	--bs-btn-active-border-color: #1B2E3C;
	--bs-btn-disabled-color: rgba(27, 46, 60, 0.5);
	--bs-btn-disabled-border-color: rgba(27, 46, 60, 0.5);

	--bs-btn-font-size: 13px;
}

.modal {
	--bs-modal-border-width: 0px;
	--bs-modal-border-radius: 14px;
	--bs-modal-padding: 24px;

	--bs-modal-header-padding: 24px;
	--bs-modal-header-border-width: 0px;

	--bs-modal-footer-border-width: 0px;
	--bs-modal-footer-gap: 0px;
}

.modal {
	--md-divider-color: #D3D4D9;
}

.card {
	--md-divider-color: #E8E7EC;
}

.modal-dialog {
	width: fit-content;
	max-width: initial;
	--bs-modal-bg: #E8E7EC; /*#FDFDFD;*/
}

.modal-header {
	font-size: 23px;
}

.modal-body {
	padding-top: 0px;
	padding-bottom: 0px;
}

.modal-backdrop {
	--bs-backdrop-bg: rgba(0,0,0,0.4);
	--bs-backdrop-opacity: 1;
	backdrop-filter: blur(3px);
}

.offcanvas {
	--bs-offcanvas-width: calc(400px + env(safe-area-inset-left));
	padding-left: env(safe-area-inset-left);
}


.bg-translucent {
	background-color: rgba(255,255,255,0.75);
	backdrop-filter: blur(20px);
}


.footer {
	--bs-heading-color: #DAE4F8;
	color: #DAE4F8 !important;
	background: #000000;
	background-image: linear-gradient(242deg, rgba(27,20,100,0.75) 0%, rgba(27,20,100,0.45) 100%);
}

.footer a {
	color: rgb(218, 228, 248, 0.75);
	text-decoration: none;
}

.footer a:hover {
	color: rgb(218, 228, 248, 0.85);
}

.btn-magic {
	background: #000000;
	background-image: linear-gradient(152deg, #691FD6 0%, #07D8FF 100%);
	--md-filled-tonal-button-container-color: z;
	--md-filled-tonal-button-label-text-color: #fff;
	--md-filled-tonal-button-hover-label-text-color: #fff;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.btn-magic::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 100%;
	background-image: linear-gradient(152deg, #07D8FF 10%, #691FD6 40%, #07D8FF 100%);
	z-index: -1;
	transition: transform 0.5s ease;
	transform: translateX(-50%);
}

.btn-magic:hover::before {
	transform: translateX(0);
}


