html {
    scroll-behavior: smooth;
    margin: 0;
}

#bannerSlider .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
    width: 10px;
    height: 10px;
}

#bannerSlider .swiper-pagination-bullet-active {
    background-color: #facc15 !important;
}

.advantage-gradient {
    background-image: radial-gradient(
        circle at top left,
        oklch(79.5% 0.184 86.047),
        transparent 70%
    );
    filter: blur(80px);
    background-repeat: no-repeat;
}

.circuitBackground {
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            rgba(75, 85, 99, 0.08) 19px,
            rgba(75, 85, 99, 0.08) 20px,
            transparent 20px,
            transparent 39px,
            rgba(75, 85, 99, 0.08) 39px,
            rgba(75, 85, 99, 0.08) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            rgba(75, 85, 99, 0.08) 19px,
            rgba(75, 85, 99, 0.08) 20px,
            transparent 20px,
            transparent 39px,
            rgba(75, 85, 99, 0.08) 39px,
            rgba(75, 85, 99, 0.08) 40px
        ),
        radial-gradient(
            circle at 20px 20px,
            rgba(55, 65, 81, 0.12) 2px,
            transparent 2px
        ),
        radial-gradient(
            circle at 40px 40px,
            rgba(55, 65, 81, 0.12) 2px,
            transparent 2px
        );
    background-size:
        40px 40px,
        40px 40px,
        40px 40px,
        40px 40px;
}

.faq-content {
    overflow: hidden;
    transition: height 0.35s ease;
}

.bottom-cross-diagonal-background {
    background-image:
        linear-gradient(
            45deg,
            transparent 49%,
            #e5e7eb 49%,
            #e5e7eb 51%,
            transparent 51%
        ),
        linear-gradient(
            -45deg,
            transparent 49%,
            #e5e7eb 49%,
            #e5e7eb 51%,
            transparent 51%
        );
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(
        ellipse 80% 80% at 100% 100%,
        #000 50%,
        transparent 90%
    );
    mask-image: radial-gradient(
        ellipse 80% 80% at 100% 100%,
        #000 50%,
        transparent 90%
    );
}

.testimonial-card {
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.75);
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
    max-width: 520px;
    width: 100%;
    min-height: 300px;
    transition: all 0.4s ease;
}

#testimonialSlide .keen-slider__slide {
    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
    opacity: 0.4;
    transform: scale(0.9);
}

#testimonialSlide .keen-slider__slide.active {
    opacity: 1;
    transform: scale(1);
}

.footer-pattern {
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 20px 20px;
    background-position:
        0 0,
        0 0;

    mask-image:
        repeating-linear-gradient(
            to right,
            black 0px,
            black 3px,
            transparent 3px,
            transparent 8px
        ),
        repeating-linear-gradient(
            to bottom,
            black 0px,
            black 3px,
            transparent 3px,
            transparent 8px
        );
    -webkit-mask-image:
        repeating-linear-gradient(
            to right,
            black 0px,
            black 3px,
            transparent 3px,
            transparent 8px
        ),
        repeating-linear-gradient(
            to bottom,
            black 0px,
            black 3px,
            transparent 3px,
            transparent 8px
        );

    mask-composite: intersect;
    -webkit-mask-composite: source-in;

    opacity: 0.08;
}