/*
|--------------------------------------------------------------------------
| More info form.
|--------------------------------------------------------------------------
*/

.more-info-tingle-modal .tingle-modal-box {
    background: transparent;
    backdrop-filter: blur(4px);
}

/*
|--------------------------------------------------------------------------
| Section 4.
|--------------------------------------------------------------------------
*/

.letter {
    transition: color 0.2s ease, opacity 0.2s ease;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.letter.active {
    color: white;
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Section 5 (FAQ)
|--------------------------------------------------------------------------
*/

#section-faq details {
    overflow: hidden;
    position: relative;
}

#section-faq details > summary {
    list-style: none;
}

#section-faq details > summary::marker,
#section-faq details > summary::-webkit-details-marker {
    display: none;
}

#section-faq summary {
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    cursor: pointer;
}

#section-faq summary::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5' /%3E%3C/svg%3E%0A");
    position: absolute;
    right: 0;
    top: 0;
    color: rgb(55 65 81);
    height: 2rem;
    width: 2rem;
    border-radius: 0.25rem;
    margin-top: 1.25rem;
    margin-right: 1rem;
    opacity: 0.5;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

#section-faq details[open] > summary {
    color: #000;
}

#section-faq details[open] > summary::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| More info bar that appear.
|--------------------------------------------------------------------------
*/

@keyframes bar_fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

.bar_fadeInLeft {
    animation: bar_fadeInLeft 1s;
}

@keyframes bar_fadeInLeftToDissapear {
    0% {
        opacity: 1;
        transform: translateZ(0);
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}

.bar_fadeInLeftToDissapear {
    animation: bar_fadeInLeftToDissapear 1s;
}