/* Hero Section */
.about-hero {
    background-color: var(--color-primary-light);
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: var(--header-height); /* Push content down past fixed header */
}
.about-hero .hero-content {
    max-width: 900px;
    margin: 0 auto;
}
.about-hero h1 {
    font-family: var(--font-heading-primary);
    color: var(--color-sapphire-blue);
    font-size: 3em;
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.about-hero .subtitle {
    font-family: var(--font-body);
    font-size: 1.2em;
    color: var(--color-text-fade-dark);
    max-width: 700px;
    margin: 0 auto;
}
/* --- Default Desktop Styles (>= 1281px) --- */
/* About Sections */
.about-sections {
    padding: var(--spacing-xl) 0;
    max-width: 1200px;
    margin: 0 auto;
}
.about-section {
    display: grid;
    /* Desktop: Two equal columns */
    grid-template-columns: 1fr 1fr; 
    gap: var(--spacing-xl);
    align-items: center;
    margin-bottom: var(--spacing-xxl);
}
.about-section:last-child {
    margin-bottom: 0; /* No margin after the last section */
}

.about-section .about-text {
    flex: 1; /* Take up remaining space */
    padding: var(--spacing-md);
}

.about-section .about-image {
    flex: 1; /* Take up remaining space */
    text-align: center;
}

.about-section .about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for images */
}

.about-section h2 {
    font-family: var(--font-heading-secondary);
    color: var(--color-sapphire-blue);
    font-size: 2em;
    margin-bottom: var(--spacing-md);
    text-shadow: none;
    line-height: 1.3;
}

.about-section p,
.about-section ul {
    font-family: var(--font-body);
    font-size: 1.1em;
    color: var(--color-text-dark);
    line-height: 1.7;
    margin-bottom: var(--spacing-sm);
}

.about-section ul {
    list-style: disc;
    margin-left: var(--spacing-lg); /* Indent list items */
    padding-left: 0;
}

.about-section ul li {
    margin-bottom: 5px;
}

.about-section ul li strong {
    color: var(--color-text-dark); /* Ensure strong text stands out */
}

/* Inverse layout for alternating sections (image on left, text on right) */
.about-section.inverse-layout {
    flex-direction: row-reverse;
}

/* Call to Action Section (reusing styles from trust_info.css) */
.call-to-action {
    padding: var(--spacing-xl) var(--spacing-md);
    background-color: var(--color-primary-light);
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.call-to-action h2 {
    font-family: var(--font-heading-primary);
    color: var(--color-text-dark);
    font-size: 2.2em;
    margin-bottom: var(--spacing-md);
    text-shadow: none;
}

.call-to-action p {
    font-family: var(--font-body);
    font-size: 1.1em;
    color: var(--color-text-fade-dark);
    margin-bottom: var(--spacing-lg);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.call-to-action .btn {
    margin: 0 var(--spacing-sm);
}

/* Responsive Adjustments for About Us Page */
@media (max-width: 1024px) {
    .about-hero h1 {
        font-size: 2.6em;
    }
    .about-hero .subtitle {
        font-size: 1.1em;
    }
    .about-section {
        flex-direction: column; /* Stack image and text vertically */
        text-align: center;
        margin-bottom: var(--spacing-lg);
    }
    .about-section.inverse-layout {
        flex-direction: column; /* Stack also for inverse layout */
    }
    .about-section .about-text,
    .about-section .about-image {
        padding: 0; /* Remove padding, let section padding handle it */
        width: 100%;
    }
    .about-section .about-image {
        order: -1; /* Image appears first when stacked */
        margin-bottom: var(--spacing-md);
    }
    .about-section.inverse-layout .about-image {
        order: -1; /* Consistent order for inverse layout when stacked */
    }
    .about-section h2 {
        font-size: 1.8em;
        margin-bottom: var(--spacing-sm);
    }
    .about-section p, .about-section ul {
        font-size: 0.95em;
        max-width: 80%; /* Constrain text width for readability */
        margin-left: auto;
        margin-right: auto;
    }
    .about-section ul {
        text-align: left; /* Keep list left-aligned even if section is centered */
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--spacing-lg); /* Ensure indentation */
    }
    .call-to-action h2 {
        font-size: 2em;
    }
    .call-to-action p {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .about-hero {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    .about-hero h1 {
        font-size: 2.2em;
    }
    .about-hero .subtitle {
        font-size: 1em;
    }
    .about-sections {
        padding: var(--spacing-md) var(--spacing-sm);
    }
    .about-section h2 {
        font-size: 1.5em;
    }
    /* Ensure text in the alternating sections is clearly visible on mobile */
    .about-section p, .about-section ul {
        font-size: 0.95em;
        line-height: 1.6;
    }
    /* Stack and size the Call-to-Action buttons for mobile tapping */
    .call-to-action .btn {
        display: block; /* Makes buttons stack vertically */
        width: 90%; /* Makes buttons wide for easier tapping */
        max-width: 350px; /* Caps the maximum width */
        margin: var(--spacing-sm) auto; /* Adds vertical margin and centers them */
    }
}