/* Faq. */

.cf-block__preview .faq-content {
    display: block !important;
}

.faq {

}

.faq-net {
    grid-gap: var(--i2);
}

.faq-top {
    max-width: 416px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    grid-gap: 24px;

    width: 100%;
    max-width: 744px;
}

.faq-li {
    --gap: 32px;

    overflow: hidden;
    background-color: var(--white);
    -webkit-border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    border-radius: var(--border-radius);

    -webkit-transition: background-color var(--transition-duration);
    -moz-transition: background-color var(--transition-duration);
    -ms-transition: background-color var(--transition-duration);
    -o-transition: background-color var(--transition-duration);
    transition: background-color var(--transition-duration);
}

.faq-li.active {
    background-color: rgba(52, 168, 83, 0.1);
}

.faq-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 16px;

    width: 100%;
    padding: var(--gap);
    text-align: left;
}

.faq-trigger:after {
    content: '';
    flex-shrink: 0;

    width: 16px;
    aspect-ratio: 1/1;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L8 7.75862L15 1' stroke='%230D0D0D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;

    -webkit-transition: transform var(--transition-duration);
    -moz-transition: transform var(--transition-duration);
    -ms-transition: transform var(--transition-duration);
    -o-transition: transform var(--transition-duration);
    transition: transform var(--transition-duration);
}

.faq-trigger.active:after {
    -webkit-transform: rotate(200grad);
    -moz-transform: rotate(200grad);
    -ms-transform: rotate(200grad);
    -o-transform: rotate(200grad);
    transform: rotate(200grad);
}

.faq-content {
    display: none;

    padding-inline: var(--gap);
    padding-bottom: var(--gap);
}

/* Faq. */

@media only screen and (min-width: 768px) {
    .faq-top {
        position: sticky;
        top: calc(36px * 2 + var(--header));
    }
}

@media only screen and (max-width: 767px) {
    .faq-net {
        flex-direction: column;

    }
}