.service-hero { background: #f4f3ee; }

.service-hero__inner {
    max-width:   1000px;
    margin:      0 auto;
    padding:     60px 0;
    text-align:  center;
}

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

.service-hero__title-accent { color: #55ac61; }

.service-hero__title-accent--break { display: block; }

.service-hero__subtitle {
    margin:      16px 0 0;
    font-size:   16px;
    font-weight: 600;
    line-height: 20px;
    color:       #000000;
}

.service-why .container { max-width: 1180px; }

.service-why__row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             60px;
    padding:         100px 0;
}

.service-why__image { flex: 1 1 0; }

.service-why__image img {
    display: block;
    width:   100%;
    height:  auto;
}

.service-why__col {
    flex:            1 1 0;
    display:         flex;
    flex-direction:  column;
    gap:             30px;
}

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

.service-why__text {
    margin:      0;
    font-size:   16px;
    font-weight: 400;
    line-height: 20px;
    color:       #000000;
}

.service-steps { background: #f7f7f7; padding: 100px 0; }

.service-steps .container { max-width: 1440px; }

.service-steps__title,
.service-steps__intro { text-align: center; }

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

.service-steps__intro {
    margin:      16px 0 0;
    font-size:   16px;
    font-weight: 400;
    line-height: 20px;
    color:       #000000;
}

.service-steps__grid {
    display:               grid;
    grid-template-columns: repeat(var(--steps-cols, 2), 1fr);
    gap:                   16px;
    margin-top:            50px;
}

.service-step {
    display:         flex;
    flex-direction:  column;
    gap:             16px;
    padding:         24px;
    background:      #ffffff;
    border:          1px solid #e1e1e1;
    border-radius:   16px;
}

.service-step__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

.service-step__icon svg { display: block; width: 48px; height: 48px; }

.service-step__num {
    font-family: "Inter", sans-serif;
    font-size:   34px;
    font-weight: 500;
    line-height: 34px;
    color:       rgba(85, 172, 97, .2);
}

.service-step__title {
    margin:          0;
    font-family:     "Inter", sans-serif;
    font-size:       20px;
    font-weight:     600;
    line-height:     24px;
    text-transform:  uppercase;
    color:           #000000;
}

.service-step__text {
    margin:      0;
    font-size:   16px;
    font-weight: 400;
    line-height: 20px;
    color:       rgba(0, 0, 0, .5);
}

.service-steps__note {
    width:          max-content;
    max-width:      100%;
    margin:         40px auto 0;
    padding:        10px 20px;
    background:     rgba(85, 172, 97, .05);
    border-radius:  50px;
    font-size:      16px;
    font-weight:    400;
    line-height:    20px;
    text-align:     center;
    color:          #000000;
}

.service-whyus { background: #55ac61; padding: 100px 0; }

.service-whyus .container { max-width: 1180px; }

.service-whyus__row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             60px;
}

.service-whyus__col {
    flex:            1 1 0;
    display:         flex;
    flex-direction:  column;
    gap:             30px;
}

.service-whyus__heading {
    display:     flex;
    align-items: center;
    gap:         15px;
}

.service-whyus__icon { flex: none; width: 98px; height: 98px; }

.service-whyus__title {
    margin:      0;
    font-size:   48px;
    font-weight: 700;
    line-height: 52px;
    color:       #ffffff;
}

.service-whyus__list {
    margin:      0;
    padding:     0;
    list-style:  none;
    display:     flex;
    flex-direction: column;
    gap:         20px;
}

.service-whyus__item {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
}

.service-whyus__item svg { flex: none; width: 24px; height: 24px; }

.service-whyus__item span {
    font-size:   16px;
    font-weight: 400;
    line-height: 20px;
    color:       #ffffff;
}

.service-whyus__image { flex: 1 1 0; }

.service-whyus__image img {
    display: block;
    width:   100%;
    height:  auto;
}

.service-faq { padding: 100px 0 50px; text-align: center; }

.service-faq .container { max-width: 1100px; }

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

.service-faq__accordion {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    text-align:     left;
}

.service-faq__item { border-radius: 8px; }

.service-faq__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-size:      18px;
    font-weight:    500;
    line-height:    24px;
    color:          #000000;
}

.service-faq__item-title::-webkit-details-marker { display: none; }

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

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

.service-faq__item-icon svg { display: block; width: 100%; height: 100%; }

.service-faq__item-icon .service-faq__icon-minus { display: none; }
.service-faq__item[open] .service-faq__item-icon .service-faq__icon-plus { display: none; }
.service-faq__item[open] .service-faq__item-icon .service-faq__icon-minus { display: block; }

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

.service-faq__item-question { flex: 1 1 auto; }

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

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

.service-faq__cta {
    display:         inline-block;
    margin-top:      40px;
    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-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);
}

.service-faq__cta:hover { background: #1c7d46; }

@media (max-width: 1024px) {
    .service-hero__inner { padding: 60px 0; }
    .service-hero__title { font-size: 36px; line-height: 42px; }

    .service-why__row { gap: 40px; padding: 60px 0; }

    .service-steps { padding: 60px 0; }
    .service-steps__title { font-size: 36px; line-height: 42px; }

    .service-whyus { padding: 60px 0; }
    .service-whyus__row { gap: 40px; }
    .service-whyus__icon { width: 60px; height: 60px; }
    .service-whyus__title { font-size: 36px; line-height: 42px; }

    .service-faq { padding: 60px 0 20px; }
    .service-faq__title { font-size: 36px; line-height: 42px; margin-bottom: 40px; }
    .service-faq__item-title { padding: 12px; }
    .service-faq__item-content { padding: 0 12px 0 40px; }
}

@media (max-width: 767px) {
    .service-hero__inner { padding: 40px 0; }
    .service-hero__title { font-size: 24px; line-height: 28px; }
    .service-hero__subtitle { font-size: 14px; line-height: 18px; }

    .service-why__row { flex-direction: column; align-items: stretch; gap: 28px; padding: 40px 0; }
    .service-why__col { gap: 20px; }
    .service-why__title { font-size: 24px; line-height: 28px; }

    .service-steps { padding: 40px 0; }
    .service-steps__title { font-size: 24px; line-height: 28px; }
    .service-steps__grid { grid-template-columns: 1fr; margin-top: 28px; }

    .service-whyus { padding: 40px 0; }
    .service-whyus__row { flex-direction: column; align-items: stretch; gap: 28px; }
    .service-whyus__col { gap: 20px; }
    .service-whyus__icon { width: 40px; height: 40px; }
    .service-whyus__title { font-size: 24px; line-height: 28px; }

    .service-faq { padding: 40px 0 20px; }
    .service-faq__title { font-size: 24px; line-height: 28px; margin-bottom: 28px; }
}
