#skills {
	& > .skills-list {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 1.5rem;
		margin-top: 2rem;
		& > .skills-list-item {
			width: 10rem;
			height: 10rem;
			aspect-ratio: 1/1;

			border-radius: 50%;
			text-align: center;
			font-weight: bold;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			& > .skills-list-item-content {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 0.5rem;
				background: var(--linear-gradient_card);
				border-radius: 50%;
				& > img {
					width: 5rem;
					aspect-ratio: 1/1;
					object-fit: contain;
				}
				& > .skills-list-item-title {
					font-size: 1rem;
					color: white;
				}
			}
		}
	}
}

@property --percent_skills {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

/*-----------------percent progress effect----------------*/
.skills-list-item_percent {
	position: relative;
	&::before,
	&::after,
	.skills-list-item-content::after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	&::before {
		content: "";
		z-index: -1;
		transform: scale(1);

		transition: --percent_skills 1s, transform 0.3s ease;

		background: conic-gradient(
			hsl(var(--hue-primary), 100%, 50%) var(--percent_skills),
			hsl(var(--hue-secondary), 100%, 10%) var(--percent_skills)
		);
	}
	&::after {
		content: var(--percentS);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.3rem;
		color: hsl(var(--hue-secondary), 100%, 90%);
		opacity: 0;
		transition: all 0.3s ease;
	}
	& > .skills-list-item-content::after {
		content: "";
		inset: 0;
		background: var(--linear-gradient_border);
		transition: opacity 0.3s ease;
		z-index: -1;
		transform: scale(1.02);
	}
	&:hover {
		transform: scale(0.9);
		box-shadow: 0 20px 60px rgba(0, 255, 255, 0.15);
		&::before {
			transform: scale(1.1);
			--percent_skills: var(--percentN);
			z-index: -1;
		}
		&::after {
			background: var(--color-overlay);
			opacity: 1;
		}
		& > .skills-list-item-content::after {
		
			transform: scale(1);
		}
	}
}