.accrodion-wrapper {
counter-reset: accordion-counter;
position: relative;
}
.accordion-item.active {
box-shadow: 0px 10px 40px 0px rgba(187, 199, 206, 0.25);
}
.has-counter .accordion-toggle:before {
counter-increment: accordion-counter;
content: counter(accordion-counter, decimal-leading-zero) ".";
font-weight: 600;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.accordion-toggle {
position: relative;
}
.accordion-toggle:after {
content: url('data:image/svg+xml,');
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
padding: 8px;
padding-bottom: 0;
border-radius: 8px;
background-color: #f3f4f6;
}
.accordion-toggle.active::after {
content: url('data:image/svg+xml,');
right: 15px;
top: 50%;
transform: translateY(-50%);
background-color: #111827;
padding: 8px;
padding-top: 2px;
}
.home .accordion-toggle.active::after {
content: url('data:image/svg+xml,');
}
@media screen and (min-width: 767px) {
.has-counter .accordion-toggle::before {
left: 36px;
}
.accordion-toggle::after,
.accordion-toggle.active::after {
right: 28px;
}
}