.accordion {
    .accordion-title {
        position: relative;
        padding: 0.75rem 1rem 1rem 1rem;
        border-radius: 2rem;
        background-color: var(--v-primary);
        color: white;
        font-weight: 700;

        &::marker {
            content: "";
        }

        .accordion-title-icon svg {
            background-color: white;
            border-radius: 50%;

            path {
                fill: var(--v-primary);
            }
        }
    }

    details[name*="accordion-group"] {
        summary.accordion-title {
            .accordion-title-icon svg {
                transition: transform 0.3s ease;
            }
        }

        &[open] {
            summary.accordion-title {
                background-color: var(--v-primary-light);
                
                .accordion-title-icon svg {
                    transform: rotate(180deg);
                    transition: transform 0.3s ease;
                    
                    path {
                        fill: var(--v-primary-light);
                    }
                }
            }
        }
    }

    .accordion-content {
        border-radius: 2rem;
        padding-top: 1.5rem;
        padding-right: 1rem;
        padding-bottom: 0.5rem;
        background-color: #F6F6F6;
        color: #333;

        &:has(ul) {
            padding-left: 0rem;
        }

        p, span, h1, h2, h3, h4, h5, h6 {
            padding-left: 1rem;
        }

        ul {
            padding-left: 2.5rem !important;

            li.marker-services {
                padding-left: 0rem !important;

                &::before {
                    margin-left: -1.5rem !important;
                }
            }
        }

        ol {
            padding-left: 2rem;

            li::marker {
                color: var(--v-primary);
            }
        }
    }
}