.skill-tag {
	@apply bg-gradient-to-r from-indigo-500 to-pink-500 text-white px-4 py-2 rounded-full text-sm font-medium;
}

.timeline {
	@apply relative;
}

.timeline-item {
	display: flex;
	margin-bottom: 2rem;
	transition: background-color 0.3s;
}

.summary:hover .timeline-item {
	background-color: rgba(79, 70, 229, 0.05);
}

.timeline-left {
	width: 25%;
	text-align: right;
	position: relative;
	padding-right: 20px;
}

.timeline-right {
	width: 75%;
	padding-left: 20px;
}

.timeline-dot {
	position: absolute;
	right: -10px;
	top: 10px;
	width: 16px;
	height: 16px;
	background-color: #4F46E5;
	border-radius: 50%;
	z-index: 10;
}

.timeline::before {
	content: '';
	position: absolute;
	left: 25%;
	top: 0;
	bottom: 0;
	width: 2px;
	background-color: #4F46E5;
}

.education-list {
	@apply space-y-8;
}

.education-item {
	@apply mb-8;
}

.education-content {
	@apply p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md;
}

.details {
	@apply mt-4;
}

.expand-text, .collapse-text {
	opacity: 0;
	transition: opacity 0.3s;
}

.summary:hover .expand-text,
.summary:hover .collapse-text {
	opacity: 1;
}

.fade-in {
	animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.animate__animated {
		animation: none !important;
	}
	.fade-in {
		animation: none !important;
	}
}