/* About Page Mobile Optimizations */

/* Visual distinction between Our Story and Our Mission */
.about-intro {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    position: relative;
}

.about-intro::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background-color: var(--border-color);
}

/* Section-specific styles for better spacing */
.mission-section {
    padding-top: 5px; /* Reduce the top spacing to bring the heading closer to content above */
}

.vision-section {
    padding-top: 15px; /* Ensure consistent spacing */
}

@media (max-width: 768px) {
    .mission-section .about-section-content,
    .vision-section .about-section-content {
        text-align: center;
    }
    
    /* Center the underlines for the headings */
    .about-section-content h3::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* General mobile adjustments */
@media (max-width: 992px) {
    .about-section {
        margin-bottom: 40px;
    }

    .about-section h3 {
        margin-top: 0;
    }

    .about-values {
        margin-top: 10px;
        padding-top: 10px;
    }
    
    .about-team {
        margin-top: 10px;
        padding-top: 10px;
    }
}

@media (max-width: 768px) {
    /* Specific spacing fixes for mobile */
    .about-section {
        padding: 20px 0;
        margin-bottom: 30px;
    }
    
    .about-section.reverse {
        padding: 25px 15px;
    }
    
    /* Center all headings in mobile view */
    .about-section-content h3,
    .about-values h3,
    .about-team h3,
    .about-intro h2 {
        text-align: center;
        margin-top: 5px; /* Reduced top margin */
        margin-bottom: 15px;
        width: 100%;
    }
    
    /* Center all heading underlines */
    .about-section-content h3::after,
    .team-elders-content h4::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* Values section spacing */
    .about-values {
        padding: 10px 0 30px;
        margin-top: 15px;
        text-align: center;
    }
    
    .about-values h3 {
        margin-bottom: 25px;
        padding-bottom: 10px;
    }
    
    /* Team section spacing */
    .about-team {
        padding: 10px 0;
        margin-top: 15px;
        text-align: center;
    }
    
    .about-team h3 {
        margin-bottom: 25px;
        padding-bottom: 10px;
    }
    
    /* Center Cultural Guidance section content */
    .team-elders-content {
        text-align: center;
    }
    
    /* Better spacing for the section transitions */
    .about-section + .about-section,
    .about-values + .about-team {
        margin-top: 30px;
    }
    
    /* Fix for intro section */
    .about-intro {
        margin-bottom: 30px;
        text-align: center;
        padding: 1.5rem;
    }

    .about-intro h2 {
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    /* Even tighter spacing for very small screens */
    .about-section {
        padding: 15px 0;
        margin-bottom: 25px;
    }
    
    .about-section.reverse {
        padding: 20px 10px;
    }
    
    .about-team, .about-values {
        margin-top: 10px;
    }
    
    /* Center value card icons on mobile */
    .value-icon {
        margin: 0 auto 20px auto;
    }
    
    /* Adjust value card for mobile */
    .value-card {
        text-align: center;
        padding: 20px 15px;
    }
    
    /* Ensure slider shows full card width on mobile */
    .values-grid {
        gap: 20px;
    }
}