:root { --primary: #2c3e50; --secondary: #f8f9fa; --accent: #27ae60; --text: #333; --light-text: #6c757d; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f7fa; color: var(--text); margin: 0; padding: 0; } .navbar { background-color: var(--primary); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .navbar-brand { font-weight: 700; font-size: 1.5rem; } a{ text-decoration: none; color: var(--text); } .portfolio-card { background: #fff; border: 1px solid #ddd; padding: 15px; margin-bottom: 20px; border-radius: 5px; transition: box-shadow 0.3s ease; } .portfolio-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .portfolio-card h6 { margin-bottom: 4px; font-weight: 600; } .portfolio-card small { color: #888; } .sidebar { position: sticky; top: 20px; } .sidebar .card { background: #fff; border: 1px solid #ddd; margin-bottom: 20px; padding: 1.5rem 1rem; } .sidebar .card img { width: 100px; height: 100px; object-fit: contain; margin: 0 auto 15px; display: block; border-radius: 50%; } .badge-icon { font-size: 24px; margin: 0 5px; } footer { background: #343a40; color: #fff; text-align: center; padding: 20px 0; margin-top: 40px; } /* Responsive tweaks */ @media (max-width: 767.98px) { .portfolio-card { flex-direction: column !important; align-items: flex-start !important; } .portfolio-card > div:last-child { margin-top: 10px; font-size: 1.1rem; } .sidebar { position: static; margin-top: 40px; } .sidebar .card { padding: 1rem; } }