/*
==============================================
SOLUTIONS PAGE ONLY - Colorful Gradient Backgrounds
==============================================
Similar to main site's about section - animated gradients
ONLY applies to solutions.php page
*/

/* Page Hero - Animated Gradient Background */
.page-hero {
    background: linear-gradient(-45deg, var(--color-primary-light), var(--color-primary-mid), var(--color-primary-dark), var(--color-primary-mid)) !important;
    background-size: 300% 300% !important;
    animation: gradient-animation 6s ease infinite;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../images/hero-pattern.svg');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

.page-hero .container {
    position: relative;
    z-index: 2;
}

/* Solution Sections - Alternating Professional Gradients */
.solution-section:nth-child(odd) {
    background: linear-gradient(135deg, rgba(24, 218, 254, 0.05), rgba(119, 124, 254, 0.05)) !important;
    position: relative;
}

.solution-section:nth-child(even) {
    background: linear-gradient(135deg, rgba(201, 38, 255, 0.05), rgba(119, 124, 254, 0.05)) !important;
    position: relative;
}

/* Add subtle pattern to solution sections */
.solution-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(119, 124, 254, 0.015) 10px,
            rgba(119, 124, 254, 0.015) 20px
        );
    pointer-events: none;
    z-index: 1;
}

.solution-section .container {
    position: relative;
    z-index: 2;
}

/* Solution Visual Cards - Enhanced with gradient borders */
.solution-visual {
    background: linear-gradient(135deg, rgba(24, 218, 254, 0.06), rgba(201, 38, 255, 0.06)) !important;
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.solution-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.2;
}

/* Bottom CTA - Animated Gradient like main site */
.bottom-cta {
    background: linear-gradient(-45deg, var(--color-primary-light), var(--color-primary-mid), var(--color-primary-dark), var(--color-primary-mid)) !important;
    background-size: 300% 300% !important;
    animation: gradient-animation 6s ease infinite;
    position: relative;
    overflow: hidden;
}

.bottom-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../images/hero-pattern.svg');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

.bottom-cta .container {
    position: relative;
    z-index: 2;
}

/* Add hover effect to solution cards */
.solution-teaser-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(119, 124, 254, 0.3);
}

/* Enhance feature list items with gradient icons */
.feature-list li i {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}