body {
    padding-top: 56px; /* Adjust for fixed navbar height */
    scroll-behavior: smooth; /* Enable smooth scrolling for anchor links */
    margin: 0; /* Remove default margin */
    height: 100%; /* Ensure body takes full height */
}

#projects-section {
    padding: 2rem 0; /* Reduced padding for the outer section */
}

.project-card {
    padding: 1rem; /* Reduced padding for the inner card */
    display: inline-block; /* Makes the container only as wide as its content */
    text-align: left; /* Align text to the left */
    margin-bottom: 20px; /* Space between cards */
}

.title-divider {
    width: 500px; /* Line */
    border: 1px solid #000; /* Thicker, black line */
    margin: 1rem auto; /* Center the line */
}

h1.display-4 {
    font-weight: 400; /* Make "My Website" bolder */
}

/* Ensure html and body take full height */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Footer styling to match navbar */
footer {
    width: 100%; /* Full width like navbar */
    background-color: #212529; /* Matches navbar bg-dark */
    color: white; /* Matches navbar text color */
    padding: 1rem 0; /* Consistent padding */
    position: relative; /* Remove fixed positioning if not needed */
    bottom: 0; /* Ensure it stays at the bottom */
    text-align: left; /* left align content */
}

/* Ensure footer content spans full width */
footer .container-fluid {
    padding: 0 15px; /* Add some padding to content */
    margin: 0; /* Remove default margin */
}

/* Adjust navbar fixed-top to avoid overlap */
body {
    padding-top: 56px; /* Height of the fixed navbar */
}

/* Optional: Style the title divider */
.title-divider {
    width: 50%;
    border: 0;
    height: 2px;
    background: #333;
    margin: 20px auto;
}

/* Optional: Style project cards */
.project-card {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}