/* body {
    font-family: 'Montserrat', sans-serif;  // Already global via base.html
    color: #333; // Assuming global via styles.css
    line-height: 1.6; // Assuming global via styles.css
} */

/* Remove breadcrumb padding specifically for the About Us page */

/* Override main element's bottom margin for the About Us page */
body.about-page-body main {
    margin-bottom: 0 !important;
}
body.about-page-body .top-nav .breadcrumb {
    padding-top: 0;
    padding-bottom: 0;
}

.about-us-grid-container {
    max-width: 1000px; /* Increased max-width for grid */
    margin: 0 auto;      /* Remove top/bottom margin, keep horizontal centering */
    padding: 0 20px;    /* Remove top/bottom padding, keep left/right padding */
}

.about-grid-row {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    /* align-items: center; */ /* Removed to default to stretch, making columns equal height */
    /* margin-bottom: 40px; */ /* Removed for seamless rows */
    height: 500px; /* Increased row height */
}

.about-grid-row:last-child {
    margin-bottom: 0;
}

.about-grid-col {
    flex: 1; /* Each column takes equal space */
    min-width: 300px; /* Minimum width before wrapping */
    /* padding: 20px; */ /* Removed, padding will be on inner content div for text */
}

.about-grid-col.image-col img {
    width: 100%;
    height: 100%; /* Make image fill the column height */
    object-fit: cover; /* Cover the area, cropping if necessary, no distortion */
    /* border-radius: 8px; */ /* Removed for seamless look */
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.15); */ /* Removed for seamless look */
    display: block; /* Remove extra space below image */
}

.about-grid-col.text-col {
    display: flex; /* Keep flex to allow inner div to stretch */
    flex-direction: column; /* Keep column direction */
    /* justify-content: center; */ /* Content justification will be handled by text-content-inner */
}

.text-content-inner {
    padding: 30px; /* Padding for the text content */
    height: 100%;
    box-sizing: border-box; /* Include padding in height calculation */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the text within its padded box */
    align-items: center; /* Horizontally center the children, including app badges container */
}

/* Reverse column order for specific rows on medium screens and up */
@media (min-width: 768px) {
    .about-grid-row:nth-child(2) .image-col {
        order: 1; /* Image on right */
    }
    .about-grid-row:nth-child(2) .text-col {
        order: 0; /* Text on left */
    }
}

.orienjo-brand-color {
    color: #EE793A;
}

.about-grid-col h2 {
    font-size: 1.7em; /* Reduced h2 font size */
    color: #2c3e50; /* Darker heading color */
    margin-bottom: 20px;
    font-weight: 600;
    text-align: left; /* Align title text to the left */
    width: 100%; /* Ensure h2 takes available width for left alignment */
}

.about-grid-col p {
    margin-bottom: 15px;
    font-size: 1em;
    text-align: left; /* Align text to the left */
    width: 100%; /* Ensure paragraph takes available width for left alignment */
    max-width: 600px; /* Optional: constrain line length for readability if needed */
}

.app-download-link {
    color: #16a085; /* Orienjo theme green */
    font-weight: 600;
    text-decoration: underline;
}

.app-download-link:hover {
    text-decoration: none;
}

/* App Download Badges Section - styles adapted from previous version */
.app-download-badges-about {
    display: flex;
    justify-content: flex-start; /* Align to start for text column */
    align-items: flex-start;
    gap: 80px;
    margin-top: 50px; /* Was 20px, increased by 10px */
    flex-wrap: wrap;
}

.app-store-container-about,
.play-store-container-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.qr-code-about {
    margin-bottom: 6px; /* 8px * 0.8 */
}

.qr-code-img-about {
    width: 64px; /* 80px * 0.8 */
    height: 64px; /* 80px * 0.8 */
    border: 1px solid #ddd;
    border-radius: 4px;
}

.store-badge-about {
    /* height is now set by specific badge type below */
    width: auto;
}

img.store-badge-about[alt="App Store Download Badge"] {
    height: 31px; /* 28px * 1.1 */
    position: relative;
    top: 5px; /* Move down by 5px */
}

img.store-badge-about[alt="Google Play Download Badge"] {
    height: 45px; /* 41px * 1.1 */
    position: relative;
    bottom: 3px; /* Was 8px, moved down by 5px */
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .about-us-grid-container {
        padding: 0 15px;
    }
    .about-grid-row {
        flex-direction: column;
        height: auto;
        margin-bottom: 30px;
    }
    .about-grid-row:last-child {
        margin-bottom: 0;
    }
    .about-grid-col {
        padding: 0; /* Padding will be on image-col or text-inner */
        min-width: 0;
        width: 100%; /* Ensure columns take full width when stacked */
    }

    /* Image styling for mobile */
    .about-grid-col.image-col {
        padding: 15px 0; /* Add some vertical padding around the image container */
    }
    .about-grid-col.image-col img {
        display: block;
        max-height: 280px; /* Reduce image height */
        width: auto;       /* Let height drive width, maintaining aspect ratio */
        max-width: 85%;    /* Max width relative to its container */
        margin-left: auto;
        margin-right: auto; /* Center the image */
    }

    /* Text content styling for mobile */
    .text-content-inner {
        padding: 15px; /* Uniform padding for text block */
        align-items: flex-start; /* Keep text content (h2, p) left-aligned */
    }
    .about-grid-col h2 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }
    .about-grid-col p {
        font-size: 0.9em;
        max-width: none;
    }

    /* Stacking order: Ensure image is always above text */
    /* Row 1 (About Orienjo): image is first in DOM, text second. Stacks correctly by default. */
    /* Row 2 (Rare Routes): text is first in DOM, image second. Needs re-ordering. */
    .about-grid-row:nth-child(2) .text-col {
        order: 1; /* Text below image */
    }
    .about-grid-row:nth-child(2) .image-col {
        order: 0; /* Image above text */
    }
    /* Row 3 (Get to know): image is first in DOM, text second. Stacks correctly by default. */

    /* App download badges centering */
    .app-download-badges-about {
        justify-content: center; /* Center badges horizontally */
        gap: 20px; /* Slightly reduce gap */
        margin-top: 25px;
        width: 100%; /* Takes full width to allow its flex items to center */
    }
    /* Consider further adjustments for very small screens if badges wrap awkwardly */
    /* @media (max-width: 400px) {
        .app-download-badges-about {
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }
        .app-store-container-about, .play-store-container-about {
            width: auto; // Or a fixed max-width to look good, e.g., max-width: 200px;
        }
    } */
}