/* css/index.css */
.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.row {
    display: flex;
    align-items: center;
    /* Vertically center content */
    margin: 20px;
    gap: 20px;
    /* Space between image and text */
}

.row img {
    width: 30%;
    height: auto;
    margin-right: 10%;
    margin-left: 10%;
    border-radius: 8px;
}

/* First row: text has margin-right */
.row p {
    flex: 1;
    margin-right: 10%;
    /* Margin to the right for the first row's text */
    font-size: 1.1em;
}

/* Second row (reverse): text has margin-left */
.row.reverse p {
    margin-right: 0;
    /* Remove margin-right from first row */
    margin-left: 10%;
    /* Add margin-left for the second row's text */
}

.header {
    display: flex;
    flex: 1;
    justify-content: center;
    font-size: 2.5em;
    font-weight: bold;
}

/* Responsive design */
@media (max-width: 768px) {
    .row {
        flex-direction: column;
        /* Stack image and text on smaller screens */
        text-align: center;
    }

    .row.reverse {
        flex-direction: column;
        /* Stack in natural order for mobile */
    }

    .row img {
        width: 80%;
        /* Adjust image width for smaller screens */
        margin: 0 auto;
        /* Center images */
    }

    .row p {
        margin: 0 10%;
        /* Consistent margin for text on mobile */
    }

    .row.reverse p {
        margin: 0 10%;
        /* Consistent margin for text on mobile */
    }
}