body {
    font-family: 'Inter', sans-serif;
}

/* Header Styling */
#header.scrolled {
    @apply bg-white/80 backdrop-blur-sm shadow-lg;
}

/* Navigation Links */
.nav-link {
    @apply text-slate-600 font-medium relative transition-colors duration-300;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    @apply bg-blue-600 transition-all duration-300;
}
.nav-link:hover::after {
    width: 100%;
}
.mobile-nav-link {
    @apply block py-3 px-6 text-sm font-medium text-slate-700 hover:bg-slate-100 transition-colors duration-300;
}

/* Main CTA Button */
.cta-button {
    @apply bg-blue-600 text-white font-semibold px-8 py-4 rounded-lg shadow-lg transform hover:-translate-y-1 transition-all duration-300;
    @apply hover:bg-blue-700 hover:shadow-xl;
}

/* Section Heading */
.section-heading {
    @apply text-3xl md:text-4xl font-bold text-slate-800 text-center mb-16 relative;
}
.section-heading::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 3px;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    @apply bg-blue-500 rounded-full;
}

/* Experience Timeline */
.timeline-item::before {
    content: '';
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    left: -0.7rem;
    top: 0;
    @apply bg-slate-100 border-4 border-blue-500 rounded-full;
    z-index: 1;
}

/* Project Card */
.project-card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 h-full flex flex-col;
    @apply transform hover:-translate-y-2 hover:shadow-2xl;
}
.project-card-content {
    @apply p-6 flex flex-col flex-grow;
}

/* Skills Section */
.skill-category-title {
    @apply text-xl font-bold text-slate-800 mb-4 border-b-2 border-blue-200 pb-2;
}
.skill-badge {
    @apply bg-slate-200 text-slate-700 text-sm font-medium px-4 py-2 rounded-md transition-all duration-300;
    @apply hover:bg-blue-500 hover:text-white;
}

/* Social Links */
.social-link {
    @apply text-slate-500 transition-all duration-300 transform hover:-translate-y-1 hover:text-blue-600;
}