.accordion-item {
    border-radius: 8px !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border: unset;
    box-shadow: 8px 8px 32px 0px #0000000A; 
    padding: 16px 24px;
}
.accordion-item .icon-square{
    background-color: var(--neutrals-darkgrey);
}
.accordion-item button{
    color: var(--neutrals-darkgrey);
}
.accordion-button:not(.collapsed){
    color: var(--color-accordion);
}
.accordion-button:not(.collapsed) .icon-square{
    background-color: var(--accents-1);
}
.accordion-body{
    transition: height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    height: 0;
    opacity: 0;
}
.accordion-item.show .accordion-body{
    /* height: auto; */
    opacity: 1;   
    display: block;
}
.accordion-button {
    border: unset !important;
    box-shadow: unset !important;
    background: unset !important;
    padding: 0 !important;
}

.accordion-button::after {
    display: none !important;
}

h3 .accordion-button {
    font-family: var(--desktop-h3-fontfamily);
    font-size: var(--desktop-h3-size);
    font-weight: var(--desktop-h3-weight);
    line-height: var(--desktop-h3-lineheight);
}
.progress-bar-container {
    position: relative;
    height: 6px;
    margin-bottom: 16px;
    display: none; /* Hide by default */
    transition: opacity 0.3s ease;
    opacity: 0;
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: var(--main-brand);
    transition: width 5s linear;
}

.accordion-item.show .progress-bar-container {
    display: block; /* Show only in the active accordion item */
    opacity: 1;
}

@media(max-width:991px){
    #accordion_1 .accordion-body {
    transition: height 0.3s 
ease, opacity 0.3s 
ease;
    overflow: visible;
    height: auto;
    opacity: 1;
}
#accordion_1 .accordion-item button{
   color: var(--color-accordion);
}
#accordion_1 .accordion-item img{
    margin-bottom: 1rem;
}
}