/* css/pychemengg.css */

.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
}

/* --- Intro Section (Text + Code Snippet) --- */
.intro-section {
    display: flex;
    gap: 30px;
    align-items: center;
    padding: 20px 0 20px 0;
}

.intro-text {
    flex: 1;
}

.code-snippet {
    flex: 1;
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 20px;
    border-radius: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    overflow-x: auto;
}

.code-snippet code {
    white-space: pre;
}

/* --- Feature Grid ("Why Python?") --- */
.feature-grid-container {
    padding: 50px 0 0px 0;
    border-top: 1px solid #eee;
}

.feature-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.feature-item {
    flex: 1;
    padding: 0px;
    text-align: center;
}

.feature-item i {
    font-size: 2.5rem;
    color: #595959;
    margin-bottom: 0px;
}

.feature-item .content-subheading {
    border-bottom: none;
    font-size: 1.3rem;
}


/* --- Project Status Section --- */
.status-section {
    /* CHANGED: Reduced bottom padding to match the section above for consistency */
    padding: 40px 0 0px 0;
    border-top: 1px solid #eee;
}

.status-lists {
    display: flex;
    justify-content: space-around;
    gap: 0px;
}

.status-list h3 {
    font-size: 1.3rem;
    margin-bottom: 0px;
}

.status-list ul {
    list-style: none;
    padding: 0px;
}

.status-list ul li {
    font-size: 1.1rem;
    margin-bottom: 0px;
}

.status-list ul li i {
    margin-right: 10px;
    width: 20px;
}

.status-list .fa-check-circle {
    color: #28a745;
}

.status-list .fa-regular.fa-circle {
    color: #000000;
}

/* --- Call to Action Section --- */
.cta-section {
    text-align: center;
    padding: 40px 0px 0px 0px;
    margin: 10px -20px 10px -20px;
    border-top: 1px solid #eee;
    border-radius: 8px;
}

.cta-section h2 {
    font-size: 1.8rem;
}

.cta-section p {
    max-width: 600px;
    margin: 0 auto 10px auto;
    color: #555;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.cta-buttons .btn {
    font-size: 1rem;
    padding: 12px 12px;
}

.cta-buttons .btn i {
    margin-right: 8px;
}

/* --- Responsive Styles --- */
@media (max-width: 800px) {

    .intro-section,
    .feature-grid,
    .status-lists {
        flex-direction: column;
    }

    .code-snippet {
        order: -1;
        flex: none;
        /* <-- ADD THIS: Resets the flex: 1 from desktop */
        width: 100%;
        /* <-- ADD THIS: Forces it to obey the parent's width */
        min-width: 0;
        /* <-- KEEP THIS: The key to allowing overflow-x */
        box-sizing: border-box;
        /* <-- ADD THIS: Ensures padding doesn't break width */
    }
}