* ======================================
   Base styles
====================================== */
:root {
    --bs-body-bg: #2c2c2c;
    --bs-body-color: #f8f9fa;
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #2c2c2c;
    color: #f8f9fa; /* Light text for readability */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
    padding: 2rem 1rem;
}

/* ======================================
   Header / Navbar tweaks
====================================== */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.navbar .nav-link {
    color: #f8f9fa; /* Ensure nav links are visible */
}

.navbar .nav-link.active {
    text-decoration: underline;
    font-weight: bold;
}

.navbar .nav-link:hover {
    color: #ffc107; /* Bootstrap warning color for hover highlight */
}

/* ======================================
   Footer
====================================== */
footer {
    flex-shrink: 0;
    background: #343a40; /* Dark gray, same tone as navbar */
    color: #f8f9fa;
    border-top: 1px solid #444;
}

footer p {
    margin: 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer img {
    margin-left: 0.3rem;
}

/* ======================================
   Projects page cards
====================================== */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.project-card {
    background: #3c3f44; /* Slightly lighter than page background */
    color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.45);
}

.transparent-box {
    background-color: rgba(33, 37, 41, 0.85); /* Bootstrap dark with 85% opacity */
}
.transparent-box {
    position: relative;
}

.project-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 20;
}
/* ======================================
   Links
====================================== */
a {
    color: #0d6efd; /* Bootstrap primary color */
}

a:hover {
    text-decoration: underline;
}

/* ======================================
   Responsive tweaks
====================================== */
@media (max-width: 576px) {
    main {
        padding: 1rem;
    }
}

/* Zoom effect for profile picture */
.profile-pic {
    transition: transform 0.3s ease;
}

.profile-pic:hover {
    transform: scale(1.1); /* Zoom in slightly on hover */
}

/* Hero section styling */
.hero-section {
    background: linear-gradient(135deg, #1f1f1f, #2c2c2c); /* dark gradient */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.hero-section p, .hero-section h1 {
    color: #f8f9fa; /* Ensure text is readable on dark bg */
}

/* Profile picture hover zoom */
.profile-pic {
    transition: transform 0.3s ease;
}

.profile-pic:hover {
    transform: scale(1.1);
}

/* Hero box animation */
.hero-box {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards;
    animation-delay: 0.2s;
}

/* Project box hover scale */
.hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* Fade-in animation */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.project-row .row > div > .bg-dark {
    background-color: #1c1c1c; /* slightly darker than default bg-dark */
}
/* Alternate spacing for left/right boxes */
.project-row .row:nth-child(even) {
    flex-direction: row-reverse;
}

.project-img {
    max-height: 180px; /* adjust as you like */
    width: auto;       /* keeps proportions */
    object-fit: contain;
}