.faq-listing #faq-accordion .card:hover .card-header h3 .btn {
    text-decoration: none !important;
}

.faq-listing #faq-accordion .card .card-header h3 .btn.collapsed {
    color: #000000 !important;
}

.faq-listing #faq-accordion .card .card-header h3 .btn {
    width: 100%;
    color: rgb(24, 0, 231);
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 30px 0px 0px;
    position: relative;
    text-decoration: none !important;
}

@media (max-width: 767px) {
    .faq-listing #faq-accordion .card .card-header h3 .btn {
        font-size: 18px;
        line-height: 26px;
    }
}

.faq-listing #faq-accordion .card .card-header h3 .btn::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_4408_3128)'%3E%3Cpath d='M19 13H5V11H19V13Z' fill='%231800E7'/%3E%3Cpath d='M19 13H5V11H19V13Z' fill='%231800E7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4408_3128'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0px;
    top: 0px;
}

.faq-listing #faq-accordion .card .card-header h3 .btn.collapsed {
    color: rgb(0, 0, 0);
}

.faq-listing #faq-accordion .card .card-header h3 .btn.collapsed::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_4408_902)'%3E%3Cpath d='M19 13H5V11H19V13Z' fill='%231800E7'/%3E%3Cpath d='M13 5V19H11V5H13Z' fill='%231800E7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4408_902'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

#home-faq .title {
    color: black;
    font-family: $hkGroteskWide;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 44px;
    text-transform: uppercase;
    margin-bottom: 30px;

    @media (max-width: 991px) {
        font-size: 26px;
        line-height: 34px;
    }
}

.faq-listing {
    #faq-accordion {
        .card {
            margin-bottom: 20px;
            border-radius: 16px !important;
            background: white;
            border: none;
            box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.10);
            transition: all 0.3s ease-in-out;

            &.active, &:hover {
                box-shadow: 0px 2px 8px 0px rgba(24, 0, 231, 0.20);
            }

            &:hover {
                .card-header {
                    h5 {
                        .btn {
                            text-decoration: none !important;
                        }
                    }
                }
            }

            .card-header {
                border: none;
                background: white;
                padding: 18px 24px;
                border-radius: 16px !important;
            }

            .card-content {
                .card-body {
                    color: $greyDark;
                    font-family: $roboto;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    padding: 0 24px 18px;

                    a {
                        color: $cobaltBlue;
                        text-decoration: underline;
                        font-weight: 700;

                        &:hover {
                            text-decoration: underline;
                            color: #06013A;
                        }
                    }
                }
            }
        }
    }
}