/* General Body and Base Styles (Updated) */
body {
    margin: 0;
    /* Add Flexbox properties for sticky footer */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Set minimum height to 100% of the viewport height */
    
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f7f6;
}

/* Container for Centering Content */
.container {
    max-width: 1200px;
    margin: 0 auto;
    /* Adjusted padding for smaller screens (less horizontal space needed) */
    padding: 0 15px; 
}

/* Header Styling */
header {
    background-color: #2c3e50; /* Dark blue/grey */
    color: white;
    padding: 20px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

header h1 {
    margin: 0;
    /* Adjusted font size for better mobile display */
    font-size: 2em; 
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
}

/* Navigation Styling */
nav ul.main-nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* Use Flexbox for navigation */
    justify-content: center;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    /* Add a little top margin to separate from the header on smaller screens */
    margin-top: 10px; 
}

nav ul.main-nav li {
    /* Reduced margin for closer links on mobile */
    margin: 5px 8px; 
}

nav ul.main-nav li a {
    display: block;
    color: white;
    text-decoration: none;
    /* Slightly reduced padding for a more compact link */
    padding: 8px 12px; 
    transition: background-color 0.3s ease, border-radius 0.3s ease;
    border-radius: 5px;
    /* Smaller font size on mobile */
    font-size: 0.9em; 
}

nav ul.main-nav li a:hover,
nav ul.main-nav li a:focus {
    background-color: #34495e; /* Slightly lighter dark blue/grey */
}

nav ul.main-nav li a[aria-current="page"] {
    background-color: #1a50bc; /* Teal for the current page */
    font-weight: bold;
}

/* Section and Heading Styles */
section {
    /* Reduced top/bottom padding for less whitespace on mobile */
    padding: 40px 0; 
    text-align: center;
}

section:nth-of-type(even) {
    background-color: #ecf0f1; /* Light grey background for alternating sections */
}

h2 {
    /* Adjusted font size for mobile */
    font-size: 1.8em; 
    margin-bottom: 20px; /* Reduced bottom margin */
    color: #2c3e50;
    position: relative;
    padding-bottom: 10px;
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px; /* Shorter underline */
    height: 3px;
    background-color: #1a50bc; /* Teal underline */
}


/* Portfolio Section Styling */
.portfolio-grid {
    /* Sets up a grid for portfolio items */
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 20px; /* Reduced gap */
    margin-top: 20px; /* Reduced margin */
}

.portfolio-item {
    background-color: white;
    padding: 20px; /* Reduced padding */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.portfolio-item h3 {
    color: #2c3e50;
    font-size: 1.3em; /* Smaller heading */
    margin-bottom: 10px; /* Reduced margin */
}

.portfolio-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px; /* Reduced margin */
    border-radius: 5px;
}

.portfolio-item p {
    flex-grow: 1;
    margin-bottom: 15px; /* Reduced margin */
    font-size: 0.95em; /* Slightly smaller text */
}

/* --- Button Styles --- */
.view-button {
    display: inline-block;
    padding: 8px 16px; /* Reduced button padding */
    background-color: #1a50bc;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.9em; /* Smaller button text */
}

.view-button:hover,
.view-button:focus {
    background-color: #0d367a;
}

/* ----------------------------------------
 * FOOTER STYLING (The missing code!)
 * ----------------------------------------
 */
footer {
    /* Set background color to match the header's dark blue/grey */
    background-color: #2c3e50; 
    color: white; /* Set text color to white */
    padding: 20px 0; /* Add vertical padding */
    text-align: center; /* Center all content */
    border-top: 3px solid #1a50bc; /* Optional: Use the teal accent color for a top border */
}

/* Style the copyright text */
footer p {
    margin: 0 0 10px 0;
    font-size: 0.9em;
}

/* Style the link container */
.footer-links ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; /* Display links side-by-side */
    justify-content: center;
    flex-wrap: wrap;
}

.footer-links li {
    margin: 0 10px;
}

/* Style the footer links */
.footer-links li a {
    color: #bdc3c7; /* Light grey for subtle contrast */
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.9em;
}

.footer-links li a:hover {
    color: #ffffff; /* Turn white on hover */
    text-decoration: underline;
}

/* * ----------------------------------------
 * MOBILE-SPECIFIC MEDIA QUERIES (Combined and Corrected)
 * ----------------------------------------
 */

/* For extra small screens (less than 480px) */
@media (max-width: 480px) {
    header h1 {
        font-size: 1.8em;
    }

    nav ul.main-nav {
        /* On very small screens, make links take up the full width to tap easily */
        flex-direction: column;
        align-items: center;
    }

    nav ul.main-nav li {
        width: 90%; /* Make list item wider */
        margin: 5px 0; /* Add top/bottom margin */
    }

    nav ul.main-nav li a {
        padding: 10px;
        text-align: center;
        width: 100%;
    }

    /* Force the portfolio grid to stack items on top of each other */
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    section {
        padding: 30px 0;
    }
    
    /* Footer Mobile Styles (Moved here for consistency) */
    .footer-links ul {
        flex-direction: column; /* Stack links vertically */
        align-items: center;
    }
    .footer-links li {
        margin: 5px 0;
    }
}