/* =============================================
SERVICES ACCORDION SECTION
============================================== */

.services_section {
    padding: var(--section-padding-dek);
    background-color: var(--light-bg);
    position: relative;
    display: flex;
    justify-content: center;
    height: 80vh;
}

/* Top border for services section */
.services_section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--global-border);
    background-color: var(--dark-bg);
    transition: width var(--border-transition);
}

/* Bottom border for services section */
.services_section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: var(--global-border);
    background-color: var(--dark-bg);
    transition: width var(--border-transition);
}

.services_section.border-animate::after {
    width: 100%;
}

.services_main_title {
    font-family: var(--heading-font);
    font-size: 68px;
    margin: 0;
    color: var(--dark-text);
}

/* Accordion Styles */
.services_accordion_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.accordion_item {
    position: relative;
}

/* Remove any default borders */
.accordion_item::before {
    display: none;
}

/* Animated bottom border for accordion items */
.accordion_item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: var(--global-border);
    background-color: var(--dark-bg);
    transition: width var(--border-transition);
    z-index: 1;
}

.accordion_item.border-animate::after {
    width: 100%;
}

.accordion_header {
    width: 100%;
    padding: 2rem;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    cursor: pointer;
    text-align: left;
    transition: opacity 0.3s ease;
}

.accordion_title {
    font-family: var(--heading-font);
    font-size: 32px;
    color: var(--dark-text);
    position: relative;
    display: inline-block;
}

@media (max-width: 976px) {
    .accordion_title {
        font-size: 24px;
    }
}


.accordion_icon {
    font-family: var(--body-font);
    font-size: 40px;
    color: var(--dark-text);
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: inline-block;
}

.accordion_item.active .accordion_title {
    color: var(--accent);
}

.accordion_item.active .accordion_icon {
    transform: rotate(45deg);
    color: var(--accent);
}

.accordion_item.active::after {
    background-color: var(--accent);
}

.accordion_content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.accordion_content_inner {
    padding: 0 0 32px 10px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    align-items: left;
    text-align: left;
}

.accordion_content_inner p {
    font-family: var(--body-font);
    line-height: 1.3;
    color: var(--dark-text);
    margin: 0;
}

/* Desktop: 50/50 split */
@media (min-width: 977px) {
    .services_section {
        flex-direction: row;
        align-items: stretch;
    }

    .services_title_container {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: left;
        padding: 4rem;
    }

    .services_accordion_container {
        flex: 1;
    }
}

/* Mobile: stacked */
@media (max-width: 976px) {
    .services_section {
        flex-direction: column;
        padding: var(--section-padding-mob);
        height: 110vh;
    }

    .services_main_title {
        font-size: 30px;
        padding-bottom: 35px;
        text-align: left;
    }

    .accordion_content_inner p {
        font-size: 14px;
    }

    .accordion_title {
        font-size: 20px;
    }
}