body.page-template-page-ai {
    color: #000;
}

/* Splide Slider Styles */
#ai-slider .splide__pagination {
    position: relative;
    bottom: auto;
    margin-top: 30px;
    padding: 0;
}

#ai-slider .splide__pagination__page {
    background: #D6E7FF;
    border: none;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin: 0 6px;
    opacity: 1;
    transition: background-color 0.3s ease;
}

#ai-slider .splide__pagination__page.is-active {
    background: #005DE8;
    transform: scale(1.2);
}

#ai-slider .splide__slide {
    width: 1350px;
    max-width: 100%;
}

/* SVG Animations */
@keyframes svgPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

@keyframes svgCheckDraw {
    0% {
        stroke-dasharray: 0 100;
        stroke-dashoffset: 100;
        /* Start hidden, move to visible */
    }

    100% {
        stroke-dasharray: 100 100;
        stroke-dashoffset: 0;
    }
}

.icon-animated-pulse {
    animation: svgPulse 2s infinite ease-in-out;
}

.animate-svg-check-draw path {
    stroke-dasharray: 1000;
    /* A large value to ensure the entire path is covered */
    stroke-dashoffset: 1000;
    /* Start completely offset */
    animation: svgCheckDraw 1s forwards ease-out;
}

/* Blob Animation */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Scroll Fade Animation */
.scroll-fade-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.scroll-fade-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Float Animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 8s ease-in-out infinite;
    animation-delay: 2s;
}

/* Spin Animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin 12s linear infinite;
}