/*
    -------------------------------------------
    1. RESET AND GLOBAL STYLES
    -------------------------------------------
*/
:root {
    /* Define colors for easy maintenance */
    --color-background: #f4f1ea; 
    --color-primary-text: #001ecb; 
    --color-accent-blue: #001ecb; 
    --color-light-text: #333;
    
    /* Font Stack - Use a professional, readable sans-serif */
    --font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-background);
    color: var(--color-primary-text);
    line-height: 1.6; /* Improves readability */
}

/* Base Typography */
h1, h2, h3, h4 {
    color: var(--color-accent-blue);
    margin-bottom: 0.5em;
    font-weight: 700; /* Bold for hierarchy */
}

p, ul, li {
    color: var(--color-light-text); /* Use a softer dark color for body text */
}

a {
    text-decoration: none;
    color: var(--color-accent-blue);
    transition: color 0.3s ease;
}

a:hover {
    color: #000d6b; /* Slightly darker blue on hover */
}

/*
    -------------------------------------------
    2. HEADER AND NAVIGATION STYLES
    -------------------------------------------
*/
header {
    background-color: var(--color-background); /* Match body background */
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--color-accent-blue);
}

.logo h1 {
    font-size: 1.5em;
    margin: 0;
}

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

nav li {
    margin-left: 25px;
}

nav a {
    font-weight: 500;
    padding-bottom: 5px;
}

nav a.active {
    border-bottom: 2px solid var(--color-accent-blue);
}

/*
    -------------------------------------------
    3. MAIN CONTENT LAYOUT AND HERO SECTION
    -------------------------------------------
*/
main {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    padding: 40px 0;
}

#hero {
    padding: 60px 0;
    text-align: left;
}

#hero h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

#hero p {
    font-size: 1.2em;
    margin-bottom: 30px;
    max-width: 600px;
}

.cta-button {
    display: inline-block;
    background-color: var(--color-accent-blue);
    color: var(--color-background); /* White text on blue button */
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.cta-button:hover {
    background-color: #000d6b; 
    color: var(--color-background); 
}

/*
    -------------------------------------------
    4. FEATURED WORK (CASE STUDY GRID)
    -------------------------------------------
*/
#featured-work {
    padding: 40px 0;
}

#featured-work h3 {
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 40px;
}

/* Grid layout for featured projects */
.case-study-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr; /* Default to 1 column for mobile */
}

/* Apply the grid wrapper to the section if possible, 
   but since your HTML just has the cards inside, 
   we'll apply these styles directly to the section and cards for now. 
   (Note: For better structure, consider wrapping the articles in a <div> with a class like .case-study-grid)
*/

@media (min-width: 768px) {
    #featured-work {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet/desktop */
        gap: 40px;
    }
}


.case-study-card {
    background-color: #fff; /* White background for the card */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 30, 203, 0.1); /* Subtle blue shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-study-card:hover {
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 8px 15px rgba(0, 30, 203, 0.15);
}

.case-study-card h4 {
    font-size: 1.4em;
    margin-top: 0;
}

.project-summary {
    color: var(--color-light-text);
    margin: 15px 0;
}

.study-link {
    font-weight: 600;
    white-space: nowrap; /* Keep the arrow and text together */
}

/*
    -------------------------------------------
    5. FOOTER STYLES
    -------------------------------------------
*/
footer {
    padding: 25px 5%;
    text-align: center;
    border-top: 1px solid rgba(0, 30, 203, 0.1);
    background-color: #f0ede5; /* Slightly darker shade of background for contrast */
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

footer p {
    margin-bottom: 10px;
    font-size: 0.9em;
}

.contact-links a {
    margin: 0 10px;
}

/* Remove the <hr> tags from your HTML for a cleaner look,
   as we are using CSS borders for separation. */
hr {
    display: none;
}
/* General Rule */
p, ul, li {
    color: var(--color-light-text); /* #333 */ 
}