.card {
    background: var(--white-color);
    border: none;
    border-radius: 25px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    padding: calc(var(--spacer) * 10);
    box-sizing: border-box;
}

.bg-gradient-animation {
    background: linear-gradient(45deg, var(--light-blue-color) 0%, var(--primary-color) 52%, var(--dark-blue-color) 90%);
    background-size: 200% 200%;
    animation: gradient 10s ease infinite;
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 110%;
}

.bg-gradient-light-animation {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.bg-gradient-light-animation::before {
    content: "";
    position: absolute;
    inset: -20%;

    background: linear-gradient(
        90deg,
        var(--light-blue-color),
        var(--white-color),
        var(--light-blue-color)
    );

    filter: blur(40px);
    opacity: 0.8;

    animation: waveMove 10s ease-in-out infinite;
}

.spingy-faq-item {
    overflow: hidden;
}

.spingy-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.spingy-faq-question::-webkit-details-marker {
    display: none;
}

.spingy-faq-icon {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.spingy-faq-item[open] .spingy-faq-icon {
    transform: rotate(180deg);
}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@media (max-width: 768px) {
    .card {
        padding: calc(var(--spacer) * 5);
    }
}