/* WiseLeaf Homepage About Section - Dynamic Background Support */

/* Enhanced about section for dynamic backgrounds */
.about-section {
    /* Override existing background */
    background: none !important;
    
    /* Ensure proper positioning for overlays */
    position: relative !important;
    
    /* Default fallback - will be overridden by JS */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    /* Smooth transitions */
    transition: all 0.3s ease !important;
}

/* CSS-only test - direct image loading */
.about-section {
    background-image: url('../images/homepage/about-background.jpg') !important;
    background-image: url('../images/homepage/about-background.webp') !important;
    background-color: red !important; /* Test color to see if CSS is loading */
}

.about-section .about-content {
    /* Ensure content is positioned correctly */
    position: relative !important;
    z-index: 2 !important;
}

.about-section .section-title {
    /* Allow dynamic color override */
    color: var(--primary-color) !important;
    position: relative !important;
    z-index: 2 !important;
}

.about-section .about-text {
    /* Allow dynamic color override */
    color: #000000 !important;
    position: relative !important;
    z-index: 2 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Overlay for better text readability */
.homepage-about-overlay {
    pointer-events: none;
}

/* Loading state */
.about-section[data-loading="true"] {
    background: var(--gradient-main) !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .about-section {
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media (max-width: 480px) {
    .about-section .about-text {
        font-size: 14px !important;
    }
}