/* Styles for Projects Page */

/* General body background - adjust if needed from global styles */
/* body {
    background-color: #f0f4f8;
} */
/* Basic Reset & Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f0f4f8; /* Overall page background */
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* === HEADER STYLES === */
header {
    background-color: #0f2136; /* Dark blue */
    color: #fff;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

header nav ul {
    display: flex;
    list-style: none;
}

header nav ul li {
    margin-left: 20px;
}

header nav ul li a {
    color: #e0e0e0;
    padding: 5px 10px;
    text-decoration: none;
    transition: color 0.3s ease;
}

header nav ul li a:hover,
header nav ul li a.active { /* Style for the active link */
    color: #fff;
    font-weight: 500;
}

.theme-toggle i {
    font-size: 1.2rem;
    cursor: pointer;
    color: #e0e0e0;
}
.theme-toggle i:hover {
    color: #fff;
}

.projects-page-content {
    padding-top: 40px;
    padding-bottom: 60px;
    background-color: #ffffff; /* White background for the main projects content area */
}

#projects-intro {
    text-align: left; /* As per the image */
    margin-bottom: 40px;
    padding: 20px 0 0 0; /* Less padding at the bottom of intro */
}

#projects-intro h1 {
    font-size: 2.5rem; /* Slightly smaller than other page main H1s potentially */
    color: #0f2136;
    margin-bottom: 8px;
}

#projects-intro .subtitle {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0; /* Remove auto margin for left alignment */
}

#project-list {
    padding-top: 20px;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

@media (min-width: 1024px) { /* Explicitly 3 columns for wider screens */
    .project-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 768px) and (max-width: 1023px) { /* 2 columns for tablets */
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


.project-showcase-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* To make image corners round */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-showcase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.project-showcase-card img {
    width: 100%;
    height: 220px; /* Adjust as needed */
    object-fit: cover;
    display: block;
}

.project-showcase-card .card-content {
    padding: 20px 25px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows buttons to stick to bottom if description is short */
}

.project-showcase-card h3 {
    font-size: 1.35rem;
    color: #0f2136;
    margin-bottom: 10px;
}

.project-showcase-card p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Pushes technologies and buttons down */
}

.project-showcase-card .technologies {
    margin-bottom: 20px;
}

.project-showcase-card .technologies h4 {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 8px;
    font-weight: 600;
}

.tech-tag {
    display: inline-block;
    background-color: #e9ecef; /* Light grey background for tags */
    color: #495057; /* Darker grey text */
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 12px; /* Pill shape */
    margin-right: 6px;
    margin-bottom: 6px;
    font-weight: 500;
}

.project-buttons {
    display: flex;
    gap: 15px; /* Space between buttons */
    margin-top: auto; /* Pushes buttons to the bottom of the card content area */
}

.btn-project-primary, .btn-project-secondary {
    flex-grow: 1; /* Make buttons share space equally */
    text-align: center;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    display: inline-flex; /* For icon alignment */
    align-items: center;
    justify-content: center;
}
.btn-project-primary i, .btn-project-secondary i {
    margin-right: 8px;
}

.btn-project-primary {
    background-color: #3D90D7; /* Orange */
    color: #fff;
    border: 1px solid #3D90D7;
}
.btn-project-primary:hover {
    background-color: #0118D8;
    transform: translateY(-1px);
}

.btn-project-secondary {
    background-color: #fff;
    color: #0f2136; /* Dark blue text */
    border: 1px solid #0f2136; /* Dark blue border */
}
.btn-project-secondary:hover {
    background-color: #f0f4f8; /* Light hover for secondary */
    transform: translateY(-1px);
}

/* Ensure global Header & Footer styles are present in style.css */
/* (Already provided in previous full code example, ensure they are included) */

/* Example: If you also want the general .btn styles to be different from project buttons,
   you can be more specific or adjust those global .btn styles if project buttons are the primary use.
   The provided .btn-project-primary/secondary should override general .btn if selector specificity is same or higher.
*/

/* === FOOTER STYLES === */
footer {
    background-color: #0f2136; /* Dark blue */
    color: #adb5bd; /* Lighter text color for footer */
    padding-top: 50px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #2c3e50; /* Slightly lighter border */
}

.footer-about h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.3rem;
}
.footer-about p {
    font-size: 0.9rem;
    line-height: 1.7;
}

.footer-links h4, .footer-connect h4 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.footer-links ul {
    list-style: none;
}
.footer-links ul li {
    margin-bottom: 8px;
}

.footer-links ul li a {
    color: #adb5bd;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: #fff;
}

.social-icons a {
    color: #adb5bd;
    font-size: 1.3rem;
    margin-right: 15px;
    transition: color 0.3s ease;
    text-decoration: none;
}

.social-icons a:hover {
    color: #3D90D7; /* Orange on hover for social icons */
}
.social-icons a:last-child {
    margin-right: 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    font-size: 0.85rem;
}
.footer-bottom p {
    margin: 0;
}

/* Responsive adjustments for Header/Footer - (You might have more detailed ones) */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        align-items: flex-start;
    }
    header nav ul {
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
        padding-left: 0;
    }
    header nav ul li {
        margin-left: 0;
        margin-bottom: 5px;
        width: 100%;
    }
    header nav ul li a {
        display: block;
        padding: 8px 0;
    }
    .theme-toggle {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-about, .footer-links, .footer-connect {
        margin-bottom: 20px;
    }
    /* .social-icons {
        justify-content: center; No, they are inline-block and center via text-align of parent
    } */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .footer-bottom p {
        margin-bottom: 5px;
    }
}