/* --- Base Reset and Setup --- */
:root {
    --color-brand-deep: #004C99; /* Deep Blue from Logo - for primary buttons/accents */
    --color-brand-bright: #007bff; /* Bright Blue - for main links and buttons */
    --color-dark: #333;
    --color-light: #f8f8f8; /* Very light gray for subtle contrast sections */
    --color-background-footer: #1a1a1a; /* Near-black for footer */
    --font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body: 'Arial', sans-serif;
}

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

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-dark);
}

.container {
    width: 85%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
}

/* --- Typography --- */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    margin-bottom: 1rem;
    line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }

.lead-text {
    font-size: 1.25rem;
    font-weight: 400;
    color: #555;
    margin-bottom: 2rem;
}

/* --- Buttons and Links --- */
.btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for lift */
}

/* All buttons now use the bright blue color */
.btn-primary, .btn-secondary {
    background: var(--color-brand-bright);
    color: white;
}

.btn-primary:hover, .btn-secondary:hover {
    background-color: var(--color-brand-deep); /* Darken on hover */
    opacity: 1;
}

a {
    color: var(--color-brand-deep);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- Header / Hero Section (LIGHT MODE) --- */
.hero {
    background: white; 
    color: var(--color-dark); 
    padding: 6rem 0 2rem 0;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.hero img.logo-img {
    width: 100%; /* Default to full container width for responsiveness */
    max-width: 450px; /* Cap size for desktop */
    height: auto;
    margin-bottom: 1rem; /* Reduced padding below logo */
}

/* Mobile-specific logo fix (shrinks logo down on small screens) */
@media (max-width: 768px) {
    .hero img.logo-img {
        max-width: 90%;
    }
}

.hero h2 {
    color: var(--color-dark); 
    font-size: 1.7rem;
    font-weight: 400;
    margin-bottom: 2rem;
}

.hero p {
    color: #555; 
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 2.5rem auto;
}

/* --- General Section Styling --- */
.section {
    padding: 2rem 0;
    text-align: center;
}

.section-alt {
    background: var(--color-light);
}

/* --- Service Grid (Service Cards Section) --- */
.service-grid {
    display: flex; /* SWITCHED TO FLEXBOX */
    flex-wrap: wrap; /* Allows items to wrap */
    justify-content: center; /* Centers items horizontally, even when wrapped */
    gap: 2rem;
    margin-top: 2rem;
    /* Removed justify-content: center: It works better with flexbox now */
}

.service-card {
    background: white;
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-top: 5px solid var(--color-brand-deep);
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s;
    flex: 0 0 300px; /* Ensure a minimum size for the card */
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.service-card h4 {
    color: var(--color-dark);
    margin-bottom: 0.5rem;
    text-align: center; 
}

/* NEW FIX: Ensure body text in service cards is left-aligned */
.service-card p {
    text-align: left; 
}


/* --- NEW: Expertise Section Styling --- */

.section-expertise {
    background: white; /* Maintain white background for this section */
}

.expertise-grid {
    display: flex; /* SWITCHED TO FLEXBOX */
    flex-wrap: wrap; /* Allows items to wrap */
    justify-content: center; /* Centers items horizontally, even when wrapped */
    gap: 2.5rem;
    margin-top: 2rem;
}

.expertise-card {
    padding: 0;
    flex: 0 0 300px; /* Ensure a minimum size for the card */
    max-width: 400px; /* Prevent it from getting too wide on desktop when 1 or 2 are present */
    text-align: left; /* Ensure list text remains left-aligned */
}

.expertise-card h4 {
    color: var(--color-brand-deep);
    font-size: 1.3rem;
    border-bottom: 2px solid var(--color-light); 
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: center; 
}

.expertise-card ul {
    list-style: none;
    padding-left: 0;
    font-size: 0.95rem;
}

.expertise-card ul li {
    margin-bottom: 0.75rem;
    line-height: 1.4;
    color: var(--color-dark);
}

.expertise-card ul li strong {
    color: var(--color-brand-deep); /* Highlight key terms in brand color */
}


/* --- Footer / Contact Section --- */
footer {
    background: var(--color-background-footer);
    color: white;
    padding: 2rem 0;
    text-align: center;
}

footer h3 {
    color: white;
    margin-bottom: 1.5rem;
}

/* FIX: Ensure the lead text is readable on the dark footer */
footer .lead-text { 
    color: white; 
    margin-bottom: 1.5rem;
}

.email-address {
    margin-top: 2rem; /* Increased space above the email button */
    font-size: 0.95rem;
}

.email-address a {
    color: white; /* Ensure link color is white/readable on dark background */
    text-decoration: underline;
}

.contact-btn {
    margin-bottom: 1.5rem;
}

.copyright {
    margin-top: 2rem;
    font-size: 0.8rem;
    color: #aaa;
}