styles.css

html,body{font-family:"Space Grotesk",system-ui,ui-sans-serif,sans-serif}
.object-fit-cover{object-fit:cover}
.text-shadow{ text-shadow:0 2px 20px rgba(0,0,0,.45) }
.badge-pill{background:rgba(17,147,212,.12);border:1px solid rgba(17,147,212,.18);color:#123;padding:.75rem 1rem;border-radius:12px;font-weight:600}
.navbar.scrolled{backdrop-filter:blur(8px); box-shadow:0 2px 12px rgba(0,0,0,.06)}
.nav-link.active{color:var(--bs-primary)!important; font-weight:600}
.portfolio-card img{object-fit:cover; aspect-ratio:4/3}
.card{border-radius:12px; box-shadow:0 8px 30px rgba(2,12,27,.08)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.animate-fade-in-up{animation:fadeInUp .6s ease both}