/* ======================== */
/* General Reset & Basics   */
/* ======================== */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    background-color: #ecf0f1; /* Light gray background */
    color: #2c3e50;           /* Dark navy text */
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ======================== */
/* Header (Navbar)          */
/* ======================== */
.navbar {
    background-color: #2c3e50; /* Dark navy */
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 999;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

/* Profile + Title Wrapper */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Profile Image */
.profile-pic {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.logo a {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    /* Removed uppercase transform */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.nav-links li a:hover {
    color: #3498db; /* Accent Blue */
}

/* ======================== */
/* Main Content             */
/* ======================== */
main {
    padding: 60px 0;
    text-align: center;
}

main h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 20px;
    font-weight: 700;
}

main p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
}

/* ======================== */
/* Footer                   */
/* ======================== */
footer {
    background-color: #2c3e50; /* Dark navy, matches header */
    color: #fff;
    padding: 40px 0;
    margin-top: 50px;
    text-align: center;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-title {
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-links {
    list-style: none;
    display: flex;
    gap: 30px;
    padding: 0;
    margin: 0;
}

.footer-links li {
    display: flex;
    align-items: center;
}

.footer-links a {
    color: #3498db; /* Accent Blue */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

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

/* Social Icon */
.social-icon {
    width: 24px;
    height: 24px;
    transition: filter 0.3s ease;
}

.social-icon:hover {
    filter: brightness(0.8);
}


/* 
   Projects Section Styles
   Make sure these selectors aren't overridden elsewhere. 
   If you have existing styles, remove or comment them out 
   so there's no conflict.
*/

/* Container around the grid */
.projects-section {
    padding: 40px 0;
}

/* Page title for the Projects page */
.projects-section h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
}

/* The responsive grid */
.projects-grid {
    display: grid;
    /* At minimum, each card is 250px wide; it expands if space allows */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* The card holding each project */
.project-card {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: visible;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

/* Hover effect: lifts the card slightly */
.project-card:hover {
    transform: translateY(-5px);
}

/* The project image is constrained to a set height */
.project-img {
    width: 100%;
    height: 180px;      /* Adjust as desired (e.g. 200px, 150px) */
    object-fit: cover;  /* Crops the image if it's too large */
    display: block;
}

/* Title inside the card */
.project-card h3 {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.2rem;
    color: #2c3e50;
}

/* Description text */
.project-card p {
    margin: 0 10px 15px;
    font-size: 1rem;
    color: #555;
}

/* "View Details" button/link */
.btn-project {
    margin-top: auto;     /* Pushes the button to the bottom if the card grows */
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #3498db; /* Accent color */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.3s;
    align-self: center;
}

.btn-project:hover {
    background-color: #2980b9;
}

.project-section {
    margin-bottom: 2rem;

}

.project-section p {
    text-align: left !important;
}


.project-section h2 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* Existing CSS omitted for brevity... */

/* Base grid styling */
.photo-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

/* Specific utility classes for rows/columns */
.photo-grid--2x4 {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
}

.photo-grid--2x3 {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(3, 1fr);
}


.photo-grid--1x2 {
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(2, 1fr);
}

.photo-grid--1x3 {
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(3, 1fr);
}

.photo-grid--1x4 {
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(4, 1fr);
}

/* Ensure each image is a square */
.photo-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;  /* Makes each image square */
    object-fit: cover;     /* Crops edges for non-square original aspect ratios */
    border-radius: 4px;
}

/* If you want only *exactly* 2 rows no matter how many images,
   you could also do something like: 
   grid-template-rows: repeat(2, 1fr);
   ...but typically you'd let it auto-flow to another row if there's more than 8 images.
*/

/* Single photo styling remains as is. */
.photo-grid.single-photo img {
    width: auto;
    height: auto;
    aspect-ratio: unset; /* Remove aspect-ratio so it doesn't force a square */
    object-fit: contain;
    max-width: 100%;
    margin: 0 auto;
}

/* Style for each figure within the photo grid */
.photo-grid figure {
    margin: 0;               /* Reset default margin */
    text-align: center;      /* Center the image and caption */
}

/* Style for the image caption */
.photo-grid figcaption {
    margin-top: 0.5rem;      /* Space between the image and caption */
    font-size: 0.9rem;       /* Adjust font size as needed */
    color: #2c3e50;          /* Match your text color */
}

.model-steps {
    text-align: left;
    max-width: 800px;
    margin: 20px auto;
    padding-left: 20px;
}

.model-steps li {
    margin-bottom: 15px;
    line-height: 1.6;
}

.model-tables {
    max-width: 800px;
    margin: 2rem auto;
    text-align: left;
}

.model-tables h2,
.model-tables h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.example-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.example-table th,
.example-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.example-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: left;
}

ol, ul {
    text-align: left;
}