/* Final fix for gradient text in section headers */

/* Basic styling for all section headers */
.section-header h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    text-align: center;
}

/* Gradient text effect */
.section-header .gradient-text {
    background: linear-gradient(45deg, var(--primary-color), #7986cb);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: none;
}

/* Dark mode gradient */
[data-theme="dark"] .section-header .gradient-text {
    background: linear-gradient(45deg, #536dfe, #90caf9);
    background-clip: text;
    -webkit-background-clip: text;
}

/* Fallback for browsers that don't support gradient text */
.section-header .gradient-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    color: var(--primary-color);
    opacity: 0;
}

/* Ensure section header text is always visible */
@supports not (background-clip: text) {
    .section-header .gradient-text {
        color: var(--primary-color);
    }
    
    [data-theme="dark"] .section-header .gradient-text {
        color: #90caf9;
    }
}