.portfolio-container {

	margin-top: 10px;

	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

	width: 100%;

	gap: 20px;

}

.portfolio-item {

	width: 400px;

	display: flex;

	align-items: center;

	margin-bottom: 10px;

	justify-self: center;

	overflow: hidden;

	border-radius: 8px;

	transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;

	position: relative;

}



.portfolio-item::before {

	content: '';

	position: absolute;

	top: 0;

	left: -100%;

	width: 100%;

	height: 100%;

	background: linear-gradient(90deg, transparent, rgba(0, 119, 229, 0.3), transparent);

	transition: left 0.5s ease;

	z-index: 1;

}



.portfolio-item:hover::before {

	left: 100%;

}



.portfolio-item:hover {

	transform: translateY(-10px) scale(1.02) rotate(1deg);

	box-shadow: 0 10px 30px rgba(0, 119, 229, 0.5);

	filter: brightness(1.1);

}

.portfolio-item img {

	width: 400px;

	display: flex;

	align-items: center;

	margin-bottom: 10px;

	transition: transform 0.5s ease;

}

.portfolio-item:hover img {

	transform: scale(1.1);

}

.portfolio-description {

	width: 90%;

	text-align: center;

	font-style: italic;

	margin-bottom:150px;

	margin-top: 20px;

}

.title_portfolio {

	font-size: 2.5em;

	text-align: center;

	display: block;

	padding-bottom: 20px;

	font-family: STIX Two Text;

	color: #9c9effb2;

	font-weight: bold;

	margin-top: 50px;

	position: relative;

	transition: transform 0.3s ease, color 0.3s ease;

}



.title_portfolio::after {

	content: '';

	position: absolute;

	bottom: 10px;

	left: 50%;

	transform: translateX(-50%);

	width: 0;

	height: 3px;

	background: linear-gradient(to right, transparent, #0077E5, transparent);

	transition: width 0.5s ease;

}



.title_portfolio:hover::after {

	width: 300px;

}



.title_portfolio:hover {

	transform: scale(1.05);

	color: #0077E5;

}