/*----------------wraper and cnotainers-----------------*/
.container {
	max-width: 1400px !important;
	width: 100%;
	margin: 0 auto;
	padding-inline: var(--inline-padding) !important;
}

/*----------------titles and text------------------*/
.text-accent {
	color: hsl(var(--hue-primary), 100%, 60%) !important;
}

/*-----------------section elements-----------------*/
.section-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-bottom: 3rem !important; /* this is gape between description and content */
}
.section-header-title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	color: hsl(var(--hue-primary), 5%, 85%);
}

.section-header-description {
	max-width: 800px !important;
	margin: 0 auto !important;
	font-size: 1.125rem !important;
	line-height: 1.6 !important;
	color: var(--color-text_medium) !important;
	text-align: center !important;
}

.sub-section-title {
	font-size: 1.5rem;
	font-weight: bold;
	color: hsl(var(--hue-primary), 5%, 85%);
}

/*-----------------card effects-----------------*/
@property --percent_card {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

.card-effect {
	background: var(--linear-gradient_card);
	transition: all 0.5s ease;
	top: 0;
	position: relative;
	border-radius: 1rem;
	&::after,
	&::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		inset: 0;
		border-radius: 1rem;
		transition: all 1s ease;
		transform: scale(1.01);
	}
	&::before {
		z-index: -2;
		background: var(--linear-gradient_border);
	}
	&::after {
		z-index: -1;
		--percent_card: 0%;
		transition: --percent_card 1s;
		background: conic-gradient(hsl(var(--hue-primary), 100%, 30%) var(--percent_card), transparent var(--percent_card));
	}
	&:hover {
		top: -1rem;
		&::after {
			--percent_card: 100%;
		}
		&::before {
			box-shadow: -0.5rem -0.5rem 4rem 0 var(--color-primary_shadow), 0.5rem 0.5rem 5rem 0 var(--color-secondary_shadow);
			transform: scale(1);
		}
		& img {
			transform: scale(1.02);
		}
	}
}

/*-----------------technologies list-----------------*/
.technologies-list {
	flex-grow: 1;
	display: flex;
	align-items: center;
	gap: 1rem;
	& > li {
		background: var(--linear-gradient_card);
		border: 1px solid var(--color-text_low);
		border-radius: 50%;
		padding: 0.5rem;
		display: flex;
		justify-content: center;
		position: relative;
		min-width: 1.2rem;
		min-height: 1.2rem;
		&:hover {
			background: var(--linear-gradient_border);
		}
		& > img {
			width: 1.2rem;
			height: 1.2rem;
			aspect-ratio: 1/1;
		}
	}
}

/* Tooltip effect */
.technologies-list > li::after,
.technologies-list > li::before {
	opacity: 0;
	transition: all 0.3s ease;
}
.technologies-list > li:hover::after,
.technologies-list > li:hover::before {
	opacity: 1;
}
.technologies-list > li::after {
	content: attr(data-name);
	position: absolute;
	bottom: 120%;
	background-color: var(--color-text_high);
	color: var(--color-bg);
	padding: 0.4rem;
	font-size: 0.8rem;
	border-radius: 0.2rem;
}
.technologies-list > li::before {
	content: "";
	position: absolute;
	top: -20%; /* Change this from 'bottom' to 'top' */
	left: 50%; /* Center the arrow horizontally */
	transform: translateX(-50%); /* Adjust for perfect centering */
	border-width: 5px; /* Use a positive value */
	border-style: solid;
	border-color: rgb(255, 255, 255) transparent transparent transparent; /* This creates the downward arrow */
}
/*-----------------button------------------*/
.button {
	background: var(--linear-gradient_border);
	width: fit-content;
	padding: 1rem 2rem;
	font-size: 1.2rem;
	color: #fff;
	border: none;
	border-radius: 0.5rem;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	&:hover {
		box-shadow: -0.5rem -0.5rem 4rem 0 var(--color-secondary_shadow), 0.5rem 0.5rem 5rem 0 var(--color-primary_shadow);
		transform: scale(1.1);
	}

}
/*-----------------other-----------------*/
.devider {
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, var(--color-bg) 0%, transparent 50%, var(--color-bg) 100%), var(--linear-gradient_border);
}

.gradient-text {
	background: var(--linear-gradient_text); /* gradient color */
	-webkit-background-clip: text; /* for Chrome, Safari */
	-webkit-text-fill-color: transparent; /* make background show inside text */
	background-clip: text; /* standard */
	color: transparent; /* fallback */
}