.portfolio-section {
padding: 4rem 0;
}

.portfolio-nav {
display: flex;
justify-content: start;
margin-bottom: 3rem;
padding-bottom: 1rem;
border-bottom: 1px solid #dee2e6;
}

/* --- NEW: SCROLLABLE NAVIGATION ON MOBILE --- */
@media (max-width: 767.98px) {
.portfolio-nav {
    justify-content: flex-start; /* Align items to the left for scrolling */
    overflow-x: auto; /* Enable horizontal scrolling */
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.portfolio-nav::-webkit-scrollbar {
    display: none;
}
}

.portfolio-nav .nav-link {
/* Darker grey for inactive links */
color: rgba(0,0,0,0.85); 
font-weight: 500;
padding: 0.5rem 1.5rem;
margin: 0 0.5rem;
position: relative;
text-decoration: none;
transition: color 0.3s ease;
}

.portfolio-nav .nav-link:hover {
color: #1E3D82; /* Blue on hover */
}

/* Active link is now blue */
.portfolio-nav .nav-link.active-link {
color: #1E3D82;
}

/* Underline is now blue */
.portfolio-nav .nav-link.active-link::after {
content: '';
position: absolute;
bottom: -1rem;
left: 1.5rem;
right: 1.5rem;
height: 0.125rem; /* 2px -> rem */
background-color: #1E3D82;
}

/* --- NEW: CARD HOVER STYLES --- */
.project-card {
margin-bottom: 2rem;
position: relative; /* Needed for the overlay */
overflow: hidden; /* Hide the overlay initially */
border-radius: 0.5rem; /* Apply radius to the main card */
}

.project-card img {
width: 100%;
height: 15.625rem; /* 250px -> rem */
object-fit: cover;
display: block;
/* No transition on the image itself anymore */
}

.project-card .card-body {
position: relative;
padding: 0;
overflow: hidden;
}

.project-card .card-title {
position: relative;
z-index: 2;
font-size: 1.5rem;
font-weight: 500;
color: #343a40;
margin: 0;
padding: 2rem 1.5rem;
transition: color 0.3s ease;
}

/* The blue overlay */
.project-card .overlay {
position: absolute;
inset: 0;
background-color: #1E3D82;
color: white;
display: flex;
align-items: end;
justify-content: end;
padding: 1.75rem 1.5rem;
transform: translateY(100%);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 1;
will-change: transform;
}

.project-card:hover .overlay,
.project-card:focus-within .overlay {
transform: translateY(0); /* Slide up on hover */
}

.project-card .overlay .overlay-text {
display: none;
}

.project-card .overlay .arrow-icon {
font-size: 1.5rem;
}

.project-card:hover .card-title,
.project-card:focus-within .card-title {
color: #ffffff;
}

.project-category {
display: none;
}

.project-category.active-category {
display: flex;
}

/* --- NEW: SPEED UP ANIMATIONS --- */
/* This targets all animated elements and sets their duration to 0.5s */
.animate__animated {
--animate-duration: 0.5s;
}

.portfolio-nav .nav-link {
    font-size: 1.5rem !important;
    letter-spacing: 1px;
}