/* Services Section with Moving Background - High Priority Styles */
section.services.section {
    position: relative !important;
    overflow: hidden !important;
    background: var(--background-light) !important;
}

.services__background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.services__particles {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    background-image: 
        radial-gradient(4px 4px at 25px 35px, rgba(59, 130, 246, 0.8), transparent),
        radial-gradient(3px 3px at 75px 80px, rgba(34, 197, 94, 0.7), transparent),
        radial-gradient(2px 2px at 125px 50px, rgba(168, 85, 247, 0.6), transparent),
        radial-gradient(3px 3px at 200px 90px, rgba(59, 130, 246, 0.5), transparent),
        radial-gradient(4px 4px at 300px 40px, rgba(34, 197, 94, 0.6), transparent) !important;
    background-repeat: repeat !important;
    background-size: 350px 200px !important;
    animation: services-particles-move 20s linear infinite !important;
}

.services__shapes {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.services__shape {
    position: absolute !important;
    opacity: 0.3 !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
    pointer-events: none !important;
}

.services__shape--1 {
    width: 100px !important;
    height: 100px !important;
    background: linear-gradient(135deg, #3b82f6, #22c55e) !important;
    border-radius: 30px !important;
    top: 10% !important;
    left: 5% !important;
    animation: shape-float-1 8s infinite !important;
}

.services__shape--2 {
    width: 80px !important;
    height: 80px !important;
    background: linear-gradient(45deg, #22c55e, #3b82f6) !important;
    border-radius: 50% !important;
    top: 60% !important;
    right: 8% !important;
    animation: shape-float-2 10s infinite !important;
}

.services__shape--3 {
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(180deg, #a855f7, transparent) !important;
    border-radius: 50% !important;
    top: 20% !important;
    right: 30% !important;
    animation: shape-float-3 12s infinite !important;
}

.services__shape--4 {
    width: 140px !important;
    height: 30px !important;
    background: linear-gradient(90deg, #3b82f6, transparent) !important;
    border-radius: 15px !important;
    bottom: 20% !important;
    left: 20% !important;
    animation: shape-float-4 15s infinite !important;
}

.services__shape--5 {
    width: 90px !important;
    height: 90px !important;
    background: linear-gradient(315deg, #22c55e, #3b82f6) !important;
    border-radius: 45% 55% 65% 35% / 35% 45% 55% 65% !important;
    top: 5% !important;
    right: 5% !important;
    animation: shape-float-5 9s infinite !important;
}

/* Animation keyframes */
@keyframes services-particles-move {
    0% { transform: translateX(0px) translateY(0px); }
    25% { transform: translateX(20px) translateY(-15px); }
    50% { transform: translateX(-10px) translateY(-30px); }
    75% { transform: translateX(15px) translateY(-20px); }
    100% { transform: translateX(30px) translateY(-40px); }
}

@keyframes shape-float-1 {
    0% { transform: translateY(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(-40px) rotate(180deg) scale(1.1); }
    100% { transform: translateY(0px) rotate(360deg) scale(1); }
}

@keyframes shape-float-2 {
    0% { transform: translateY(0px) translateX(0px) scale(1); }
    50% { transform: translateY(-50px) translateX(30px) scale(1.2); }
    100% { transform: translateY(0px) translateX(0px) scale(1); }
}

@keyframes shape-float-3 {
    0% { transform: translateY(0px) scale(1) rotate(0deg); }
    50% { transform: translateY(-35px) scale(1.3) rotate(180deg); }
    100% { transform: translateY(0px) scale(1) rotate(360deg); }
}

@keyframes shape-float-4 {
    0% { transform: translateX(0px) rotateY(0deg) translateY(0px); }
    50% { transform: translateX(-70px) rotateY(180deg) translateY(-25px); }
    100% { transform: translateX(0px) rotateY(360deg) translateY(0px); }
}

@keyframes shape-float-5 {
    0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    33% { transform: translateY(-30px) translateX(-25px) rotate(120deg); }
    66% { transform: translateY(-20px) translateX(20px) rotate(240deg); }
    100% { transform: translateY(0px) translateX(0px) rotate(360deg); }
}

/* Ensure content is above background */
.services .container {
    position: relative !important;
    z-index: 10 !important;
}

.services__container {
    position: relative !important;
    z-index: 10 !important;
}

.service__card {
    position: relative !important;
    z-index: 10 !important;
}