/* --- Gallery Tabs --- */
.masonary-menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.masonary-menu button { background: transparent; border: none; color: #444; font-size: 16px; font-weight: 500; padding: 8px 24px; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; }
.masonary-menu button.active, .masonary-menu button:hover { background-color: var(--color-2); color: #ffffff; }

/* --- Project Card --- */
.project-card { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1 / 1; background-color: #f8f8f8; display: block; }
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

/* --- Hover Overlay --- */
.project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #191917de; display: flex; align-items: flex-end; padding: 30px; opacity: 0; transition: all 0.4s ease-in-out; }
.project-content { transform: translateY(20px); transition: transform 0.4s ease-in-out; }
.project-category { display: block; color: var(--color-3); font-size: 16px; font-weight: 500; margin-bottom: 5px; }
.project-title { color: #ffffff; font-size: 22px; font-weight: 700; margin-bottom: 15px; }
.read-more { color: #ffffff; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: color 0.3s ease; }

/* --- Animations --- */
.project-card:hover img { transform: scale(1.05); }
.project-card:hover .project-overlay { opacity: 1; }
.project-card:hover .project-content { transform: translateY(0); }
.project-overlay:hover .read-more { color: var(--color-3); }