/* General Styles */
body {
    font-family: 'Poppins', sans-serif; /* Keeping Poppins as it's versatile, can adjust if RAH has a very specific font */
    line-height: 1.8;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #333333; /* Default text color */
    font-size: 16px;
}

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

/* Header - Ezzey Logo Primary */
header {
    background: #ffffff;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .header-container { /* Updated to match HTML class */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo { /* Common class for logos in header */
    max-height: 45px;
    object-fit: contain; /* Ensures logo aspect ratio is maintained */
}

#ezzey-logo {
    /* Inherits max-height from .header-logo */
    margin-right: auto; /* Pushes nav and RAH logo to the right if nav is not taking up space */
}

#raiseahood-header-logo {
    /* Inherits max-height from .header-logo */
    margin-left: auto; /* Pushes itself to the right, nav will be in middle */
}


/* Navigation - Styled to be subtle, allowing RAH branding to come through elsewhere */
header nav {
    /* flex-grow: 1; /* Allows nav to take up space if needed, or remove for compact nav */
    text-align: center; /* Centers nav links if nav itself is centered */
}

header nav a {
    color: #0A246A; /* Dark blue from RAH */
    text-decoration: none;
    margin: 0 15px; /* Adjusted margin for nav links */
    font-weight: 600;
    transition: color 0.3s ease;
}

header nav a:hover, header nav a.active {
    color: #1990B8; /* Brighter blue from RAH for hover */
}

/* Hero Section - Using RAH color for text if background image is light */
#hero {
    /* background-image is set inline in HTML */
    background-size: cover;
    background-position: center;
    color: #ffffff; /* Default white for dark backgrounds */
    text-align: center;
    padding: 80px 20px; /* Adjusted padding */
}

#hero h1 {
    font-size: 2.8rem; /* Slightly adjusted */
    margin-bottom: 20px;
    font-weight: 700;
    color: #ffffff; /* Ensure white on dark background */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Enhanced shadow for standout */
}

#hero .subtitle {
    font-size: 1.4rem;
    margin-bottom: 30px;
    font-weight: 300;
    color: #f0f0f0; /* Lighter white for subtitle */
}

.cta-button {
    background-color: #1990B8; /* RAH CTA blue */
    color: #ffffff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 1.1rem;
    display: inline-block; /* Ensure proper padding and centering */
}

.cta-button:hover {
    background-color: #13708e; /* Darker RAH CTA blue */
    transform: translateY(-2px);
}

/* Content Sections - RAH Branding */
.content-section {
    padding: 60px 0;
}

.content-section h2 {
    text-align: center;
    font-size: 2.3rem; /* Adjusted */
    color: #0A246A; /* RAH Dark Blue for headings */
    margin-bottom: 40px;
    font-weight: 700;
}

.content-section p {
    margin-bottom: 20px;
    font-size: 1.05rem; /* Adjusted */
    color: #4f4f4f; /* Slightly softer black for paragraph text */
}

.alt-bg {
    background-color: #f8f9fa; /* Light grey, common for RAH style sites */
}

/* Comparison Section */
.comparison {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    margin-bottom: 30px;
}

.model {
    background: #ffffff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    flex-basis: 48%;
    border: 1px solid #e9ecef;
}

.model h3 {
    color: #0A246A; /* RAH Dark Blue */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.model ul {
    list-style-type: none;
    padding-left: 0;
}

.model ul li {
    padding-left: 30px; /* Increased padding for icon */
    position: relative;
    margin-bottom: 12px; /* Increased spacing */
    font-size: 1rem;
}

/* Default for new model (green check) */
.model.new-model ul li::before {
    content: '\2713'; /* Checkmark */
    color: #28a745; /* Green */
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.2em;
}

/* For previous model (red x) */
.comparison .model:not(.new-model) ul li::before {
    content: '\2717'; /* X mark */
    color: #dc3545; /* Red */
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.2em;
}

/* Specifically for positive insights in the previous model (green check) */
.comparison .model:not(.new-model) ul li.positive-insight::before {
    content: '\2713'; /* Checkmark */
    color: #28a745; /* Green */
}


/* Project Grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.project-item {
    background: #ffffff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e9ecef;
}

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

.project-item h3 {
    color: #0A246A; /* RAH Dark Blue */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.25rem;
}

.optional-mvp {
    border-left: 4px solid #1990B8; /* RAH CTA Blue for highlight */
}

/* Visuals Section */
.visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    align-items: flex-start; /* Changed from start */
}

.visual-item h3 {
    text-align: center;
    color: #0A246A; /* RAH Dark Blue */
    margin-bottom: 15px;
    font-size: 1.4rem;
}
.visual-item p {
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 20px;
    color: #555;
}

.placeholder-image { /* This class is used for the charts */
    width: 100%;
    max-width: 500px; /* Slightly larger max-width for charts */
    height: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
    background-color: #f8f9fa; /* Light background for charts */
}

/* CTA Section */
.cta-section {
    text-align: center;
    background-color: #0A246A; /* RAH Dark Blue for emphasis */
    color: #ffffff;
    padding: 70px 20px;
}

.cta-section h2 {
    color: #ffffff;
    font-size: 2.2rem;
}

.cta-section p {
    color: #e0e0e0; /* Lighter text on dark background */
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* Footer */
footer {
    background: #343a40; /* Darker grey, common for footers */
    color: #f8f9fa;
    text-align: center;
    padding: 30px 0;
}

footer .container { /* Ensure this doesn't conflict with general .container if RAH logo is large */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;
    gap: 15px; /* Space between logo and text */
}

#raiseahood-footer-logo {
    max-height: 60px; /* Adjust as needed */
    margin-bottom: 10px;
}

footer p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 992px) { /* Adjusted breakpoint for better nav handling */
    header .header-container {
        flex-wrap: wrap; /* Allow wrapping for smaller screens */
        justify-content: center; /* Center items when wrapped */
    }
    #ezzey-logo {
        margin-bottom: 10px; /* Space below Ezzey logo when nav wraps */
    }
    header nav {
        order: 3; /* Nav comes last in mobile view if wrapped */
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }
    header nav a {
        margin: 0 10px; /* Adjust nav link margin for mobile */
        display: inline-block; /* Ensure they flow correctly */
        padding: 5px 0;
    }
    #raiseahood-header-logo {
        order: 2; /* RAH logo can be before nav in mobile if desired, or adjust */
        margin-bottom: 10px; /* Space below RAH logo when nav wraps */
    }
}

@media (max-width: 768px) {
    /* Keep existing 768px rules, or merge if 992px covers them */
    #hero h1 {
        font-size: 2rem;
    }
    #hero .subtitle {
        font-size: 1.1rem;
    }
    .content-section h2 {
        font-size: 1.8rem;
    }
    .comparison {
        flex-direction: column;
    }
    .project-grid {
        grid-template-columns: 1fr; /* Stack project items */
    }
    .visual-grid {
        grid-template-columns: 1fr; /* Stack visual items */
    }
    header .header-container {
        /* Already centered by 992px rule, can add more specific if needed */
    }
    #ezzey-logo, #raiseahood-header-logo {
        max-height: 40px; /* Slightly smaller logos on very small screens */
    }
}