/*
|--------------------------------------------------------------------------
| Section 1 (Hero section)
|--------------------------------------------------------------------------
*/

@keyframes bounce-slow {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.bounce-infinite {
    animation: bounce-slow 2s infinite ease-in-out;
}

/*
|--------------------------------------------------------------------------
| Section 7 (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;
}