.faq-hero {
    position: relative;
    background: #f6f5f3;
}

.faq-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(270deg, rgba(255, 255, 255, .1) 0%, #ffffff 100%);
}

.faq-hero .container {
    position:  relative;
    display:   flex;
    flex-direction: column;
    gap:       20px;
    max-width: 1680px;
    padding-top:    20px;
    padding-bottom: 60px;
}

.faq-hero .breadcrumbs__link { color: rgba(0, 0, 0, .5); }
.faq-hero .breadcrumbs__link:hover { color: #000000; }
.faq-hero .breadcrumbs__sep { color: rgba(0, 0, 0, .5); }
.faq-hero .breadcrumbs__current { color: #000000; }

.faq-hero__row {
    display:         flex;
    justify-content: space-between;
    gap:             60px;
    max-width:       1420px;
    margin:          0 auto;
    width:           100%;
}

.faq-hero__intro {
    flex:           1 1 45%;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

.faq-hero__list {
    flex:           1 1 55%;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.faq-hero__title {
    margin:      0;
    font-size:   48px;
    font-weight: 700;
    line-height: 52px;
    color:       #353329;
}

.faq-hero__title--mobile { display: none; }

.faq-hero__text {
    margin:      0;
    font-size:   18px;
    font-weight: 500;
    line-height: 24px;
    color:       #1d1d1f;
}

.faq-cta {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    padding:        20px;
    background:     #55ac61 url('../../img/faq-cta-bg.svg') bottom right / contain no-repeat;
    border-radius:  8px;
}

.faq-cta__title {
    margin:      0;
    font-size:   24px;
    font-weight: 500;
    line-height: 28px;
    color:       #ffffff;
}

.faq-cta__text {
    margin:      0;
    font-size:   16px;
    font-weight: 400;
    line-height: 20px;
    color:       #ffffff;
}

.faq-cta__phone {
    display:     flex;
    align-items: center;
    gap:         20px;
}

.faq-cta__phone-icon svg { display: block; width: 24px; height: 24px; }

.faq-cta__phone-body { display: flex; flex-direction: column; }

.faq-cta__phone-number {
    font-size:       18px;
    font-weight:     500;
    line-height:     24px;
    color:           #ffffff;
    text-decoration: none;
}

.faq-cta__phone-hours {
    font-size:   14px;
    font-weight: 400;
    line-height: 16px;
    color:       #ffffff;
}

.faq-cta__actions {
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    gap:             20px;
}

.faq-cta__button {
    display:         inline-block;
    padding:         14px 26px 14px 27px;
    background:      linear-gradient(90deg, #3f8f46 0%, #6dc170 100%);
    color:           #ffffff;
    font-family:     inherit;
    font-size:       18px;
    font-weight:     500;
    line-height:     24px;
    text-decoration: none;
    text-align:      center;
    border:          1px solid #ffffff;
    border-radius:   10px;
    box-shadow:      0 7px 13px 0 rgba(0, 0, 0, .1);
    cursor:          pointer;
    transition:      background var(--transition);
}

.faq-cta__button:hover { background: #1c7d46; }

.faq-cta__messengers { display: flex; align-items: center; gap: 20px; }

.faq-cta__messenger svg { display: block; width: 36px; height: 36px; }

.faq-accordion {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.faq-accordion__item-title {
    display:        flex;
    align-items:    center;
    gap:            16px;
    padding:        14px 16px;
    background:     #ffffff;
    border:         1px solid #f2f0ec;
    border-radius:  8px;
    cursor:         pointer;
    list-style:     none;
    font-family:    var(--font-body);
    font-size:      18px;
    font-weight:    500;
    line-height:    24px;
    color:          #000000;
}

.faq-accordion__item-title::-webkit-details-marker { display: none; }

.faq-accordion__item[open] > .faq-accordion__item-title {
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.faq-accordion__item-icon {
    flex:   none;
    width:  15px;
    height: 15px;
    color:  #000000;
}

.faq-accordion__item-icon svg { display: block; width: 100%; height: 100%; }

.faq-accordion__item-icon .faq-accordion__icon-minus { display: none; }
.faq-accordion__item[open] .faq-accordion__item-icon .faq-accordion__icon-plus { display: none; }
.faq-accordion__item[open] .faq-accordion__item-icon .faq-accordion__icon-minus { display: block; }

.faq-accordion__item[open] .faq-accordion__item-icon,
.faq-accordion__item-title:hover .faq-accordion__item-icon { color: #55ac61; }

.faq-accordion__item-question { flex: 1 1 auto; }

.faq-accordion__item-content {
    padding:       0 16px 20px 42px;
    border:        1px solid #f2f0ec;
    border-top:    0;
    border-radius: 0 0 8px 8px;
    background:    #ffffff;
}

.faq-accordion__item-content p {
    margin:      0;
    font-size:   16px;
    font-weight: 400;
    line-height: 20px;
    color:       #000000;
}

@media (max-width: 1024px) {
    .faq-hero .container { padding-top: 40px; padding-bottom: 40px; }

    .faq-hero__row { gap: 40px; max-width: 100%; }

    .faq-hero__intro { flex-basis: 55%; }
    .faq-hero__list { flex-basis: 45%; }

    .faq-hero__intro { gap: 16px; }

    .faq-hero__title { font-size: 36px; line-height: 42px; }

    .faq-cta__actions { flex-direction: column; align-items: flex-start; gap: 16px; }

    .faq-accordion__item-title { padding: 12px; }

    .faq-accordion__item-content { padding: 0 12px 20px 40px; }
}

@media (max-width: 767px) {
    .faq-hero .container { padding-top: 20px; padding-bottom: 20px; gap: 40px; }

    .faq-hero__row { flex-direction: column-reverse; gap: 28px; }

    .faq-hero__intro,
    .faq-hero__list { flex-basis: auto; width: 100%; }

    .faq-hero__title--desktop { display: none; }
    .faq-hero__title--mobile { display: block; }

    .faq-hero__title { font-size: 24px; line-height: 28px; }

    .faq-cta { padding: 16px; }

    .faq-cta__title { font-size: 18px; line-height: 22px; }
}