/* section-layout.css - Styles for zig-zag and grid layout sections */
h1, h2, h3 { color: #1a2b4e; font-weight: 700; }
p { color: #555; margin-bottom: 1.5rem; }

/* Text Styling */
.text-col h2 { font-size: 32px; margin-bottom: 20px; position: relative; }
.text-col h2::after {
    content: ''; display: block; width: 60px; height: 4px; 
    background: #667eea; margin-top: 10px; border-radius: 2px;
}
.text-col p { font-size: 17px; line-height: 1.8; }

/* --- Image Wrappers & Zoom --- */
.image-col {
    position: relative;
    z-index: 1;
}

.section-wrapper {
    padding: 80px 20px;
    width: 100%;
    position: relative;
}
.section-wrapper:nth-child(odd) { background-color: #fff; }
.section-wrapper:nth-child(even) { background-color: #f8faff; }
.container-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* --- Zig-Zag Logic --- */
.section-wrapper.reverse .container-grid { direction: rtl; }
.section-wrapper.reverse .container-grid > * { direction: ltr; }

@media (max-width: 900px) {
    .container-grid { grid-template-columns: 1fr; gap: 30px; }
    .section-wrapper.reverse .container-grid { direction: ltr; }
    .image-col { order: -1; }
}