/* CSS */
.accordions-wrap {
    margin: 0 auto;
}

.accordions-wrap .accordion-item:not(:last-child) {
    margin-bottom: 24px;
}   

.accordions-wrap .accordion-head {
    display: flex;
    align-items: flex-start;
    padding: 0 0;
    cursor: pointer;
    user-select: none;
    color: #2A2A2E;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.005em;
}

.accordions-wrap .accordion-item.active .accordion-head{
    padding-bottom: 8px;
    color: #00ADC6;
}

.accordions-wrap .toggle {
    margin-top: 1px;
    margin-right: 15px;
    display: flex;
    align-items: center;
}

.accordions-wrap .icon {
    display: flex;
    align-items: center;
}

/* Hide/show icons based on accordion state */
.accordions-wrap .icon.open {
    display: none;
}

.accordions-wrap .icon.close {
    display: flex;
}

.accordions-wrap .accordion-item.active .icon.open {
    display: flex;
}

.accordions-wrap .accordion-item.active .icon.close {
    display: none;
}

.accordions-wrap .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 0;
    opacity: 0;
    transition: all 0.3s ease-out;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.005em;
    color: #57575B;
}

.accordions-wrap .accordion-item.active .accordion-content {
    max-height: 500px;
    opacity: 1;
    padding: 0 0;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .accordions-wrap .toggle {
        margin-right: 8px;
    }
    .accordions-wrap .accordion-item .accordion-head{
        padding-left: 0;
        padding-right: 0;
    }
    .accordions-wrap .accordion-item .accordion-content{
        padding-left: 0;
        padding-right: 0;
    }
    .accordions-wrap .accordion-item.active .accordion-content{
        padding-left: 0;
        padding-right: 0;
    }
}