section.faq .heading {
    background: var(--gradient-secondary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.faq .faq-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
 }

 section.faq .faq-wrapper .single-faq {
    padding: 18px 28px;
    transition: background-color 0.3s ease, padding 0.3s ease;
    overflow: hidden;
 }

 section.faq .faq-wrapper .single-faq .answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease, opacity 0.3s ease;
    opacity: 0;
 }

 section.faq .faq-wrapper .single-faq .answer > * {
    overflow: hidden;
    min-height: 0;
 }

section.faq .faq-wrapper .single-faq .question {
   position: relative;
   padding-right: 40px;
   cursor: pointer;
   list-style: none;
}

section.faq .faq-wrapper .single-faq .question::-webkit-details-marker {
   display: none;
}

section.faq .faq-wrapper .single-faq .question::marker {
   display: none;
}

section.faq .faq-wrapper .single-faq .question::before {
   content: '';
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%) rotate(180deg);
   width: 22px;
   height: 12px;
   background-color: var(--gradient-secondary-fallback);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12' fill='none'%3E%3Cpath d='M1 11L11 1L21 11' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12' fill='none'%3E%3Cpath d='M1 11L11 1L21 11' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   transition: transform 0.3s ease, background-color 0.3s ease;
}

section.faq .faq-wrapper .single-faq[open] .question::before {
   transform: translateY(-50%) rotate(0deg);
   background-color: var(--white);
}

 section.faq .faq-wrapper .single-faq[open] {
    background-color: var(--gradient-secondary-fallback);
    color: var(--white);
    font-size: 20px;
    display: flex;
    padding: 28px;
    gap: 28px;
    flex-direction: column;
    border-radius: 4px;
 }

 section.faq .faq-wrapper .single-faq[open] .question {
    font-weight: 700;
    font-size: 20px;
    margin: 0;
    padding: 0 30px 0 0;
 }

 section.faq .faq-wrapper .single-faq[open] .answer {
    display: grid;
    grid-template-rows: 1fr;
    gap: 14px;
    font-size: 16px;
    opacity: 1;
 }
 
 section.faq .faq-wrapper .single-faq[open] .answer p {
    margin: 0;
    padding: 0;
 }

 @media (max-width: 991.98px) {
    section.faq .heading {
        text-align: center;
        width: 100%;
        padding: 0 20px;
    }
 }