@use "../utils" as *;
/*----------------------------------------*/
/*  SKILL CSS START
/*----------------------------------------*/
.skill-award {
	position: absolute;
	bottom: 80px;
	left: 34px;
	h6 {
		height: 122px;
		width: 122px;
		background: var(--clr-common-white);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		color: #161616;
		position: relative;
		transform: rotate(-30deg);
		&:after {
			position: absolute;
			content: "";
			height: 144px;
			width: 144px;
			background: va;
			border: 1px dashed var(--clr-common-white);
			border-radius: 50%;
			-webkit-animation-name: rotateCircle;
			animation-name: rotateCircle;
			-webkit-animation-duration: 20s;
			animation-duration: 20s;
			-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			-webkit-animation-timing-function: linear;
			animation-timing-function: linear;
		}
	}
}
.skill-thumb {
	background: var(--clr-theme-primary);
	text-align: center;
}
.skill-content {
	padding: 0 60px;
	@media #{$xl} {
		padding: 0 30px;
	}
	@media #{$xs,$sm,$md,$lg} {
		padding: 0;
	}
	& > p {
		margin-bottom: 40px;
	}
}

// Skill progress
.bd-progress__skill-item {
	position: relative;
	&:not(:last-child) {
		margin-bottom: 30px;
	}
	h5 {
		margin-bottom: 10px;
		font-size: 16px;
	}
	.progress-count {
		position: absolute;
		top: 0px;
		right: 0;
		font-weight: 500;
		color: var(--clr-theme-primary);
	}
	.progress {
		height: 10px;
		background-color: transparent;
		border-radius: 0;
		overflow: visible;
		position: relative;
		z-index: 1;
		&::after {
			position: absolute;
			content: "";
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 10px;
			width: 100%;
			background-color: #f7f4ef;
			z-index: -1;
			border-radius: 4px;
		}
	}
	.progress-bar {
		background-color: var(--clr-theme-primary);
		overflow: visible;
		border-radius: 10px;
	}
}

// Skill style 2
.skill-content-2 {
	padding-right: 100px;
	@media #{$xs, $sm, $md} {
		padding-right: 0;
	}
}
