/**
 * Centered Content Sections
 * Makes two-column grid sections display as centered single-column on all screen sizes
 * Applies to content sections like "Born from Excellence", "Our Approach", etc.
 */

/* Target sections with two-column grids that should be centered */
section .grid.lg\:grid-cols-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3rem;
}

/* Center all text content */
section .grid.lg\:grid-cols-2 h1,
section .grid.lg\:grid-cols-2 h2,
section .grid.lg\:grid-cols-2 h3,
section .grid.lg\:grid-cols-2 h4,
section .grid.lg\:grid-cols-2 p {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

/* Limit text width for better readability */
section .grid.lg\:grid-cols-2 h2 {
    max-width: 800px;
}

section .grid.lg\:grid-cols-2 p {
    max-width: 900px;
}

/* Center images */
section .grid.lg\:grid-cols-2 img {
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    width: 100%;
}

/* For sections that explicitly need to stay as grid, add .keep-grid class */
section .grid.lg\:grid-cols-2.keep-grid {
    display: grid !important;
    text-align: left !important;
}

section .grid.lg\:grid-cols-2.keep-grid h1,
section .grid.lg\:grid-cols-2.keep-grid h2,
section .grid.lg\:grid-cols-2.keep-grid h3,
section .grid.lg\:grid-cols-2.keep-grid h4,
section .grid.lg\:grid-cols-2.keep-grid p {
    text-align: left !important;
}

/* RTL support */
[dir="rtl"] section .grid.lg\:grid-cols-2 h1,
[dir="rtl"] section .grid.lg\:grid-cols-2 h2,
[dir="rtl"] section .grid.lg\:grid-cols-2 h3,
[dir="rtl"] section .grid.lg\:grid-cols-2 h4,
[dir="rtl"] section .grid.lg\:grid-cols-2 p {
    text-align: center !important;
}