.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.circular-container {
	position: relative;
	width: 100%;
	max-width: 1000px;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
}
.attribute-card {
	position: absolute;
	width: 280px;
	z-index: 10;
}
.pos-top { top: 0; left: 50%; transform: translateX(-50%); }
.pos-right { top: 50%; right: 0; transform: translateY(-50%); }
.pos-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.pos-left { top: 50%; left: 0; transform: translateY(-50%); }
.center-hub {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px; height: 200px;
	background: white;
	border: 2px solid theme('colors.secondary');
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.connection-lines {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 75%; height: 75%;
	border: 2px dashed theme('colors.slate.300');
	border-radius: 50%;
	z-index: 1;
}
.main-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
.menu-color {
	color: rgb(15 30 236);
}